/* ESENCIA v2 · lenguaje de las diapositivas 16 a 22: crema luminoso, vino profundo, oro en hilos finos,
   Playfair Display para titulares y Source Serif para el texto. Sin tarjetas redondeadas ni degradados. */
:root {
  --paper: #F7EFE4;
  --paper-2: #F1E5D5;
  --white: #FCF8F2;
  --ink: #3F130A;
  --ink-2: rgba(63, 19, 10, 0.78);
  --ink-3: rgba(63, 19, 10, 0.55);
  --gold: #B48A55;
  --gold-2: #CDAE82;
  --hair: rgba(140, 98, 58, 0.32);
  --display: "Playfair Display", "Didot", Georgia, serif;
  --text: "Source Serif 4", Georgia, serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --g: 22px;
  --max: 1240px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.62 var(--text); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
em { font-style: italic; }
h1, h2, h3, p { text-wrap: pretty; }

/* Estrella de cuatro puntas de la presentación */
.star { display: inline-block; width: 12px; height: 12px; background: var(--gold); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); flex: none; }

/* ---------- Tipografía base ---------- */
.kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; font: 500 11.5px/1.4 var(--text); letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-2); }
.kicker span { font: 400 15px/1 var(--display); letter-spacing: 0; color: var(--ink); padding-right: 14px; border-right: 1px solid var(--hair); }
.title { margin: 0 0 22px; font: 400 clamp(32px, 8.2vw, 60px)/1.08 var(--display); letter-spacing: -0.012em; color: var(--ink); }
.title em { font-style: italic; color: #6E2A12; }
.body { margin: 0 0 26px; max-width: 54ch; color: var(--ink-2); }
.sec { position: relative; padding: clamp(84px, 12vw, 150px) var(--g); }
.split { max-width: var(--max); margin: 0 auto; display: grid; gap: 36px; }
.center-head { max-width: 860px; margin: 0 auto 44px; text-align: center; }
.center-head .kicker { justify-content: center; }
.cita-ancha { max-width: 900px; margin: clamp(64px, 10vw, 110px) auto 0; text-align: center; font: 400 clamp(25px, 5.6vw, 40px)/1.28 var(--display); color: var(--ink); }
.cita-ancha em { color: #6E2A12; }
@media (min-width: 960px) {
  .split { grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; }
  .split-head { position: sticky; top: 120px; }
}

/* Revelado: el texto se aclara, como una esencia que se decanta */
.fx { opacity: 0; transform: translateY(14px); filter: blur(6px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease); }
.fx.is-in { opacity: 1; transform: none; filter: none; }

/* ---------- Navegación ---------- */
.nav { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: calc(12px + env(safe-area-inset-top)) var(--g) 12px; transition: background 0.5s, box-shadow 0.5s, padding 0.5s; }
.nav.is-solid { background: rgba(247, 239, 228, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--hair); }
.nav-firma { width: 140px; flex: none; }
.nav-steps { display: none; }
.nav-cta { padding: 9px 18px; border: 1px solid var(--ink); border-radius: 999px; font: 500 12px var(--text); letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; transition: background 0.35s, color 0.35s; }
.nav-cta:hover { background: var(--ink); color: var(--white); }
@media (min-width: 960px) {
  .nav { padding: 18px 44px; }
  .nav-firma { width: 170px; }
  .nav-steps { display: flex; gap: 34px; margin: 0; padding: 0; list-style: none; }
  .nav-steps a { position: relative; font: 500 11.5px var(--text); letter-spacing: 0.24em; text-transform: uppercase; text-decoration: none; color: var(--ink-2); }
  .nav-steps a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
  .nav-steps a:hover::after, .nav-steps a.is-here::after { transform: scaleX(1); }
}

/* ---------- Portada ---------- */
.hero { position: relative; background: var(--paper); }
.hero-photo { position: relative; height: 64svh; min-height: 440px; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; animation: entra 2.4s var(--ease) both; }
@keyframes entra { from { transform: scale(1.06); opacity: 0.4; } }
.hero-photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; background: linear-gradient(rgba(247, 239, 228, 0), var(--paper)); }
.hero-copy { position: relative; z-index: 2; margin-top: -54px; padding: 0 var(--g) 72px; }
.wordmark { margin: 0; font: 400 clamp(66px, 19vw, 150px)/0.92 var(--display); letter-spacing: 0.01em; color: var(--ink); animation: decanta 2.2s var(--ease) 0.2s both; }
@keyframes decanta { from { opacity: 0; letter-spacing: 0.22em; filter: blur(8px); } }
.hero-sub { margin: 10px 0 30px; font: italic 400 clamp(22px, 5.4vw, 36px)/1.2 var(--display); color: #6E2A12; animation: aparece 1.4s var(--ease) 0.9s both; }
.hero-sub em { font-style: italic; }
@keyframes aparece { from { opacity: 0; transform: translateY(10px); } }
.ruta { position: relative; margin: 0 0 34px; padding-left: 28px; max-width: 520px; animation: aparece 1.4s var(--ease) 1.2s both; }
.ruta::before { content: ""; position: absolute; left: 5px; top: 9px; bottom: 9px; width: 1px; background: var(--gold); }
.ruta p { position: relative; margin: 0; font: 500 12.5px/1.75 var(--text); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.ruta p + p { margin-top: 18px; color: var(--ink); }
.ruta p::before { content: ""; position: absolute; left: -28px; top: 6px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--gold); background: var(--paper); }
.ruta p + p::before { background: var(--gold); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; animation: aparece 1.4s var(--ease) 1.5s both; }
.hero-facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; margin: 40px 0 0; padding-top: 20px; border-top: 1px solid var(--hair); animation: aparece 1.4s var(--ease) 1.8s both; }
.hero-facts div { padding: 0 16px; border-left: 1px solid var(--hair); }
.hero-facts div:first-child { padding-left: 0; border-left: 0; }
.hero-facts dt { font: 500 10px var(--text); letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); }
.hero-facts dd { margin: 4px 0 0; font: 400 14.5px/1.35 var(--text); color: var(--ink); }
@media (max-width: 959px) {
  .hero-facts { grid-template-columns: 1fr; padding-top: 6px; }
  .hero-facts div, .hero-facts div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-left: 0; border-bottom: 1px solid var(--hair); }
  .hero-facts dd { margin: 0; text-align: right; }
}
@media (min-width: 960px) {
  .hero-facts div:nth-child(4) { grid-column: 1 / -1; margin-top: 14px; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--hair); }
  .hero { min-height: 100svh; display: grid; align-items: center; }
  .hero-photo { position: absolute; inset: 0; height: auto; }
  .hero-photo img { object-position: 0% 50%; }
  .hero-photo::after { inset: 0 0 0 auto; width: 55%; height: auto; background: linear-gradient(90deg, rgba(247, 239, 228, 0), rgba(247, 239, 228, 0.55) 45%, rgba(247, 239, 228, 0.7)); }
  .hero-copy { margin: 0 0 0 auto; width: 52%; padding: 120px 5vw 80px 0; }
}

