/*
  Ronyfire: tema oscuro único (la marca es un letrero de neón).
  Acento: rosa de la marca. Cian solo en el logo y en el lado "niño" de Gender Reveal.
  Radios: botones en píldora, fotos y bloques 20px, campos 12px.
*/
:root {
  --bg: #0d0b14;
  --bg-2: #15121f;
  --bg-3: #1e1a2b;
  --text: #f3f0f7;
  --muted: #b3acc2;
  --line: rgba(243, 240, 247, .1);
  --pink: #f2388f;
  --pink-hover: #ff4f9f;
  --cyan: #3cc8ee;
  --r: 20px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body: "Schibsted Grotesk", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--body); font-size: 17px; line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1; letter-spacing: .005em; text-transform: uppercase; }
h2 { font-size: clamp(2.4rem, 5vw, 3.8rem); max-width: 20ch; }
.eyebrow { font-weight: 700; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--pink); margin-bottom: 16px; }
.sub { color: var(--muted); max-width: 46ch; margin-top: 14px; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 30; height: 68px; display: flex; align-items: center; gap: 32px; padding: 0 clamp(16px, 4vw, 48px); background: rgba(13, 11, 20, .86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.logo { font-family: var(--display); font-weight: 900; font-size: 1.85rem; letter-spacing: .02em; color: var(--cyan); text-shadow: 0 0 14px rgba(60, 200, 238, .45); }
.logo span { color: var(--pink); text-shadow: 0 0 14px rgba(242, 56, 143, .5); }
.links { display: flex; gap: 28px; margin-left: auto; font-weight: 500; font-size: .95rem; color: var(--muted); }
.links a { transition: color .2s; }
.links a:hover { color: var(--text); }
.menu-btn { display: none; background: none; border: 0; color: var(--text); font-size: 1.6rem; cursor: pointer; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 15px 26px; border-radius: 999px; border: 0; cursor: pointer; font: 700 1rem var(--body); color: #fff; background: var(--pink); transition: background .2s, transform .2s var(--ease); }
.btn i { font-size: 1.25em; }
.btn:hover { background: var(--pink-hover); }
.btn:active { transform: scale(.98); }
.btn-sm { padding: 10px 18px; font-size: .92rem; }
.btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px rgba(243, 240, 247, .35); }
.btn-ghost:hover { background: rgba(243, 240, 247, .08); }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; font-weight: 700; color: var(--pink); }
.link-arrow i { transition: transform .25s var(--ease); }
.link-arrow:hover i { transform: translateX(4px); }

/* Hero: split asimétrico */
.hero { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 64px); align-items: center; min-height: calc(100dvh - 68px); padding: clamp(32px, 5vw, 72px) clamp(16px, 4vw, 48px); overflow: hidden; }
#sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-copy { position: relative; max-width: 620px; }
h1 { font-size: clamp(3.2rem, 7.2vw, 6.4rem); line-height: .92; margin-bottom: 22px; }
h1 em { font-style: normal; color: var(--pink); }
.lead { color: var(--muted); font-size: 1.15rem; max-width: 40ch; margin-bottom: 32px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-photo { position: relative; height: min(78dvh, 720px); border-radius: var(--r); overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; animation: drift 18s var(--ease) infinite alternate; }
@keyframes drift { to { transform: scale(1.06) translateY(-1.5%); } }

/* Proof row */
.proof { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof div { padding: 28px clamp(16px, 4vw, 48px); }
.proof div + div { border-left: 1px solid var(--line); }
.proof strong { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1; text-transform: uppercase; }
.proof span { color: var(--muted); font-size: .92rem; }

/* Sections */
.section { padding: clamp(72px, 9vw, 120px) clamp(16px, 4vw, 48px); max-width: 1400px; margin: 0 auto; scroll-margin-top: 68px; }

/* Bento de productos */
.bento { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: 300px 300px; gap: 14px; margin-top: 40px; }
.cell { position: relative; border-radius: var(--r); overflow: hidden; background: var(--bg-3); display: flex; align-items: flex-end; }
.cell-big { grid-row: span 2; }
.cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.cell:hover img { transform: scale(1.05); }
.cell::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(13, 11, 20, .88)); }
.cell-text { position: relative; z-index: 1; padding: 22px; }
.cell h3 { font-size: 1.9rem; margin-bottom: 4px; }
.cell-big h3 { font-size: 2.6rem; }
.cell p { color: #ddd7e6; font-size: .95rem; max-width: 34ch; }
.cell-solid { background: var(--pink); }
.cell-solid::after { display: none; }
.cell-solid > i { position: absolute; top: 22px; left: 22px; font-size: 2.4rem; }
.cell-solid p { color: #fff; }

/* Gender reveal */
.gender { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; padding: 0 clamp(16px, 4vw, 48px); max-width: 1400px; margin: 0 auto; scroll-margin-top: 90px; }
.gender-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gender-photos figure { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; }
.gender-photos figure:last-child { transform: translateY(48px); }
.gender-photos img { width: 100%; height: 100%; object-fit: cover; }
.gender-photos figcaption { position: absolute; left: 18px; bottom: 14px; font-family: var(--display); font-weight: 900; font-size: 2.6rem; text-transform: uppercase; color: #fff; }
.gender-photos figure:first-child figcaption { color: #ffd6ea; }
.gender-photos figure:last-child figcaption { color: #cdf3ff; }
.gender-copy p:not(.eyebrow) { color: var(--muted); margin: 18px 0 28px; max-width: 44ch; }

/* Eventos */
.events { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: 48px; }
.events-photo { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; }
.events-photo img { width: 100%; height: 100%; object-fit: cover; }
.events-list ul { margin-top: 32px; }
.events-list li { display: flex; gap: 18px; padding: 20px 0; }
.events-list li + li { border-top: 1px solid var(--line); }
.events-list li > i { font-size: 1.7rem; color: var(--pink); margin-top: 2px; }
.events-list h3 { font-size: 1.6rem; }
.events-list li p { color: var(--muted); font-size: .97rem; }

/* Banda de foto completa */
.band { position: relative; height: clamp(320px, 50vw, 560px); display: flex; align-items: flex-end; overflow: hidden; }
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13, 11, 20, .92), transparent 60%); }
.band p { position: relative; z-index: 1; font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.8rem, 4vw, 3.2rem); line-height: 1.02; max-width: 22ch; padding: 0 clamp(16px, 4vw, 48px) clamp(32px, 5vw, 56px); }

/* Contacto */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); }
.contact dl { margin: 32px 0 24px; display: grid; gap: 18px; }
.contact dt { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); }
.contact dt i { color: var(--pink); font-size: 1.1rem; }
.contact dd { font-size: 1.1rem; font-weight: 500; }
.contact dd a { color: var(--pink); }
.socials { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.socials a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--bg-3); font-weight: 500; font-size: .92rem; transition: background .2s; }
.socials a:hover { background: #2a2540; }
.socials i { font-size: 1.15rem; }
.map { width: 100%; height: 260px; border: 0; border-radius: var(--r); filter: invert(.9) hue-rotate(180deg) saturate(.6); }

.form { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); padding: clamp(24px, 3vw, 36px); display: grid; gap: 18px; align-content: start; }
.form h3 { font-size: 2rem; margin-bottom: 4px; }
.field { display: grid; gap: 8px; }
.field label { font-weight: 500; font-size: .92rem; }
.field label span { color: var(--muted); font-weight: 400; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.form input, .form select, .form textarea { width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(243, 240, 247, .18); background: var(--bg); color: var(--text); font: inherit; font-size: 1rem; }
.form select option { background: var(--bg-2); }
.form input[type="date"] { color-scheme: dark; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--pink); outline-offset: 1px; border-color: transparent; }
.field.invalid input, .field.invalid select { border-color: #ff6b8a; }
.error { color: #ff8fa6; font-size: .86rem; }
.form .btn { justify-content: center; margin-top: 4px; }
.form-note { color: var(--muted); font-size: .85rem; text-align: center; }

/* Footer */
.footer { padding: 48px clamp(16px, 4vw, 48px) 110px; border-top: 1px solid var(--line); color: var(--muted); font-size: .92rem; display: grid; gap: 6px; }
.footer .logo { font-size: 2.2rem; margin-bottom: 8px; width: fit-content; }
.small { font-size: .82rem; }

.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; font-size: 1.9rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); transition: transform .2s var(--ease); }
.wa-float:hover { transform: scale(1.06); }

