/* ============================================================
   TOKENS - paleta oficial PETS (brandbook 3.1)
   ============================================================ */
:root{
  /* Tema único: claro. El sitio no cambia con el modo oscuro del sistema. */
  color-scheme: light;

  /* Colores de marca, sin alterar */
  --naranja:#ff8700;
  /* Copia fija del naranja: --naranja se remapea a celeste dentro de la vista
     negocio, y hay piezas (el CTA naranja de la tarjeta de proveedor) que
     necesitan el naranja de marca sin importar la vista activa. */
  --naranja-marca:#ff8700;
  --tint-naranja-marca:#fff2e5;
  --celeste:#54d1ec;
  --rojo:#e34b26;
  --navy:#101b3b;
  --gris:#eae9e8;
  --blanco:#ffffff;

  /* Tintes derivados (los mismos que usa el brandbook en sus tarjetas) */
  --tint-naranja:#fff2e5;
  --tint-celeste:#e9f8fd;
  --naranja-oscuro:#e07500;   /* solo para hover, nunca para el logo */
  /* El archivo del logo trae sus propios valores, distintos a los del
     brandbook (#ff8700 y #54d1ec). Se respetan tal cual en el logotipo. */
  --naranja-logo:#ff7e00;
  --celeste-logo:#00d3ef;
  --ring-dueno:#ffe4c7;       /* formas decorativas del hero */
  --ring-negocio:#cdeef7;
  --huella-ink:rgba(16,27,59,.11);

  /* Semanticos */
  --bg:var(--blanco);
  --bg-alt:#f4f3f1;
  --surface:var(--blanco);
  --surface-2:var(--gris);
  --ink:var(--navy);
  --ink-soft:#4a5570;
  --ink-mute:#7b8399;
  --line:#e4e6ec;
  --line-strong:#c9cedd;
  --brand:var(--naranja);
  --on-brand:var(--blanco);
  --focus:var(--celeste);
  --ok:#1b7a3d;
  --chip-ink:#0f6d86;

  --radius:24px;
  --radius-sm:12px;
  --radius-lg:34px;
  --radius-xl:44px;
  --shadow:0 2px 4px rgba(16,27,59,.03), 0 24px 48px -28px rgba(16,27,59,.28);
  --shadow-lift:0 30px 70px -34px rgba(16,27,59,.45);

  --maxw:1200px;
  --font:"Gotham Rounded","Nunito","Segoe UI",system-ui,-apple-system,sans-serif;
}


/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
h1,h2,h3,h4{margin:0;font-weight:800;line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
h1{font-size:clamp(2.1rem,3.5vw,3.3rem)}
h2{font-size:clamp(1.8rem,3.6vw,3rem)}
h3{font-size:1.22rem;font-weight:700;letter-spacing:-.02em}
p{margin:0}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}

/* z-index:1 deja el contenido por encima del rastro de huellas, que se
   dibuja en la capa de fondo de cada sección. */
.wrap{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.section{padding:110px 0}
.section--alt{background:var(--bg-alt)}
.section--tight{padding-top:0}
.section__head{display:flex;flex-direction:column;gap:14px;max-width:60ch;margin-bottom:52px}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);
}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--brand);flex:none}
.lead{font-size:1.08rem;color:var(--ink-soft);max-width:60ch}
.note{font-size:.85rem;color:var(--ink-mute);max-width:62ch;margin-top:26px}
.note--ancha{max-width:none}

/* ============================================================
   FOTOS DE MASCOTAS (recortes PNG con transparencia, servidos en WebP)
   Tres son recortes «asomándose»: se apoyan siempre en un borde, nunca
   flotan en medio de la nada. La cuarta (aves) es una escena con su propio
   fondo oscuro, asi que va enmarcada como foto.
   ============================================================ */

/* Trío asomándose por el borde superior de la tarjeta naranja del cierre. */
.cierre__mascotas{
  display:block;position:relative;z-index:1;pointer-events:none;
  width:min(720px,84%);margin:0 auto -3px;
}
.cierre__mascotas img{display:block;width:100%;height:auto;aspect-ratio:1600/549}

/* ============================================================
   HERO DE DUEÑO — LIENZO CON ARCO
   El hero deja de ser «columna de texto + escena suelta» sobre el fondo
   blanco de la página: ahora vive dentro de un lienzo crema de radios
   grandes que le da borde propio y lo separa del resto del scroll. Dentro
   del lienzo la jerarquía es una sola: titular → arco celeste con la
   mascota → teléfono montado en el canto del arco.

   Namespace propio (.heroe) a conciencia: el hero de la vista negocio
   sigue con .hero y su panel, y no debe heredar nada de esta portada.
   ============================================================ */
.heroe{position:relative;overflow:clip}

/* El lienzo ocupa la pantalla entera: de borde a borde y con el alto de la
   ventana menos el header, que es sticky y se queda encima. `svh` y no
   `vh` porque en móvil la barra del navegador aparece y desaparece, y con
   `vh` el hero quedaría siempre un poco más alto que lo que se ve.
   `overflow:hidden` es lo que recorta el arco, el rastro de huellas y los
   desbordes de la mascota. */
.heroe__lienzo{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;
  min-height:calc(100svh - var(--alto-header,84px));
  padding:clamp(28px,3.4vw,56px) 0;
  /* Crema de marca con un resplandor celeste justo en la esquina donde cae
     el arco: el fondo empuja hacia la escena en vez de ser un plano liso. */
  /* La foto es el fondo: la dueña con su westie a la derecha y el lado
     izquierdo libre, que es donde va el texto. El crema plano de debajo es
     lo que se ve mientras carga. */
  background:url(assets/hero-fondo.webp) right center / cover no-repeat #fff6ea;
  box-shadow:0 48px 100px -58px rgba(16,27,59,.55);
}

/* Halo naranja detrás del titular: levanta el contraste del texto contra
   el crema sin meter una caja más. */
.heroe__halo,.heroe__marca-agua{display:none}
.heroe__halo{
  position:absolute;z-index:0;pointer-events:none;
  left:-6%;top:-34%;width:min(760px,54%);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(255,135,0,.18) 0%, rgba(255,135,0,0) 68%);
}
/* Huellas de agua del lienzo: el mismo motivo que el rastro del cursor,
   quieto y al 9 %, para que el crema no quede vacío. */
.heroe__marca-agua{position:absolute;inset:0;z-index:0;pointer-events:none;color:var(--naranja);opacity:.09}
.heroe__marca-agua span{position:absolute;transform:rotate(var(--giro))}
.heroe__marca-agua svg{display:block;width:100%;height:100%}

/* Lleva también la clase .wrap: de ahí salen el ancho máximo, el centrado
   y el aire lateral. Aquí sólo van las columnas. */
.heroe__grid{display:grid;grid-template-columns:minmax(0,1fr);align-items:center}
/* El texto ocupa la mitad izquierda, que la foto deja libre. */
.heroe__copy{max-width:min(600px,52%)}
.heroe__copy{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(16px,1.7vw,24px)}

/* Firma en pastilla: la misma frase de antes, pero con cuerpo propio para
   que no se lea como una viuda encima del titular. */
.heroe__firma{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 18px 7px 7px;border-radius:999px;
  background:rgba(255,255,255,.86);border:1px solid rgba(255,135,0,.26);
  box-shadow:0 14px 30px -22px rgba(16,27,59,.8);
  font-size:.71rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  /* Naranja puro sobre crema no llega a AA en texto tan chico; este es el
     mismo tono al 30 % más oscuro, que sí pasa. */
  color:#b45c00;
}
.heroe__firma i{
  flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--naranja);color:var(--blanco);
  display:grid;place-items:center;
}
.heroe__firma i svg{display:block;width:15px;height:15px}

.heroe h1{font-size:clamp(2.6rem,5.9vw,5.2rem);line-height:.98;letter-spacing:-.05em}
/* El tramo marcado ya no es sólo color: lleva un trazo a mano debajo, que
   es lo que convierte al titular en imagen. El trazo va en celeste porque
   sobre el naranja del texto es el único acento de marca que se distingue. */
.heroe__marca{position:relative;display:inline-block;color:var(--naranja);white-space:nowrap}
.heroe__trazo{
  position:absolute;z-index:-1;left:-1%;bottom:-.1em;
  width:102%;height:.3em;color:var(--celeste);opacity:.92;overflow:visible;
}
.heroe__lead{font-size:clamp(1.02rem,1.2vw,1.2rem);color:var(--ink-soft);max-width:42ch}

.heroe__cta{display:flex;flex-wrap:wrap;gap:14px}
/* El CTA principal se despega del lienzo con su propia sombra de color:
   sobre crema, un botón plano se hunde. */
.heroe__cta .btn--primary{box-shadow:0 20px 38px -20px rgba(224,117,0,.9)}
.heroe__cta .btn--ghost{background:rgba(255,255,255,.78);border-color:rgba(16,27,59,.16)}
.heroe__cta .btn--ghost:hover{background:var(--blanco)}

/* Fila de especies, ahora en pastilla blanca: responde «¿sirve para MI
   mascota?» a la altura de los botones y, de paso, apoya la columna de
   texto sobre una base sólida. */
.heroe__especies{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:11px 22px 11px 20px;border-radius:999px;
  background:rgba(255,255,255,.92);border:1px solid rgba(16,27,59,.07);
  box-shadow:0 26px 50px -34px rgba(16,27,59,.85);
}
.heroe__especies>p{margin:0;font-size:.8rem;font-weight:800;color:var(--ink-soft)}
.heroe__especies ul{display:flex;gap:16px;margin:0;padding:0;list-style:none}
.heroe__especies li{display:grid;justify-items:center;gap:5px}
.heroe__foto{
  width:50px;height:50px;border-radius:50%;overflow:hidden;
  border:3px solid var(--blanco);background:var(--blanco);
  box-shadow:0 8px 18px -8px rgba(16,27,59,.55);
  transition:transform .26s cubic-bezier(.34,1.5,.64,1);
}
.heroe__especies li:hover .heroe__foto{transform:translateY(-6px) scale(1.07)}
.heroe__foto img{display:block;width:100%;height:100%;object-fit:cover}
.heroe__especies li span:last-child{font-size:.68rem;font-weight:800;color:var(--ink-mute)}


@media (max-width:1040px){
  /* Apilado, la escena ocupa el ancho completo: los desbordes en
     porcentaje que funcionaban en media columna aquí se salen de la caja. */
  /* Apilado, la foto sigue de fondo pero la dueña caería detrás del texto:
     un velo crema que se abre hacia abajo sostiene la lectura y deja ver a
     la mascota en la parte baja. */
  .heroe__copy{max-width:none}
  .heroe__lienzo{background-position:72% bottom}
  .heroe__lienzo::before{
    content:"";position:absolute;inset:0;z-index:0;
    background:linear-gradient(180deg,rgba(255,246,234,.94) 0%,rgba(255,246,234,.9) 48%,rgba(255,246,234,.25) 100%);
  }
  .heroe__lead{max-width:52ch}
  /* La escena se acota y se centra. A ancho completo el arco se iba contra
     un borde y el teléfono contra el otro, con un hueco de crema en medio:
     acotada, las tres piezas vuelven a leerse como una sola composición. */
}
@media (max-width:640px){
  .heroe__especies{gap:12px;padding:10px 16px}
  .heroe__especies ul{gap:11px}
  .heroe__foto{width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){
  .heroe__foto{transition:none}
  .heroe__especies li:hover .heroe__foto{transform:none}
}


/* Encabezado sobre la foto: naranja de marca con tinta blanca, el color de la
   vista de dueño (brandbook 1.1). El relleno es el naranja puro; lo único que
   cambia es que el velo lateral lo profundiza bajo el texto, porque el blanco
   sobre #ff8700 se queda en 2,4:1 y sobre ese mismo naranja al 30 % más oscuro
   sube a 4,6:1. A la derecha, detrás de las aves, el naranja queda intacto. */
.banda-foto{
  position:relative;margin:0 0 38px;border-radius:var(--radius);overflow:hidden;
  background:var(--naranja);
  box-shadow:var(--shadow);
  display:flex;align-items:center;
  min-height:clamp(320px,33vw,430px);
  padding:clamp(30px,4vw,54px);
}
/* La foto no se recorta ni se escala: va entera pegada al canto derecho. */
.banda-foto__foto{
  position:absolute;z-index:1;right:0;bottom:0;width:min(58%,700px);pointer-events:none;
}
.banda-foto__foto img{display:block;width:100%;height:auto;aspect-ratio:1400/844}
/* Velo lateral: profundiza el naranja bajo el texto. Va DETRÁS de la foto
   (z-index 0 contra el 1 de la imagen), así que puede ser fuerte sin ensuciar
   a las aves. */
.banda-foto::after{
  content:"";position:absolute;z-index:0;inset:0;pointer-events:none;
  background:linear-gradient(96deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.33) 48%,transparent 66%);
}
.banda-foto__txt{
  position:relative;z-index:2;margin-bottom:0;max-width:min(42%,430px);
}
.banda-foto__txt h2{color:var(--blanco);font-size:clamp(1.7rem,2.8vw,2.45rem)}
.banda-foto__txt .lead{color:var(--blanco);max-width:none}
/* Blanco pleno, no al 88 %: rebajarlo dejaba el antetítulo en 4,26:1. */
.banda-foto__txt .eyebrow{color:var(--blanco)}
/* El punto del antetítulo es naranja de serie y sobre naranja desaparece. */
.banda-foto__txt .eyebrow::before{background:var(--blanco)}
/* En angosto las dos columnas no caben: el texto pasa arriba y la foto abajo a
   todo el ancho. El relleno inferior en % reserva el alto de la imagen
   (1400/845 ≈ 60% del ancho); se deja algo menos porque su franja superior es
   fondo oscuro y ahí puede caer la última línea sin taparse nada. */
@media (max-width:860px){
  .banda-foto{
    align-items:flex-start;min-height:0;padding-bottom:50%;
  }
  .banda-foto__foto{width:100%;max-width:none;left:0;right:0}
  .banda-foto__txt{max-width:none}
  /* Apilado el velo gira: profundiza la franja de arriba, donde va el texto. */
  .banda-foto::after{
    background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.2) 40%,transparent 68%);
  }
}
/* Palabra acentuada dentro de un titular, al estilo de una sola idea destacada */
.acc{color:var(--brand)}
.acc--celeste{color:var(--chip-ink)}
/* En la vista negocio --brand se vuelve --chip-ink por contraste, pero ese
   tono no está en el manual de marca. El acento del hero va en el celeste
   oficial (#54d1ec): sobre blanco da 1,8:1, la misma decisión que el naranja
   del hero de dueño (2,4:1), tomada a conciencia por ser titular de 60 px. */
