/* AddSupply — portada (solo index.html)
   Sin la clase .movimiento en <html> todo se ve como bloques normales (sin JavaScript
   o con «reducir movimiento»). Con ella, la «A» se abre como ventana al bajar. */

/* ---------- La «A» que se dibuja (misma animación del Portal de clientes) ---------- */
.a-logo { display: block; overflow: visible; }
.a-linea { fill: none; stroke: var(--rojo-trazo); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: a-dibuja 1.4s ease-out .3s forwards; }
.a-relleno { fill: var(--rojo-vivo); opacity: 0; animation: a-rellena .8s ease-out 1.25s forwards; transform-origin: 30px 38px; }
.a-brillo { fill: #fff; opacity: 0; animation: a-brilla 1.6s ease-in-out 1.9s infinite; }
@keyframes a-dibuja { to { stroke-dashoffset: 0; } }
@keyframes a-rellena { 0% { opacity: 0; transform: scale(.92); } 100% { opacity: 1; transform: scale(1); } }
@keyframes a-brilla { 0%, 100% { opacity: 0; } 50% { opacity: .28; } }
@media (prefers-reduced-motion: reduce) {
  .a-linea { animation: none; stroke-dashoffset: 0; }
  .a-relleno { animation: none; opacity: 1; }
  .a-brillo { animation: none; }
}

/* ---------- Escena: portada + tres líneas ---------- */
.escena { position: relative; }
.escena-fija { position: relative; overflow: hidden; }
.portada { text-align: center; padding: clamp(56px, 10vh, 110px) 0 clamp(56px, 9vh, 96px); position: relative; z-index: 4; }
.portada-a { width: clamp(110px, 24vw, 200px); margin: 0 auto 26px; }
.portada h1 { font-size: clamp(2.9rem, 8.4vw, 6.6rem); line-height: .98; margin: 0 auto .22em; max-width: 14ch; }
.portada h1 em { font-style: normal; color: var(--rojo-claro); }
.portada .bajada { margin: 0 auto; max-width: 58ch; color: var(--gris-claro); font-size: clamp(1.02rem, 1.6vw, 1.2rem); }
.portada .acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }
.desliza { display: none; }

.lente, .riel { display: none; }
.intro-lineas { position: relative; z-index: 4; text-align: center; padding: 24px var(--gutter) 64px; }

