/* ============================================================
   IDB · Peluquería Infantil a Domicilio
   Paleta: rosa chicle + lila + menta + amarillo pastel
   ============================================================ */

:root {
  --rosa: #ff5ea8;
  --rosa-fuerte: #e0247a;
  --rosa-texto: #c2185b;
  --rosa-suave: #ffe1ef;
  --lila: #a06bf0;
  --lila-fuerte: #7c3aed;
  --lila-suave: #efe4ff;
  --menta: #4fd1c5;
  --amarillo: #ffc53d;
  --amarillo-claro: #ffe08a;
  --durazno: #ffb3a7;

  --color-bg: #fffafd;
  --color-bg-alt: #fdeef7;
  --color-surface: #ffffff;
  --color-text: #3d1f4d;
  --color-text-light: #7c6188;
  --color-border: rgba(160, 107, 240, .16);
  --color-dark: #40154f;

  --grad-primary: linear-gradient(135deg, #d81f74, #a833e0);
  --grad-soft: linear-gradient(135deg, #ef3d8c, #9a5cee);

  --shadow-sm: 0 6px 20px rgba(224, 36, 122, .08);
  --shadow-md: 0 14px 36px rgba(224, 36, 122, .13);
  --shadow-lg: 0 26px 60px rgba(160, 107, 240, .22);

  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-xl: 2px;

  --font-heading: 'Fredoka', sans-serif;
  --font-body: 'Nunito', sans-serif;
  /* display editorial: mismo lenguaje que mamás, distinta paleta */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --line: rgba(224, 36, 122, .26);
  --line-soft: rgba(160, 107, 240, .16);
  --line-lila: rgba(124, 58, 237, .3);
  --grad-hero: linear-gradient(118deg, #6d28d9 0%, #a855f7 62%, #c084fc 100%);
  --grad-titulo: linear-gradient(115deg, #d81f74 0%, #f0348f 100%);

  --nav-h: 112px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { color-scheme: light; scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
button, a, input, textarea, select { touch-action: manipulation; -webkit-tap-highlight-color: transparent; font-family: inherit }
h1, h2, h3, h4 { font-family: var(--font-heading); line-height: 1.15; font-weight: 600; text-wrap: balance }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); font-weight: 700; letter-spacing: -.5px }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem) }
/* titulares editoriales: serif ligera con degradado rosa-lila (el oro es solo de mamás) */
.hero h1, .section-head h2 { font-family: var(--font-display); font-weight: 300; letter-spacing: 0; line-height: 1.06; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent }
.section-head h2 { background-image: var(--grad-titulo) }
.hero h1 { background-image: var(--grad-hero) }
.hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.1rem) }
.section-head h2 { font-size: clamp(2.1rem, 4.2vw, 3.1rem) }
.hero h1 em, .section-head h2 em { font-style: italic }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem) }
p { text-wrap: pretty }
img { display: block; max-width: 100%; height: auto }
ul { list-style: none }
a { text-decoration: none; color: inherit }
iframe { display: block; border: 0 }
section[id] { scroll-margin-top: calc(var(--nav-h) + 14px) }

.skip-link { position: absolute; top: -100%; left: 0; z-index: 9999; background: var(--rosa-fuerte); color: #fff; padding: 12px 22px; border-radius: 0 0 var(--radius-sm) 0; font-weight: 800 }
.skip-link:focus { top: 0 }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--lila-fuerte); outline-offset: 3px; border-radius: 6px }

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px }
@media (min-width: 768px) { .container { padding: 0 40px } }
@media (min-width: 1260px) { .container { padding: 0 } }

