/* =========================================================
   Dra. Rosario Miranda Olivares — Pediatra
   Sistema de diseño — derivado del logotipo de la marca
   Paleta: turquesa, rosa y amarillo (tomados del isotipo)
   Tipografía: Baloo 2 (títulos) + Nunito (texto) + Pacifico (acentos manuscritos)
   ========================================================= */

:root{
  /* --- Color: extraído y calibrado a partir del logotipo --- */
  --turquesa:        #1EB8A9;
  --turquesa-oscuro:  #22baab;
  --turquesa-tint:    #EAFBF8;
  --rosa:             #E94EA8;
  --rosa-oscuro:      #B5267E;
  --rosa-tint:        #FDEEF6;
  --amarillo:         #FBDE5E;
  --amarillo-oscuro:  #8A6B12;
  --amarillo-tint:    #FFF8E1;

  --tinta:            #20262B;
  --tinta-suave:      #5C6B70;
  --blanco:           #FFFFFF;
  --crema:            #FFFEFB;
  --borde:            #E6EFEC;

  --sombra-sm: 0 4px 14px rgba(32,38,43,.06);
  --sombra-md: 0 14px 34px rgba(13,110,100,.13);
  --sombra-lg: 0 26px 60px rgba(13,110,100,.18);

  --radio-sm: 14px;
  --radio-md: 22px;
  --radio-lg: 34px;
  --radio-pill: 999px;

  --fuente-display: 'Baloo 2', system-ui, sans-serif;
  --fuente-cuerpo: 'Nunito', system-ui, sans-serif;
  --fuente-script: 'Pacifico', cursive;

  --container: 1180px;
}

/* =================== Reset base =================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  font-family:var(--fuente-cuerpo);
  color:var(--tinta);
  background:var(--crema);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--fuente-display);
  color:var(--tinta);
  line-height:1.15;
  margin:0 0 .6em;
  font-weight:700;
}
p{ margin:0 0 1em; color:var(--tinta-suave); line-height:1.7; }
button{ font-family:inherit; }

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

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

section{ position:relative; padding:96px 0; }
@media (max-width: 767px){ section{ padding:64px 0; } }

.seccion-alt-turquesa{ background:var(--turquesa-tint); }
.seccion-alt-rosa{ background:var(--rosa-tint); }
.seccion-alt-amarillo{ background:var(--amarillo-tint); }

/* =================== Tipografía utilitaria =================== */
.ojo{
  font-family:var(--fuente-script);
  font-size:clamp(1.3rem,2vw,1.7rem);
  color:var(--rosa);
  display:inline-block;
  margin-bottom:.4rem;
  font-weight:400;
}
.titulo-seccion{
  font-size:clamp(1.9rem,3.4vw,2.7rem);
  max-width:640px;
}
.titulo-seccion.centrado{ margin-inline:auto; text-align:center; }
.subtexto{
  font-size:1.08rem;
  max-width:560px;
  color:var(--tinta-suave);
}
.subtexto.centrado{ margin-inline:auto; text-align:center; }
.acento-turquesa{ color:var(--turquesa-oscuro); }
.acento-rosa{ color:var(--rosa-oscuro); }
.acento-amarillo{ color:var(--amarillo-oscuro); }
.encabezado-flex{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:24px;
  margin-bottom:48px;
}

