/* ═══════════════════════════════════════════════════════════════════════════
   LANDLY · SISTEMA DE DISEÑO
   Una sola capa de geometría, elevación, ritmo y movimiento para los dos
   portales. Se carga DESPUÉS del CSS incrustado a propósito: redefine las
   variables que ya usan los componentes existentes (--r, --r2, --r3, --sh…),
   así toda la plataforma adopta la nueva forma sin reescribir sus reglas.

   Antes convivían cuatro capas que se pisaban entre sí (dos bloques :root en
   el mismo archivo, uno de ellos anulando al otro). Esta es la última palabra:
   lo que se cambie aquí cambia en todas partes.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Color ──────────────────────────────────────────────────────────────
     La identidad no se toca: navy de marca, teal de interacción, off-whites
     cálidos y los semánticos que ya distinguen aprobado / corregir / vencido. */
  --navy:#0E1B30; --navy2:#1C2D4A;
  --blue:#0F766E; --bl:#E9F5F3; --bm:#C3E4DE;
  --w:#FFFFFF; --off:#F8F9FB; --off2:#EFF1F5;
  --bdr:#E3E6EC; --bdr2:#C9CEDA;
  --t:#0D1F3C; --t2:#4B5A72; --t3:#8A98AE;
  /* Tinta sobre fotografía: el hero necesita blancos que no se laven. */
  --on-photo:#FFFFFF; --on-photo-2:rgba(255,255,255,.78);

  /* ── Geometría ──────────────────────────────────────────────────────────
     Esquinas generosas, nunca circulares. Los botones son cápsulas; las
     tarjetas, superficies amplias; los controles pequeños, suaves. */
  --r:10px;          /* controles pequeños: chips, badges, campos menores   */
  --r2:14px;         /* inputs, selects, celdas                             */
  --r3:20px;         /* tarjetas                                            */
  --r4:28px;         /* superficies grandes: hero, paneles, modales         */
  --r-pill:999px;    /* botones y píldoras                                  */

  /* ── Ritmo ──────────────────────────────────────────────────────────────
     Escala de 4. El aire es parte del producto: lo que respira se entiende. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:56px; --s10:80px; --s11:120px;
  --gutter:22px;                       /* margen lateral en móvil          */
  --measure:66ch;                      /* ancho máximo de lectura          */

  /* ── Elevación ──────────────────────────────────────────────────────────
     Sombras largas y de muy baja opacidad: la página parece levantada, no
     recortada. Menos bordes, más profundidad. */
  --sh:0 1px 2px rgba(13,31,60,.04), 0 8px 24px -12px rgba(13,31,60,.10);
  --sh2:0 2px 6px rgba(13,31,60,.05), 0 18px 44px -16px rgba(13,31,60,.16);
  --sh3:0 8px 20px rgba(13,31,60,.08), 0 40px 80px -24px rgba(13,31,60,.24);
  --ring:0 0 0 3px rgba(15,118,110,.16);   /* selección / foco             */

  /* ── Tipografía ─────────────────────────────────────────────────────────
     Playfair para los titulares de marca; Hanken Grotesk para el producto.
     clamp() en lugar de media queries: la escala se adapta sin saltos. */
  --f-serif:'Playfair Display',Georgia,serif;
  --f-sans:'Hanken Grotesk',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --fs-display:clamp(36px,5.4vw,64px);
  --fs-h1:clamp(28px,4.4vw,44px);
  --fs-h2:clamp(22px,2.8vw,30px);
  --fs-h3:19px;
  --fs-lead:clamp(16px,1.6vw,19px);
  --fs-body:15.5px;
  --fs-sm:13.5px;
  --fs-xs:12px;
  --lh-tight:1.06;
  --lh-title:1.14;
  --lh-body:1.6;
  --track-tight:-.022em;
  --track-eyebrow:.14em;

  /* ── Movimiento ─────────────────────────────────────────────────────────
     Tres duraciones, tres intenciones. Nada rebota. */
  --dur-1:160ms;     /* microinteracción: hover, pulsado, check            */
  --dur-2:320ms;     /* cambio de pregunta o de tarjeta                     */
  --dur-3:560ms;     /* cambio de sección / entrada narrativa              */
  --ease-out:cubic-bezier(.22,1,.36,1);       /* salida natural            */
  --ease-in-out:cubic-bezier(.65,0,.35,1);    /* desplazamientos           */
  --ease-soft:cubic-bezier(.34,1.26,.64,1);   /* muelle muy contenido      */
  --tr:var(--dur-1) var(--ease-out);

  /* Alturas táctiles: 44px es el mínimo que se acierta con el pulgar. */
  --tap:44px; --ctl:48px; --ctl-lg:56px;
}

/* ═══ PRIMITIVAS ════════════════════════════════════════════════════════════
   Clases con prefijo ds- para que convivan con las existentes mientras las
   pantallas se van migrando una a una. */

/* ── Botón ───────────────────────────────────────────────────────────────── */
.ds-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:var(--ctl); padding:0 26px;
  font-family:var(--f-sans); font-size:15px; font-weight:600; letter-spacing:-.01em;
  border:1px solid transparent; border-radius:var(--r-pill);
  background:var(--navy); color:var(--w);
  cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:transform var(--tr), box-shadow var(--tr), background-color var(--tr),
             border-color var(--tr), color var(--tr), opacity var(--tr);
}
.ds-btn:hover{ transform:translateY(-1px); box-shadow:var(--sh2); }
.ds-btn:active{ transform:translateY(0) scale(.985); box-shadow:none; transition-duration:60ms; }
.ds-btn:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
.ds-btn[disabled],.ds-btn[aria-disabled="true"]{
  opacity:.45; cursor:not-allowed; transform:none; box-shadow:none;
}
.ds-btn--lg{ min-height:var(--ctl-lg); padding:0 32px; font-size:16px; }
.ds-btn--sm{ min-height:var(--tap); padding:0 18px; font-size:14px; }
.ds-btn--full{ width:100%; }
.ds-btn--blue{ background:var(--blue); }
.ds-btn--ghost{ background:transparent; color:var(--t); border-color:var(--bdr2); }
.ds-btn--ghost:hover{ background:var(--off); border-color:var(--t3); }
.ds-btn--photo{ background:var(--w); color:var(--navy); }
.ds-btn--photo-ghost{
  background:rgba(255,255,255,.10); color:var(--on-photo);
  border-color:rgba(255,255,255,.42); backdrop-filter:blur(14px);
}
.ds-btn--photo-ghost:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.7); }
/* La flecha acompaña al empuje del botón, no se mueve sola. */
.ds-btn .ds-arrow{ transition:transform var(--dur-1) var(--ease-out); }
.ds-btn:hover .ds-arrow{ transform:translateX(3px); }