/* ---------- piezas compartidas ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 15px; font-size: .7rem; letter-spacing: .32em; text-transform: uppercase; font-weight: 800; color: var(--rosa-texto); margin-bottom: 20px }
.eyebrow::before { content: ""; width: 46px; height: 1px; background: currentColor; opacity: .6 }
.star-motif { width: 13px; height: 13px; background: var(--amarillo); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); flex-shrink: 0 }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 11px; font-family: var(--font-body); font-weight: 800; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; padding: 17px 34px; border-radius: 2px; border: none; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease }
.btn i { font-size: 1.2em }
.btn-primary { background: var(--grad-primary); color: #fff; box-shadow: 0 12px 28px rgba(224, 36, 122, .32) }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(224, 36, 122, .42) }
.btn-soft { background: transparent; color: var(--rosa-fuerte); border: 1px solid var(--rosa) }
.btn-soft:hover { transform: translateY(-3px); border-color: var(--rosa-fuerte); background: rgba(255, 255, 255, .6) }
.btn-white { background: #fff; color: var(--rosa-fuerte); box-shadow: 0 14px 34px rgba(64, 21, 79, .25) }
.btn-white:hover { transform: translateY(-3px) }

.section { padding: clamp(64px, 8vw, 104px) 0; position: relative }
.section-head { text-align: center; max-width: 700px; margin: 0 auto clamp(38px, 5vw, 58px) }
.section-head p { color: var(--color-text-light); font-size: 1.06rem }
.bg-alt { background: var(--color-bg-alt) }

.sep { border: none; height: 16px; max-width: 1180px; margin: 0 auto; background-image: radial-gradient(circle, var(--rosa-suave) 3.5px, transparent 4px); background-size: 26px 16px; background-repeat: repeat-x; background-position: center; opacity: .9 }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1) }
.reveal.visible { opacity: 1; transform: none }


/* ---------- navegación ---------- */
header.nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 1100; padding: 14px 0; transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease }
header.nav.scrolled { background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 6px 26px rgba(160, 107, 240, .14); padding: 8px 0 }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px }
.logo { font-family: var(--font-heading); font-weight: 700; font-size: 1.85rem; letter-spacing: .5px; display: inline-flex; align-items: center; gap: 9px; color: var(--rosa-fuerte) }
.logo-star { width: 22px; height: 22px; background: var(--amarillo); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); display: inline-block; flex-shrink: 0 }
.logo-mark { height: 84px; width: auto; flex-shrink: 0; transition: height .3s ease }
header.nav.scrolled .logo-mark { height: 72px }
@media (max-width: 520px) { .logo { font-size: 1.6rem; gap: 7px } .logo-mark { height: 72px } }
.footer-brand .logo-mark { height: 30px }
.nav-links { display: flex; gap: 26px; align-items: center }
.nav-links a { font-weight: 700; font-size: .98rem; color: var(--color-text); position: relative; transition: color .25s ease }
.nav-links li:not(:last-child) a::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 3px; border-radius: 3px; background: var(--rosa); transition: width .25s ease }
.nav-links li:not(:last-child) a:hover::after { width: 100% }
.nav-links a:hover { color: var(--rosa-texto) }
.nav-cta { background: var(--grad-primary); color: #fff !important; padding: 11px 24px; border-radius: 2px; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; font-family: var(--font-body); box-shadow: 0 8px 20px rgba(224, 36, 122, .3); transition: transform .25s ease, box-shadow .25s ease }
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(224, 36, 122, .42) }
.hamburger, .nav-close { display: none; background: none; border: none; cursor: pointer; color: var(--rosa-fuerte); line-height: 0 }
.hamburger .material-icons { font-size: 2.1rem }
.nav-links .nav-close-item { display: none }
.nav-backdrop { position: fixed; inset: 0; background: rgba(61, 31, 77, .45); backdrop-filter: blur(3px); z-index: 1000; opacity: 0; transition: opacity .3s ease }
.nav-backdrop.show { opacity: 1 }

@media (min-width: 941px) and (max-width: 1120px) {
  .nav-links { gap: 17px }
  .nav-links a { font-size: .9rem }
  .nav-cta { padding: 10px 18px }
}

