/* =========================================================
   GAP Broker — styles.css
   Rediseño 07/2026, variante 1b: paleta azul dominante + dorado
   secundario + rojo solo como acento. Sin negro ni fondos oscuros
   (pedido explícito de Rosana). Titulares en Libre Franklin 300.
   ========================================================= */

:root {
  /* Paleta */
  --deep: #0d2f5e;          /* azul dominante: titulares, footer, botones */
  --blue: #1c5aa6;          /* azul medio: links, bordes activos */
  --gold: #e6a015;          /* dorado: eyebrows, detalles, progreso */
  --gold-soft: #f6b93b;
  --gold-btn: #ea580c;      /* CTA principal del hero — naranja saturado, no dorado (20/08) */
  --gold-btn-h: #ff6d1f;
  --gold-btn-ink: #ffffff;  /* texto blanco: el ink oscuro sobre dorado leia "antiguo" */
  --red: #e23b2e;           /* acento chico: errores, siniestros */
  --ink: #17263b;           /* texto principal */
  --muted: #5a6b82;         /* texto secundario */
  --wa: #25a35a;
  --wa-h: #1f8f4e;

  /* Fondos */
  --page: #ffffff;
  --tint: #f4f8fd;          /* secciones alternas y hero */
  --tint-strong: #eaf2fc;   /* tira de aseguradoras */
  --card: #ffffff;
  --card-soft: #fbfcfe;
  --line: #e6ecf4;
  --line-soft: #eef2f7;
  --line-card: #e2eaf4;

  /* Formas */
  --r-card: 16px;
  --r-lg: 20px;
  --r-btn: 9px;
  --shadow-card: 0 6px 18px rgba(13, 47, 94, .06);
  --shadow-lift: 0 24px 50px rgba(13, 47, 94, .14);
  --shadow-deep: 0 30px 70px rgba(13, 47, 94, .18);

  --wrap: 1120px;
  --pad: 40px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--page);
  overflow-x: clip;
}

body.no-scroll { overflow: hidden; }

img, svg, iframe { max-width: 100%; }
img { display: block; height: auto; }

a { color: var(--blue); }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--deep);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Contenedores y tipografía ---------- */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.section { padding: 84px 0; background: var(--page); }
.section--strip { background: var(--tint); }
.section--team { background: var(--tint); }

.eyebrow {
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}

.h2 {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0 0 18px;
  color: var(--deep);
  text-wrap: balance;
}

.lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 28px;
  max-width: 44em;
}

.section p { margin: 0 0 16px; }
.section p:last-child { margin-bottom: 0; }

.rule {
  display: block;
  width: 56px;
  height: 4px;
  background: var(--gold);
  margin-bottom: 24px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 26px;
  border: none;
  border-radius: var(--r-btn);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.btn--gold {
  background: var(--gold-btn);
  color: var(--gold-btn-ink);
  box-shadow: 0 8px 20px rgba(234, 88, 12, .28);
}
.btn--gold:hover { background: var(--gold-btn-h); box-shadow: 0 10px 24px rgba(234, 88, 12, .36); }

.btn--outline {
  background: transparent;
  color: var(--deep);
  border: 1.5px solid var(--deep);
}
.btn--outline:hover { background: rgba(13, 47, 94, .06); }

/* Variante naranja: para acciones "beneficio" que no son un ramo propio de
   GAP (ej. asistencia al viajero) — mismo naranja que la etiqueta de la
   card en Productos, para que ambas se lean como la misma oferta. */
.btn--gold-outline {
  background: transparent;
  color: var(--gold-btn);
  border: 1.5px solid var(--gold-btn);
}
.btn--gold-outline:hover { background: rgba(234, 88, 12, .1); }

.btn--wa { background: var(--wa); color: #fff; padding: 11px 18px; font-size: 14px; }
.btn--wa:hover { background: var(--wa-h); }

.ico-wa { width: 17px; height: 17px; flex-shrink: 0; }

/* ===================== HEADER ===================== */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--deep), var(--blue) 45%, var(--gold-soft) 75%, var(--gold)) 1;
  transition: transform .35s ease, box-shadow .35s ease;
  will-change: transform;
}
/* Sombra cuando la vista activa está scrolleada por dentro */
.header.is-scrolled { box-shadow: 0 6px 20px rgba(13, 47, 94, .10); }

