/* ==========================================================================
   Dra. Sandy Pacheco · Medicina Materno Fetal
   Hoja de estilos principal

   ÍNDICE
   1.  Variables (colores, tipografías)  ← aquí cambias el branding
   2.  Reset y base
   3.  Layout (contenedores y secciones)
   4.  Componentes: botones, etiquetas, imágenes
   5.  Header y navegación
   6.  Hero (inicio)
   7.  Sobre mí
   8.  Servicios (tarjetas)
   9.  Costos
   10. Preguntas frecuentes
   11. Contacto y mapa
   12. Footer
   13. Botón flotante de WhatsApp
   14. Página de servicio (SEO local)
   15. Responsive (tablet y móvil)
   16. Accesibilidad (movimiento reducido)

   REGLA DE BRANDING: el color --plum se usa SÓLIDO. Única excepción: el brillo
   radial del hero (sección 6), que nace de la foto de la doctora.
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES
   ========================================================================== */
:root {
  /* Colores de marca */
  --plum: #6D2A41;          /* color principal (siempre sólido) */
  --plum-deep: #4A1B2C;     /* versión oscura: hover y franja del hero */
  --plum-light: #A5607A;    /* versión clara: centro del brillo del hero */
  --rose: #CE9193;
  --sand: #BCA494;
  --taupe: #897D71;

  /* Neutros */
  --cream: #F8F2EF;         /* fondo general */
  --cream-dark: #F1E4E3;    /* fondo de la sección contacto */
  --white: #FFFFFF;
  --ink: #2B1A27;           /* texto principal */
  --muted: #6A5E58;         /* texto secundario */
  --line: rgba(109, 42, 65, .16);

  /* Otros */
  --whatsapp: #138A43;
  --whatsapp-dark: #0F6F36;

  /* Tipografías (Sofia Pro es de pago: Jost es la alternativa gratuita) */
  --serif: 'Antic Didone', 'Didot', 'Bodoni MT', Georgia, serif;
  --sans: 'Jost', 'Poppins', 'Helvetica Neue', Arial, sans-serif;

  /* Medidas */
  --container: 1180px;
  --header-height: 96px;
}


/* ==========================================================================
   2. RESET Y BASE
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

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

svg {
  display: block;
  flex: none;
}

a {
  color: inherit;
}

ul {
  list-style: none;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.01em;
}

:focus-visible {
  outline: 3px solid var(--rose);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Evita desbordes de texto en pantallas pequeñas */
main * > * { min-width: 0; }
li, dd, p, h1, h2, h3 { overflow-wrap: anywhere; }

/* Quita el triángulo por defecto de <details> */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* Enlace "saltar al contenido" (accesibilidad) */
.skip {
  position: absolute;
  left: -999px;
}
.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 100;
  background: var(--white);
  padding: 8px 14px;
  border-radius: 8px;
}


/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.wrap {
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
}

.sec {
  padding: 110px 0;
}
.sec h2 {
  font-size: clamp(2.1rem, 4vw, 3.4rem);
}

.kicker {
  display: block;
  color: var(--plum);
  font-weight: 500;
  margin-bottom: .7rem;
}


/* ==========================================================================
   4. COMPONENTES
   ========================================================================== */

/* --- Botones ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.45rem;
  border-radius: 999px;
  font: 500 .95rem/1.2 var(--sans);
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}

.btn.solid { background: var(--plum); color: var(--white); }
.btn.solid:hover { background: var(--plum-deep); }

.btn.light { background: var(--white); color: var(--plum); }
.btn.light:hover { background: var(--cream); }

.btn.ghost { border-color: currentColor; background: transparent; }
.btn.ghost:hover { background: rgba(255, 255, 255, .14); }

.btn.line { border-color: var(--plum); color: var(--plum); }
.btn.line:hover { background: var(--plum); color: var(--white); }

/* --- Etiqueta (píldora) ------------------------------------------------- */
.tag {
  display: inline-block;
  padding: .4rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .3);
  font-size: .9rem;
  margin-bottom: 1.4rem;
}

/* --- Marco de imagen ("ph") --------------------------------------------- */
/* Contenedor con color sólido de fondo mientras carga la imagen */
.ph {
  position: relative;
  overflow: hidden;
  background: #E5D6CE;
  border-radius: 20px;
}
.ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ==========================================================================
   5. HEADER Y NAVEGACIÓN
   ========================================================================== */
.bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.bar .wrap {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 12px 0;
}

/* Logo (imagen). Reemplaza images/logo.png y images/logo_blanco.png */
.brand {
  display: block;
  line-height: 0;
  text-decoration: none;
}
.brand img {
  height: 64px;
  width: auto;
}

.bar nav {
  margin-left: auto;
  display: flex;
  gap: 28px;
}
.bar nav a {
  text-decoration: none;
  font-size: .95rem;
}
.bar nav a:hover { color: var(--plum); }

/* Botón hamburguesa (solo móvil) */
.menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--plum);
  cursor: pointer;
  place-items: center;
}


/* ==========================================================================
   6. HERO (INICIO)
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--white);
  /* Brillo radial: claro en la foto de la doctora, se funde al color de marca.
     Cambia 74% 42% para mover el origen; --plum-light para el tono claro. */
  background: radial-gradient(ellipse 52% 95% at 74% 42%, var(--plum-light) 0%, var(--plum) 72%);
  padding: 90px 0 190px;
}

.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 60px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  margin-bottom: 1.4rem;
}
.hero p.lead {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, .88);
  max-width: 30em;
  margin-bottom: 2rem;
}
.hero .acts {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Foto del hero + insignias flotantes.
   Las insignias (.badge) llevan z-index mayor que la foto para
   quedar SIEMPRE encima de ella. */
.hero-ph {
  position: relative;
  z-index: 1;
}
/* Pulsos: círculos de luz que parecen emitirse desde la doctora.
   Animación muy sutil (escala + opacidad). Se desactiva con "movimiento reducido". */
.pulse {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .08) 45%, rgba(255, 255, 255, 0) 70%);
  animation: pulse 7s ease-in-out infinite;
}
.pulse.p1 { width: 120%; aspect-ratio: 1; left: -10%; top: 4%; }
.pulse.p2 { width: 80%;  aspect-ratio: 1; left: -26%; top: 40%; animation-delay: -2.3s; animation-duration: 8s; }
.pulse.p3 { width: 60%;  aspect-ratio: 1; right: -22%; top: -8%; animation-delay: -4.6s; animation-duration: 9s; }

@keyframes pulse {
  0%, 100% { transform: scale(.96); opacity: .55; }
  50%      { transform: scale(1.06); opacity: 1; }
}

/* Foto sin recuadro: el PNG con fondo transparente se ve completo sobre el color del hero */
.hero-ph .ph {
  z-index: 1;
  overflow: visible;
  background: none;
  border-radius: 0;
}
.hero-ph .ph img {
  position: static;
  width: 100%;
  height: auto;
  max-width: 480px;
  margin: 0 auto;
}

/* Escritorio: la foto ocupa TODO el alto del hero (compensa el padding del hero
   con márgenes negativos: arriba 90px, abajo 190px). Si cambias el padding de
   .hero, cambia también estos dos valores. */
@media (min-width: 1001px) {
  .hero-ph {
    align-self: stretch;
    margin: -90px 0 -190px;
  }
  .hero-ph .ph {
    height: 100%;
  }
  .hero-ph .ph img {
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center bottom;
    transform: scale(1.12);          /* tamaño de la foto: 1 = ajustado al hero, mayor = más grande */
    transform-origin: center bottom;
  }
  .hero-ph .badge.t { top: 130px; }
  .hero-ph .badge.b { bottom: 260px; }
}

.badge {
  position: absolute;
  z-index: 3;                    /* encima de la foto */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: .7rem 1.1rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, .95);
  color: var(--ink);
  box-shadow: 0 14px 34px rgba(30, 5, 25, .25);
  font-size: .9rem;
  line-height: 1.3;
}
.badge b {
  display: block;
  font: 400 1.35rem/1 var(--serif);
  color: var(--plum);
}
.badge.t { top: 26px; left: -34px; }
.badge.b { bottom: 30px; right: -26px; }

/* Franja de instituciones (parte baja del hero) */
.glass {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 44px;
  transform: translateX(-50%);
  width: min(var(--container), calc(100% - 40px));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-radius: 26px;
  background: var(--plum-deep);
  border: 1px solid rgba(255, 255, 255, .3);
  overflow: hidden;
}
.glass div {
  padding: 26px 28px;
  border-right: 1px solid rgba(255, 255, 255, .25);
}
.glass div:last-child { border-right: 0; }