/* Aparición al hacer scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.in { opacity: 1; transform: none; }

/* Tablet */
@media (max-width: 1000px) {
  .links { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px 16px 16px; background: var(--bg); border-bottom: 1px solid var(--line); color: var(--text); }
  .links a { padding: 14px 0; font-size: 1.05rem; }
  .links a + a { border-top: 1px solid var(--line); }
  .links.open { display: flex; }
  .menu-btn { display: block; }
  .nav .btn-sm { margin-left: auto; }
  .proof { grid-template-columns: 1fr 1fr; }
  .proof div:nth-child(3) { border-left: 0; }
  .proof div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* Móvil: todo a una columna */
@media (max-width: 767px) {
  body { font-size: 16px; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 40px; }
  .hero-photo { height: 380px; order: 2; }
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: 360px 220px 220px; }
  .cell-big { grid-row: auto; grid-column: span 2; }
  .cell h3, .cell-big h3 { font-size: 1.6rem; }
  .cell p { font-size: .88rem; }
  .gender { grid-template-columns: 1fr; }
  .gender-photos figure:last-child { transform: translateY(24px); }
  .gender-copy { margin-top: 32px; }
  .events { grid-template-columns: 1fr; }
  .events-photo { aspect-ratio: 4 / 3; }
  .contact { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .nav .btn-sm { padding: 9px 14px; }
  .bento { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 240px; }
  .cell-big { grid-column: auto; }
}

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