/* =========================================================
   Tomel — layout.css
   Contenedor, header, menú, secciones, momentos fuertes y footer.
   ========================================================= */

.wrap { width: 100%; max-width: calc(var(--content-max) + 2 * var(--space-6)); margin-inline: auto; padding-inline: var(--space-6); }
@media (max-width: 640px) { .wrap { padding-inline: var(--space-4); } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--glass);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
}
.site-header__bar { height: var(--header-h); display: flex; align-items: center; gap: var(--space-8); }
/* A 360px el logo, "Acceso clientes" y el menú no caben con el espacio normal */
@media (max-width: 400px) { .site-header__bar { gap: var(--space-3); } }
.site-header__logo { display: flex; align-items: center; flex-shrink: 0; min-height: 44px; }
.site-header__logo img { height: 24px; width: auto; }

.nav { display: flex; align-items: center; gap: var(--space-8); margin-inline: auto; }
.nav > a, .nav__drop > button {
  font: 500 14px/1 var(--font-sans); color: var(--ink); opacity: .82;
  background: none; border: 0; padding: 8px 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.nav > a:hover, .nav__drop > button:hover, .nav > a[aria-current="page"], .nav__drop.is-current > button { opacity: 1; color: var(--ink); }
.nav > a[aria-current="page"], .nav__drop.is-current > button { font-weight: 700; }

.nav__drop { position: relative; }
.nav__drop > button svg { transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.nav__drop[data-open="true"] > button svg { transform: rotate(180deg); }
.nav__menu {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  width: 340px; padding: var(--space-3);
  display: none;
  --t-corte: var(--t-control-corte); --t-chica: var(--t-control-chica); --t-grande: var(--t-control-grande);
  --t-b: 1px; --t-relleno: var(--surface); --t-borde: var(--line);
}
.nav__drop[data-open="true"] .nav__menu { display: block; }
.nav__menu a { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--radius-md); color: var(--ink); }
.nav__menu a:hover { background: var(--surface-alt); color: var(--ink); }
.nav__menu a b { font-size: 15px; font-weight: 700; }
.nav__menu a span { font-size: 13px; color: var(--ink-muted); line-height: 1.35; }

.site-header__cta { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 0; background: none; padding: 0; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }
.menu-toggle > span { display: inline-flex; }
.menu-toggle__cerrar, .menu-toggle[aria-expanded="true"] .menu-toggle__abrir { display: none !important; }
.menu-toggle[aria-expanded="true"] .menu-toggle__cerrar { display: inline-flex !important; }

/* Botón de modo día / noche (tema.js): luna en día, sol en noche */
.tema-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; color: var(--ink); cursor: pointer;
  --t-corte: var(--t-control-corte); --t-chica: var(--t-control-chica); --t-grande: var(--t-control-grande);
}
.tema-toggle:hover { --t-relleno: var(--line); }
.tema-toggle__luna { display: inline-flex; }
.tema-toggle__sol { display: none; }
[data-theme="dark"] .tema-toggle__luna { display: none; }
[data-theme="dark"] .tema-toggle__sol { display: inline-flex; }
.tema-toggle--movil { width: 100%; height: auto; justify-content: flex-start; gap: 12px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); background: none;
  font: 700 17px/1.2 var(--font-sans); color: var(--ink); cursor: pointer; }
.tema-toggle--movil .tema-toggle__texto { display: inline; }
@media (max-width: 400px) { .site-header__cta .tema-toggle { display: none; } } /* a 360 px vive en el menú */

/* Menú móvil. Vive FUERA del header (hermano siguiente): el backdrop-filter del header
   volvería al header el contenedor de este position: fixed. Encima del contenido, del
   botón flotante (40) y de la sub-navegación (40); debajo del header (50). */
