/* ════════════════════════════════════════════════════════════════════════════
   Jobdy — sistema

   Un solo fichero para las 35 páginas. Sin build, sin CDN, sin framework.

   Tres decisiones que explican casi todo lo demás:

   1. **La tipografía es la del sistema.** En Apple eso ES SF Pro Display, que es
      lo que se pedía, y sin descargar 400 KB de fuentes ni pedirle nada a un
      tercero. Fuera de Apple cae en la nativa de cada sistema, que también está
      bien dibujada. Una webfont aquí sólo añadiría un salto de texto al cargar.

   2. **El movimiento va con `animation-timeline`**, que es scroll nativo del
      navegador: se resuelve en el compositor, no en JavaScript. Es lo que
      permite prometer 60 fps sin vigilar un `scroll` a mano.

   3. **El espacio es el material principal.** Casi todo el "premium" de las
      referencias (Apple, Linear, Stripe) es aire y una escala tipográfica con
      pocos tamaños. Aquí hay seis.
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  --naranja:#FF6B2C;
  --naranja-h:#F25A18;
  --tinta:#111111;
  --fondo:#FAF8F5;
  --blanco:#FFFFFF;
  --gris:#6B6560;
  --gris-claro:#9A938C;
  --linea:rgba(17,17,17,.09);
  --negro:#0C0B0A;

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4.5rem; --s7:7rem;
  --r-s:12px; --r-m:18px; --r-l:26px; --r-xl:34px;

  /* Sombras muy suaves: dos capas, poca opacidad y mucho desenfoque. Una sombra
     dura es lo primero que delata una plantilla. */
  --sombra-1:0 1px 2px rgba(17,17,17,.04), 0 4px 16px rgba(17,17,17,.05);
  --sombra-2:0 2px 6px rgba(17,17,17,.05), 0 16px 40px rgba(17,17,17,.08);
  --sombra-3:0 8px 24px rgba(17,17,17,.08), 0 32px 80px rgba(17,17,17,.14);

  --ancho:1200px;
  --cab:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; scroll-padding-top:calc(var(--cab) + 20px)}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",system-ui,sans-serif;
  font-size:17px; line-height:1.6; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,svg,video{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit}
::selection{background:var(--naranja); color:#fff}

.env{width:min(100% - 44px, var(--ancho)); margin-inline:auto}
.env-ancho{width:min(100% - 44px, 1440px); margin-inline:auto}

/* ── Tipografía ───────────────────────────────────────────────────────────── */
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.03em; line-height:1.05}
h1{font-size:clamp(2.7rem, 6.2vw, 5.2rem); letter-spacing:-.042em; line-height:.98}
h2{font-size:clamp(2rem, 3.9vw, 3.4rem); letter-spacing:-.035em}
h3{font-size:clamp(1.15rem, 1.5vw, 1.4rem); letter-spacing:-.022em; line-height:1.25}
h4{font-size:1rem; letter-spacing:-.012em}
p{margin:0}
.grande{font-size:clamp(1.08rem,1.35vw,1.25rem); color:var(--gris); line-height:1.55}
.ojo{font-size:.76rem; font-weight:640; letter-spacing:.13em; text-transform:uppercase; color:var(--naranja)}
.centro{text-align:center}
.sub{color:var(--gris); max-width:min(100%, 46ch); margin-top:var(--s2)}
.centro .sub{margin-inline:auto}