/* Botones: los de la diapositiva 21, vino sólido y línea fina */
.cta { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 30px; border-radius: 999px; background: var(--ink); color: #FBF1E4; font: 500 13px var(--text); letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; overflow: hidden; isolation: isolate; transition: transform 0.3s var(--ease), box-shadow 0.5s var(--ease); box-shadow: 0 18px 34px -20px rgba(63, 19, 10, 0.75); }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(205, 174, 130, 0.45) 50%, transparent 70%); transform: translateX(-110%); transition: transform 1s var(--ease); }
.cta:hover::before, .cta:focus-visible::before { transform: translateX(110%); }
.cta:active { transform: scale(0.98); }
.cta:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
.cta-line { position: relative; padding: 10px 0; font: 500 12.5px var(--text); letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; color: var(--ink); }
.cta-line::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--gold); transform-origin: right; transition: transform 0.6s var(--ease); }
.cta-line:hover::after { transform: scaleX(0.3); }

/* ---------- Epígrafe ---------- */
.epigrafe { padding: clamp(60px, 10vw, 120px) var(--g); text-align: center; background: var(--white); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.epigrafe .star { margin-bottom: 22px; }
.epigrafe p { max-width: 880px; margin: 0 auto; font: italic 400 clamp(26px, 6vw, 46px)/1.25 var(--display); color: var(--ink); }
.epigrafe em { color: #6E2A12; }

/* ---------- Para quién (situaciones que se marcan) ---------- */
.para-ti { background: var(--paper); }
.contador { display: flex; align-items: baseline; gap: 12px; margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--hair); }
.contador strong { font: 400 64px/1 var(--display); color: var(--ink); transition: transform 0.5s var(--ease); }
.contador strong.pulse { transform: scale(1.15); }
.contador span { font: 500 11.5px var(--text); letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-3); }
.situaciones { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); counter-reset: s; }
.situaciones li { counter-increment: s; border-bottom: 1px solid var(--hair); transition: background 0.6s; }
.situaciones button { position: relative; display: grid; grid-template-columns: 52px 1fr 22px; gap: 14px; align-items: start; width: 100%; padding: 24px 4px; font: 400 17.5px/1.55 var(--text); color: var(--ink-2); transition: color 0.5s, padding 0.5s var(--ease); }
.situaciones button::before { content: counter(s, decimal-leading-zero); font: 400 22px/1.2 var(--display); color: var(--gold); }
.situaciones button::after { content: ""; width: 14px; height: 14px; margin-top: 6px; border: 1px solid var(--hair); border-radius: 50%; transition: all 0.5s var(--ease); }
.situaciones li.is-on button { color: var(--ink); padding-left: 12px; }
.situaciones li.is-on button::after { border-color: transparent; border-radius: 0; background: var(--gold); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); transform: scale(1.4) rotate(45deg); }
.situaciones li.is-on { background: linear-gradient(90deg, rgba(205, 174, 130, 0.18), rgba(205, 174, 130, 0)); }
@media (hover: hover) { .situaciones button:hover { color: var(--ink); } }

