/* ==========================================================================
   Dental Feliz Sevilla — hoja de estilos única
   Mobile-first. Sin frameworks, sin CDNs, sin dependencias.

   ÍNDICE
   0. Fuente autoalojada        7. Servicios y precios
   1. Tokens de marca           8. Sobre nosotros
   2. Base y utilidades         9. Equipo
   3. Botones                  10. Galería y visor
   4. Cabecera y menú          11. Opiniones
   5. Héroe                    12. Ubicación, horario y mapa
   6. Franja de confianza      13. Llamada final y pie
                               14. Barra móvil y WhatsApp
   ========================================================================== */

/* ── 0. FUENTE ────────────────────────────────────────────────────────────
   Inter (SIL Open Font License), subconjunto latino, autoalojada en woff2.
   Un solo archivo variable cubre de 400 a 700: una petición, 48 KB.        */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2-variations'),
       url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── 1. TOKENS DE MARCA ───────────────────────────────────────────────────
   Paleta «Lujo Clásico»: azul real + dorado.

   NOTA DE CONTRASTE (medida, no supuesta):
   · #957C3D sobre blanco = 4.0:1 → NO llega a AA para texto pequeño.
     Se usa solo como borde, icono o relleno decorativo.
   · Para TEXTO pequeño en dorado y para FONDO de botón con texto blanco se
     usa --acento-fuerte #806832: 5.3:1 sobre blanco y 4.8:1 sobre el gris de
     las tarjetas (#F4F4F4). El #867037 que proponía la marca cumple sobre
     blanco (4.8) pero se queda en 4.35 sobre ese gris, así que se oscureció
     un paso más para que el mismo dorado valga en los dos fondos.
   · Sobre el azul de marca, el dorado se aclara a --acento-claro #C6AC6A
     (6.2:1 sobre #002349): el dorado original ahí se queda en 3.6:1.       */
:root {
  --ink:            #002349;   /* oscuro de marca: cabecera, pie, titulares */
  --paper:          #FFFFFF;   /* fondo de página                          */
  --surface:        #F4F4F4;   /* tarjetas y secciones alternas            */
  --acento:         #957C3D;   /* bordes, iconos, rellenos decorativos     */
  --acento-fuerte:  #806832;   /* texto dorado y fondo de botón (AA)       */
  --acento-hover:   #665227;   /* botón dorado pulsado                     */
  --acento-claro:   #C6AC6A;   /* dorado sobre fondo azul                  */

  --texto:          #22384F;   /* cuerpo de texto sobre claro (9.6:1)      */
  --texto-suave:    #4A5C70;   /* secundario sobre claro (6.2:1)           */
  --sobre-ink:      #FFFFFF;   /* texto sobre el azul                      */
  --sobre-ink-suave:#D3DDE8;   /* secundario sobre el azul (11.4:1)        */

  --linea:          rgba(0, 35, 73, .12);
  --linea-fuerte:   rgba(0, 35, 73, .22);
  --linea-clara:    rgba(255, 255, 255, .18);

  --radio:      4px;
  --radio-lg:   8px;
  --sombra:     0 1px 2px rgba(0, 35, 73, .06), 0 8px 24px rgba(0, 35, 73, .06);
  --sombra-alta:0 2px 6px rgba(0, 35, 73, .08), 0 18px 40px rgba(0, 35, 73, .12);

  --wrap:       1200px;
  --gutter:     clamp(1.15rem, 5vw, 2.5rem);
  --seccion-y:  clamp(3.5rem, 8vw, 7rem);
  --alto-barra: 4.25rem;       /* barra fija inferior en móvil             */

  --fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ── 2. BASE Y UTILIDADES ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;   /* la cabecera fija no tapa el destino del ancla */
}

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--texto);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  /* Hueco para la barra fija de móvil: nada queda tapado */
  padding-bottom: var(--alto-barra);
}

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

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
}
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--acento-fuerte); }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--acento-fuerte);
  outline-offset: 3px;
  border-radius: 2px;
}

