/* ══════════════════════════════════════════════════════════════════════
   condor.ai — hoja compartida del rediseño (11-ago-2026)

   La usan el inicio y las seis subpáginas. Vive en un solo archivo a
   propósito: con una copia por página, a la tercera edición ya no son el
   mismo sitio.

   DIRECCIÓN: empresa de servicios de software seria, no agencia creativa.
   · Radios de 8-12px, no cápsulas.
   · El degradado de marca (azul → rojo) es ACENTO: filete de la barra,
     marca de los rótulos, punto activo del hero. Nunca relleno grande.
   · Retícula visible: reglas de 1px y secciones numeradas.
   · Tipografía neutra (Switzer + Satoshi); la jerarquía la hacen el peso y
     el tamaño, no el color.
   · Trato de usted.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --papel:#fff; --papel-2:#f5f7fa; --papel-3:#eef1f6;
  --navy:#0b1437; --navy-2:#070b1f; --navy-3:#16224d;
  --azul:#2747ff; --rojo:#ff3b4e;
  --grad:linear-gradient(90deg,#2747ff 0%,#7a5bff 52%,#ff3b4e 100%);
  --ink:#0b1437; --ink-2:#43506f; --ink-3:#78849f;
  --linea:#e2e7ef; --linea-2:#cfd6e4;
  --on-navy:#e9eefb; --on-navy-2:#a3b0d0; --on-navy-3:#63719a;
  --r:8px; --r-lg:12px;
  --max:1200px; --gutter:clamp(20px,4.5vw,52px);
  --display:"Switzer","Satoshi",system-ui,sans-serif;
  --body:"Satoshi",system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--ink);font-family:var(--body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* El tracking es específico del tamaño: negativo al crecer, levemente
   positivo en texto chico. El interlineado va al revés que el tamaño. */
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;text-wrap:balance;font-optical-sizing:auto}
h1{letter-spacing:-.034em;line-height:1.05}
h2{letter-spacing:-.026em;line-height:1.12}
h3{letter-spacing:-.014em;line-height:1.3}
h4{letter-spacing:-.004em;line-height:1.4}
p{margin:0;line-height:1.65;color:var(--ink-2)}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
.seccion{padding:clamp(64px,8vw,116px) 0;border-top:1px solid var(--linea)}
.estrecho{max-width:920px}

/* ── Rótulos ────────────────────────────────────────────────────────── */
.rotulo{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.rotulo::before{content:"";width:26px;height:2px;background:var(--grad);flex:none;border-radius:2px}
.oscura .rotulo{color:var(--on-navy-3)}

/* ── Botones ────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:var(--r);
  font-family:var(--body);font-weight:700;font-size:15px;border:1px solid transparent;cursor:pointer;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.btn-primario{background:var(--navy);color:#fff}
.btn-linea{background:transparent;color:var(--ink);border-color:var(--linea-2)}
.oscura .btn-linea{color:#fff;border-color:rgba(255,255,255,.26)}
.oscura .btn-primario{background:#fff;color:var(--navy)}
@media(hover:hover) and (pointer:fine){
  .btn-primario:hover{background:var(--navy-3)}
  .oscura .btn-primario:hover{background:var(--on-navy)}
  .btn-linea:hover{border-color:var(--ink);background:var(--papel-2)}
  .oscura .btn-linea:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.5)}
}
/* La respuesta va en el pointer-down y es instantánea. */
.btn:active{transform:scale(.985);transition:transform 90ms ease-out}

/* ── Barra superior ─────────────────────────────────────────────────── */
.topbar{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.86);
  backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6)}
.topbar::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad)}
/* Borde de scroll en vez de divisor duro: el contenido se desvanece al pasar
   bajo la barra. */
.topbar::after{content:"";position:absolute;left:0;right:0;top:100%;height:18px;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.85),transparent)}
.topbar .wrap{display:flex;align-items:center;gap:22px;padding-block:15px}
.topbar img.logo{height:28px;width:auto}
.menu{display:flex;gap:2px;margin-left:auto;align-items:center}
.menu a{padding:9px 13px;border-radius:6px;font-size:14.5px;font-weight:500;color:var(--ink-2)}
.menu a:hover{color:var(--ink);background:var(--papel-2)}
.menu a[aria-current]{color:var(--ink);background:var(--papel-3)}
@media(max-width:1040px){.menu{display:none}}

/* ── Encabezado de subpágina ────────────────────────────────────────── */
.cabecera{padding:clamp(44px,6vw,80px) 0 clamp(36px,5vw,60px)}
.cabecera h1{font-size:clamp(34px,5.2vw,62px);margin-top:20px;max-width:19ch}
.cabecera .bajada{margin-top:22px;font-size:clamp(16px,1.4vw,19px);max-width:60ch}
.migas{font-size:13px;color:var(--ink-3)}
.migas a:hover{color:var(--ink)}
.volver{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink-3)}
.volver::before{content:"←"}
.volver:hover{color:var(--ink)}

/* ── Inicio: resumen de secciones ───────────────────────────────────── */
.hero{padding:clamp(52px,7vw,96px) 0 clamp(44px,6vw,80px)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,5vw,72px);align-items:center}
.slides{position:relative;min-height:1px}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s var(--ease)}
.slide.on{position:relative;opacity:1;visibility:visible}
.hero h1{font-size:clamp(36px,5.4vw,64px)}
.hero .bajada{margin-top:20px;font-size:clamp(16px,1.4vw,18.5px);max-width:46ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.puntos{display:flex;gap:8px;margin-top:36px}
.punto{width:34px;height:3px;border-radius:2px;background:var(--linea-2);border:none;padding:0;
  cursor:pointer;transition:background .25s var(--ease)}
.punto[aria-selected="true"]{background:var(--grad)}
.hero-marco{border:1px solid var(--linea);border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;
  background:var(--papel-2)}
.hero-marco img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.1}
.datos{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);overflow:hidden}
.dato{background:var(--papel);padding:18px}
.dato b{display:block;font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-.03em}
.dato span{font-size:12px;color:var(--ink-3)}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}}

/* Tarjetas de resumen: cada una es la puerta a su subpágina. */
.vistazo{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--r-lg);overflow:hidden;margin-top:38px}
.vista{background:var(--papel);padding:28px;display:flex;flex-direction:column;gap:10px;
  transition:background .18s var(--ease)}
.vista .n{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--ink-3)}
.vista h3{font-size:20px}
.vista p{font-size:14.5px;flex:1}
.vista .ir{font-size:14px;font-weight:700;color:var(--ink);display:inline-flex;gap:8px;align-items:center}
.vista .ir::after{content:"→";transition:transform .18s var(--ease)}
@media(hover:hover) and (pointer:fine){
  .vista:hover{background:var(--papel-2)}
  .vista:hover .ir::after{transform:translateX(3px)}}
@media(max-width:900px){.vistazo{grid-template-columns:1fr}}