/* ── Superficie seleccionable (una decisión por pantalla) ─────────────────── */
.ds-choice{
  display:flex; align-items:center; gap:14px; width:100%;
  min-height:var(--ctl-lg); padding:16px 20px; text-align:left;
  background:var(--w); border:1.5px solid var(--bdr); border-radius:var(--r2);
  font-family:var(--f-sans); font-size:16px; font-weight:500; color:var(--t);
  cursor:pointer;
  transition:transform var(--tr), border-color var(--tr), background-color var(--tr), box-shadow var(--tr);
}
.ds-choice:hover{ border-color:var(--bdr2); background:var(--off); }
.ds-choice:active{ transform:scale(.995); transition-duration:60ms; }
.ds-choice[aria-pressed="true"],.ds-choice.is-on{
  border-color:var(--blue); background:var(--bl); box-shadow:var(--ring);
}
.ds-choice:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
/* La marca de selección aparece; no empuja el texto. */
.ds-choice .ds-check{
  margin-left:auto; width:22px; height:22px; border-radius:var(--r-pill);
  border:1.5px solid var(--bdr2); display:grid; place-items:center; flex:none;
  transition:background-color var(--tr), border-color var(--tr), transform var(--tr);
}
.ds-choice[aria-pressed="true"] .ds-check,.ds-choice.is-on .ds-check{
  background:var(--blue); border-color:var(--blue); transform:scale(1.06);
}

/* ── Tarjeta ─────────────────────────────────────────────────────────────── */
.ds-card{
  background:var(--w); border:1px solid var(--bdr); border-radius:var(--r3);
  padding:var(--s6); box-shadow:var(--sh);
}
.ds-card--flat{ box-shadow:none; }
.ds-card--lg{ border-radius:var(--r4); padding:var(--s7); }

/* ── Campo ───────────────────────────────────────────────────────────────── */
.ds-field{ display:block; }
.ds-field > label{
  display:block; margin-bottom:8px;
  font-size:var(--fs-sm); font-weight:600; color:var(--t2);
}
.ds-input{
  width:100%; min-height:var(--ctl); padding:12px 16px;
  font-family:var(--f-sans); font-size:16px; color:var(--t);
  background:var(--w); border:1.5px solid var(--bdr); border-radius:var(--r2);
  transition:border-color var(--tr), box-shadow var(--tr), background-color var(--tr);
}
.ds-input::placeholder{ color:var(--t3); }
.ds-input:hover{ border-color:var(--bdr2); }
.ds-input:focus{ outline:none; border-color:var(--blue); box-shadow:var(--ring); }
.ds-input[aria-invalid="true"]{ border-color:var(--red); box-shadow:0 0 0 3px rgba(185,28,28,.12); }
.ds-error{ display:block; margin-top:6px; font-size:var(--fs-sm); color:var(--red); }

/* ── Estado ──────────────────────────────────────────────────────────────── */
.ds-status{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 12px 5px 10px; border-radius:var(--r-pill);
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.02em;
  background:var(--off2); color:var(--t2);
}
.ds-status::before{ content:''; width:7px; height:7px; border-radius:var(--r-pill); background:currentColor; }
.ds-status--ok{ background:var(--grl); color:var(--green); }
.ds-status--wait{ background:var(--bl); color:var(--blue); }
.ds-status--fix{ background:var(--aml); color:var(--amb); }
.ds-status--bad{ background:var(--rl); color:var(--red); }

/* ── Progreso ────────────────────────────────────────────────────────────── */
.ds-progress{ height:4px; background:var(--off2); border-radius:var(--r-pill); overflow:hidden; }
.ds-progress > i{
  display:block; height:100%; width:0; background:var(--blue); border-radius:inherit;
  transition:width var(--dur-2) var(--ease-in-out);
}

/* ── Esqueleto de carga ──────────────────────────────────────────────────── */
.ds-skel{
  background:linear-gradient(100deg,var(--off2) 30%,var(--off) 50%,var(--off2) 70%);
  background-size:220% 100%; border-radius:var(--r2);
  animation:ds-skel 1.4s ease-in-out infinite;
}
@keyframes ds-skel{ to{ background-position:-120% 0; } }

/* ── Ritmo editorial ─────────────────────────────────────────────────────── */
.ds-eyebrow{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:var(--track-eyebrow);
  text-transform:uppercase; color:var(--t3);
}
.ds-display{
  font-family:var(--f-serif); font-weight:700;
  font-size:var(--fs-display); line-height:var(--lh-tight); letter-spacing:var(--track-tight);
}
.ds-h1{ font-family:var(--f-serif); font-weight:700; font-size:var(--fs-h1); line-height:var(--lh-title); letter-spacing:var(--track-tight); }
.ds-h2{ font-family:var(--f-serif); font-weight:700; font-size:var(--fs-h2); line-height:var(--lh-title); letter-spacing:-.015em; }
.ds-lead{ font-size:var(--fs-lead); line-height:var(--lh-body); color:var(--t2); max-width:var(--measure); }

/* ── Entrada narrativa (storytelling) ────────────────────────────────────── */
.ds-in{ opacity:0; transform:translateY(14px); }
.ds-in.is-in{ opacity:1; transform:none; transition:opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }

/* ═══ MOVIMIENTO REDUCIDO ═══════════════════════════════════════════════════
   No se apaga la interfaz: se quita el desplazamiento y se conserva el cambio
   de estado, que es información. */