/* Logos de instituciones: se muestran en blanco sobre el fondo oscuro.
   Si tus logos ya son blancos, puedes borrar la línea "filter". */
.glass img {
  height: 40px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0) invert(1);
}
.glass span {
  display: block;
  font-size: .85rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, .85);
  margin-top: 10px;
}


/* ==========================================================================
   7. SOBRE MÍ
   ========================================================================== */
.about {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 80px;
  align-items: center;
}
.about p {
  margin-bottom: 1rem;
  max-width: 36em;
}
.about .sub {
  color: var(--plum);
  font-weight: 500;
  margin: .6rem 0 1.4rem;
}
.about small {
  display: block;
  color: var(--muted);
  margin: 1.2rem 0 1.4rem;
}

.about-ph {
  position: relative;
  padding: 34px;
}
.blob {
  position: absolute;
  inset: 0;
  z-index: 0;
  color: #EBD3D2;
}
.blob svg {
  width: 100%;
  height: 100%;
}
.about-ph .ph {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  border-radius: 26px;
}


/* ==========================================================================
   8. SERVICIOS (TARJETAS)
   ========================================================================== */
.services { background: var(--white); }

.s-head {
  max-width: 40em;
  margin-bottom: 46px;
}
.s-head p {
  color: var(--muted);
  margin-top: 1rem;
}

.s-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.s-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  background: var(--white);
  border: 1.5px solid rgba(109, 42, 65, .2);
  border-radius: 22px;
  transition: border-color .2s, box-shadow .2s;
}
.s-card:hover {
  border-color: var(--plum);
  box-shadow: 0 14px 34px rgba(109, 42, 65, .1);
}
.s-card .i { color: var(--plum); }
.s-card h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  font-size: 1.5rem;
}
.s-card h4 a { text-decoration: none; }
.s-card h4 a:hover { color: var(--plum); }

/* Imagen de la tarjeta (proporción 1:1), pegada a los bordes de la carta.
   Los márgenes negativos anulan el padding (28px) de .s-card. */
.s-card { overflow: hidden; }
.s-card .s-img {
  aspect-ratio: 1 / 1;
  border-radius: 0;
  margin: -28px -28px 0;
}

/* Títulos de grupo: Consultas / Ultrasonidos */
.s-group {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: var(--plum);
  margin: 0 0 22px;
}
.s-group:not(:first-of-type) { margin-top: 56px; }
.s-card > p {
  color: var(--muted);
  font-size: .97rem;
  line-height: 1.55;
}

/* Desplegable "Para quién y cuándo acudir" */
.s-card details {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.s-card summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  color: var(--plum);
  font-size: .95rem;
}
.s-card summary svg { transition: transform .2s; }
.s-card details[open] summary svg { transform: rotate(45deg); }
.s-card details p {
  font-size: .92rem;
  color: var(--muted);
  margin-top: .8rem;
  line-height: 1.55;
}
.s-card details p b { color: var(--ink); }

/* Enlace hacia la página del servicio */
.s-more {
  font-weight: 500;
  color: var(--plum);
  text-decoration: none;
  font-size: .95rem;
}
.s-more:hover { text-decoration: underline; }

/* Tarjeta con llamado a la acción */
.s-card.cta {
  background: var(--plum);
  border-color: var(--plum);
  color: var(--white);
  justify-content: center;
}
.s-card.cta:hover { box-shadow: none; }
.s-card.cta > p { color: rgba(255, 255, 255, .85); }


/* ==========================================================================
   9. COSTOS
   ========================================================================== */
.cost-in {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 70px;
  align-items: start;
}
.cost-in > div:first-child p {
  color: var(--muted);
  margin-top: 1rem;
  max-width: 28em;
}

.price {
  background: var(--white);
  border-radius: 26px;
  padding: 10px 32px;
  border: 1px solid var(--line);
}
.price li {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line);
}
.price li:last-child { border-bottom: 0; }
.price li b {
  font: 400 1.9rem/1 var(--serif);
  color: var(--plum);
  white-space: nowrap;
}

.pay {
  margin-top: 1.4rem;
  color: var(--plum);
  font-weight: 500;
}


/* ==========================================================================
   10. PREGUNTAS FRECUENTES
   ========================================================================== */
.faq-sec { padding-top: 80px; }

.faq-wrap {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 70px;
}
.faq-wrap > div:first-child > p {
  color: var(--muted);
  margin: 1rem 0 1.6rem;
}