/* ── Carrusel de clientes ───────────────────────────────────────────── */
.clientes{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  padding:30px 0;overflow:hidden;background:var(--papel-2)}
.clientes .titulo{text-align:center;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:22px}
/* La pista lleva la lista DUPLICADA y avanza exactamente 50%: al terminar,
   el segundo juego está donde estaba el primero y el salto es invisible. */
.pista{display:flex;width:max-content;animation:desfile 34s linear infinite}
.clientes:hover .pista{animation-play-state:paused}
.pista span{font-family:var(--display);font-weight:700;font-size:clamp(17px,2.2vw,24px);
  letter-spacing:-.025em;color:var(--ink-3);padding-inline:clamp(24px,4vw,52px);white-space:nowrap;opacity:.72}
@keyframes desfile{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Bloques de contenido ───────────────────────────────────────────── */
.dos-col{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,72px);align-items:start}
.dos-col h2{font-size:clamp(28px,3.8vw,46px)}
.dos-col p+p{margin-top:16px}
.hechos{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--r-lg);overflow:hidden;margin-top:34px}
.hecho{background:var(--papel);padding:24px}
.hecho b{display:block;font-family:var(--display);font-size:clamp(20px,2.4vw,28px);font-weight:800;
  letter-spacing:-.03em;line-height:1.15}
.hecho span{font-size:13.5px;color:var(--ink-3);display:block;margin-top:6px}
@media(max-width:900px){.dos-col{grid-template-columns:1fr}}

.cab{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap;margin-bottom:40px}
.cab h2{font-size:clamp(28px,4vw,50px);max-width:20ch}
.oscura{background:var(--navy);color:var(--on-navy);border-top:0}
.oscura h1,.oscura h2,.oscura h3{color:#fff}
.oscura p{color:var(--on-navy-2)}

/* ── Productos ──────────────────────────────────────────────────────── */
.prod{border-top:1px solid var(--linea)}
.prod:last-of-type{border-bottom:1px solid var(--linea)}
.prod summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:20px;padding:28px 2px}
.prod summary::-webkit-details-marker{display:none}
.prod .num{font-family:var(--display);font-size:13px;font-weight:700;color:var(--ink-3);letter-spacing:.06em}
.prod .tit{font-family:var(--display);font-size:clamp(19px,2.3vw,27px);font-weight:700;letter-spacing:-.02em}
.prod summary::after{content:"+";font-size:24px;color:var(--ink-3);font-weight:400;line-height:1;
  transition:transform .22s var(--ease),color .22s var(--ease)}
.prod[open] summary::after{transform:rotate(45deg);color:var(--azul)}
.prod .cuerpo{overflow:hidden}
.prod .interior{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;padding:0 2px 32px 52px}
.prod .interior ul{margin:14px 0 0;padding-left:18px;color:var(--ink-2);font-size:15px;line-height:1.85}
.prod .marca-lat{border-left:2px solid var(--linea);padding-left:20px}
.prod .marca-lat b{font-family:var(--display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:8px}
.prod .marca-lat p{font-size:14.5px}
@media(max-width:820px){.prod .interior{grid-template-columns:1fr;padding-left:2px}}

/* ── Equipo ─────────────────────────────────────────────────────────── */
.oficina-dos{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px}
.oficina-dos figure{margin:0}
.oficina-dos .marco{border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(255,255,255,.1);
  aspect-ratio:4/3;background:var(--navy-3)}
.oficina-dos img{width:100%;height:100%;object-fit:cover}
/* Pie de foto: sin él, dos imágenes seguidas son decoración. Con él, cada
   una dice algo que el texto de la sección no dice. */
.oficina-dos figcaption{margin-top:12px;font-size:14px;line-height:1.55;color:var(--on-navy-2)}
.oficina-dos figcaption b{color:#fff;font-weight:700;display:block;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px}
@media(max-width:760px){.oficina-dos{grid-template-columns:1fr}}

.equipo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.persona{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg);overflow:hidden;transition:border-color .22s var(--ease),background .22s var(--ease)}
.persona .retrato{aspect-ratio:1/1;overflow:hidden;background:var(--navy-3)}
.persona .retrato img{width:100%;height:100%;object-fit:cover;object-position:center 20%;
  transition:transform .4s var(--ease)}
.persona .txt{padding:20px}
.persona h3{font-size:19px}
.persona .rol{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-navy-3);margin-top:6px}
/* `grid-template-rows` de 0fr a 1fr permite animar hasta altura automática,
   cosa que `height:auto` no puede. En táctil NO hay hover: bajo
   (hover:none) el bloque queda siempre visible para que nadie se pierda el
   enlace por usar el teléfono. */
.persona .mas{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
.persona .mas>div{overflow:hidden}
.persona .mas p{font-size:14.5px;padding-top:14px}
.persona .mas .ver{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;
  font-weight:700;color:#fff}
.persona .mas .ver::after{content:"→"}
@media(hover:hover) and (pointer:fine){
  .persona:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24)}
  .persona:hover .mas,.persona:focus-within .mas{grid-template-rows:1fr}
  .persona:hover .retrato img{transform:scale(1.03)}}
@media(hover:none){.persona .mas{grid-template-rows:1fr}}
@media(max-width:900px){.equipo-grid{grid-template-columns:1fr}}

/* ── Proceso y referencias ──────────────────────────────────────────── */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--r-lg);overflow:hidden;margin-top:38px}
.paso{background:var(--papel);padding:30px}
.paso .n{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--ink-3)}
.paso h3{font-size:20px;margin:14px 0 10px}
.paso p{font-size:14.5px}
@media(max-width:820px){.pasos{grid-template-columns:1fr}}

.testis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.testi{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg);padding:26px}
.testi p{font-size:15.5px;color:var(--on-navy);line-height:1.6}
.testi .quien{margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.testi .quien b{font-size:14px;color:#fff;font-weight:700;display:block}
.testi .quien span{font-size:12.5px;color:var(--on-navy-3)}
@media(max-width:900px){.testis{grid-template-columns:1fr}}

/* ── Contacto ───────────────────────────────────────────────────────── */
.vias{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--r-lg);overflow:hidden;margin-top:8px}
.via{background:var(--papel);padding:30px;display:flex;flex-direction:column;gap:10px}
.via .n{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--ink-3)}
.via h3{font-size:20px}
.via p{font-size:14.5px;flex:1}
.via .valor{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.02em;
  word-break:break-word}
@media(max-width:900px){.vias{grid-template-columns:1fr}}

/* ── Cierre ─────────────────────────────────────────────────────────── */
.cierre{text-align:center}
.cierre .rotulo{justify-content:center}
.cierre h2{font-size:clamp(28px,4.2vw,50px);max-width:19ch;margin-inline:auto}
.cierre p{margin:18px auto 0;max-width:54ch}
.cierre .btns{display:flex;gap:12px;justify-content:center;margin-top:32px;flex-wrap:wrap}