/* El header usa todo el ancho (no la grilla de 1120): así el logo queda
   pegado a la izquierda y entra todo — con el contenedor angosto, el nav
   más el bloque de WhatsApp se salían de la pantalla. */
.header__inner {
  max-width: none;
  margin: 0;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* El logo va pegado a la izquierda y todo lo demás se agrupa a la derecha:
   con el margin auto acá, que aparezca o desaparezca el botón "Inicio" no
   corre el logo ni reordena el header. */
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: auto;
}
.brand__mark { width: 64px; height: 64px; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: 6px;
  color: var(--deep);
}
.brand__tag {
  font-size: 12px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

.nav { position: relative; display: flex; align-items: center; gap: 18px; }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
/* El subrayado lo hace el ancla deslizante (.nav__ink en stage.css);
   el hover solo cambia el color. */
.nav__link:hover { color: var(--blue); }

.nav__chev { transition: transform .25s ease; }
.nav__ddbtn[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

.nav__dd { position: relative; }

.nav__menu {
  position: absolute;
  top: calc(100% + 16px);
  right: 0;
  width: 288px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 20px 44px rgba(13, 47, 94, .18);
  padding: 8px;
  z-index: 60;
}
.nav__menu[hidden] { display: none; }

.nav__item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px 14px;
  border-radius: 10px;
  font-family: inherit;
  transition: background .18s ease;
}
.nav__item:hover { background: var(--tint); }

.nav__ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(28, 90, 166, .10);
  color: var(--deep);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nav__ico svg { width: 20px; height: 20px; }

.nav__itemtext { display: flex; flex-direction: column; }
.nav__itemtext b { font-size: 15px; font-weight: 700; color: var(--deep); }
.nav__itemtext small { font-size: 12.5px; color: var(--muted); }

.header__aside { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }

.header__hours { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.header__hours span {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}
.header__hours strong { font-size: 15px; font-weight: 700; color: var(--deep); }

/* Hamburguesa (solo mobile/tablet) */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  padding: 13px 11px;
  flex-direction: column;
  justify-content: space-between;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--deep);
  border-radius: 2px;
  transition: transform .22s ease, opacity .18s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* El menú va DENTRO del header, que es sticky y vive en un body con
   overflow:hidden (lo pone el Stage). O sea: lo que no entra en pantalla
   no se recupera con ningún scroll —no hay ancestro scrolleable—. Por eso
   el menú tiene que tener su propio tope de alto y scrollear él mismo.
   Sin esto, en 360x640 se cortaban 53px (el botón de WhatsApp quedaba
   partido al medio) y en horizontal se perdían 318px: Contacto y las tres
   herramientas quedaban invisibles e inalcanzables.
   --bar-h lo mide main.js sobre .header__inner (la barra SIN el menú
   desplegado); el 96px es el respaldo por si el JS no corre. */
.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: #fff;
  padding: 14px var(--pad) 22px;
  max-height: calc(100svh - var(--bar-h, 96px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@supports not (height: 100svh) {
  .mobile-nav { max-height: calc(100vh - var(--bar-h, 96px)); }
}
.mobile-nav.is-open { display: block; }
.mobile-nav a,
.mobile-nav button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 13px 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
}
.mobile-nav__label {
  margin: 18px 0 2px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
.mobile-nav__wa {
  margin-top: 18px;
  padding: 14px !important;
  border-bottom: none !important;
  background: var(--wa) !important;
  color: #fff !important;
  text-align: center !important;
  border-radius: var(--r-btn);
  font-weight: 700;
}

/* ===================== HERO ===================== */
.hero {
  position: relative;
  background: var(--tint);
  color: var(--deep);
}

/* overflow hidden: las fotos sobresalen 28px de cada lado (ver motion.css)
   para que el slide no deje un borde vacío al entrar y salir. */
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    rgba(255, 255, 255, .93) 0%,
    rgba(255, 255, 255, .72) 48%,
    rgba(255, 255, 255, .30) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-top: 70px;
  padding-bottom: 76px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  min-height: 440px;
}

.hero__globe {
  position: relative;
  flex: 0 0 auto;
  width: 200px;
  height: 200px;
}
.globe { width: 100%; height: 100%; }
.globe__wire { opacity: .5; }

/* Isotipo en 3D (three.js dentro de un iframe). Lo monta main.js solo si
   hay WebGL; mientras tanto o si no hay, se ve el SVG. */
.globe3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
  pointer-events: none;
}
.hero__globe.has-3d .globe { display: none; }

.hero__copy { flex: 1 1 560px; }

.hero__eyebrow {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--muted);
}

