/* Aguas Calmas — base compartida por la home y las páginas de travesía:
   tokens, tipografía, cabecera, píldora y pie. Cada página añade lo suyo. */
:root{
  /* Superficies: familia fría, casi blanca (no bone/cálida). Cada paso
     -frame, bg, surface, card- se distingue apenas del siguiente; la
     separación la da la sombra y la línea, no el contraste de color. */
  --frame:#eef1f3;      /* fuera del lienzo */
  --bg:#f6f8f9;         /* página */
  --surface:#fbfcfd;    /* cabecera, botones circulares */
  --card:#fdfeff;       /* tarjetas */
  --ink:#12181f;        /* titulares, tinta fría casi negra */
  --ink-2:#17202a;       /* enlaces, cuerpo fuerte */
  --muted:#66727c;      /* cuerpo secundario, gris azulado, AA sobre --bg */
  --hover:#4c5860;
  --dark:#12181f;
  --line:rgba(18,32,45,.07);
  --line-2:rgba(18,32,45,.13);
  /* Azul marino de marca. Es la misma tinta que ya usaban las derrotas de los
     mapas, así que no es un color nuevo: es uno que se extiende.
     Reparto: marina para ACCIÓN (botones, flechas, números de paso), casi
     negro para LECTURA (titulares y cuerpo, donde el azul cansa) y oliva
     solo para EXIGENCIA (chips de nivel y barras). Un trabajo por color.
     Blanco sobre marina da 11,8:1 y marina sobre el fondo 11,1:1. */
  --marina:#123b55;
  --marina-h:#1b5175;   /* hover, un paso más claro */
  --olive:#69752e;      /* único acento; oscurecido sobre el fondo frío para AA */
  --whatsapp:#25D366;   /* solo para el trazo del icono de contacto, nunca fondo */
  /* Tipografía "Apple system" del shell (la otra opción del toggle
     original, junto a "EB Garamond"): fuente del sistema, sin @font-face
     ni red. SF Pro en Mac/iOS, Segoe UI en Windows, Roboto en Android. */
  --display:ui-sans-serif,system-ui,-apple-system,"SF Pro Display",sans-serif;
  --body:ui-sans-serif,system-ui,-apple-system,"SF Pro Text",sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
:root{--pad:clamp(28px,5vw,80px)}   /* padding horizontal fluido de las secciones */
body{background:var(--frame);font-family:var(--body);-webkit-font-smoothing:antialiased;color:var(--ink-2)}
img{display:block;max-width:100%}
a{color:var(--ink-2);text-decoration:none}
a:hover{color:var(--hover)}
/* Foco visible para navegación por teclado, en todo lo interactivo. */
a:focus-visible,button:focus-visible{outline:2px solid var(--marina);outline-offset:3px;border-radius:2px}
/* Sobre foto el outline de tinta desaparece: en hero y pie va blanco. */
.hero a:focus-visible,footer.site a:focus-visible{outline-color:#fff}
/* Escritorio fluido: llena el ancho en cualquier monitor real (hasta un
   ultrawide), sin la columna angosta que dejaba el tope anterior de 1600px. */
.root{width:100%;max-width:2400px;margin:0 auto;background:var(--bg)}

/* Movimiento discreto y con motivo: aparición al entrar en pantalla y
   estados de hover con la misma curva en todo el sitio. Se anula entera
   con prefers-reduced-motion. */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* Tipografía display: sistema, semi-negrita, tracking ajustado */
.d{font-family:var(--display);font-weight:600;letter-spacing:-.025em;color:var(--ink)}
h1.d{font-size:clamp(36px,6.6vw,76px);line-height:1.06}
h2.d{font-size:clamp(29px,5.2vw,60px);line-height:1.05}
h3.d{font-size:clamp(22px,2.4vw,27px);line-height:1.24}
h4.d{font-size:22px;line-height:1.3}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.lede{font-size:17px;line-height:1.6;color:var(--muted);text-wrap:pretty}

/* ---------- Cabecera ---------- */
/* Grid de 3 columnas en vez de flex:1/flex:1 simétrico: el logo se centra
   de verdad y el nav puede angostarse (gap fluido + nowrap) sin que sus
   enlaces partan en dos líneas, hasta bien entrado el rango de escritorio. */
header.site{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;column-gap:16px;padding:18px var(--pad);background:var(--surface);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease),background .3s var(--ease)}
/* Al bajar, la cabecera se vuelve translúcida y el contenido pasa por debajo.
   El fondo opaco de arriba evita el parpadeo antes del primer scroll. */
header.site.scrolled{border-bottom-color:var(--line-2);
  background:rgba(251,252,253,.72);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);backdrop-filter:saturate(1.5) blur(14px)}
