/* ============================================================
   SmartShops Arbitrade — sistema visual compartido
   Paleta y tipografia heredadas de la identidad Arbitrade.
   ============================================================ */

:root{
  /* Paleta Arbitrade — claro (halos/gradientes) · base · oscuro (texto/sombras) */
  --cream-50:#F4F0EA; --cream-100:#EAE3D9; --cream-200:#D8CCBD;
  --ink:#38191A;
  --cafe-l:#BC8E76;    --cafe:#914444;     --cafe-d:#673437;
  --azul-l:#83CFFF;    --azul:#0676FF;     --azul-d:#134695;
  --naranja-l:#FFA770; --naranja:#FF5F15;  --naranja-d:#C72D07;
  --verde-l:#A2D36A;   --verde:#60A022;    --verde-2:#2E6E63; --verde-d:#314C1B;
  --rosa-l:#F9C2E9;    --rosa:#DD66AD;     --rosa-d:#8F255B;
  --amarillo-l:#F0E959;--amarillo:#C9A91A;

  --sombra-s:0 14px 30px -18px rgba(56,25,26,.25);
  --sombra-m:0 16px 34px -20px rgba(56,25,26,.30);
  --sombra-l:0 26px 50px -18px rgba(56,25,26,.50);

  --radio:22px;
  --barra:clamp(52px,7vh,64px); /* alto de la barra superior */
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  background:var(--cream-50);
  line-height:1.5;
  overflow-x:hidden;
}

img{max-width:100%; display:block}
a{color:inherit}

/* ============ BARRA SUPERIOR ============ */
.barra{
  position:fixed; inset:0 0 auto 0; z-index:50; height:var(--barra);
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:0 clamp(14px,3.5vw,32px);
  background:rgba(244,240,234,.86);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--cream-100);
}
.marca{
  display:flex; align-items:baseline; gap:.45em;
  font-family:"Fraunces",Georgia,serif; font-weight:700;
  font-variation-settings:"opsz" 40;
  font-size:clamp(15px,2.1vw,20px); letter-spacing:-.02em;
  text-decoration:none;
}
.marca .punto{color:var(--naranja)}
/* Wordmark oficial de Arbitrade. Alto fijo y ancho automatico para que no se
   deforme; el alt="Arbitrade" cubre la lectura por voz. */
.marca .wordmark{
  height:clamp(11px,1.5vw,14px); width:auto; opacity:.62;
  align-self:center; margin-left:.15em;
}
.barra-cta{
  font-size:clamp(11px,1.2vw,13px); font-weight:700; text-decoration:none;
  padding:.62em 1.15em; border-radius:999px; white-space:nowrap;
  background:linear-gradient(120deg,var(--naranja),var(--naranja-d));
  color:#fff; box-shadow:0 8px 18px -10px rgba(199,45,7,.9);
}

/* Progreso del recorrido: linea fina bajo la barra */
.progreso{
  position:fixed; top:var(--barra); left:0; z-index:51;
  height:3px; width:0%;
  background:linear-gradient(90deg,var(--naranja),var(--rosa));
  transition:width .25s ease-out;
}

/* ============ EL RECORRIDO (scroll-snap) ============ */
/* Contenedor propio en lugar del scroll del documento: en movil evita que la
   barra de direcciones cambie de alto y descoloque las pantallas. */
.deck{
  height:100vh; height:100svh;
  overflow-y:auto; overflow-x:hidden;
  scroll-snap-type:y mandatory;
  /* Sin esto, al tabular a un elemento de otra pantalla el snap lo reencaja y
     puede dejarlo debajo de la barra fija. */
  scroll-padding-block-start:calc(var(--barra) + 8px);
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.deck::-webkit-scrollbar{display:none}

.pantalla{
  position:relative;
  min-height:100vh; min-height:100svh;
  /* Sin scroll-snap-stop: en moviles bajos alguna pantalla es mas alta que el
     viewport y forzar la parada en cada limite la vuelve dificil de recorrer. */
  scroll-snap-align:start;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:clamp(14px,2.6vh,30px);
  padding:calc(var(--barra) + clamp(18px,3vh,34px)) clamp(20px,5vw,64px) clamp(64px,9vh,90px);
  text-align:center;
}
/* Pantallas con mucho contenido: no forzar centrado vertical si la pantalla es baja */
@media (max-height:680px){
  .pantalla{justify-content:flex-start}
}

/* ============ TIPOGRAFIA ============ */
.kicker{
  font-size:clamp(9px,1vw,12px); font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--naranja-d); margin:0;
}

h1.titular{
  font-family:"Fraunces",Georgia,serif; font-weight:700;
  font-variation-settings:"opsz" 96;
  font-size:clamp(34px,7vw,84px); line-height:1.04; letter-spacing:-.02em;
  margin:0; max-width:15ch;
}
h2.titular{
  font-family:"Fraunces",Georgia,serif; font-weight:700;
  font-variation-settings:"opsz" 72;
  font-size:clamp(26px,4.4vw,48px); line-height:1.1; letter-spacing:-.02em;
  margin:0; max-width:22ch;
}
.titular .punto{color:var(--naranja)}
.apoyo{
  font-size:clamp(14px,1.55vw,18px); opacity:.68; margin:0;
  max-width:56ch; line-height:1.55;
}
.apoyo strong{opacity:1; font-weight:700}
/* Atenuado con color y no con opacity: opacity crea un grupo y un hijo no
   puede recuperarla, asi que el enlace del telefono heredaba 2,72:1. Con
   color, el <a> vuelve a tinta plena. */
.nota{
  font-size:clamp(10px,1.05vw,12px); color:rgba(56,25,26,.65); margin:0;
  max-width:64ch; line-height:1.45;
}
.nota a{color:var(--naranja-d); text-decoration:underline}

/* ============ HERO (gradiente de marca) ============ */
/* El recorte se limita al hero: es lo unico que necesita contener su
   degradado. En el resto de pantallas recortaria contenido que no quepa. */