.hero__lead {
  font-size: 20px;
  line-height: 1.55;
  color: #324b6b;
  max-width: 40em;
  margin: 0 0 30px;
}

.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* ===================== TIRA DE ASEGURADORAS ===================== */
.strip {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-top: 1px solid rgba(13, 47, 94, .06);
  padding: 20px 0 24px;
}
.strip__label {
  margin: 0 0 4px;
  font-size: 12.5px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  text-align: center;
  padding: 0 var(--pad);
}

.marquee {
  overflow: hidden;
  padding: 18px 0 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  gap: 26px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Los archivos de assets/logos están recortados al contenido (sin aire
   alrededor), así que con una sola caja para todos quedan del mismo tamaño
   visual: los cuadrados llenan el alto y los alargados llenan el ancho.
   --s queda como escape por si algún logo nuevo viene con margen propio. */
.marquee__track li {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  height: 70px;
  width: 176px;
  flex-shrink: 0;
}
/* Los topes son el respaldo si el JS no corre; el tamaño fino lo calcula
   equilibrarLogos() en main.js, que iguala el ÁREA de cada logo (un logo
   cuadrado y uno alargado con la misma altura no se ven del mismo tamaño). */
.marquee__track img {
  max-width: 150px;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
  transform: scale(var(--s, 1));
}

/* ===================== QUIÉNES SOMOS ===================== */
.photo-card {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  background: #dfe7f1;
  aspect-ratio: 4 / 5;
  max-height: 520px;
}
.photo-card img { width: 100%; height: 100%; object-fit: cover; }

.photo-card__stat {
  position: absolute;
  left: 22px;
  bottom: 22px;
  background: var(--deep);
  color: #fff;
  padding: 16px 22px;
  border-radius: 12px;
  box-shadow: 0 12px 26px rgba(13, 47, 94, .3);
}
.photo-card__stat b { display: block; font-size: 34px; font-weight: 800; line-height: 1; }
.photo-card__stat span { display: block; font-size: 12.5px; letter-spacing: .5px; color: #b9cbe6; margin-top: 4px; }

/* Acotado a .section a propósito: el pie se clona dentro de cada vista y
   un selector con id (#quienes p) le ganaba a .footer__legal, así que el
   texto legal del pie salía a 17px dentro de esta sección. */
/* :not(.eyebrow) importa: el selector con id le gana a .eyebrow y le pisaba
   el dorado, dejando en gris los rótulos de "Quiénes somos" y "Ofrecemos". */
#quienes .section .lead { color: var(--ink); font-size: 17px; margin-bottom: 16px; max-width: none; }
#quienes .section p:not(.eyebrow) { font-size: 17px; line-height: 1.65; color: var(--muted); }

/* ===================== OFRECEMOS ===================== */
.figure { position: relative; }
.figure__img {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-deep);
  aspect-ratio: 3 / 2;
  background: #dfe7f1;
}
.figure__img img { width: 100%; height: 100%; object-fit: cover; }
.figure__bar {
  position: absolute;
  left: -16px;
  top: 34px;
  width: 6px;
  height: 130px;
  background: var(--gold);
  border-radius: 3px;
}
.figure__chip {
  position: absolute;
  right: 22px;
  bottom: -28px;
  background: #fff;
  border-radius: 14px;
  padding: 16px 22px;
  box-shadow: 0 16px 34px rgba(13, 47, 94, .2);
  display: flex;
  align-items: center;
  gap: 14px;
}
.figure__chip b { font-size: 30px; font-weight: 800; line-height: 1; color: var(--deep); }
.figure__chip span { font-size: 13px; line-height: 1.3; color: var(--muted); max-width: 11ch; }

.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.checklist li { display: flex; gap: 16px; align-items: flex-start; }
.checklist__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(230, 160, 21, .14);
  color: var(--gold);
  font-size: 20px;
  font-weight: 800;
  flex-shrink: 0;
}
.checklist h3 { font-size: 18px; font-weight: 700; margin: 0 0 4px; color: var(--deep); }
.checklist p { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0 !important; }