/* ── Pie ────────────────────────────────────────────────────────────── */
.pie{background:var(--navy-2);color:var(--on-navy);padding:clamp(52px,7vw,84px) 0 30px}
.pie-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.pie img.logo{height:26px;filter:brightness(0) invert(1);opacity:.9}
.pie h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-navy-3);
  font-family:var(--body);font-weight:700;margin-bottom:14px}
.pie a{display:block;padding:5px 0;color:var(--on-navy-2);font-size:14.5px}
.pie a:hover{color:#fff}
.legal{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--on-navy-3)}
@media(max-width:900px){.pie-cols{grid-template-columns:1fr 1fr}}

/* ── Entrada ────────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.rv.vis{opacity:1;transform:none}

/* ── Accesibilidad: tres señales independientes ─────────────────────── */
@media(prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .pista{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .persona:hover .retrato img{transform:none}
  .slide{transition:none}
}
@media(prefers-reduced-transparency:reduce){
  .topbar{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--linea)}
  .topbar::after{display:none}
}
@media(prefers-contrast:more){
  :root{--linea:#b9c2d4;--linea-2:#8f9ab3;--ink-2:#26314f;--ink-3:#525e7d;--on-navy-2:#d3ddf7}
  .persona,.testi{border-color:rgba(255,255,255,.32)}
}

/* ══════════════════════════════════════════════════════════════════════
   Filas verticales — el patrón del INICIO
   ──────────────────────────────────────────────────────────────────────
   El inicio es un resumen que se lee de arriba abajo, así que su contenido
   va en filas a ancho completo separadas por una regla de 1px, no en
   tarjetas dentro de una cuadrícula. Con cuadrícula, tres columnas de
   texto corto se leen como una tabla y obligan al ojo a saltar en zigzag;
   en fila, cada ítem tiene el ancho que necesita y el orden es evidente.

   Las cuadrículas siguen usándose en las SUBPÁGINAS, donde el contenido es
   comparable entre sí y sí conviene verlo en paralelo.
   ══════════════════════════════════════════════════════════════════════ */
.lista{border-top:1px solid var(--linea);margin-top:34px}
.oscura .lista{border-top-color:rgba(255,255,255,.12)}
.fila{display:grid;grid-template-columns:56px minmax(0,1fr) minmax(0,300px);
  gap:clamp(18px,3vw,44px);align-items:start;padding:clamp(24px,3.2vw,38px) 0;
  border-bottom:1px solid var(--linea)}
.oscura .fila{border-bottom-color:rgba(255,255,255,.12)}
.fila .n{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.08em;
  color:var(--ink-3);padding-top:6px}
.oscura .fila .n{color:var(--on-navy-3)}
.fila h3{font-size:clamp(19px,2.1vw,24px)}
.fila .desc{margin-top:10px;font-size:15.5px;max-width:62ch}
.fila .lado{font-size:14.5px;color:var(--ink-3);padding-top:6px}
.oscura .fila .lado{color:var(--on-navy-2)}
.fila .lado b{display:block;font-family:var(--display);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.oscura .fila .lado b{color:var(--on-navy-3)}
.fila .valor{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.02em;
  word-break:break-word;display:inline-block;margin-top:10px}
@media(max-width:860px){
  .fila{grid-template-columns:1fr;gap:10px}
  .fila .n{padding-top:0}
  .fila .lado{padding-top:4px}
}

/* Fila de persona: retrato chico a la izquierda, en la misma vertical. */
.fila-persona{display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,300px);
  gap:clamp(18px,3vw,44px);align-items:start;padding:clamp(22px,3vw,34px) 0;
  border-bottom:1px solid rgba(255,255,255,.12)}
.fila-persona .retrato-s{width:96px;height:96px;border-radius:var(--r-lg);overflow:hidden;
  background:var(--navy-3);border:1px solid rgba(255,255,255,.12)}
.fila-persona .retrato-s img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.fila-persona .rol{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-navy-3);margin-top:6px}
.fila-persona p{margin-top:10px;font-size:15px}
.fila-persona .ver{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:14px;
  font-weight:700;color:#fff}
.fila-persona .ver::after{content:"→"}
@media(max-width:860px){
  .fila-persona{grid-template-columns:72px minmax(0,1fr)}
  .fila-persona .retrato-s{width:72px;height:72px}
  .fila-persona .lado{grid-column:1/-1}
}

/* Cifras de la compañía, en línea y sin cajas. */
.cifras{display:flex;flex-wrap:wrap;gap:clamp(24px,5vw,64px);margin-top:30px;
  padding-top:26px;border-top:1px solid var(--linea)}
.cifra b{display:block;font-family:var(--display);font-size:clamp(22px,2.6vw,30px);font-weight:800;
  letter-spacing:-.03em;line-height:1.1}
.cifra span{font-size:13.5px;color:var(--ink-3)}

/* Citas del inicio: una debajo de otra, sin recuadro. */
.citas{margin-top:34px;border-top:1px solid rgba(255,255,255,.12)}
.cita{padding:clamp(22px,3vw,32px) 0;border-bottom:1px solid rgba(255,255,255,.12);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,260px);gap:clamp(18px,3vw,44px);
  align-items:start}