@media (max-width: 940px) {
  .hamburger { display: block }
  .nav-links .nav-close-item { display: block; position: absolute; top: 20px; right: 20px }
  .nav-close { display: block }
  .nav-close .material-icons { font-size: 2rem }
  .nav-links { position: fixed; top: 0; right: -100%; height: 100dvh; width: 82%; max-width: 330px; background: linear-gradient(170deg, #fff, var(--color-bg-alt)); flex-direction: column; justify-content: center; gap: 24px; transition: right .35s cubic-bezier(.22, 1, .36, 1); box-shadow: -14px 0 50px rgba(64, 21, 79, .22); overscroll-behavior: contain; z-index: 1001; padding: 60px 30px }
  .nav-links.open { right: 0 }
  .nav-links a { font-size: 1.12rem }
  .nav-links li:not(:last-child) a::after { display: none }
}

/* ---------- hero: la organización de mamás, en clave infantil ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--nav-h) + clamp(46px, 6vw, 78px)) 0 clamp(92px, 11vw, 138px); background: radial-gradient(92% 120% at 6% 4%, #faf5ff 0%, transparent 56%), linear-gradient(158deg, #f1e8ff 0%, #e9dcff 52%, #f3ecff 100%) }
/* doble filete rosa, el mismo marco de mamás con otra tinta */
.hero::before { content: ""; position: absolute; inset: clamp(14px, 2vw, 26px); border: 1px solid var(--line-lila); pointer-events: none; z-index: 4 }
.hero::after { content: ""; position: absolute; inset: calc(clamp(14px, 2vw, 26px) + 5px); border: 1px solid rgba(124, 58, 237, .13); pointer-events: none; z-index: 4 }

/* la foto sangra por el costado derecho y se funde con el fondo */
.hero-shot { position: absolute; inset: -7% 0 -7% auto; width: 48%; z-index: 0; will-change: transform }
.hero-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24% }
.hero-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(243, 236, 255, .92) 0, rgba(243, 236, 255, 0) calc(var(--nav-h) + 30px)), linear-gradient(90deg, #ede2ff 0%, rgba(237, 226, 255, .88) 20%, rgba(243, 236, 255, .3) 46%, rgba(243, 236, 255, 0) 70%) }

.hero-inner { position: relative; z-index: 3 }
.hero .eyebrow { color: var(--lila-fuerte) }
.hero-body { max-width: 580px }
.hero h1 { margin-bottom: 20px }
.hero-lead { color: var(--color-text-light); font-size: 1.05rem; line-height: 1.8; margin-bottom: 28px; max-width: 520px }

.hero-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 16px 0; margin-bottom: 32px; border-top: 1px solid var(--line-lila); border-bottom: 1px solid var(--line-lila) }
.hero-chips li { display: flex; align-items: center; gap: 18px; font-weight: 700; font-size: .93rem; letter-spacing: .02em }
.hero-chips li:not(:last-child)::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--lila-fuerte); opacity: .85 }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px }
.hero-note { margin-top: 22px; font-size: .84rem; color: var(--color-text-light); letter-spacing: .03em }

