/* MOLAR · molarec.com — páginas Molar Kids y legales · Manual de marca 2026: paleta Fantasía arcoíris, Outfit en todo */
:root {
  --noche: #233047;
  --noche-2: #3A3F6B;
  --violeta: #7A5CC4;
  --rosa: #C2588C;
  --naranja: #D9603E;
  --amarillo: #FFE08A;
  --menta: #5FBFA0;
  --cielo: #6F9BE8;
  --tinta: #233047;
  --tinta-2: #4A5266;
  --tinta-3: #6E7884;
  --crema: #FFF7EC;
  --blanco: #FFFFFF;
  --borde: #EDE3F5;
  --wa: #25D366;
  --arcoiris: linear-gradient(110deg, #D2C2F2, #F9C6DA 50%, #AFC8F7);
  --texto-degradado: linear-gradient(100deg, #7A5CC4, #C2588C 60%, #D9603E);
  --ff-display: 'Outfit', 'Segoe UI', sans-serif;
  --ff-body: 'Outfit', -apple-system, 'Segoe UI', sans-serif;
  --radio: 24px;
  --sombra: 0 14px 40px rgba(26, 15, 60, .10);
  --sombra-alta: 0 30px 70px rgba(26, 15, 60, .22);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; font-family: var(--ff-body); color: var(--tinta); background: var(--crema) url(fondos/sonrisas-claro.svg) 0 0 / 820px auto repeat; line-height: 1.6; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
main { overflow-x: hidden; overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: var(--violeta); }
.envoltura { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
h1, h2, h3 { font-family: var(--ff-display); font-weight: 800; line-height: 1.02; margin: 0; color: var(--tinta); letter-spacing: -.025em; }
:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; border-radius: 8px; }

.degradado { background: var(--texto-degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .degradado, .experiencia .degradado, .sedes .degradado { background: var(--arcoiris); -webkit-background-clip: text; background-clip: text; }
.degradado-calido { background: linear-gradient(100deg, #C0679A, #CF8657); -webkit-background-clip: text; background-clip: text; color: transparent; }

.etiqueta { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--violeta); margin-bottom: 16px; }
.etiqueta::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: currentColor; }
.etiqueta-amarilla { color: var(--amarillo); }
.etiqueta-rosa { color: var(--rosa); }
.etiqueta-blanca { color: #fff; }

/* ---------- Botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none; border: 2px solid transparent; transition: transform .18s, box-shadow .25s, background-position .5s, background-color .2s; text-align: center; cursor: pointer; }
.boton:hover { transform: translateY(-2px) scale(1.02); }
.boton-xl { padding: 17px 30px; font-size: 17px; }
.boton-brillo { color: var(--noche); background: linear-gradient(100deg, #C3BAF0, #F3C3D8, #F9D5B8, #C3BAF0); background-size: 300% 100%; box-shadow: 0 12px 28px rgba(195, 186, 240, .45); animation: brillo-boton 6s linear infinite; }
@keyframes brillo-boton { to { background-position: 300% 0; } }
.boton-vidrio { color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); backdrop-filter: blur(8px); }
.boton-vidrio:hover { background: rgba(255, 255, 255, .2); }
.boton-wa { background: var(--wa); color: #fff; box-shadow: 0 12px 28px rgba(37, 211, 102, .3); }
.boton-rosa { background: var(--rosa); color: #fff; box-shadow: 0 12px 28px rgba(212, 106, 156, .3); }
.boton-blanco { background: #fff; color: var(--noche); box-shadow: 0 12px 28px rgba(0, 0, 0, .18); }
.boton-contorno { border-color: var(--tinta); color: var(--tinta); background: transparent; }
.boton-contorno:hover { background: var(--tinta); color: #fff; }
.flecha { display: inline-block; transition: transform .2s; }
.boton:hover .flecha { transform: translateX(5px); }
.acciones { display: flex; flex-wrap: wrap; gap: 14px; }
.acciones-centro { justify-content: center; }

/* ---------- Cabecera ---------- */
.cab { position: sticky; top: 0; z-index: 40; background: rgba(255, 249, 242, .85); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid rgba(26, 15, 60, .06); }
.cab .envoltura { display: flex; align-items: center; gap: 24px; height: 72px; }
.cab .logo { margin-right: auto; }
.cab .logo img { height: 38px; width: auto; }
.cab nav { display: flex; gap: 4px; font-size: 14.5px; font-weight: 600; }
.cab nav a { text-decoration: none; color: var(--tinta-2); padding: 8px 14px; border-radius: 99px; transition: background .2s, color .2s; white-space: nowrap; }
.cab nav a:hover, .cab nav a[aria-current] { background: rgba(111, 91, 214, .1); color: var(--violeta); }
.cab .boton { padding: 10px 20px; font-size: 14px; }

/* ---------- Portada ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; background: var(--noche) url(fondos/sonrisas-oscuro.svg) 50% 0 / 900px auto repeat; color: #fff; min-height: calc(100vh - 110px); min-height: calc(100svh - 110px); display: flex; flex-direction: column; justify-content: center; padding: 80px 0 40px; }
.hero-fondo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.mancha { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .7; animation: flotar 16s ease-in-out infinite alternate; }
.m1 { width: 560px; height: 560px; background: #7D6CD8; opacity: .45; top: -180px; left: -140px; }
.m2 { width: 460px; height: 460px; background: #E6A6C6; top: 25%; right: -120px; animation-delay: -5s; opacity: .32; }
.m3 { width: 420px; height: 420px; background: #F0B78F; bottom: -220px; left: 30%; animation-delay: -10s; opacity: .28; }
@keyframes flotar { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(70px, 40px) scale(1.15); } 100% { transform: translate(-40px, 80px) scale(.95); } }

.sonrisa-gigante { position: absolute; z-index: -1; left: 50%; translate: -50% 0; width: min(1300px, 130vw); top: 50%; pointer-events: none; overflow: visible; }
.sonrisa-gigante .trazo { fill: none; stroke: url(#g-sonrisa); stroke-width: 40; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: dibujar 1.8s .4s cubic-bezier(.65, 0, .35, 1) forwards; opacity: .75; }
.sonrisa-gigante .punteado { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1.2 1.8; animation: correr 30s linear infinite; }
@keyframes dibujar { to { stroke-dashoffset: 0; } }
@keyframes correr { to { stroke-dashoffset: -100; } }
.brillo { fill: var(--amarillo); transform-box: fill-box; transform-origin: center; animation: titilar 2.4s ease-in-out infinite; opacity: 0; }
.b2 { animation-delay: .6s; fill: #fff; }
.b3 { animation-delay: 1.2s; fill: var(--cielo); }
@keyframes titilar { 0%, 100% { opacity: .2; scale: .6; rotate: 0deg; } 50% { opacity: 1; scale: 1.15; rotate: 25deg; } }

.hero-contenido { position: relative; text-align: center; }
.pildora { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 99px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); font-size: 14px; font-weight: 600; margin-bottom: 28px; backdrop-filter: blur(6px); }
.latido { width: 9px; height: 9px; border-radius: 50%; background: var(--menta); animation: latido 1.8s infinite; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(47, 211, 154, .7); } 70%, 100% { box-shadow: 0 0 0 12px rgba(47, 211, 154, 0); } }
.hero h1 { color: #fff; font-size: clamp(46px, 8.4vw, 124px); letter-spacing: -.045em; line-height: .92; }
.hero h1 .degradado { display: inline-block; animation: subir .9s .15s both cubic-bezier(.2, .8, .2, 1); }
@keyframes subir { from { opacity: 0; translate: 0 40px; } }
.hero-contenido > p { font-size: clamp(17px, 1.6vw, 20px); color: rgba(255, 255, 255, .8); margin: 30px auto 36px; max-width: 640px; }
.hero-contenido .acciones { justify-content: center; }

.hero-monstruo { position: absolute; z-index: 0; width: clamp(110px, 13vw, 200px); height: auto; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .35)); pointer-events: none; }
.hm-1 { left: 3%; bottom: 16%; rotate: -10deg; animation: rebotar 4s ease-in-out infinite; }
.hm-2 { right: 3%; top: 7%; rotate: 12deg; animation: rebotar 4.6s ease-in-out -1.5s infinite; }
@keyframes rebotar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -22px; } }

.hero-pie { position: relative; display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 56px; margin-top: 70px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .14); }
.hero-pie div { display: flex; align-items: baseline; gap: 10px; }
.hero-pie b { font-family: var(--ff-display); font-size: 38px; line-height: 1; background: var(--arcoiris); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-pie span { font-size: 14px; color: rgba(255, 255, 255, .7); }

/* ---------- Cinta ---------- */
.cinta { background: #F7EBC4; overflow: hidden; padding: 18px 0; }
.cinta-pista { display: flex; gap: 30px; width: max-content; animation: desfile 34s linear infinite; font-family: var(--ff-display); font-weight: 800; font-size: 28px; color: var(--noche); text-transform: uppercase; letter-spacing: -.01em; }
.cinta-pista i { font-style: normal; color: var(--rosa); }
@keyframes desfile { to { transform: translateX(-50%); } }

/* ---------- Open House (temporal, banda a lo ancho) ---------- */
.aviso-evento { display: block; text-align: center; padding: 9px 16px; font-size: 14px; color: #fff; text-decoration: none; background: linear-gradient(90deg, #2A1B47, #5B2A86 50%, #2A1B47); }
.aviso-evento b, .aviso-evento u { color: #FFB347; }
.aviso-evento u { text-underline-offset: 3px; }
.evento { display: block; text-decoration: none; color: #fff; background: linear-gradient(90deg, #1E1433, #3B1F63 60%, #7A2E0E); transition: filter .2s; }
.evento:hover { filter: brightness(1.15); }
.evento-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding-top: 22px; padding-bottom: 22px; }
.evento-etq { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9EF08A; }
.evento-fila b { font-family: var(--ff-display); font-size: 22px; color: #FF9A1F; }
.evento-ir { margin-left: auto; font-weight: 800; padding: 10px 20px; border-radius: 99px; background: #FF8A00; color: #1E1433; white-space: nowrap; }

/* ---------- Secciones ---------- */
section { padding: 120px 0; }
.titulo { margin-bottom: 56px; max-width: 820px; }
.titulo h2 { font-size: clamp(38px, 5.6vw, 76px); }
.titulo p { color: var(--tinta-2); margin: 18px 0 0; font-size: 18px; }
.titulo-centro { text-align: center; margin-left: auto; margin-right: auto; }
.titulo-claro h2 { color: #fff; }

/* ---------- La experiencia (banda oscura, título fijo) ---------- */
.experiencia { background: var(--noche) url(fondos/sonrisas-oscuro.svg) 0 0 / 820px auto repeat; color: #fff; position: relative; overflow: hidden; }
.experiencia::before { content: ""; position: absolute; width: 700px; height: 700px; left: -250px; bottom: -250px; border-radius: 50%; background: radial-gradient(circle, rgba(230, 166, 198, .2), transparent 65%); }
.experiencia-rejilla { position: relative; display: grid; grid-template-columns: 1fr 1.25fr; gap: 80px; align-items: start; }
.experiencia-titulo { position: sticky; top: 120px; }
.experiencia-titulo h2 { color: #fff; font-size: clamp(40px, 5.4vw, 74px); }
.experiencia-titulo p { color: rgba(255, 255, 255, .75); font-size: 18px; margin: 20px 0 0; max-width: 420px; }
.experiencia-monstruo { width: 170px; height: auto; margin-top: 36px; rotate: -8deg; animation: rebotar 4s ease-in-out infinite; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .4)); }
.momentos { list-style: none; padding: 0; margin: 0; }
.momentos li { display: grid; grid-template-columns: auto 1fr; gap: 28px; padding: 38px 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.momentos li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.m-num { font-family: var(--ff-display); font-weight: 800; font-size: 60px; line-height: .9; background: var(--arcoiris); -webkit-background-clip: text; background-clip: text; color: transparent; min-width: 90px; }
.momentos h3 { color: #fff; font-size: clamp(26px, 2.6vw, 36px); margin-bottom: 8px; }
.momentos p { margin: 0; color: rgba(255, 255, 255, .72); font-size: 17px; }

/* ---------- Especialidades (lista a lo ancho) ---------- */
.especialidades { padding-bottom: 0; }
.lista-esp { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tinta); }
.lista-esp li { border-bottom: 2px solid var(--tinta); position: relative; overflow: hidden; }
.lista-esp a { position: relative; z-index: 1; display: grid; grid-template-columns: 80px 1.1fr 1fr 60px; align-items: center; gap: 24px; max-width: 1240px; margin: 0 auto; padding: 26px 24px; text-decoration: none; color: var(--tinta); transition: color .3s; }
.lista-esp li::before { content: ""; position: absolute; inset: 0; background: var(--c); transform: scaleY(0); transform-origin: bottom; transition: transform .45s cubic-bezier(.7, 0, .2, 1); }
.lista-esp li:hover::before { transform: scaleY(1); }
.le-emoji { font-size: 44px; transition: transform .4s; }
.lista-esp li:hover .le-emoji { transform: scale(1.25) rotate(-12deg); }
.le-nombre { font-family: var(--ff-display); font-weight: 800; font-size: clamp(30px, 4.4vw, 60px); letter-spacing: -.03em; line-height: 1; transition: transform .4s; }
.lista-esp li:hover .le-nombre { transform: translateX(14px); }
.le-desc { font-size: 16px; color: var(--tinta-2); }
.le-ir { justify-self: end; font-size: 34px; font-weight: 700; transition: transform .3s; }
.lista-esp li:hover .le-ir { transform: translateX(6px) rotate(-30deg); }
.e-violeta { --c: #C9B8FF; } .e-rosa { --c: #FFC2DF; } .e-naranja { --c: #FFD0B0; } .e-amarillo { --c: #FFE98A; }
.e-cielo { --c: #BFE9FB; } .e-menta { --c: #B6EFD8; } .e-lila { --c: #E2D6FF; }

/* ---------- Monstruos ---------- */
.monstruos { background: linear-gradient(180deg, var(--crema), #FFEFF7 40%, #EAF7FF); position: relative; overflow: hidden; }
.desfile-monstruos { display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap; gap: 10px 28px; padding: 0 24px; }
.monstruo { margin: 0; width: 210px; text-align: center; cursor: default; }
.monstruo img { width: 100%; height: auto; filter: drop-shadow(0 18px 20px rgba(26, 15, 60, .18)); animation: rebotar 3.6s ease-in-out infinite; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.mo-2 img { animation-delay: -.7s; } .mo-3 img { animation-delay: -1.4s; } .mo-4 img { animation-delay: -2.1s; } .mo-5 img { animation-delay: -2.8s; }
.mo-2, .mo-4 { margin-bottom: 40px; }
.monstruo:hover img { transform: scale(1.12) rotate(-6deg); }
.monstruo figcaption { margin-top: 14px; }
.monstruo b { display: block; font-family: var(--ff-display); font-size: 28px; line-height: 1; }
.monstruo span { display: block; font-weight: 700; color: var(--rosa); font-size: 14.5px; margin-top: 4px; }
.monstruo small { display: block; color: var(--tinta-2); font-size: 14px; margin-top: 6px; opacity: 0; translate: 0 -6px; transition: opacity .3s, translate .3s; }
.monstruo:hover small { opacity: 1; translate: 0 0; }
@media (hover: none) { .monstruo small { opacity: 1; translate: 0 0; } }

/* ---------- Banda odontopediatría ---------- */
.banda-ninos { padding: 60px 0; background: linear-gradient(100deg, #F6CFE0, #FADCC6); color: var(--noche); }
.banda-ninos .etiqueta-blanca { color: var(--rosa); }
.banda-ninos-fila { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 36px; }
.banda-avatar { width: 130px; height: 130px; border-radius: 50%; object-fit: cover; border: 5px solid #fff; box-shadow: 0 14px 30px rgba(0, 0, 0, .2); }
.banda-ninos h2 { color: var(--noche); font-size: clamp(28px, 3.4vw, 44px); }
.banda-ninos p { margin: 10px 0 0; color: var(--tinta-2); font-size: 17px; max-width: 620px; }
.banda-ninos .etiqueta { margin-bottom: 10px; }

/* ---------- Equipo (fotos a lo ancho) ---------- */
.equipo { padding: 0; background: var(--blanco); }
.equipo-fila { display: grid; grid-template-columns: 1fr 1.3fr 1fr; align-items: stretch; min-height: 620px; }
.equipo-foto { margin: 0; overflow: hidden; }
.equipo-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s; }
.equipo-foto:hover img { transform: scale(1.06); }
.equipo-texto { padding: 80px 56px; display: flex; flex-direction: column; justify-content: center; }
.equipo-texto h2 { font-size: clamp(36px, 4.4vw, 60px); }
.equipo-texto p { color: var(--tinta-2); font-size: 17.5px; margin: 20px 0 0; }
.enlace-grande { margin-top: 28px; font-family: var(--ff-display); font-weight: 700; font-size: 20px; color: var(--violeta); text-decoration: none; }
.enlace-grande:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Sedes (banda oscura, sin cajas) ---------- */
.sedes { background: var(--noche) url(fondos/sonrisas-oscuro.svg) 30% 0 / 820px auto repeat; color: #fff; position: relative; overflow: hidden; }
.sedes::after { content: ""; position: absolute; width: 700px; height: 700px; right: -260px; top: -260px; border-radius: 50%; background: radial-gradient(circle, rgba(125, 108, 216, .3), transparent 65%); }
.sedes .envoltura { position: relative; z-index: 1; }
.sedes-fila { display: grid; grid-template-columns: repeat(3, 1fr); }
.sede { padding: 10px 36px 10px 0; border-left: 1px solid rgba(255, 255, 255, .16); padding-left: 36px; }
.sede:first-child { border-left: 0; padding-left: 0; }
.sede-ciudad { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--amarillo); }
.sede h3 { color: #fff; font-size: clamp(26px, 2.6vw, 36px); margin: 10px 0 12px; }
.sede p { margin: 0 0 18px; color: rgba(255, 255, 255, .72); }
.sede a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--rosa); padding-bottom: 2px; }
.sede a:hover { color: var(--amarillo); }
.horario-linea { display: flex; flex-wrap: wrap; gap: 16px 56px; margin-top: 70px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .16); }
.horario-linea span { display: block; font-size: 14px; color: rgba(255, 255, 255, .65); }
.horario-linea b { font-family: var(--ff-display); font-size: 26px; font-variant-numeric: tabular-nums; }

/* ---------- Banda empresas ---------- */
.banda-empresas { display: block; text-decoration: none; color: var(--noche); background: #F7EBC4; transition: filter .2s; }
.banda-empresas:hover { filter: brightness(1.05); }
.banda-empresas-fila { display: flex; align-items: center; gap: 20px; padding-top: 26px; padding-bottom: 26px; flex-wrap: wrap; }
.banda-empresas-fila > span:first-child { font-size: 34px; }
.banda-empresas-fila p { margin: 0; font-size: 17px; }
.banda-empresas-fila b { font-family: var(--ff-display); font-size: 22px; }
.banda-empresas .evento-ir { background: var(--noche); color: #fff; }
.banda-escuelas { background: #FFE3EF; }

/* ---------- Preguntas ---------- */
.preguntas { background: transparent; }
.preguntas-rejilla { display: grid; grid-template-columns: 1fr 1.5fr; gap: 64px; align-items: start; }
.faq { border-top: 2px solid var(--tinta); }
.faq details { border-bottom: 2px solid var(--tinta); }
.faq summary { cursor: pointer; list-style: none; padding: 24px 50px 24px 0; font-family: var(--ff-display); font-weight: 700; font-size: 22px; position: relative; transition: color .2s; }
.faq summary:hover { color: var(--violeta); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--violeta); color: #fff; font-size: 22px; transition: rotate .3s, background .3s; }
.faq details[open] summary::after { rotate: 135deg; background: var(--rosa); }
.faq details p { margin: 0 0 24px; color: var(--tinta-2); font-size: 16.5px; }

/* ---------- Llamado final ---------- */
.final { position: relative; overflow: hidden; isolation: isolate; text-align: center; background: var(--arcoiris); color: var(--noche); padding: 150px 0 170px; }
.sonrisa-final { top: 44%; opacity: .45; }
.sonrisa-final .trazo-claro { stroke: url(#g-sonrisa-2); animation: none; stroke-dashoffset: 0; }
@supports (animation-timeline: view()) {
  .sonrisa-final .trazo-claro { stroke-dashoffset: 100; animation: dibujar linear both; animation-timeline: view(); animation-range: entry 10% cover 55%; }
}
.final-contenido { position: relative; }
.final h2 { color: var(--noche); font-size: clamp(46px, 8vw, 118px); letter-spacing: -.045em; line-height: .92; }
.final p { color: var(--tinta-2); margin: 24px auto 36px; font-size: 19px; }
.final-monstruo { position: absolute; z-index: 0; width: clamp(110px, 12vw, 190px); height: auto; filter: drop-shadow(0 20px 30px rgba(26, 15, 60, .3)); }
.fm-1 { left: 5%; bottom: 10%; rotate: -8deg; animation: rebotar 4.2s ease-in-out infinite; }
.fm-2 { right: 5%; top: 14%; rotate: 10deg; animation: rebotar 3.8s ease-in-out -1s infinite; }
.resena { display: inline-block; margin-top: 30px; color: var(--noche); font-weight: 600; font-size: 15px; text-underline-offset: 3px; }

/* ---------- WhatsApp flotante ---------- */
.wa-flotante { position: fixed; right: 20px; bottom: 20px; z-index: 50; width: 62px; height: 62px; border-radius: 50%; background: var(--wa); color: #fff; display: grid; place-items: center; box-shadow: 0 12px 30px rgba(18, 140, 75, .45); transition: transform .2s; animation: llamar 3.5s ease-in-out 2s infinite; }
.wa-flotante:hover { transform: scale(1.08); }
.wa-flotante svg { width: 32px; height: 32px; }
@keyframes llamar { 0%, 84%, 100% { rotate: 0deg; } 87% { rotate: -14deg; } 90% { rotate: 12deg; } 93% { rotate: -8deg; } }

/* ---------- Pie ---------- */
.pie { background: var(--noche) url(fondos/sonrisas-oscuro.svg) 0 0 / 700px auto repeat; color: rgba(255, 255, 255, .65); padding: 70px 0 30px; font-size: 14.5px; }
.pie .envoltura { display: flex; flex-wrap: wrap; gap: 32px 56px; justify-content: space-between; align-items: flex-start; }
.pie-marca img { height: 46px; width: auto; margin-bottom: 14px; }
.pie-marca p { margin: 0; }
.pie b { color: #fff; display: block; margin-bottom: 10px; font-family: var(--ff-display); font-size: 16px; }
.pie a { color: rgba(255, 255, 255, .75); text-decoration: none; }
.pie a:hover { color: var(--amarillo); }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pie .pie-final { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; }

/* ---------- Páginas legales ---------- */
.legal { max-width: 780px; margin: 0 auto; padding: 56px 20px 72px; }
.legal h1 { font-size: clamp(34px, 5vw, 48px); margin-bottom: 8px; }
.legal .fecha { color: var(--tinta-3); font-size: 14px; margin-bottom: 32px; }
.legal h2 { font-size: 24px; margin: 34px 0 10px; }
.legal p, .legal li { color: var(--tinta-2); }
.legal .caja { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px 22px; margin: 20px 0; }

/* ---------- Odontopediatría (página) ---------- */
.op-hero { position: relative; overflow: hidden; isolation: isolate; padding: 90px 0 0; background: linear-gradient(160deg, #FFD9EC, #FFEBD6 55%, #D6F1FF); text-align: center; }
.op-hero h1 { font-size: clamp(46px, 8vw, 116px); letter-spacing: -.045em; line-height: .92; }
.op-hero .bajada { font-size: clamp(17px, 1.6vw, 20px); color: var(--tinta-2); margin: 26px auto 34px; max-width: 640px; }
.op-hero .acciones { justify-content: center; }
.op-monstruos { display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 3vw, 40px); margin-top: 60px; }
.op-monstruos img { width: clamp(80px, 13vw, 190px); height: auto; animation: rebotar 3.6s ease-in-out infinite; filter: drop-shadow(0 16px 18px rgba(26, 15, 60, .2)); margin-bottom: -8px; }
.op-monstruos img:nth-child(2) { animation-delay: -.8s; } .op-monstruos img:nth-child(3) { animation-delay: -1.6s; } .op-monstruos img:nth-child(4) { animation-delay: -2.4s; } .op-monstruos img:nth-child(5) { animation-delay: -3.2s; }
.op-doctora { background: var(--noche); color: #fff; }
.op-doctora-fila { display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: center; }
.op-avatar { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; border: 8px solid transparent; background: var(--arcoiris) border-box; box-shadow: 0 20px 50px rgba(212, 106, 156, .25); animation: rebotar 5s ease-in-out infinite; }
.op-doctora h2 { color: #fff; font-size: clamp(36px, 5vw, 64px); }
.op-doctora p { color: rgba(255, 255, 255, .78); font-size: 18px; margin: 16px 0 0; max-width: 640px; }
.op-chips { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.op-chips li { padding: 8px 16px; border-radius: 99px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); font-weight: 600; font-size: 14.5px; }
.op-pilares { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--tinta); }
.op-pilar { padding: 36px 28px 36px 0; }
.op-pilar + .op-pilar { border-left: 2px solid var(--tinta); padding-left: 28px; }
.op-pilar > span { font-size: 44px; }
.op-pilar b { display: block; font-family: var(--ff-display); font-size: 26px; margin: 14px 0 8px; line-height: 1.05; }
.op-pilar p { margin: 0; color: var(--tinta-2); }
.temas-sec { background: var(--blanco); }
.temas { border-top: 2px solid var(--tinta); }
.tema { border-bottom: 2px solid var(--tinta); transition: background .3s; }
.tema[open] { background: var(--crema); }
.tema summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 70px 1fr auto; gap: 20px; align-items: center; padding: 24px 8px; }
.tema summary::-webkit-details-marker { display: none; }
.tema-ico { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 32px; transition: transform .3s; }
.tema summary:hover .tema-ico { transform: rotate(-10deg) scale(1.1); }
.i-rosa { background: #FFD6EA; } .i-amarillo { background: #FFF1B8; } .i-menta { background: #CFF5E6; } .i-cielo { background: #D3F0FC; } .i-lila { background: #E6DDFF; } .i-naranja { background: #FFE0CC; }
.tema small { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rosa); }
.tema h3 { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.1; margin-top: 4px; }
.tema summary::after { content: "+"; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--violeta); color: #fff; font-size: 24px; transition: rotate .3s, background .3s; }
.tema[open] summary::after { rotate: 135deg; background: var(--rosa); }
.tema-cuerpo { padding: 0 8px 30px 98px; color: var(--tinta-2); font-size: 17px; max-width: 900px; }
.tema-cuerpo p { margin: 0 0 12px; }
.tema-cuerpo ul { margin: 0 0 12px; padding-left: 20px; }
.tema-cuerpo li { margin-bottom: 8px; }
.aviso-medico { margin-top: 32px; font-size: 14px; color: var(--tinta-3); text-align: center; }

/* ---------- Instituciones (Guardianes de la Sonrisa) ---------- */
.in-hero { background: linear-gradient(160deg, #E6DDFF, #FFD9EC 50%, #FFEBD6); }
.in-sellos { list-style: none; padding: 0; margin: 34px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 14px; }
.in-sellos li { padding: 8px 16px; border-radius: 99px; background: rgba(255, 255, 255, .7); font-size: 14.5px; color: var(--tinta-2); }
.in-sellos b { color: var(--tinta); }
.in-tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.in-tarjeta { border-radius: var(--radio); padding: 30px 28px; transition: transform .3s; }
.in-tarjeta:hover { transform: translateY(-6px) rotate(-.6deg); }
.in-tarjeta > span { font-size: 42px; }
.in-tarjeta small { display: block; margin-top: 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-2); }
.in-tarjeta h3 { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.05; margin: 8px 0 10px; }
.in-tarjeta p { margin: 0; color: var(--tinta-2); }
.monstruos .titulo { margin-bottom: 40px; }
.in-niveles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.in-nivel { background: var(--blanco); border: 2px solid var(--borde); border-radius: var(--radio); padding: 34px 30px; }
.in-nivel small { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rosa); }
.in-nivel h3 { font-size: clamp(36px, 3.6vw, 50px); margin: 6px 0 18px; }
.in-nivel ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.in-nivel li { padding-left: 28px; position: relative; color: var(--tinta-2); }
.in-nivel li::before { content: "✦"; position: absolute; left: 0; color: var(--violeta); }
.in-nivel-destacado { background: var(--noche) url(fondos/sonrisas-oscuro.svg) 0 0 / 600px auto repeat; border-color: var(--noche); color: #fff; box-shadow: var(--sombra-alta); transform: translateY(-12px); }
.in-nivel-destacado h3 { color: #fff; }
.in-convenio { grid-template-columns: 1fr 1.4fr; }
.in-convenio .in-nivel-destacado { transform: none; }
.in-convenio b { color: var(--rosa); white-space: nowrap; }
.in-nivel-destacado small { color: var(--amarillo); }
.in-nivel-destacado li { color: rgba(255, 255, 255, .82); }
.in-nivel-destacado li::before { color: var(--amarillo); }
.in-confianza { padding: 90px 0; }
.in-confianza-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.in-confianza a { color: var(--noche); font-weight: 700; }
.in-pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--tinta); counter-reset: paso; }
.in-pasos li { counter-increment: paso; padding: 30px 28px 34px 0; border-bottom: 2px solid var(--tinta); }
.in-pasos li:not(:nth-child(3n+1)) { border-left: 2px solid var(--tinta); padding-left: 28px; }
.in-pasos li::before { content: "0" counter(paso); display: block; font-family: var(--ff-display); font-weight: 800; font-size: 44px; line-height: 1; background: var(--texto-degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
.in-pasos b { display: block; font-family: var(--ff-display); font-size: 24px; margin: 12px 0 6px; }
.in-pasos span { color: var(--tinta-2); }
.in-descargas { margin-top: 26px; font-size: 15px; color: var(--tinta-2); }
.in-descargas a { color: var(--noche); font-weight: 700; }
@media (max-width: 900px) {
  .in-tarjetas, .in-niveles { grid-template-columns: 1fr 1fr; }
  .in-nivel-destacado { transform: none; }
  .in-confianza-fila { grid-template-columns: 1fr; gap: 36px; }
  .in-pasos { grid-template-columns: 1fr 1fr; }
  .in-pasos li:not(:nth-child(3n+1)) { border-left: 0; padding-left: 0; }
  .in-pasos li:nth-child(even) { border-left: 2px solid var(--tinta); padding-left: 24px; }
}
@media (max-width: 600px) {
  .in-tarjetas, .in-niveles, .in-pasos { grid-template-columns: 1fr; }
  .in-pasos li:nth-child(even) { border-left: 0; padding-left: 0; }
}

/* ---------- Guía para papás (molarec.com/guia): versión digital del tríptico, pensada para celular ---------- */
.gp { background: var(--crema); }
.gp main { max-width: 640px; margin: 0 auto; background: #fff; overflow: hidden; }
.gp-cab { position: sticky; top: 0; z-index: 30; display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; background: rgba(255, 249, 242, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(26, 15, 60, .06); }
.gp-cab img { height: 32px; width: auto; }
.gp-mini { background: var(--wa); color: #fff; text-decoration: none; font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 99px; }
.gp-hero { text-align: center; padding: 30px 20px 0; position: relative; background: linear-gradient(170deg, #EDE7FF, #FFE3EF 60%, #FFF1E2); }
.gp-kicker { display: inline-block; padding: 6px 16px; border-radius: 99px; background: var(--noche); color: var(--amarillo); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.gp-hero h1 { font-size: clamp(34px, 9vw, 48px); margin-top: 14px; color: var(--noche); }
.gp-hero h1 span { display: inline-block; padding-bottom: 4px; background: var(--texto-degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gp-sello { display: inline-block; margin: 14px 0 0; padding: 6px 14px; border-radius: 99px; background: #fff; color: var(--rosa); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.gp-hero-foto { margin: 22px -20px 0; height: 420px; overflow: hidden; border-radius: 60% 40% 0 0 / 22% 14% 0 0; }
.gp-hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.gp-firma { margin: 0 -20px; padding: 12px 20px 18px; background: var(--noche); color: rgba(255, 255, 255, .8); font-size: 14px; }
.gp-firma b { color: #fff; }
.gp-promo { margin: 22px 18px 6px; background: var(--noche); color: #fff; border-radius: 26px; padding: 24px 22px 18px; text-align: center; box-shadow: var(--sombra); }
.gp-etq { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--amarillo); }
.gp-precio { font-family: var(--ff-display); font-weight: 800; font-size: 64px; line-height: 1; color: var(--amarillo); margin: 8px 0 4px; }
.gp-incluye { font-family: var(--ff-display); font-weight: 700; font-size: 20px; line-height: 1.2; }
.gp-botones { display: grid; gap: 10px; margin-top: 18px; }
.gp-btn { display: block; text-align: center; text-decoration: none; font-weight: 700; font-size: 17px; padding: 15px 18px; border-radius: 16px; }
.gp-btn-agendar { background: linear-gradient(100deg, #C3BAF0, #F3C3D8, #F9D5B8); color: var(--noche); }
.gp-btn-wa { background: var(--wa); color: #fff; }
.gp-btn-tel { background: #fff; color: var(--noche); border: 2px solid var(--noche); }
.gp-letra-chica { margin-top: 10px; font-size: 12px; font-weight: 300; color: rgba(255, 255, 255, .6); }
.gp-oh { margin: 16px 18px 6px; background: linear-gradient(160deg, #2A1250, #4A1A6B 60%, #7A2E5A); color: #fff; border-radius: 26px; padding: 22px 22px 18px; text-align: center; box-shadow: var(--sombra); border: 2px solid #FF8A2A; }
.gp-oh-etq { display: inline-block; padding: 6px 14px; border-radius: 99px; background: #FF8A2A; color: #2A1250; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.gp-oh-img { display: block; margin: 14px -8px 4px; border-radius: 18px; overflow: hidden; }
.gp-oh-img img { display: block; width: 100%; height: auto; }
.gp-oh-fecha { font-family: var(--ff-display); font-weight: 800; font-size: 30px; line-height: 1.1; color: #FFC24A; margin: 12px 0 4px; text-wrap: balance; }
.gp-oh-hora { font-size: 14px; color: rgba(255, 255, 255, .85); margin: 0 0 10px; }
.gp-oh-txt { font-size: 16px; line-height: 1.5; margin: 0 0 16px; }
.gp-oh-btn { background: #FF8A2A; color: #2A1250; }
.gp-oh-chica { margin-top: 10px; font-size: 12px; color: rgba(255, 255, 255, .65); }
.gp-sec { padding: 28px 20px 26px; font-size: 16px; line-height: 1.6; color: var(--tinta-2); }
.gp-sec + .gp-sec { border-top: 1px solid #F0EAF6; }
.gp-rosa { background: #FFF1F6; } .gp-celeste { background: #F0F8FD; } .gp-lila { background: #F5F2FF; }
.gp-tit { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; margin-bottom: 12px; }
.gp-tit img { width: 56px; height: auto; }
.gp-sec h2 { font-size: 23px; line-height: 1.12; color: var(--noche); }
.gp-sec h2 b { color: var(--violeta); }
.gp-sec h3 { font-size: 18px; margin: 18px 0 6px; color: var(--noche); }
.gp-sec p { margin: 0 0 10px; }
.gp-sec strong { color: var(--noche); }
.gp-sec ul { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 7px; }
.gp-sec li { padding-left: 20px; position: relative; }
.gp-sec li::before { content: "✦"; position: absolute; left: 0; top: 1px; font-size: 12px; color: var(--rosa); }
.gp-dato { background: #fff; border-left: 5px solid var(--violeta); border-radius: 12px; padding: 12px 14px; box-shadow: 0 4px 14px rgba(26, 15, 60, .06); }
.gp-foto { margin: 16px -20px -26px; height: 300px; overflow: hidden; border-radius: 45% 55% 0 0 / 16% 22% 0 0; }
.gp-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.gp-tabla { width: 100%; border-collapse: collapse; margin: 4px 0 8px; font-size: 15px; background: #fff; border-radius: 12px; overflow: hidden; }
.gp-tabla th { text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--violeta); padding: 9px 10px; border-bottom: 2px solid var(--violeta); }
.gp-tabla td { padding: 10px; border-bottom: 1px solid #F3DCE6; }
.gp-tabla td:first-child { font-weight: 700; color: var(--noche); }
.gp-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 4px; }
.gp-si, .gp-no { border-radius: 14px; padding: 12px 14px; font-size: 15px; }
.gp-si { background: #DDF4EA; } .gp-no { background: #FFE1E1; }
.gp-si b, .gp-no b { display: block; font-family: var(--ff-display); color: var(--noche); margin-bottom: 4px; }
.gp-si ul, .gp-no ul { gap: 3px; margin: 0; }
.gp-si li::before { color: #2E9B6A; } .gp-no li::before { color: #D9475D; }
.gp-contacto { padding: 0 20px 30px; background: #fff; text-align: center; }
.gp-foto-top { margin: 0 -20px 20px; height: 240px; overflow: hidden; border-radius: 0 0 50% 50% / 0 0 18% 14%; }
.gp-foto-top img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.gp-contacto h2 { font-size: 26px; color: var(--noche); }
.gp-sedes { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; text-align: left; }
.gp-sedes li { background: #F7F4FC; border-radius: 14px; padding: 12px 14px; font-size: 15px; color: var(--tinta-2); line-height: 1.45; }
.gp-sedes b { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--violeta); }
.gp-sedes a { display: block; margin-top: 4px; font-weight: 700; color: var(--noche); }
.gp-horario { margin: 14px 0 0; font-size: 15px; color: var(--tinta-2); }
.gp-horario b { color: var(--noche); }
.gp-descarga { display: inline-block; margin-top: 18px; font-weight: 700; color: var(--violeta); }
.gp-cierre { margin-top: 18px; font-family: var(--ff-display); font-weight: 700; font-size: 18px; color: var(--noche); }
.gp-pie { text-align: center; background: var(--noche); color: rgba(255, 255, 255, .7); padding: 24px 20px 30px; font-size: 13px; }
.gp-pie img { height: 36px; width: auto; margin: 0 auto 8px; }
.gp-pie a { color: rgba(255, 255, 255, .8); }
@media (min-width: 700px) { .gp main { margin: 24px auto; border-radius: 28px; box-shadow: var(--sombra); } }

/* ---------- Animación al hacer scroll (navegadores compatibles) ---------- */
@supports (animation-timeline: view()) {
  .revela { animation: aparecer linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  @keyframes aparecer { from { opacity: 0; translate: 0 60px; } to { opacity: 1; translate: 0 0; } }
}

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
  .equipo-fila { grid-template-columns: 1fr 1fr; }
  .equipo-texto { grid-column: 1 / -1; grid-row: 1; padding: 70px 24px 50px; }
  .equipo-foto { height: 460px; }
  .op-pilares { grid-template-columns: repeat(2, 1fr); }
  .op-pilar:nth-child(3) { border-left: 0; padding-left: 0; }
  .op-pilar:nth-child(n+3) { border-top: 2px solid var(--tinta); }
}
@media (max-width: 900px) {
  section { padding: 84px 0; }
  .cab nav { display: none; }
  .hero { min-height: 0; padding: 70px 0 30px; }
  .hm-1 { bottom: auto; top: 58%; left: -20px; }
  .hm-2 { top: 4%; right: -16px; }
  .experiencia-rejilla, .preguntas-rejilla { grid-template-columns: 1fr; gap: 30px; }
  .experiencia-titulo { position: static; }
  .experiencia-monstruo { display: none; }
  .lista-esp a { grid-template-columns: 56px 1fr 40px; padding: 22px 24px; }
  .le-desc { grid-column: 2; grid-row: 2; font-size: 14.5px; }
  .le-ir { grid-row: 1 / span 2; grid-column: 3; }
  .le-emoji { grid-row: 1 / span 2; font-size: 36px; }
  .banda-ninos-fila { grid-template-columns: auto 1fr; }
  .banda-ninos-fila .boton { grid-column: 1 / -1; justify-self: start; }
  .sedes-fila { grid-template-columns: 1fr; gap: 36px; }
  .sede, .sede:first-child { border-left: 0; padding: 0 0 30px; border-bottom: 1px solid rgba(255, 255, 255, .16); }
  .op-doctora-fila { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 30px; }
  .op-chips { justify-content: center; }
}
@media (max-width: 600px) {
  .envoltura { padding: 0 18px; }
  .cab .envoltura { height: 64px; gap: 12px; }
  .cab .logo img { height: 30px; }
  .cab .boton { padding: 9px 16px; font-size: 13.5px; }
  .hero-monstruo { width: 96px; opacity: .9; }
  .hero-pie { gap: 14px 26px; margin-top: 50px; }
  .hero-pie b { font-size: 28px; }
  .acciones .boton { flex: 1 1 100%; }
  .cinta-pista { font-size: 21px; }
  .evento-ir { margin-left: 0; }
  .m-num { font-size: 42px; min-width: 60px; }
  .momentos li { gap: 16px; padding: 28px 0; }
  .monstruo { width: 42%; }
  .mo-2, .mo-4 { margin-bottom: 0; }
  .monstruo b { font-size: 22px; }
  .banda-ninos-fila { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .banda-ninos-fila .boton { justify-self: stretch; }
  .banda-avatar { width: 110px; height: 110px; }
  .equipo-fila { grid-template-columns: 1fr 1fr; }
  .equipo-foto { height: 300px; }
  .horario-linea { gap: 18px; }
  .horario-linea b { font-size: 21px; }
  .faq summary { font-size: 18px; }
  .final { padding: 110px 0 130px; }
  .fm-1 { bottom: 2%; width: 90px; } .fm-2 { top: 3%; width: 90px; }
  .op-pilares { grid-template-columns: 1fr; }
  .op-pilar, .op-pilar + .op-pilar { border-left: 0; padding: 26px 0; border-top: 2px solid var(--tinta); }
  .op-pilar:first-child { border-top: 0; }
  .op-avatar { width: 170px; height: 170px; }
  .tema summary { grid-template-columns: 52px 1fr auto; gap: 14px; padding: 20px 0; }
  .tema-ico { width: 50px; height: 50px; font-size: 26px; border-radius: 16px; }
  .tema-cuerpo { padding: 0 0 24px; font-size: 16px; }
  .wa-flotante { width: 56px; height: 56px; right: 14px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .sonrisa-gigante .trazo { stroke-dashoffset: 0; }
  .brillo { opacity: 1; }
  html { scroll-behavior: auto; }
}

.ml-auto { margin-left: auto; }
.sin-margen { margin: 0; }

/* ===== Manual de marca 2026 · línea Serena (portada y especialidades). Mismo diseño: solo colores y fuentes ===== */
.serena {
  --noche: #1E2A36; --noche-2: #2B3B4C; --violeta: #3E6488; --rosa: #C9826F; --naranja: #E8B4A6; --amarillo: #E8B4A6;
  --menta: #A8DCC8; --cielo: #97D5F6; --tinta: #1E2A36; --tinta-2: #4A5663; --tinta-3: #6E7884; --crema: #F2EDE4; --borde: #E2DACB;
  --arcoiris: linear-gradient(110deg, #ACC0E5, #97D5F6 35%, #A8DCC8 65%, #E8B4A6);
  --texto-degradado: linear-gradient(100deg, #3E6488, #4F7FA3 55%, #5A9483);
  --sombra: 0 14px 40px rgba(30, 42, 54, .10); --sombra-alta: 0 30px 70px rgba(30, 42, 54, .22);
  background-image: url(fondos/sonrisas-serena.svg);
}
.serena h1, .serena h2 { font-weight: 300; letter-spacing: -.035em; }
.serena h3 { font-weight: 500; letter-spacing: -.02em; }
.serena h1 .degradado, .serena h2 .degradado { font-weight: 600; }
.serena .cab { background: rgba(242, 237, 228, .88); border-bottom-color: rgba(30, 42, 54, .08); }
.serena .cab nav a:hover, .serena .cab nav a[aria-current] { background: rgba(62, 100, 136, .1); }
.serena .boton-brillo { background: linear-gradient(100deg, #ACC0E5, #A8DCC8, #E8B4A6, #ACC0E5); background-size: 300% 100%; box-shadow: 0 12px 28px rgba(172, 192, 229, .4); color: var(--noche); }
.serena .m1 { background: #3E6488; opacity: .5; } .serena .m2 { background: #A8DCC8; opacity: .22; } .serena .m3 { background: #E8B4A6; opacity: .22; }
.serena .latido { background: var(--menta); }
.serena .brillo { fill: #E8B4A6; } .serena .b3 { fill: #ACC0E5; }
.serena .hero-pie b, .serena .m-num { font-weight: 300; }
.serena .cinta { background: #E8DFD1; } .serena .cinta-pista { font-weight: 500; } .serena .cinta-pista i { color: #3E6488; }
.serena .experiencia::before { background: radial-gradient(circle, rgba(232, 180, 166, .16), transparent 65%); }
.serena .sedes::after { background: radial-gradient(circle, rgba(62, 100, 136, .45), transparent 65%); }
.serena .le-nombre { font-weight: 300; }
.serena .lista-esp li:hover .le-nombre { font-weight: 500; }
.e-orto { --c: #FFDE53; } .e-rehab { --c: #ACC0E5; } .e-impl { --c: #97D5F6; } .e-ciru { --c: #B9B0D6; } .e-pedi { --c: #F4ABCC; } .e-endo { --c: #C6D97C; }
.serena .banda-ninos { background: linear-gradient(100deg, #D2C2F2, #F9C6DA); }
.serena .banda-ninos .etiqueta-blanca { color: #7A5CC4; }
.serena .banda-empresas { background: #E8DFD1; } .serena .banda-escuelas { background: #F4DDD5; }
.serena .faq summary { font-weight: 500; }
.serena .enlace-grande { font-weight: 500; }
.serena .sede-ciudad { color: #E8B4A6; }
/* páginas de especialidad: misma portada, más corta */
.hero-esp { min-height: 0; padding: 110px 0 120px; }
.hero-esp h1 { font-size: clamp(42px, 6.6vw, 96px); }
.lista-lineas { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tinta); }
.lista-lineas li { border-bottom: 2px solid var(--tinta); padding: 22px 0; font-family: var(--ff-display); font-size: 22px; font-weight: 400; display: flex; gap: 16px; align-items: center; }
.lista-lineas li::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--c, var(--violeta)); }
.serena .momentos li { align-items: center; }

/* ===== Portada y especialidades al nivel de Molar Kids: portada clara, sonrisas de especialidad, tarjetas tipo app ===== */
svg.sonrisa { display: block; width: 100%; height: auto; overflow: visible; }
.serena { background-image: none; }
.boton-azul { background: var(--violeta); color: #fff; box-shadow: 0 12px 28px rgba(62, 100, 136, .3); }
.boton-azul:hover { background: #33557A; }
.t-orto { background: #FFDE53; } .t-rehab { background: #ACC0E5; } .t-impl { background: #97D5F6; } .t-ciru { background: #8477AD; } .t-pedi { background: #F4ABCC; } .t-endo { background: #C6D97C; }
.sr-hero { position: relative; overflow: hidden; isolation: isolate; padding: 90px 0 70px; text-align: center; background: linear-gradient(160deg, #DCE6F5, #F2EDE4 45%, #F6E1D9 75%, #DDF0E8); }
.sr-hero h1 { font-size: clamp(46px, 8vw, 116px); letter-spacing: -.045em; line-height: .95; }
.sr-hero .bajada { font-size: clamp(17px, 1.6vw, 20px); color: var(--tinta-2); margin: 26px auto 34px; max-width: 660px; }
.sr-hero .acciones { justify-content: center; }
.pildora-clara { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border-radius: 99px; background: rgba(255, 255, 255, .7); border: 1px solid rgba(30, 42, 54, .08); font-size: 14px; font-weight: 600; color: var(--tinta-2); margin-bottom: 28px; box-shadow: 0 6px 20px rgba(30, 42, 54, .06); }
.sr-fila { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(12px, 2.4vw, 32px); margin: 64px auto 0; padding: 0 24px; max-width: 1240px; }
.sr-item { display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none; color: var(--tinta); width: clamp(120px, 13vw, 168px); }
.sr-item b { font-family: var(--ff-display); font-weight: 500; font-size: 16px; line-height: 1.15; text-align: center; }
.sr-tile { display: flex; flex-direction: column; justify-content: center; aspect-ratio: 1; width: 100%; border-radius: 30%; padding: 12%; box-shadow: 0 18px 34px rgba(30, 42, 54, .12), inset 0 -6px 0 rgba(0, 0, 0, .06); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.sr-item .sr-tile { animation: rebotar 3.8s ease-in-out infinite; }
.sr-item:nth-child(2) .sr-tile { animation-delay: -.6s; } .sr-item:nth-child(3) .sr-tile { animation-delay: -1.2s; } .sr-item:nth-child(4) .sr-tile { animation-delay: -1.8s; } .sr-item:nth-child(5) .sr-tile { animation-delay: -2.4s; } .sr-item:nth-child(6) .sr-tile { animation-delay: -3s; }
.sr-item:hover .sr-tile { transform: scale(1.08) rotate(-5deg); }
.sr-datos { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 56px; margin-top: 64px; padding-top: 28px; border-top: 1px solid rgba(30, 42, 54, .1); }
.sr-datos div { display: flex; align-items: baseline; gap: 10px; }
.sr-datos b { font-family: var(--ff-display); font-weight: 300; font-size: 38px; line-height: 1; color: var(--violeta); }
.sr-datos span { font-size: 14px; color: var(--tinta-2); }
.sr-esp { background: var(--blanco); }
.sr-esp .titulo p { margin-left: auto; margin-right: auto; max-width: 620px; }
.sr-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.sr-card { display: grid; grid-template-columns: 96px 1fr; grid-template-rows: auto auto; gap: 6px 22px; align-items: center; padding: 26px; border-radius: 28px; background: var(--crema); text-decoration: none; color: var(--tinta); border: 1px solid var(--borde); transition: transform .3s, box-shadow .3s, background .3s; }
.sr-card:hover { transform: translateY(-6px); box-shadow: var(--sombra-alta); background: #fff; }
.sr-card .sr-tile { grid-row: span 2; border-radius: 26px; padding: 16px; }
.sr-card h3 { font-size: 23px; line-height: 1.1; }
.sr-card p { margin: 6px 0 0; color: var(--tinta-2); font-size: 15px; line-height: 1.45; }
.sr-ir { font-weight: 700; font-size: 14px; color: var(--violeta); }
.sr-cual .tema summary { grid-template-columns: 76px 1fr auto; }
.sr-cual .tema .sr-tile { width: 64px; border-radius: 20px; padding: 12px; box-shadow: none; }
.sr-cual .tema small { color: var(--violeta); }
.sr-cual .tema-cuerpo { padding-left: 104px; }
.serena .tema[open] summary::after { background: #C9826F; }
.sr-final-son { width: 220px; margin: 0 auto 30px; }
.serena .final { background: linear-gradient(160deg, #DCE6F5, #F6E1D9 55%, #DDF0E8); }
/* páginas de especialidad */
.sr-hero-esp { padding-bottom: 100px; }
.sr-hero-esp h1 { font-size: clamp(42px, 6.8vw, 100px); }
.sr-tile.sr-tile-xl { width: 150px; padding: 28px; margin: 0 auto 30px; animation: rebotar 4s ease-in-out infinite; }
.h-orto { background: linear-gradient(160deg, #FFF1A8, #F2EDE4 55%, #DCE6F5); } .h-rehab { background: linear-gradient(160deg, #D6E0F2, #F2EDE4 55%, #F6E1D9); } .h-impl { background: linear-gradient(160deg, #CDEBFB, #F2EDE4 55%, #DDF0E8); }
.h-ciru { background: linear-gradient(160deg, #DAD5EA, #F2EDE4 55%, #F6E1D9); } .h-endo { background: linear-gradient(160deg, #E4ECBE, #F2EDE4 55%, #DDF0E8); }
.sr-trat { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.sr-trat-i { background: #fff; border: 1px solid var(--borde); border-radius: 26px; padding: 24px 20px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--sombra); }
.sr-trat-i b { font-family: var(--ff-display); font-weight: 500; font-size: 19px; line-height: 1.2; }
.sr-mini { display: flex; flex-direction: column; justify-content: center; width: 64px; aspect-ratio: 1; border-radius: 20px; padding: 12px; }
.sr-senal-fila { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.sr-senal { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 26px; padding: 26px 22px; display: flex; flex-direction: column; gap: 18px; }
.sr-senal b { font-family: var(--ff-display); font-weight: 400; font-size: 21px; line-height: 1.2; color: #fff; }
.sr-nota { margin: 36px 0 0; color: rgba(255, 255, 255, .7); max-width: 700px; }
.sr-otras .sr-fila { margin-top: 0; }
@media (max-width: 1000px) { .sr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sr-trat { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sr-senal-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .sr-hero { padding: 60px 0 50px; }
  .sr-fila { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 12px; margin-top: 44px; }
  .sr-item { width: auto; } .sr-item b { font-size: 13.5px; }
  .sr-cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sr-card { grid-template-columns: 76px 1fr; padding: 18px; gap: 4px 16px; } .sr-card h3 { font-size: 20px; }
  .sr-cual .tema summary { grid-template-columns: 56px 1fr auto; gap: 12px; } .sr-cual .tema .sr-tile { width: 52px; padding: 10px; } .sr-cual .tema-cuerpo { padding-left: 8px; }
  .sr-trat, .sr-senal-fila { grid-template-columns: minmax(0, 1fr); }
  .sr-tile.sr-tile-xl { width: 110px; padding: 20px; }
}

/* ===== Paso 4: Blanco nube, sonrisas flotando y Molar Kids Fantasía ===== */
.serena { --crema: #F7F9FC; --borde: #E3E8EF; background-color: #F7F9FC; }
.serena .cab { background: rgba(247, 249, 252, .88); }
.serena .cinta, .serena .banda-empresas { background: #EAF0F7; } .serena .banda-escuelas { background: #FBEDE8; }
.sr-hero { background: linear-gradient(160deg, #E3ECF8, #F7F9FC 45%, #FBEDE8 75%, #E4F4EE); }
.serena .final { background: linear-gradient(160deg, #E3ECF8, #FBEDE8 55%, #E4F4EE); }
.h-orto { background: linear-gradient(160deg, #FFF3B8, #F7F9FC 55%, #E3ECF8); } .h-rehab { background: linear-gradient(160deg, #DCE6F6, #F7F9FC 55%, #FBEDE8); } .h-impl { background: linear-gradient(160deg, #D3EEFC, #F7F9FC 55%, #E4F4EE); }
.h-ciru { background: linear-gradient(160deg, #E2DDF0, #F7F9FC 55%, #FBEDE8); } .h-endo { background: linear-gradient(160deg, #E9F0C8, #F7F9FC 55%, #E4F4EE); }
.sr-card { background: #fff; } .sr-esp { background: #EEF3F9; }
/* Tipografía del manual en TODO: Outfit (textos, botones, etiquetas) */
:root { --ff-display: 'Outfit', 'Segoe UI', sans-serif; --ff-body: 'Outfit', 'Segoe UI', -apple-system, sans-serif; }
body, button, input, select, textarea { font-family: var(--ff-body); }
/* sonrisas flotando en el fondo */
.flotan { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sr-hero > .envoltura, .sr-hero > .sr-fila, .sr-hero > .sr-datos, .experiencia > .envoltura, .sedes > .envoltura, .final > .envoltura, .final > .sr-final-son, .sr-senales > .envoltura, .op-hero > .envoltura, .op-hero > .op-monstruos, .monstruos > .envoltura, .monstruos > .desfile-monstruos { position: relative; z-index: 1; }
.experiencia, .sedes, .sr-senales, .final, .monstruos { position: relative; overflow: hidden; }
.fl { position: absolute; display: block; }
.flotan-claro .fl { opacity: .06; } .flotan-oscuro .fl { opacity: .055; } .kids .flotan-claro .fl { opacity: .35; }
.experiencia, .sedes, .sr-senales { background-image: none !important; }
.fl1 { left: -14%; top: -10%; width: 900px; rotate: -12deg; animation: flotar-son 22s ease-in-out 0s infinite alternate; }
.fl2 { left: 52%; top: -4%; width: 760px; rotate: 10deg; animation: flotar-son 27s ease-in-out -6s infinite alternate; }
.fl3 { left: -10%; top: 56%; width: 700px; rotate: 8deg; animation: flotar-son 32s ease-in-out -12s infinite alternate; }
.fl4 { left: 56%; top: 50%; width: 980px; rotate: -8deg; animation: flotar-son 37s ease-in-out -18s infinite alternate; }
@keyframes flotar-son { 0% { translate: 0 0; transform: rotate(0deg) scale(1); } 50% { translate: 60px -40px; transform: rotate(6deg) scale(1.05); } 100% { translate: -50px 30px; transform: rotate(-5deg) scale(.97); } }
@media (max-width: 640px) { .fl1, .fl3 { width: 420px; } .fl2, .fl4 { width: 480px; } }
@media (prefers-reduced-motion: reduce) { .fl { animation: none; } }
/* ===== Molar Kids · Fantasía arcoíris en odontopediatría ===== */
.kids { --violeta: #7A5CC4; --rosa: #D2578F; --noche: #233047; --crema: #FFF7EC; background-image: none; background-color: #FFF7EC; }
.kids .cab { background: rgba(255, 247, 236, .9); }
.kids .op-hero { background: linear-gradient(160deg, #E6DBF8, #FCE1EC 50%, #DCE7FB); }
.kids .degradado-calido { background: linear-gradient(100deg, #7A5CC4, #D2578F 60%, #E07A9F); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kids .boton-rosa { background: #7A5CC4; box-shadow: 0 12px 28px rgba(122, 92, 196, .32); }
.kids .boton-brillo { background: linear-gradient(100deg, #D2C2F2, #F9C6DA, #AFC8F7, #D2C2F2); background-size: 300% 100%; }
.kids .monstruos { background: linear-gradient(180deg, #FFF7EC, #F6E9FB 40%, #E4EEFC); }
.kids .op-avatar { box-shadow: 0 20px 50px rgba(122, 92, 196, .28); }
.kids .i-rosa { background: #F9C6DA; } .kids .i-amarillo { background: #FFE08A; } .kids .i-menta { background: #A8E2CF; } .kids .i-cielo { background: #AFC8F7; } .kids .i-lila { background: #D2C2F2; } .kids .i-naranja { background: #F9C6DA; }
.kids .tema small, .kids .monstruo span { color: #7A5CC4; }
.kids .tema summary::after { background: #7A5CC4; } .kids .tema[open] summary::after { background: #D2578F; }
.kids .tema[open] { background: #FBF3FF; }
.kids .final { background: linear-gradient(160deg, #D2C2F2, #F9C6DA 50%, #AFC8F7); }
/* Tipografía del manual: Kids = Outfit 300 + palabra clave en 900 */
.kids h1, .kids h2 { font-weight: 300; letter-spacing: -.04em; }
.kids h1 .degradado, .kids h1 .degradado-calido, .kids h2 .degradado, .kids h2 .degradado-calido, .kids h1 b, .kids h2 b { font-weight: 900; }
.kids h3, .kids .monstruo b, .kids .op-pilar b { font-weight: 800; }
.kids .etiqueta, .kids .etiqueta-rosa { color: #7A5CC4; } .kids .etiqueta-amarilla { color: #FFE08A; }
.kids .op-doctora { background: #233047; }
.kids .cab .logo img { height: 44px; width: auto; }
.op-logo { width: min(340px, 70vw); height: auto; margin: 0 auto 26px; }
.banda-kids-logo { width: 190px; height: auto; margin-bottom: 12px; }

/* ===== Paso 5: resto de páginas con el manual 2026 ===== */
/* tokens Kids completos (Fantasía arcoíris) */
.kids { --rosa: #D2578F; --menta: #A8E2CF; --cielo: #AFC8F7; --amarillo: #FFE08A; --naranja: #F9C6DA; --borde: #EDE3F5;
  --arcoiris: linear-gradient(110deg, #D2C2F2, #F9C6DA 50%, #AFC8F7); --texto-degradado: linear-gradient(100deg, #7A5CC4, #D2578F 60%, #E07A9F);
  --sombra: 0 14px 40px rgba(35, 48, 71, .10); --sombra-alta: 0 30px 70px rgba(35, 48, 71, .20); }
.degradado-calido { background: linear-gradient(100deg, #7A5CC4, #D2578F 60%, #E07A9F); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* botones de las bandas de empresas y escuelas: azul Molar (antes naranja del Open House) */
.serena .evento-ir, .banda-empresas .evento-ir { background: var(--violeta); color: #fff; }
.serena .banda-escuelas .evento-ir { background: #C9826F; color: #fff; }
/* instituciones (Serena) */
.serena .in-hero { background: linear-gradient(160deg, #E3ECF8, #F7F9FC 50%, #FBEDE8); }
/* guía para papás (Kids) */
.kids.gp, .gp.kids { background-color: #FFF7EC; }
.kids .gp-hero { background: linear-gradient(170deg, #E6DBF8, #FCE1EC 60%, #FFF7EC); }
.kids .gp-btn-agendar { background: linear-gradient(100deg, #D2C2F2, #F9C6DA, #AFC8F7); color: #233047; }
.kids .gp-sec + .gp-sec { border-top-color: #F1E6F7; }
.kids .gp-rosa { background: #FDEEF4; } .kids .gp-celeste { background: #EEF3FD; } .kids .gp-lila { background: #F4EFFC; }
.kids .gp-tabla td { border-bottom-color: #F3DDE8; } .kids .gp-sedes li { background: #F6F1FC; }
.kids .gp-precio { color: #7A5CC4; }
.serena .degradado-calido { background: linear-gradient(100deg, #3E6488, #4F7FA3 55%, #5A9483); -webkit-background-clip: text; background-clip: text; color: transparent; }
.serena h1 .degradado-calido, .serena h2 .degradado-calido, .serena h1 .degradado, .serena h2 .degradado { font-weight: 600; }
.kids .gp-hero h1 span, .kids h1 span, .kids h2 span { font-weight: 900; }
/* cirugía con el índigo del manual */
.e-ciru { --c: #8477AD; }