/* ===================== PRODUCTOS ===================== */
.grid-prod {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) 1.3fr;
  gap: 52px;
  align-items: stretch;
}

.prod-figure {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 460px;
  box-shadow: var(--shadow-deep);
  background: #dfe7f1;
}
.prod-figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.prod-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 47, 94, 0) 38%, rgba(13, 47, 94, .82) 100%);
}
.prod-figure__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 30px; z-index: 1; }
.prod-figure__body .rule { width: 48px; margin-bottom: 16px; }
.prod-figure__title {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  margin: 0 0 8px !important;
  text-wrap: balance;
}
.prod-figure__p { font-size: 15px; line-height: 1.5; color: #d5e2f3; margin: 0 !important; }

.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.prod {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  text-decoration: none;
  background: var(--card-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 24px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
/* --ico lo define cada ramo en su style (ver index.html) */
.prod { --ico: var(--blue); }
.prod:hover {
  border-color: var(--ico);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
/* El círculo de fondo va dentro del SVG (así el icono es una ilustración
   completa y se puede reemplazar por un archivo sin tocar el CSS). */
.prod__icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ico);
  flex-shrink: 0;
}
.prod__icon svg, .prod__icon img { width: 54px; height: 54px; }
.prod__label { font-size: 17px; font-weight: 700; color: var(--deep); }

/* Variante destacada: convenios con terceros (ej. asistencia al viajero),
   distintos de los ramos propios que cotiza GAP. Mismo dorado que los CTA
   principales del sitio (--gold), no un color nuevo. */
.prod--featured {
  position: relative;
  background: rgba(230, 160, 21, .1);
  border-color: var(--gold-soft);
}
.prod--featured:hover {
  border-color: var(--gold);
  box-shadow: 0 6px 18px rgba(230, 160, 21, .22);
}
.prod__badge {
  position: absolute;
  top: -11px;
  right: 16px;
  background: var(--gold-btn);
  color: var(--gold-btn-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(13, 47, 94, .18);
}

/* ===================== COMPAÑÍAS =====================
   Pedido explícito (20/08): sencillo, uno abajo de otro, sin chips. */
.companies-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  max-width: 640px;
}
.companies-list li {
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink);
}
.companies-list li:first-child { border-top: 1px solid var(--line); }

/* ===================== HERRAMIENTAS ===================== */
.tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.tool {
  background: #fff;
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background .2s ease;
}
.tool:hover { background: var(--card-soft); }
.tool__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: var(--deep);
  color: #fff;
  flex-shrink: 0;
}
.tool__icon svg { width: 26px; height: 26px; }
.tool__title { font-size: 21px; font-weight: 700; margin: 0; color: var(--deep); }
.tool__p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0 !important; flex: 1; }
.tool__link {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--blue);
  cursor: pointer;
  transition: color .18s ease;
}
.tool__link:hover { color: var(--deep); }

/* ===================== EQUIPO ===================== */
.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}
.member {
  background: #fff;
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.member__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(45deg, #dfe7f1 0 14px, #e9eef6 14px 28px);
}
/* object-position sesgado hacia arriba: la caja es 4:3 pero las fotos son
   retratos (verticales), así que el recorte centrado por defecto se comía
   la cabeza. Con la cara siempre arriba en este tipo de foto, conviene
   recortar de abajo (torso) en vez de arriba. */
.member__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.member__photo span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 1px;
  color: #7d8ba0;
  background: rgba(255, 255, 255, .82);
  padding: 7px 12px;
  border-radius: 6px;
  white-space: nowrap;
}
.member__body { padding: 22px 24px; }
.member__body h3 { font-size: 19px; font-weight: 700; margin: 0 0 4px; color: var(--deep); }
.member__role { font-size: 13px; letter-spacing: .5px; color: var(--gold); font-weight: 600; margin: 0 0 10px !important; }
.member__bio { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 !important; }