/* ── Botones ──────────────────────────────────────────────────────────────── */
.btn{
  --alto:52px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:var(--alto); padding:0 26px; border-radius:999px;
  font-size:.98rem; font-weight:600; letter-spacing:-.01em;
  border:1px solid transparent; cursor:pointer; white-space:nowrap; position:relative; overflow:hidden;
  transition:transform .2s cubic-bezier(.2,.9,.3,1), box-shadow .3s, background .2s, color .2s, border-color .2s;
}
.btn svg{width:18px; height:18px}
.btn-p{background:var(--naranja); color:#fff; box-shadow:0 6px 18px rgba(255,107,44,.28)}
.btn-p:hover{background:var(--naranja-h); transform:translateY(-2px); box-shadow:0 12px 28px rgba(255,107,44,.36)}
.btn-n{background:var(--tinta); color:#fff}
.btn-n:hover{transform:translateY(-2px); box-shadow:var(--sombra-2)}
.btn-b{background:#fff; color:var(--tinta); border-color:var(--linea); box-shadow:var(--sombra-1)}
.btn-b:hover{transform:translateY(-2px); box-shadow:var(--sombra-2); border-color:rgba(17,17,17,.16)}
.btn-f{background:transparent; color:#fff; border-color:rgba(255,255,255,.28)}
.btn-f:hover{background:rgba(255,255,255,.1); transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
/* Un brillo que cruza el botón al pasar. Sutil: se nota sin verse. */
.btn::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%);
  transform:translateX(-120%); transition:transform .7s cubic-bezier(.3,.9,.3,1);
}
.btn:hover::after{transform:translateX(120%)}
.btn-sm{--alto:42px; padding:0 18px; font-size:.9rem}

/* ── Movimiento ───────────────────────────────────────────────────────────── */
@keyframes surge{ from{opacity:0; transform:translateY(30px)} to{opacity:1; transform:none} }
@keyframes surgeCorto{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
@keyframes flota{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }
@keyframes flotaB{ 0%,100%{transform:translateY(-10px)} 50%{transform:translateY(8px)} }
@keyframes desfile{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes latido{ from{transform:scale(.6); opacity:.55} to{transform:scale(1.8); opacity:0} }

.rev{animation:surge linear both; animation-timeline:view(); animation-range:entry 4% cover 28%}
.rev-h > *{animation:surgeCorto linear both; animation-timeline:view(); animation-range:entry 2% cover 26%}
.rev-h > *:nth-child(2){animation-range:entry 5% cover 29%}
.rev-h > *:nth-child(3){animation-range:entry 8% cover 32%}
.rev-h > *:nth-child(4){animation-range:entry 10% cover 34%}
.rev-h > *:nth-child(5){animation-range:entry 12% cover 36%}
.rev-h > *:nth-child(6){animation-range:entry 14% cover 38%}
.rev-h > *:nth-child(n+7){animation-range:entry 16% cover 40%}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .rev,.rev-h > *{opacity:1 !important; transform:none !important}
}

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.cab{position:sticky; top:0; z-index:900; transition:background .35s, box-shadow .35s, border-color .35s;
     border-bottom:1px solid transparent}
.cab.solida{background:rgba(255,255,255,.8); backdrop-filter:saturate(180%) blur(18px);
            -webkit-backdrop-filter:saturate(180%) blur(18px); border-bottom-color:var(--linea)}
.cab-fila{display:flex; align-items:center; gap:26px; height:var(--cab)}
.logo{font-size:1.3rem; font-weight:750; letter-spacing:.14em; display:flex; align-items:center; gap:3px; flex:none}
.logo i{width:6px; height:6px; border-radius:50%; background:var(--naranja); font-style:normal; margin-bottom:-2px}

/* Cinco anclas y una barrita naranja que dice dónde estás. Nada se despliega,
   así que no hay estado que se quede pillado ni panel que se salga de pantalla. */
.menu{display:flex; gap:2px; margin:0; padding:0}
.menu li{list-style:none}
.menu a{
  display:block; position:relative; padding:9px 14px; border-radius:10px;
  font-size:.94rem; font-weight:520; color:var(--tinta);
  transition:background .18s, color .18s;
}
.menu a:hover{background:rgba(17,17,17,.05)}
.menu a::after{
  content:''; position:absolute; left:14px; right:14px; bottom:2px; height:2px; border-radius:2px;
  background:var(--naranja); transform:scaleX(0); transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.9,.3,1);
}
.menu a.activo{color:var(--naranja)}
.menu a.activo::after{transform:scaleX(1)}
.cab-dcha{margin-left:auto; display:flex; align-items:center; gap:10px}

/* Hamburguesa que se convierte en aspa. Las tres barras son hijos reales, no
   pseudoelementos, para poder mover cada una por su lado. */
.hamb{display:none; width:42px; height:42px; border-radius:11px; border:1px solid var(--linea);
      background:#fff; cursor:pointer; padding:0}
.hamb span{display:block; width:17px; height:1.7px; background:var(--tinta); border-radius:2px;
           transition:transform .3s cubic-bezier(.2,.9,.3,1), opacity .18s}
.hamb span:nth-child(1){margin-bottom:4px}
.hamb span:nth-child(3){margin-top:4px}
.hamb.abierto span:nth-child(1){transform:translateY(5.7px) rotate(45deg)}
.hamb.abierto span:nth-child(2){opacity:0}
.hamb.abierto span:nth-child(3){transform:translateY(-5.7px) rotate(-45deg)}
.movil-menu{display:none}

@media (max-width:1080px){
  /* Ocultar `.menu` no basta: su `<nav>` sigue siendo un elemento flexible vacío
     y se lleva 26 px de `gap`. Con eso, en un móvil de 360 px la hamburguesa se
     salía de la pantalla. */
  .cab-fila > nav{display:none}
  .cab-fila{gap:14px}
  .hamb{display:grid; place-items:center}
  /* En un Android de 360 px el logo + el botón + la hamburguesa no caben con el
     icono dentro del botón. Se quita el icono antes que el botón: es el que
     convierte. */
  @media (max-width:520px){
    .cab-dcha .btn svg{display:none}
    .cab-dcha .btn{padding:0 14px}
  }
  /* Un iPhone SE mide 320: ahí el logo cede unos píxeles antes que el botón. */
  @media (max-width:360px){
    .logo{font-size:1.12rem; letter-spacing:.1em}
    .cab-dcha .btn{padding:0 12px; font-size:.86rem}
  }
  .movil-menu{
    display:flex; flex-direction:column; position:fixed; inset:var(--cab) 0 0;
    background:var(--fondo); z-index:880; padding:26px 22px 40px; overflow:auto;
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .25s, transform .32s cubic-bezier(.2,.9,.3,1), visibility .25s;
  }
  .movil-menu.abierto{opacity:1; visibility:visible; transform:none}
  .movil-menu .lista{display:grid}
  .movil-menu .lista a{
    padding:18px 2px; font-size:1.35rem; font-weight:640; letter-spacing:-.025em;
    border-bottom:1px solid var(--linea);
  }
  .movil-menu .lista a:active{color:var(--naranja)}
  .movil-menu .correo{margin-top:auto; padding-top:26px; color:var(--gris); font-size:.92rem}
}

/* ── Héroe ────────────────────────────────────────────────────────────────── */
.hero{position:relative; min-height:calc(100svh - var(--cab)); display:flex; align-items:center; padding:var(--s5) 0; overflow:clip}
.hero-r{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:var(--s5); align-items:center}
.hero h1 .ac{color:var(--naranja); display:inline-block}
.tics{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:var(--s3)}
.tic{display:flex; align-items:center; gap:8px; font-size:.95rem; color:var(--gris)}
.tic svg{width:17px; height:17px; stroke:var(--naranja); fill:none; stroke-width:2.4; flex:none}
.hero-btns{display:flex; gap:12px; margin-top:var(--s4); flex-wrap:wrap}

.pill-vivo{
  display:inline-flex; align-items:center; gap:9px; padding:7px 15px 7px 9px; border-radius:999px;
  background:#fff; border:1px solid var(--linea); box-shadow:var(--sombra-1);
  font-size:.85rem; font-weight:540; margin-bottom:var(--s3);
}
.punto{width:8px; height:8px; border-radius:50%; background:#2FBF5C; position:relative; flex:none}
.punto::after{content:''; position:absolute; inset:0; border-radius:50%; background:#2FBF5C; animation:latido 2.2s ease-out infinite}

/* Los dos móviles del héroe */
.duo{position:relative; display:flex; justify-content:center; align-items:center; min-height:520px}
.duo .movil{position:relative}
.duo .movil:nth-child(1){--w:min(262px,22vw); z-index:2; animation:flota 7s ease-in-out infinite}
.duo .movil:nth-child(2){--w:min(228px,19vw); margin-left:-58px; margin-top:66px; z-index:1; animation:flotaB 8.5s ease-in-out infinite}
.duo::before{
  content:''; position:absolute; width:min(560px,44vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,107,44,.17), transparent 66%); filter:blur(10px);
}

/* ── El marco del móvil ───────────────────────────────────────────────────── */
.movil{
  position:relative;
  width:var(--w,268px); aspect-ratio:1206/2622; background:#0A0A0B; border-radius:calc(var(--w,268px)/7.2);
  padding:calc(var(--w,268px)/64); box-shadow:var(--sombra-3), 0 0 0 1px rgba(255,255,255,.14) inset;
}
.movil img{width:100%; height:100%; object-fit:cover; border-radius:calc(var(--w,268px)/8.6)}
.movil::after{content:''; position:absolute; top:calc(var(--w,268px)/26); left:50%; translate:-50% 0;
              width:27%; height:calc(var(--w,268px)/19); background:#0A0A0B; border-radius:99px}

/* ── Datos ────────────────────────────────────────────────────────────────── */
.cifras{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s3); margin-top:var(--s6);
        border-top:1px solid var(--linea); padding-top:var(--s4)}
.cifra .n{font-size:clamp(1.5rem,2.2vw,2.1rem); font-weight:700; letter-spacing:-.035em; display:flex; align-items:center; gap:7px}
.cifra .n svg{width:20px; height:20px; fill:var(--naranja)}
.cifra .q{font-size:.85rem; color:var(--gris); margin-top:2px}

/* ── Secciones ────────────────────────────────────────────────────────────── */
section{padding:var(--s7) 0}
section.pegada{padding-top:0}
.cabecera-sec{max-width:min(100%,58ch); margin-bottom:var(--s5)}
.cabecera-sec .ojo + h2{margin-top:12px}
.cabecera-sec.centro{margin-inline:auto; text-align:center}
.centro .cabecera-sec{margin-inline:auto}

/* Pasos */
.pasos{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3)}
.paso{background:#fff; border:1px solid var(--linea); border-radius:var(--r-xl); padding:var(--s4); position:relative;
      overflow:hidden; transition:transform .3s cubic-bezier(.2,.9,.3,1), box-shadow .35s}
.paso:hover{transform:translateY(-8px); box-shadow:var(--sombra-3)}
.paso .n{width:36px; height:36px; border-radius:50%; background:var(--tinta); color:#fff; display:grid; place-items:center;
         font-size:.9rem; font-weight:640; margin-bottom:var(--s3)}
.paso:hover .n{background:var(--naranja)}
.paso p{color:var(--gris); margin-top:10px; font-size:.97rem}
.paso .vista{margin-top:var(--s4); display:grid; place-items:end center; height:230px; border-radius:var(--r-m);
             background:linear-gradient(170deg,#F4EFE9,#fff); overflow:hidden}
.paso .vista .movil{--w:158px; margin-bottom:-44%}
.paso .vista img.foto{width:100%; height:100%; object-fit:cover}

/* Servicios */
.rejilla-serv{display:grid; grid-template-columns:repeat(auto-fill,minmax(186px,1fr)); gap:12px}
@media (min-width:1080px){.rejilla-serv{grid-template-columns:repeat(5,minmax(0,1fr))}}
.serv-mas{background:transparent; border-style:dashed; border-color:rgba(17,17,17,.18)}
.serv-mas:hover{background:#fff}
.serv{background:#fff; border:1px solid var(--linea); border-radius:var(--r-m); padding:var(--s3); display:block;
      transition:transform .25s cubic-bezier(.2,.9,.3,1), box-shadow .3s, border-color .25s}
.serv:hover{transform:translateY(-6px); box-shadow:var(--sombra-2); border-color:rgba(255,107,44,.35)}
.serv .ic{width:44px; height:44px; border-radius:13px; background:var(--fondo); display:grid; place-items:center;
          margin-bottom:14px; transition:background .25s, transform .3s cubic-bezier(.2,.9,.3,1)}
.serv:hover .ic{background:var(--naranja); transform:translateY(-2px) rotate(-6deg)}
.serv .ic svg{width:22px; height:22px; stroke:var(--tinta); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:stroke .25s}
.serv:hover .ic svg{stroke:#fff}
/* `1fr` es `minmax(auto,1fr)`: una palabra larga como «Electrodomésticos»
   ensancha su columna y saca la rejilla de la pantalla. Se corta con guion. */
.serv .nom{font-weight:600; letter-spacing:-.015em; overflow-wrap:anywhere; hyphens:auto}
.serv .desde{font-size:.82rem; color:var(--gris-claro); margin-top:3px}

/* Bloque oscuro */
.oscuro{background:var(--negro); color:#fff}
.oscuro h2,.oscuro h3{color:#fff}
.oscuro p{color:rgba(255,255,255,.62)}
.oscuro .ojo{color:var(--naranja)}

/* Carrusel de pantallas */
.carrete{display:flex; gap:var(--s3); overflow-x:auto; padding:var(--s2) 0 var(--s4);
         scroll-snap-type:x mandatory; scrollbar-width:none}
.carrete::-webkit-scrollbar{display:none}
.carrete .diapo{scroll-snap-align:center; flex:none; text-align:center}
.carrete .movil{--w:246px}
.carrete .et{margin-top:14px; font-size:.9rem; color:rgba(255,255,255,.6)}

/* Razones */
.razones{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s4) var(--s3)}
.razon .ic{width:46px; height:46px; border-radius:14px; background:#fff; border:1px solid var(--linea);
           display:grid; place-items:center; margin-bottom:16px; box-shadow:var(--sombra-1)}
.razon .ic svg{width:22px; height:22px; stroke:var(--naranja); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.razon p{color:var(--gris); margin-top:8px; font-size:.96rem}

/* Descarga */
.tiendas{display:flex; gap:10px; flex-wrap:wrap; margin-top:var(--s3)}
.tienda{display:flex; align-items:center; gap:10px; background:var(--tinta); color:#fff; padding:11px 18px; border-radius:14px;
        transition:transform .2s, box-shadow .26s}
.tienda:hover{transform:translateY(-2px); box-shadow:var(--sombra-2)}
.tienda svg{width:22px; height:22px; fill:#fff}
.tienda s{display:block; font-size:.62rem; opacity:.7; text-decoration:none; line-height:1.2}
.tienda b{display:block; font-size:.92rem; line-height:1.2}
.qr{width:104px; height:104px; border-radius:16px; background:#fff; border:1px solid var(--linea); padding:9px; box-shadow:var(--sombra-1)}

/* Acordeón */
.faq{max-width:min(100%,780px); margin-inline:auto}
.faq details{background:#fff; border:1px solid var(--linea); border-radius:var(--r-m); padding:0 var(--s3); margin-bottom:10px;
             transition:border-color .25s, box-shadow .3s}
.faq details[open]{border-color:rgba(255,107,44,.4); box-shadow:var(--sombra-1)}
.faq summary{cursor:pointer; list-style:none; padding:19px 0; font-weight:600; display:flex; align-items:center; gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:''; margin-left:auto; width:10px; height:10px; flex:none;
  border-right:1.8px solid var(--naranja); border-bottom:1.8px solid var(--naranja);
  transform:rotate(45deg) translateY(-3px); transition:transform .3s cubic-bezier(.2,.9,.3,1)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq .r{padding:0 0 20px; color:var(--gris); font-size:.97rem; max-width:66ch}
.faq details[open] .r{animation:surgeCorto .32s cubic-bezier(.2,.9,.3,1) both}

/* Cierre */
.cierre{background:var(--naranja); color:#fff; border-radius:var(--r-xl); padding:var(--s6) var(--s4); text-align:center; position:relative; overflow:hidden}
.cierre::before{content:''; position:absolute; inset:-60% -20% auto; height:170%;
  background:radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.24), transparent 60%)}
.cierre > *{position:relative}
.cierre h2{color:#fff}
.cierre p{color:rgba(255,255,255,.86); margin:var(--s2) auto var(--s4); max-width:min(100%,42ch)}
.cierre .btn{background:#fff; color:var(--naranja)}

/* Pie */
footer{background:var(--negro); color:rgba(255,255,255,.58); padding:var(--s6) 0 var(--s3); font-size:.92rem}
.pie{display:grid; grid-template-columns:1.7fr repeat(4,1fr); gap:var(--s4) var(--s3)}
footer h4{color:#fff; font-size:.84rem; letter-spacing:.02em; margin-bottom:14px}
footer ul{list-style:none; padding:0; margin:0; display:grid; gap:9px}
footer a{transition:color .18s}
footer a:hover{color:#fff}
footer .logo{color:#fff; margin-bottom:12px}
.redes{display:flex; gap:10px; margin-top:18px}
.redes a{width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.07); display:grid; place-items:center; transition:background .2s}
.redes a:hover{background:var(--naranja)}
.redes svg{width:16px; height:16px; fill:#fff}
.pie-legal{border-top:1px solid rgba(255,255,255,.1); margin-top:var(--s5); padding-top:var(--s3);
           display:flex; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; font-size:.83rem; color:rgba(255,255,255,.4)}

/* Migas y páginas interiores */
.migas{display:flex; gap:8px; font-size:.85rem; color:var(--gris-claro); padding-top:var(--s4)}
.migas a:hover{color:var(--tinta)}
.hero-int{padding:var(--s6) 0 var(--s5)}
.hero-int h1{font-size:clamp(2.2rem,4.6vw,3.7rem)}
.dos-col{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:var(--s5); align-items:center}
.tarjeta{background:#fff; border:1px solid var(--linea); border-radius:var(--r-l); padding:var(--s4); box-shadow:var(--sombra-1)}
.lista-tics{list-style:none; padding:0; margin:var(--s3) 0 0; display:grid; gap:11px}
.lista-tics li{display:flex; gap:10px; align-items:flex-start; color:var(--gris)}
.lista-tics svg{width:18px; height:18px; stroke:var(--naranja); fill:none; stroke-width:2.4; flex:none; margin-top:3px}
.chips{display:flex; flex-wrap:wrap; gap:9px}
.chip{padding:9px 16px; border-radius:999px; background:#fff; border:1px solid var(--linea); font-size:.9rem; font-weight:540;
      transition:transform .2s, border-color .2s, color .2s}
a.chip:hover{transform:translateY(-2px); border-color:var(--naranja); color:var(--naranja)}
.arts{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3)}
.art{background:#fff; border:1px solid var(--linea); border-radius:var(--r-l); overflow:hidden;
     transition:transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .32s}
.art:hover{transform:translateY(-6px); box-shadow:var(--sombra-2)}
.art .im{aspect-ratio:16/10; overflow:hidden; background:var(--fondo)}
.art .im img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.9,.3,1)}
.art:hover .im img{transform:scale(1.05)}
.art .cu{padding:var(--s3)}
.art .meta{font-size:.78rem; color:var(--gris-claro); margin-bottom:8px}
.campo{display:grid; gap:6px; margin-bottom:14px}
.campo label{font-size:.85rem; font-weight:560}
.campo input,.campo textarea,.campo select{
  width:100%; padding:13px 15px; border-radius:var(--r-s); border:1px solid var(--linea); background:#fff;
  font:inherit; font-size:.95rem; transition:border-color .2s, box-shadow .2s;
}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:none; border-color:var(--naranja); box-shadow:0 0 0 4px rgba(255,107,44,.13);
}
.prosa{max-width:min(100%,72ch)}
.prosa h2{margin-top:var(--s5); font-size:clamp(1.4rem,2.2vw,1.9rem)}
.prosa h3{margin-top:var(--s4)}
.prosa p{margin-top:var(--s2); color:var(--gris)}
.prosa ul{color:var(--gris); margin-top:var(--s2)}

/* Banda con foto (profesionales, empresas) */
.banda{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:var(--s5); align-items:center;
       background:#fff; border:1px solid var(--linea); border-radius:var(--r-xl); padding:var(--s6);
       box-shadow:var(--sombra-1); overflow:hidden}
.banda img{border-radius:var(--r-l); aspect-ratio:4/5; object-fit:cover; width:100%; box-shadow:var(--sombra-2)}
.banda .hero-btns{margin-top:var(--s4)}

/* Tarjetitas de una línea */
.minis{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.mini{background:#fff; border:1px solid var(--linea); border-radius:var(--r-m); padding:var(--s3);
      transition:transform .25s cubic-bezier(.2,.9,.3,1), box-shadow .3s, border-color .25s}
.mini:hover{transform:translateY(-4px); box-shadow:var(--sombra-2); border-color:rgba(255,107,44,.3)}
.mini p{color:var(--gris); font-size:.92rem; margin-top:6px}

/* Descarga */
.descarga{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,.7fr); gap:var(--s5); align-items:center;
          background:#fff; border:1px solid var(--linea); border-radius:var(--r-xl); padding:var(--s6);
          box-shadow:var(--sombra-1)}
.descarga .qr svg{width:100%; height:100%; display:block}
.descarga .foto{border-radius:var(--r-l); aspect-ratio:4/3; object-fit:cover; width:100%; box-shadow:var(--sombra-2)}
.marco{border-radius:var(--r-xl); box-shadow:var(--sombra-2); object-fit:cover; width:100%}


@media (max-width:980px){
  .banda,.descarga{grid-template-columns:1fr; padding:var(--s4); gap:var(--s4)}
  .descarga .qr{display:none}
  .minis{grid-template-columns:1fr}

  .hero-r,.dos-col{grid-template-columns:1fr}
  .duo{min-height:auto; margin-top:var(--s4)}
  .duo .movil:nth-child(1){--w:min(238px,52vw)}
  .duo .movil:nth-child(2){--w:min(200px,44vw)}
  .pasos,.razones,.arts{grid-template-columns:1fr}
  .cifras{grid-template-columns:repeat(2,1fr); gap:var(--s3) var(--s2)}
  .pie{grid-template-columns:1fr 1fr}
  section{padding:var(--s6) 0}
  .env,.env-ancho{width:min(100% - 32px, var(--ancho))}
}
@media (max-width:620px){
  .rejilla-serv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-btns .btn{flex:1 1 auto}
  .pie{grid-template-columns:1fr}
  h1{font-size:clamp(2.2rem,9vw,3rem)}
}

/* ════════════════════════════════════════════════════════════════════════════
   Movimiento
   ═════════════════════════════════════════════════════════════════════════════
   Casi todo va con `animation-timeline`, que ata el avance de la animación al
   scroll y lo resuelve el compositor: no hay un solo `addEventListener('scroll')`
   detrás de estos efectos, así que no compiten con el hilo principal ni bajan de
   60 fps por mucho que se baje deprisa.

   Regla de oro: **ninguna de estas animaciones lleva `duration`**. Sin
   `animation-timeline` (Firefox, navegadores viejos) una animación sin duración
   dura 0 s y salta directa a su fotograma final — que aquí siempre es el estado
   correcto y visible. El efecto se pierde; el contenido, nunca.
   ════════════════════════════════════════════════════════════════════════════ */

/* Enlace de salto: invisible hasta que alguien navega con el tabulador. */
.saltar{position:absolute; left:-9999px; top:8px; z-index:1000; background:var(--tinta); color:#fff;
        padding:12px 18px; border-radius:12px; font-size:.9rem}
.saltar:focus{left:16px}
:focus-visible{outline:2.5px solid var(--naranja); outline-offset:3px; border-radius:6px}

/* ── Barra de lectura, en la cabecera ─────────────────────────────────────── */
.cab::after{
  content:''; position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  background:linear-gradient(90deg, var(--naranja), #FFB27A);
  transform-origin:left; transform:scaleX(0); opacity:0; transition:opacity .3s;
  animation:leer linear both; animation-timeline:scroll(root block);
}
.cab.solida::after{opacity:1}
@keyframes leer{ from{transform:scaleX(0)} to{transform:scaleX(1)} }

/* ── Héroe ────────────────────────────────────────────────────────────────── */
/* El aura: manchas cálidas detrás del texto.
   ⚠ La primera versión animaba el ángulo de un `conic-gradient` con `@property`.
   Se veía bien y era una mala idea: animar el ángulo obliga a RE-PINTAR una
   superficie enorme con `blur(48px)` en cada fotograma, sin parar y aunque el
   héroe esté fuera de pantalla. Eso es batería y ventiladores en un portátil.
   Ahora los degradados son fijos —se rasterizan una vez— y el poco movimiento
   que tienen va atado al scroll, así que sólo cuesta algo mientras se baja. */
.aura{
  position:absolute; inset:-25% -10% auto -20%; height:125%; pointer-events:none; z-index:-1;
  background:
    radial-gradient(46% 42% at 22% 30%, rgba(255,107,44,.22), transparent 68%),
    radial-gradient(38% 44% at 72% 18%, rgba(255,178,122,.20), transparent 70%),
    radial-gradient(52% 40% at 58% 78%, rgba(255,107,44,.10), transparent 72%);
  filter:blur(42px);
}
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    .aura{animation:derivaAura linear both; animation-timeline:scroll(root block); animation-range:0 100vh}
  }
}
/* Sólo `transform`: lo resuelve el compositor y no repinta el desenfoque. */
@keyframes derivaAura{ to{transform:translate3d(4%, -6%, 0) scale(1.12)} }

/* El titular entra por líneas: cada `.linea` recorta y el `span` sube. Sólo
   cuando el JS ha arrancado (`html.js`), para que sin JS el texto esté ahí. */
h1 .linea{display:block; overflow:hidden; padding-bottom:.06em}
h1 em{color:var(--naranja); font-style:normal}
.js h1 .linea > span{display:block; animation:subirLinea .9s cubic-bezier(.16,1,.3,1) both}
.js h1 .linea:nth-child(2) > span{animation-delay:.09s}
.js .hero-txt .pill-vivo,
.js .hero-txt .sub,
.js .hero-txt .tics,
.js .hero-txt .hero-btns{animation:surgeCorto .8s cubic-bezier(.16,1,.3,1) both}
.js .hero-txt .pill-vivo{animation-delay:.02s}
.js .hero-txt .sub{animation-delay:.22s}
.js .hero-txt .tics{animation-delay:.3s}
.js .hero-txt .hero-btns{animation-delay:.38s}
@keyframes subirLinea{ from{transform:translateY(105%)} to{transform:none} }

/* Los móviles del héroe: flotan solos Y se separan al bajar (paralaje). Son dos
   animaciones sobre elementos distintos —el envoltorio hace el paralaje, el
   marco flota— porque dos `animation` sobre el mismo `transform` se pisan. */
.duo{position:relative; display:flex; justify-content:center; align-items:center; min-height:520px}
.duo .flotante{position:relative}
.duo .f1{--w:min(262px,22vw); z-index:2}
.duo .f2{--w:min(228px,19vw); margin-left:-58px; margin-top:66px; z-index:1}
.duo .f1 .movil{animation:flota 7s ease-in-out infinite}
.duo .f2 .movil{animation:flotaB 8.5s ease-in-out infinite}
.duo::before{
  content:''; position:absolute; width:min(560px,44vw); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,107,44,.17), transparent 66%); filter:blur(10px);
}
@supports (animation-timeline: scroll()){
  @media (min-width:981px){
    .duo .f1{animation:paralajeA linear both; animation-timeline:scroll(root block); animation-range:0 70vh}
    .duo .f2{animation:paralajeB linear both; animation-timeline:scroll(root block); animation-range:0 70vh}
  }
}
@keyframes paralajeA{ to{transform:translateY(-56px)} }
@keyframes paralajeB{ to{transform:translateY(26px)} }

.duo.suelto{min-height:auto}

/* ── El brillo que sigue al ratón ─────────────────────────────────────────── */
/* La mancha vive en un `::before` con `opacity:0`; sólo se enciende al pasar por
   encima. Así no hay nada pintado de más cuando el ratón está en otra parte. */
[data-brillo] > *{position:relative; isolation:isolate}
[data-brillo] > *::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .28s;
  border-radius:inherit; pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(255,107,44,.13), transparent 62%);
}
[data-brillo] > *:hover::before{opacity:1}

/* Y su equivalente en la sección oscura, a lo grande. */
[data-foco]{position:relative; isolation:isolate}
[data-foco]::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(520px circle at var(--fx,50%) var(--fy,30%), rgba(255,107,44,.14), transparent 65%);
  opacity:0; transition:opacity .5s;
}
[data-foco]:hover::before{opacity:1}

/* ── El carrete de pantallas ──────────────────────────────────────────────── */
/* En escritorio se desplaza solo al bajar: el scroll vertical mueve la fila en
   horizontal. En móvil se queda como un carrusel que se arrastra con el dedo,
   que es lo que ahí se espera. */
.carrete{padding:var(--s2) 0 var(--s4); overflow-x:auto; scrollbar-width:none;
         scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch}
.carrete::-webkit-scrollbar{display:none}
.pista-app{display:flex; gap:var(--s3); width:max-content; padding-inline:22px}
.diapo{flex:none; text-align:center; scroll-snap-align:center; margin:0}
/* El ancho crece con la pantalla A PROPÓSITO: la fila tiene que ser más ancha
   que la ventana en cualquier monitor, o en uno grande cabrían las cinco y el
   desplazamiento al bajar no tendría recorrido que hacer (medido: en 1843 px la
   fila de 1370 no se movía ni un píxel). */
.diapo .movil{--w:clamp(230px, 21vw, 380px)}
.diapo .et{margin-top:14px; font-size:.9rem; color:rgba(255,255,255,.6)}
@supports (animation-timeline: view()){
  @media (min-width:981px) and (prefers-reduced-motion:no-preference){
    .carrete{overflow:hidden}
    /* ⚠ `view()` a secas NO sirve aquí: se mide contra el contenedor con scroll
       más cercano y, en cuanto el carrete lleva `overflow:hidden`, ese contenedor
       es él mismo — que no se desplaza nunca. La animación quedaba «running» con
       `currentTime: null` y no movía un píxel. Hay que nombrar la línea de tiempo
       en la sección, cuyo contenedor sí es la página. */
    .oscuro{view-timeline-name:--carrete-app}
    .pista-app{
      animation:desfilar linear both;
      animation-timeline:--carrete-app;
      /* `contain` = mientras la sección llena la pantalla, que es justo el rato
         que uno la está mirando. */
      animation-range:contain 0% contain 100%;
    }
  }
}
/* El recorrido es exactamente lo que sobresale de la fila, no un porcentaje al
   azar. El `min(0px, …)` es la clave: en una pantalla muy ancha la fila cabe
   entera y el resultado sería positivo, o sea que la fila se iría hacia la
   derecha dejando un hueco. Con el tope, ahí simplemente no se mueve. */
@keyframes desfilar{
  from{transform:translateX(0)}
  to{transform:translateX(min(0px, calc(100vw - 100% - 44px)))}
}

/* ── Revelado de imágenes ─────────────────────────────────────────────────── */
/* Se abre en horizontal desde el centro. Nada de `scale`: agrandar la imagen la
   saca unos píxeles por los lados y eso basta para que la página entera se pueda
   arrastrar en horizontal (medido: 5 px de más a 885 px de ancho). */
.marco{animation:revelar linear both; animation-timeline:view(); animation-range:entry 8% cover 34%}
@keyframes revelar{
  from{clip-path:inset(14% 0 14% 0 round var(--r-xl)); transform:translateY(16px); opacity:.5}
  to{clip-path:inset(0 0 0 0 round var(--r-xl)); transform:none; opacity:1}
}

/* ── Bloque final: descarga y cierre en uno ───────────────────────────────── */
.final{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s5); align-items:center;
  background:linear-gradient(125deg, var(--naranja), #FF8A4C 45%, #F25A18);
  background-size:180% 180%; animation:ondaColor 14s ease-in-out infinite;
  color:#fff; border-radius:var(--r-xl); padding:var(--s6); position:relative; overflow:hidden;
  box-shadow:0 24px 60px rgba(255,107,44,.28);
}
@keyframes ondaColor{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
.final::before{
  content:''; position:absolute; inset:-60% -20% auto; height:170%; pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.22), transparent 60%);
}
.final > *{position:relative}
.final h2{color:#fff; margin-top:10px}
.final .ojo{color:rgba(255,255,255,.85)}
.final p{color:rgba(255,255,255,.9); margin:var(--s2) 0 var(--s4); max-width:44ch}
.final .tienda{background:#fff; color:var(--tinta)}
.final .tienda svg{fill:var(--tinta)}
.final-qr{display:grid; justify-items:center; gap:10px}
.final-qr .qr{width:132px; height:132px; background:#fff; border-radius:18px; padding:11px}
.final-qr .qr svg{width:100%; height:100%; display:block}
.final-qr span{font-size:.8rem; color:rgba(255,255,255,.85)}

/* ── Botón flotante ───────────────────────────────────────────────────────── */
/* Aparece cuando el del héroe ya no se ve y se retira al llegar al de descarga.
   Es la conversión de quien va leyendo por la mitad. */
.cta-flotante{
  position:fixed; z-index:850; left:50%; bottom:22px; translate:-50% 0;
  display:inline-flex; align-items:center; gap:9px; height:50px; padding:0 24px; border-radius:999px;
  background:var(--naranja); color:#fff; font-weight:600; font-size:.96rem; white-space:nowrap;
  box-shadow:0 10px 30px rgba(255,107,44,.4);
  opacity:0; visibility:hidden; transform:translateY(18px) scale(.94);
  transition:opacity .3s, transform .38s cubic-bezier(.2,.9,.3,1), visibility .3s;
}
.cta-flotante svg{width:18px; height:18px}
.cta-flotante.a-la-vista{opacity:1; visibility:visible; transform:none}
.cta-flotante:hover{background:var(--naranja-h)}
@media (min-width:1081px){ .cta-flotante{display:none} }

/* ── Y todo lo anterior, apagado para quien lo pide ───────────────────────── */
@media (prefers-reduced-motion:reduce){
  .aura,.duo .f1 .movil,.duo .f2 .movil,.final{animation:none !important}
  .marco{clip-path:none !important; transform:none !important; opacity:1 !important}
  .cab::after{display:none}
}

@media (max-width:980px){
  .final{grid-template-columns:1fr; padding:var(--s4); text-align:center; justify-items:center}
  .final p{margin-inline:auto}
  .final .tiendas{justify-content:center}
  .razones{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .razones{grid-template-columns:1fr}
  .final-qr{display:none}
}