.cita p{font-size:clamp(16px,1.7vw,19px);color:#fff;line-height:1.55;max-width:60ch}
.cita .quien b{display:block;font-size:14px;color:#fff;font-weight:700}
.cita .quien span{font-size:12.5px;color:var(--on-navy-3)}
@media(max-width:860px){.cita{grid-template-columns:1fr;gap:12px}}

/* ══════════════════════════════════════════════════════════════════════
   NADA TABULADO — corrección del 11-ago-2026
   ──────────────────────────────────────────────────────────────────────
   Todos los bloques que eran cuadrículas con celdas y bordes de 1px se
   leían como una tabla. Acá pasan a ser listas verticales: cada ítem a
   ancho completo, separado del siguiente por una sola regla horizontal.
   Se sobreescriben las reglas de más arriba a propósito, para no tener que
   tocar el marcado de las diez páginas.
   ══════════════════════════════════════════════════════════════════════ */

/* Filas del inicio: número + contenido, sin columna lateral. */
.fila{grid-template-columns:56px minmax(0,1fr)}
.fila-persona{grid-template-columns:96px minmax(0,1fr)}
@media(max-width:860px){.fila{grid-template-columns:1fr}}

/* Cifras del hero: una línea, sin celdas ni marco. */
.datos{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,44px);background:none;border:0;
  border-top:1px solid var(--linea);border-radius:0;padding-top:20px;margin-top:20px}
.dato{background:none;padding:0}

/* Hechos de la compañía: lista vertical con una regla entre cada uno. */
.hechos{display:block;background:none;border:0;border-top:1px solid var(--linea);
  border-radius:0;margin-top:30px}
.hecho{background:none;padding:18px 0;border-bottom:1px solid var(--linea);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
.hecho b{font-size:clamp(18px,2vw,22px)}
.hecho span{margin-top:0}

/* Etapas del proceso: una debajo de otra. */
.pasos{display:block;background:none;border:0;border-top:1px solid var(--linea);
  border-radius:0;margin-top:34px}
.paso{background:none !important;padding:clamp(22px,3vw,32px) 0;
  border-bottom:1px solid var(--linea)}
.oscura .pasos{border-top-color:rgba(255,255,255,.12)}
.oscura .paso{border-bottom-color:rgba(255,255,255,.12)}
.paso h3{margin:10px 0 8px}
.paso p{max-width:70ch}

/* Referencias: citas apiladas, sin recuadro. */
.testis{display:block;border-top:1px solid rgba(255,255,255,.12);margin-top:34px}
.testi{background:none;border:0;border-bottom:1px solid rgba(255,255,255,.12);
  border-radius:0;padding:clamp(22px,3vw,32px) 0}
.testi p{font-size:clamp(16px,1.7vw,19px);max-width:62ch}
.testi .quien{border-top:0;padding-top:12px;margin-top:12px}

/* Vías de contacto: una debajo de otra. */
.vias{display:block;background:none;border:0;border-top:1px solid var(--linea);
  border-radius:0;margin-top:8px}
.via{background:none;padding:clamp(22px,3vw,32px) 0;border-bottom:1px solid var(--linea);
  display:block}
.via p{max-width:70ch;margin-top:10px}
.via .valor,.via .btn{margin-top:16px}

/* Tarjetas de personas en la subpágina: fila con retrato a la izquierda,
   no una cuadrícula de tres columnas. */
.equipo-grid{display:block;border-top:1px solid rgba(255,255,255,.12)}
.persona{background:none;border:0;border-bottom:1px solid rgba(255,255,255,.12);
  border-radius:0;display:grid;grid-template-columns:120px minmax(0,1fr);
  gap:clamp(18px,3vw,36px);align-items:start;padding:clamp(22px,3vw,32px) 0}
.persona .retrato{aspect-ratio:1/1;width:120px;border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.12)}
.persona .txt{padding:0}
.persona .mas{grid-template-rows:1fr}   /* en fila ya no hace falta ocultarlo */
@media(hover:hover) and (pointer:fine){
  .persona:hover{background:none;border-color:rgba(255,255,255,.24)}
  .persona:hover .retrato img{transform:none}
}
@media(max-width:860px){
  .persona{grid-template-columns:84px minmax(0,1fr)}
  .persona .retrato{width:84px}
}

/* La cuadrícula de vistazo ya no se usa en el inicio; se neutraliza por si
   quedara alguna referencia. */
.vistazo{display:block;background:none;border:0;border-radius:0}
.vista{background:none;padding:22px 0;border-bottom:1px solid var(--linea)}

/* ══════════════════════════════════════════════════════════════════════
   ESTILO LANDING — corrección final del 11-ago-2026
   ──────────────────────────────────────────────────────────────────────
   Ni celdas ni listas con reglas. Lo que separa un bloque del siguiente es
   el AIRE y el salto de escala, no una línea. Es la diferencia entre un
   documento y una landing: el documento usa reglas porque su contenido es
   comparable; una landing usa espacio porque su contenido se lee de corrido.
   ══════════════════════════════════════════════════════════════════════ */

/* Fuera todas las reglas horizontales de los bloques del inicio. */
.lista,.fila,.fila-persona,.hechos,.hecho,.pasos,.paso,.testis,.testi,.vias,.via,.cifras,.citas,.cita,.datos{
  border:0 !important;background:none !important}

.seccion{padding:clamp(80px,11vw,164px) 0}

/* Productos y proceso: bloques grandes, con el número como cifra fantasma. */
.lista{margin-top:clamp(36px,5vw,64px);display:grid;gap:clamp(40px,6vw,84px)}
.fila{display:grid;grid-template-columns:clamp(64px,7vw,104px) minmax(0,1fr);
  gap:clamp(20px,3vw,40px);align-items:start;padding:0}
.fila .n{font-family:var(--display);font-size:clamp(38px,5.5vw,72px);font-weight:800;
  letter-spacing:-.05em;line-height:.9;color:transparent;padding:0;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;opacity:.9}
.fila h3{font-size:clamp(23px,3vw,36px);letter-spacing:-.028em}
.fila .desc{margin-top:14px;font-size:clamp(16px,1.6vw,18.5px);max-width:64ch}
.fila .valor{font-size:19px;margin-top:14px}
@media(max-width:860px){
  .fila{grid-template-columns:1fr;gap:8px}
  .fila .n{font-size:44px}
}

/* Equipo: retratos grandes uno junto a otro, sin marco ni regla. Es una
   galería de fotos, no una tabla de datos. */
.lista:has(.fila-persona){display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3.5vw,44px)}
.fila-persona{display:block;padding:0}
.fila-persona .retrato-s{width:100%;height:auto;aspect-ratio:4/5;border-radius:var(--r-lg);
  overflow:hidden;border:0}
.fila-persona h3{font-size:clamp(19px,2vw,23px);margin-top:18px}
.fila-persona p{font-size:15px;margin-top:10px}
@media(max-width:860px){.lista:has(.fila-persona){grid-template-columns:1fr;gap:36px}}

/* Cifras del hero y hechos: en línea, con aire, sin marco. */
.datos{padding-top:26px;margin-top:24px;gap:clamp(26px,5vw,56px)}
.hechos{display:flex;flex-wrap:wrap;gap:clamp(26px,5vw,56px);margin-top:34px}
.hecho{padding:0;display:block}
.cifras{padding-top:0;margin-top:clamp(32px,4vw,52px)}

/* Etapas: el mismo bloque grande que los productos. */
.pasos{display:grid;gap:clamp(40px,6vw,84px);margin-top:clamp(36px,5vw,64px)}
.paso{padding:0 !important;max-width:68ch}
.paso .n{font-family:var(--display);font-size:clamp(34px,5vw,64px);font-weight:800;
  letter-spacing:-.05em;line-height:.9;color:transparent;display:block;margin-bottom:14px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;opacity:.9}
.paso h3{font-size:clamp(22px,2.8vw,32px);margin:0 0 12px}
.paso p{font-size:clamp(15.5px,1.5vw,17.5px)}

/* Referencias: la cita manda, grande y con aire. */
.testis,.citas{display:grid;gap:clamp(36px,5vw,68px);margin-top:clamp(36px,5vw,64px)}
.testi,.cita{padding:0}
.testi p,.cita p{font-size:clamp(19px,2.4vw,28px);line-height:1.4;letter-spacing:-.02em;
  max-width:26ch;font-family:var(--display);font-weight:500}
.cita{grid-template-columns:minmax(0,1fr)}
.testi .quien,.cita .quien{margin-top:16px;padding-top:0}
@media(min-width:900px){
  .testis,.citas{grid-template-columns:repeat(3,1fr)}
  .testi p,.cita p{max-width:none}
}