ul { margin: 0; padding: 0; list-style: none; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.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;
}

.skip-link {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--radio) var(--radio);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { transform: translate(-50%, 0); }

.eyebrow {
  margin: 0 0 .75rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acento-fuerte);
}
.hero .eyebrow { color: var(--acento-claro); }

.enlace {
  color: var(--acento-fuerte);
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}
.enlace:hover { color: var(--ink); }

/* Enlaces que van solos (no dentro de una frase) y por tanto se pulsan con el
   dedo: se les da alto de área táctil sin cambiar cómo se ven. */
.enlace-tap { display: inline-flex; align-items: center; min-height: 44px; }

.nota { color: var(--texto-suave); font-size: .9375rem; }

/* Bloques anchos (tablas) con scroll propio: la página nunca se desborda */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Aparición suave al entrar en pantalla (se anula si se pide menos animación) */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.visible { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.visible { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── 3. BOTONES ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;                 /* área táctil cómoda */
  padding: .8rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--radio);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:active { transform: translateY(1px); }

/* Dorado AA: fondo #867037 + texto blanco = 4.8:1 */
.btn--acento { background: var(--acento-fuerte); color: var(--paper); }
.btn--acento:hover { background: var(--acento-hover); color: var(--paper); }

.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #001b39; }

/* Sobre el héroe oscuro: contorno claro */
.btn--fantasma {
  background: rgba(255, 255, 255, .06);
  color: var(--paper);
  border-color: rgba(255, 255, 255, .55);
}
.btn--fantasma:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.btn--sm { min-height: 44px; padding: .6rem 1.15rem; font-size: .9375rem; }
.btn--lg { padding: 1rem 2.25rem; font-size: 1.0625rem; }

/* ── 4. CABECERA Y MENÚ ─────────────────────────────────────────────────── */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  border-bottom: 1px solid var(--linea-clara);
}
.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--paper);
  text-decoration: none;
  padding-block: .35rem;
}
.marca__icono {
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  flex: 0 0 auto;
  border: 1px solid var(--acento);
  border-radius: 50%;
}
.marca__icono svg { width: 1.15rem; height: 1.15rem; fill: var(--acento-claro); }
.marca__texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca__nombre { font-weight: 700; font-size: 1.0625rem; letter-spacing: -.015em; }
.marca__claim {
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--acento-claro);
}

.hamburguesa {
  display: grid;
  place-content: center;
  gap: 5px;
  width: 48px; height: 48px;        /* área táctil ≥44px */
  margin-right: -.5rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.hamburguesa span {
  display: block;
  width: 22px; height: 2px;
  background: var(--paper);
  transition: transform .25s ease, opacity .2s ease;
}
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menú móvil: cajón desplegable bajo la cabecera */
.nav {
  position: fixed;
  inset: 4rem 0 auto 0;
  max-height: calc(100dvh - 4rem);
  overflow-y: auto;
  background: var(--ink);
  border-bottom: 1px solid var(--linea-clara);
  padding: .5rem var(--gutter) 1.5rem;
  transform: translateY(-115%);
  transition: transform .28s ease;
  visibility: hidden;
}
.nav.abierto { transform: translateY(0); visibility: visible; }

.nav__lista { display: flex; flex-direction: column; }
.nav__enlace {
  display: block;
  padding: .9rem 0;                 /* ≥44px de alto táctil */
  color: var(--paper);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--linea-clara);
}
.nav__enlace:hover { color: var(--acento-claro); }

.nav__acciones {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-top: 1.25rem;
}
.tel-cabecera {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  color: var(--acento-claro);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .01em;
}
.tel-cabecera:hover { color: var(--paper); }

.fondo-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 20, 42, .55);
  opacity: 0;
  transition: opacity .28s ease;
}
.fondo-menu.abierto { opacity: 1; }

body.sin-scroll { overflow: hidden; }