@media (max-width: 899px) {
  .hero { padding-top: var(--nav-h) }
  .hero-shot { position: relative; inset: auto; width: auto; height: clamp(220px, 44vw, 320px); margin: 0 0 clamp(28px, 5vw, 42px) }
  .hero-shot img { object-position: 50% 22% }
  .hero-shot::after { background: linear-gradient(180deg, rgba(237, 226, 255, .12) 0%, rgba(240, 231, 255, .6) 64%, #f1e8ff 100%) }
  .hero-body { max-width: none }
}

.hero-stars { position: fixed; inset: 0; z-index: 900; opacity: .6; pointer-events: none }
.hero-stars svg { position: absolute; opacity: 0; animation: starPop .7s ease forwards, starDrift 11s ease-in-out infinite }
.blob { position: absolute; border-radius: 50%; filter: blur(72px); z-index: 1; animation: float 8s ease-in-out infinite }
.blob-1 { width: 300px; height: 300px; background: rgba(255, 94, 168, .38); top: 6%; left: -6% }
.blob-2 { width: 250px; height: 250px; background: rgba(160, 107, 240, .32); bottom: 6%; right: -4%; animation-delay: 2s }
.blob-3 { width: 200px; height: 200px; background: rgba(79, 209, 197, .28); top: 46%; left: 42%; animation-delay: 4s }
.scroll-hint { position: absolute; left: 50%; bottom: clamp(52px, 7vw, 84px); transform: translateX(-50%); z-index: 4; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--rosa-fuerte); display: grid; place-items: center; border: 1px solid var(--line-lila); box-shadow: none; animation: bounce 2.2s infinite }
.scroll-hint .material-icons { font-size: 26px }
@media (max-width: 700px) { .scroll-hint { display: none } }

@keyframes starPop { from { opacity: 0; transform: scale(.3) rotate(-40deg) } to { opacity: .9; transform: scale(1) rotate(0) } }
@keyframes starDrift { 0%, 100% { translate: 0 0 } 33% { translate: 9px -20px } 66% { translate: -11px -9px } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0) } 50% { transform: translateY(-22px) rotate(5deg) } }
@keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0) } 50% { transform: translateX(-50%) translateY(9px) } }

/* ---------- valores ---------- */
.value-grid { display: grid; grid-template-columns: 1fr; gap: 24px }
@media (min-width: 620px) { .value-grid { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 1020px) { .value-grid { grid-template-columns: repeat(4, 1fr) } }
.value-card { --accent: var(--rosa-fuerte); background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 26px 0 0; text-align: left; box-shadow: none; transition: transform .3s ease, border-color .3s ease }
.value-card:hover { transform: translateY(-6px); border-top-color: var(--accent) }
.value-icon { margin: 0 0 16px; color: var(--accent); transition: transform .35s ease }
.value-card:hover .value-icon { transform: translateY(-3px) }
.value-icon .material-icons { font-size: 34px }
.value-card:nth-child(2) { --accent: var(--lila-fuerte) }
.value-card:nth-child(3) { --accent: #12a3a3 }
.value-card:nth-child(4) { --accent: #ef8a2c }
.value-card h3 { margin-bottom: 10px }
.value-card p { color: var(--color-text-light); font-size: .97rem }

/* ---------- estadísticas ---------- */
.stats-band { background: var(--grad-primary); position: relative; overflow: hidden; padding: clamp(52px, 7vw, 74px) 0 }
.stats-band::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .22) 1.6px, transparent 1.7px); background-size: 24px 24px; opacity: .7 }
.stats-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px; text-align: center }
@media (min-width: 820px) { .stats-grid { grid-template-columns: repeat(4, 1fr) } }
.stat-num { font-family: var(--font-heading); font-size: clamp(2.2rem, 4vw, 2.9rem); font-weight: 700; color: var(--amarillo-claro); font-variant-numeric: tabular-nums; line-height: 1.1 }
.stat-label { color: rgba(255, 255, 255, .92); font-weight: 700; margin-top: 6px; font-size: .96rem }