/* position:relative es imprescindible: .pantalla lo trae, pero .bloque no, y
   sin el el ::before se ancla al bloque contenedor inicial. En la pagina
   larga eso dejaba la pantalla de cierre en crema plano. */
.hero{position:relative; overflow:hidden; isolation:isolate}
.hero::before{
  content:""; position:absolute; inset:-30%; z-index:0; pointer-events:none;
  background:
    radial-gradient(34% 40% at 16% 20%, rgba(255,167,112,.55), transparent 60%),
    radial-gradient(40% 46% at 86% 16%, rgba(240,233,89,.42), transparent 60%),
    radial-gradient(46% 52% at 82% 86%, rgba(249,194,233,.50), transparent 60%),
    radial-gradient(50% 56% at 16% 90%, rgba(255,95,21,.28), transparent 62%);
  animation:drift 44s linear infinite;
}
.hero > *{position:relative; z-index:1}


/* ============ BOTONES ============ */
.botones{display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-size:clamp(13px,1.35vw,16px); font-weight:700; text-decoration:none;
  padding:.85em 1.5em; border-radius:999px; border:1px solid transparent;
  min-height:48px; cursor:pointer;
  transition:transform .2s, box-shadow .2s, background .2s;
}
.btn-primario{
  background:linear-gradient(120deg,var(--naranja),var(--naranja-d));
  color:#fff; box-shadow:0 14px 28px -14px rgba(199,45,7,.95);
}
.btn-secundario{
  background:#fff; color:var(--ink); border-color:var(--cream-200);
  box-shadow:var(--sombra-s);
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--sombra-l)}
.btn:active{transform:translateY(0)}
.btn svg{height:1.1em; width:auto; flex:none}

/* Flecha de avance al pie de cada pantalla */
.avanzar{
  position:absolute; left:50%; bottom:clamp(14px,2.4vh,26px); transform:translateX(-50%);
  z-index:2; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:none; border:0; padding:0;
  /* --naranja sobre crema da 2,68:1 y el chevron es lo unico que identifica
     el control: WCAG 1.4.11 pide 3:1. El oscuro da 4,86:1. */
  color:var(--naranja-d);
  animation:latido 2.6s ease-in-out infinite;
}
.avanzar svg{height:26px; width:26px}
.avanzar:hover{color:var(--cafe-d)}

/* ============ TARJETAS ============ */
.rejilla{
  display:grid; gap:clamp(12px,1.6vw,20px);
  width:min(1040px,94vw); text-align:left;
}
.rejilla.dos{grid-template-columns:repeat(2,1fr)}
.rejilla.tres{grid-template-columns:repeat(3,1fr)}
.rejilla.cuatro{grid-template-columns:repeat(4,1fr)}

.tarjeta{
  --ac:var(--naranja); --ac-d:var(--naranja-d);
  position:relative; overflow:hidden; background:#fff;
  border:1px solid var(--cream-100); border-radius:var(--radio);
  padding:clamp(15px,2.2vh,24px) clamp(14px,1.8vw,22px);
  box-shadow:var(--sombra-m);
  transition:transform .25s, box-shadow .25s, background .25s;
}
/* Halo de color de la tarjeta. Estatico a proposito: son muchas tarjetas por
   pantalla y animarlas todas cuesta bateria en movil sin ganancia visible a
   este nivel de opacidad. El movimiento se reserva al degradado del hero. */
.tarjeta::before{
  content:""; position:absolute; inset:-40%; z-index:0; pointer-events:none; opacity:.16;
  background:radial-gradient(40% 46% at 30% 25%, var(--ac), transparent 62%);
}
.tarjeta > *{position:relative; z-index:1}
.tarjeta .icono{color:var(--ac); margin-bottom:clamp(6px,1.2vh,12px)}
.tarjeta .icono svg{height:clamp(22px,2.2vw,28px); width:auto}
.tarjeta .nombre{
  font-family:"Fraunces",Georgia,serif; font-weight:600;
  font-variation-settings:"opsz" 40;
  font-size:clamp(15px,1.5vw,19px); margin:0 0 4px; line-height:1.2;
}
.tarjeta .desc{font-size:clamp(12px,1.15vw,14px); opacity:.64; line-height:1.45; margin:0}