/* ===================== CONTACTO ===================== */
/* El bloque de título respira lo mismo que separa a las tarjetas entre sí,
   y adentro de cada tarjeta el contenido se reparte parejo. */
#contacto .lead { margin-bottom: 0; }
#contacto .section > .wrap > [data-reveal]:first-child { margin-bottom: 44px; }

.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.ccard {
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line-card);
  border-radius: var(--r-card);
  padding: 32px;
  box-shadow: 0 6px 18px rgba(13, 47, 94, .05);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 236px;
  transition: border-color .2s ease, transform .2s ease;
}
.ccard:hover { transform: translateY(-3px); }
.ccard--wa:hover { border-color: var(--wa); }
.ccard--claim:hover { border-color: var(--red); }
.ccard--mail:hover { border-color: var(--gold); }

.ccard__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  margin-bottom: 8px;
}
.ccard__icon svg { width: 26px; height: 26px; }
.ccard--wa .ccard__icon { background: rgba(37, 163, 90, .12); color: var(--wa); }
.ccard--claim .ccard__icon { background: rgba(226, 59, 46, .10); color: var(--red); }
.ccard--mail .ccard__icon { background: rgba(230, 160, 21, .14); color: var(--gold); }

.ccard__label {
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 !important;
  font-weight: 600;
}
/* Los tres datos van del mismo cuerpo. Lo manda el mail, que es el más
   largo: el tamaño está elegido para que entre en un renglón en la tarjeta
   más angosta (tres columnas en desktop) sin partirse nunca. */
.ccard__value {
  font-size: 18px;
  font-weight: 700;
  color: var(--deep);
  margin: 0 !important;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}
.ccard__value--mail { letter-spacing: -.01em; }
/* margin-top auto: la nota queda apoyada abajo en las tres tarjetas, así
   quedan alineadas entre sí aunque una ocupe un renglón más. */
.ccard__note { font-size: 14px; color: var(--muted); margin: 0 !important; margin-top: auto !important; }