/* ---------- proceso ---------- */
.process-wrap { max-width: 820px; margin: 0 auto }
.step { display: flex; gap: 22px; align-items: flex-start; position: relative; padding-bottom: 42px }
.step:last-child { padding-bottom: 0 }
.step:not(:last-child)::before { content: ""; position: absolute; left: 29px; top: 64px; bottom: 6px; width: 1px; background: var(--line) }
.step-num { --accent: var(--rosa-fuerte); flex-shrink: 0; width: 58px; color: var(--accent); font-family: var(--font-display); font-size: 2.9rem; font-weight: 300; line-height: 1; text-align: center }
.step:nth-child(2) .step-num { --accent: var(--lila-fuerte) }
.step:nth-child(3) .step-num { --accent: #12a3a3 }
.step:nth-child(4) .step-num { --accent: #ef8a2c }
.step-body { padding-top: 4px }
.step-body h3 { margin-bottom: 8px }
.step-body p { color: var(--color-text-light) }

/* ---------- servicios ---------- */
.svc-grid { display: grid; grid-template-columns: 1fr; gap: 26px }
@media (min-width: 660px) { .svc-grid { grid-template-columns: repeat(2, 1fr) } }
@media (min-width: 1020px) { .svc-grid { grid-template-columns: repeat(3, 1fr) } }
.svc-card { background: var(--color-surface); border-radius: 2px; overflow: hidden; box-shadow: none; border: 1px solid var(--line-soft); display: flex; flex-direction: column; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease }
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-sm); border-color: var(--line) }
.svc-img { overflow: hidden; height: 250px; position: relative }
.svc-img::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(to top, rgba(61, 31, 77, .28), transparent) }
.svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease }
.svc-card:hover .svc-img img { transform: scale(1.07) }
.svc-content { padding: 24px 24px 28px; display: flex; flex-direction: column; flex: 1 }
.svc-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; color: var(--rosa-texto); font-weight: 800; font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; margin-bottom: 14px }
.svc-tag::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .6 }
.svc-content h3 { margin-bottom: 10px }
.svc-content p { color: var(--color-text-light); font-size: .97rem; flex: 1; margin-bottom: 22px }
.svc-btn { align-self: stretch; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--rosa-fuerte); padding: 16px 0 0; border-top: 1px solid var(--line); font-weight: 800; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; transition: color .25s ease }
.svc-btn .material-icons { font-size: 18px; transition: transform .25s ease }
.svc-btn:hover { color: var(--lila-fuerte) }
.svc-btn:hover .material-icons { transform: translateX(4px) }

/* ---------- mamás: azul marino y dorado, aparte del resto de la página ---------- */
.mamas {
  --m-text: #f6efe2;
  --m-muted: rgba(246, 239, 226, .72);
  --m-gold: #d9b45c;
  --m-line: rgba(217, 180, 92, .34);
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--m-text);
  padding: clamp(74px, 9vw, 116px) 0;
  background: radial-gradient(90% 120% at 8% 10%, #16386b 0%, transparent 58%), linear-gradient(160deg, #0e2549, #050f1f);
}
/* filete dorado, como el marco del arte */
.mamas::before { content: ""; position: absolute; inset: clamp(14px, 2vw, 26px); border: 1px solid var(--m-line); pointer-events: none; z-index: 3 }
.mamas::after { content: ""; position: absolute; inset: calc(clamp(14px, 2vw, 26px) + 5px); border: 1px solid rgba(217, 180, 92, .14); pointer-events: none; z-index: 3 }

/* la foto sangra por el costado derecho y se funde con el fondo */
.mamas-shot { position: absolute; inset: 0 0 0 auto; width: 48%; z-index: 0 }
.mamas-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 32%; filter: saturate(.9) contrast(1.05) }
.mamas-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #071730 2%, rgba(7, 23, 48, .72) 34%, rgba(7, 23, 48, .12) 100%) }

.sparkle { position: absolute; z-index: 2; background: var(--m-gold); clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%); animation: twinkle 3.4s ease-in-out infinite }
.sparkle.s1 { width: 26px; height: 26px; top: 14%; left: 6% }
.sparkle.s2 { width: 15px; height: 15px; top: 68%; left: 3%; animation-delay: .9s }
.sparkle.s3 { width: 20px; height: 20px; top: 24%; left: 47%; animation-delay: 1.7s }
.sparkle.s4 { width: 13px; height: 13px; bottom: 16%; left: 42%; animation-delay: 2.4s }
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.82) } 50% { opacity: .95; transform: scale(1) } }

.mamas-inner { position: relative; z-index: 2 }
.mamas-body { max-width: 560px }