@media(prefers-reduced-motion:reduce){
  .ds-btn:hover,.ds-btn:active,.ds-choice:active{ transform:none; }
  .ds-in{ opacity:1; transform:none; }
  .ds-in.is-in{ transition:none; }
  .ds-skel{ animation:none; }
  .ds-progress > i{ transition:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PORTADA · HERO
   La fotografía de la Cinta Costera ocupa el primer viewport. El texto vive
   sobre ella con un velo que solo oscurece lo justo para leer, y el punto de
   interés se fija por tamaño de pantalla: en móvil nunca se recorta el skyline
   ni el atardecer.
   ═══════════════════════════════════════════════════════════════════════════ */
.lx-hero{
  position:relative; display:flex; align-items:flex-end;
  min-height:100svh; overflow:hidden; isolation:isolate;
  /* La portada reserva 60px para la barra fija; el hero sube por debajo de ella
     para que la fotografía empiece en el borde y la barra flote encima. */
  margin-top:calc(-1 * var(--nav));
}
.lx-hero-photo{ position:absolute; inset:0; z-index:-1; background:var(--navy); }
.lx-hero-photo img{
  width:100%; height:100%; display:block; object-fit:cover;
  /* Encuadre de escritorio: skyline centrado, cielo arriba, agua abajo. */
  object-position:50% 48%;
}
.lx-hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(6,14,28,.88) 0%, rgba(6,14,28,.66) 34%, rgba(6,14,28,.12) 66%, rgba(6,14,28,.34) 100%),
    linear-gradient(to top, rgba(6,14,28,.66) 0%, rgba(6,14,28,0) 46%);
}
.lx-hero-inner{
  width:100%; max-width:1240px; margin:0 auto;
  /* El pie deja aire suficiente para que la esquina inferior derecha no choque
     con la burbuja de Lyn ni con el botón flotante de WhatsApp. */
  padding:calc(var(--nav) + var(--s9)) var(--gutter) clamp(56px,12vh,124px);
  display:grid; grid-template-columns:45fr 55fr;
  gap:clamp(28px,4vw,56px); align-items:center;
}
.lx-hero-kicker{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:var(--track-eyebrow);
  text-transform:uppercase; color:var(--on-photo-2); margin-bottom:var(--s5);
}
.lx-hero-h{
  font-family:var(--f-serif); font-weight:600;
  font-size:var(--fs-display); line-height:var(--lh-tight); letter-spacing:var(--track-tight);
  color:var(--on-photo); text-wrap:balance; margin-bottom:var(--s5);
  text-shadow:0 1px 40px rgba(6,14,28,.35);
}
.lx-hero-h em{ font-style:italic; color:#EAF6F3; }
.lx-hero-p{
  font-size:var(--fs-lead); line-height:var(--lh-body); color:var(--on-photo-2);
  max-width:34ch; margin-bottom:var(--s7);
}
.lx-hero-cta{ display:flex; flex-wrap:wrap; gap:var(--s3); }
.lx-hero-note{ margin-top:var(--s5); font-size:var(--fs-sm); color:rgba(255,255,255,.62); }

/* Dos superficies de producto sobre la fotografía: detrás el panel del
   cliente, delante el análisis. La de atrás queda a la izquierda, más abajo y
   a menor escala, medio tapada por la principal — profundidad de verdad, no
   una captura pegada. */
.lx-stage{
  position:relative; min-height:clamp(400px,46vh,500px);
  align-self:center; justify-self:end; width:100%; max-width:680px;
}
.lx-win{
  border-radius:var(--r4); overflow:hidden;
  transition:transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.lx-win-back{
  position:absolute; left:0; bottom:-4%; width:58%;
  background:rgba(255,255,255,.80); backdrop-filter:blur(18px) saturate(1.05);
  border:1px solid rgba(255,255,255,.5); box-shadow:var(--sh2);
  padding:16px 18px 18px; transform:scale(.96);
}
.lx-win-front{
  position:relative; z-index:2; width:78%; margin-left:auto;
  background:rgba(255,255,255,.96); backdrop-filter:blur(22px) saturate(1.1);
  border:1px solid rgba(255,255,255,.62); box-shadow:var(--sh3);
  padding:18px 20px 20px;
}
/* El cursor encima acerca la escena un punto; nada de 3D ni de zoom. */
.lx-stage:hover .lx-win-front{ transform:translateY(-2px) scale(1.006); box-shadow:0 12px 28px rgba(13,31,60,.10), 0 52px 96px -28px rgba(13,31,60,.30); }
.lx-stage:hover .lx-win-back{ transform:scale(.975) translateY(-1px); }

.lx-win-hd{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.lx-brand{ font-family:var(--f-serif); font-weight:700; font-size:17px; color:var(--navy); letter-spacing:-.2px; }
.lx-brand em{ font-style:normal; color:var(--blue); }
.lx-win-step{
  margin-left:auto; font-size:10.5px; font-weight:700; letter-spacing:var(--track-eyebrow);
  text-transform:uppercase; color:var(--t3);
}
.lx-win-ttl{ font-size:13px; font-weight:700; color:var(--t2); letter-spacing:-.01em; }
.lx-win-dot{ width:8px; height:8px; border-radius:var(--r-pill); background:var(--blue); flex:none; }

.lx-bar{ height:3px; background:var(--off2); border-radius:var(--r-pill); overflow:hidden; margin-bottom:16px; }
.lx-bar > i{ display:block; height:100%; width:14%; background:var(--blue); border-radius:inherit;
  transition:width var(--dur-3) var(--ease-in-out); }

/* El cuerpo entra; no parpadea ni se desliza de lado. */
.lx-body.lx-in{ animation:lx-body var(--dur-2) var(--ease-out) both; }
@keyframes lx-body{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

.lx-q{ font-size:17px; font-weight:600; letter-spacing:-.018em; line-height:1.28; color:var(--t); }
.lx-q-sm{ font-size:15px; margin-bottom:12px; }
.lx-hint{ margin-top:5px; font-size:12.5px; color:var(--t3); }
.lx-opts{ display:grid; gap:7px; margin-top:14px; }
.lx-yn{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; }
.lx-opt{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:40px; padding:9px 13px; border:1.5px solid var(--bdr); border-radius:var(--r2);
  font-size:13.5px; font-weight:500; color:var(--t2); background:var(--w);
  transition:border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.lx-opt b{ width:17px; height:17px; flex:none; border-radius:var(--r-pill); border:1.5px solid var(--bdr2); }
.lx-opt.is-on{ border-color:var(--blue); background:var(--bl); color:var(--t); font-weight:600; }
.lx-opt.is-on b{
  background-color:var(--blue); border-color:var(--blue);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:11px; background-repeat:no-repeat; background-position:center;
}
.lx-act{ margin-top:16px; display:flex; justify-content:flex-end; }
.lx-cta{
  display:inline-flex; align-items:center; gap:7px; padding:9px 18px;
  border-radius:var(--r-pill); background:var(--navy); color:var(--w);
  font-size:13px; font-weight:600;
}

/* Resultado: la estructura de la pantalla de rutas, con los datos de VISAS. */
.lx-ruta{ border:1.5px solid var(--bm); background:var(--bl); border-radius:var(--r3); padding:14px 16px; }
.lx-ruta-hd{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lx-ruta-lbl{ font-size:10.5px; font-weight:700; letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:var(--blue); }
.lx-ruta-pct{ font-family:var(--f-mono); font-size:15px; font-weight:500; color:var(--blue); }
.lx-ruta-n{ margin-top:8px; font-size:16px; font-weight:600; letter-spacing:-.015em; color:var(--t); }
.lx-ruta-d{ margin-top:2px; font-size:12.5px; color:var(--t2); }
.lx-ruta-f{ display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; font-size:12px; color:var(--t2); }

/* Los pasos del proceso, en la superficie de atrás. */
.lx-steps{ list-style:none; display:grid; gap:7px; margin:0; padding:0; }
.lx-steps-in{ margin-top:4px; }
.lx-step{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--t3); }
.lx-step-b{
  width:9px; height:9px; flex:none; border-radius:var(--r-pill);
  border:1.5px solid var(--bdr2); background:var(--w);
  transition:background-color var(--dur-3) var(--ease-out), border-color var(--dur-3) var(--ease-out);
}
.lx-step.ok .lx-step-b{ background:var(--green); border-color:var(--green); }
.lx-step.on .lx-step-b{ background:var(--blue); border-color:var(--blue); box-shadow:0 0 0 3px rgba(15,118,110,.14); }
.lx-step-n{ color:var(--t2); font-weight:500; }
.lx-step.ok .lx-step-n,.lx-step.on .lx-step-n{ color:var(--t); font-weight:600; }
.lx-step-s{ margin-left:auto; font-size:11px; }
.lx-step.ok .lx-step-s{ color:var(--green); }
.lx-step.on .lx-step-s{ color:var(--blue); }

@media(prefers-reduced-motion:reduce){
  .lx-win,.lx-bar > i,.lx-step-b{ transition:none; }
  .lx-body.lx-in{ animation:none; }
  .lx-stage:hover .lx-win-front,.lx-stage:hover .lx-win-back{ transform:none; }
}

/* La barra flota sobre la foto y se vuelve sólida al desplazarse. */
body.pg-landing-on:not(.is-scrolled) .nav{ background:transparent; border-bottom-color:transparent; backdrop-filter:none; }
body.pg-landing-on:not(.is-scrolled) .nav .lname{ color:var(--on-photo); }
body.pg-landing-on:not(.is-scrolled) .nav-lnk,
body.pg-landing-on:not(.is-scrolled) .nav-menu a{ color:rgba(255,255,255,.88); }
body.pg-landing-on:not(.is-scrolled) .nav-lnk:hover,
body.pg-landing-on:not(.is-scrolled) .nav-menu a:hover{ color:var(--on-photo); }
body.pg-landing-on:not(.is-scrolled) .lang-tg{ color:rgba(255,255,255,.88); border-color:rgba(255,255,255,.42); }
body.pg-landing-on:not(.is-scrolled) .nav-cta{ background:var(--w); color:var(--navy); }
body.pg-landing-on:not(.is-scrolled) .nav-burger b,
body.pg-landing-on:not(.is-scrolled) .nav-burger b::before,
body.pg-landing-on:not(.is-scrolled) .nav-burger b::after{ background:var(--on-photo); }
.nav{ transition:background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }

/* ── Tableta ─────────────────────────────────────────────────────────────── */
@media(max-width:980px){
  .lx-hero-inner{ grid-template-columns:1fr; gap:var(--s7); align-items:start; align-content:end; }
  .lx-stage{ justify-self:start; max-width:560px; }
  .lx-hero-p{ max-width:46ch; }
}

/* ── Teléfono: recomposición, no reducción ───────────────────────────────────
   La foto sigue llenando el viewport y el texto se apoya abajo, donde el velo
   es más denso. La vista previa cae debajo del pliegue, a tamaño real. */
@media(max-width:720px){
  .lx-hero{ align-items:stretch; }
  /* Columna vertical del encuadre: cielo arriba, torres al centro y la curva
     de la Cinta Costera abajo. Recortar por el centro perdía el agua. */
  .lx-hero-photo img{ object-position:40% 46%; }
  .lx-hero-scrim{
    background:
      linear-gradient(to top, rgba(6,14,28,.92) 0%, rgba(6,14,28,.68) 34%, rgba(6,14,28,.12) 72%, rgba(6,14,28,.30) 100%);
  }
  .lx-hero-inner{
    padding:calc(var(--nav) + var(--s7)) var(--gutter) var(--s8);
    grid-template-rows:1fr auto; align-content:stretch;
  }
  .lx-hero-tx{ align-self:end; }
  .lx-hero-h{ margin-bottom:var(--s4); }
  .lx-hero-p{ margin-bottom:var(--s6); font-size:16px; }
  .lx-hero-cta{ flex-direction:column; align-items:stretch; }
  .lx-hero-cta .ds-btn{ width:100%; }
  /* En el teléfono NO se encogen dos ventanas: queda UNA superficie, y el
     panel entra en la misma secuencia en vez de ponerse al lado. */
  .lx-stage{ max-width:none; margin-top:var(--s8); min-height:0; }
  .lx-win-back{ display:none; }
  .lx-win-front{ width:100%; margin:0; padding:18px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOTONES DEL PRODUCTO
   El marcado no cambia: .btn sigue siendo .btn en todas las llamadas que ya
   existen. Lo que cambia es su forma — cápsula, altura táctil real y una
   reacción física al pulsar.
   ═══════════════════════════════════════════════════════════════════════════ */
.btn{
  border-radius:var(--r-pill); min-height:var(--tap);
  font-weight:600; letter-spacing:-.01em;
  transition:transform var(--tr), box-shadow var(--tr), background-color var(--tr),
             border-color var(--tr), color var(--tr), opacity var(--tr);
}
.btn:hover:not([disabled]){ transform:translateY(-1px); }
.btn:active:not([disabled]){ transform:translateY(0) scale(.985); transition-duration:60ms; }
.btn.full{ width:100%; }

/* ═══════════════════════════════════════════════════════════════════════════
   ANÁLISIS DE ELEGIBILIDAD
   Una decisión por pantalla. Las preguntas, su orden y su lógica son las del
   código: aquí solo cambia cómo se sienten — aire, tamaño de la pregunta,
   superficies que se pueden tocar sin apuntar y un único paso siguiente.
   ═══════════════════════════════════════════════════════════════════════════ */
#pg-quiz{ background:linear-gradient(180deg,var(--off) 0%,var(--w) 38%); }
#pg-quiz .qwrap{
  width:100%; max-width:880px; margin:0 auto;
  padding:clamp(20px,3.6vh,42px) var(--gutter) clamp(28px,5vh,56px);
  display:flex; flex-direction:column; justify-content:center; min-height:100%;
}
/* El riel del progreso NO se estrecha: si saltara de ancho entre preguntas,
   la barra parecería moverse sola. Lo que se estrecha es la ficha. */
#pg-quiz .qwrap.qwrap-n .qcard{ max-width:660px; width:100%; margin-inline:auto; }

/* ── Progreso: cuatro tramos con nombre, sin ruido ───────────────────────── */
#pg-quiz .prog-hd{ margin-bottom:clamp(16px,3vh,28px); }
#pg-quiz .prog-steps{ display:flex; align-items:center; gap:10px; }
#pg-quiz .ps{
  display:flex; align-items:center; gap:6px;
  font-size:var(--fs-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--t3); white-space:nowrap;
  transition:color var(--dur-2) var(--ease-out);
}
#pg-quiz .ps.on{ color:var(--navy); }
#pg-quiz .ps.done{ color:var(--blue); }
#pg-quiz .pl{
  flex:1; height:3px; border-radius:var(--r-pill); background:var(--off2);
  overflow:hidden; position:relative;
}
#pg-quiz .pl.done::after{
  content:''; position:absolute; inset:0; background:var(--blue); border-radius:inherit;
  animation:lx-fill var(--dur-3) var(--ease-in-out) both;
}
@keyframes lx-fill{ from{ transform:scaleX(0); transform-origin:left; } to{ transform:scaleX(1); } }
#pg-quiz .prog-info{
  display:flex; justify-content:space-between; gap:16px; margin-top:12px;
  font-size:var(--fs-sm); color:var(--t3);
}

/* ── La ficha: una superficie, no una caja de formulario ─────────────────── */
#pg-quiz .qcard{
  background:var(--w); border:1px solid var(--bdr); border-radius:var(--r4);
  box-shadow:var(--sh2); padding:clamp(22px,2.6vw,34px);
}
#pg-quiz .qc-lbl{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:var(--track-eyebrow);
  text-transform:uppercase; color:var(--t3); margin-bottom:var(--s4);
}
#pg-quiz .qc-q{
  font-family:var(--f-sans); font-weight:600;
  font-size:clamp(22px,2.1vw,28px); line-height:1.22; letter-spacing:-.022em;
  color:var(--t); text-wrap:balance; margin-bottom:10px;
}
#pg-quiz .qc-hint{ font-size:14px; line-height:1.5; color:var(--t3); margin-bottom:var(--s5); }

