/* ══════════════════════════════════════════════════════════════
   MY DATTA · BASE
   Reset, tipografía, botones, utilidades, cabecera, franja y pie.
   Lo que se repite en todas las páginas vive aquí.
   ══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-header) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.65;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid rgba(37, 99, 235, .45); outline-offset: 2px; border-radius: 4px; }

/* Salto al contenido, para quien navega con teclado */
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 12px 20px; background: var(--azul); color: #fff;
  font-weight: 700; border-radius: 0 0 var(--r-sm) 0;
}
.saltar:focus { left: 0; }

/* ── Contenedor ── */
.caja { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }
.seccion { padding: var(--seccion) 0; }
.seccion-alterna { background: var(--nieve); }

/* ══════════════════════════════════
   TIPOGRAFÍA
   ══════════════════════════════════ */
.etiqueta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--fuente-et);
  font-size: .7rem; font-weight: 400; letter-spacing: .16em;
  text-transform: uppercase; color: var(--azul);
}
.etiqueta::before {
  content: ''; width: 20px; height: 3px; border-radius: var(--r-pill);
  background: var(--azul); flex-shrink: 0;
}
.etiqueta.centrada { justify-content: center; }

/* Escala del brandbook 03:
   Display 96/800 · H1 60/700 · H2 40/700 · H3 24/600
   Body 16/400 · Caption 13/300
   Antes el cuerpo iba en 300 en todas partes y quedaba demasiado fino:
   el manual reserva el 300 para captions y notas al pie. */
h1, h2, h3, h4 { color: var(--tinta); font-weight: 700; letter-spacing: -.02em; line-height: 1.18; }
h3 { font-weight: 600; }
.titular    { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; }   /* H2 · 40px */
.titular-xl { font-size: clamp(2.1rem, 5.4vw, 3.75rem); font-weight: 700; letter-spacing: -.03em; }  /* H1 · 60px */
.titular-display { font-weight: 800; font-size: clamp(2.3rem, 6vw, 4.25rem); letter-spacing: -.035em; }
.titular-sm { font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 600; }  /* H3 · 24px */
.acento { color: var(--azul); }

.bajada { font-size: 1rem; font-weight: 400; color: var(--texto-3); line-height: 1.75; }
.bajada-sm { font-size: .88rem; font-weight: 400; color: var(--texto-3); line-height: 1.7; }
.pie-nota { font-size: .81rem; font-weight: 300; color: var(--texto-3); }

/* Cabecera de sección: etiqueta + titular + bajada */
.cab-seccion { margin-bottom: clamp(32px, 4vw, 52px); }
.cab-seccion .etiqueta { margin-bottom: 14px; }
.cab-seccion .bajada { margin-top: 14px; max-width: 62ch; }
.cab-seccion.centrada { text-align: center; }
.cab-seccion.centrada .bajada { margin-left: auto; margin-right: auto; }

/* ══════════════════════════════════
   BOTONES
   ══════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 14px 28px;
  border: 0; border-radius: var(--r-sm);
  background: var(--degradado-azul); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; line-height: 1.2;
  text-transform: uppercase; white-space: nowrap; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), var(--sombra-azul);
  transition: filter .2s, transform .15s, box-shadow .2s;
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.99); filter: brightness(.97); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; filter: none; }

.btn-fantasma {
  background: var(--papel); background-image: none; color: var(--azul);
  border: 1px solid var(--linea); box-shadow: none;
}
.btn-fantasma:hover { border-color: rgba(37, 99, 235, .45); background: var(--hielo); filter: none; }

.btn-wa { background: #25D366; background-image: none; box-shadow: var(--sombra-baja); color: #07301A; }
.btn-wa:hover { background: #1FBE5B; }

.enlace-sutil {
  font-size: .78rem; font-weight: 700; color: var(--texto-3);
  border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.enlace-sutil:hover { color: var(--azul); border-bottom-color: var(--azul); }

/* ── Chips ── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* Soft Mint sobre Navy: el brandbook lo destina a "chips, tags, badges"
   y certifica la pareja a 9.5:1 de contraste. */