/* =================== Botones =================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--fuente-display);
  font-weight:600;
  font-size:1rem;
  padding:.85em 1.7em;
  border-radius:var(--radio-pill);
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-3px); }
.btn-primario{ background:var(--turquesa-oscuro); color:var(--blanco); box-shadow:var(--sombra-md); }
.btn-primario:hover{ background:#0a5b53; color:var(--blanco); }
.btn-rosa{ background:var(--rosa); color:var(--blanco); box-shadow:0 14px 30px rgba(233,78,168,.32); }
.btn-rosa:hover{ background:var(--rosa-oscuro); color:var(--blanco); }
.btn-outline{ background:transparent; border-color:var(--turquesa-oscuro); color:var(--turquesa-oscuro); }
.btn-outline:hover{ background:var(--turquesa-oscuro); color:var(--blanco); }
.btn-outline-rosa{ background:transparent; border-color:var(--rosa); color:var(--rosa-oscuro); }
.btn-outline-rosa:hover{ background:var(--rosa); color:var(--blanco); }
.btn-sm{ padding:.55em 1.2em; font-size:.9rem; }
.btn-block{ width:100%; }

/* =================== Navbar =================== */
.navbar{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,254,251,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--borde);
}
.navbar .container{ display:flex; align-items:center; justify-content:space-between; padding-top:12px; padding-bottom:12px; }
.navbar-marca{ display:flex; align-items:center; gap:10px; }
.navbar-marca img{ height:54px; width:auto; }
.navbar-links{ display:flex; align-items:center; gap:34px; }
.navbar-links a{
  font-family:var(--fuente-display); font-weight:600; font-size:.98rem; color:var(--tinta);
  position:relative; padding:6px 2px;
}
.navbar-links a::after{
  content:''; position:absolute; left:0; bottom:-2px; height:3px; width:0%;
  background:var(--rosa); border-radius:99px; transition:width .25s ease;
}
.navbar-links a:hover::after, .navbar-links a.activo::after{ width:100%; }
.navbar-links a.activo{ color:var(--turquesa-oscuro); }
.navbar-cta{ display:flex; align-items:center; gap:14px; }
.navbar-tel{ display:flex; align-items:center; gap:8px; font-family:var(--fuente-display); font-weight:700; color:var(--turquesa-oscuro); font-size:.95rem; }
.nav-toggle{
  display:none; flex-direction:column; background:none; border:none; padding:8px; cursor:pointer;
}
.nav-toggle span{ width:26px; height:3px; background:var(--tinta); border-radius:3px; transition:.25s; margin-bottom:5px; }
.nav-toggle span:last-child{ margin-bottom:0; }

@media (max-width: 991px){
  .navbar-links{
    position:absolute; top:100%; left:0; right:0; background:var(--blanco);
    flex-direction:column; align-items:flex-start; gap:6px; padding:18px 24px 24px;
    box-shadow:var(--sombra-md); border-bottom:1px solid var(--borde);
    max-height:0; overflow:hidden; opacity:0; pointer-events:none;
    transition:max-height .3s ease, opacity .25s ease;
  }
  .navbar-links.abierto{ max-height:420px; opacity:1; pointer-events:auto; padding-top:18px; }
  .navbar-links a{ padding:10px 0; width:100%; }
  .navbar-tel{ display:none; }
  .nav-toggle{ display:flex; }
}

/* =================== Hero =================== */
.hero{ padding:64px 0 40px; overflow:hidden; position:relative; }
.hero .container{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
@media (max-width: 991px){ .hero .container{ grid-template-columns:1fr; } }

.hero-blob{
  position:absolute; border-radius:50%; z-index:0; filter:blur(2px); opacity:.55;
  animation:flotar 9s ease-in-out infinite;
}
@keyframes flotar{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-16px) } }

.hero-texto{ position:relative; z-index:2; }
.hero-texto h1{ font-size:clamp(2.3rem,4.4vw,3.4rem); margin-bottom:.55em; }
.hero-texto h1 em{ font-style:normal; color:var(--turquesa-oscuro); position:relative; white-space:nowrap; }
.hero-credenciales{
  display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 30px;
}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--blanco); border:1.5px solid var(--borde);
  padding:8px 16px; border-radius:var(--radio-pill);
  font-size:.85rem; font-weight:700; color:var(--tinta);
  box-shadow:var(--sombra-sm);
}
.chip .punto{ width:8px; height:8px; border-radius:50%; }
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; }

.hero-visual{ position:relative; z-index:1; display:flex; justify-content:center; }
.hero-visual-marco{
  position:relative; width:min(100%,420px);
  background:var(--blanco); border-radius:var(--radio-lg);
  box-shadow:var(--sombra-lg); padding:34px;
  display:flex; align-items:center; justify-content:center;
}
.hero-visual-marco img{ width:100%; }
.hero-visual-tarjeta{
  position:absolute; background:var(--blanco); border-radius:var(--radio-md);
  box-shadow:var(--sombra-md); padding:14px 18px; display:flex; align-items:center; gap:10px;
  font-family:var(--fuente-display); font-weight:700; font-size:.85rem;
}
.hero-visual-tarjeta.t1{ top:-6%; left:-12%; color:var(--turquesa-oscuro); }
.hero-visual-tarjeta.t2{ bottom:6%; right:-14%; color:var(--rosa-oscuro); }
@media (max-width:560px){ .hero-visual-tarjeta{ display:none; } }