/* ── Opciones: superficies grandes, nunca casillas diminutas ─────────────── */
#pg-quiz .opts{ display:grid; gap:10px; }
#pg-quiz .opts.dos{ grid-template-columns:1fr 1fr; }
#pg-quiz .opts.tres{ grid-template-columns:repeat(3,1fr); }
#pg-quiz .opt{
  /* El grid estira todas las celdas a la más alta: si UNA etiqueta se parte en
     dos líneas, engordan las nueve. Con este ancho interno la más larga
     ("Trabajar para una empresa") entra en una sola línea a 1366px. */
  display:flex; align-items:center; gap:8px; min-height:48px; padding:10px 12px;
  background:var(--w); border:1.5px solid var(--bdr); border-radius:var(--r2);
  font-size:14px; line-height:1.3; font-weight:500; color:var(--t); cursor:pointer; text-align:left;
  transition:transform var(--tr), border-color var(--tr), background-color var(--tr), box-shadow var(--tr);
}
#pg-quiz .opt:hover{ border-color:var(--bdr2); background:var(--off); }
#pg-quiz .opt:active{ transform:scale(.99); transition-duration:60ms; }
#pg-quiz .opt.sel{ border-color:var(--blue); background:var(--bl); font-weight:600; box-shadow:var(--ring); }
#pg-quiz .opt-r{
  width:18px; height:18px; flex:none; border-radius:var(--r-pill);
  border:1.5px solid var(--bdr2); background:var(--w);
  transition:background-color var(--tr), border-color var(--tr), transform var(--tr);
}
#pg-quiz .opt.sel .opt-r{
  background-color:var(--blue); border-color:var(--blue); transform:scale(1.05);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:13px; background-repeat:no-repeat; background-position:center;
}