/* ── 5. HÉROE ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 62svh;
  padding-block: clamp(2.5rem, 8vw, 5.5rem);
  background: var(--ink);
  color: var(--sobre-ink);
  overflow: hidden;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Velo azul: garantiza que el texto se lea sobre cualquier fotografía */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(0, 20, 42, .95) 0%, rgba(0, 25, 52, .90) 45%, rgba(0, 35, 73, .74) 100%);
}
.hero__contenido { max-width: 46rem; }
.hero__titulo {
  margin-bottom: .75rem;
  font-size: clamp(1.9rem, 7.2vw, 3.6rem);
  color: var(--paper);
}
.hero__lead {
  margin-bottom: 1.75rem;
  max-width: 34rem;
  font-size: clamp(1rem, 2.6vw, 1.1875rem);
  color: var(--sobre-ink-suave);
}
.hero__botones { display: flex; flex-direction: column; gap: .75rem; }
.hero__botones .btn { width: 100%; }
.hero__nota {
  margin-top: 1.25rem;
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--sobre-ink-suave);
}

/* ── 6. FRANJA DE CONFIANZA ─────────────────────────────────────────────── */
.confianza {
  background: var(--surface);
  border-bottom: 1px solid var(--linea);
  padding-block: clamp(2rem, 5vw, 3rem);
}
.confianza__lista {
  display: grid;
  gap: 1.25rem 2rem;
  grid-template-columns: 1fr;
}
.confianza__item { padding-left: 1rem; border-left: 2px solid var(--acento); }
.confianza__titulo { margin: 0 0 .15rem; font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.confianza__texto { margin: 0; font-size: .9375rem; color: var(--texto-suave); }

/* ── 7. SECCIONES Y CARTA DE SERVICIOS ──────────────────────────────────── */
.seccion { padding-block: var(--seccion-y); }
.seccion--surface { background: var(--surface); }

.seccion__cab { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.seccion__titulo { font-size: clamp(1.65rem, 5.2vw, 2.6rem); margin-bottom: .5rem; }
.seccion__lead { font-size: 1.0625rem; color: var(--texto-suave); margin: 0; }

.seccion__pie {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linea);
}
.seccion__pie .btn { width: 100%; }

.cartas { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }

.carta {
  background: var(--paper);
  border: 1px solid var(--linea);
  border-top: 3px solid var(--acento);
  border-radius: var(--radio);
  padding: clamp(1.25rem, 4vw, 2rem);
  box-shadow: var(--sombra);
}
.seccion--surface .carta { background: var(--paper); }
.carta__titulo {
  margin: 0 0 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--linea);
  font-size: 1.125rem;
  letter-spacing: .01em;
}