/* Vías de contacto: bloques con aire, el número como cifra fantasma. */
.vias{display:grid;gap:clamp(36px,5vw,64px);margin-top:clamp(32px,4vw,52px)}
.via{padding:0 !important}
.via .n{font-family:var(--display);font-size:clamp(30px,4vw,52px);font-weight:800;
  letter-spacing:-.05em;color:transparent;display:block;margin-bottom:12px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;opacity:.9}
.via h3{font-size:clamp(21px,2.4vw,28px)}
@media(min-width:900px){.vias{grid-template-columns:repeat(3,1fr)}}

/* Personas de la subpágina: retrato grande arriba, texto debajo. */
.equipo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.5vw,44px);
  border:0}
.persona{display:block;padding:0;border:0 !important;background:none !important}
.persona .retrato{width:100%;aspect-ratio:4/5;border:0;border-radius:var(--r-lg)}
.persona .txt{padding:18px 0 0}
@media(max-width:860px){.equipo-grid{grid-template-columns:1fr;gap:36px}}

/* La foto del hero deja de tener marco y se une a las cifras. */
.hero-marco{border:0;border-radius:var(--r-lg);background:none}

/* Listas de puntos dentro de un producto, ya sin acordeón. */
.puntos-lista{margin:18px 0 0;padding-left:20px;color:var(--ink-2);
  font-size:clamp(15px,1.5vw,16.5px);line-height:1.9;max-width:62ch}
.aplica{margin-top:16px;font-size:15px;color:var(--ink-3);max-width:62ch}
.aplica b{font-family:var(--display);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-right:8px}

/* ── Iconos y marca de fila ─────────────────────────────────────────── */
/* El icono va junto al número, en la misma columna: acompaña al bloque sin
   pelearle el peso al titular. Hereda `currentColor`, así funciona igual
   sobre papel y sobre navy sin una variante por tema. */