/* ---------- De / A ---------- */
.de-a { background: var(--white); display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; }
.de-a-body, .tabla { min-width: 0; }
.de-a-photo { height: 58svh; min-height: 360px; overflow: hidden; }
.de-a-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.de-a-body { padding: 70px var(--g) clamp(84px, 12vw, 150px); max-width: 820px; }
.tabla { margin-top: 34px; }
.tabla-head { display: none; }
.fila { padding: 22px 0; border-top: 1px solid var(--hair); }
.fila .de { margin: 0 0 8px; font: 400 15.5px/1.5 var(--text); color: rgba(63, 19, 10, 0.66); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: transparent; transition: text-decoration-color 0.8s var(--ease) 0.3s; }
.fila .a { margin: 0; font: 400 19px/1.4 var(--display); color: var(--ink); opacity: 0.25; filter: blur(3px); transition: opacity 1s var(--ease) 0.35s, filter 1s var(--ease) 0.35s; }
.fila .star { display: none; }
.fila.is-in .de { text-decoration-color: rgba(180, 138, 85, 0.38); }
.fila.is-in .a { opacity: 1; filter: none; }
.remate { margin: 34px 0 0; font: italic 400 clamp(32px, 8vw, 56px)/1 var(--display); color: #6E2A12; }
@media (min-width: 960px) {
  .de-a { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .de-a-photo { position: sticky; top: 0; height: 100svh; }
  .de-a-body { padding: 150px 64px 150px 72px; max-width: none; }
  .tabla-head { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; padding-bottom: 14px; font: 500 12px var(--text); letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink); }
  .tabla-head .star { justify-self: center; }
  .fila { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; }
  .fila .de { margin: 0; }
  .fila .star { display: block; justify-self: center; width: 9px; height: 9px; opacity: 0.6; }
  .fila .a { font-size: 18px; }
}

/* De/A en celular: una transformación a la vez, deslizando */
.tabla-nav { display: none; }
@media (max-width: 959px) {
  .tabla { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 30px calc(-1 * var(--g)) 0; padding: 0 var(--g) 4px; scrollbar-width: none; }
  .tabla::-webkit-scrollbar { display: none; }
  .fila { flex: 0 0 86%; scroll-snap-align: center; display: flex; flex-direction: column; justify-content: center; min-height: 230px; padding: 26px 24px; border: 1px solid var(--hair); background: var(--paper); }
  .fila .de { font-size: 15px; margin-bottom: 14px; }
  .fila .de { position: relative; padding-top: 22px; }
  .fila .de::before { content: "De"; position: absolute; top: 0; left: 0; font: 500 10.5px var(--text); letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); text-decoration: none; }
  .fila .a { font-size: 21px; }
  .fila .a::before { content: "A"; display: block; margin-bottom: 6px; font: 500 10.5px var(--text); letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }
  .tabla-nav { display: flex; align-items: center; gap: 12px; margin: 18px 0 0; font: 400 15px var(--display); color: var(--ink-2); }
  .tabla-nav i { flex: 1; max-width: 120px; height: 1px; background: var(--hair); position: relative; }
  .tabla-nav i::after { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: var(--avance, 12.5%); background: var(--ink); transition: width 0.5s var(--ease); }
}