/* Sin movimiento: cada línea es un bloque con su foto */
.capitulo {
  position: relative; isolation: isolate; min-height: 72vh; display: flex; align-items: flex-end;
  padding: 96px 0 56px; background: var(--acero) var(--foto) center / cover no-repeat;
}
.capitulo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,21,23,.35) 0%, rgba(20,21,23,.88) 75%); }
.capitulo .contenedor { display: grid; gap: 12px; }
.capitulo h2 { font-size: clamp(3.4rem, 10vw, 8.2rem); margin: 0; }
.capitulo h2.largo { font-size: clamp(2.8rem, 7.4vw, 6.2rem); line-height: 1.02; }   /* títulos de dos palabras o más */
.capitulo p { max-width: 54ch; color: #e6e7e9; font-size: clamp(1rem, 1.5vw, 1.12rem); margin: 0; }
.cap-marcas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cap-marcas span { background: var(--blanco); width: 96px; height: 46px; padding: 7px 10px; display: grid; place-items: center; }
.cap-marcas img { max-height: 30px; width: 100%; object-fit: contain; }
.cap-video { display: inline-flex; align-items: center; gap: 8px; color: var(--blanco); font-weight: 600; font-size: .95rem; text-decoration: none; margin-top: 4px; width: fit-content; }
.cap-video svg { width: 22px; height: 22px; color: var(--rojo-claro); }
.cap-video:hover { text-decoration: underline; }

/* Con movimiento: la escena se queda fija y el desplazamiento la va cambiando */
.movimiento .escena { height: 560vh; }
.movimiento .escena-fija { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); }
.movimiento .portada { position: absolute; inset: 0; padding: 0 0 6vh; display: flex; flex-direction: column; justify-content: center; }
.movimiento .portada-a { width: min(34vw, 24vh, 210px); margin-bottom: clamp(16px, 3vh, 28px); }
.movimiento .desliza { display: flex; position: absolute; left: 50%; bottom: 20px; z-index: 4; transform: translateX(-50%); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: #8a9097; flex-direction: column; align-items: center; gap: 8px; }
.desliza i { display: block; width: 1px; height: 34px; background: linear-gradient(var(--rojo-claro), transparent); animation: desliza 1.8s ease-in-out infinite; }
@keyframes desliza { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

.movimiento .lente { display: block; position: absolute; inset: 0; z-index: 2; opacity: 0; will-change: clip-path; }
.lente .foto { position: absolute; inset: -4%; background: var(--g) var(--pos, center) / cover no-repeat; opacity: 0; will-change: transform, opacity; }
@media (max-width: 760px) { .lente .foto { background-image: var(--m, var(--g)); background-position: center; } .capitulo { background-image: var(--foto-m, var(--foto)); } }
.lente .foto.f0 { opacity: 1; }
.lente .tinte { position: absolute; inset: 0; background: var(--rojo-vivo); }
.lente .velo { position: absolute; inset: 0; opacity: 0; background: linear-gradient(180deg, rgba(20,21,23,.5) 0%, rgba(20,21,23,.1) 35%, rgba(20,21,23,.9) 100%), linear-gradient(90deg, rgba(20,21,23,.65) 0%, rgba(20,21,23,0) 65%); }

.movimiento .intro-lineas { display: grid; position: absolute; inset: 0; z-index: 5; place-items: center; text-align: center; opacity: 0; pointer-events: none; padding: 0 var(--gutter); }
.intro-lineas h2 { font-size: clamp(3.4rem, 11vw, 9.4rem); margin: 0; }
.intro-lineas p { color: #e6e7e9; margin: 12px auto 0; max-width: 44ch; font-size: 1.1rem; }

.movimiento .capitulo { position: absolute; left: 0; right: 0; bottom: clamp(28px, 8vh, 84px); min-height: 0; padding: 0; background: none; z-index: 5; opacity: 0; pointer-events: none; }
.movimiento .capitulo::before { display: none; }
.movimiento .capitulo.activo { pointer-events: auto; }
.capitulo .etiqueta { color: #ffd2cc; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.capitulo p { text-shadow: 0 1px 14px rgba(0,0,0,.55); }

.movimiento .riel { display: grid; position: absolute; z-index: 6; right: var(--gutter); top: 50%; transform: translateY(-50%); gap: 14px; opacity: 0; }
.riel span { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font: 600 15px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); transition: color .3s; }
.riel span::after { content: ""; width: 22px; height: 2px; background: currentColor; transition: width .3s; }
.riel span.activo { color: var(--blanco); }
.riel span.activo::after { width: 40px; background: var(--rojo-claro); }
@media (max-width: 640px) {
  .movimiento .riel { top: 18px; transform: none; gap: 6px; }
  .riel span { font-size: 12px; }
  .riel span::after { width: 14px; }
  .riel span.activo::after { width: 24px; }
}

/* ---------- Cifras ---------- */
.cifras { background: var(--acero-2); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.cifras ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.cifras li { padding: 32px 22px; border-left: 1px solid var(--linea); display: grid; gap: 4px; align-content: start; }
.cifras li:first-child { border-left: 0; padding-left: 0; }
.cifras strong { font: 700 clamp(2.3rem, 4.4vw, 3.6rem)/1 var(--display); font-variant-numeric: tabular-nums; }
.cifras strong b { color: var(--rojo-claro); }
.cifras li > span { color: var(--gris-claro); font-size: .95rem; }
@media (max-width: 760px) {
  .cifras ul { grid-template-columns: 1fr 1fr; }
  .cifras li:nth-child(3) { border-left: 0; padding-left: 0; }
  .cifras li:nth-child(n+3) { border-top: 1px solid var(--linea); }
}

/* ---------- Video de planta que se abre ---------- */
.planta { position: relative; }
.planta-fija { position: relative; overflow: hidden; min-height: clamp(460px, 76vh, 760px); display: flex; align-items: center; }
.planta-marco { position: absolute; inset: 0; background: var(--acero) url("../img/planta-poster.webp") center / cover no-repeat; will-change: clip-path; }
.planta-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.planta-marco::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,21,23,.88), rgba(20,21,23,.4) 60%, rgba(20,21,23,.2)); }
.planta-contenido { position: relative; z-index: 1; padding-top: 80px; padding-bottom: 80px; }
.planta h2 { color: var(--blanco); font-size: clamp(2.8rem, 7.4vw, 6.4rem); line-height: .95; max-width: 12ch; }
.planta p { max-width: 50ch; font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: #e2e6e9; margin-bottom: 26px; }
.planta .acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.planta-pausa {
  position: absolute; right: var(--gutter); top: 20px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  background: rgba(20,22,25,.55); color: var(--blanco); border: 1px solid rgba(255,255,255,.3);
}
.planta-pausa svg { width: 18px; height: 18px; }
.planta-pausa:hover { background: rgba(20,22,25,.8); }
.movimiento .planta { height: 200vh; }
.movimiento .planta-fija { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); min-height: 0; }
.movimiento .planta-marco { clip-path: inset(14% 12%); }


/* ---------- Portal de clientes ---------- */
.portal { background: linear-gradient(160deg, #3a1c1d 0%, var(--acero) 55%); overflow: hidden; }
.portal-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.portal h2 { font-size: clamp(2.8rem, 6.4vw, 5.2rem); }
.portal-texto > p { color: var(--gris-claro); font-size: 1.12rem; max-width: 46ch; }
.portal .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.portal .chips li { border: 1.5px solid rgba(255,255,255,.28); padding: 8px 12px; font-size: .95rem; font-weight: 500; }
.portal .acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.portal .nota-acceso { margin-top: 16px; color: #9aa0a6; font-size: .92rem; }
.pantalla { margin: 0; background: var(--blanco); color: var(--tinta); box-shadow: 0 30px 80px rgba(0,0,0,.55); font-size: 13px; line-height: 1.45; transform: perspective(1400px) rotateY(-9deg) rotateX(3deg); transform-origin: left center; }
.pantalla figcaption { position: absolute; left: 0; bottom: -28px; font-size: 12px; color: #9aa0a6; }
.pantalla { position: relative; }
.pan-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #e7e8ea; }
.pan-barra img { height: 20px; width: auto; }
.pan-barra small { color: var(--gris); text-align: right; }
.pan-cuerpo { display: grid; grid-template-columns: 120px 1fr; min-height: 320px; }
.pan-menu { background: #f6f6f7; padding: 12px 0; display: grid; align-content: start; gap: 2px; color: #555; }
.pan-menu span { padding: 6px 14px; }
.pan-menu span:first-child { color: var(--rojo-vivo); font-weight: 600; border-left: 3px solid var(--rojo-vivo); padding-left: 11px; }
.pan-main { padding: 16px 18px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.pan-main strong.saludo { font: 700 22px/1.1 var(--display); }
.pan-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pan-kpis div { background: #f6f6f7; padding: 9px 10px; }
.pan-kpis small { display: block; color: var(--gris); font-size: 11.5px; }
.pan-kpis b { font-size: 19px; font-variant-numeric: tabular-nums; }
.pedido { border-left: 4px solid #2e7d32; background: #fbfbfb; padding: 10px 12px; display: grid; gap: 7px; }
.pasos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.pasos i { height: 5px; background: #2e7d32; }
.pasos i.azul { background: #1565c0; }
.pasos i.gris { background: #dcdde0; }
.pedido small { color: var(--gris); }
.pan-lista { display: grid; color: #333; }
.pan-lista span { padding: 7px 0; border-top: 1px solid #eee; }
@media (max-width: 900px) { .portal-grid { grid-template-columns: 1fr; } .pantalla { transform: none !important; } }
@media (max-width: 480px) { .pan-cuerpo { grid-template-columns: 1fr; } .pan-menu { display: none; } }

/* ---------- Aparición al bajar (parte de un estado visible) ---------- */
.sube { transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.sube.pre { opacity: .25; transform: translateY(34px); }

@media (prefers-reduced-motion: reduce) {
  .desliza i { animation: none; }
  .sube, .sube.pre { transition: none; opacity: 1; transform: none; }
}

/* ---------- Banda de SPA ---------- */
.spa-banda { background: radial-gradient(120% 140% at 0% 50%, #3a0d0d 0%, var(--acero) 55%); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: clamp(56px, 8vw, 96px) 0; overflow: hidden; }
.spa-banda-grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 5vw, 72px); align-items: center; }
.spa-banda-marca { font: 700 clamp(6rem, 17vw, 14rem)/.8 var(--display); letter-spacing: .02em; color: transparent; -webkit-text-stroke: 2px var(--rojo-claro); background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 60%) -200% 0 / 200% 100% no-repeat; -webkit-background-clip: text; background-clip: text; animation: spa-brillo 4.5s ease-in-out infinite; }
@keyframes spa-brillo { 0%, 40% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.spa-banda h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); margin: 0 0 14px; max-width: 20ch; }
.spa-banda p { color: #e2e6e9; max-width: 56ch; margin: 0 0 24px; }
@media (max-width: 700px) { .spa-banda-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .spa-banda-marca { animation: none; } }

/* ---------- Reproductor de video dentro de la página ---------- */
.visor { position: fixed; inset: 0; z-index: 2147483600; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: rgba(11,12,14,.88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity .35s ease; }
.visor[hidden] { display: none; }
.visor.abierto { opacity: 1; }
.visor-caja { position: relative; width: min(1120px, 100%); transform: translateY(18px) scale(.96); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.visor.abierto .visor-caja { transform: none; }
.visor-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.visor-cabeza .etiqueta { margin: 0; }
.visor-titulo { font: 700 clamp(1.6rem, 3vw, 2.4rem)/1 var(--display); color: var(--blanco); margin: 0; }
.visor-cerrar { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 1px solid rgba(255,255,255,.28); color: var(--blanco); cursor: pointer; transition: border-color .2s, background .2s; }
.visor-cerrar:hover { border-color: var(--blanco); background: rgba(255,255,255,.06); }
.visor-cerrar svg { width: 18px; height: 18px; }
.visor-marco { position: relative; aspect-ratio: 16 / 9; max-height: 76vh; margin: 0 auto; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.6); overflow: hidden; cursor: pointer; }
.visor-marco video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.visor-play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.25); border: 0; color: #fff; cursor: pointer; opacity: 0; transition: opacity .25s; pointer-events: none; }
.visor-marco.pausado .visor-play { opacity: 1; pointer-events: auto; }
.visor-play span { width: 76px; height: 76px; display: grid; place-items: center; background: var(--rojo-vivo); }
.visor-play svg { width: 30px; height: 30px; margin-left: 4px; }
.visor-pie { display: flex; align-items: center; gap: 14px; margin-top: 12px; color: var(--gris-claro); font: 500 13px/1 var(--texto); font-variant-numeric: tabular-nums; }
.visor-barra { flex: 1; height: 18px; display: flex; align-items: center; cursor: pointer; }
.visor-barra i { display: block; width: 100%; height: 2px; background: rgba(255,255,255,.18); position: relative; }
.visor-barra b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--rojo-claro); }
.visor-boton { width: 36px; height: 36px; display: grid; place-items: center; background: none; border: 0; color: var(--blanco); cursor: pointer; opacity: .85; }
.visor-boton:hover { opacity: 1; }
.visor-boton svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .visor, .visor-caja { transition: none; } }
.visor-abierto .asmc-flotante, .visor-abierto .wa-flotante { visibility: hidden !important; }

/* ---------- Más que un proveedor: lo básico (discreto) frente a SPA y el Portal (lo que nos distingue) ---------- */
.mas-intro { max-width: 900px; margin-bottom: clamp(32px, 5vw, 48px); }
.mas-intro h2 { margin-bottom: 14px; font-size: clamp(2.3rem, 5.8vw, 4.6rem); line-height: 1.04; }
.mas-intro p { color: var(--gris-claro); font-size: 1.1rem; max-width: 60ch; }
.mas-base { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: 22px 0 16px; display: grid; grid-template-columns: auto 1fr; gap: 10px 32px; align-items: center; }
.mas-base-titulo { margin: 0; font: 600 .9rem/1.2 var(--display); letter-spacing: .16em; text-transform: uppercase; color: #8a9097; }
.mas-base ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.mas-base li { display: flex; align-items: center; gap: 8px; color: var(--gris-claro); font-size: .98rem; }
.mas-base li svg { width: 16px; height: 16px; color: #8a9097; flex: none; }
.mas-nota { grid-column: 2; margin: 0; font-size: .8rem; color: #7d838a; }
.mas-separador { display: flex; align-items: center; gap: 18px; margin: clamp(44px, 7vw, 72px) 0 clamp(22px, 3vw, 32px); font: 700 clamp(1.5rem, 3vw, 2.2rem)/1 var(--display); color: var(--blanco); }
.mas-separador::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--rojo-claro), transparent); }
.mas-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; }
.mas-panel { position: relative; overflow: hidden; border: 1px solid var(--linea); padding: clamp(26px, 3.4vw, 44px); background: radial-gradient(120% 90% at 0% 0%, rgba(183,28,28,.22), transparent 60%), var(--acero-2); }
.mas-panel h3 { font-size: clamp(2rem, 3.4vw, 2.8rem); margin: 4px 0 18px; line-height: 1; }
.mas-panel .boton { margin-top: 26px; }
.mas-puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mas-puntos li { display: flex; gap: 12px; align-items: baseline; color: #e6e7e9; font-size: 1.02rem; }
.mas-puntos li::before { content: ""; flex: none; width: 14px; height: 2px; background: var(--rojo-claro); transform: translateY(-4px); }
.mas-spa-marca { font-size: clamp(5rem, 11vw, 8.5rem); margin-bottom: 18px; }
.mas-portal { display: grid; grid-template-columns: minmax(170px, 250px) minmax(0, 1fr); gap: clamp(22px, 3vw, 40px); align-items: center; background: radial-gradient(120% 90% at 100% 100%, rgba(183,28,28,.24), transparent 60%), var(--acero-2); }
.mas-telefono { aspect-ratio: 9 / 16; border: 8px solid #0d0e10; border-radius: 26px; overflow: hidden; background: #0d0e10; box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px #3a3f45; }
.mas-telefono video { display: block; width: 100%; height: 100%; object-fit: cover; }
.mas-portal .nota-acceso { margin-top: 14px; color: #9aa0a6; font-size: .9rem; }
.mas-acciones { margin-top: clamp(32px, 5vw, 48px); }
@media (max-width: 980px) { .mas-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .mas-base { grid-template-columns: 1fr; }
  .mas-base ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
  .mas-nota { grid-column: 1; }
  .mas-portal { grid-template-columns: 1fr; }
  .mas-telefono { width: min(62vw, 250px); margin: 0 auto; }
}

/* ---------- «Y mucho más»: franja corta después de las especialidades (no son las únicas líneas) ---------- */
.mas-rubros { background: #f4f5f6; color: #1d2125; padding: 18px 0; border-top: 4px solid var(--rojo); }
.mas-rubros .contenedor { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; text-align: center; }
.mas-rubros b { font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; color: var(--rojo); }
.mas-rubros span { color: #3b4147; }
.mas-rubros a { font-weight: 700; color: var(--rojo); white-space: nowrap; }