.marca-fila{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.ico{width:clamp(26px,2.6vw,34px);height:clamp(26px,2.6vw,34px);color:var(--azul);
  flex:none;transition:transform .4s var(--ease)}
.oscura .ico{color:var(--on-navy-2)}
.marca-fila .n{font-family:var(--display);font-size:clamp(30px,4.2vw,54px);font-weight:800;
  letter-spacing:-.05em;line-height:.9;color:transparent;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;opacity:.9}
/* El icono entra dibujándose: llega un poco girado y se endereza. Es el
   único movimiento que no es opacidad, y dura menos de 400 ms. */
.rv .ico{transform:rotate(-8deg) scale(.86)}
.rv.vis .ico{transform:none}
@media(max-width:860px){
  .marca-fila{flex-direction:row;align-items:center;gap:14px}
}

/* La cifra que cuenta necesita ancho estable, o el bloque salta mientras
   sube el número. */
.dato b[data-contar]{font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){
  .rv .ico,.rv.vis .ico{transform:none !important}
  .rv{transition-delay:0ms !important}
}

/* ══════════════════════════════════════════════════════════════════════
   Carrusel de sitios entregados (coverflow)
   ──────────────────────────────────────────────────────────────────────
   La tarjeta central manda; las laterales se alejan en Z, se inclinan y se
   atenúan. La profundidad es lo que ordena la lectura, así no hace falta un
   marco que grite cuál es la activa.

   Se anima solo `transform` y `opacity`, que son las dos propiedades que el
   compositor puede mover sin recalcular diseño. Con `left` o `width` esto
   iría a tirones en un teléfono.
   ══════════════════════════════════════════════════════════════════════ */
.sitios{margin-top:clamp(28px,4vw,44px);position:relative}
.sitios-pista{position:relative;height:clamp(310px,34vw,400px);perspective:1400px;
  transform-style:preserve-3d}
.sitio{position:absolute;top:0;left:50%;width:min(290px,74vw);
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:0 24px 60px -28px rgba(11,20,55,.42);
  transition:transform .55s var(--ease),opacity .55s var(--ease),filter .55s var(--ease);
  will-change:transform,opacity}
.oscura .sitio{background:var(--navy-3);border-color:rgba(255,255,255,.12)}
.sitio .captura{aspect-ratio:16/10;overflow:hidden;background:var(--papel-2)}
.sitio .captura img{width:100%;height:100%;object-fit:cover;object-position:top center}
.sitio-txt{padding:16px 18px 20px}
.sitio-tipo{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:transparent;background:var(--grad);
  -webkit-background-clip:text;background-clip:text}
.sitio h4{font-size:17px;margin:7px 0 6px}
.sitio p{font-size:13.5px;line-height:1.5}

/* Posición respecto de la tarjeta activa. El JS pone data-pos. */
.sitio[data-pos="0"]{transform:translateX(-50%) translateZ(0) scale(1);opacity:1;z-index:5}
.sitio[data-pos="1"],.sitio[data-pos="-1"]{opacity:.62;z-index:4;filter:saturate(.8)}
.sitio[data-pos="1"]{transform:translateX(-2%) translateZ(-150px) rotateY(-16deg) scale(.94)}
.sitio[data-pos="-1"]{transform:translateX(-98%) translateZ(-150px) rotateY(16deg) scale(.94)}
.sitio[data-pos="2"],.sitio[data-pos="-2"]{opacity:.3;z-index:3;filter:saturate(.6)}
.sitio[data-pos="2"]{transform:translateX(38%) translateZ(-300px) rotateY(-22deg) scale(.88)}
.sitio[data-pos="-2"]{transform:translateX(-138%) translateZ(-300px) rotateY(22deg) scale(.88)}
.sitio[data-pos="lejos"]{opacity:0;transform:translateX(-50%) translateZ(-420px) scale(.8);
  z-index:1;pointer-events:none}

.sitios-puntos{display:flex;gap:8px;justify-content:center;margin-top:20px}
.s-punto{width:26px;height:3px;border-radius:2px;border:none;padding:0;cursor:pointer;
  background:var(--linea-2);transition:background .25s var(--ease)}
.oscura .s-punto{background:rgba(255,255,255,.22)}
.s-punto[aria-selected="true"]{background:var(--grad)}

@media(max-width:640px){
  .sitios-pista{height:clamp(300px,88vw,360px)}
  .sitio[data-pos="2"],.sitio[data-pos="-2"]{opacity:0;pointer-events:none}
}
@media(prefers-reduced-motion:reduce){
  /* Sin coverflow ni giro automático: las tarjetas se apilan y se ven todas. */
  .sitios-pista{height:auto;perspective:none;display:grid;gap:18px;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
  .sitio{position:static;width:auto;transform:none !important;opacity:1 !important;
    filter:none !important;transition:none}
  .sitios-puntos{display:none}
}

/* ══════════════════════════════════════════════════════════════════════
   Pasada de estilo — referencia getnexor.ai (11-ago-2026)
   ──────────────────────────────────────────────────────────────────────
   Lo que se toma de ellos, sin cambiar nuestro embudo ni el contenido:
   · fondo claro con dos tonos alternados en vez de bandas oscuras pesadas
   · tarjetas de borde suave y sombra baja, no cajas de retícula
   · titulares más marcados (800) y más grandes
   · rótulos como píldora, no como texto suelto
   · botones sólidos de esquina más redonda

   La prioridad declarada fue el MÓVIL. Todo lo de abajo se probó pensando
   en una pantalla de 360-390px, que es donde llega la mayoría del tráfico
   de una campaña de Meta.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --papel-2:#f7f8fa;
  --r:10px; --r-lg:16px;
  --sombra-suave:0 1px 2px rgba(11,20,55,.05), 0 8px 24px -12px rgba(11,20,55,.14);
}

/* Las secciones oscuras se aclaran a un navy mucho más suave: sobre móvil,
   dos bandas negras de pantalla completa seguidas se leen como un muro. */
.oscura{background:#0e1734}

/* Rótulo como píldora. */
.rotulo{background:var(--papel-2);border:1px solid var(--linea);border-radius:999px;
  padding:7px 14px 7px 10px;width:fit-content;font-size:11.5px}
.oscura .rotulo{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}

/* Titulares más marcados y algo más grandes, como en la referencia. */
h1,h2{font-weight:800}
.hero h1{font-size:clamp(33px,5.6vw,66px);letter-spacing:-.04em}
.cab h2,.dos-col h2{letter-spacing:-.032em}

/* Botones de esquina más redonda y con sombra baja. */
.btn{border-radius:999px;padding:14px 24px}
.btn-primario{box-shadow:0 8px 20px -10px rgba(11,20,55,.5)}

/* Tarjetas del carrusel con el borde suave y la sombra baja de la referencia. */
.sitio{border-radius:var(--r-lg);box-shadow:var(--sombra-suave)}

/* ── MÓVIL ─────────────────────────────────────────────────────────────
   Es donde llega el tráfico de las campañas, así que manda. */
@media(max-width:700px){
  .seccion{padding:56px 0}
  :root{--gutter:18px}

  /* El hero deja de competir consigo mismo: titular, texto, botones a ancho
     completo y recién después la foto. */
  .hero{padding:28px 0 40px}
  .hero-grid{gap:32px}
  .hero h1{font-size:31px;line-height:1.12}
  .hero .bajada{font-size:16px;margin-top:16px}
  .hero-cta{gap:10px;margin-top:24px}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
  .puntos{margin-top:26px}

  /* Las cifras del hero en una línea de tres, que caben. */
  .datos{gap:0;display:grid;grid-template-columns:repeat(3,1fr);padding-top:18px}
  .dato b{font-size:21px}
  .dato span{font-size:11px;line-height:1.3;display:block}

  /* Filas: el icono y el número se van arriba, en horizontal, y el texto
     ocupa todo el ancho. Con dos columnas a 360px el texto queda en una
     tira de 40 caracteres y se lee pésimo. */
  .fila{gap:12px}
  .fila .n,.marca-fila .n{font-size:30px}
  .fila h3{font-size:21px}
  .fila .desc{font-size:15.5px;margin-top:8px}
  .lista{gap:44px}

  /* Carrusel: una tarjeta a la vez, sin laterales asomando. En una pantalla
     angosta, las laterales recortadas se ven como un error de maquetación. */
  .sitios-pista{height:auto;min-height:0;perspective:none}
  .sitio{width:100%;position:relative;left:0;display:none}
  .sitio[data-pos="0"]{display:block;transform:none;opacity:1}
  .sitio[data-pos]{transform:none}
  .sitio[data-pos="1"],.sitio[data-pos="-1"],
  .sitio[data-pos="2"],.sitio[data-pos="-2"],
  .sitio[data-pos="lejos"]{display:none}
  .sitios-puntos{margin-top:16px}
  .s-punto{width:22px;height:4px}     /* objetivo táctil más cómodo */

  /* Equipo: una foto de oficina bajo la otra, con su pie. */
  .oficina-dos{gap:22px}
  .oficina-dos figure .marco{aspect-ratio:4/3}
  .lista:has(.fila-persona){gap:34px}
  .fila-persona .retrato-s{aspect-ratio:4/3}

  /* Citas: la tipografía baja lo justo para no partir palabras. */
  .testi p,.cita p{font-size:19px;line-height:1.4}

  /* Pie: dos columnas se aprietan; una sola se lee. */
  .pie-cols{grid-template-columns:1fr;gap:26px}
  .legal{flex-direction:column;gap:8px}

  /* Ningún botón por debajo del objetivo táctil recomendado. */
  .btn{min-height:48px;padding:13px 22px}
  .menu a,.pie a{min-height:44px;display:flex;align-items:center}
}

/* Pantallas muy angostas (360px y menos). */
@media(max-width:380px){
  .hero h1{font-size:28px}
  .dato b{font-size:19px}
  .fila h3{font-size:19.5px}
}

/* ══════════════════════════════════════════════════════════════════════
   Ajustes de móvil pedidos el 11-ago-2026
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:700px){
  /* 1 · El botón de la barra, chico y en UNA línea.
     `nowrap` es la parte que importa: sin él, "Agendar una reunión" se parte
     en dos y la barra crece de alto en cuanto el logo y el botón compiten
     por el ancho. Baja a 40px de alto, por debajo de los 48px del resto de
     los botones: es un elemento de barra, no la acción principal de la
     página, y esa sigue estando a ancho completo dentro del hero. */
  .topbar .btn{white-space:nowrap;font-size:13px;padding:0 14px;min-height:40px;
    border-radius:999px}
  .topbar .wrap{gap:12px;padding-block:11px}
  .topbar img.logo{height:24px}

  /* 2 · La foto de la oficina va ARRIBA del texto, y el titular queda
     debajo funcionando como su título. Es solo un cambio de orden visual:
     en el HTML el texto sigue primero, que es el orden correcto para un
     lector de pantalla y para quien navega con teclado. */
  .hero-grid > div:last-child{order:-1}
  .hero{padding-top:16px}
  .hero-marco{border-radius:var(--r-lg)}
  .hero-marco img{aspect-ratio:16/10}
  /* Las cifras se despegan de la foto y quedan bajo el bloque de texto. */
  .hero-grid > div:last-child .datos{margin-top:14px;padding-top:14px}
  .hero .rotulo{margin-top:4px}
}

/* ── Acceso al portal de clientes ───────────────────────────────────── */
/* Va en la barra, antes del CTA, y también en el pie. Es un enlace de
   servicio para quien YA es cliente: por eso no compite con "Agendar una
   reunión" — texto, no botón. Se mantiene visible en teléfono, donde el
   menú se oculta: si desapareciera ahí, un cliente que entra desde el
   celular no tendría por dónde. */
.portal-acceso{margin-left:auto;font-size:14px;font-weight:600;color:var(--ink-2);
  white-space:nowrap;padding:9px 12px;border-radius:999px;
  transition:color .16s var(--ease),background .16s var(--ease)}
.menu ~ .portal-acceso{margin-left:0}
.portal-acceso:hover{color:var(--ink);background:var(--papel-2)}
@media(max-width:700px){
  .portal-acceso{font-size:12.5px;padding:8px 6px;min-height:40px;display:flex;
    align-items:center}
}
@media(max-width:380px){
  /* A este ancho el botón manda: el portal se conserva en el pie. */
  .portal-acceso{display:none}
}

/* ══════════════════════════════════════════════════════════════════════
   Cajón lateral — SOLO teléfono
   ──────────────────────────────────────────────────────────────────────
   En móvil el menú de secciones estaba simplemente oculto: no había forma
   de llegar a las subpáginas salvo bajando hasta el pie. Ahora hay un
   cajón que entra desde la izquierda.
   ══════════════════════════════════════════════════════════════════════ */
.burger{display:none;width:42px;height:42px;border:0;background:none;padding:0;cursor:pointer;
  flex-direction:column;justify-content:center;gap:5px;align-items:center;border-radius:10px}
.burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .24s var(--ease),opacity .18s var(--ease)}
body.cajon-abierto .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.cajon-abierto .burger span:nth-child(2){opacity:0}
body.cajon-abierto .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.cortina{position:fixed;inset:0;z-index:80;background:rgba(11,20,55,.45);
  opacity:0;transition:opacity .28s var(--ease)}
body.cajon-abierto .cortina{opacity:1}

.cajon{position:fixed;top:0;left:0;bottom:0;z-index:90;width:min(300px,84vw);
  background:var(--papel);padding:16px 18px 28px;display:flex;flex-direction:column;gap:2px;
  box-shadow:0 30px 80px rgba(11,20,55,.34);overflow-y:auto;
  transform:translateX(-100%);transition:transform .28s var(--ease)}
body.cajon-abierto .cajon{transform:none}
.cajon-cab{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cajon-cab .logo{height:26px}
.cajon .cerrar{border:0;background:none;font-size:30px;line-height:1;color:var(--ink-3);
  cursor:pointer;width:44px;height:44px;border-radius:10px}
.cajon .cerrar:hover{color:var(--ink);background:var(--papel-2)}
.cajon a{padding:14px 12px;border-radius:10px;font-size:16.5px;font-weight:600;color:var(--ink-2);
  min-height:48px;display:flex;align-items:center}
.cajon a:hover{background:var(--papel-2);color:var(--ink)}
.cajon a[aria-current]{color:var(--ink);background:var(--papel-3)}
.cajon a[href="/portal.html"]{margin-top:10px;border-top:1px solid var(--linea);
  border-radius:0;color:var(--ink-3);font-size:15px}
.cajon .btn{margin-top:14px;justify-content:center}

@media(max-width:1040px){.burger{display:flex}}
/* En escritorio el cajón no existe, aunque el marcado esté. */
@media(min-width:1041px){.cajon,.cortina{display:none !important}}
@media(prefers-reduced-motion:reduce){
  .cajon,.cortina,.burger span{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════
   Correcciones del 11-ago-2026
   ══════════════════════════════════════════════════════════════════════ */

/* El botón del cajón era azul con el texto gris del resto de los enlaces:
   contraste malo. Va blanco con texto navy, que sobre el papel del cajón
   se lee sin esfuerzo. */
.cajon .btn{background:#fff;color:var(--navy);border:1.5px solid var(--linea-2);
  box-shadow:none;font-weight:700}
.cajon .btn:hover{background:var(--papel-2);border-color:var(--ink)}

/* Portal de clientes: botón chico y delgado, también blanco. Es acceso de
   servicio, no la acción principal — por eso más liviano que el de agendar. */
.cajon a[href="/portal.html"]{margin-top:12px;border:1px solid var(--linea);
  border-radius:999px;background:#fff;color:var(--ink-2);font-size:13.5px;
  font-weight:600;min-height:38px;padding:0 16px;justify-content:center}
.cajon a[href="/portal.html"]:hover{background:var(--papel-2);color:var(--ink)}

/* ── Carrusel en móvil: deslizamiento continuo ──────────────────────────
   Antes las tarjetas no activas se ocultaban con display:none, así que el
   cambio era un corte seco. Ahora todas siguen en su capa y se mueven en X:
   la que sale se va por la izquierda mientras la siguiente entra por la
   derecha. Es la misma idea del coverflow de escritorio, sin la rotación,
   que en una pantalla angosta solo estorba. */
@media(max-width:700px){
  .sitios-pista{height:auto;min-height:0;perspective:none;position:relative;
    overflow:hidden}
  .sitio{position:absolute;top:0;left:0;width:100%;display:block;
    transition:transform .45s var(--ease),opacity .45s var(--ease)}
  .sitio[data-pos="0"]{position:relative;transform:translateX(0);opacity:1;z-index:3}
  .sitio[data-pos="1"],.sitio[data-pos="2"]{transform:translateX(102%);opacity:0;z-index:1}
  .sitio[data-pos="-1"],.sitio[data-pos="-2"]{transform:translateX(-102%);opacity:0;z-index:1}
  .sitio[data-pos="lejos"]{transform:translateX(102%);opacity:0;z-index:0}
}
@media(prefers-reduced-motion:reduce){
  .sitios-pista{overflow:visible}
  .sitio{transition:none}
}

/* ── Ficha de persona ───────────────────────────────────────────────── */
.ficha-cab{display:grid;grid-template-columns:200px minmax(0,1fr);
  gap:clamp(22px,4vw,44px);align-items:start;margin-top:26px}
.ficha-foto{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;background:var(--papel-2);
  box-shadow:var(--sombra-suave)}
.ficha-foto img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.ficha-rol{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);background:var(--papel-2);
  border:1px solid var(--linea);border-radius:999px;padding:6px 13px;margin-bottom:14px}
.ficha-cab h1{font-size:clamp(30px,4.4vw,52px)}
.ficha-cab .bajada{margin-top:16px}
.ico-btn{width:17px;height:17px}
/* La frase va grande y sin comillas dibujadas: el tamaño ya dice que es una
   cita, y unas comillas gigantes son justo el adorno que sobra. */
.frase{margin:0 0 clamp(20px,3vw,36px);padding:0 0 0 20px;border-left:3px solid var(--azul);
  font-family:var(--display);font-weight:600;font-size:clamp(19px,2.4vw,27px);
  line-height:1.35;letter-spacing:-.022em;color:var(--ink);max-width:34ch}
@media(max-width:760px){
  .ficha-cab{grid-template-columns:1fr;gap:18px}
  .ficha-foto{aspect-ratio:4/3;max-width:100%}
  .ficha-cab .hero-cta .btn{flex:1 1 100%;justify-content:center}
}

/* ── Agendar ────────────────────────────────────────────────────────── */
.ag-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,5vw,64px);align-items:start}
.ag-form{display:grid;gap:16px}
.ag-campo label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.ag-campo label span{text-transform:none;letter-spacing:0;font-weight:500}
.ag-form input,.ag-form select,.ag-form textarea{width:100%;background:#fff;
  border:1.5px solid var(--linea);border-radius:var(--r);color:var(--ink);
  padding:13px 15px;font-size:16px;font-family:var(--body);
  transition:border-color .14s var(--ease),box-shadow .14s var(--ease)}
/* 16px en los campos no es capricho: por debajo de eso, Safari en iPhone
   hace zoom al enfocar y descoloca toda la página. */
.ag-form input:focus,.ag-form select:focus,.ag-form textarea:focus{outline:none;
  border-color:var(--azul);box-shadow:0 0 0 4px rgba(39,71,255,.16)}
.ag-form textarea{resize:vertical;min-height:110px}
.ag-dos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#ag_web{position:absolute;left:-9999px;width:1px;height:1px}  /* honeypot */
.ag-form .btn{margin-top:6px;justify-content:center;width:100%}
.ag-msg{font-size:14.5px;color:var(--ink-3);min-height:20px}
.ag-msg.mal{color:#c02a3a;font-weight:600}
.ag-ok{border:1px solid var(--linea);border-radius:var(--r-lg);padding:32px;
  background:var(--papel-2);box-shadow:var(--sombra-suave)}
.ag-ok h3{font-size:23px}
.ag-ok p{margin:10px 0 20px}

.ag-lado h3{font-size:18px;margin-bottom:14px}
.ag-pasos{display:grid;gap:14px}
.ag-pasos div{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start}
.ag-pasos b{font-family:var(--display);font-size:15px;font-weight:800;color:transparent;
  background:var(--grad);-webkit-background-clip:text;background-clip:text}
.ag-pasos span{font-size:14.5px;color:var(--ink-2);line-height:1.55}
.ag-via{display:flex;align-items:center;gap:10px;padding:12px 14px;margin-bottom:8px;
  border:1px solid var(--linea);border-radius:var(--r);font-size:14.5px;font-weight:600;
  min-height:48px;background:#fff;transition:background .16s var(--ease)}
.ag-via:hover{background:var(--papel-2)}
.ag-via .ico{width:18px;height:18px}
.ag-nota{font-size:13.5px;color:var(--ink-3);margin-top:12px}
@media(max-width:900px){
  .ag-grid{grid-template-columns:1fr;gap:34px}
  .ag-lado{order:-1}   /* qué pasa después, ANTES de pedir los datos */
}

/* ══════════════════════════════════════════════════════════════════════
   Carrusel en teléfono: pista deslizante
   ──────────────────────────────────────────────────────────────────────
   Antes la tarjeta activa era position:relative y las demás absolute. El
   navegador no puede animar un cambio de `position`, así que el cambio se
   veía instantáneo. Ahora TODAS son hermanas en una fila y lo que se mueve
   es la fila entera: una sola propiedad, y esa sí se anima.
   ══════════════════════════════════════════════════════════════════════ */
@media(max-width:700px){
  .sitios{overflow:hidden;border-radius:var(--r-lg)}
  .sitios-pista{display:flex;height:auto;min-height:0;perspective:none;position:relative;
    overflow:visible;will-change:transform;
    transition:transform .42s cubic-bezier(.22,.61,.36,1);
    /* pan-y deja pasar el scroll vertical al navegador y nos quedamos solo
       con el horizontal. Sin esto, arrastrar dentro del carrusel traba la
       página. */
    touch-action:pan-y}
  .sitio{position:relative;top:auto;left:auto;flex:0 0 100%;width:100%;max-width:100%;
    display:block;transform:none !important;opacity:1 !important;filter:none;
    transition:none;box-shadow:var(--sombra-suave)}
  .sitio[data-pos]{transform:none !important;opacity:1 !important}
  /* La que no está al centro se atenúa apenas: da sensación de foco sin
     hacerla desaparecer mientras el dedo la arrastra. */
  .sitio[data-pos="fuera"]{opacity:.55 !important}
  .sitios-puntos{margin-top:16px}
}
@media(prefers-reduced-motion:reduce){
  .sitios-pista{transition:none}
}

/* ── Carrusel en teléfono: tarjeta compacta ─────────────────────────────
   Al pasar a pista deslizante, la tarjeta quedó al 100% del ancho con la
   captura a 16/10 más el bloque de texto completo: una sola tarjeta se
   comía casi toda la pantalla. Acá se baja la imagen a 16/9 y el texto a
   tamaños de lista, para que la tarjeta entre entera sin empujar el resto
   de la página fuera de vista. */
@media(max-width:700px){
  .sitio .captura{aspect-ratio:16/9}
  .sitio-txt{padding:12px 14px 15px}
  .sitio-tipo{font-size:10px;letter-spacing:.1em}
  .sitio h4{font-size:15.5px;margin:6px 0 5px}
  .sitio p{font-size:13px;line-height:1.45}
  .sitios{margin-top:20px}
  .sitios-puntos{margin-top:12px}
  .s-punto{width:18px;height:3px}
}
@media(max-width:380px){
  .sitio .captura{aspect-ratio:2/1}
  .sitio h4{font-size:15px}
  .sitio p{font-size:12.5px}
}

/* ══════════════════════════════════════════════════════════════════════
   Desbordamiento horizontal en teléfono — corrección
   ──────────────────────────────────────────────────────────────────────
   La pista es un flex con 5 tarjetas al 100% cada una: 500% de ancho. Los
   ítems de grid y de flex traen `min-width:auto`, así que NO se encogen por
   debajo del ancho de su contenido — el bloque entero crecía a 500% y
   arrastraba la página, cortando el texto contra el borde derecho.
   `min-width:0` es lo que les permite encogerse; sin eso, cualquier
   overflow:hidden solo esconde el síntoma.
   ══════════════════════════════════════════════════════════════════════ */
.fila,.fila-persona,.dos-col,.lista,.pasos,.vias,.hero-grid,.ag-grid{min-width:0}
.fila > *,.fila-persona > *,.dos-col > *,.hero-grid > *,.ag-grid > *{min-width:0}
.sitios{width:100%;max-width:100%;overflow:hidden}
.sitios-pista{width:100%;max-width:100%}
.sitio{min-width:0}

@media(max-width:700px){
  .sitios-pista{flex-wrap:nowrap}
  .sitio{flex:0 0 100%;width:100%;max-width:100%;min-width:0}
  .sitio .captura{aspect-ratio:16/10}
  .sitio .captura img{object-position:top left}
  /* Las capturas son de sitios de escritorio: encajadas a lo ancho quedan
     ilegibles. Se muestra la esquina superior izquierda, que es donde está
     el encabezado y donde se reconoce el sitio. */
}