/* ===================== PIE ===================== */
.footer { background: var(--deep); color: #dbe6f5; }
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  padding-top: 60px;
  padding-bottom: 36px;
}
.brand--footer { margin-bottom: 20px; }
.brand--footer .brand__name { color: #fff; font-size: 25px; }
.brand--footer .brand__tag { color: #9bb4d6; }

.footer__about { font-size: 15px; line-height: 1.65; color: #c2d3ea; max-width: 34em; margin: 0 0 20px; }
.footer__legal { font-size: 12px; line-height: 1.6; color: #7f9bc4; max-width: 36em; margin: 0; }
.footer__legal a { color: #9bb4d6; text-decoration: underline; display: inline-block; padding: 6px 0; }
.footer__legal a:hover { color: var(--gold); }

.footer__head {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #7f9bc4;
  margin: 0 0 16px;
  font-weight: 700;
}
/* El padding vertical lleva la zona de toque a ~43px sin separar más
   los enlaces (el margin baja lo mismo que sube el padding). A 19px de
   alto, en celular, estos tres atajos a las herramientas se erraban. */
.footer__link {
  display: block;
  background: none;
  border: none;
  padding: 12px 0;
  margin-bottom: 0;
  font-family: inherit;
  font-size: 15px;
  text-align: left;
  color: #dbe6f5;
  text-decoration: none;
  cursor: pointer;
  transition: color .18s ease;
}
.footer__link:first-child { padding-top: 0; }
.footer__link:hover { color: var(--gold); }

.footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); }
.footer__bottominner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 18px;
  padding-bottom: 18px;
  font-size: 12.5px;
  color: #7f9bc4;
}
.footer__bottominner span:last-child { text-align: right; }

/* ===================== RESPONSIVE ===================== */
/* Entre 1060 y 1200 el header va justo: se saca el bloque de horarios y se
   aprieta un poco el nav para que quede margen. En el pie se ocultan los
   atajos (están igual en "Servicios Online") para que la línea legal entre
   en un solo renglón y el pie no se coma alto de las vistas. */
@media (max-width: 1320px) {
  .header__hours { display: none; }
  .header__inner { padding: 16px 24px; }
  .nav { gap: 14px; }
  .nav__link { font-size: 14.5px; }
  .brand__tag { font-size: 9px; letter-spacing: 2.5px; }
}

@media (max-width: 1060px) {
  .nav, .header__aside { display: none; }
  .nav-toggle { display: flex; }
  .header__inner { gap: 16px; padding: 16px var(--pad); }
}

@media (max-width: 900px) {
  :root { --pad: 24px; }

  .section { padding: 64px 0; }
  .grid-2, .grid-prod { grid-template-columns: 1fr; gap: 36px; }

  /* En desktop la foto de "Quiénes somos" va a la izquierda; en mobile
     el texto tiene que arrancar arriba y la foto quedar debajo. */
  #quienes .photo-card { order: 2; aspect-ratio: 4 / 3; max-height: none; }
  #quienes .grid-2 > div:not(.photo-card) { order: 1; }

  .figure__chip { right: 12px; bottom: -20px; padding: 12px 16px; }
  .figure__chip b { font-size: 24px; }
  .figure__bar { left: -8px; }

  .prod-figure { min-height: 300px; }

  .hero__scrim {
    background: linear-gradient(178deg,
      rgba(255, 255, 255, .94) 0%,
      rgba(255, 255, 255, .87) 55%,
      rgba(255, 255, 255, .80) 100%);
  }
  .hero__inner { padding-top: 44px; padding-bottom: 52px; min-height: 0; }
  .hero__globe { order: 2; margin: 0 auto; width: 150px; height: 150px; }
  .hero__copy { order: 1; flex: 1 1 100%; }
  .hero__lead { font-size: 18px; }

  .footer__grid { grid-template-columns: 1fr; gap: 32px; padding-top: 48px; }
  .footer__bottominner { flex-direction: column; text-align: center; }
  .footer__bottominner span:last-child { text-align: center; }
}

@media (max-width: 560px) {
  .h2 { font-size: 27px; }
  .hero__eyebrow { font-size: 12.5px; letter-spacing: 2px; }
  .hero__cta .btn { width: 100%; }
  .tool { padding: 30px 26px; }
  .ccard { padding: 26px; }
  .ccard__value { font-size: 17px; }
}

/* En pantallas muy angostas la tarjeta deja ~220px útiles: el mail necesita
   este cuerpo para no desbordar. */
@media (max-width: 400px) {
  .ccard__value { font-size: 15.5px; }
  .photo-card__stat b { font-size: 28px; }
  .photo-card__stat { left: 16px; bottom: 16px; padding: 13px 18px; }
  .wa-float { width: 50px; height: 50px; right: 14px; bottom: 14px; }
  .wa-float svg { width: 25px; height: 25px; }
}

/* ===================== CELULAR APAISADO =====================
   Un celular horizontal (~812x375) entra por ANCHO al layout de tablet,
   pero no tiene nada de alto: el header de 99px se comía el 26% de la
   pantalla y el hero quedaba sin aire. No existía ninguna regla por
   altura, así que este caso nunca se había contemplado. */
@media (max-height: 500px) and (orientation: landscape) {
  .header__inner { padding: 8px var(--pad); gap: 12px; }
  .brand__mark { width: 40px; height: 40px; }
  .brand__name { font-size: 24px; letter-spacing: 4px; }
  .brand__tag { font-size: 8px; letter-spacing: 2px; margin-top: 2px; }
  .nav-toggle { width: 40px; height: 40px; padding: 11px 9px; }

  .hero__inner { padding-top: 20px; padding-bottom: 24px; }
  .hero__globe { width: 96px; height: 96px; }
  .hero__lead { font-size: 15.5px; }
  .hero__eyebrow { font-size: 11.5px; }
  .hero__cta { gap: 8px; }
  .hero__cta .btn { width: auto; padding: 10px 16px; font-size: 14px; }

  /* La tira ocupa mucho para lo que aporta cuando hay 375px de alto */
  .strip { padding: 12px 0 14px; }
  .marquee { padding-top: 10px; }
  .marquee__track li { height: 48px; width: 128px; }

  .mobile-nav a,
  .mobile-nav button { padding: 10px 0; font-size: 15px; }
  .mobile-nav__label { margin: 12px 0 2px; }
  .mobile-nav__wa { margin-top: 12px; padding: 11px !important; }

  .section { padding: 40px 0; }
}