/* =================== Divisor ondulado =================== */
.divisor{ display:block; width:100%; height:auto; margin-top:-2px; }

/* =================== Iconos en círculo (extiende el lenguaje del isotipo) =================== */
.icono-circulo{
  width:74px; height:74px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px; flex-shrink:0;
}
.icono-circulo.turquesa{ background:var(--turquesa-tint); }
.icono-circulo.rosa{ background:var(--rosa-tint); }
.icono-circulo.amarillo{ background:var(--amarillo-tint); }
.icono-circulo svg{ width:36px; height:36px; }

/* =================== Tarjetas =================== */
.tarjeta{
  background:var(--blanco); border-radius:var(--radio-md);
  padding:38px 32px; height:100%;
  box-shadow:var(--sombra-sm);
  border:1px solid var(--borde);
  transition:transform .25s ease, box-shadow .25s ease;
}
.tarjeta:hover{ transform:translateY(-6px); box-shadow:var(--sombra-md); }
.tarjeta h3{ font-size:1.28rem; margin-bottom:.5em; }
.tarjeta p{ margin-bottom:0; font-size:.97rem; }

.grid{ display:grid; gap:30px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:991px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-3,.grid-4,.grid-2{ grid-template-columns:1fr; } }

/* =================== Pasos numerados =================== */
.pasos{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; position:relative; }
@media (max-width:767px){ .pasos{ grid-template-columns:1fr; } }
.paso{ text-align:center; position:relative; }
.paso-numero{
  width:64px; height:64px; border-radius:50%; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--fuente-display); font-weight:800; font-size:1.5rem;
  color:var(--blanco); box-shadow:var(--sombra-md);
}
.paso h3{ font-size:1.2rem; }
.paso p{ font-size:.95rem; max-width:280px; margin-inline:auto; }

/* =================== Precios =================== */
.precio-tarjeta{
  background:var(--blanco); border-radius:var(--radio-lg); padding:42px 34px;
  box-shadow:var(--sombra-sm); border:1px solid var(--borde); text-align:center; height:100%;
  display:flex; flex-direction:column;
}
.precio-tarjeta.destacada{ border:2px solid var(--turquesa); box-shadow:var(--sombra-md); position:relative; }
.precio-etiqueta{
  font-family:var(--fuente-display); font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  font-size:.82rem; color:var(--rosa-oscuro); margin-bottom:10px;
}
.precio-monto{ font-family:var(--fuente-display); font-weight:800; font-size:2.6rem; color:var(--tinta); }
.precio-monto small{ font-family:var(--fuente-cuerpo); font-weight:600; font-size:.95rem; color:var(--tinta-suave); }
.precio-lista{ margin:26px 0 30px; text-align:left; flex-grow:1; }
.precio-lista li{ display:flex; gap:10px; align-items:flex-start; margin-bottom:13px; font-size:.95rem; color:var(--tinta); }
.precio-lista svg{ flex-shrink:0; margin-top:3px; }
.precio-nota{ font-size:.83rem; color:var(--tinta-suave); margin-top:10px; }

/* =================== Citas / Testimonio-valores =================== */
.valor-tarjeta{
  background:var(--blanco); border-radius:var(--radio-md); padding:30px;
  box-shadow:var(--sombra-sm); border:1px solid var(--borde); height:100%;
}
.valor-tarjeta .ojo{ font-size:1.1rem; margin-bottom:14px; }