.precios { display: flex; flex-direction: column; }
.precio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem 1rem;
  padding: .9rem 0;
  border-bottom: 1px dashed var(--linea);
}
.precio:last-child { border-bottom: 0; padding-bottom: 0; }
.precio__main { flex: 1 1 14rem; min-width: 0; }
.precio__nombre { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.precio__desc { margin: .15rem 0 0; font-size: .875rem; color: var(--texto-suave); }
.precio__meta {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin: 0;
  flex: 0 0 auto;
}
.precio__tiempo {
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-suave);
  white-space: nowrap;
}
.precio__valor {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--acento-fuerte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── 8. SOBRE NOSOTROS ──────────────────────────────────────────────────── */
.sobre { display: grid; gap: clamp(2rem, 6vw, 4rem); grid-template-columns: 1fr; }
.sobre__texto p { color: var(--texto); }
.sobre__figura { margin: 0; order: -1; }
.sobre__figura img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.valores { display: grid; gap: 1rem; margin: 2rem 0; }
.valor { padding-left: 1.1rem; border-left: 2px solid var(--acento); }
.valor__titulo { margin: 0 0 .1rem; font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.valor__texto { margin: 0; font-size: .9375rem; color: var(--texto-suave); }

.cita {
  margin: 0;
  padding: 1.5rem;
  background: var(--paper);
  border-left: 3px solid var(--acento);
  border-radius: 0 var(--radio) var(--radio) 0;
  box-shadow: var(--sombra);
}
.cita p { font-size: 1.0625rem; font-style: italic; color: var(--ink); }
.cita footer { margin-top: .5rem; font-size: .875rem; color: var(--texto-suave); }

/* ── 9. EQUIPO ────────────────────────────────────────────────────────────
   El equipo lo manda el panel: hoy hay una persona y mañana pueden ser cinco.
   La rejilla se adapta al número real y centra las tarjetas cuando son pocas,
   para que una clínica pequeña no muestre una tarjeta descolgada. */
.equipo { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
.equipo:has(> :only-child) { grid-template-columns: minmax(0, 22rem); justify-content: center; }
.miembro {
  background: var(--paper);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
}
.miembro__foto {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--surface);
}
.miembro__cuerpo { padding: 1.25rem 1.25rem 1.5rem; }
.miembro__nombre { margin: 0 0 .15rem; font-size: 1.125rem; }
.miembro__rol {
  margin: 0 0 .6rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acento-fuerte);
}
.miembro__bio { margin: 0; font-size: .9375rem; color: var(--texto-suave); }

/* ── 10. GALERÍA Y VISOR ────────────────────────────────────────────────── */
.galeria { display: grid; gap: .75rem; grid-template-columns: repeat(2, 1fr); }
.galeria__enlace {
  display: block;
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--paper);
}
.galeria__enlace img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .45s ease;
}
.galeria__enlace:hover img { transform: scale(1.04); }
/* Franja sólida, no un degradado: sobre una foto clara el desvanecido dejaba
   el texto en 1.7:1. Con el velo uniforme se lee igual sea cual sea la foto
   que ponga la clínica (medido: 10.9:1). */
.galeria__pie {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: .55rem .75rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--paper);
  background: rgba(0, 20, 42, .88);
}

/* Visor: <dialog> nativo → foco atrapado y cierre con Escape sin JS extra */
.visor {
  width: min(96vw, 1100px);
  max-width: 96vw;
  max-height: 94dvh;
  padding: 0;
  border: 0;
  border-radius: var(--radio-lg);
  background: transparent;
  color: var(--paper);
  overflow: visible;
}
.visor::backdrop { background: rgba(0, 20, 42, .92); }
.visor__img {
  width: 100%;
  max-height: 78dvh;
  object-fit: contain;
  border-radius: var(--radio);
  background: var(--ink);
}
.visor__pie {
  margin: .75rem 0 0;
  text-align: center;
  font-size: .9375rem;
  color: var(--sobre-ink-suave);
}
.visor__cerrar,
.visor__nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  background: rgba(0, 20, 42, .72);
  color: var(--paper);
  border: 1px solid var(--linea-clara);
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.visor__cerrar:hover, .visor__nav:hover { background: var(--acento-fuerte); }
.visor__cerrar { top: -52px; right: 0; }
.visor__nav--prev { left: .5rem; top: calc(50% - 22px); }
.visor__nav--next { right: .5rem; top: calc(50% - 22px); }