header.site nav{display:flex;gap:clamp(16px,2.4vw,36px);font-size:clamp(13.5px,1.1vw,15px);
  letter-spacing:.01em;min-width:0}
header.site nav a{white-space:nowrap;transition:color .2s var(--ease)}
.lockup{display:flex;align-items:center;gap:7px;white-space:nowrap;flex:none;justify-self:center}
/* El arte del símbolo ocupa ~52% del alto de su viewBox (mucho aire arriba y
   abajo), así que la caja va más grande que el texto para que ópticamente
   empareje con la altura de mayúscula del wordmark. */
.lockup img{width:38px;height:38px;flex:none}
/* Azul marino de marca. Es el mismo azul de la tinta de los mapas, así que el
   sistema no gana un color nuevo: lo reutiliza donde ya estaba. El símbolo va
   en su propio archivo porque es un <img> con relleno fijo. */
.lockup span{font-family:var(--display);font-weight:600;font-size:clamp(22px,2vw,28px);line-height:1;
  letter-spacing:-.02em;color:var(--marina);white-space:nowrap}
header.site .right{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}

/* ---------- Sistema de botones ---------- */
/* Una sola forma para todos: etiqueta a la izquierda, flecha en cápsula a la
   derecha, y la flecha se desplaza en hover. Es el mismo gesto que ya hacían
   las tarjetas de travesía, así que ahora todos los botones del sitio se leen
   como la misma familia.
   Dos variantes según el fondo:
     .pill        sólida  — para fondos claros, que es casi todo el sitio
     .pill--foto  clara   — solo encima de una foto
   La versión blanca era la única que había y sobre el fondo casi blanco de las
   secciones no tenía ninguna presencia. */
.pill{display:inline-flex;align-items:center;gap:16px;white-space:nowrap;
  background:var(--marina);color:#fff;border-radius:999px;padding:7px 7px 7px 26px;
  transition:background .2s var(--ease),transform .16s var(--ease)}