body[data-vista="negocio"] .hero--b2b .acc{color:var(--celeste)}

/* ============================================================
   LOGO - archivo oficial "logos PETS_curvas.ai", curvas sin modificar.
   Los SVG sueltos estan en assets/ (naranja, blanco, celeste + isotipo).
   ============================================================ */
.logo{display:inline-flex;align-items:center;color:var(--naranja-logo);text-decoration:none}
/* 122 px de ancho: por encima del mínimo digital de 120 px (brandbook 2.7).
   La altura va explícita porque estos <svg> no llevan viewBox propio: sin
   ella el navegador les asigna los 150 px por defecto de un SVG sin medidas. */
.logo svg{display:block;width:122px;height:62px}
.logo--sm svg{width:70px;height:36px}   /* solo dentro de las maquetas de app */

/* La punta de la cola del logo del header se menea como la de un perro. Sólo
   esa instancia va inline (ver el comentario en el markup); las otras tres
   siguen con <use> y quedan quietas.
   OJO, esto costó un bug: la clase va en un <g> que ENVUELVE al path, no en el
   path. En SVG el atributo `transform` y la propiedad CSS `transform` son la
   misma cosa, así que el rotate() del keyframe sustituía la
   matrix(1,0,0,-1,801.49,285.69) del path —el transform calculado quedaba en la
   identidad— y la llama roja se dibujaba desplazada, fuera de la cola. Con el
   grupo, el path conserva su matriz y la rotación se aplica por encima.
   El giro pivota en la base de la llama, que es el borde de abajo de su caja. */
.logo__cola{
  transform-box:fill-box;
  transform-origin:50% 100%;
  animation:cola-menea 4.2s ease-in-out infinite;
}
/* Un perro no menea a metrónomo: da una ráfaga y descansa. De ahí que los
   golpes se apretujen en el primer tercio y el resto del ciclo esté quieto. */
@keyframes cola-menea{
  0%{transform:rotate(0deg)}
  3%{transform:rotate(16deg)}
  7%{transform:rotate(-13deg)}
  11%{transform:rotate(15deg)}
  15%{transform:rotate(-12deg)}
  19%{transform:rotate(12deg)}
  23%{transform:rotate(-8deg)}
  27%{transform:rotate(5deg)}
  31%,100%{transform:rotate(0deg)}
}
/* Al pasar el cursor por el logo, se pone contento. */
.logo:hover .logo__cola,.logo:focus-visible .logo__cola{animation-duration:1.5s}
@media (prefers-reduced-motion:reduce){
  .logo__cola{animation:none}
}
.logo--white{color:var(--blanco)}
.logo--celeste{color:var(--celeste-logo)}

/* ============================================================
   BOTONES Y CHIPS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 26px;border-radius:999px;border:2px solid transparent;
  font-weight:800;font-size:1rem;text-decoration:none;cursor:pointer;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--brand);color:var(--on-brand)}
.btn--primary:hover{background:var(--naranja-oscuro)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn--onbrand{background:var(--blanco);color:var(--navy)}
.btn--onbrand:hover{background:var(--tint-naranja)}
.btn--sm{min-height:44px;padding:0 18px;font-size:.92rem}

.chip{
  display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;
  font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  background:var(--tint-celeste);color:var(--chip-ink);
}
.link-arrow{
  display:inline-flex;align-items:center;gap:7px;font-weight:800;color:var(--brand);
  text-decoration:none;font-size:.95rem;background:none;border:0;padding:0;cursor:pointer;
}
.link-arrow:hover{text-decoration:underline;text-underline-offset:4px}

/* Dato pendiente de confirmar con el cliente */
.ph{
  display:inline-block;border:1.5px dashed var(--line-strong);border-radius:8px;
  padding:1px 12px;color:var(--ink-mute);font-weight:700;
}

/* ============================================================
   HEADER + SWITCH DE AUDIENCIA
   ============================================================ */
.header{
  position:sticky;top:0;z-index:50;background:var(--bg);
  border-bottom:1px solid var(--line);
}
.header__in{display:flex;align-items:center;gap:30px;height:84px}
.header__nav{display:flex;align-items:center;gap:26px;margin-left:auto}
/* :not(.btn) para que el enlace del menú no le gane en especificidad al
   color del botón: antes el CTA salía gris, y naranja sobre naranja al hover. */
.header__nav a:not(.btn){text-decoration:none;font-weight:700;font-size:.95rem;color:var(--ink-soft);white-space:nowrap}
.header__nav a.btn{white-space:nowrap}
.header__nav a:not(.btn):hover{color:var(--brand)}

.switch{
  display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--surface-2);
  border:1px solid var(--line);
}
.switch button{
  border:0;background:transparent;border-radius:999px;height:38px;padding:0 18px;
  font-weight:800;font-size:.9rem;color:var(--ink-soft);cursor:pointer;white-space:nowrap;
  transition:background-color .18s ease,color .18s ease;
}
/* La pastilla activa lleva el color de su audiencia (brandbook 1.1): naranja
   en dueño, celeste en negocio, con la tinta en blanco.
   Nota de accesibilidad: a 14,4 px el mínimo AA es 4,5:1 y esta combinación
   se queda en 2,4:1 sobre el naranja y 1,8:1 sobre el celeste. Es una decisión
   de diseño tomada a conciencia; si algún día hay que cumplir AA, las salidas
   son tinta navy (7,0 y 9,4) o rellenos más profundos (#b35e00 y #0f6d86). */
.switch button[aria-pressed="true"]{color:var(--blanco)}
.switch button[data-vista="dueno"][aria-pressed="true"]{background:var(--naranja)}
.switch button[data-vista="negocio"][aria-pressed="true"]{background:var(--celeste)}
/* La opción en reposo se dibuja como pastilla blanca: dentro del riel gris
   sin relleno no se leía como algo pulsable. */
.switch button[aria-pressed="false"]{background:var(--blanco);box-shadow:0 1px 2px rgba(16,27,59,.08)}
.switch button[aria-pressed="false"]:hover{color:var(--ink)}
.switch__corta{display:none}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;padding:56px 0 64px;overflow:clip}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center}
.hero__copy{display:flex;flex-direction:column;gap:24px;max-width:none}
.hero__copy .lead,.hero__copy .note{max-width:42ch}
/* El titular del hero pisa más fuerte que el resto de los h1 de la página. */
.hero h1{font-size:clamp(2.6rem,5.6vw,4.7rem);line-height:1.01;letter-spacing:-.045em}
.hero__copy .lead{font-size:1.18rem}
/* El de negocio es mucho más largo: se le baja un punto para que no ocupe
   media pantalla en cuatro líneas. */
.hero--b2b h1{font-size:clamp(2.4rem,4.4vw,3.9rem);line-height:1.04}
.hero__firma{font-size:.76rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--brand)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px}
/* Con el teléfono y el perro en absoluto, el escenario se queda sin
   contenido en flujo: si no se le da altura propia, colapsa a cero y el
   bloque de color se convierte en una raya. */
.hero__stage{position:relative;min-height:clamp(430px,40vw,560px);padding:30px 0}

/* Titular con palabra rotativa: todas las opciones ocupan la misma celda,
   así el resto de la línea nunca salta. */
.rot{display:grid;width:max-content}
.rot>span{
  grid-area:1/1;color:var(--brand);opacity:0;transform:translateY(.16em);
  transition:opacity .38s ease,transform .38s ease;white-space:nowrap;
}
.rot>span.is-on{opacity:1;transform:none}
/* Tramo destacado de un titular, ahora que el hero no rota palabras.
   Sin el nowrap, «pet parents» se partía entre dos líneas y el naranja
   quedaba cortado a la mitad. */
.marcado{color:var(--brand);white-space:nowrap}
/* Tramos que no deben partirse: evitan dejar un «tú» solo en su renglón. */
.junto{white-space:nowrap}

/* Formas de marca: media lente y los arcos del isotipo a gran escala
   (el brandbook los usa como recurso gráfico de fondo). */
.deco{position:absolute;pointer-events:none;z-index:0}
.deco--lens{border-radius:999px 0 0 999px;background:var(--tint-celeste)}
.deco--lens-r{border-radius:0 999px 999px 0;background:var(--tint-naranja)}
.deco svg{display:block;width:100%;height:100%}
/* Color por audiencia (brandbook 1.1): la vista de dueño es naranja y la de
   negocio celeste. El lente y los arcos del hero van los dos al color de su
   vista; antes se contradecían entre sí dentro del mismo hero. */
.hero .deco--lens{width:210px;height:420px;right:0;top:38px;background:var(--tint-naranja)}
/* El isotipo sustituye a los arcos como recurso de fondo. Lleva otra
   proporción (184,42 x 178,7 frente a los 140 x 220 de los arcos), así que la
   altura la marca el aspect-ratio y cada sitio sólo fija el ancho. La llama
   roja va horneada en el <symbol>, de modo que `color` sólo alcanza a las tres
   formas naranjas; el peso del conjunto se gradúa con `opacity`. */
.deco--iso{aspect-ratio:184.42/178.7}
.hero .deco--iso{left:-46px;bottom:-30px;width:230px;color:var(--naranja);opacity:.2}
.hero__stage .deco--ring{
  width:min(460px,90%);aspect-ratio:1;border-radius:50%;background:var(--ring-dueno);
  left:50%;top:50%;transform:translate(-50%,-50%);
}
.hero--b2b .hero__stage .deco--ring{background:var(--ring-negocio)}
/* El teléfono del hero deja de ser el sujeto: baja de tamaño y se ancla al
   canto inferior izquierdo del bloque, montando sobre él. */
.hero--b2b .deco--lens{background:var(--tint-celeste)}
.hero--b2b .deco--iso{color:var(--celeste-logo);opacity:.26}
.phone,.panel{position:relative;z-index:1}

/* ============================================================
   MOCKUP DE APP (dibujado, sin imagenes)
   ============================================================ */