.mobile-menu { display: none; }
@media (max-width: 960px) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .site-header__cta { margin-left: auto; }
  .site-header__cta .btn--sm { min-height: 44px; } /* "Acceso clientes": tocable con el dedo */
}
/* 360 px: logo, "Acceso clientes" y ☰ caben con aire */
@media (max-width: 380px) {
  .site-header__cta { gap: var(--space-1); }
  .site-header__cta .btn--sm { padding-inline: var(--space-3); }
  .site-header__logo img { height: 22px; }
}
@media (max-width: 960px) {
  .mobile-menu[data-open="true"] {
    display: block; position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 49;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    background: var(--page); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: var(--space-6) var(--space-4) calc(var(--space-16) + env(safe-area-inset-bottom, 0px));
  }
  .mobile-menu a:not(.btn) { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
  .mobile-menu .mobile-menu__sub a { font-size: 17px; font-weight: 600; padding: 10px 0 10px 16px; color: var(--ink-muted); }
  .mobile-menu .btn { margin-top: var(--space-6); width: 100%; }
  .mobile-menu .mobile-menu__wa { margin-top: var(--space-3); }
}
/* Mientras está abierto la página de atrás no se mueve (main.js pone la clase; iOS 16+ lo
   respeta en <html>). Solo en <html>: con overflow en <body>, el body se vuelve el contenedor
   del header pegajoso y el header se va hasta arriba del documento, fuera de la pantalla. */
html.menu-abierto { overflow: hidden; }
@media (max-width: 960px) and (prefers-reduced-motion: no-preference) {
  .mobile-menu[data-open="true"] { animation: menu-entra .22s cubic-bezier(.2, .8, .2, 1) both; }
}
@keyframes menu-entra { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Secciones ---------- */
.section { padding-block: var(--space-32); }
.section--tight { padding-block: var(--space-16); }
.section--alt { background: var(--surface-alt); }
@media (max-width: 640px) { .section { padding-block: var(--space-16); } .section--tight { padding-block: var(--space-12); } }
.section.section--tras-hero { padding-top: var(--space-12); } /* contenido que sigue directo al hero */

/* Contenido alineado a la izquierda, con el eyebrow arriba */
.section-head { display: flex; flex-direction: column; gap: var(--space-4); max-width: 820px; margin-bottom: var(--space-16); }
.section-head .lead { max-width: var(--text-max); }
@media (max-width: 640px) { .section-head { gap: var(--space-3); margin-bottom: var(--space-8); } }

/* ---------- Momentos fuertes ----------
   El hero (o bloque principal) y el CTA final de cada página: navy en día,
   #07101F con borde sutil en noche. Bloque con forma T (26 / 10 / 40). */
.bloque-fuerte {
  --t-corte: var(--t-bloque-corte); --t-chica: var(--t-bloque-chica); --t-grande: var(--t-bloque-grande);
  --t-b: 1px; --t-relleno: var(--surface-strong); --t-borde: var(--line-strong);
  margin: 12px 12px 0; color: var(--ink-on-dark);
}
.bloque-fuerte.cta { margin-bottom: 12px; }
@media (max-width: 640px) { .bloque-fuerte { margin: 8px 8px 0; } .bloque-fuerte.cta { margin-bottom: 8px; } }
.bloque-fuerte :is(.lead, .eyebrow, .small) { color: var(--ink-muted-on-dark); }

/* Grids */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Tablet: si la última tarjeta queda sola en su fila, ocupa todo el ancho (no se ve descuadrada) */
@media (min-width: 641px) and (max-width: 960px) { :is(.grid-2, .grid-3) > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: var(--space-8); } }

/* Hero de páginas internas (centrado, en un momento fuerte) */
.page-hero { padding-block: var(--space-24) var(--space-16); text-align: center; }
.page-hero .wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.page-hero .lead { max-width: var(--text-max); }
.page-hero .actions { margin-top: var(--space-4); }
@media (max-width: 640px) { .page-hero { padding-block: var(--space-16) var(--space-12); } }

/* ---------- Footer ---------- */
.site-footer { background: var(--surface-alt); padding-block: var(--space-16) var(--space-8); font-size: 14px; color: var(--ink-muted); }
.site-footer__top { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
.site-footer__brand img { height: 26px; width: auto; margin-bottom: var(--space-4); }
.site-footer__brand p { max-width: 260px; }
.site-footer h3 { font: 700 14px/1.3 var(--font-sans); letter-spacing: 0; color: var(--ink); margin-bottom: var(--space-3); }
.site-footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.site-footer a { color: var(--ink-muted); }
.site-footer a:hover { color: var(--ink); }
.site-footer__bottom { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); }
@media (max-width: 860px) { .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer__brand { grid-column: 1 / -1; } }
/* Celular y tablet: cada renglón del footer mide 44 px (los links, tocables; los datos, parejos) */
@media (max-width: 960px) {
  .site-footer ul { gap: 2px; }
  .site-footer li { display: flex; align-items: center; min-height: 44px; line-height: 1.35; }
  .site-footer li a, .site-footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer__bottom { align-items: center; }
}

/* Botón flotante de WhatsApp (forma T) */
.wa-float {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  --t-corte: 14px; --t-chica: 6px; --t-grande: 22px; --t-relleno: var(--whatsapp); color: var(--on-whatsapp);
}
.wa-float:hover { --t-relleno: var(--whatsapp-hover); color: var(--on-whatsapp); }
.wa-float { transition: opacity .2s cubic-bezier(.2, .8, .2, 1), visibility .2s; }
/* Se esconde con el menú abierto, mientras se escribe en un campo y cuando el CTA final,
   las preguntas frecuentes o el footer están a la vista (main.js pone .wa-oculto) */
html:is(.menu-abierto, .wa-oculto) .wa-float { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 640px) {
  .wa-float { width: 48px; height: 48px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .wa-float svg { width: 24px; height: 24px; }
  /* Aire al final para que nada quede debajo del botón */
  .con-wa .site-footer { padding-bottom: calc(var(--space-8) + 64px + env(safe-area-inset-bottom, 0px)); }
}