.faq details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  margin-bottom: 12px;
  padding: 0 24px;
}
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 1.2rem 0;
  font-weight: 500;
}
.faq summary svg {
  color: var(--plum);
  transition: transform .2s;
}
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p {
  padding: 0 0 1.3rem;
  color: var(--muted);
}


/* ==========================================================================
   11. CONTACTO Y MAPA
   ========================================================================== */
.contact { background: var(--cream-dark); }

.contact .intro {
  color: var(--muted);
  max-width: 44em;
  margin-top: 1rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 1.4rem 0 0;
}
.chips li {
  padding: .45rem 1.1rem;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  font-size: .92rem;
}

.c-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 22px;
  margin-top: 40px;
  max-width: 100%;
}
.c-card {
  max-width: 100%;
  background: var(--white);
  border-radius: 28px;
  padding: 36px;
  border: 1px solid var(--line);
}
.c-card ul {
  display: grid;
  gap: 14px;
  margin-bottom: 10px;
}
.c-card li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.c-card li svg {
  color: var(--plum);
  margin-top: 3px;
}
.c-card li a.how {
  color: var(--plum);
}
.c-card h3 {
  font-size: 1.4rem;
  margin: 24px 0 8px;
}
.c-card .acts {
  margin-top: 26px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hours div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: .55rem 0;
  border-bottom: 1px solid var(--line);
}
.hours dt { color: var(--muted); }
.hours dd { text-align: right; font-weight: 500; }

.map {
  border-radius: 28px;
  overflow: hidden;
  min-height: 440px;
  background: #E6DAD0;
}
.map iframe {
  width: 100%;
  height: 100%;
  min-height: 440px;
  border: 0;
}


/* ==========================================================================
   12. FOOTER
   ========================================================================== */
footer {
  background: var(--plum);
  color: rgba(255, 255, 255, .82);
  padding: 64px 0 36px;
}
.f-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 50px;
}
.f-grid .about-text {
  margin-top: 1rem;
  max-width: 26em;
}
footer .brand img { height: 60px; }
footer h4 {
  font: 500 1rem var(--sans);
  color: var(--white);
  margin-bottom: .8rem;
}
footer li { margin-bottom: .4rem; }
footer a { text-decoration: none; }
footer a:hover { color: var(--white); text-decoration: underline; }

.legal {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: .85rem;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  flex-wrap: wrap;
}
.disclaimer {
  margin-top: 14px;
  font-size: .85rem;
}


/* ==========================================================================
   13. BOTÓN FLOTANTE DE WHATSAPP
   ========================================================================== */
.wa {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: .8rem 1.15rem;
  border-radius: 999px;
  background: var(--whatsapp);
  color: var(--white);
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.wa:hover { background: var(--whatsapp-dark); }


/* ==========================================================================
   14. PÁGINA DE SERVICIO (SEO LOCAL)
   ========================================================================== */

/* Migas de pan */
.crumbs {
  padding: 22px 0 0;
  font-size: .9rem;
  color: var(--muted);
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}
.crumbs li + li::before {
  content: "›";
  margin-right: 8px;
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--plum); text-decoration: underline; }

/* Cabecera de la página de servicio */
.s-hero {
  padding: 40px 0 80px;
}
.s-hero .wrap {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 60px;
  align-items: center;
}
.s-hero h1 {
  font-size: clamp(2.3rem, 4.6vw, 4rem);
  margin-bottom: 1.2rem;
  color: var(--plum);
}
.s-hero .lead {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 34em;
  margin-bottom: 1.8rem;
}
.s-hero .acts {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.s-hero .ph {
  aspect-ratio: 4 / 5;
  border-radius: 30px;
}

/* Contenido de texto */
.s-body {
  background: var(--white);
  padding: 90px 0;
}
.s-layout {
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 70px;
  align-items: start;
}
.s-body h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  margin: 2.4rem 0 1rem;
}
.s-body h2:first-child { margin-top: 0; }
.s-body p {
  color: var(--muted);
  margin-bottom: 1rem;
  max-width: 40em;
}
.s-body p b { color: var(--ink); }
.s-body ul.check {
  display: grid;
  gap: 10px;
  margin: 0 0 1rem;
}
.s-body ul.check li {
  position: relative;
  padding-left: 28px;
  color: var(--muted);
}
.s-body ul.check li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .55em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--plum);
}