.phone{
  width:286px;border-radius:38px;background:var(--navy);padding:11px;
  box-shadow:0 30px 60px -28px rgba(16,27,59,.65);flex:none;
}
.phone__screen{
  border-radius:28px;overflow:hidden;background:#fff;color:#101b3b;
  display:flex;flex-direction:column;min-height:470px;
}
.phone--sm{width:250px;border-radius:32px;padding:9px}
.phone--sm .phone__screen{min-height:0;border-radius:24px}
.app__top{background:var(--naranja);color:#fff;padding:13px 16px 16px;display:flex;flex-direction:column;gap:11px}
.app__toprow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.app__hi{font-size:.78rem;font-weight:700;opacity:.92}
.app__search{
  background:#fff;border-radius:999px;height:36px;display:flex;align-items:center;gap:9px;
  padding:0 13px;color:#7b8399;font-size:.78rem;font-weight:600;
}
.app__body{padding:13px 16px;display:flex;flex-direction:column;gap:10px;background:#fff;flex:1}
.app__chips{display:flex;gap:7px;flex-wrap:wrap}
.app__chip{font-size:.68rem;font-weight:800;padding:5px 10px;border-radius:999px;background:#eae9e8;color:#2c3654}
.app__chip--on{background:#54d1ec;color:#083744}
.app__label{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8b93a8}
.app__card{border:1px solid #e6e8ef;border-radius:13px;padding:9px 10px;display:flex;gap:10px;align-items:center}
.app__thumb{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;background:#fff2e5;color:#ff8700}
.app__thumb--celeste{background:#e9f8fd;color:#1c93b1}
.app__card b{display:block;font-size:.83rem;line-height:1.25}
.app__card>span:nth-child(2){min-width:0;flex:1}
.app__meta{font-size:.71rem;color:#7b8399;font-weight:600}
.app__price{margin-left:auto;font-size:.82rem;font-weight:800;color:#101b3b;text-align:right;white-space:nowrap}
.app__grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.app__slot{border:1.5px solid #e6e8ef;border-radius:11px;padding:8px 6px;font-size:.74rem;font-weight:700;text-align:center}
.app__slot--on{border-color:#ff8700;background:#fff2e5;color:#b45c00}
.app__cta{background:#ff8700;color:#fff;border-radius:999px;height:38px;display:grid;place-items:center;font-weight:800;font-size:.82rem}
.app__track{display:flex;align-items:center;gap:9px;font-size:.74rem;font-weight:700}
.app__dot{width:11px;height:11px;border-radius:50%;background:#eae9e8;flex:none}
.app__dot--on{background:#54d1ec}
.app__dot--now{background:#ff8700}
.app__bar{height:6px;border-radius:3px;background:#eae9e8;overflow:hidden}
.app__bar i{display:block;height:100%;width:62%;background:#54d1ec}

/* ============================================================
   BARRA DE CONFIANZA
   ============================================================ */
/* Franja de cifras bajo el hero: se desplaza sola en bucle continuo.
   La lista va duplicada; el segundo bloque es el que evita el hueco al
   volver al inicio. */
.datos{
  position:relative;background:transparent;
  border-top:1px solid var(--line);
  padding:26px 0 30px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
}
.datos__track{display:flex;align-items:center;width:max-content;animation:corre 42s linear infinite}
.datos:hover .datos__track,.datos:focus-within .datos__track{animation-play-state:paused}
.dato{display:flex;flex-direction:column;gap:4px;padding:0 34px;white-space:nowrap}
.dato b{font-size:1.55rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.dato span{font-size:.92rem;color:var(--ink-soft)}
.dato__sep{flex:none;width:17px;height:17px;color:var(--brand);opacity:.38}
.dato__sep svg{display:block;width:100%;height:100%}
@keyframes corre{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .datos{overflow-x:auto}
  .datos__track{animation:none}
}

/* ============================================================
   PASOS
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.steps--4{grid-template-columns:repeat(4,1fr);gap:24px}
.step{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.step__n{font-size:.78rem;font-weight:800;letter-spacing:.12em;color:var(--brand);border-top:3px solid var(--brand);padding-top:12px;width:100%}
.step p{color:var(--ink-soft);font-size:.96rem}

/* ============================================================
   VERTICALES
   ============================================================ */
.vcard{position:relative;overflow:hidden}
/* Rastro que aparece al pasar el cursor: señala en qué tarjeta está el usuario. */
.vcard__huellas{position:absolute;inset:0;pointer-events:none;z-index:0}
/* El contenido se mantiene por encima: el rastro pasa por detrás del texto. */
.vcard__top,.vcard h3,.vcard p,.vcard .avisame,.vcard .ok{position:relative;z-index:1}
.vcard__huella{
  position:absolute;color:var(--naranja);opacity:0;
  transform:rotate(var(--giro)) scale(.82);
  transition:opacity .3s ease,transform .3s ease;
}
.vcard__huella svg{display:block;width:100%;height:100%}
.vcard:hover .vcard__huella,
.vcard:focus-within .vcard__huella{opacity:.26;transform:rotate(var(--giro)) scale(1)}
.vcard:hover .vcard__huella:nth-child(2){transition-delay:.07s}
.vcard:hover .vcard__huella:nth-child(3){transition-delay:.14s}
.vcard:hover{border-color:transparent}
.verticales{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.vcard{
  background:var(--surface);border:0;border-radius:var(--radius);
  padding:32px;display:flex;flex-direction:column;gap:14px;min-height:250px;
  box-shadow:var(--shadow);
  transition:transform .22s ease,box-shadow .22s ease;
}
.vcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.vcard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
/* El ícono es un render 3D con su propia luz y sombra: va sin disco de color
   detrás y más grande, que a 64 px perdía el detalle. */
.vcard__ico{width:92px;height:92px;display:grid;place-items:center;margin:-6px 0 0 -6px}
.vcard__ico img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(16,27,59,.18))}
.vcard p{color:var(--ink-soft);font-size:.94rem}
.vcard__foot{margin-top:auto}
.avisame{display:flex;gap:8px;margin-top:auto}
.avisame input{flex:1;min-width:0;height:44px;border-radius:10px;border:1.5px solid var(--line-strong);background:var(--bg);padding:0 12px;font-size:.9rem}
.avisame input::placeholder{color:var(--ink-mute)}
/* ============================================================
   VERTICALES · la tarjeta se inunda de color
   En reposo son tarjetas blancas y legibles. Al pasar el cursor, un
   círculo del color del servicio crece desde el ícono y llena la
   tarjeta; el texto cambia de tinta a la vez. La tinta se elige por
   contraste: sobre naranja y celeste va el navy, sobre navy el blanco.
   ============================================================ */
.vcard{--tono:var(--naranja);--tinta:var(--navy);isolation:isolate}
.vcard--celeste{--tono:var(--celeste)}
.vcard--navy{--tono:var(--navy);--tinta:var(--blanco)}
/* El círculo nace donde está el ícono y crece hasta tapar la esquina
   más lejana. Sale del flujo de pintura con z-index negativo. */
.vcard::before{
  content:"";position:absolute;z-index:-1;
  left:32px;top:32px;width:64px;height:64px;border-radius:50%;
  background:var(--tono);transform:scale(0);
  transition:transform .55s cubic-bezier(.32,.06,.2,1);
}
.vcard:hover::before,.vcard:focus-within::before{transform:scale(14)}
.vcard h3,.vcard p,.vcard .link-arrow{transition:color .3s ease .06s}
.vcard:hover h3,.vcard:focus-within h3,
.vcard:hover p,.vcard:focus-within p,
.vcard:hover .link-arrow,.vcard:focus-within .link-arrow{color:var(--tinta)}
.vcard__ico{transition:transform .4s cubic-bezier(.34,1.6,.64,1)}
.vcard:hover .vcard__ico,.vcard:focus-within .vcard__ico{transform:scale(1.1) rotate(-7deg)}
/* Sobre el color inundado el rastro naranja desaparecía: pasa a la tinta. */
.vcard:hover .vcard__huella,.vcard:focus-within .vcard__huella{color:var(--tinta);opacity:.2}
.vcard .link-arrow span{display:inline-block;transition:transform .3s cubic-bezier(.34,1.5,.64,1)}
.vcard:hover .link-arrow span{transform:translateX(6px)}

/* Entrada en cascada al aparecer la grilla. */
.verticales .vcard{
  opacity:0;transform:translateY(26px);
  transition:opacity .5s ease,transform .55s cubic-bezier(.34,1.3,.64,1),box-shadow .22s ease;
}
.verticales.is-on .vcard{opacity:1;transform:none;transition-delay:calc(var(--i) * .07s)}
.verticales.is-on .vcard:hover{transform:translateY(-4px);transition-delay:0s}
@media (prefers-reduced-motion:reduce){
  .verticales .vcard{opacity:1;transform:none;transition:none}
  .vcard::before,.vcard__ico,.vcard .link-arrow span{transition:none}
}
.avisame .btn{min-height:44px;padding:0 16px;font-size:.9rem}
.ok{color:var(--ok);font-weight:800;font-size:.92rem;margin-top:auto}

/* ============================================================
   PRODUCTO EN USO
   ============================================================ */
/* Tres tarjetas de color; la activa se ensancha y muestra su pantalla.
   Siempre hay una activa, así que la sección nunca se ve vacía. */
/* ============================================================
   CÓMO RESERVAR O COMPRAR · lista de pasos + un celular
   Las pantallas comparten celda de grilla y se funden con opacidad y un
   pequeño desplazamiento; sólo la activa es visible. El paso activo lleva
   la barra de progreso que marca cuánto falta para pasar al siguiente.
   ============================================================ */
/* La sección aprieta para caber en una pantalla: menos padding propio, la
   cabecera más cerca de los pasos y el celular un punto más chico. */
.flujo{position:relative;overflow:clip;padding-block:clamp(52px,6vw,78px)}
.flujo .section__head{margin-bottom:clamp(14px,2vw,26px)}
/* Centrado: el celular mide casi el doble que la lista, y alineando arriba
   sobresalía 366 px por abajo. Centrado, el desnivel se reparte y las dos
   columnas se leen como un bloque. */
.flujo__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:clamp(32px,5vw,80px);align-items:center}
/* El gato asoma por el canto inferior, bajo la lista: rellena el hueco que
   deja el celular alto sin competir con los pasos. */
.flujo__gato{position:absolute;left:clamp(-20px,1vw,20px);bottom:-10px;width:min(200px,17vw);height:auto;pointer-events:none;filter:drop-shadow(0 18px 22px rgba(16,27,59,.22))}
.flujo__pasos{display:flex;flex-direction:column;gap:clamp(8px,2.4vw,26px);position:relative}
/* Hilo vertical que une los números: dice «esto es un recorrido». */
.flujo__pasos::before{content:"";position:absolute;left:23px;top:28px;bottom:28px;width:2px;background:var(--line);z-index:0}
.flujo__paso{
  position:relative;z-index:1;display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:start;
  padding:14px 18px 14px 0;border:0;border-radius:18px;background:transparent;text-align:left;cursor:pointer;font:inherit;color:var(--ink);
  transition:background-color .25s ease;
}
.flujo__paso:hover,.flujo__paso:focus-visible{background:var(--bg-alt)}
.flujo__paso.is-on{background:var(--tint-naranja)}
.flujo__n{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--blanco);border:2px solid var(--line-strong);color:var(--ink-mute);
  font-weight:800;font-size:1.05rem;transition:background-color .25s ease,color .25s ease,border-color .25s ease,transform .3s cubic-bezier(.34,1.5,.64,1);
}
.flujo__paso.is-on .flujo__n{background:var(--naranja);border-color:var(--naranja);color:var(--blanco);transform:scale(1.08)}
.flujo__paso.is-done .flujo__n{border-color:var(--naranja);color:var(--naranja)}
.flujo__txt{display:flex;flex-direction:column;gap:4px;padding-top:6px;min-width:0}
.flujo__tit{font-weight:800;font-size:1.06rem;letter-spacing:-.015em;line-height:1.25}
.flujo__desc{font-size:.92rem;color:var(--ink-soft);line-height:1.5}
/* La barra sólo existe en el paso activo: mide el tiempo hasta el siguiente. */
.flujo__barra{display:none;height:3px;border-radius:2px;background:rgba(16,27,59,.1);overflow:hidden;margin-top:8px}
.flujo__paso.is-on .flujo__barra{display:block}
.flujo__barra i{display:block;height:100%;width:0;background:var(--naranja);border-radius:2px}
.flujo--auto .flujo__paso.is-on .flujo__barra i{animation:flujo-avanza 4500ms linear forwards}
@keyframes flujo-avanza{from{width:0}to{width:100%}}

/* El celular: las capturas ya traen el marco, así que aquí sólo se apilan.
   El halo naranja detrás lo despega del blanco de la sección. */
.flujo__telefono{position:relative;display:grid;place-items:center;justify-self:center;width:min(100%,300px)}
.flujo__telefono>*{grid-area:1/1}
.flujo__halo{
  width:88%;aspect-ratio:1;border-radius:50%;align-self:center;
  background:radial-gradient(circle,rgba(255,135,0,.22) 0%,rgba(255,135,0,0) 70%);
}
/* La pantalla que sale se apaga al instante y sólo la que entra se funde:
   con transición en ambas, al cambiar rápido de paso se apilaban varias
   pantallas a media opacidad dentro del celular. */
.flujo__pantalla{
  display:block;width:100%;height:auto;
  opacity:0;transform:translateY(14px) scale(.985);transition:none;
  filter:drop-shadow(0 30px 40px rgba(16,27,59,.25));
}
.flujo__pantalla.is-on{opacity:1;transform:none;transition:opacity .45s ease,transform .55s cubic-bezier(.4,0,.2,1)}

@media (max-width:900px){
  .flujo__grid{grid-template-columns:1fr;gap:34px}
  /* Apilado, el celular va primero y la lista debajo. */
  .flujo__telefono{order:-1;width:min(100%,300px)}
  .flujo__gato{display:none}
}
@media (prefers-reduced-motion:reduce){
  .flujo__pantalla{transition:opacity .2s ease;transform:none}
  .flujo__paso.is-on .flujo__n{transform:none}
  .flujo--auto .flujo__paso.is-on .flujo__barra i{animation:none;width:100%}
}

/* ============================================================
   AVATAR · iniciales de la agenda del panel de proveedor
   ============================================================ */
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--tint-celeste);color:var(--chip-ink);font-weight:800;font-size:.85rem}
/* ============================================================
   TIRA DE LOGOS DE ALIADOS
   Bucle continuo con la lista duplicada: el track mide el doble y se
   desplaza un 50 %, así el salto al reiniciar cae justo donde empieza la
   copia y no se nota. Los bordes se desvanecen con una máscara para que los
   logos no aparezcan y desaparezcan de golpe contra el canto.
   ============================================================ */
.aliados{
  position:relative;margin-top:42px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.aliados__track{
  display:flex;align-items:center;gap:clamp(36px,5vw,72px);
  width:max-content;margin:0;padding:0;list-style:none;
  animation:aliados-corre 34s linear infinite;
}
.aliados:hover .aliados__track,
.aliados:focus-within .aliados__track{animation-play-state:paused}
.aliados__item{flex:none;display:grid;place-items:center}
.aliados__item img{
  display:block;width:auto;height:clamp(52px,6vw,74px);
  /* Los logos vienen en colores muy dispares; una desaturación leve y algo de
     opacidad los hace convivir sin apagarlos del todo. */
  filter:saturate(.9);opacity:.85;
  transition:opacity .25s ease,filter .25s ease,transform .25s ease;
}
.aliados__item img:hover{opacity:1;filter:none;transform:scale(1.04)}
@keyframes aliados-corre{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  /* Sin movimiento la tira pasa a ser un carril que se arrastra a mano. */
  .aliados{overflow-x:auto}
  .aliados__track{animation:none}
  .aliados__item img{transition:none}
}

/* Titular de la sección de casos, sobre la tira de logos. */
.casos__titular{font-size:clamp(1.6rem,3vw,2.5rem);line-height:1.22;max-width:none}

/* ============================================================
   FAQ
   ============================================================ */
/* El acordeón ocupa todo el ancho de la sección, como el resto de bloques.
   La respuesta sí conserva medida de lectura: una línea de 120 caracteres
   cansa la vista. */
.faq{border-top:1px solid var(--line);max-width:none}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 56px 20px 0;position:relative;font-weight:700;font-size:1.04rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--brand);font-size:1.6rem;font-weight:800;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{color:var(--brand)}
.faq p{padding:0 56px 24px 0;color:var(--ink-soft);max-width:72ch}
.faq__links{display:flex;flex-wrap:wrap;gap:26px;margin-top:26px}

/* ============================================================
   CIERRE
   ============================================================ */
/* Cierre: tarjeta flotante que monta sobre el footer oscuro */
.cierre{background:var(--bg-alt);padding:96px 0 0}
.cierre .wrap{position:relative;z-index:2}
/* La tarjeta toma el color de su audiencia: naranja en dueño, celeste en
   negocio (brandbook 1.1). La tinta es navy en las dos, porque el blanco no
   contrasta ni sobre el naranja (2,4:1) ni sobre el celeste (1,8:1). */
.cta-card{
  position:relative;overflow:clip;background:var(--naranja);color:var(--navy);
  border-radius:var(--radius-xl);padding:56px;margin-bottom:-120px;
  box-shadow:var(--shadow-lift);
}
.cta-card--celeste{background:var(--celeste)}
.cta-card .deco--circle{
  width:520px;height:520px;border-radius:50%;background:rgba(255,255,255,.16);
  right:-150px;bottom:-260px;
}
.cta-card .deco--iso{right:40px;top:-60px;width:200px;color:var(--blanco);opacity:.32}
.cierre__grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.cta-card h2{color:var(--navy)}
.cta-card p{color:rgba(16,27,59,.82)}
.cierre__block{display:flex;flex-direction:column;gap:18px}
.cierre__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
/* El secundario del cierre: sobre el relleno de marca, línea navy. */
.btn--linea{background:transparent;color:var(--navy);border:2px solid rgba(16,27,59,.5)}
.btn--linea:hover{background:rgba(16,27,59,.08);color:var(--navy);border-color:var(--navy)}
.news{display:flex;gap:10px;flex-wrap:wrap}
.news input{flex:1;min-width:220px;height:52px;border-radius:999px;border:2px solid rgba(16,27,59,.42);background:rgba(255,255,255,.7);color:var(--navy);padding:0 20px;font-weight:600}
.news input::placeholder{color:rgba(16,27,59,.62)}
.cierre__cross{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;font-weight:700;
  margin-bottom:34px;color:var(--ink-soft);
}
.cierre__cross button{
  background:transparent;border:2px solid var(--line-strong);color:var(--ink);border-radius:999px;
  height:46px;padding:0 22px;font-weight:800;cursor:pointer;transition:border-color .18s ease,color .18s ease;
}
.cierre__cross button:hover{border-color:var(--brand);color:var(--brand)}

/* ============================================================
   B2B
   ============================================================ */
/* ------------------------------------------------------------
   PALETA CELESTE DE LA VISTA DE NEGOCIO
   El brandbook (1.1) da el naranja a pet parents y el celeste a
   proveedores, así que aquí no debe quedar naranja. En vez de reescribir
   las treinta y una reglas que lo usan, se reasignan los tokens dentro del
   ámbito [data-vista="negocio"] y se corrigen a mano los tres casos en los
   que el celeste plano no sirve.
   ------------------------------------------------------------ */
body[data-vista="negocio"]{
  --naranja:var(--celeste);
  --naranja-logo:var(--celeste-logo);
  --naranja-oscuro:#2ab4d4;
  --tint-naranja:var(--tint-celeste);
  /* Caso 1 · --brand se usa como TINTA en trece reglas (titulares, flechas,
     el «+» de la FAQ...). El celeste de marca sobre blanco da 1,8:1, así que
     ahí toma el celeste profundo que ya existía como --chip-ink: 5,9:1. */
  --brand:var(--chip-ink);
}
/* Caso 2 · Los CTA sí llevan el celeste pleno, que es lo que se pidió, con
   tinta navy: el blanco encima se queda en 1,8:1 y el navy da 9,4:1. */
body[data-vista="negocio"] .btn--primary{background:var(--celeste);color:var(--navy)}
body[data-vista="negocio"] .btn--primary:hover{background:var(--naranja-oscuro);color:var(--navy)}
/* Caso 3 · Sobre las secciones que ya son celestes, el marcador de la parada
   activa desaparecería: pasa a navy. */
body[data-vista="negocio"] .parada.is-on .parada__n{background:var(--navy);color:var(--blanco)}
/* Remates que traían color de la paleta naranja y ahora desentonan. */
body[data-vista="negocio"] .booking .tag{color:var(--chip-ink)}
body[data-vista="negocio"] .form--tarjeta::before{background:linear-gradient(90deg,var(--chip-ink),var(--celeste))}
body[data-vista="negocio"] .form--tarjeta .field input:focus,
body[data-vista="negocio"] .form--tarjeta .field select:focus{box-shadow:0 0 0 4px rgba(84,209,236,.34)}

/* El lavado del escenario se queda dentro del celeste: antes acababa en
   naranja, que es el color de la otra vista. */

/* La maqueta en la mano ya trae su propia sombra y recorte: ocupa el escenario
   entero y desborda un poco por la derecha, como el recorte original. */
.hero__app{position:relative;z-index:1;display:block;width:120%;max-width:none;height:auto;margin:0 -12% 0 0;filter:drop-shadow(0 26px 34px rgba(16,27,59,.2))}
.panel{width:min(432px,100%);background:var(--surface);border-radius:20px;box-shadow:var(--shadow);border:1px solid var(--line);overflow:hidden}
.panel__top{background:var(--navy);color:#fff;padding:14px 18px;display:flex;align-items:center;gap:12px}
.panel__top b{font-size:.9rem}
.panel__tabs{margin-left:auto;display:flex;gap:14px;font-size:.76rem;color:rgba(255,255,255,.6);font-weight:700}
.panel__tabs .on{color:#fff;border-bottom:2px solid var(--naranja);padding-bottom:2px}
.panel__body{padding:18px;display:flex;flex-direction:column;gap:14px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kpi{background:var(--bg-alt);border-radius:12px;padding:11px 12px}
.kpi b{display:block;font-size:1.1rem;font-variant-numeric:tabular-nums}
.kpi span{font-size:.65rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}
.booking{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:12px;padding:11px}
.booking b{font-size:.86rem;display:block}
.booking span{font-size:.76rem;color:var(--ink-mute);font-weight:600}
.booking .tag{margin-left:auto;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:4px 9px;border-radius:999px;background:var(--tint-naranja);color:#b45c00}
.booking .tag--ok{background:var(--tint-celeste);color:var(--chip-ink)}

.dos{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.bigcard{border:1px solid var(--line);border-radius:var(--radius);padding:30px;background:var(--surface);display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.bigcard--naranja{background:var(--tint-naranja);border-color:transparent}
.bigcard--celeste{background:var(--tint-celeste);border-color:transparent}
.bigcard p{color:var(--ink-soft)}

/* ============================================================
   TIPO DE NEGOCIO · las dos rutas
   Tarjeta en dos columnas: el texto y el CTA a la izquierda; a la derecha
   la escena, con la foto anclada abajo y a la derecha (la recorta el propio
   canto redondeado de la tarjeta) y los chips de rubro flotando encima. El
   decorado de la sección —una huella sobre su mancha y una mancha celeste—
   repite el lenguaje de las cabeceras con foto.
   ============================================================ */
.tipos{position:relative;overflow:clip}
.tipos .wrap{position:relative;z-index:1}
.tipos__deco{position:absolute;pointer-events:none;z-index:0}
.tipos__deco--huella{
  right:-3%;top:-6%;width:min(250px,20vw);aspect-ratio:1;
  display:grid;place-items:center;background:var(--tint-celeste);color:var(--celeste);
  border-radius:46% 54% 50% 50% / 55% 45% 55% 45%;
}
.tipos__deco--huella svg{width:52%;height:52%;transform:rotate(16deg)}
.tipos__deco--mancha{
  left:-5%;bottom:-10%;width:min(300px,24vw);aspect-ratio:1.35;
  background:var(--tint-celeste);border-radius:54% 46% 48% 52% / 50% 60% 40% 50%;
}
.tipos__grid{gap:26px}
.tipo{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:14px;
  min-height:376px;border-radius:26px;padding:32px 0 0 32px;
  transition:transform .3s cubic-bezier(.34,1.4,.64,1),box-shadow .3s ease;
}
.tipo:hover{transform:translateY(-4px);box-shadow:0 26px 44px -26px rgba(16,27,59,.35)}
.tipo--naranja{background:var(--tint-naranja-marca)}
.tipo--celeste{background:var(--tint-celeste)}
.tipo__txt{position:relative;z-index:2;display:flex;flex-direction:column;gap:14px;align-items:flex-start;padding-bottom:34px}
.tipo h3{font-size:1.4rem;letter-spacing:-.02em;line-height:1.15;max-width:12ch}
.tipo p{color:var(--ink-soft);font-size:.96rem;line-height:1.55;max-width:27ch}
.tipo__cta{margin-top:auto;gap:10px;white-space:nowrap;font-size:.95rem;padding:0 22px;min-height:50px}
.tipo__cta svg{width:18px;height:18px;flex:none;transition:transform .25s ease}
.tipo:hover .tipo__cta svg{transform:translateX(4px)}
/* En la vista negocio el CTA relleno es celeste con tinta navy; aquí la
   tarjeta de proveedor es naranja y su botón tiene que ser naranja. */
body[data-vista="negocio"] .tipo--naranja .btn--primary{background:var(--naranja-marca,#ff8700);color:var(--blanco)}
body[data-vista="negocio"] .tipo--naranja .btn--primary:hover{background:#e07500;color:var(--blanco)}
.tipo--celeste .btn--ghost{background:rgba(255,255,255,.7);border-color:rgba(16,27,59,.18)}

.tipo__escena{position:relative;min-height:344px;margin-top:-32px}
.tipo__relleno{position:absolute;right:0;bottom:0;display:block;height:auto}
.tipo__foto{display:block}
/* Mascota de relleno mientras no hay foto: apoyada en el canto de abajo. */
.tipo__relleno{width:78%;max-width:340px;filter:drop-shadow(0 16px 20px rgba(16,27,59,.22))}
/* La foto llena su columna a toda la altura de la tarjeta y se recorta por
   los lados (cover) en vez de desbordar hacia el texto: con tarjetas de
   ~560 px no caben foto entera y párrafo sin pisarse. El encuadre se
   desplaza a la derecha para conservar la tina y la bolsa en la de
   proveedor; en la de cuidador el interés está al centro-derecha. */
/* La foto arranca bajo la franja de los chips (88 px), así ninguno le tapa
   la cara a nadie. Con la tarjeta más alta la caja queda casi en la
   proporción de la foto y el recorte lateral es mínimo. */
.tipo__foto{
  position:absolute;left:0;bottom:0;width:104%;height:calc(100% - 112px);max-width:none;
  object-fit:cover;object-position:56% bottom;
  /* El recorte lateral deja un canto recto contra el fondo; un desvanecido
     corto en el borde izquierdo lo funde con la tarjeta. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%);
  mask-image:linear-gradient(90deg,transparent 0,#000 14%);
}
.tipo.con-retrato .tipo__relleno{display:none}
.tipo__chispas{position:absolute;z-index:2;left:1%;top:40%;width:12%;height:auto;aspect-ratio:1}
.tipo--naranja .tipo__chispas{color:var(--naranja-marca)}
.tipo--celeste .tipo__chispas{color:var(--celeste)}
/* Chips de rubro: pastillas blancas con su icono, sueltas sobre la escena. */
/* Los chips viven en una caja con margen: 30 px del canto superior —a la
   altura del título— y 26 px del borde derecho, en dos filas escalonadas. */
.tipo__chips{list-style:none;margin:0;padding:0;position:absolute;inset:30px 26px auto 0;height:80px;z-index:3;pointer-events:none}
.tipo__chips li{
  position:absolute;left:var(--x,auto);right:var(--r,auto);top:var(--y);
  display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 9px;border-radius:999px;
  background:var(--blanco);font-size:.74rem;font-weight:800;color:var(--navy);white-space:nowrap;
  box-shadow:0 12px 24px -14px rgba(16,27,59,.55);
}
.tipo__chips svg{width:16px;height:16px;flex:none}
.tipo--naranja .tipo__chips li:nth-child(1) svg,.tipo--naranja .tipo__chips li:nth-child(2) svg{color:var(--naranja-marca)}
.tipo--naranja .tipo__chips li:nth-child(3) svg{color:var(--celeste)}
.tipo--celeste .tipo__chips li:nth-child(1) svg,.tipo--celeste .tipo__chips li:nth-child(2) svg{color:var(--celeste)}
.tipo--celeste .tipo__chips li:nth-child(3) svg{color:var(--rojo)}
@media (max-width:1040px){
  .tipo{grid-template-columns:1fr;padding:28px 28px 0;min-height:0}
  .tipo__txt{padding-bottom:0}
  .tipo__escena{min-height:250px}
  .tipo__relleno{width:60%;max-width:300px}
  .tipo__chips li{font-size:.74rem}
}
@media (prefers-reduced-motion:reduce){
  .tipo,.tipo__cta svg{transition:none}
  .tipo:hover{transform:none}
  .tipo:hover .tipo__cta svg{transform:none}
}

/* ============================================================
   MODELO COMERCIAL (vista de negocio)
   El modelo es una progresión en el tiempo —0 % → 7 % → 15 %— y se dibuja
   como tal. Eso resuelve solo el encargo de dejar el modelo regular «menos
   destacado»: queda al final del recorrido y fuera de la banda de fundador,
   sin necesidad de apagarle el contraste ni de darle un bloque aparte.
   ============================================================ */
/* El encabezado suelta su tope de 60ch: el titular es una frase larga y a esa
   anchura caía en tres líneas dejando media sección vacía. */
#b-precios .section__head{max-width:none}
/* Sin tope de ancho: a 24ch caía en tres líneas dejando media sección vacía.
   A todo lo ancho entra en dos, y eso permite subir el cuerpo de 2,5 a 3 rem
   sin ganar una línea. */
.modelo__titular{font-size:clamp(1.7rem,3.4vw,3rem);line-height:1.2;max-width:none}
#b-precios .section__head .lead{max-width:62ch}
/* Navy de base y un halo de celeste que se mueve por encima. Antes era un
   degradado a #153a63 y --chip-ink: dos azules que no aparecen en ninguna otra
   parte del sitio, y por eso el bloque se leía como ajeno. Ahora solo usa los
   dos colores que la página ya repite en todos lados. */
/* --- La ruta de comisión --------------------------------------------------
   Tres hitos en el tiempo sobre una línea punteada, con huellas caminando
   entre ellos: el mismo recurso que «¿Cómo funciona para tu negocio?». Una
   banda de tinte celeste cubre los dos primeros y deja el tercero fuera, así
   que el modelo regular queda en segundo plano por posición y no porque se le
   haya bajado el contraste. */
.comision{--sep:26px;margin-top:clamp(34px,4.5vw,52px)}
.comision__intro{max-width:64ch;color:var(--ink-soft)}
.comision__intro b{color:var(--ink)}
/* Una sola superficie para los tres hitos. Antes la banda de tinte cubría
   solo dos y el tercero caía sobre el fondo de la sección: el bloque se partía
   en dos y parecía un fallo, no una decisión. Ahora el recorrido entero va
   sobre la misma tarjeta y la distinción vive en la LÍNEA, que es donde debe
   estar en una línea de tiempo. */
.comision__ruta{
  position:relative;margin-top:clamp(40px,5vw,60px);
  background:var(--surface);border-radius:var(--radius);
  padding:44px clamp(24px,3vw,38px) clamp(28px,3vw,38px);
  box-shadow:0 1px 2px rgba(16,27,59,.04), 0 18px 38px -20px rgba(16,27,59,.2);
}
.comision__sello{
  position:absolute;z-index:3;top:-13px;left:clamp(24px,3vw,38px);
  display:inline-block;padding:6px 15px;border-radius:999px;
  background:var(--celeste);color:var(--navy);
  font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
/* Base: punteado gris de punta a punta, el camino completo. */
.comision__linea{
  position:absolute;z-index:1;left:clamp(24px,3vw,38px);right:clamp(24px,3vw,38px);top:57px;
  border-top:3px dashed rgba(16,27,59,.18);
}
/* Encima, el tramo de fundador en celeste continuo: va del primer punto al
   segundo, o sea una columna más un hueco. Que sea continuo frente a punteado
   es lo que separa «lo que tienes» de «lo que viene después». */
.comision__tramo{
  position:absolute;z-index:2;left:clamp(24px,3vw,38px);top:57px;
  width:calc((100% - clamp(24px,3vw,38px) * 2 + var(--sep)) / 3);
  border-top:4px solid var(--celeste);border-radius:2px;
}
/* Las huellas caminan por la línea, ligeramente a caballo de ella. */
.comision__huellas{position:absolute;z-index:2;top:48px;width:44px;height:26px;transform:translateX(-50%);pointer-events:none}
.comision__huellas span{position:absolute;width:17px;height:17px;color:var(--chip-ink);opacity:.34}
.comision__huellas span:first-child{left:0;top:-7px;transform:rotate(84deg)}
.comision__huellas span:last-child{right:0;top:8px;transform:rotate(96deg)}
.comision__huellas svg{display:block;width:100%;height:100%}

.comision__hitos{
  position:relative;z-index:2;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sep);
}
.hito{padding-right:12px}
.hito__punto{
  display:block;width:26px;height:26px;border-radius:50%;
  background:var(--celeste);border:5px solid var(--surface);
  box-shadow:0 0 0 2px rgba(16,116,140,.28);
}
.hito__cifra{
  margin-top:20px;font-size:clamp(2.4rem,4.4vw,3.4rem);font-weight:800;
  line-height:1;letter-spacing:-.05em;color:var(--navy);
  transition:transform .3s cubic-bezier(.34,1.6,.64,1);transform-origin:left bottom;
}
.hito b{display:block;margin-top:12px;font-size:1.02rem;letter-spacing:-.01em}
.hito span{display:block;margin-top:6px;font-size:.92rem;line-height:1.5;color:var(--ink-soft);max-width:30ch}
.hito:hover .hito__cifra{transform:scale(1.06)}
/* El tercero queda fuera de la banda: punto hueco y cifra en gris. */
.hito--regular .hito__punto{background:var(--surface);box-shadow:0 0 0 2px var(--line-strong)}
.hito--regular .hito__cifra{color:var(--ink-mute)}

/* El beneficio cualitativo no es un hito: no tiene un «cuándo». Va aparte. */
.comision__extra{
  display:flex;gap:15px;align-items:flex-start;
  margin-top:clamp(34px,4vw,48px);padding:20px 24px;
  border:1px solid var(--line);border-radius:20px;background:var(--surface);
  color:var(--ink-soft);font-size:.96rem;line-height:1.55;
}
.comision__extra b{color:var(--ink)}
.comision__extra-sello{
  flex:0 0 auto;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:var(--tint-celeste);color:var(--chip-ink);
}
.comision__extra-sello svg{width:22px;height:22px}

@media (max-width:860px){
  /* En columna la línea gira: el recorrido pasa a ser vertical y lo dibuja el
     borde izquierdo de cada hito, celeste en el tramo de fundador y gris
     después. Mismo criterio que en ancho, girado 90°. */
  .comision__hitos{grid-template-columns:1fr;gap:34px}
  .comision__linea,.comision__tramo,.comision__huellas{display:none}
  .comision__sello{position:static;display:inline-block;margin-bottom:22px}
  .comision__ruta{padding:clamp(22px,4vw,30px)}
  .hito{position:relative;padding-left:26px}
  .hito--fundador{border-left:3px solid var(--celeste)}
  .hito--regular{border-left:3px solid var(--line-strong)}
  .hito__punto{position:absolute;left:-14px;top:2px}
  .hito span{max-width:none}
}
.modelo__cierre{
  margin-top:clamp(34px,4.5vw,52px);text-align:center;
  font-size:clamp(1.2rem,2.2vw,1.7rem);font-weight:800;letter-spacing:-.025em;color:var(--ink);
}
@media (prefers-reduced-motion:reduce){
  .hito__cifra{transition:none}
  .hito:hover .hito__cifra{transform:none}
}

.precios{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.precio{border:1px solid var(--line);border-radius:var(--radius);padding:26px;background:var(--surface);display:flex;flex-direction:column;gap:10px}
.precio__lbl{font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-mute)}
.precio__val{font-size:1.9rem;font-weight:800}
.precio p{font-size:.9rem;color:var(--ink-soft)}

.form{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:end;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:.9rem;font-weight:800}
.field input,.field select{height:52px;border-radius:12px;border:1.5px solid var(--line-strong);background:var(--bg);padding:0 14px}
.form__foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:18px;justify-content:space-between}
.check{display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--ink-soft)}
.check input{width:20px;height:20px;accent-color:var(--naranja)}
.form__note{font-size:.92rem;color:var(--ink-soft);max-width:62ch;margin-bottom:24px}
.formok{background:var(--tint-naranja);border-radius:var(--radius);padding:28px;font-weight:700}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{position:relative;overflow:hidden;background:var(--navy);color:var(--blanco);padding:190px 0 36px}
.footer .deco--iso{left:-60px;bottom:-40px;width:260px;color:var(--blanco);opacity:.08}
.footer .wrap{position:relative;z-index:1}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px}
.footer h4{font-size:.76rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 14px}
.footer li{margin-bottom:10px}
.footer a{color:rgba(255,255,255,.86);text-decoration:none;font-size:.95rem;font-weight:600}
.footer a:hover{color:var(--celeste)}
.footer__brand{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.footer__stores{display:flex;flex-wrap:wrap;gap:10px}
.footer__bottom{margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;font-size:.85rem;color:rgba(255,255,255,.55)}
.lang{display:flex;gap:8px;align-items:center}
.lang b{color:#fff}

/* Barra de aviso del prototipo */
.protonote{background:var(--surface-2);border-bottom:1px solid var(--line);font-size:.83rem;color:var(--ink-soft)}
.protonote .wrap{padding-top:10px;padding-bottom:10px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.protonote b{color:var(--ink)}

/* ============================================================
   RASTRO DE HUELLAS — sigue al cursor dentro del hero
   Va detrás del contenido, no recibe clics y se apaga solo en
   pantallas táctiles o si el sistema pide menos movimiento.
   ============================================================ */
.huellas{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.huella{
  position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;
  color:var(--huella-ink);opacity:0;
  animation:huella-pasa 1600ms ease-out forwards;
}
/* Sobre las secciones oscuras la huella se aclara, si no desaparece. */
.huella--clara{color:rgba(255,255,255,.17)}
.huella svg{display:block;width:100%;height:100%}
@keyframes huella-pasa{
  0%{opacity:0;transform:rotate(var(--giro)) scale(.7)}
  16%{opacity:1}
  100%{opacity:0;transform:rotate(var(--giro)) scale(1)}
}

/* ============================================================
   PANTALLA DE CARGA — la cola del isotipo en movimiento
   La salida está en CSS, no en JS: si el script falla, la pantalla
   igual se retira y la página queda utilizable.
   ============================================================ */
.splash{
  position:fixed;inset:0;z-index:999;display:grid;place-items:center;gap:34px;
  align-content:center;background:var(--naranja);
  animation:splash-sale .45s ease 1.2s forwards;
}
.splash__iso{width:min(172px,36vw);height:auto;overflow:visible}
.splash__wag{
  transform-box:fill-box;transform-origin:38% 96%;
  animation:cola 620ms cubic-bezier(.45,.05,.35,1) infinite alternate;
}
.splash__arcos{animation:arcos 620ms ease-in-out infinite alternate}
.splash__bar{display:block;width:132px;height:4px;border-radius:999px;background:rgba(255,255,255,.35);overflow:hidden}
.splash__bar i{display:block;height:100%;width:0;background:#fff;border-radius:999px;animation:carga 1.15s ease-out forwards}
@keyframes cola{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes arcos{from{opacity:.25}to{opacity:1}}
@keyframes carga{from{width:0}to{width:100%}}
@keyframes splash-sale{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion: reduce){ .splash{display:none} }

/* ============================================================
   BLOQUES OSCUROS, LENTE DE MARCA Y TITULAR GRANDE
   ============================================================ */
.dark{position:relative;overflow:clip;background:var(--navy);color:var(--blanco);padding:104px 0}
.dark .wrap{position:relative;z-index:1}
.dark h2,.dark h3{color:var(--blanco)}
.dark p{color:rgba(255,255,255,.74)}
.dark .eyebrow{color:rgba(255,255,255,.6)}
.dark .step__n{color:var(--celeste);border-top-color:rgba(84,209,236,.55)}
.dark .deco--iso{right:-50px;top:-60px;width:250px;color:var(--blanco);opacity:.1}
/* ============================================================
   PASOS LÚDICOS · sección «¿Cómo funciona?»
   Cada paso es una tarjeta con un escenario de alto fijo: en reposo
   la escena ilustrada se ve siempre. Al pasar el cursor la tarjeta se
   levanta, la ilustración da un brinco con un giro leve y el escenario se
   aclara; así el hover premia sin esconder nada en reposo. El alto fijo
   evita que el texto salte.
   ============================================================ */
.paso{
  position:relative;overflow:hidden;
  padding:24px 24px 28px;border-radius:26px;
  background:rgba(84,209,236,.07);
  border:1.5px solid rgba(84,209,236,.13);
  transition:transform .45s cubic-bezier(.34,1.7,.64,1),background .28s ease,border-color .28s ease,box-shadow .35s ease;
}
/* La tarjeta se levanta con rebote y crece un poco; la sombra larga es la
   que vende la altura. */
.paso:hover,.paso:focus-within{
  transform:translateY(-12px) scale(1.025);
  background:rgba(84,209,236,.11);
  border-color:rgba(255,135,0,.5);
  box-shadow:0 30px 44px -22px rgba(16,27,59,.38);
}
.paso .step__n,.paso .paso__escena,.paso h3,.paso p{position:relative;z-index:1}
.paso h3{font-size:1.14rem;letter-spacing:-.02em}

/* El escenario de la ilustración. */
.paso__escena{
  width:100%;height:150px;border-radius:18px;
  background:rgba(9,16,42,.32);
  display:grid;place-items:center;overflow:hidden;
  transition:background .28s ease;
}
.paso__escena>*{grid-area:1/1}
.paso__arte{
  display:grid;place-items:center;
  /* Curva con sobreimpulso fuerte: pasa de largo y vuelve, que es lo que se
     lee como brinco y no como deslizamiento. */
  transition:transform .6s cubic-bezier(.34,1.9,.64,1),filter .35s ease;
}
.paso__arte svg{display:block;height:126px;width:auto;max-width:100%}
/* Los pasos con render 3D: mismo alto de referencia que los dibujados, un
   poco más porque el render trae aire propio alrededor. */
.paso__arte img{display:block;height:138px;width:auto;max-width:100%;object-fit:contain}
/* El brinco: sube, gira apenas y proyecta sombra, como si se despegara del
   escenario. El escenario se aclara para dejarle sitio. */
.paso:hover .paso__arte,.paso:focus-within .paso__arte{
  transform:translateY(-14px) rotate(-5deg) scale(1.14);
  filter:drop-shadow(0 20px 22px rgba(16,27,59,.28));
}
.paso:hover .paso__escena,.paso:focus-within .paso__escena{background:rgba(9,16,42,.22)}
.dark.naranja .paso:hover .paso__escena,.dark.naranja .paso:focus-within .paso__escena{background:var(--blanco)}

/* Mismo rastro de huellas que las tarjetas de verticales. */
.paso__huellas{position:absolute;inset:0;pointer-events:none;z-index:0}
.paso__huella{
  position:absolute;color:var(--naranja);opacity:0;
  transform:rotate(var(--giro)) scale(.8);
  transition:opacity .3s ease,transform .3s ease;
}
.paso__huella svg{display:block;width:100%;height:100%}
.paso:hover .paso__huella,.paso:focus-within .paso__huella{opacity:.22;transform:rotate(var(--giro)) scale(1)}
.paso:hover .paso__huella:nth-child(2){transition-delay:.08s}
.paso:hover .paso__huella:nth-child(3){transition-delay:.16s}

@media (prefers-reduced-motion:reduce){
  .paso,.paso__arte,.paso__escena,.paso__huella{transition-duration:.01ms}
  .paso:hover,.paso:focus-within{transform:none}
  .paso:hover .paso__arte,.paso:focus-within .paso__arte{transform:none;filter:none}
}
/* ============================================================
   SECCIÓN DE COLOR PLENO, EN LAS DOS VARIANTES DE AUDIENCIA
   Mismo esqueleto que .dark, con el color de marca de fondo: naranja en la
   vista de dueño y celeste en la de negocio (brandbook 1.1). Sobre los dos
   rellenos el texto blanco se queda corto —2,4:1 en naranja y 1,8:1 en
   celeste—, así que la tinta es navy en ambos, igual que en el manual.
   ============================================================ */
.dark.naranja{background:var(--naranja);color:var(--navy)}
.dark.celeste{background:var(--celeste);color:var(--navy)}
.dark.naranja h2,.dark.naranja h3,
.dark.celeste h2,.dark.celeste h3{color:var(--navy)}
.dark.naranja p,
.dark.celeste p{color:rgba(16,27,59,.78)}
/* El remate del titular era blanco y no llegaba al mínimo sobre ninguno de
   los dos fondos. Ahora el énfasis se invierte: el acento es el navy pleno y
   el resto del titular baja de opacidad. */
.dark.naranja .lead--claim,
.dark.celeste .lead--claim{color:rgba(16,27,59,.7)}
.dark.naranja .lead--claim .acento,
.dark.celeste .lead--claim .acento{color:var(--navy)}
.dark.naranja .deco--iso,
.dark.celeste .deco--iso{color:var(--blanco);opacity:.45}
/* Huellas grandes de fondo, como en la app. En blanco funcionan sobre los dos
   rellenos, de ahí que la clase no lleve el nombre de un color. */
.dark__huellas{position:absolute;inset:0;pointer-events:none;color:var(--blanco);opacity:.22;z-index:0}
.dark__huellas span{position:absolute;transform:rotate(var(--giro))}
.dark__huellas svg{display:block;width:100%;height:100%}

/* Las tarjetas de paso solo existen en la sección de dueño, así que van
   escritas contra la variante naranja y no contra las dos. */
.dark.naranja .step__n{color:var(--brand);border-top-color:var(--brand)}
/* Chapa del ícono: círculo naranja pleno con el trazo en blanco, el mismo
   recurso que el brandbook 1.1. Antes era un círculo de tinte naranja, que
   sobre esta escena —también de tinte naranja— desaparecía. */
.dark.naranja .paso{
  background:var(--blanco);border-color:rgba(16,27,59,.07);
  box-shadow:0 14px 32px rgba(16,27,59,.12);
}
.dark.naranja .paso:hover,
.dark.naranja .paso:focus-within{
  background:var(--blanco);border-color:rgba(255,135,0,.55);
  box-shadow:0 24px 46px rgba(16,27,59,.18);
}
.dark.naranja .paso__escena{background:var(--tint-naranja)}
/* ============================================================
   CABEZA CON MASCOTAS · «¿Cómo funciona?»
   Sustituye a la media lente naranja, que pesaba media sección
   para sostener tres palabras. Aquí el peso lo pone el dibujo.
   ============================================================ */
/* Base sin arte: una sola columna. La variante .cabeza--foto (vista negocio)
   define sus dos columnas aparte. */
.cabeza{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;align-items:center}
.cabeza__arte{align-self:end}
.cabeza__arte svg,.cabeza__arte img{display:block;width:100%;height:auto}
/* El recorte del mono está cortado a la altura del pecho. En el cierre o en el
   hero ese corte cae sobre un borde real y no se nota, pero aquí queda al aire
   en medio del celeste: un desvanecido corto en los últimos píxeles quita la
   línea recta sin que parezca que la foto se disuelve. */
.cabeza__arte img{
  -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 88%,transparent 100%);
}
.cabeza__txt .eyebrow{margin-bottom:14px}

/* Variante con foto (cabecera de «Cómo funciona» de negocio): el texto manda
   a la izquierda y la foto ocupa la mitad derecha, sin el desvanecido de
   abajo que necesita el mono, porque esta ya viene recortada sobre su mancha. */
.cabeza--foto{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(24px,3.5vw,56px)}
.cabeza--foto .cabeza__arte{align-self:center;margin-top:-56px;margin-bottom:-12px}
.cabeza--foto .cabeza__arte img{-webkit-mask-image:none;mask-image:none;filter:drop-shadow(0 26px 34px rgba(8,60,90,.22))}
.cabeza--foto .lead--claim{max-width:none;font-size:clamp(1.9rem,3.9vw,3.4rem);letter-spacing:-.03em}
/* El énfasis de «PETS» sigue el esquema de las demás cabeceras celestes:
   la marca en navy pleno y el resto del titular en navy al 70 %. Sólo
   colores del manual. */
.cabeza__lead{margin-top:18px;font-size:clamp(1rem,1.25vw,1.18rem);line-height:1.55;max-width:46ch}
/* El isotipo gigante de fondo se apaga en esta franja: caía justo detrás de
   la mancha blanca de la foto y las dos formas se pisaban. Las huellas de
   agua se quedan, que son las que tiene la referencia. */
.ruta .deco--iso{display:none}
@media (max-width:900px){
  .cabeza--foto{grid-template-columns:1fr;gap:26px}
  /* Apilada, la foto va debajo del texto y recupera su sitio normal. */
  .cabeza--foto .cabeza__arte{width:100%;max-width:560px;margin:0;justify-self:center}
}
@media (max-width:640px){
  /* «PETS en pocos pasos.» ya no cabe en un renglón: se deja partir. */
  .cabeza--foto .lead--claim .junto{white-space:normal}
}
/* ============================================================
   LEO · el asistente por WhatsApp
   La copy a la izquierda y, a la derecha, la conversación que se
   escribe sola en bucle: es la forma más corta de explicar que todo
   pasa dentro de un chat. El guion vive en el JS.
   ============================================================ */
.leo{position:relative;overflow:clip;background:var(--surface-2)}
.leo__deco{position:absolute;inset:0;pointer-events:none;color:#25d366;opacity:.07}
.leo__deco span{position:absolute;transform:rotate(var(--giro))}
.leo__deco svg{display:block;width:100%;height:100%}
.leo__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:64px;align-items:center}
.leo h2 .marcado{color:#1fae55}
.leo__intro{margin-top:26px;font-weight:800}

.leo__lista{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:6px}
.leo__lista li{
  display:flex;gap:15px;align-items:flex-start;padding:12px 14px;border-radius:16px;
  transition:background-color .22s ease,transform .22s cubic-bezier(.34,1.4,.64,1);
}
.leo__lista li:hover{background:var(--surface);transform:translateX(6px)}
.leo__ico{
  flex:0 0 auto;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:rgba(37,211,102,.13);color:#1fae55;
  transition:transform .3s cubic-bezier(.34,1.6,.64,1),background-color .22s ease;
}
.leo__lista li:hover .leo__ico{transform:scale(1.12) rotate(-6deg);background:rgba(37,211,102,.22)}
.leo__lista b{display:block;font-size:1rem;letter-spacing:-.01em}
.leo__lista p{margin-top:3px;font-size:.93rem;color:var(--ink-soft)}
.leo__pie{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.btn--wapp{background:#25d366;color:#04371a;border:0}
.btn--wapp:hover{background:#1fbb5b;color:#04371a}
.leo__aviso{font-size:.88rem;color:var(--ink-mute);font-style:italic;max-width:34ch}

/* --- El teléfono con el chat ------------------------------------------- */
.leo__tel{
  width:330px;border-radius:40px;background:var(--navy);padding:11px;justify-self:center;
  box-shadow:0 34px 64px -26px rgba(16,27,59,.6);
}
.leo__pantalla{border-radius:30px;overflow:hidden;background:#ece5dd;display:flex;flex-direction:column;height:520px}
.leo__barra{display:flex;align-items:center;gap:11px;padding:13px 15px;background:#075e54;color:#fff}
.leo__avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;flex:none;background:#ffd9b8}
.leo__avatar img{display:block;width:100%;height:100%;object-fit:cover}
.leo__quien b{display:block;font-size:.95rem;line-height:1.2}
.leo__quien span{font-size:.76rem;color:rgba(255,255,255,.75)}
.leo__hilo{
  flex:1;padding:16px 14px;display:flex;flex-direction:column;gap:9px;justify-content:flex-end;
  /* Trama de huellas muy tenue, el guiño al papel tapiz de WhatsApp. */
  background:#ece5dd url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 64 64'><g fill='%23000' opacity='.022'><ellipse cx='14.5' cy='27' rx='7.5' ry='9.5' transform='rotate(-22 14.5 27)'/><ellipse cx='27' cy='18' rx='7.5' ry='10'/><ellipse cx='41' cy='19' rx='7.5' ry='10' transform='rotate(14 41 19)'/><ellipse cx='52.5' cy='30' rx='7' ry='9' transform='rotate(30 52.5 30)'/><path d='M33 30c9.4 0 17 7.4 17 15.5S42.4 60 33 60s-17-6.4-17-14.5S23.6 30 33 30z'/></g></svg>");
}
.leo__msg{
  max-width:82%;padding:9px 13px;border-radius:14px;font-size:.88rem;line-height:1.42;
  background:#fff;color:#101b3b;align-self:flex-start;border-top-left-radius:4px;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
  opacity:0;transform:translateY(10px) scale(.94);transform-origin:bottom left;
  animation:entraMsg .34s cubic-bezier(.34,1.5,.64,1) forwards;
}
.leo__msg--yo{
  background:#dcf8c6;align-self:flex-end;border-top-left-radius:14px;border-top-right-radius:4px;
  transform-origin:bottom right;
}
.leo__msg small{display:block;margin-top:3px;font-size:.75rem;color:#5c6b7a}
@keyframes entraMsg{to{opacity:1;transform:none}}

.leo__puntos{display:flex;gap:4px;align-items:center;padding:12px 14px}
.leo__puntos i{width:7px;height:7px;border-radius:50%;background:#8a94a6;animation:rebotePunto 1.1s ease-in-out infinite}
.leo__puntos i:nth-child(2){animation-delay:.16s}
.leo__puntos i:nth-child(3){animation-delay:.32s}
@keyframes rebotePunto{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-5px);opacity:1}}

.leo__caja{display:flex;align-items:center;gap:9px;padding:10px 12px;background:#f0f0f0}
.leo__campo{flex:1;min-width:0;height:36px;border-radius:18px;background:#fff;display:flex;align-items:center;padding:0 14px;font-size:.84rem;color:#9aa3af;white-space:nowrap;overflow:hidden}
.leo__enviar{width:36px;height:36px;border-radius:50%;background:#25d366;display:grid;place-items:center;flex:none;color:#fff}
.leo__enviar svg{width:17px;height:17px}

@media (max-width:1040px){
  .leo__grid{grid-template-columns:1fr;gap:44px}
  .leo__tel{justify-self:start}
}
@media (max-width:560px){
  .leo__tel{width:100%;max-width:330px}
  .leo__lista li{padding:10px 0}
  .leo__lista li:hover{transform:none;background:transparent}
}
@media (prefers-reduced-motion:reduce){
  .leo__lista li,.leo__ico{transition:none}
  .leo__msg{animation:none;opacity:1;transform:none}
  .leo__puntos i{animation:none}
}
/* La ruta de paradas, en su versión celeste. Sobre el navy el camino se
   dibujaba con celestes translúcidos; sobre celeste hay que invertirlo todo:
   la tinta pasa a navy, las huellas a blanco y las tarjetas a blanco sólido. */
/* Una sola línea continua, sin huellas encima: las pisadas la volvían a
   leer como punteada. */
.dark.celeste .ruta__linea{border-top:2px solid rgba(16,27,59,.28)}
.dark.celeste .ruta__pisadas{display:none}
/* Discos sólidos: con la transparencia se veía la línea a través del número. */
.dark.celeste .parada__n{
  background:var(--blanco);color:rgba(16,27,59,.6);
  box-shadow:0 0 0 8px var(--celeste);
}
.dark.celeste .parada__t{color:rgba(16,27,59,.62)}
.dark.celeste .parada:hover .parada__n{background:var(--blanco);color:var(--navy)}
/* La parada activa se invierte: disco navy sólido y número blanco. Es el
   único disco oscuro de la fila, así que no necesita anillo ni tomar el
   celeste, que se perdía con el fondo. Antes llevaba var(--naranja), que en
   la vista negocio se vuelve celeste y el número blanco desaparecía. */
.dark.celeste .parada.is-on .parada__n{background:var(--navy);color:var(--blanco)}
.dark.celeste .parada.is-on .parada__t{color:var(--navy)}
.dark.celeste .ruta__paso{
  background:var(--blanco);border-color:rgba(16,27,59,.07);
  box-shadow:0 14px 32px rgba(16,27,59,.12);
}
/* Las escenas son tarjetas blancas: sobre un panel blanco perderían el borde,
   así que se les pone su propio fondo celeste claro. */
.dark.celeste .ruta__arte{background:var(--tint-celeste);border-radius:18px;padding:16px}
@media (max-width:900px){
  .dark.celeste .parada{background:rgba(255,255,255,.55)}
  /* En pastilla la activa se invierte entera: fondo navy, etiqueta blanca y
     el disco del número en blanco con el dígito navy. */
  .dark.celeste .parada.is-on{background:var(--navy)}
  .dark.celeste .parada.is-on .parada__t{color:var(--blanco)}
  .dark.celeste .parada.is-on .parada__n{background:var(--blanco);color:var(--navy)}
}
/* El antetítulo sube a .8: a .72 se quedaba en 4,4:1 sobre el naranja, justo
   por debajo del mínimo para texto pequeño. */
.dark.naranja .eyebrow,
.dark.celeste .eyebrow{color:rgba(16,27,59,.8)}
/* Su punto es naranja de serie: sobre el relleno naranja desaparece. */
.dark.naranja .eyebrow::before{background:var(--navy)}
@media (max-width:900px){
  .cabeza{grid-template-columns:1fr;gap:24px;justify-items:start}
  .cabeza__arte{width:196px}
}
/* ============================================================
   POR QUÉ ESTAR EN PETS · vista negocio
   Cuatro razones, cada una con su escena dibujada. Es el argumento
   de venta de la vista, así que se juega con las mascotas en vez de
   repetir la grilla de íconos planos del resto de la página.
   ============================================================ */
/* La sección se tiñe de celeste, el color de la vista de negocio: las tarjetas
   son blancas y sobre fondo blanco no se leían como tarjetas. */
.porque{position:relative;overflow:clip;background:var(--tint-celeste)}
.porque h2 .destaca{color:var(--naranja)}
/* Huellas grandes al fondo: dan el tono lúdico sin robarle lectura al texto. */
.porque__deco{position:absolute;inset:0;pointer-events:none;color:var(--naranja);opacity:.055}
.porque__deco span{position:absolute;transform:rotate(var(--giro))}
.porque__deco svg{display:block;width:100%;height:100%}

.razones{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:46px;position:relative}
.razon{
  display:flex;gap:24px;align-items:center;
  background:var(--surface);border-radius:var(--radius);padding:26px 30px 26px 26px;
  /* Sombra en dos capas: un contacto corto y cerrado más una difusa y amplia.
     Es lo que hace que la tarjeta parezca apoyada y no pegada. */
  box-shadow:0 1px 2px rgba(16,27,59,.05), 0 18px 34px -14px rgba(16,27,59,.22);
  transition:transform .24s cubic-bezier(.34,1.4,.64,1),box-shadow .24s ease;
}
.razon:hover{
  transform:translateY(-5px);
  box-shadow:0 2px 4px rgba(16,27,59,.06), 0 30px 54px -16px rgba(16,27,59,.3);
}
/* El disco del ícono, tratado como una pieza de plastilina: la luz entra por
   arriba a la izquierda, el borde de abajo recoge sombra propia y el conjunto
   proyecta sobre la tarjeta. El relleno se queda en tinte claro —y no en color
   pleno como la referencia— porque el ícono de ventas es casi todo naranja y
   sobre un disco naranja saturado se perdería. */
.razon__badge{
  flex:0 0 auto;width:112px;height:112px;border-radius:50%;
  display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(105% 105% at 28% 20%, #f7fdff 0%, var(--tint-celeste) 42%, #c9edf8 100%);
  box-shadow:
    inset 0 4px 7px rgba(255,255,255,.9),
    inset 0 -9px 16px rgba(16,116,140,.2),
    0 10px 18px -8px rgba(16,116,140,.38);
}
/* El ícono se despega del disco con su propia sombra proyectada. `contain`
   porque los renders no vienen cuadrados: sin él, el encuadre los estiraría. */
.razon__badge img{
  display:block;width:88px;height:88px;object-fit:contain;
  filter:drop-shadow(0 4px 6px rgba(8,70,92,.22));
  transition:transform .32s cubic-bezier(.34,1.6,.64,1),filter .32s ease;
}
/* El brinco del ícono es el premio de pasar el cursor: sube, se inclina y
   alarga la sombra, como si se levantara del disco. */
.razon:hover .razon__badge img{
  transform:scale(1.09) rotate(-4deg) translateY(-3px);
  filter:drop-shadow(0 9px 12px rgba(8,70,92,.28));
}
.razon h3{font-size:1.14rem;letter-spacing:-.02em}
.razon p{color:var(--ink-soft);font-size:.95rem;margin-top:6px}

@media (max-width:1040px){ .razones{grid-template-columns:1fr} }
@media (max-width:560px){
  .razon{flex-direction:column;align-items:flex-start;gap:16px;padding:24px}
  .razon__badge{width:92px;height:92px}
  .razon__badge img{width:72px;height:72px}
}
@media (prefers-reduced-motion:reduce){
  /* Se quita el movimiento, no el cambio de sombra: una sombra que se abre no
     es desplazamiento y sigue sirviendo de señal al pasar el cursor. */
  .razon{transition:box-shadow .2s ease}
  .razon__badge img{transition:filter .2s ease}
  .razon:hover{transform:none}
  .razon:hover .razon__badge img{transform:none}
}
/* ============================================================
   RUTA DE PARADAS · «¿Cómo funciona para tu negocio?»
   Los cinco pasos son una ruta acostada: paradas numeradas sobre
   una línea punteada y una sola escena abajo, la de la parada
   activa. Las escenas se apilan en la misma celda de la grilla,
   así el alto lo fija la más larga y no salta al cambiar.
   ============================================================ */
.ruta__pista{position:relative;display:grid;grid-template-columns:repeat(5,1fr);margin-top:56px}
.ruta__linea{position:absolute;left:10%;right:10%;top:34px;border-top:3px dashed rgba(84,209,236,.3)}
.ruta__pisadas{position:absolute;top:22px;width:46px;height:26px;transform:translateX(-50%);pointer-events:none}
.ruta__pisadas span{position:absolute;width:18px;height:18px;color:var(--celeste);opacity:.4}
.ruta__pisadas span:first-child{left:0;top:-7px;transform:rotate(84deg)}
.ruta__pisadas span:last-child{right:0;top:8px;transform:rotate(96deg)}
.ruta__pisadas svg{display:block;width:100%;height:100%}

.parada{
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:13px;
  background:transparent;border:0;padding:0 6px;cursor:pointer;font:inherit;text-align:center;
}
.parada__n{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:1.15rem;
  background:rgba(255,255,255,.09);color:rgba(255,255,255,.55);
  /* El halo del color de la sección corta la línea punteada por detrás. */
  box-shadow:0 0 0 8px var(--navy);
  transition:background-color .25s ease,color .25s ease,transform .34s cubic-bezier(.34,1.6,.64,1);
}
.parada__t{
  font-size:.86rem;font-weight:700;line-height:1.25;max-width:16ch;
  color:rgba(255,255,255,.5);transition:color .25s ease;
}
.parada:hover .parada__n{background:rgba(255,255,255,.17);color:var(--blanco)}
.parada.is-on .parada__n{background:var(--naranja);color:var(--blanco);transform:scale(1.16)}
.parada.is-on .parada__t{color:var(--blanco)}

.ruta__escena{display:grid;margin-top:50px}
.ruta__paso{
  grid-area:1/1;display:grid;grid-template-columns:210px minmax(0,1fr);gap:36px;align-items:center;
  background:rgba(84,209,236,.07);border:1.5px solid rgba(84,209,236,.14);
  border-radius:26px;padding:32px 38px;
  opacity:0;visibility:hidden;transform:translateY(16px);
  transition:opacity .32s ease,transform .4s cubic-bezier(.34,1.4,.64,1),visibility .32s;
}
.ruta__paso.is-on{opacity:1;visibility:visible;transform:none}
.ruta__arte svg{display:block;width:100%;height:auto}
/* Los renders 3D traen su propia luz: van sin el fondo celeste claro que
   necesitaban las escenas dibujadas. */
.ruta__arte img{display:block;width:100%;height:auto;max-height:160px;object-fit:contain}
.dark.celeste .ruta__arte:has(img){background:none;padding:0}
.ruta__paso h3{font-size:1.32rem;letter-spacing:-.02em}
.ruta__paso p{margin-top:8px;font-size:1rem;max-width:58ch}
.ruta__cta{display:flex;justify-content:center;margin-top:44px}
/* En la vista negocio el CTA primario toma el celeste de marca, pero esta
   franja YA es celeste: el botón salía del mismo color que el fondo (1:1) y
   sólo se leía su texto. Sobre franjas celestes se invierte a navy pleno con
   tinta blanca, que da 9,4:1 y lo devuelve a ser un botón. */
.dark.celeste .btn--primary,
body[data-vista="negocio"] .dark.celeste .btn--primary{background:var(--navy);color:var(--blanco)}
.dark.celeste .btn--primary:hover,
body[data-vista="negocio"] .dark.celeste .btn--primary:hover{background:#0b1330;color:var(--blanco)}
/* Peso de CTA de cierre: más alto, con sombra que lo despega del celeste y
   una flecha que avanza al pasar el cursor. */
.ruta__cta .btn{
  min-height:60px;padding:0 34px;font-size:1.06rem;gap:12px;
  box-shadow:0 18px 34px -14px rgba(16,27,59,.55);
}
.ruta__cta .btn:hover{transform:translateY(-3px);box-shadow:0 24px 44px -14px rgba(16,27,59,.6)}
.ruta__cta .btn svg{width:19px;height:19px;flex:none;transition:transform .25s ease}
.ruta__cta .btn:hover svg{transform:translateX(5px)}
@media (prefers-reduced-motion:reduce){
  .ruta__cta .btn:hover{transform:none}
  .ruta__cta .btn:hover svg{transform:none}
}

@media (max-width:900px){
  /* La ruta se convierte en una fila de fichas que se desliza; la escena
     queda debajo, del mismo alto que en escritorio. */
  .ruta__pista{display:flex;gap:10px;overflow-x:auto;margin-top:40px;padding:4px 2px;scroll-snap-type:x mandatory}
  /* La ficha cortada en el borde ya avisa que hay más; la barra sobra. */
  .ruta__pista{scrollbar-width:none}
  .ruta__pista::-webkit-scrollbar{display:none}
  .ruta__linea,.ruta__pisadas{display:none}
  .parada{
    flex:0 0 auto;flex-direction:row;gap:10px;scroll-snap-align:center;
    background:rgba(255,255,255,.07);border-radius:999px;padding:7px 17px 7px 7px;
  }
  .parada__n{width:36px;height:36px;font-size:.95rem;box-shadow:none}
  .parada.is-on{background:rgba(255,135,0,.18)}
  .parada.is-on .parada__n{transform:none}
  .parada__t{max-width:none;white-space:nowrap;font-size:.85rem}
  .ruta__escena{margin-top:26px}
  .ruta__paso{grid-template-columns:1fr;gap:22px;padding:26px 24px;justify-items:center;text-align:center}
  .ruta__arte{width:190px}
  .ruta__paso p{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .parada__n,.ruta__paso{transition:none}
}
/* ============================================================
   REGISTRO · vista negocio
   Antes era un formulario suelto bajo un título. Ahora el argumento
   va a la izquierda y la tarjeta del formulario a la derecha, con el
   perro contestando por WhatsApp de por medio.
   ============================================================ */
/* ============================================================
   SOPORTE 24/7 (vista de negocio)
   Dos columnas: el argumento a la izquierda y la señal a la derecha. La
   señal es el único elemento con movimiento propio de la sección, y dice
   «esto está encendido» sin necesidad de escribirlo.
   ============================================================ */
.soporte{position:relative;overflow:clip;padding-block:clamp(60px,7vw,88px)}
.soporte__grid{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);
  gap:clamp(28px,3.6vw,52px);align-items:start;
}
.soporte__txt h2{margin-top:14px}
.soporte__txt .lead{margin-top:16px;max-width:60ch}
.soporte__cuerpo{margin-top:18px;color:var(--ink-soft);max-width:64ch}

/* Los cuatro destacados, en fila y a todo el ancho de la sección. Apilados en
   una columna quedaban muy alargados: 700 px de ancho para dos líneas de
   texto. En cuatro columnas cada uno ronda los 270 px y la tarjeta se vuelve
   vertical, con el ícono arriba. */
.apoyos{
  list-style:none;margin:clamp(26px,3.2vw,42px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;
}
.apoyo{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:14px;align-items:flex-start;
  border-radius:20px;padding:26px 26px 30px;
  /* Superficie con degradado en vez de blanco plano: un punto de luz arriba a
     la izquierda, igual que en los discos, para que la tarjeta tenga cara. */
  background:linear-gradient(142deg,#ffffff 0%,#ffffff 46%,#f2fafd 100%);
  border:1px solid rgba(16,116,140,.1);
  box-shadow:0 1px 2px rgba(16,27,59,.04), 0 14px 30px -18px rgba(16,27,59,.24);
  transition:transform .24s cubic-bezier(.34,1.4,.64,1),box-shadow .24s ease,border-color .24s ease;
}
.apoyo:hover{
  transform:translateY(-5px);border-color:rgba(16,116,140,.26);
  box-shadow:0 2px 4px rgba(16,27,59,.05), 0 22px 42px -18px rgba(16,27,59,.3);
}
/* El disco deja de ser una pieza sólida y pasa a ser un halo difuso: dentro
   de una tarjeta blanca, el círculo de borde duro competía con el ícono y le
   robaba tamaño. Ahora el ícono manda y el halo sólo lo asienta. */
.apoyo__disco{
  flex:0 0 auto;width:112px;height:112px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle at 50% 46%, rgba(84,209,236,.26) 0%, rgba(84,209,236,.1) 46%, rgba(84,209,236,0) 72%);
}
.apoyo__disco svg,
.apoyo__disco img{
  display:block;width:92px;height:92px;object-fit:contain;
  filter:drop-shadow(0 5px 8px rgba(8,70,92,.22));
  transition:transform .3s cubic-bezier(.34,1.6,.64,1);
}
.apoyo:hover .apoyo__disco svg,
.apoyo:hover .apoyo__disco img{transform:scale(1.1) rotate(-5deg)}
.apoyo__txt b{display:block;font-size:1.06rem;letter-spacing:-.015em;line-height:1.25}
.apoyo__txt span{display:block;margin-top:4px;font-size:.89rem;color:var(--ink-soft);font-weight:600;line-height:1.45}

/* --- La escena --------------------------------------------------------- */
/* Una mancha celeste de bordes orgánicos con el retrato del soporte encima y
   el botón montado en su canto inferior, saliéndose. El botón fuera de la
   mancha es lo que lo convierte en la pieza de delante y no en un pie de foto. */
.soporte__escena{
  position:relative;min-height:clamp(270px,26vw,360px);
  margin-top:calc(-1 * clamp(60px,7vw,88px));
  padding-top:clamp(30px,3.5vw,44px);
}
/* La mancha es sólo la forma de detrás: se encoge respecto a la escena para
   que el retrato la desborde por arriba y por abajo, como en la referencia. */
.soporte__blob{
  position:absolute;z-index:0;inset:9% 0 0 4%;
  background:linear-gradient(150deg,#ddf3fb 0%,#c4e9f7 58%,#a9dff3 100%);
  /* Radios desiguales en los dos ejes y más marcados abajo a la izquierda:
     el contorno deja de ser una cápsula y se lee dibujado a mano. */
  border-radius:42% 58% 38% 62% / 56% 52% 48% 44%;
}
/* El retrato NO va dentro de la mancha: va encima y la desborda. Por eso tiene
   que ser un recorte con fondo transparente y no una foto rectangular, y por
   eso lleva `contain` y se ancla abajo: lo que toca el canto es el portátil. */
.soporte__foto{
  position:absolute;z-index:1;inset:0;
  display:block;width:100%;height:100%;
  object-fit:contain;object-position:bottom center;
}
/* Las piezas compuestas: el perro manda, las chispas y la burbuja lo
   escoltan por arriba. Cuando el retrato de la asesora carga, el script marca
   la escena y las tres se apagan: el retrato ya trae al perro. */
.soporte__perro{
  position:absolute;z-index:1;left:21%;bottom:2%;width:54%;height:auto;
  filter:drop-shadow(0 20px 26px rgba(8,70,92,.3));
}
.soporte__chispas{position:absolute;z-index:2;left:4%;top:15%;width:15%;height:auto;aspect-ratio:1}
.soporte__burbuja{
  position:absolute;z-index:2;right:0;top:9%;width:24%;height:auto;aspect-ratio:1;
  filter:drop-shadow(0 10px 14px rgba(8,70,92,.22));
}
.soporte__escena.con-retrato .soporte__blob,
.soporte__escena.con-retrato .soporte__perro,
.soporte__escena.con-retrato .soporte__chispas,
.soporte__escena.con-retrato .soporte__burbuja{display:none}
.soporte__cta{
  position:absolute;z-index:2;left:50%;transform:translateX(-38%);bottom:-6px;
  display:inline-flex;align-items:center;gap:11px;
  padding:14px 22px;border-radius:999px;white-space:nowrap;text-decoration:none;
  background:var(--navy);color:var(--blanco);
  font-size:.92rem;font-weight:800;letter-spacing:-.01em;
  box-shadow:0 14px 30px -10px rgba(16,27,59,.6);
  transition:transform .26s cubic-bezier(.34,1.5,.64,1),background-color .22s ease;
}
.soporte__cta:hover{transform:translateX(-38%) translateY(-3px);background:#0b1330}
.soporte__cta:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.soporte__cta .wa{width:19px;height:19px;flex:none;color:#25d366}
.soporte__cta .flecha{width:17px;height:17px;flex:none;opacity:.85}
/* El punto verde se queda: dice «hay alguien ahora», que es la mitad del
   argumento de la sección. */
.soporte__cta i{width:9px;height:9px;border-radius:50%;background:#25d366;flex:none;animation:senal-late 2s ease-in-out infinite}
@keyframes senal-late{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.72)}}

@media (max-width:1040px){
  /* Cuatro en fila se estrechan de más: pasan a dos por fila. */
  .apoyos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .soporte__grid{grid-template-columns:1fr;gap:52px}
  /* Apilada, la escena va primero: es la que pone cara a la promesa. El aire
     de abajo lo pide el botón, que cuelga por fuera de la mancha. */
  .soporte__escena{order:-1;min-height:280px;margin-bottom:18px}
  .soporte__cta{font-size:.86rem;padding:12px 18px;bottom:10px}
}
@media (max-width:560px){
  .apoyos{grid-template-columns:1fr;gap:14px}
  /* En una sola columna vuelve a convenir el ícono al costado: así la tarjeta
     no crece de alto sin necesidad. */
  .apoyo{flex-direction:row;align-items:center;gap:16px;padding:18px 20px}
  .apoyo::before{top:50%;left:0;transform:translateY(-50%);width:4px;height:28px;border-radius:0 4px 4px 0;background:linear-gradient(180deg,var(--celeste),var(--chip-ink));transition:height .28s cubic-bezier(.34,1.4,.64,1)}
  .apoyo:hover{transform:translateX(5px)}
  .apoyo:hover::before{width:4px;height:76%}
}
@media (prefers-reduced-motion:reduce){
  .soporte__cta i{animation:none}
  .soporte__cta:hover{transform:translateX(-38%)}
  /* Se quita el desplazamiento y el giro del ícono; el riel y la sombra se
     quedan, que son cambios de color y no movimiento. */
  .apoyo{transition:box-shadow .2s ease,border-color .2s ease}
  .apoyo:hover{transform:none}
  .apoyo__disco svg{transition:none}
  .apoyo:hover .apoyo__disco svg{transform:none}
}

.registro{position:relative;overflow:clip}
.registro__deco{position:absolute;inset:0;pointer-events:none;color:var(--naranja);opacity:.028}
.registro__deco span{position:absolute;transform:rotate(var(--giro))}
.registro__deco svg{display:block;width:100%;height:100%}
.registro__grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:56px;align-items:center}

.registro__pitch .lead{margin-top:14px}
.ventajas{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:13px}
.ventajas li{display:flex;align-items:flex-start;gap:12px;font-size:.97rem;font-weight:700}
.ventajas svg{flex:0 0 auto;width:22px;height:22px;color:var(--naranja);margin-top:1px}
.registro__firma{display:flex;align-items:center;gap:14px;margin-top:30px}
.registro__firma svg{flex:0 0 auto;width:116px;height:auto}
.registro__firma p{font-size:.93rem;color:var(--ink-soft);max-width:30ch}

/* La tarjeta: una columna, porque en dos la caja queda estrecha. */
.form--tarjeta{
  position:relative;grid-template-columns:1fr;gap:16px;padding:34px 32px 30px;
  border:0;box-shadow:0 22px 50px rgba(16,27,59,.13);
}
.form--tarjeta::before{
  content:"";position:absolute;left:32px;right:32px;top:0;height:5px;border-radius:0 0 5px 5px;
  background:linear-gradient(90deg,var(--naranja),var(--celeste));
}
.form--tarjeta .field input,
.form--tarjeta .field select{transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.form--tarjeta .field input:focus,
.form--tarjeta .field select:focus{
  outline:0;border-color:var(--naranja);box-shadow:0 0 0 4px rgba(255,135,0,.16);transform:translateY(-1px);
}
.form--tarjeta .form__foot{margin-top:6px}
/* Una huella asoma del botón al pasar el cursor. */
.form--tarjeta .form__foot .btn{position:relative;overflow:hidden}
.form--tarjeta .form__foot .btn::after{
  content:"";position:absolute;right:9px;top:50%;width:20px;height:20px;
  background:currentColor;opacity:0;
  transform:translate(10px,-50%);transition:opacity .22s ease,transform .28s cubic-bezier(.34,1.5,.64,1);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='black'><ellipse cx='14.5' cy='27' rx='7.5' ry='9.5' transform='rotate(-22 14.5 27)'/><ellipse cx='27' cy='18' rx='7.5' ry='10'/><ellipse cx='41' cy='19' rx='7.5' ry='10' transform='rotate(14 41 19)'/><ellipse cx='52.5' cy='30' rx='7' ry='9' transform='rotate(30 52.5 30)'/><path d='M33 30c9.4 0 17 7.4 17 15.5S42.4 60 33 60s-17-6.4-17-14.5S23.6 30 33 30z'/></g></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='black'><ellipse cx='14.5' cy='27' rx='7.5' ry='9.5' transform='rotate(-22 14.5 27)'/><ellipse cx='27' cy='18' rx='7.5' ry='10'/><ellipse cx='41' cy='19' rx='7.5' ry='10' transform='rotate(14 41 19)'/><ellipse cx='52.5' cy='30' rx='7' ry='9' transform='rotate(30 52.5 30)'/><path d='M33 30c9.4 0 17 7.4 17 15.5S42.4 60 33 60s-17-6.4-17-14.5S23.6 30 33 30z'/></g></svg>") center/contain no-repeat;
}
.form--tarjeta .form__foot .btn:hover{padding-right:44px}
.form--tarjeta .form__foot .btn:hover::after{opacity:.55;transform:translate(0,-50%)}

@media (max-width:1040px){
  .registro__grid{grid-template-columns:1fr;gap:38px}
  .registro__firma{margin-top:24px}
}
@media (max-width:560px){
  .registro__firma svg{width:92px}
  .form--tarjeta{padding:28px 22px 24px}
  .form--tarjeta::before{left:22px;right:22px}
}
@media (prefers-reduced-motion:reduce){
  .form--tarjeta .field input,.form--tarjeta .field select,
  .form--tarjeta .form__foot .btn,.form--tarjeta .form__foot .btn::after{transition:none}
  .form--tarjeta .field input:focus,.form--tarjeta .field select:focus{transform:none}
}

/* Titular sobredimensionado de las cabeceras con mascota: el gancho de la sección */
.lead--claim{
  font-size:clamp(1.75rem,3.6vw,3.1rem);
  font-weight:800;line-height:1.1;letter-spacing:-.02em;
  max-width:20ch;text-wrap:balance;
}
.dark .lead--claim{color:var(--blanco)}
.lead--claim .acento{color:var(--naranja);white-space:nowrap}
@media (max-width:900px){ .lead--claim{max-width:none} }

/* Titular sobredimensionado para el bloque de comunidad */
.display{font-size:clamp(2.4rem,7.6vw,5.8rem);line-height:.94;letter-spacing:-.05em}
.display .out{
  --foco-tinta:var(--line-strong);
  --foco-halo:none;
  --halo-suave:drop-shadow(0 0 4px rgba(255,126,0,.45));
  --halo-pleno:drop-shadow(0 0 6px rgba(255,126,0,.6)) drop-shadow(0 0 22px rgba(255,126,0,.28));
  color:var(--foco-tinta);
  filter:var(--foco-halo);
}
@supports (-webkit-text-stroke:1px red){
  .display .out{color:transparent;-webkit-text-stroke:2px var(--foco-tinta)}
}

/* El contorno se enciende como un foco de neon: apagado es el gris del manual,
   encendido es el naranja del logo con halo. El titileo es irregular a
   proposito -- un tubo que cuesta arrancar -- y solo corre mientras el titular
   esta en pantalla (lo enciende [data-foco] mas abajo). */
.display .out.is-on{animation:foco-titileo 7s infinite}
@keyframes foco-titileo{
  0%,4%    {--foco-tinta:var(--line-strong);  --foco-halo:none}
  5%,7%    {--foco-tinta:var(--naranja-logo); --foco-halo:var(--halo-suave)}
  8%,10%   {--foco-tinta:var(--line-strong);  --foco-halo:none}
  11%,49%  {--foco-tinta:var(--naranja-logo); --foco-halo:var(--halo-pleno)}
  50%,51%  {--foco-tinta:var(--line-strong);  --foco-halo:none}
  52%,56%  {--foco-tinta:var(--naranja-logo); --foco-halo:var(--halo-pleno)}
  57%,58%  {--foco-tinta:var(--naranja-logo); --foco-halo:var(--halo-suave)}
  59%,90%  {--foco-tinta:var(--naranja-logo); --foco-halo:var(--halo-pleno)}
  91%,93%  {--foco-tinta:var(--line-strong);  --foco-halo:none}
  94%,100% {--foco-tinta:var(--naranja-logo); --foco-halo:var(--halo-pleno)}
}
@media (prefers-reduced-motion:reduce){
  /* Sin titileo: el foco se queda prendido y quieto. */
  .display .out.is-on{animation:none;--foco-tinta:var(--naranja-logo);--foco-halo:var(--halo-suave)}
}

/* Ajustes de superficie: menos bordes, más aire y sombra suave */
.precio{border:0;padding:32px;box-shadow:var(--shadow)}
.bigcard{border:0;padding:38px;border-radius:var(--radius)}
.panel{border:0;box-shadow:var(--shadow-lift);border-radius:var(--radius)}
.form{border:0;padding:34px;box-shadow:var(--shadow)}
.faq{border-top:0}
.faq summary{padding:26px 56px 26px 0;font-size:1.12rem}

/* ============================================================
   BOTÓN FLOTANTE DE WHATSAPP
   El perro cambia de pose al abrirse: echado en reposo, sentado
   cuando el panel está abierto.
   ============================================================ */
.wapp{position:fixed;right:24px;bottom:24px;z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.wapp__boton{
  width:60px;height:60px;border-radius:50%;padding:0;border:0;cursor:pointer;
  display:grid;place-items:center;background:#25d366;color:#fff;
  box-shadow:0 12px 26px rgba(16,27,59,.3);
  transition:transform .22s cubic-bezier(.34,1.5,.64,1),background-color .2s ease;
}
.wapp__boton svg{display:block;width:31px;height:31px}
.wapp__boton:hover,
.wapp__boton:focus-visible{background:#1fbb5b;transform:scale(1.07)}
@media (max-width:560px){
  .wapp{right:14px;bottom:14px}
  .wapp__boton{width:84px;height:72px}
}

/* ============================================================
   REVEAL POR SCROLL
   ============================================================
   El reveal no se dispara y se olvida: se scrubea con el scroll
   (animation-timeline:view()), así cada parte entra al ritmo de la rueda y se
   deshace si el usuario sube. Es CSS puro, corre fuera del hilo principal y
   no cuesta ni un listener de scroll.

   Contrato de seguridad -- el contenido nunca puede quedar escondido:
   el estado oculto sólo existe dentro del @supports Y de una clase .rv-*
   que pone el JS. Sin JS, en un navegador sin soporte o con reduced-motion,
   todo se ve completo y quieto. Nada de esto toca layout: sólo opacity,
   transform y clip-path.

   Un elemento que ya está en pantalla al cargar tiene su fase `entry` al
   100%, así que con fill-mode `both` arranca en el estado final: el hero no
   parpadea.
   ============================================================ */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){

    /* --- 1 · subir: el reveal por defecto, para bloques de texto -------- */
    .rv-subir{
      animation:rv-sube linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 85%;
    }
    @keyframes rv-sube{
      from{opacity:0;transform:translateY(32px)}
      to{opacity:1;transform:none}
    }

    /* --- 2 · cascada: los hijos entran en fila -------------------------- */
    /* El timeline lo define el contenedor, no cada tarjeta. Si cada una usara
       el suyo, las que comparten fila entrarían exactamente a la vez y no se
       leería la cascada; colgadas de la posición del padre, el desfase sí se
       nota. El desfase es --f, que el JS reparte de 0 a 1 entre los hijos: al
       ser una fracción y no un índice, el último siempre termina dentro de la
       fase por muchos hijos que haya. */
    .rv-cascada{view-timeline-name:--rv-grupo}
    .rv-cascada > *{
      animation:rv-sube linear both;
      animation-timeline:--rv-grupo;
      animation-range:entry calc(var(--f,0) * 32%) entry calc(48% + var(--f,0) * 32%);
    }

    /* --- 3 · cortina: la maqueta se destapa de abajo hacia arriba -------- */
    .rv-cortina{
      animation:rv-cortina linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 90%;
    }
    @keyframes rv-cortina{
      from{clip-path:inset(0 0 100% 0);opacity:.2;transform:translateY(20px)}
      to{clip-path:inset(0 0 0 0);opacity:1;transform:none}
    }

    /* --- 4 · escala: para las maquetas de celular, panel y formulario ---- */
    .rv-escala{
      animation:rv-escala linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 90%;
    }
    @keyframes rv-escala{
      from{opacity:0;transform:scale(.94) translateY(26px)}
      to{opacity:1;transform:none}
    }

    /* --- 5 · deriva: parallax del decorado ------------------------------ */
    /* `cover` en vez de `entry`: el decorado se mueve durante todo el
       recorrido por pantalla, no sólo al asomar. Da profundidad sin que
       parezca un efecto. Sólo transform, así que no repinta. */
    .rv-deriva{
      animation:rv-deriva linear both;
      animation-timeline:view();
      animation-range:cover;
    }
    @keyframes rv-deriva{
      from{transform:translateY(var(--rv-deriva,34px))}
      to{transform:translateY(calc(var(--rv-deriva,34px) * -1))}
    }
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* El header se queda sin aire antes que el resto del layout: las etiquetas de
   la vista negocio son largas y el switch ocupa un tercio del ancho. Primero
   se aprieta; cuando ya no alcanza, se dejan solo el switch y el botón. */
@media (max-width:1180px){
  .header__nav{gap:18px}
  .header__nav a:not(.btn){font-size:.9rem}
  .switch button{padding:0 13px;font-size:.86rem}
}
@media (max-width:1040px){
  .header__nav a:not(.btn){display:none}
  .hero__grid{grid-template-columns:1fr;gap:44px}
  .hero__copy{max-width:none}
  .cta-card{padding:40px}
  .verticales,.precios{grid-template-columns:repeat(2,1fr)}
  .steps--4{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .form{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  /* El header baja a 70 px; el hero a pantalla completa tiene que restar
     ese alto y no el de escritorio. */
  .heroe{--alto-header:70px}
  .header__nav{display:none}
  .header__in{height:70px;gap:12px;justify-content:space-between}
  /* A 390 px el switch entero medía más que la pantalla y la segunda opción
     quedaba cortada fuera del borde. Con las etiquetas cortas entra con
     holgura; el nombre accesible completo lo mantiene el aria-label. */
  .switch{margin-left:auto;border-color:var(--line-strong)}
  .switch button{padding:0 16px;font-size:.84rem;height:36px}
  .switch__larga{display:none}
  .switch__corta{display:inline}
  .steps{grid-template-columns:1fr;gap:26px}
  .cierre__grid{grid-template-columns:1fr;gap:36px}
  .dos{grid-template-columns:1fr}
  .section{padding:60px 0}
  .hero{padding:44px 0 56px}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .cta-card{padding:30px;border-radius:var(--radius-lg);margin-bottom:-90px}
  .footer{padding-top:150px}
  .section{padding:72px 0}
  .verticales,.precios,.steps--4,.footer__grid,.form{grid-template-columns:1fr}
  .hero__stage{padding:28px 0}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .rot>span{opacity:1;transform:none}
  .rot>span:not(.is-on){display:none}
}

.footer__social {
  margin-top: 24px;
}

.footer__social h4 {
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.footer__social-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer__social-links a {
  width: 42px;
  height: 42px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.82);

  text-decoration: none;

  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.footer__social-links a svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.footer__social-links a:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  transform: translateY(-2px);
}