/* ---------- Tres días ---------- */
.dias { background: var(--paper); padding-left: 0; padding-right: 0; }
.dias .center-head { padding: 0 var(--g); }
.dias-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--g); scrollbar-width: none; }
.dias-track::-webkit-scrollbar { display: none; }
.dia { flex: 0 0 80%; scroll-snap-align: center; }
.dia picture { aspect-ratio: 4 / 5; overflow: hidden; }
.dia img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.dia-num { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 6px; font: 400 64px/1 var(--display); color: var(--ink); }
.dia-num small { font: 500 11px var(--text); letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }
.dia h3 { margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--hair); font: 500 14px/1.4 var(--text); letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink); }
.dia-verbo { margin: 14px 0 2px; font: 500 11px var(--text); letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); }
.dia-txt { margin: 0; font: italic 400 19px/1.4 var(--display); color: var(--ink-2); }
.dias-nav { display: flex; justify-content: center; gap: 8px; margin: 26px 0 0; }
.dias-nav i { width: 24px; height: 1px; background: var(--hair); transition: background 0.4s, width 0.5s var(--ease); }
.dias-nav i.on { width: 44px; background: var(--ink); }
.banda { max-width: 640px; margin: 48px auto 0; padding: 14px 24px; border: 1px solid var(--gold-2); border-radius: 999px; text-align: center; font: 500 11px/1.6 var(--text); letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-2); }
.dias .banda { margin-left: var(--g); margin-right: var(--g); }
@media (min-width: 960px) {
  .dias-track { max-width: var(--max); margin: 0 auto; overflow: visible; gap: 0; }
  .dia { flex: 1; padding: 0 30px; border-left: 1px solid var(--hair); }
  .dia:first-child { border-left: 0; padding-left: 0; }
  .dia:last-child { padding-right: 0; }
  .dia:hover img { transform: scale(1.045); }
  .dias-nav { display: none; }
  .dias .banda { margin: 56px auto 0; }
}

/* ---------- Seis resultados ---------- */
.resultados { background: var(--white); }
.logros { display: grid; border-top: 1px solid var(--hair); align-content: start; }
.logro { display: grid; grid-template-columns: 74px 1fr; grid-template-rows: auto 0fr; column-gap: 12px; width: 100%; padding: 26px 0; border-bottom: 1px solid var(--hair); transition: grid-template-rows 0.6s var(--ease); }
.logro-n { grid-row: 1 / 3; display: flex; align-items: flex-start; gap: 6px; font: 400 44px/0.9 var(--display); color: var(--ink); }
.logro-n .star { width: 10px; height: 10px; margin-top: 4px; }
.logro-t { font: 400 21px/1.3 var(--display); color: var(--ink); }
.logro-d { overflow: hidden; min-height: 0; font-size: 16.5px; color: var(--ink-2); }
.logro[aria-expanded="true"] { grid-template-rows: auto 1fr; }
.logro[aria-expanded="true"] .logro-d { padding-top: 10px; }
.logro[aria-expanded="false"] .logro-t::after { content: "  +"; font-family: var(--text); font-size: 17px; color: var(--gold); }
@media (min-width: 960px) { .logros { grid-template-columns: 1fr 1fr; column-gap: 48px; } }