.chip {
  display: inline-flex; align-items: center; padding: 6px 14px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: var(--menta); color: #0F172A;
  font-family: var(--fuente-et); font-size: .68rem; white-space: nowrap;
}
html[data-tema="oscuro"] .chip { color: #A7F3D0; border-color: #24513F; }

/* ══════════════════════════════════════════════════════════════
   CABECERA
   Fija, con fondo translúcido. En escritorio: logo | enlaces | CTA.
   En móvil el logo se centra y los enlaces pasan al panel plegable.
   ══════════════════════════════════════════════════════════════ */
.cabecera {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: color-mix(in srgb, var(--fondo) 94%, transparent);
  border-bottom: 1px solid var(--linea);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  transition: background .25s, box-shadow .25s, border-color .25s;
}
.cabecera.con-scroll { box-shadow: 0 10px 28px rgba(15, 23, 42, .10); }

.nav {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 18px;
  max-width: 1280px; margin: 0 auto; padding: 8px clamp(14px, 3vw, 28px);
  min-height: var(--alto-header);
}
.nav-marca { display: flex; align-items: center; gap: 10px; justify-self: start; min-width: max-content; }
.nav-marca img { height: 46px; width: auto; }
.nav-marca span { font-size: 1.05rem; font-weight: 800; color: var(--azul); white-space: nowrap; }

.nav-enlaces { display: flex; align-items: center; justify-content: center; gap: 2px; min-width: 0; }
.nav-enlace {
  padding: 9px 11px; border-radius: var(--r-pill);
  font-size: .78rem; font-weight: 700; color: var(--texto-2); white-space: nowrap;
  transition: background .2s, color .2s;
}
.nav-enlace:hover { background: var(--hielo); color: var(--azul); }
.nav-enlace.activo { background: var(--hielo); color: var(--azul); }

.nav-acciones { display: flex; align-items: center; gap: 10px; justify-self: end; }
.nav-cta { min-height: 44px; padding: 11px 20px; border-radius: var(--r-pill); font-size: 11px; }

.nav-icono {
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--linea); border-radius: var(--r-sm);
  background: var(--papel); color: var(--texto-2); cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
  position: relative;
}
.nav-icono:hover { border-color: var(--azul); background: var(--azul); color: #fff; }
.nav-icono svg { display: block; }
/* El sol solo aparece en modo oscuro; la luna, en claro */
[data-tema-btn] .ico-sol { display: none; }
html[data-tema="oscuro"] [data-tema-btn] .ico-sol { display: block; }
html[data-tema="oscuro"] [data-tema-btn] svg:not(.ico-sol) { display: none; }
.nav-cuenta {
  position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px;
  display: grid; place-items: center; padding: 0 5px;
  border: 2px solid var(--fondo); border-radius: var(--r-pill);
  background: var(--azul); color: #fff; font-size: .58rem; font-weight: 800; line-height: 1;
}

.hamburguesa {
  display: none; width: 40px; height: 40px; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: 0; background: transparent; cursor: pointer;
}
.hamburguesa span { display: block; width: 24px; height: 2.5px; border-radius: 2px; background: var(--azul); transition: transform .25s, opacity .25s; }
.hamburguesa.abierta span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburguesa.abierta span:nth-child(2) { opacity: 0; }
.hamburguesa.abierta span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.menu-movil {
  display: none; flex-direction: column;
  padding: 16px clamp(14px, 4vw, 20px) 20px;
  border-top: 1px solid var(--linea); background: var(--fondo);
  box-shadow: 0 12px 20px rgba(15, 23, 42, .08);
}
.menu-movil.abierto { display: flex; }
.menu-movil-enlaces { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.menu-movil-enlace {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 9px 10px; border: 1px solid var(--linea); border-radius: var(--r-sm);
  background: var(--nieve); color: var(--texto-2);
  font-size: .82rem; font-weight: 700; text-align: center;
}
.menu-movil-enlace:hover, .menu-movil-enlace.activo { border-color: var(--azul); background: var(--hielo); color: var(--azul); }
.menu-movil-enlace.ancho { grid-column: 1 / -1; }
/* Con un número impar de enlaces el último quedaba suelto a media fila */
.menu-movil-enlaces a:last-child:nth-child(odd) { grid-column: 1 / -1; }
.menu-movil .btn { width: 100%; }

@media (max-width: 1080px) { .nav-enlace { font-size: .72rem; padding: 8px 8px; } }
@media (max-width: 940px) {
  .nav { grid-template-columns: auto 1fr auto; min-height: 64px; }
  .nav-enlaces { display: none; }
  .hamburguesa { display: flex; }
  .nav-marca { grid-column: 2; justify-self: center; }
  .nav-marca img { height: 40px; }
  .nav-marca span { display: none; }
  .nav-cta { display: none; }
  :root { --alto-header: 64px; }
}

/* Deja sitio a la cabecera fija */
.contenido { padding-top: var(--alto-header); }
body.menu-abierto { overflow: hidden; }

/* ══════════════════════════════════════════════════════════════
   FRANJA DE VISITA — el bloque de contacto rápido antes del pie
   ══════════════════════════════════════════════════════════════ */
.franja { background: var(--superficie-oscura); color: var(--sobre-oscura); padding: clamp(24px, 3vw, 34px) 0; border-bottom: 1px solid var(--linea-oscura); }
html[data-tema="oscuro"] .franja { border-top: 1px solid var(--linea); }
.franja-in { display: flex; align-items: center; gap: 16px clamp(20px, 3.5vw, 44px); flex-wrap: wrap; }
.franja-dato { min-width: 150px; }
.franja-et {
  display: block; margin-bottom: 4px;
  font-family: var(--fuente-et); font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sobre-oscura-3);
}
.franja-val { font-size: .9rem; font-weight: 700; color: var(--sobre-oscura); }
a.franja-val:hover { color: #93B4F8; }
.franja-acciones { display: flex; gap: 12px; margin-left: auto; flex-wrap: wrap; }
.franja .btn-fantasma { background: transparent; color: var(--sobre-oscura); border-color: var(--linea-oscura); }
.franja .btn-fantasma:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
@media (max-width: 760px) { .franja-acciones { margin-left: 0; width: 100%; } .franja .btn { flex: 1; } .franja-dato { min-width: 0; flex: 1 1 160px; } }

/* ══════════════════════════════════════════════════════════════
   PIE
   Minimalista a propósito: marca, servicios, navegación y una barra
   inferior. El correo, el WhatsApp y la ubicación NO se repiten aquí
   porque ya están en la franja justo encima.
   ══════════════════════════════════════════════════════════════ */
.pie { background: var(--superficie-oscura); color: var(--sobre-oscura-2); padding: clamp(36px, 4vw, 52px) 0 20px; }
.pie-grid {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr;
  gap: clamp(24px, 4vw, 56px); padding-bottom: 28px;
  border-bottom: 1px solid var(--linea-oscura);
}
.pie-logo { height: 34px; width: auto; margin-bottom: 14px; filter: brightness(0) invert(1); }
.pie-lema { font-size: .8rem; font-weight: 300; line-height: 1.7; max-width: 40ch; }
.pie-titulo {
  margin-bottom: 12px; font-family: var(--fuente-et);
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sobre-oscura);
}
.pie-lista li + li { margin-top: 7px; }
.pie-lista a { font-size: .8rem; transition: color .2s; }
.pie-lista a:hover { color: #93B4F8; }
.pie-social { display: flex; gap: 8px; }
.pie-social a {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--linea-oscura); border-radius: var(--r-sm);
  transition: background .2s, border-color .2s;
}
.pie-social a:hover { background: var(--azul); border-color: var(--azul); color: var(--sobre-oscura); }
.pie-social svg { width: 16px; height: 16px; }
.pie-abajo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 24px; flex-wrap: wrap; padding-top: 18px; font-size: .74rem;
}
.pie-abajo a:hover { color: var(--sobre-oscura); }
.pie-legal { display: flex; gap: 18px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .pie { padding-bottom: 92px; }
  .pie-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .pie-marca { grid-column: 1 / -1; }
  .pie-abajo { justify-content: center; text-align: center; }
}