.mamas-eyebrow { display: inline-flex; align-items: center; gap: 15px; font-size: .7rem; letter-spacing: .34em; text-transform: uppercase; font-weight: 800; color: var(--m-gold); margin-bottom: 20px }
.mamas-eyebrow::before { content: ""; width: 46px; height: 1px; background: currentColor; opacity: .7 }
.mamas h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.06; margin-bottom: 20px; color: var(--m-gold); background: linear-gradient(180deg, #fdf3d4 0%, #e7cb74 48%, #c3963230 100%), linear-gradient(180deg, #fdf3d4, #c69a35); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent }
.mamas h2 em { font-style: italic }
.mamas-lead { color: var(--m-muted); font-size: 1.05rem; line-height: 1.8; margin-bottom: 28px }

.mamas-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 16px 0; margin-bottom: 32px; border-top: 1px solid var(--m-line); border-bottom: 1px solid var(--m-line) }
.mamas-chips li { display: flex; align-items: center; gap: 18px; font-weight: 700; font-size: .93rem; letter-spacing: .02em }
.mamas-chips li:not(:last-child)::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--m-gold); opacity: .8 }

.mamas-cta { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: #0d2246; background: linear-gradient(180deg, #f3dfa2, #cfa447); border-radius: 2px; padding: 17px 36px; box-shadow: 0 12px 30px rgba(0, 0, 0, .35); transition: transform .3s ease, box-shadow .3s ease }
.mamas-cta i { font-size: 1.35em }
.mamas-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(0, 0, 0, .45) }
.mamas a:focus-visible { outline-color: var(--m-gold); border-radius: 2px }
.mamas-note { margin-top: 22px; font-size: .84rem; color: var(--m-muted); letter-spacing: .03em }

@media (max-width: 899px) {
  .mamas { padding-top: 0 }
  .mamas-shot { position: relative; width: auto; height: clamp(230px, 46vw, 330px); margin: 0 0 clamp(30px, 5vw, 44px) }
  .mamas-shot img { object-position: 50% 28% }
  .mamas-shot::after { background: linear-gradient(180deg, rgba(7, 23, 48, .25) 0%, rgba(7, 23, 48, .55) 62%, #081b36 100%) }
  .sparkle.s3, .sparkle.s4 { display: none }
  .mamas-body { max-width: none }
}

/* ---------- galería (masonry) ---------- */
.gallery-sec { position: relative; overflow: hidden }
.gallery-sec::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 78%, rgba(79, 209, 197, .10), transparent 55%), radial-gradient(circle at 84% 14%, rgba(255, 197, 61, .14), transparent 52%); pointer-events: none }
/* pestañas sin JS: radios + :has() */
.gallery-tabs { position: relative; display: flex; justify-content: center; gap: clamp(20px, 4vw, 44px); margin-bottom: clamp(26px, 3vw, 36px); flex-wrap: wrap; border-bottom: 1px solid var(--line-soft) }
.gallery-tabs input { position: absolute; opacity: 0; pointer-events: none }
.gallery-tabs label { cursor: pointer; font-weight: 800; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; padding: 4px 2px 14px; margin-bottom: -1px; color: var(--color-text-light); border-bottom: 2px solid transparent; transition: color .25s ease, border-color .25s ease }
.gallery-tabs label:hover { color: var(--rosa-fuerte) }
.gallery-tabs input:checked + label { color: var(--rosa-fuerte); border-bottom-color: var(--rosa-fuerte) }
.gallery-tabs input:focus-visible + label { outline: 3px solid var(--lila-fuerte); outline-offset: 3px }
.gallery-grid { display: none }
.gallery-sec:has(#tab-ninas:checked) #gal-ninas,
.gallery-sec:has(#tab-mujeres:checked) #gal-mujeres { display: block }
.gallery-grid { position: relative; columns: 1; column-gap: 18px }
@media (min-width: 620px) { .gallery-grid { columns: 2 } }
@media (min-width: 1020px) { .gallery-grid { columns: 3 } }
.gallery-item { break-inside: avoid; margin: 0 0 18px; border-radius: 2px; overflow: hidden; box-shadow: none; border: 1px solid var(--line-soft); position: relative }
.gallery-item img { width: 100%; height: auto; transition: transform .55s ease }
.gallery-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(224, 36, 122, .32), transparent 55%); opacity: 0; transition: opacity .35s ease }
.gallery-item:hover img { transform: scale(1.06) }
.gallery-item:hover::after { opacity: 1 }