.pill:hover{background:var(--marina-h);color:#fff}
.pill:active{transform:scale(.98)}
.pill b{font-size:12px;font-weight:600;letter-spacing:.1em;color:inherit}
.pill i{width:38px;height:38px;border-radius:999px;flex:none;font-style:normal;font-size:15px;
  background:rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;justify-content:center;
  transition:transform .2s var(--ease)}
.pill:hover i{transform:translateX(3px)}
.pill i svg{width:18px;height:18px}

.pill--foto{background:#fff;color:var(--marina)}
.pill--foto:hover{background:#fff;color:var(--marina);box-shadow:0 6px 24px rgba(10,25,35,.24)}
.pill--foto i{background:var(--marina);color:#fff}

/* Botón de cabecera: la misma familia a escala de nav.
   Sin flecha a propósito. Con el glifo de WhatsApp más la palabra «WhatsApp»,
   una flecha era un tercer elemento que decía lo mismo y estiraba el botón
   contra el nav. Además «→» promete ir a otra página, y esto abre un chat.
   El gesto de hover se lo queda el icono, que es la verdadera afordancia. */
.btn-nav{display:inline-flex;align-items:center;gap:7px;background:var(--marina);color:#fff;
  border-radius:999px;padding:8px 15px 8px 13px;white-space:nowrap;
  transition:background .2s var(--ease),transform .16s var(--ease)}
.btn-nav:hover{background:var(--marina-h);color:#fff}
.btn-nav:active{transform:scale(.97)}
.btn-nav svg{width:16px;height:16px;flex:none}
.btn-nav b{font-size:12.5px;font-weight:600;letter-spacing:.01em;color:inherit}
.btn-nav svg{transition:transform .2s var(--ease)}
.btn-nav:hover svg{transform:translateX(2px)}

/* ---------- Menú de secciones en móvil ---------- */
/* En escritorio no existe: el nav de la cabecera ya muestra las secciones. */
.btn-menu{display:none;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:999px;border:1px solid var(--line-2);background:var(--surface);
  color:var(--marina);cursor:pointer;flex:none;
  transition:background .2s var(--ease)}
.btn-menu:hover{background:#fff}
.btn-menu svg{width:19px;height:19px}
.menu-movil{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end}
.menu-movil[hidden]{display:none}
.mm-fondo{position:absolute;inset:0;background:rgba(8,18,26,.42);opacity:0;
  transition:opacity .22s var(--ease)}
.menu-movil.abierto .mm-fondo{opacity:1}
/* Hoja inferior: en un teléfono alto es la zona que alcanza el pulgar. */
.mm-panel{position:relative;width:100%;background:var(--surface);
  border-radius:20px 20px 0 0;padding:10px 20px calc(18px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 40px rgba(8,18,26,.22);
  transform:translateY(100%);transition:transform .24s var(--ease)}
.menu-movil.abierto .mm-panel{transform:none}
.mm-panel::before{content:"";display:block;width:38px;height:4px;border-radius:999px;
  background:var(--line-2);margin:0 auto 6px}
.mm-panel a{display:flex;align-items:center;justify-content:space-between;
  padding:16px 2px;font-size:17px;color:var(--ink);
  border-bottom:1px solid var(--line)}
.mm-panel a::after{content:"→";color:var(--marina);font-size:15px}
.mm-cerrar{display:block;width:100%;margin-top:14px;padding:13px;border:0;
  border-radius:999px;background:var(--marina);color:#fff;cursor:pointer;
  font-family:var(--body);font-size:12.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase}
@media (prefers-reduced-motion:reduce){
  .mm-fondo,.mm-panel{transition:none}
}

/* ---------- Pie ---------- */
/* Pie sobre foto aérea. Riesgos de la referencia que se evitan acá:
   el badge de coordenadas pisaba el rótulo de la primera columna, y los
   enlaces caían sobre la arena clara, donde el texto blanco se pierde.
   Solución: los enlaces viven en la mitad inferior, que es agua oscura, y
   encima va un velo en dos gradientes -uno vertical y otro desde la
   izquierda- calibrado midiendo el contraste sobre la imagen ya compuesta,
   no a ojo. */
footer.site{margin-top:144px;padding:0 16px 16px}
footer.site .lienzo{position:relative;border-radius:24px;overflow:hidden;
  min-height:620px;display:flex;flex-direction:column;justify-content:space-between}
footer.site .lienzo>img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 42%}
footer.site .velo{position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(6,17,26,.62) 0%,rgba(6,17,26,.34) 26%,
                    rgba(6,17,26,.52) 58%,rgba(6,17,26,.84) 100%),
    linear-gradient(90deg,rgba(6,17,26,.42) 0%,rgba(6,17,26,.10) 46%,rgba(6,17,26,0) 72%)}
footer.site .dentro{position:relative;padding:clamp(32px,4vw,56px);display:flex;
  flex-direction:column;justify-content:space-between;flex:1;gap:56px}

/* El lockup arrastra el justify-self:center de la cabecera, que acá no
   corresponde: en el pie va alineado a la izquierda con el resto. */
footer.site .lockup{justify-self:start;align-self:flex-start;width:fit-content}
footer.site .lockup span{color:#fff}
footer.site .cierre{margin-top:34px;font-family:var(--display);font-weight:600;
  font-size:clamp(30px,3.4vw,46px);line-height:1.12;letter-spacing:-.02em;
  color:#fff;max-width:19ch;text-wrap:balance}
footer.site .cierre+.pill{margin-top:28px}

footer.site .fila{display:flex;align-items:flex-end;gap:56px;flex-wrap:wrap}
footer.site .marca{flex:1 1 320px;min-width:0}
footer.site .marca p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.88);max-width:34ch}
/* Coordenadas del puerto de salida: en su propia línea, lejos de las columnas.
   En la referencia se solapaba con el rótulo «TRAVESÍAS». */
footer.site .coord{display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  padding:7px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.34);
  background:rgba(6,17,26,.34);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
footer.site .coord svg{width:13px;height:13px;flex:none}

footer.site .cols{display:flex;gap:clamp(40px,5vw,80px);flex:none}
footer.site h5{font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.78);margin-bottom:14px}
footer.site ul{list-style:none;font-size:15px}
/* Renglón más alto: con 5px el target táctil quedaba en ~25px. */
footer.site li{padding:0}
footer.site li a{padding:8px 0;min-height:34px}
footer.site li a{display:inline-flex;align-items:center;gap:9px;color:#fff}
footer.site li a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
footer.site li svg{width:15px;height:15px;flex:none;color:rgba(255,255,255,.8);
  transition:transform .2s var(--ease)}
footer.site li a:hover svg{transform:translateX(2px)}
footer.site .base{position:relative;margin-top:44px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.22);display:flex;gap:24px;flex-wrap:wrap;
  font-size:12.5px;color:rgba(255,255,255,.82)}


/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   Dos cortes: 1024px para tablet y 680px para teléfono. El escritorio queda
   intacto: todo lo de abajo solo resta columnas y apila.
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  footer.site .lienzo{min-height:0}
  footer.site .fila{gap:40px}
  footer.site .marca{flex:1 1 100%}
  footer.site .cols{gap:56px}
}

/* ---------- Teléfono ---------- */
@media (max-width:680px){
  :root{--pad:20px}

  /* Cabecera de UNA fila: isotipo, nav con scroll horizontal y WhatsApp.
     Antes iba en dos filas y, siendo sticky, se comía 88px de 812 -un 11 %
     del viewport, permanente-. Con el wordmark fuera baja a ~57px.
     El menú se queda: la home mide 11.000px en móvil, casi 14 pantallas, y es
     lo único que la hace navegable. */
  header.site{grid-template-columns:auto 1fr auto;
    grid-template-areas:"marca . cta";column-gap:14px;row-gap:0;
    padding:10px var(--pad)}
  .lockup{grid-area:marca;justify-self:start;gap:0}
  .lockup img{width:30px;height:30px}
  /* El wordmark se oculta a la vista pero sigue en el árbol de accesibilidad:
     con display:none el enlace al inicio se quedaba sin nombre. */
  .lockup span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  header.site .right{grid-area:cta}
  /* El nav de la cabecera se va: con scroll horizontal escondía ítems y
     obligaba a descubrir que se desplazaba. Lo reemplaza el botón de menú,
     que abre la hoja inferior con las cuatro secciones a la vista. */
  header.site nav{display:none}
  .btn-menu{display:inline-flex}
  header.site .right{gap:8px}
  /* El botón va más justo para dejarle ancho al nav */
  .btn-nav{padding:7px 12px 7px 11px;gap:6px}
  .btn-nav b{font-size:12px}
  .btn-nav svg{width:15px;height:15px}

  .pill{padding:6px 6px 6px 20px;gap:12px}
  .pill b{font-size:11.5px;letter-spacing:.08em}
  .pill i{width:34px;height:34px;font-size:14px}

  /* El pie sobre foto: todo apilado y con menos aire */
  footer.site{padding:0 12px 12px}
  footer.site .lienzo{border-radius:18px}
  footer.site .dentro{padding:26px 22px;gap:38px}
  footer.site .cierre{margin-top:22px;max-width:none}
  footer.site .fila{flex-direction:column;align-items:flex-start;gap:32px}
  footer.site .cols{gap:44px;flex-wrap:wrap}
  footer.site .base{flex-direction:column;gap:8px;margin-top:32px}
}