/* ── Sí / No: dos superficies del mismo peso ─────────────────────────────── */
#pg-quiz .yn-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#pg-quiz .yn{
  display:flex; align-items:center; justify-content:center; min-height:60px; padding:14px;
  background:var(--w); border:1.5px solid var(--bdr); border-radius:var(--r3);
  font-size:17px; font-weight:600; color:var(--t); cursor:pointer;
  transition:transform var(--tr), border-color var(--tr), background-color var(--tr), box-shadow var(--tr);
}
#pg-quiz .yn:hover{ border-color:var(--bdr2); background:var(--off); }
#pg-quiz .yn:active{ transform:scale(.99); transition-duration:60ms; }
#pg-quiz .yn.si{ border-color:var(--blue); background:var(--bl); box-shadow:var(--ring); }
#pg-quiz .yn.no{ border-color:var(--t3); background:var(--off2); }

/* ── Tipo de cuenta: las dos puertas de entrada ──────────────────────────── */
#pg-quiz .tgrid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
#pg-quiz .topt{
  position:relative; min-height:128px; padding:18px 18px;
  background:var(--w); border:1.5px solid var(--bdr); border-radius:var(--r3);
  cursor:pointer; display:flex; flex-direction:column; gap:10px;
  transition:transform var(--tr), border-color var(--tr), background-color var(--tr), box-shadow var(--tr);
}
#pg-quiz .topt:hover{ border-color:var(--bdr2); box-shadow:var(--sh); transform:translateY(-1px); }
#pg-quiz .topt[aria-pressed="true"]{ border-color:var(--blue); background:var(--bl); box-shadow:var(--ring); }
#pg-quiz .topt-ic{
  width:40px; height:40px; border-radius:var(--r2); display:grid; place-items:center;
  background:var(--off2); color:var(--navy);
}
#pg-quiz .topt[aria-pressed="true"] .topt-ic{ background:var(--bm); color:var(--blue); }
#pg-quiz .topt-name{ font-size:17px; font-weight:600; letter-spacing:-.01em; color:var(--t); }
#pg-quiz .topt-desc{ font-size:14px; line-height:1.5; color:var(--t2); }
#pg-quiz .topt-chk{
  position:absolute; top:18px; right:18px; width:22px; height:22px; flex:none;
  border-radius:var(--r-pill); border:1.5px solid var(--bdr2); background:var(--w);
  transition:background-color var(--tr), border-color var(--tr);
}
#pg-quiz .topt[aria-pressed="true"] .topt-chk{
  background-color:var(--blue); border-color:var(--blue);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:13px; background-repeat:no-repeat; background-position:center;
}

/* ── Un solo paso siguiente ──────────────────────────────────────────────── */
#pg-quiz .qnav{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:clamp(20px,2.8vh,30px);
}
#pg-quiz .qnav .btn{ min-height:var(--ctl); padding:0 26px; font-size:15px; }
#pg-quiz .qnav .btn.navy{ padding:0 30px; }