/* ---------- testimonios ---------- */
.test-grid { display: grid; grid-template-columns: 1fr; gap: 26px }
@media (min-width: 760px) { .test-grid { grid-template-columns: repeat(3, 1fr) } }
.test-card { background: var(--color-surface); border-radius: 2px; padding: 32px 28px; box-shadow: none; border: 1px solid var(--line-soft); position: relative; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease }
.test-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-sm); border-color: var(--line) }
.test-quote { font-family: var(--font-heading); font-size: 4rem; line-height: 1; color: var(--lila-suave); position: absolute; top: 16px; right: 22px }
.test-stars { color: var(--amarillo); margin-bottom: 14px; display: flex; gap: 2px }
.test-stars .material-icons { font-size: 20px }
.test-text { position: relative; z-index: 1; margin-bottom: 22px }
.test-author { display: flex; align-items: center; gap: 14px }
.test-avatar { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-soft); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; border: 3px solid var(--amarillo); flex-shrink: 0 }
.test-author h4 { font-size: 1.03rem; margin-bottom: 2px }
.test-author span { color: var(--color-text-light); font-size: .86rem }

/* ---------- banda CTA ---------- */
.cta-band { background: linear-gradient(135deg, #a833e0, #d81f74); position: relative; overflow: hidden; padding: clamp(62px, 8vw, 92px) 0; text-align: center; color: #fff }
.cta-band::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .2) 1.6px, transparent 1.7px); background-size: 22px 22px; opacity: .8 }
.cta-band-inner { position: relative; z-index: 2 }
.cta-band h2 { color: #fff; margin-bottom: 14px }
.cta-band p { color: rgba(255, 255, 255, .95); max-width: 580px; margin: 0 auto 30px; font-size: 1.08rem }

/* ---------- contacto ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 40px }
@media (min-width: 940px) { .contact-grid { grid-template-columns: 1.05fr .95fr; gap: 48px } }
.contacto-form { background: var(--color-surface); border: 1px solid var(--line-soft); border-radius: 2px; padding: clamp(24px, 3vw, 34px) }
.form-field { margin-bottom: 18px }
.form-field label { display: block; font-weight: 800; margin-bottom: 7px; font-size: .92rem }
.form-field input, .form-field textarea { width: 100%; padding: 14px 16px; border: 2px solid var(--color-border); border-radius: var(--radius-sm); font-size: 1rem; background: var(--color-bg); color: var(--color-text); transition: border-color .25s ease, background-color .25s ease }
.form-field input::placeholder, .form-field textarea::placeholder { color: #b9a6c4 }
.form-field input:focus, .form-field textarea:focus { border-color: var(--rosa); background: #fff; outline: none }
.form-field input[aria-invalid="true"], .form-field textarea[aria-invalid="true"] { border-color: #e5484d }
.form-field textarea { resize: vertical; min-height: 130px }
.form-submit { width: 100%; background: var(--grad-primary); color: #fff; border: none; padding: 17px 34px; border-radius: 2px; font-weight: 800; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; box-shadow: 0 12px 26px rgba(224, 36, 122, .3); transition: transform .25s ease, box-shadow .25s ease }
.form-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(224, 36, 122, .4) }
.form-error { margin-top: 14px; color: #c0242a; font-weight: 700; font-size: .94rem }
.form-success { display: none; margin-top: 16px; padding: 14px 18px; background: rgba(79, 209, 197, .16); color: #0f766e; border-radius: var(--radius-sm); font-weight: 700 }
.form-success.show { display: block }

.contact-brand { text-align: center; padding-bottom: 4px }
.contact-brand img { width: min(100px, 30%); height: auto; margin: 0 auto 6px }
.contact-brand::after { content: ""; display: block; width: 48px; height: 3px; margin: 0 auto; border-radius: 3px; background: var(--grad-primary); opacity: .55 }
.contact-info { display: flex; flex-direction: column; gap: 22px }
.info-item { display: flex; gap: 16px; align-items: flex-start }
.info-ico { flex-shrink: 0; width: 52px; height: 52px; border-radius: 2px; background: var(--grad-soft); color: #fff; display: grid; place-items: center }
.info-ico .material-icons, .info-ico i { font-size: 22px }
.info-item h4 { font-size: 1.04rem; margin-bottom: 2px }
.info-item p { color: var(--color-text-light); font-size: .96rem }
.info-item a { color: var(--color-text-light); border-bottom: 2px solid transparent; transition: color .25s ease, border-color .25s ease }
.info-item a:hover { color: var(--rosa-texto); border-color: var(--rosa-suave) }
.map-wrap { margin-top: 6px; border-radius: 2px; overflow: hidden; border: 1px solid var(--line-soft) }

/* ---------- FAQ ---------- */
.faq-wrap { max-width: 820px; margin: clamp(50px, 7vw, 76px) auto 0 }
.faq-wrap .section-head { margin-bottom: 32px }
.faq-item { background: var(--color-surface); border: 1px solid var(--line-soft); border-radius: 2px; margin-bottom: 14px; overflow: hidden; transition: border-color .25s ease }
.faq-item:has(.faq-q[aria-expanded="true"]) { border-color: var(--rosa) }
.faq-q { width: 100%; background: none; border: none; padding: 20px 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; font-family: var(--font-heading); font-weight: 600; font-size: 1.04rem; color: var(--color-text); text-align: left }
.faq-q .material-icons { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--rosa-suave); color: var(--rosa-texto); display: grid; place-items: center; transition: transform .3s ease, background-color .3s ease }
.faq-q[aria-expanded="true"] .material-icons { transform: rotate(180deg); background: var(--grad-primary); color: #fff }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease }
.faq-a p { padding: 0 22px 20px; color: var(--color-text-light) }

/* ---------- footer ---------- */
footer { background: var(--color-dark); color: rgba(255, 255, 255, .78); padding: clamp(48px, 6vw, 68px) 0 24px; position: relative; overflow: hidden }
footer::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .07) 1.4px, transparent 1.5px); background-size: 26px 26px }
footer .container { position: relative; z-index: 2 }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 34px; margin-bottom: 38px }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 2fr 1fr 1.4fr } }
.footer-brand .logo { color: #fff; margin-bottom: 14px }
.footer-brand p { font-size: .95rem; max-width: 340px }
.footer-col h4 { color: #fff; margin-bottom: 16px; font-size: 1.14rem }
.footer-col li { margin-bottom: 10px; font-size: .95rem }
.footer-col a { transition: color .25s ease }
.footer-col a:hover { color: var(--amarillo-claro) }
.footer-social { display: flex; gap: 12px; margin-top: 16px }
.footer-social a { width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .12); display: grid; place-items: center; color: #fff; font-size: 1.25rem; transition: background-color .25s ease, transform .25s ease }
.footer-social a:hover { background: var(--rosa); transform: translateY(-3px) }
.footer-bottom { position: relative; z-index: 2; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 22px; text-align: center; font-size: .87rem }
.footer-bottom span { color: var(--amarillo); font-weight: 700 }
.footer-bottom #year { color: inherit; font-weight: inherit }

/* ---------- WhatsApp flotante ---------- */
.whatsapp-float { position: fixed; right: 20px; bottom: 20px; width: 60px; height: 60px; background: #25d366; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1.9rem; z-index: 999; box-shadow: 0 8px 24px rgba(37, 211, 102, .5); animation: pulseWa 2.6s infinite; transition: transform .25s ease }
.whatsapp-float:hover { transform: scale(1.08) }
@keyframes pulseWa { 0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5) } 50% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0) } }

/* ---------- accesibilidad / movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important }
  .reveal { opacity: 1; transform: none }
  .hero-stars svg { opacity: .9 }
}