/* ---------- Cómo ---------- */
.como { background: var(--paper); }
.como-grid { max-width: var(--max); margin: 0 auto; display: grid; gap: 44px; }
.retrato { margin: 0; }
.retrato picture { aspect-ratio: 4 / 5; overflow: hidden; }
.retrato img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.retrato figcaption { margin-top: 18px; display: flex; justify-content: flex-end; }
.firma-mini { width: 170px; }
.metodo { list-style: none; margin: 0 0 40px; padding: 0; counter-reset: m; border-top: 1px solid var(--hair); }
.metodo li { counter-increment: m; display: grid; grid-template-columns: 40px 1fr; gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--hair); font-size: 17px; color: var(--ink-2); }
.metodo li::before { content: counter(m, lower-roman) "."; font: italic 400 19px/1.4 var(--display); color: var(--gold); }
.verbos { margin: 0 0 16px; font: 400 clamp(28px, 6.4vw, 44px)/1.15 var(--display); color: var(--ink); }
.verbo { display: inline-block; font-style: italic; color: #6E2A12; transition: opacity 0.5s, filter 0.5s, transform 0.5s var(--ease); }
.verbo.cambia { opacity: 0; filter: blur(6px); transform: translateY(6px); }
@media (min-width: 960px) {
  .como-grid { grid-template-columns: 5fr 7fr; gap: 90px; align-items: start; }
  .retrato { position: sticky; top: 110px; }
}

/* ---------- Diferente ---------- */
.diferente { background: var(--white); padding-left: 0; padding-right: 0; padding-bottom: 0; }
.diferente-inner { max-width: 1020px; margin: 0 auto; padding: 0 var(--g); }
.dos-col p { margin: 0 0 18px; color: var(--ink-2); }
.panorama { position: relative; margin: clamp(70px, 10vw, 120px) 0 0; overflow: hidden; background: #F3E6CF; }
.panorama picture { aspect-ratio: 16 / 10; overflow: hidden; }
.panorama img { width: 100%; height: 100%; object-fit: cover; object-position: 12% 50%; }
.panorama blockquote { position: relative; z-index: 1; margin: 0; padding: 40px var(--g) 70px; text-align: center; font: 400 clamp(28px, 6.4vw, 52px)/1.2 var(--display); color: var(--ink); }
@media (min-width: 960px) {
  .panorama { aspect-ratio: 2688 / 1520; min-height: 0; display: flex; align-items: center; justify-content: flex-end; }
  .panorama picture { position: absolute; inset: 0; aspect-ratio: auto; }
  .panorama img { object-position: 0% 60%; }
  .panorama blockquote { flex: 0 1 62%; width: 62%; max-width: 62%; padding: 60px 5vw; text-align: center; overflow-wrap: break-word; }
  .panorama blockquote { text-wrap: balance; }
}
.panorama em { color: #6E2A12; }
@media (min-width: 960px) { .dos-col { columns: 2; column-gap: 56px; } .dos-col p { break-inside: avoid; } .leer-mas { display: none; } }
@media (max-width: 959px) {
  .dos-col:not(.is-open) p:nth-child(n+2) { display: none; }
  .dos-col.is-open p { animation: aparece 0.8s var(--ease) both; }
  .leer-mas { padding: 8px 0; font: 500 12px var(--text); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--gold); }
}

/* ---------- Incluye ---------- */
.incluye { background: var(--paper); }
.incluye-lista { margin: 0; border-top: 1px solid var(--hair); }
.incluye-lista div { display: grid; gap: 4px; padding: 22px 0; border-bottom: 1px solid var(--hair); }
.incluye-lista dt { font: 400 22px/1.25 var(--display); color: var(--ink); }
.incluye-lista dd { margin: 0; font-size: 16.5px; color: var(--ink-2); }
.bonos-head { margin-top: clamp(90px, 12vw, 150px); }
.bonos { max-width: var(--max); margin: 0 auto; display: grid; gap: 22px; }
.bono { position: relative; padding: 70px 28px 30px; text-align: center; }
.bono::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--gold-2); border-bottom: 0; border-radius: 999px 999px 0 0 / 160px 160px 0 0; pointer-events: none; }
.bono::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 1px; background: var(--gold-2); }
.bono-n { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 16px; font: 500 11.5px var(--text); letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-2); }
.bono-n::before, .bono-n::after { content: ""; width: 7px; height: 7px; background: var(--gold); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); }
.bono h3 { margin: 0 0 14px; font: 400 25px/1.25 var(--display); color: var(--ink); }
.bono h3 em { color: #6E2A12; }
.bono p:last-child { margin: 0; font-size: 16.5px; color: var(--ink-2); }
@media (min-width: 960px) { .bonos { grid-template-columns: repeat(3, 1fr); gap: 40px; } }

/* ---------- Inscripción ---------- */
.inscripcion { display: grid; place-items: center; min-height: 100svh; padding-top: 110px; padding-bottom: 110px; overflow: hidden; }
.inscripcion-bg { position: absolute; inset: 0; }
.inscripcion-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 20% 50%; }
.inscripcion::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(247, 239, 228, 0.35); }
.inscripcion-card { position: relative; z-index: 2; width: 100%; max-width: 760px; padding: clamp(30px, 6vw, 56px); background: rgba(252, 248, 242, 0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 40px 80px -50px rgba(63, 19, 10, 0.55); }
.inscripcion-card .title { font-size: clamp(30px, 7vw, 48px); }
.fecha { margin: -6px 0 28px; font-size: 16.5px; color: var(--ink-2); }
.fecha strong { color: var(--ink); font-weight: 600; }
.modos { display: grid; margin-bottom: 30px; border-top: 1px solid var(--hair); }
.modo { position: relative; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "nombre precio" "fecha fecha" "desc cop"; gap: 4px 16px; width: 100%; padding: 22px 0 22px 34px; border-bottom: 1px solid var(--hair); }
.modo::before { content: ""; position: absolute; left: 4px; top: 27px; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--ink-3); transition: all 0.4s var(--ease); }
.modo.is-on::before { border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--white), inset 0 0 0 10px var(--ink); }
.modo-nombre { grid-area: nombre; font: 500 12.5px/1.8 var(--text); letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink); }
.modo-precio { grid-area: precio; text-align: right; font: 400 34px/1 var(--display); color: var(--ink); transition: color 0.4s; }
.modo-cop { grid-area: cop; text-align: right; font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.modo-fecha { grid-area: fecha; margin-top: 4px; font: 400 17px/1.4 var(--display); color: var(--ink); }
.modo:not(.is-on) .modo-fecha { color: var(--ink-2); }
.modo-desc { grid-area: desc; font-size: 15.5px; color: var(--ink-2); }
.modo:not(.is-on) .modo-precio { color: var(--ink-3); }
@media (max-width: 600px) {
  .modo { grid-template-areas: "nombre precio" "cop cop" "fecha fecha" "desc desc"; }
  .modo-cop { margin-top: -2px; }
  .modo-desc { margin-top: 6px; }
}
.cta-wa { width: 100%; justify-content: space-between; padding: 0 22px; text-transform: none; letter-spacing: 0.02em; font: 400 17px var(--display); }
.cta-wa svg { width: 22px; height: 22px; flex: none; }
.cta-wa span:nth-of-type(1) { margin-right: auto; }
.cta-num { padding-left: 16px; border-left: 1px solid rgba(251, 241, 228, 0.3); font: 500 13px var(--text); letter-spacing: 0.06em; }
@media (max-width: 420px) { .cta-num { display: none; } .cta-wa { justify-content: center; } .cta-wa span:nth-of-type(1) { margin-right: 0; } }

/* Formulario de pago */
.pago { display: grid; gap: 16px; }
.campos { display: grid; gap: 14px; }
.campos label { display: grid; gap: 6px; }
.campos label > span:first-child { font: 500 11px var(--text); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-2); }
.campos input, .campos select { width: 100%; min-height: 50px; padding: 10px 14px; border: 1px solid var(--hair); border-radius: 0; background: var(--white); font: 400 17px var(--text); color: var(--ink); -webkit-appearance: none; appearance: none; }
.campos input:focus, .campos select:focus { outline: none; border-color: var(--ink); }
.wa-fila { display: grid; grid-template-columns: 150px 1fr; gap: 8px; }
.campos select { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; font-size: 15px; }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 14.5px; color: var(--ink-2); cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--ink); }
.pago .error { margin: 0; font-size: 15px; color: #9b1c1c; }
.cta-pagar { width: 100%; font-size: 14px; }
.cta-pagar.is-loading { pointer-events: none; opacity: 0.75; }
.pago-listo { margin: 0; padding: 20px; border: 1px solid var(--gold-2); background: var(--white); font-size: 17px; color: var(--ink-2); }
.pago-listo strong { display: block; margin-bottom: 6px; font: 400 22px/1.3 var(--display); color: var(--ink); }
.pago-nota { margin: 0; font-size: 13.5px; color: var(--ink-3); text-align: center; }
.o-bien { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--ink-3); font: italic 400 16px var(--display); }
.o-bien::before, .o-bien::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.cta-wa-sec { background: transparent; color: var(--ink); border: 1px solid var(--ink); box-shadow: none; }
@media (max-width: 420px) { .wa-fila { grid-template-columns: 118px 1fr; } }