/* La entrada de cada pregunta: la ficha llega, no parpadea. */
#pg-quiz .fade{ animation:lx-q var(--dur-2) var(--ease-out) both; }
@keyframes lx-q{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ── Teléfono: la pregunta manda y la acción queda al alcance del pulgar ── */
@media(max-width:720px){
  #pg-quiz .qwrap{ padding:var(--s5) var(--gutter) var(--s8); justify-content:flex-start; }
  #pg-quiz .qcard{ border:0; box-shadow:none; background:transparent; padding:0; }
  #pg-quiz .opts.dos,#pg-quiz .opts.tres,#pg-quiz .tgrid{ grid-template-columns:1fr; }
  #pg-quiz .topt{ min-height:0; flex-direction:row; align-items:center; gap:14px; padding:16px 18px; }
  #pg-quiz .topt-ic{ flex:none; }
  #pg-quiz .topt-chk{ position:static; margin-left:auto; }
  #pg-quiz .topt-desc{ display:none; }
  #pg-quiz .qc-q{ font-size:25px; }
  #pg-quiz .yn{ min-height:64px; }
  #pg-quiz .qnav{ margin-top:var(--s7); }
  #pg-quiz .qnav .btn.navy{ flex:1; }
  #pg-quiz .prog-info span:first-child{ display:none; }
}

@media(prefers-reduced-motion:reduce){
  #pg-quiz .fade{ animation:none; }
  #pg-quiz .pl.done::after{ animation:none; }
  .btn:hover:not([disabled]),.btn:active:not([disabled]){ transform:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTROLES COMPARTIDOS
   El desplegable propio, los campos y las superficies del producto hablan el
   mismo idioma que el análisis. No se toca su posicionamiento: el panel se
   coloca y se recorta desde JavaScript midiendo el hueco real de la ventana,
   y eso sigue mandando.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Desplegable con buscador ────────────────────────────────────────────── */
.cbx-t{
  min-height:var(--ctl); padding:12px 16px; border-radius:var(--r2);
  border:1.5px solid var(--bdr); background:var(--w);
  font-size:16px; color:var(--t);
  transition:border-color var(--tr), box-shadow var(--tr), background-color var(--tr);
}
.cbx-t:hover{ border-color:var(--bdr2); }
.cbx-t:focus-visible,.cbx.abierto .cbx-t{ outline:none; border-color:var(--blue); box-shadow:var(--ring); }
.cbx.vacio .cbx-v{ color:var(--t3); }
.cbx-pop{
  border-radius:var(--r3); border:1px solid var(--bdr); background:var(--w);
  box-shadow:var(--sh3); overflow:hidden;
}
.cbx-search{ padding:8px 10px; border-bottom:1px solid var(--bdr); }
.cbx-inp{
  min-height:40px; border-radius:var(--r); border:1.5px solid var(--bdr);
  font-size:16px; padding:7px 12px;
}
.cbx-inp:focus{ outline:none; border-color:var(--blue); box-shadow:var(--ring); }
.cbx-opt{
  /* Las filas caben 4+ paises en una ventana baja: el panel se recorta desde
     JavaScript midiendo el hueco real, y una fila alta lo dejaba en tres. */
  min-height:38px; padding:8px 16px; font-size:15px; color:var(--t);
  transition:background-color var(--dur-1) linear, color var(--dur-1) linear;
}
.cbx-opt:hover,.cbx-opt.act{ background:var(--bl); color:var(--t); }
.cbx-opt[aria-selected="true"]{ font-weight:600; color:var(--blue); }

/* ── Campos de texto del producto ────────────────────────────────────────── */
.inp,.fld input,.fld select,.fld textarea,input[type="text"],input[type="email"],
input[type="password"],input[type="tel"],input[type="date"],input[type="number"],textarea,select{
  border-radius:var(--r2);
  transition:border-color var(--tr), box-shadow var(--tr), background-color var(--tr);
}
.inp:focus,.fld input:focus,.fld select:focus,.fld textarea:focus,
input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus,
input[type="tel"]:focus,input[type="date"]:focus,input[type="number"]:focus,
textarea:focus,select:focus{
  outline:none; border-color:var(--blue); box-shadow:var(--ring);
}

/* ── Superficies del portal ──────────────────────────────────────────────── */
.sc,.ai-card,.hm-row,.act-card,.big-act,.doc-item,.paid-card,.pickup-card,.relo-entry,
.ed-sec,.ed-task,.ed-overview{ border-radius:var(--r3); }
.modal,.cmodal,.mas-sheet,.notif-sheet{ border-radius:var(--r4); }
.cm-btn{ border-radius:var(--r-pill); min-height:var(--tap); padding:0 20px; }

/* Los estados del expediente hablan el mismo idioma en todas las pantallas. */
.badge,.chip,.pill,.st,.tag{ border-radius:var(--r-pill); }

/* ═══════════════════════════════════════════════════════════════════════════
   ESTADOS
   El producto ya decidió que el estado de un documento se lee como una frase
   en su fila, no como una pastilla de color ("sin chips ni cajas anidadas").
   Esa decisión se respeta: lo que se unifica aquí es el COLOR y el peso, para
   que aprobado, en revisión, por corregir y devuelto signifiquen lo mismo en
   el portal, en el expediente y en el despacho.
   ═══════════════════════════════════════════════════════════════════════════ */
.ed-doc-s,.doc-st,.st-txt{
  font-size:13px; font-weight:600; letter-spacing:-.005em; white-space:nowrap;
}
.ed-doc-s.ok,.doc-st.ok{ color:var(--green); }
.ed-doc-s.wait,.doc-st.wait{ color:var(--blue); }
.ed-doc-s.warn,.doc-st.warn{ color:var(--amb); }
.ed-doc-s.bad,.doc-st.bad{ color:var(--red); }
.ed-doc-s.none,.doc-st.none{ color:var(--t3); font-weight:500; }

/* La fila entera reacciona al puntero: el documento es el objetivo, no la flecha. */
.ed-doc-t{
  border-radius:var(--r2);
  transition:background-color var(--tr), transform var(--tr);
}
.ed-doc-t:hover{ background:var(--off); }
.ed-doc-t:active{ transform:scale(.997); transition-duration:60ms; }
.ed-doc-c{ transition:transform var(--dur-2) var(--ease-out); }
.ed-doc.on .ed-doc-c{ transform:rotate(90deg); }

/* El detalle del documento se despliega; no aparece de golpe. */
.ed-doc-d{ animation:lx-abre var(--dur-2) var(--ease-out) both; }
@keyframes lx-abre{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

@media(prefers-reduced-motion:reduce){
  .ed-doc-d{ animation:none; }
  .ed-doc-t:active{ transform:none; }
  .ed-doc.on .ed-doc-c{ transition:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DE LA FOTOGRAFÍA A LA PÁGINA
   El hero no termina con un corte: la imagen se apaga sobre la superficie
   clara y justo debajo empieza "Cómo funciona". Los pasos son los siete del
   flujo real; aquí solo cambia cómo se leen.
   ═══════════════════════════════════════════════════════════════════════════ */
.lx-hero::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:140px;
  background:linear-gradient(to bottom, rgba(248,249,251,0) 0%, rgba(248,249,251,.55) 55%, var(--off) 100%);
  pointer-events:none;
}

#como-funciona{ background:var(--off); }
#como-funciona,.lsec{ padding-block:clamp(56px,9vh,110px); }

.ed-label{
  display:flex; justify-content:space-between; gap:16px; margin-bottom:var(--s8);
  font-size:var(--fs-xs); font-weight:600; letter-spacing:var(--track-eyebrow);
  text-transform:uppercase; color:var(--t3);
}
.feat-eyebrow{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:var(--track-eyebrow);
  text-transform:uppercase; color:var(--blue);
}
.feat-h{
  font-family:var(--f-serif); font-weight:600;
  font-size:var(--fs-h1); line-height:var(--lh-title); letter-spacing:var(--track-tight);
  color:var(--t); text-wrap:balance;
}
.feat-h em{ font-style:italic; color:var(--blue); }
.lsec-sub{ font-size:var(--fs-lead); line-height:var(--lh-body); color:var(--t2); max-width:52ch; }

/* Los siete pasos, repartidos en horizontal. Sin tarjetas: una línea fina
   arriba, el número, el nombre y una frase. El aire hace el trabajo. */
.os-flow{
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
  gap:clamp(14px,1.6vw,26px); margin-top:clamp(36px,5vh,64px);
}
.os-stage{
  padding-top:16px; border-top:1px solid var(--bdr);
  transition:border-color var(--dur-2) var(--ease-out);
}
.os-stage:hover{ border-top-color:var(--blue); }
.os-stage b{
  display:block; font-family:var(--f-mono); font-size:11px; font-weight:500;
  letter-spacing:.06em; color:var(--t3); margin-bottom:10px;
}
.os-stage h3{
  font-family:var(--f-sans); font-size:15px; font-weight:600; letter-spacing:-.015em;
  color:var(--t); margin-bottom:6px;
}
.os-stage p{ font-size:13px; line-height:1.5; color:var(--t2); }

.os-note{
  margin-top:clamp(32px,4.4vh,56px); padding-top:var(--s6); border-top:1px solid var(--bdr);
  font-size:var(--fs-sm); line-height:1.6; color:var(--t3); max-width:var(--measure); text-align:left; margin-inline:0;
}

@media(max-width:1080px){
  .os-flow{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s6) var(--s5); }
}
@media(max-width:720px){
  .os-flow{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s6) var(--s4); }
  .ed-label{ margin-bottom:var(--s6); }
  .ed-label span:last-child{ display:none; }
  .os-stage p{ font-size:12.5px; }
  .lx-hero::after{ height:100px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PORTADA · EL RESTO DE LA NARRATIVA
   Las secciones que siguen a "Cómo funciona" comparten el mismo idioma que el
   hero y el producto: una idea por bloque, superficies amplias, poco borde y
   mucho aire. El contenido es el que ya estaba.
   ═══════════════════════════════════════════════════════════════════════════ */
.lsec{ padding-inline:clamp(20px,4vw,54px); }
.lsec.alt{ background:var(--off); }
.ed-row{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px); align-items:start;
}
.ed-link{
  display:inline-flex; align-items:center; gap:7px;
  font-size:var(--fs-sm); font-weight:600; color:var(--blue);
  border-bottom:1px solid transparent; transition:border-color var(--tr), gap var(--tr);
}
.ed-link:hover{ border-bottom-color:var(--blue); gap:10px; }

/* ── Dos formas de usar Landly ───────────────────────────────────────────── */
.os-two{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,56px); margin-top:clamp(32px,5vh,56px); }
.os-pill{
  display:inline-flex; align-items:center; min-height:28px; padding:0 14px;
  border-radius:var(--r-pill); border:1px solid var(--bdr2); background:var(--w);
  font-family:var(--f-mono); font-size:10.5px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--t2); margin-bottom:var(--s5);
}
.os-list{ display:grid; gap:11px; margin-top:var(--s6); list-style:none; padding:0; }
.os-list li{
  position:relative; padding-left:20px; font-size:14.5px; line-height:1.5; color:var(--t2);
}
.os-list li::before{
  content:''; position:absolute; left:0; top:.55em; width:6px; height:6px;
  border-radius:var(--r-pill); background:var(--blue);
}

/* ── Bloques partidos (texto + superficie de producto o fotografía) ──────── */
.os-split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);
  gap:clamp(28px,4.4vw,72px); align-items:center; margin-top:clamp(32px,5vh,56px);
}
.os-split.rev .os-split-txt{ order:2; }
.os-split-txt{ max-width:52ch; }
.os-photo{ border-radius:var(--r4); overflow:hidden; box-shadow:var(--sh2); }
.os-photo img{ display:block; width:100%; height:100%; object-fit:cover; }