/* Columna lateral */
.s-aside {
  position: sticky;
  top: calc(var(--header-height) + 10px);
  display: grid;
  gap: 18px;
}
.aside-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 26px;
}
.aside-card h3 {
  font-size: 1.35rem;
  margin-bottom: .6rem;
}
.aside-card p {
  font-size: .95rem;
  color: var(--muted);
  margin-bottom: 1rem;
}
.aside-card .btn { width: 100%; justify-content: center; }
.aside-price {
  font: 400 2.2rem/1 var(--serif);
  color: var(--plum);
  margin-bottom: .6rem;
}
.aside-card.plum {
  background: var(--plum);
  border-color: var(--plum);
  color: var(--white);
}
.aside-card.plum p { color: rgba(255, 255, 255, .85); }

/* Otros servicios */
.others { padding: 90px 0; }
.others h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom: 28px;
}
.others ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.others li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 1.1rem 1.4rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  text-decoration: none;
  font-weight: 500;
  transition: border-color .2s;
}
.others li a:hover { border-color: var(--plum); color: var(--plum); }


/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */

/* --- Tablet (hasta 1000px) --------------------------------------------- */
@media (max-width: 1000px) {
  .bar nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 14px;
    background: var(--white);
    padding: 20px;
    display: none;
    border-bottom: 1px solid var(--line);
  }
  .bar nav.open { display: flex; }
  .menu-btn { display: grid; margin-left: auto; }
  .bar .btn { display: none; }

  .hero {
    padding: 60px 0;
    background: radial-gradient(ellipse 90% 45% at 50% 68%, var(--plum-light) 0%, var(--plum) 75%);
  }
  .hero .wrap,
  .about,
  .cost-in,
  .faq-wrap,
  .c-grid,
  .s-hero .wrap,
  .s-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .glass {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    margin: 50px auto 0;
    grid-template-columns: 1fr 1fr;
  }
  .glass div:nth-child(2) { border-right: 0; }
  .glass div:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .25); }

  .badge.t { left: 10px; }
  .badge.b { right: 10px; }

  .s-grid { grid-template-columns: 1fr 1fr; }
  .f-grid { grid-template-columns: 1fr; }
  .sec { padding: 80px 0; }
  .s-aside { position: static; }
}

/* --- Móvil (hasta 640px) ----------------------------------------------- */
@media (max-width: 640px) {
  .s-grid,
  .others ul { grid-template-columns: 1fr; }
}

/* --- Hero en móvil (hasta 640px): compacto y centrado ----------------------
   Orden: foto con rosa arriba, texto centrado abajo, logos sin textos. */
@media (max-width: 640px) {
  .hero { padding: 24px 0 32px; }
  .hero .wrap { gap: 18px; text-align: center; }

  .hero-ph {
    order: -1;                     /* la foto va primero */
    width: min(82%, 320px);
    margin: 0 auto;
  }
  .hero-ph .ph img { max-width: 100%; }
  .badge { padding: .5rem .8rem; font-size: .8rem; }
  .badge b { font-size: 1.1rem; }
  .badge.t { top: 8px; left: -14px; }
  .badge.b { bottom: 8px; right: -14px; }

  .hero .tag { margin-bottom: 1rem; font-size: .82rem; }
  .hero h1 { font-size: clamp(1.9rem, 8.5vw, 2.5rem); margin-bottom: 1rem; }
  .hero p.lead { margin: 0 auto 1.4rem; font-size: 1.02rem; }
  .hero .acts { justify-content: center; }

  /* Franja de instituciones: solo logos (el texto queda oculto visualmente
     pero sigue disponible para lectores de pantalla y buscadores) */
  .glass {
    margin-top: 28px;
    grid-template-columns: repeat(4, 1fr);   /* los 4 logos en una sola fila */
  }
  .glass div,
  .glass div:nth-child(-n+2) {
    position: relative;
    display: grid;
    place-items: center;
    padding: 14px 6px;
    border-bottom: 0;
  }
  .glass div:nth-child(2) { border-right: 1px solid rgba(255, 255, 255, .25); }
  .glass img {
    height: 22px;
    object-position: center;
  }
  .glass span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* --- Móvil pequeño (hasta 620px) --------------------------------------- */
@media (max-width: 620px) {
  .c-card { padding: 26px 22px; }
  .wa { right: 12px; bottom: 12px; padding: .7rem 1rem; }
}


/* ==========================================================================
   16. ACCESIBILIDAD
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}