/* ---------- Cierre: el perfume terminado ---------- */
.cierre { position: relative; background: #F3E9DA; overflow: hidden; }
.cierre-bg { aspect-ratio: 3 / 4; overflow: hidden; }
.cierre-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; }
.cierre-body { position: relative; z-index: 1; padding: 44px var(--g) calc(120px + env(safe-area-inset-bottom)); text-align: center; }
.cierre-firma { width: min(260px, 64vw); margin: 0 auto 22px; }
.gracias { margin: 0 0 16px; font: 400 clamp(42px, 11vw, 88px)/1.02 var(--display); color: var(--ink); }
.gracias em { color: #6E2A12; }
.acompana { max-width: 30ch; margin: 0 auto 26px; font: italic 400 clamp(20px, 4.8vw, 28px)/1.35 var(--display); color: var(--ink-2); }
.legal { margin: 26px 0 0; font: 500 10.5px var(--text); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); }
@media (min-width: 960px) {
  .cierre { aspect-ratio: 3200 / 1800; min-height: 0; display: grid; align-items: center; }
  .cierre-bg { position: absolute; inset: 0; aspect-ratio: auto; }
  .cierre-bg img { object-position: 50% 50%; }
  .cierre-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(247, 239, 228, 0.55), rgba(247, 239, 228, 0.3) 40%, rgba(247, 239, 228, 0) 58%); }
  .cierre-body { width: 58%; padding: 80px 0 80px 7vw; text-align: left; }
  .cierre-firma { margin: 0 0 26px; }
  .acompana { margin: 0 0 26px; }
}

/* ---------- Barra fija en celular ---------- */
.barra { position: fixed; z-index: 25; left: var(--g); right: var(--g); bottom: calc(14px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 22px; border-radius: 999px; background: var(--ink); color: #FBF1E4; text-decoration: none; box-shadow: 0 20px 40px -18px rgba(40, 10, 2, 0.65); transform: translateY(160%); transition: transform 0.7s var(--ease); }
.barra.is-on { transform: none; }
.barra span:first-child { font: 400 17px var(--display); letter-spacing: 0.18em; }
.barra-cta { padding: 11px 20px; border-radius: 999px; background: #FBF1E4; color: var(--ink); font: 500 11.5px var(--text); letter-spacing: 0.22em; text-transform: uppercase; }
@media (min-width: 960px) { .barra { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fx, .fila .a { opacity: 1; transform: none; filter: none; }
}