/* Vista previa de producto dentro de la narrativa: la misma superficie que
   el hero, para que se reconozca como la misma aplicación. */
.os-ui{
  background:var(--w); border:1px solid var(--bdr); border-radius:var(--r4);
  box-shadow:var(--sh2); padding:var(--s6); display:grid; gap:10px;
}
.os-ui-hd{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:12px; border-bottom:1px solid var(--bdr); margin-bottom:6px;
  font-size:var(--fs-sm);
}
.os-ui-hd b{ font-family:var(--f-serif); font-size:16px; color:var(--navy); }
.os-ui-hd span{ font-size:var(--fs-xs); letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:var(--t3); }
.os-say{
  display:flex; align-items:flex-start; gap:10px; padding:12px 14px;
  background:var(--bl); border-radius:var(--r2); font-size:14px; line-height:1.5; color:var(--t);
}
.os-quiet{ font-size:var(--fs-sm); color:var(--t3); line-height:1.6; }
.os-routes{ display:grid; gap:10px; margin-top:var(--s5); }

/* ── Tres pasos y preguntas frecuentes ───────────────────────────────────── */
.steps3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.4vw,32px); margin-top:clamp(32px,5vh,56px); }
.s3card{
  background:var(--w); border:1px solid var(--bdr); border-radius:var(--r3);
  padding:var(--s6); box-shadow:var(--sh);
  transition:transform var(--tr), box-shadow var(--tr);
}
.s3card:hover{ transform:translateY(-2px); box-shadow:var(--sh2); }
.s3ic{
  width:40px; height:40px; border-radius:var(--r2); display:grid; place-items:center;
  background:var(--bl); color:var(--blue); margin-bottom:var(--s4);
}
.ed-faq{ display:grid; gap:0; margin-top:clamp(28px,4vh,48px); }
.faq-it{
  padding:var(--s5) 0; border-bottom:1px solid var(--bdr);
  font-size:15px; line-height:1.6; color:var(--t2);
}
.faq-it:first-child{ border-top:1px solid var(--bdr); }
.ed-price{ font-family:var(--f-mono); font-size:13px; color:var(--t2); }

/* ── Cierre y pie ────────────────────────────────────────────────────────── */
.cta-band{
  border-radius:var(--r4); background:var(--navy); color:var(--w);
  padding:clamp(32px,5vw,64px); margin-block:clamp(40px,6vh,80px);
}
.cta-band .feat-h,.cta-band h2{ color:var(--w); }
.cta-p{ color:rgba(255,255,255,.76); font-size:var(--fs-lead); line-height:var(--lh-body); max-width:48ch; }
.ft{ background:var(--navy); color:rgba(255,255,255,.72); padding-block:clamp(40px,6vh,72px); }
.ft-grid{ display:grid; grid-template-columns:1.4fr repeat(3,minmax(0,1fr)); gap:clamp(24px,3vw,48px); }
.ft-brand{ font-family:var(--f-serif); font-size:22px; color:var(--w); }
.ft-tag{ margin-top:10px; font-size:var(--fs-sm); line-height:1.6; max-width:34ch; }
.ft a{ color:rgba(255,255,255,.72); transition:color var(--tr); }
.ft a:hover{ color:var(--w); }
.ft-contact{ font-size:var(--fs-sm); line-height:1.7; }