/* =================== Acordeón FAQ =================== */
.faq-item{
  background:var(--blanco); border:1px solid var(--borde); border-radius:var(--radio-md);
  margin-bottom:14px; overflow:hidden;
}
.faq-pregunta{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:22px 26px; font-family:var(--fuente-display); font-weight:700; font-size:1.05rem; color:var(--tinta);
}
.faq-pregunta .signo{
  flex-shrink:0; width:30px; height:30px; border-radius:50%; background:var(--turquesa-tint);
  display:flex; align-items:center; justify-content:center; transition:transform .25s ease, background .25s ease;
}
.faq-pregunta[aria-expanded="true"] .signo{ background:var(--turquesa); color:var(--blanco); transform:rotate(180deg); }
.faq-respuesta{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-respuesta-inner{ padding:0 26px 24px; font-size:.97rem; color:var(--tinta-suave); }

/* =================== Mapa / contacto =================== */
.contacto-tarjeta{
  background:var(--blanco); border-radius:var(--radio-lg); padding:36px;
  box-shadow:var(--sombra-md); border:1px solid var(--borde);
}
.contacto-item{ display:flex; gap:16px; align-items:flex-start; margin-bottom:24px; }
.contacto-item:last-child{ margin-bottom:0; }
.contacto-item h4{ font-size:1rem; margin-bottom:.25em; }
.contacto-item p{ margin-bottom:0; font-size:.95rem; }
.mapa-marco{
  border-radius:var(--radio-lg); overflow:hidden; box-shadow:var(--sombra-md); border:1px solid var(--borde);
  height:100%; min-height:420px;
}
.mapa-marco iframe{ width:100%; height:100%; min-height:420px; border:0; }
.redes-fila{ display:flex; gap:14px; margin-top:6px; }
.redes-fila a{
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--sombra-sm); transition:transform .2s ease;
}
.redes-fila a:hover{ transform:translateY(-4px); }

/* =================== Footer =================== */
.footer{ background:var(--tinta); color:#C9D4D2; padding:70px 0 26px; position:relative; overflow:hidden; }
.footer h2,.footer h3,.footer h4{ color:var(--blanco); }
.footer a{ color:#C9D4D2; }
.footer a:hover{ color:var(--turquesa); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-logo-marco{ background:var(--blanco); border-radius:var(--radio-md); padding:12px 20px; display:inline-block; margin-bottom:18px; }
.footer-logo{ height:42px; display:block; }
.footer-links li{ margin-bottom:10px; font-size:.95rem; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); margin-top:50px; padding-top:24px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:.85rem; color:#9AABA8;
}

/* =================== Página interior: encabezado =================== */
.encabezado-pagina{
  padding:60px 0 50px; text-align:center; position:relative; overflow:hidden;
}
.encabezado-pagina .ojo{ }
.miga{ font-size:.85rem; color:var(--tinta-suave); margin-bottom:14px; }
.miga a{ color:var(--turquesa-oscuro); font-weight:700; }

/* =================== Acerca de: bio =================== */
.bio-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start; }
@media (max-width:900px){ .bio-grid{ grid-template-columns:1fr; } }
.bio-foto-marco{
  background:var(--blanco); border-radius:var(--radio-lg); box-shadow:var(--sombra-lg);
  padding:18px; position:relative;
}
.bio-foto{
  aspect-ratio:4/5; border-radius:var(--radio-md); background:linear-gradient(160deg,var(--turquesa-tint),var(--rosa-tint));
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.bio-foto svg{ width:46%; }
.credencial-linea{ display:flex; gap:16px; margin-bottom:22px; align-items:flex-start; }
.credencial-punto{
  width:14px; height:14px; border-radius:50%; margin-top:7px; flex-shrink:0;
  box-shadow:0 0 0 4px var(--blanco), 0 0 0 5px var(--borde);
}
.credencial-linea h4{ font-size:1.04rem; margin-bottom:.2em; }
.credencial-linea p{ font-size:.93rem; margin-bottom:0; }

/* =================== Animaciones de entrada =================== */
/* Visible por defecto: si el JS no carga o el navegador no dispara el observer,
   el contenido jamás debe quedar oculto. El estado oculto solo lo activa el propio JS. */
.aparecer{ opacity:1; transform:none; }
.aparecer.js-oculto{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.aparecer.visible{ opacity:1; transform:translateY(0); }

/* =================== Botón flotante WhatsApp =================== */
.flotante-whatsapp{
  position:fixed; bottom:24px; right:24px; z-index:999;
  width:60px; height:60px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(37,211,102,.45);
  transition:transform .2s ease;
}
.flotante-whatsapp:hover{ transform:scale(1.08); }

/* =================== Tira de credenciales (about preview) =================== */
.franja-confianza{ background:var(--turquesa-oscuro); padding:26px 0; }
.franja-confianza .container{ display:flex; flex-wrap:wrap; gap:28px; justify-content:center; align-items:center; }
.franja-confianza .item{ display:flex; align-items:center; gap:10px; color:var(--blanco); font-family:var(--fuente-display); font-weight:600; font-size:.92rem; }
.franja-confianza svg{ flex-shrink:0; }

.text-center{ text-align:center; }
.mt-0{ margin-top:0 !important; }
.mb-0{ margin-bottom:0 !important; }