/* ══════════════════════════════════════════════════════════════
   DOCK DE WHATSAPP
   Igual que en el sitio original: burbuja de invitación y botón
   redondo verde de 60px con el latido suave. El glifo es el oficial
   de la marca (Simple Icons), no una aproximación dibujada a mano.
   ══════════════════════════════════════════════════════════════ */
.wsp-dock {
  position: fixed; right: 24px; bottom: 24px; z-index: 95;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.wsp-burbuja {
  padding: 9px 16px;
  border: 1px solid var(--linea); border-radius: 18px 18px 4px 18px;
  background: var(--papel); color: var(--tinta);
  box-shadow: var(--sombra);
  font-size: .8rem; font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.wsp-btn {
  width: 60px; height: 60px; display: grid; place-items: center;
  border-radius: 50%; background: #25D366; color: #fff;
  box-shadow: 0 8px 28px rgba(37, 211, 102, .46);
  animation: wsp-latido 2.8s ease-in-out infinite;
  transition: transform .2s var(--curva), box-shadow .2s;
}
.wsp-btn:hover { transform: scale(1.08); box-shadow: 0 12px 34px rgba(37, 211, 102, .56); animation: none; }
@keyframes wsp-latido {
  0%, 100% { box-shadow: 0 8px 28px rgba(37, 211, 102, .46), 0 0 0 0 rgba(37, 211, 102, .34); }
  50%      { box-shadow: 0 8px 28px rgba(37, 211, 102, .46), 0 0 0 14px rgba(37, 211, 102, 0); }
}
@media (prefers-reduced-motion: reduce) { .wsp-btn { animation: none; } }
@media (max-width: 600px) {
  .wsp-dock { right: 16px; bottom: 16px; }
  .wsp-burbuja { display: none; }
  .wsp-btn { width: 54px; height: 54px; }
  .wsp-btn svg { width: 27px; height: 27px; }
}

/* ══════════════════════════════════════════════════════════════
   APARICIÓN AL HACER SCROLL

   Reglas que sigue todo esto:
   · Solo se anima `opacity` y `transform`. Nada que obligue al
     navegador a recalcular la maquetación mientras se hace scroll.
   · Duraciones cortas (260-380ms). Una aparición que se nota es una
     aparición que estorba.
   · Por defecto TODO se ve. La clase .anima la pone el JS, y solo en
     escritorio: si el JS no corre, no hay nada oculto esperándolo.
   · En móvil no se anima nada. Ver el bloque del final.
   ══════════════════════════════════════════════════════════════ */
.aparece.anima {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity .32s var(--curva), transform .38s var(--curva);
  will-change: opacity, transform;
}
.aparece.anima.visible { opacity: 1; transform: none; will-change: auto; }

/* Escalonado: cada hijo entra un pelín después que el anterior.
   Se corta en el sexto para que una rejilla larga no tarde una eternidad. */
.escalona > * { transition-delay: 0s; }
.escalona.anima-hijos > *:nth-child(1) { transition-delay: .00s; }
.escalona.anima-hijos > *:nth-child(2) { transition-delay: .06s; }
.escalona.anima-hijos > *:nth-child(3) { transition-delay: .12s; }
.escalona.anima-hijos > *:nth-child(4) { transition-delay: .18s; }
.escalona.anima-hijos > *:nth-child(5) { transition-delay: .24s; }
.escalona.anima-hijos > *:nth-child(n+6) { transition-delay: .30s; }

.d1 { transition-delay: .06s; } .d2 { transition-delay: .12s; } .d3 { transition-delay: .18s; }

/* Variantes, para que no todo entre igual */
.aparece.desde-izq.anima { transform: translate3d(-16px, 0, 0); }
.aparece.desde-der.anima { transform: translate3d(16px, 0, 0); }
.aparece.crece.anima     { transform: scale(.985); }