/* ── 11. OPINIONES ──────────────────────────────────────────────────────── */
.opiniones { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.opinion {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.seccion--surface .opinion { background: var(--paper); }
.opinion__estrellas { display: flex; gap: .15rem; color: var(--acento-fuerte); }
.opinion__estrellas svg { width: 1rem; height: 1rem; fill: currentColor; }
.opinion__texto { margin: 0; font-size: .9375rem; color: var(--texto); }
.opinion__pie { margin: 0; font-size: .875rem; }
.opinion__nombre { font-weight: 600; color: var(--ink); }
.opinion__trat { color: var(--texto-suave); }

.opiniones__media {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: 1.5rem;
  padding: .5rem .9rem;
  background: var(--surface);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  font-size: .9375rem;
  color: var(--texto-suave);
}
.seccion .opiniones__media strong { font-size: 1.25rem; color: var(--ink); }

/* ── 12. UBICACIÓN, HORARIO Y MAPA ──────────────────────────────────────── */
.ubicacion { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.ubicacion__sub {
  margin: 1.75rem 0 .5rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acento-fuerte);
}
.ubicacion__sub:first-child { margin-top: 0; }
.ubicacion__dir { font-size: 1.125rem; color: var(--ink); font-weight: 500; }
.ubicacion__contacto { margin-top: 1.75rem; }

.horario { width: 100%; border-collapse: collapse; min-width: 18rem; }
.horario th, .horario td {
  padding: .7rem 0;
  border-bottom: 1px solid var(--linea);
  text-align: left;
  font-size: .9375rem;
}
.horario th { font-weight: 500; color: var(--texto); }
.horario td { text-align: right; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.transporte { display: grid; gap: .5rem; }
.transporte li { font-size: .9375rem; color: var(--texto-suave); }
.transporte strong { color: var(--ink); font-weight: 600; }

.mapa {
  position: relative;
  display: grid;
  place-content: center;
  gap: .75rem;
  aspect-ratio: 4 / 3;
  padding: 1.5rem;
  text-align: center;
  background: var(--ink);
  border-radius: var(--radio);
  overflow: hidden;
}
.mapa__btn {
  justify-self: center;
  min-height: 48px;
  padding: .8rem 1.75rem;
  background: var(--paper);
  color: var(--ink);
  border: 0;
  border-radius: var(--radio);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.mapa__btn:hover { background: var(--acento-claro); }
.mapa__nota { margin: 0; font-size: .8125rem; color: var(--sobre-ink-suave); }
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── 13. LLAMADA FINAL Y PIE ────────────────────────────────────────────── */
.final { background: var(--ink); color: var(--sobre-ink); padding-block: var(--seccion-y); }
.final__caja { text-align: center; max-width: 44rem; }
.final__titulo { color: var(--paper); font-size: clamp(1.5rem, 5vw, 2.35rem); }
.final__lead { color: var(--sobre-ink-suave); margin-bottom: 2rem; }
.final .btn--acento { background: var(--paper); color: var(--ink); }
.final .btn--acento:hover { background: var(--acento-claro); color: var(--ink); }

.pie {
  background: #001B39;
  color: var(--sobre-ink-suave);
  padding-top: clamp(2.5rem, 6vw, 4rem);
  font-size: .9375rem;
}
.pie__rejilla { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.pie__marca { color: var(--paper); font-weight: 700; font-size: 1.0625rem; margin-bottom: .5rem; }
.pie__titulo {
  color: var(--paper);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: .75rem;
}
.pie__texto { margin: 0 0 .75rem; }
.pie__texto--sm { font-size: .875rem; margin-top: .75rem; }
.enlace-pie {
  display: inline-flex; align-items: center; min-height: 44px;   /* área táctil */
  color: var(--acento-claro); text-decoration: none;
}
.enlace-pie:hover { color: var(--paper); text-decoration: underline; }

.redes { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin-top: .5rem; }
.redes a {
  display: inline-flex; align-items: center; min-height: 44px;    /* área táctil */
  color: var(--acento-claro); text-decoration: none; font-weight: 500;
}
.redes a:hover { color: var(--paper); text-decoration: underline; }

.pie__legal {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-block: 1.25rem;
  border-top: 1px solid var(--linea-clara);
  font-size: .8125rem;
}
.pie__legal p { margin: 0 0 .35rem; }
.pie__aviso { color: var(--acento-claro); }

/* ── 14. BARRA MÓVIL Y WHATSAPP ─────────────────────────────────────────── */
.barra-movil {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 95;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: .5rem;
  padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom));
  background: var(--ink);
  border-top: 1px solid var(--linea-clara);
}
.barra-movil__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: var(--radio);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  color: var(--paper);
  border: 1px solid rgba(255, 255, 255, .5);
}
.barra-movil__btn--principal { background: var(--acento-fuerte); border-color: var(--acento-fuerte); }

.whatsapp {
  position: fixed;
  right: .9rem;
  bottom: calc(var(--alto-barra) + .75rem + env(safe-area-inset-bottom));
  z-index: 96;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  background: #1B7F5A;              /* verde oscurecido: 4.6:1 con el icono blanco */
  border-radius: 50%;
  box-shadow: var(--sombra-alta);
}
.whatsapp svg { width: 28px; height: 28px; fill: #FFFFFF; }
.whatsapp:hover { background: #146647; }

/* En móvil no aparece hasta pasar el héroe: si no, tapa el texto y compite
   con el botón de reserva justo donde más importa. */
@media (max-width: 899px) {
  .whatsapp {
    opacity: 0;
    visibility: hidden;
    transform: scale(.85);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .whatsapp.visible { opacity: 1; visibility: visible; transform: none; }
}

/* ── ≥ 600 px ───────────────────────────────────────────────────────────── */
@media (min-width: 600px) {
  .confianza__lista { grid-template-columns: repeat(2, 1fr); }
  .hero__botones { flex-direction: row; flex-wrap: wrap; }
  .hero__botones .btn { width: auto; }
  .seccion__pie { flex-direction: row; align-items: center; justify-content: space-between; }
  .seccion__pie .btn { width: auto; flex: 0 0 auto; }
  .galeria { grid-template-columns: repeat(3, 1fr); }
  .equipo { grid-template-columns: repeat(2, 1fr); }
  .opiniones { grid-template-columns: repeat(2, 1fr); }
  .valores { grid-template-columns: repeat(3, 1fr); }
  .pie__rejilla { grid-template-columns: repeat(2, 1fr); }
}

/* ── ≥ 900 px: se acaba el menú móvil ───────────────────────────────────── */
@media (min-width: 900px) {
  body { padding-bottom: 0; }              /* ya no hay barra fija */
  .barra-movil { display: none; }
  .whatsapp { bottom: 1.25rem; right: 1.25rem; }
  .hamburguesa { display: none; }

  .nav {
    position: static;
    display: flex;
    align-items: center;
    gap: 1.75rem;
    max-height: none;
    overflow: visible;
    padding: 0;
    transform: none;
    visibility: visible;
    background: none;
    border: 0;
  }
  .nav__lista { flex-direction: row; gap: 1.5rem; }
  .nav__enlace { padding: .5rem 0; border: 0; font-size: .9375rem; position: relative; }
  .nav__enlace::after {
    content: '';
    position: absolute;
    left: 0; right: 100%; bottom: .15rem;
    height: 1px;
    background: var(--acento-claro);
    transition: right .25s ease;
  }
  .nav__enlace:hover::after { right: 0; }
  .nav__acciones { flex-direction: row; align-items: center; gap: 1rem; margin: 0; }
  .fondo-menu { display: none; }

  .hero { min-height: 78svh; }
  .cartas { grid-template-columns: repeat(2, 1fr); }
  .sobre { grid-template-columns: 1.05fr .95fr; align-items: center; }
  .sobre__figura { order: 0; }
  .equipo { grid-template-columns: repeat(4, 1fr); }
  /* 1, 2 o 3 profesionales: columnas de ancho fijo y centradas */
  .equipo:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 20rem)); justify-content: center; }
  .equipo:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 18rem)); justify-content: center; }
  .galeria { grid-template-columns: repeat(4, 1fr); }
  .ubicacion { grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: start; }
  .pie__rejilla { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
  .confianza__lista { grid-template-columns: repeat(4, 1fr); }
  .opiniones { grid-template-columns: repeat(4, 1fr); }
  .visor__cerrar { top: -56px; right: -8px; }
}

@media (min-width: 1200px) {
  .cartas { grid-template-columns: repeat(3, 1fr); }
}

/* ── Impresión: solo el contenido útil ──────────────────────────────────── */
@media print {
  .reveal { opacity: 1 !important; transform: none !important; }   /* nada oculto al imprimir */
  .cabecera, .barra-movil, .whatsapp, .mapa, .hero__img, .final { display: none !important; }
  body { padding: 0; color: #000; }
  .hero::after { background: none; }
  .hero { color: #000; background: #fff; min-height: 0; }
  .hero__titulo, .hero__lead, .hero__nota { color: #000; }
}