/* Realce fuerte: solo donde hay puntero de verdad (no en tactil) */
@media (hover:hover){
  .tarjeta:hover{
    transform:translateY(-5px); box-shadow:var(--sombra-l);
    /* Sobre el acento claro el texto blanco se quedaba en 2,3-3,2:1 (la
       tarjeta amarilla era ilegible). Con el tono oscuro va de 5,5 a 9,9:1. */
    background:radial-gradient(80% 90% at 22% 18%, var(--ac-d), transparent 70%),
               linear-gradient(160deg, var(--ac-d), var(--ac-d));
  }
  .tarjeta:hover .icono,.tarjeta:hover .nombre{color:#fff}
  .tarjeta:hover .desc{color:rgba(255,255,255,.86); opacity:1}
}

/* Colores de acento: reparte la paleta */
.ac-naranja{--ac:var(--naranja); --ac-d:var(--naranja-d)}
.ac-azul{--ac:var(--azul); --ac-d:var(--azul-d)}
.ac-verde{--ac:var(--verde); --ac-d:var(--verde-d)}
.ac-rosa{--ac:var(--rosa); --ac-d:var(--rosa-d)}
.ac-cafe{--ac:var(--cafe); --ac-d:var(--cafe-d)}
.ac-amarillo{--ac:var(--amarillo); --ac-d:var(--cafe-d)}

/* ============ SELECTOR DE MODELOS (pestanas) ============ */
/* Compartido: vive en la pantalla del surtido del recorrido y puede
   reutilizarse en la pagina larga. No lo metas bajo la cabecera de una
   de las dos paginas o la otra se quedara sin estilos al limpiar. */
.modelos{
  width:min(1040px,94vw);
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(16px,2.6vh,28px);
}
.pestanas{
  display:inline-flex; gap:4px; padding:4px; max-width:100%;
  background:#fff; border:1px solid var(--cream-200); border-radius:999px;
  box-shadow:var(--sombra-s);
}
.pestana{
  font-family:inherit; font-size:clamp(12.5px,1.3vw,15px); font-weight:700;
  color:var(--ink); background:none; border:0; cursor:pointer;
  padding:.7em 1.35em; border-radius:999px; min-height:44px; white-space:nowrap;
  transition:background .2s, color .2s, box-shadow .2s;
}
.pestana[aria-selected="true"]{
  background:linear-gradient(120deg,var(--naranja),var(--naranja-d));
  color:#fff; box-shadow:0 10px 20px -12px rgba(199,45,7,.9);
}
@media (hover:hover){
  .pestana:not([aria-selected="true"]):hover{background:var(--cream-100)}
}

.panel{
  width:100%;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(12px,2vh,20px);
}
/* Sin JS los dos paneles se ven uno tras otro, cada uno con su nombre visible,
   asi el contenido nunca depende del script. Con JS (clase .js en <html>) solo
   se muestra el panel elegido, y desde el primer pintado: nada de parpadeo. */
.js .panel{display:none}
.js .panel.activo{display:flex}
.panel:focus-visible{outline:2px solid var(--naranja); outline-offset:6px; border-radius:8px}
.panel-nombre{
  font-family:"Fraunces",Georgia,serif; font-weight:600;
  font-variation-settings:"opsz" 40;
  font-size:clamp(18px,2.2vw,26px); margin:0; line-height:1.2;
}
.panel-resumen{
  margin:0; max-width:56ch;
  font-size:clamp(13.5px,1.4vw,16.5px); opacity:.7; line-height:1.5;
}

/* Dentro del recorrido el nombre del modelo sobra: ya lo dice la pestana
   activa, y una pantalla mide 100svh. Se esconde solo cuando hay JS, que es
   cuando las pestanas funcionan; sin JS vuelve a hacer falta para distinguir
   los dos paneles apilados. */
.js .pantalla .panel-nombre{display:none}

/* ---- Los tres puntos de cada modelo ----
   Version compacta de las tarjetas: dentro de una pantalla del recorrido no
   hay alto para tres .tarjeta apiladas (unos 108 px cada una frente a 38). */
.puntos{
  list-style:none; margin:0; padding:0;
  width:min(620px,94vw); text-align:left;
  display:flex; flex-direction:column; gap:clamp(6px,1.1vh,11px);
}
.puntos li{
  position:relative; padding-left:19px;
  font-size:clamp(13px,1.35vw,15.5px); line-height:1.45;
  color:rgba(56,25,26,.68);
}
.puntos li::before{
  content:""; position:absolute; left:3px; top:.6em;
  width:7px; height:7px; border-radius:50%; background:var(--naranja);
}
.puntos li b{color:var(--ink); font-weight:700}

/* Esta pantalla lleva foto y selector a la vez, asi que el espaciado entre
   bloques va mas apretado que en el resto del recorrido: si no, la flecha de
   avance se come la nota del pie. */
#productos{gap:clamp(10px,1.9vh,22px)}

@media (max-width:520px){
  /* Los dos nombres no caben en una fila: el selector pasa a dos columnas
     iguales a todo el ancho en vez de desbordar la pantalla. */
  .pestanas{
    display:grid; grid-template-columns:1fr 1fr;
    width:min(420px,94vw); border-radius:18px;
  }
  .pestana{padding:.7em .6em; white-space:normal}
}

/* ============ PASOS NUMERADOS ============ */
.pasos{
  display:grid; gap:clamp(10px,1.5vh,16px);
  width:min(820px,94vw); text-align:left;
}
.paso{
  display:flex; align-items:flex-start; gap:clamp(12px,1.8vw,20px);
  background:#fff; border:1px solid var(--cream-100); border-radius:20px;
  padding:clamp(13px,2vh,20px) clamp(15px,2vw,24px);
  box-shadow:var(--sombra-s);
}
/* El numero acompana al titulo en la misma linea, no en una columna aparte. */
.paso .num{
  font-family:"Fraunces",Georgia,serif; font-weight:700;
  font-variation-settings:"opsz" 72;
  font-size:1.25em; line-height:1; color:var(--ac,var(--naranja));
  margin-right:.3em;
}
/* Los pasos viven en una columna de 820 px, no a todo el ancho de ventana, asi
   que los tamanos en vw se quedaban clavados en el minimo y el texto bailaba
   dentro de tarjetas grandes. Escala subida y minimos mas altos. */
.paso b{display:block; font-size:clamp(16px,2vw,20px); margin-bottom:3px}
.paso span{font-size:clamp(14px,1.6vw,16.5px); opacity:.66; line-height:1.5}

/* ============ VIDEO (carga diferida) ============ */
.video{
  position:relative; width:min(880px,94vw); aspect-ratio:16/9;
  border-radius:var(--radio); overflow:hidden; border:0; padding:0;
  background:var(--ink); box-shadow:var(--sombra-l); cursor:pointer;
  display:block;
}
.video img,.video iframe{width:100%; height:100%; object-fit:cover; border:0; display:block}
.video .play{
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(56,25,26,.28); transition:background .25s;
}
.video:hover .play{background:rgba(56,25,26,.12)}
.video .play span{
  width:clamp(58px,8vw,84px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(120deg,var(--naranja),var(--naranja-d));
  box-shadow:0 18px 40px -14px rgba(199,45,7,.95);
}
/* Sin desplazamiento: se pidio el triangulo centrado en el circulo. */
.video .play svg{height:40%; width:auto}

/* ============ GALERIA ============ */
/* Las columnas van en proporcion a la forma de cada foto (el script las
   escribe en --peso), asi las alturas coinciden solas y ninguna se recorta.
   Con tres casillas iguales a 4:3 se comian los bordes de todas. */
.galeria{
  display:grid; gap:clamp(10px,1.4vw,16px);
  grid-template-columns:var(--columnas,repeat(3,1fr));
  align-items:start; width:min(1240px,94vw);
}
.galeria figure,.galeria .pieza{
  margin:0; padding:0; display:block; width:100%;
  border-radius:18px; overflow:hidden; background:var(--cream-100);
  aspect-ratio:var(--proporcion,4/3);
  box-shadow:var(--sombra-m); cursor:zoom-in;
  border:1px solid var(--cream-100);
}
.galeria img{width:100%; height:100%; object-fit:cover; transition:transform .35s}
@media (hover:hover){.galeria figure:hover img,.galeria .pieza:hover img{transform:scale(1.05)}}

/* Marcador mientras no hay foto real */
.hueco{
  width:100%; height:100%; display:grid; place-items:center; text-align:center;
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cafe); opacity:.55; padding:12px;
  background:repeating-linear-gradient(45deg,var(--cream-100) 0 10px,var(--cream-50) 10px 20px);
}

/* Visor a pantalla completa */
.visor{
  position:fixed; inset:0; z-index:100; display:none;
  place-items:center; padding:clamp(16px,4vw,48px);
  background:rgba(56,25,26,.92);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.visor.abierto{display:grid}
.visor img{max-width:100%; max-height:86vh; border-radius:14px; object-fit:contain}
.visor .cerrar{
  position:absolute; top:clamp(12px,2.5vh,24px); right:clamp(12px,3vw,28px);
  width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.14); color:#fff; display:grid; place-items:center;
}
.visor .cerrar svg{height:22px; width:22px}

/* ============ CINTA ============ */
.cinta{
  width:min(1040px,94vw); border-radius:999px;
  background:var(--ink); color:#fff; text-align:center;
  padding:clamp(11px,1.8vh,16px) clamp(18px,3vw,36px);
  font-size:clamp(12.5px,1.3vw,16px);
}
.cinta b{color:var(--naranja-l)}
.cinta.destacada{background:linear-gradient(120deg,var(--naranja),var(--naranja-d))}
.cinta.destacada b{color:#fff}

/* ============ ANIMACIONES ============ */
@keyframes drift{to{transform:rotate(360deg)}}
@keyframes latido{
  0%,100%{transform:translate(-50%,0)}
  50%{transform:translate(-50%,7px)}
}
/* El contenido es visible por defecto. Solo se oculta para animarlo cuando hay
   JS (clase .js en <html>), asi nunca queda una pantalla en blanco si el script
   no carga. */
.js.anim .entra{opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease}
.js.anim .entra.visible{opacity:1; transform:none}
.entra:nth-child(2){transition-delay:.06s}
.entra:nth-child(3){transition-delay:.12s}
.entra:nth-child(4){transition-delay:.18s}
.entra:nth-child(5){transition-delay:.24s}
.entra:nth-child(6){transition-delay:.30s}
.entra:nth-child(7){transition-delay:.36s}
.entra:nth-child(8){transition-delay:.42s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  /* Misma especificidad que la regla que esconde, y despues en el archivo:
     gana por orden. Con .entra a secas perdia siempre y quien pide movimiento
     reducido se quedaba con todo el contenido invisible. */
  .js.anim .entra{opacity:1; transform:none}
  .deck{scroll-behavior:auto}
}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .rejilla.cuatro{grid-template-columns:repeat(2,1fr)}
  .rejilla.tres{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .rejilla.dos,.rejilla.tres,.rejilla.cuatro{grid-template-columns:1fr}
  .pantalla{padding-left:18px; padding-right:18px}
  .cinta{border-radius:18px}
  /* Tarjeta apaisada: el icono a la izquierda ocupando las dos filas, y el
     titulo y la descripcion apilados a su derecha. Con flex los tres hijos
     quedaban en columnas y el titulo se partia en tres lineas. */
  .tarjeta{
    display:grid; grid-template-columns:auto 1fr;
    column-gap:14px; row-gap:2px; align-items:start;
  }
  .tarjeta .icono{grid-column:1; grid-row:1 / span 2; margin-bottom:0}
  .tarjeta .nombre{grid-column:2; grid-row:1}
  .tarjeta .desc{grid-column:2; grid-row:2}
}

/* ============================================================
   PAGINA LARGA ("Como se contrata") — scroll normal, sin snap
   ============================================================ */
.doc{padding-top:var(--barra)}
.bloque{
  padding:clamp(38px,7vh,80px) clamp(20px,5vw,64px);
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(14px,2.4vh,28px); text-align:center;
}
.bloque.crema{background:var(--cream-100)}

/* Aviso de que la tarifa la da el gestor */
.aviso{
  width:min(760px,94vw); text-align:left;
  display:flex; gap:clamp(12px,1.8vw,18px); align-items:flex-start;
  background:#fff; border:1px solid var(--cream-200); border-radius:var(--radio);
  padding:clamp(15px,2.4vh,24px) clamp(16px,2.2vw,26px);
  box-shadow:var(--sombra-m);
}
.aviso .icono{color:var(--naranja); flex:none}
.aviso .icono svg{height:26px; width:26px}
.aviso b{display:block; font-size:clamp(14px,1.45vw,17px); margin-bottom:3px}
.aviso span{font-size:clamp(12.5px,1.25vw,15px); opacity:.66; line-height:1.5}

/* ---- Enlaces antiguos a #modelos (compartidos por WhatsApp antes de
       que el selector se mudara a la home): sin este margen la barra
       fija tapa el titulo del bloque que los recibe. ---- */
#modelos{scroll-margin-top:var(--barra)}

/* ---- Pie ---- */
.pie{
  background:var(--ink); color:#fff; text-align:center;
  padding:clamp(28px,5vh,52px) clamp(20px,5vw,64px);
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.pie a{color:var(--naranja-l)}
.pie .legal{font-size:clamp(10.5px,1.05vw,12.5px); color:rgba(255,255,255,.72); max-width:70ch; line-height:1.5}

/* ============================================================
   MOVILES BAJOS (iPhone SE y similares)
   Compacta espaciados para que cada pantalla quepa entera y el
   recorrido siga leyendose como un pase de diapositivas.
   ============================================================ */
@media (max-height:740px) and (max-width:900px){
  /* Solo moviles bajos: en un portatil de 1366x768 esto metia tipografia de
     escritorio con ritmo de movil, y ademas pisaba la rejilla de abajo. */
  .pantalla{
    padding-top:calc(var(--barra) + 14px);
    padding-bottom:60px;
    gap:11px;
  }
  .rejilla,.pasos,.galeria{gap:9px}
  .tarjeta{padding:11px 14px}
  .paso{padding:11px 14px}
  .apoyo{font-size:14px; line-height:1.45}
  /* El selector convive con la foto de gama en una sola pantalla: aqui hay
     que recuperar cada pixel o el boton de la presentacion se sale por abajo. */
  #productos{gap:9px}
  .pantalla .modelos{gap:10px}
  .pantalla .panel{gap:11px}
  .pantalla .puntos{gap:4px}
  .pantalla .puntos li{font-size:12.5px; line-height:1.4}
  .pantalla .pestana{min-height:40px; padding:.55em 1em}
}

/* ============================================================
   IMAGENES DENTRO DEL RECORRIDO
   ============================================================ */

/* --- Foto de portada: banda ancha bajo el titular --- */
/* La caja conserva la proporcion de la foto y se dimensiona por su ALTO, que
   es el recurso escaso en el recorrido. Asi la escena se ve entera: si hubiera
   fijado un alto de franja, el recorte se comeria la SmartShop. */
.foto-portada{
  height:clamp(150px,30svh,340px);
  aspect-ratio:1200/896;
  max-width:94vw;
  border-radius:var(--radio); overflow:hidden;
  box-shadow:var(--sombra-l); border:1px solid rgba(255,255,255,.5);
}
.foto-portada img{width:100%; height:100%; object-fit:cover}

/* --- Dos columnas: imagen + contenido --- */
/* La columna de la foto se ajusta a lo que ocupe la imagen (auto), y la imagen
   se dimensiona por ALTO. Con un ancho fijo la foto quedaba flotando pequena
   en medio de una columna mucho mas ancha que ella. */
.duo{
  display:grid; gap:clamp(16px,3vw,44px);
  grid-template-columns:auto minmax(0,1fr);
  align-items:center; width:min(1000px,94vw); text-align:left;
}
.duo-foto{margin:0}
.duo-foto img{
  height:min(48svh,430px); width:auto; max-width:34vw;
  object-fit:contain; margin:0 auto;
}
.duo .rejilla{width:100%}

/* --- Banda apaisada (gama de productos) --- */
/* --- Foto de gama: una sola pieza, dimensionada por alto para que la
       pantalla mande sobre la imagen y no al reves. --- */
.foto-gama{
  height:clamp(200px,46svh,470px);
  aspect-ratio:1400/869;
  max-width:94vw; margin:0;
  border-radius:var(--radio); overflow:hidden;
  box-shadow:var(--sombra-m); border:1px solid var(--cream-100);
}
.foto-gama img{width:100%; height:100%; object-fit:cover}

/* --- Miniatura dentro de cada paso --- */
.paso .foto{
  flex:none; width:clamp(58px,8vw,96px); aspect-ratio:1;
  border-radius:14px; overflow:hidden; background:var(--cream-100);
}
.paso .foto img{width:100%; height:100%; object-fit:cover}

@media (max-width:900px){
  .duo{grid-template-columns:1fr; gap:clamp(12px,2.4vh,20px); justify-items:center}
  .duo-foto img{height:min(24svh,260px); max-width:78vw}
}
@media (max-height:740px){
  .foto-portada{height:clamp(120px,21svh,200px)}
  .duo-foto img{height:24svh}
}

@media (max-width:560px){
  /* En movil las imagenes compiten con el texto por el alto de pantalla:
     se recortan un poco para que cada seccion siga cabiendo de una pasada. */
}

/* --- Video vertical (Shorts) como columna de medios --- */
.duo-media{margin:0; display:flex; justify-content:center; align-items:center}
.video.vertical{
  /* Se dimensiona por alto, igual que la foto del bloque "duo": el ancho lo
     deriva la proporcion 9:16 del Short. */
  aspect-ratio:9/16;
  height:min(52svh,480px);
  width:auto;
}
@media (max-width:900px){
  .video.vertical{height:min(38svh,340px)}
}
@media (max-height:740px){
  .video.vertical{height:34svh}
}

/* --- Rotulo de marca como portada del video horizontal ---
   Reconstruido con el degradado, la tipografia y el wordmark de la web en vez
   de una captura: queda nitido a cualquier tamano y no pesa nada. */
.video.rotulo{background:var(--cream-50)}
.rotulo-inner{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(7px,1.4vh,13px);
}
.rotulo-titulo{
  font-family:"Fraunces",Georgia,serif; font-weight:700;
  font-variation-settings:"opsz" 96;
  font-size:clamp(28px,5vw,56px); line-height:1; letter-spacing:-.02em;
  color:var(--ink);
}
/* Mas especifico que `.video img`, que estira cualquier imagen del reproductor
   a todo el marco: el wordmark tiene que conservar su tamano. */
.video.rotulo .rotulo-marca{
  height:clamp(12px,1.6vw,19px); width:auto;
  object-fit:contain; opacity:.5;
}
.rotulo-play{
  margin-top:clamp(6px,1.5vh,14px);
  width:clamp(52px,7vw,74px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(120deg,var(--naranja),var(--naranja-d));
  box-shadow:0 18px 40px -14px rgba(199,45,7,.95);
  transition:transform .25s;
}
.rotulo-play svg{height:40%; width:auto}
@media (hover:hover){
  .video.rotulo:hover .rotulo-play{transform:scale(1.07)}
}

@media (max-width:560px){
  /* "Que aporta" carga con el video vertical ademas de las seis ventajas:
     las tarjetas pasan a dos columnas compactas y el video cede algo de alto. */
  #beneficios .rejilla{grid-template-columns:1fr 1fr; gap:9px}
  #beneficios .tarjeta{grid-template-columns:1fr; row-gap:3px; padding:11px 12px}
  #beneficios .tarjeta .icono{grid-column:1; grid-row:1; margin-bottom:2px}
  #beneficios .tarjeta .nombre{grid-column:1; grid-row:2; font-size:14px}
  #beneficios .tarjeta .desc{grid-column:1; grid-row:3; font-size:11.5px; line-height:1.35}
  #beneficios .video.vertical{height:min(30svh,270px)}
  /* La foto del equipo tambien cede un poco para que "Que es" quepa */
  #que-es .duo-foto img{height:min(20svh,220px)}
}

@media (max-width:700px){
  /* En pantalla estrecha el ancho es el recurso escaso: si se sigue mandando
     por alto, el max-width recorta la foto por los lados y se comen productos.
     Aqui manda el ancho y el alto lo deduce la proporcion. */
  .foto-gama{height:auto; width:min(400px,78vw); max-width:none}
}

/* La foto comparte pantalla con el selector, asi que en moviles bajos cede
   ancho. Se encoge por ancho y no por alto a proposito: la caja mantiene la
   proporcion 1400/869 de la imagen y no se recorta ningun producto. */
@media (max-width:700px) and (max-height:740px){
  .foto-gama{width:min(300px,72vw)}
}
@media (min-width:701px) and (max-height:740px){
  .foto-gama{height:clamp(150px,26svh,240px)}
}

@media (max-width:820px){
  /* Tres fotos apiladas suman mas de 1000 px: en un movil de 812 solo se veia
     una y media, y debajo del corte quedaba justo la prueba social. En tira
     horizontal caben las tres a la misma altura, se pasan con el dedo y
     ninguna se recorta: cada una deduce su ancho de su proporcion. */
  .galeria{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:10px; width:min(560px,94vw); scrollbar-width:none;
  }
  .galeria::-webkit-scrollbar{display:none}
  .galeria figure,.galeria .pieza{
    flex:0 0 auto; scroll-snap-align:center;
    max-height:none; height:min(34svh,290px);
    width:auto; max-width:none;
  }
}

/* ============================================================
   LA PANTALLA DEL SURTIDO EN PORTATIL
   Medida a 1366x768: 965 px de contenido en 768 de alto. Se calibro al pixel
   para 375x812 y en escritorio los clamp suben al maximo, asi que el
   presupuesto se rompe y el selector se sale por abajo — justo el caso de
   proyectarla en una reunion. Aqui sobra ancho y falta alto: la foto y el
   selector se ponen uno al lado del otro en vez de apilarse.
   ============================================================ */
@media (min-width:1000px) and (max-height:940px){
  #productos{
    display:grid; align-content:center; justify-items:center;
    grid-template-columns:auto minmax(0,540px);
    column-gap:clamp(24px,3vw,48px);
    row-gap:clamp(6px,1.2vh,14px);
  }
  #productos > .kicker,
  #productos > .titular,
  #productos > .apoyo,
  #productos > .nota{grid-column:1 / -1}
  #productos > .apoyo{max-width:70ch}
  #productos > .foto-gama{
    grid-column:1; align-self:center;
    height:clamp(190px,32svh,300px);
  }
  #productos > .modelos{grid-column:2; align-self:center; width:100%}
}

/* ============================================================
   PORTATILES BAJOS (1366x768 y similares)
   Habia compactacion para el iPhone SE pero ninguna para un portatil: a 768
   de alto, los 146 px de relleno vertical y las separaciones de 20 px dejaban
   cuatro pantallas por encima del viewport. Mismo criterio que en movil, con
   los valores de escritorio.
   ============================================================ */
@media (min-width:901px) and (max-height:820px){
  .pantalla{
    padding-top:calc(var(--barra) + 12px);
    padding-bottom:38px;
    gap:clamp(10px,1.5vh,18px);
  }
  .rejilla,.pasos,.galeria{gap:clamp(8px,1.2vh,14px)}
  .tarjeta{padding:12px 16px}
  .paso{padding:10px 14px}
  /* La foto del equipo es lo que desborda "Que es": manda el alto y el ancho
     lo deduce su proporcion, asi no se recorta. */
  #que-es .duo-foto img{height:min(38svh,300px)}
}

/* ============================================================
   FOCO VISIBLE
   Solo habia :focus-visible en .panel. El resto dependia del anillo por
   defecto del navegador, que sobre el degradado naranja de las pestañas y de
   los botones primarios es distinto en cada uno y a veces no se ve.
   ============================================================ */
:is(a,button,[tabindex]):focus-visible{
  outline:3px solid var(--naranja-d);
  outline-offset:3px;
  border-radius:6px;
}
.visor .cerrar:focus-visible{outline-color:#fff}
/* Recibe el foco por programa al avanzar de pantalla, nunca con el tabulador:
   dibujar un recuadro de pantalla completa seria ruido. */
.pantalla:focus{outline:none}

/* El cierre del recorrido conserva la escala del h1 aunque ahora sea un h2:
   dos <h1> en la misma pagina rompen el resumen de encabezados del lector. */
h2.titular.grande{
  font-size:clamp(34px,7vw,84px); max-width:15ch;
  font-variation-settings:"opsz" 96;
}

/* La pista de deslizar solo tiene sentido donde la galeria es una tira. */
.solo-tira{display:none}
@media (max-width:820px){ .solo-tira{display:inline} }

/* ============================================================
   EL VIDEO DE LA PORTADA
   Sustituye a la foto fija: es lo primero que ve quien abre el enlace. Es un
   Short vertical, asi que manda el alto y el ancho lo deduce la proporcion.
   ============================================================ */
.portada-media{display:flex; justify-content:center; align-items:center; margin:0}
#portada .video{
  aspect-ratio:9/16;
  height:clamp(190px,34svh,380px);
  width:auto;
}
@media (max-height:740px){ #portada .video{height:clamp(170px,30svh,300px)} }

/* ============================================================
   VISOR DE VIDEO A PANTALLA COMPLETA
   En un movil, un Short dentro de su marco mide poco mas de 200 px de ancho.
   Al pulsarlo se abre aqui, ocupando la pantalla, con una X para cerrar.
   ============================================================ */
.visor-video{padding:0}
.visor-video .marco-video{
  width:100%; height:100%;
  display:grid; place-items:center;
}
.visor-video iframe{
  width:100%; height:100%; border:0; display:block;
  max-width:calc(100vh * 9 / 16);   /* un Short no se estira a lo ancho */
}
.visor-video.horizontal iframe{
  max-width:100vw; max-height:calc(100vw * 9 / 16);
  height:auto; aspect-ratio:16/9;
}
/* La X va por encima del reproductor y con fondo propio: sobre el video negro
   de YouTube, una X translucida no se distingue. */
.visor-video .cerrar{
  z-index:2; background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.35);
}
@media (min-width:821px){
  /* En escritorio el visor deja aire alrededor; en movil va a sangre. */
  .visor-video{padding:clamp(24px,5vh,64px)}
  .visor-video iframe{border-radius:14px}
}

/* ============================================================
   TIPOGRAFIA EN MOVIL
   Menos texto y mas grande. En un telefono, a un brazo de distancia, 11 o 12 px
   no se leen: se saltan. El recorte de texto de las pantallas es lo que paga
   este aumento, asi que si se vuelve a alargar un parrafo hay que medir.
   Los selectores repiten el contexto (#beneficios, .pantalla) porque las reglas
   que bajaban el tamano lo llevaban, y sin el no las ganarian.
   ============================================================ */
@media (max-width:820px){
  .kicker{font-size:10.5px}
  .apoyo{font-size:16.5px; line-height:1.5}
  .tarjeta .nombre,#beneficios .tarjeta .nombre{font-size:15.5px}
  .tarjeta .desc,#beneficios .tarjeta .desc{font-size:14px; line-height:1.4}
  .paso b{font-size:16.5px}
  .paso span{font-size:14.5px; line-height:1.45}
  .puntos li,.pantalla .puntos li{font-size:14.5px; line-height:1.4}
  .panel-resumen{font-size:15px}
  .cinta{font-size:14px}
  .nota{font-size:11.5px; line-height:1.4}
  .aviso b{font-size:15.5px}
  .aviso span{font-size:14px}
  .btn{font-size:14.5px}
}
/* En un movil bajo el aumento se modera: ahi el alto manda sobre el tamano. */
@media (max-width:820px) and (max-height:700px){
  .apoyo{font-size:15px}
  .puntos li,.pantalla .puntos li{font-size:13.5px}
  .tarjeta .desc,#beneficios .tarjeta .desc{font-size:13px}
}

/* El texto mas grande de movil se paga con las fotos, no volviendo a
   encogerlo: son las dos pantallas que se pasaban al subir los tamanos. */
@media (max-width:820px){
  #que-es .duo-foto img{height:min(15svh,150px)}
  #productos .foto-gama{width:min(340px,68vw)}
}

/* La foto del lobby vuelve a la columna de medios de "Que aporta", donde
   estaba el Short antes de subir a la portada. En escritorio va al lado de las
   tarjetas y no cuesta alto; en movil el .duo se apila y esa pantalla, que cabe
   al pixel, se desbordaria unos 200 px. Por eso ahi no se muestra: con
   loading="lazy" ni siquiera se descarga. */
@media (max-width:820px){
  #beneficios .duo-foto{display:none}
}

/* ============================================================
   ITERACION: miniatura mayor, pasos con foto a sangre, texto mas grande
   ============================================================ */

/* --- La miniatura de la portada era de 155 px de ancho: se veia diminuta.
       El alto extra sale de apretar las separaciones de esa pantalla. --- */
#portada{gap:clamp(10px,1.7vh,22px)}
#portada .video{height:clamp(240px,44svh,430px)}
@media (max-height:740px){ #portada .video{height:clamp(200px,38svh,320px)} }

/* --- Los pasos: la foto ocupaba 48 px dentro de una tarjeta de 110 y se
       perdia. Ahora la tarjeta no tiene relleno propio y la foto va a sangre,
       de borde a borde del rectangulo blanco. --- */
.paso{
  align-items:stretch; gap:0;
  padding:0; overflow:hidden;
}
.paso .foto{
  flex:none; width:clamp(104px,30vw,150px);
  aspect-ratio:auto; height:auto; align-self:stretch;
  border-radius:0;
}
.paso .texto{
  padding:clamp(12px,1.8vh,18px) clamp(14px,2.4vw,22px)
          clamp(12px,1.8vh,18px) clamp(10px,1.6vw,14px);
}

/* --- Segunda subida de tamano en movil. La anterior se quedo corta. --- */
@media (max-width:820px){
  .apoyo{font-size:17.5px; line-height:1.45}
  .tarjeta .nombre,#beneficios .tarjeta .nombre{font-size:16.5px}
  .tarjeta .desc,#beneficios .tarjeta .desc{font-size:15px; line-height:1.4}
  .paso b{font-size:18px}
  .paso span{font-size:15.5px; line-height:1.4}
  .puntos li,.pantalla .puntos li{font-size:15.5px; line-height:1.4}
  .cinta{font-size:15px}
  .nota{font-size:12.5px}
  .btn{font-size:15.5px}
}
@media (max-width:820px) and (max-height:700px){
  .apoyo{font-size:16px}
  .puntos li,.pantalla .puntos li{font-size:14.5px}
  .tarjeta .desc,#beneficios .tarjeta .desc{font-size:14px}
  .paso b{font-size:16.5px}
  .paso span{font-size:14.5px}
}

/* La lista de "Que incluye" no vive en una pantalla apretada como la de los
   modelos: puede respirar. */
.puntos.grande{width:min(680px,94vw); gap:clamp(10px,1.6vh,16px)}
.puntos.grande li{font-size:clamp(15.5px,1.5vw,18px); line-height:1.5}

/* Ajuste fino tras agrandar miniatura, fotos y texto: tres pantallas se
   pasaban por menos de 15 px. */
#portada .video{height:clamp(255px,50svh,470px)}
@media (max-width:820px){
  #como-funciona .pasos{gap:6px}
  #productos .foto-gama{width:min(320px,64vw)}
}

/* La foto del paso debe RELLENAR la tarjeta, no marcar su alto. Con la imagen
   en el flujo, su proporcion cuadrada estiraba la tarjeta a 152 px en
   escritorio. Sacandola del flujo, el alto lo pone el texto y la foto lo cubre. */
.paso .foto{position:relative; overflow:hidden}
.paso .foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* En movil se le da un minimo para que la foto tenga presencia de verdad. */
@media (max-width:820px){
  .paso{min-height:clamp(104px,16.5vh,140px)}
}
/* Moviles bajos y portatiles bajos: el alto vuelve a ser el recurso escaso. */
@media (max-width:820px) and (max-height:700px){
  .paso{min-height:92px}
  #portada .video{height:clamp(190px,33svh,250px)}
  #portada{gap:9px}
  #productos .foto-gama{width:min(280px,58vw)}
  #que-es .duo-foto img{height:min(13svh,120px)}
}

/* Las cuatro tarjetas de "Como funciona" las dimensiona su texto. Con los
   tamanos nuevos el relleno vertical es lo unico que sobra. */
@media (max-width:820px){
  .paso .texto{padding:10px 14px 10px 12px}
}
@media (max-width:820px) and (max-height:700px){
  .paso .texto{padding:8px 12px 8px 10px}
  #como-funciona .pasos{gap:6px}
}

/* ============================================================
   VISOR DE PRESENTACIONES
   Google Slides se abre dentro de la web, con un boton de volver visible.
   ============================================================ */
.visor-doc{padding:0; background:rgba(56,25,26,.96)}
.visor-doc .marco-doc{width:100%; height:100%; display:grid; place-items:stretch}
.visor-doc iframe{width:100%; height:100%; border:0; display:block}
/* El boton no es una X en una esquina: es una accion con texto, porque volver
   atras desde un documento a pantalla completa no es evidente. */
.visor-doc .volver{
  position:absolute; top:clamp(10px,2vh,20px); left:clamp(10px,3vw,24px);
  z-index:2; width:auto; height:auto; border-radius:999px;
  display:inline-flex; align-items:center; gap:.5em;
  padding:.62em 1.1em; min-height:44px;
  font-family:inherit; font-size:clamp(13px,1.3vw,15px); font-weight:700;
  background:#fff; color:var(--ink); border:1px solid var(--cream-200);
  box-shadow:var(--sombra-m);
}
.visor-doc .volver svg{height:18px; width:18px}
@media (min-width:821px){
  .visor-doc{padding:clamp(56px,8vh,80px) clamp(20px,4vw,56px) clamp(20px,4vh,40px)}
  .visor-doc iframe{border-radius:14px}
}

/* En un portatil bajo el titular de portada ocupa 175 px: el video no puede
   llevarse ademas la mitad de la pantalla. */
@media (min-width:901px) and (max-height:820px){
  #portada .video{height:clamp(220px,34svh,300px)}
}


/* ============================================================
   EL CIERRE: la unica seccion que puede crecer
   Aqui el visitante deja de pasar diapositivas y se pone a leer condiciones,
   asi que se le quita el alto fijo y se deja que ocupe lo que necesite. El
   resto del recorrido mantiene su regla de una pantalla por idea.
   ============================================================ */
.pantalla.cierre{
  justify-content:flex-start;
  padding-bottom:clamp(48px,7vh,72px);
  gap:clamp(12px,2vh,22px);
}
.pantalla.cierre .puntos{width:min(640px,94vw)}
.pantalla.cierre .aviso{width:min(640px,94vw)}
.pantalla.cierre .apoyo{max-width:62ch}

/* El boton de llamada parte su texto en movil. Sin envolverlo, el flex trata
   cada trozo como un elemento y el separador se quedaba solo en una linea,
   con el numero cortado en dos. */
.btn-etiqueta{text-align:center}
.btn-num{white-space:nowrap}

/* ============================================================
   EL CIERRE EN MOVIL
   Con la barra de Safari arriba y abajo, un iPhone deja unos 600 px utiles, no
   812. El bloque medía 746 y el boton de llamada quedaba fuera de pantalla:
   el sitio se recorta de los espaciados y del tamano del propio bloque, no del
   mensaje, y el enlace a la presentacion pasa de boton a enlace de texto.
   ============================================================ */
@media (max-width:820px){
  .pantalla.cierre{
    padding-top:calc(var(--barra) + 4px);
    padding-bottom:16px;
    gap:7px;
  }
  .cierre .apoyo{font-size:15.5px; line-height:1.4; max-width:40ch}
  .cierre .puntos{gap:5px}
  .cierre .puntos li{font-size:14.5px; padding-left:17px}
  .cierre .aviso{padding:10px 13px; gap:9px}
  .cierre .aviso .icono svg{height:21px; width:21px}
  .cierre .aviso b{font-size:14.5px; margin-bottom:1px}
  .cierre .aviso span{font-size:13px; line-height:1.4}
  .cierre .botones{gap:6px}
}

/* Moviles con la barra del navegador desplegada: un iPhone deja unos 600 px
   utiles y estas tres pantallas se pasaban por poco. Solo aqui: a 667 y a 812
   ya estan ajustadas y no conviene tocarlas. */
@media (max-width:820px) and (max-height:640px){
  #productos{gap:7px}
  #productos .foto-gama{width:min(190px,42vw)}
  .pantalla .puntos{gap:3px}
  .pantalla .pestana{min-height:38px; padding:.45em .9em}
  #beneficios .rejilla{gap:7px}
  #beneficios .tarjeta{padding:8px 11px}
  #como-funciona .pasos{gap:5px}
  .paso .texto{padding:7px 11px}
  .paso{min-height:84px}
}