@media(max-width:980px){
  .ed-row,.os-two,.os-split{ grid-template-columns:1fr; }
  .os-split.rev .os-split-txt{ order:0; }
  .steps3{ grid-template-columns:1fr; }
  .ft-grid{ grid-template-columns:1fr 1fr; }
}
@media(max-width:600px){
  .ft-grid{ grid-template-columns:1fr; gap:var(--s6); }
}
@media(prefers-reduced-motion:reduce){
  .s3card:hover{ transform:none; }
  .ed-link:hover{ gap:7px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PORTAL DEL CLIENTE
   La arquitectura no se toca: mismas vistas, mismo menú, misma información.
   Lo que cambia es el ritmo — encabezados con jerarquía, filas que responden,
   secciones con aire y una sola forma de tarjeta en todo el portal.
   La pregunta que Inicio debe contestar de un vistazo sigue siendo la misma:
   dónde estoy y qué me toca ahora.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Encabezado de vista ─────────────────────────────────────────────────── */
.sh-ey{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:var(--track-eyebrow);
  text-transform:uppercase; color:var(--blue);
}
.sh-ttl{
  font-family:var(--f-serif); font-weight:600; font-size:clamp(26px,3vw,38px);
  line-height:var(--lh-title); letter-spacing:var(--track-tight); color:var(--t);
}
.sh-intro{ font-size:var(--fs-lead); line-height:var(--lh-body); color:var(--t2); max-width:56ch; }
.sh-meta{ font-size:var(--fs-sm); color:var(--t3); }
.sh-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; }

/* ── Secciones del expediente ────────────────────────────────────────────── */
.ed-sec{ margin-top:clamp(28px,4vh,48px); }
.ed-sec-hd{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4);
  padding-bottom:var(--s3); border-bottom:1px solid var(--bdr); margin-bottom:var(--s5);
}
.ed-sec-hd h2{
  font-family:var(--f-serif); font-weight:600; font-size:var(--fs-h3);
  letter-spacing:-.015em; color:var(--t);
}
.ed-sec-hd span{ font-size:var(--fs-sm); color:var(--t3); }

/* ── Tarjetas y filas ────────────────────────────────────────────────────── */
.sc{ background:var(--w); border:1px solid var(--bdr); box-shadow:var(--sh); }
.sc-hd{ display:flex; align-items:center; gap:var(--s3); }
.sc-name{ font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--t); }
.sc-id{ font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--t3); }
.sc-pill{
  display:inline-flex; align-items:center; min-height:26px; padding:0 12px;
  border-radius:var(--r-pill); background:var(--off2); color:var(--t2);
  font-size:var(--fs-xs); font-weight:700;
}
.hm-row{
  display:flex; align-items:center; gap:var(--s4); padding:var(--s4) var(--s5);
  border-radius:var(--r2);
  transition:background-color var(--tr), transform var(--tr);
}
.hm-row:hover{ background:var(--off); }
.hm-row:active{ transform:scale(.997); transition-duration:60ms; }
.hm-row-ic{ width:34px; height:34px; flex:none; display:grid; place-items:center; color:var(--blue); }
.hm-row-t{ font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--t); }
.hm-row-d{ font-size:var(--fs-sm); line-height:1.5; color:var(--t3); }
.hm-row-b{ margin-left:auto; font-size:var(--fs-sm); color:var(--t2); white-space:nowrap; }

/* ── Barra lateral: el destino activo se lee sin buscarlo ────────────────── */
.dside a,.dside button,.dside .bn{ border-radius:var(--r2); }
.dside .on,.dside [aria-current="page"]{ background:var(--bl); color:var(--blue); font-weight:600; }

/* ── Barra inferior (teléfono): objetivos que se aciertan con el pulgar ──── */
.bnav .bn{ min-height:var(--tap); border-radius:var(--r2); transition:color var(--tr), background-color var(--tr); }
.bnav .bn.on{ color:var(--blue); }

/* ── La acción que toca ahora ────────────────────────────────────────────── */
.ed-task{ border-radius:var(--r3); }
.ed-task .btn{ min-height:var(--ctl); }
.ed-overview{ border-radius:var(--r3); }

@media(prefers-reduced-motion:reduce){
  .hm-row:active{ transform:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESPACHO
   Mismos módulos, mismas tablas, mismas acciones. Lo que cambia es la
   legibilidad: cabeceras de tabla que se leen de un vistazo, filas con altura
   de trabajo, estados con un solo idioma de color y acciones que no se
   esconden. Pensado para la ventana real de un portátil.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Encabezados de módulo ───────────────────────────────────────────────── */
.nx-ey{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:var(--track-eyebrow);
  text-transform:uppercase; color:var(--t3);
}
.nx-h1{
  font-family:var(--f-sans); font-weight:700; font-size:26px;
  letter-spacing:-.022em; color:var(--t);
}
.nx-hd{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; }
.sec-t{ font-size:15px; font-weight:700; letter-spacing:-.01em; color:var(--t); }
.sub-t{ font-size:var(--fs-sm); color:var(--t2); }

/* ── Superficies ─────────────────────────────────────────────────────────── */
.nx-card,.panelc{
  background:var(--w); border:1px solid var(--bdr); border-radius:var(--r3);
  box-shadow:var(--sh);
}
.panelc-t{ font-size:14px; font-weight:700; letter-spacing:-.01em; color:var(--t); }
.panelc-link{ font-size:var(--fs-sm); font-weight:600; color:var(--blue); }

/* ── Tablas: densidad de trabajo, no de folleto ──────────────────────────── */
.nx-th{
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--t3); white-space:nowrap;
}
.nx-card table{ width:100%; border-collapse:collapse; }
.nx-card tbody tr{ transition:background-color var(--dur-1) linear; }
.nx-card tbody tr:hover{ background:var(--off); }
.nx-card td{ font-size:13.5px; color:var(--t2); }
.kv-k{ font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--t3); }
.kv-v{ font-size:14px; font-weight:600; color:var(--t); }

/* ── Botones del despacho ────────────────────────────────────────────────── */
.nx-btn,.top-new,.tk-go{
  border-radius:var(--r-pill); min-height:var(--tap);
  font-weight:600; letter-spacing:-.01em;
  transition:transform var(--tr), box-shadow var(--tr), background-color var(--tr),
             border-color var(--tr), color var(--tr);
}
.nx-btn:hover,.top-new:hover{ transform:translateY(-1px); }
.nx-btn:active,.top-new:active{ transform:translateY(0) scale(.985); transition-duration:60ms; }

/* ── Estados y etapas: el mismo idioma que el portal ─────────────────────── */
.etp-pill,.b,.bl,.b-soft,.b-navy{ border-radius:var(--r-pill); font-weight:700; letter-spacing:.01em; }

/* ── Documentos del expediente ───────────────────────────────────────────── */
.doc-f{ border-radius:var(--r2); transition:background-color var(--tr); }
.doc-f:hover{ background:var(--off); }
.doc-n{ font-size:14px; font-weight:600; color:var(--t); }
.doc-ic{ border-radius:var(--r); }
.doc-acts{ display:flex; gap:8px; flex-wrap:wrap; }

/* ── Vacíos: dicen qué falta, no solo que no hay nada ────────────────────── */
.empty{
  border:1px dashed var(--bdr2); border-radius:var(--r3); background:var(--w);
  padding:var(--s8) var(--s6); text-align:center; color:var(--t2); font-size:14.5px;
}
.empty-d{ margin-top:6px; font-size:var(--fs-sm); color:var(--t3); }

/* ── Rejilla del expediente ──────────────────────────────────────────────── */
.bo-caso-grid{ display:grid; gap:var(--s5); }
@media(min-width:1180px){ .bo-caso-grid{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); align-items:start; } }

@media(prefers-reduced-motion:reduce){
  .nx-btn:hover,.top-new:hover,.nx-btn:active,.top-new:active{ transform:none; }
}