/* ==========================================================================
   Cuaderno de Día de Muertos 2026 · Bustamante Casa Funeraria
   Mobile first. Solo se animan transform y opacity (y stroke-dashoffset).
   ========================================================================== */

:root {
  /* Noche (ambiente) */
  --noche:            #1B1236;
  --noche-2:          #2C1B52;
  --noche-3:          #3D2470;

  /* Marca Bustamante */
  --verde-bustamante: #1F3A22;
  --cafe-bustamante:  #5A4842;
  --hueso:            #FBF5EA;
  --texto:            #2A2420;

  /* Fiesta */
  --cempasuchil:      #FF9419;
  --cempasuchil-luz:  #FFC145;
  --cempasuchil-osc:  #E57A00;
  --rosa-mexicano:    #E5007E;
  --turquesa:         #18B3A6;
  --morado:           #7A3FA8;

  /* Derivados */
  --lavanda:          #DCD3F0;   /* texto secundario sobre noche (AA) */
  --verde-banderin:   #3E8E4A;

  --f-titulo: "Josefin Sans", "Avenir Next", "Century Gothic", system-ui, sans-serif;
  --f-cuerpo: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-fiesta: "Fredoka", "Nunito", system-ui, sans-serif;

  --header-h: 64px;
  --radio: 20px;
  --sombra-suave: 0 10px 30px rgba(42, 36, 32, .08);

  --patron-floral: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%231F3A22' fill-opacity='.05'%3E%3Cg transform='translate(34 34)'%3E%3Ccircle cy='-10' r='7'/%3E%3Ccircle cx='9.5' cy='-3.1' r='7'/%3E%3Ccircle cx='5.9' cy='8.1' r='7'/%3E%3Ccircle cx='-5.9' cy='8.1' r='7'/%3E%3Ccircle cx='-9.5' cy='-3.1' r='7'/%3E%3C/g%3E%3Cpath d='M96 104c5-8 16-8 16-8s-3 11-16 8zM104 92c-6-6-4-16-4-16s9 6 4 16z'/%3E%3Ccircle cx='104' cy='34' r='2.5'/%3E%3Ccircle cx='34' cy='104' r='2.5'/%3E%3Ccircle cx='70' cy='70' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
  --borde-picado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='26'%3E%3Cpath fill-rule='evenodd' d='M0 26V14A15 8 0 0 1 30 14A15 8 0 0 1 60 14V26ZM12 15.5a3 3 0 1 0 6 0a3 3 0 1 0-6 0ZM42 15.5a3 3 0 1 0 6 0a3 3 0 1 0-6 0ZM30 17.5l3 3-3 3-3-3Z'/%3E%3C/svg%3E");
}

@media (min-width: 960px) {
  :root { --header-h: 76px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--f-cuerpo);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texto);
  background: var(--noche);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

img, svg, picture { max-width: 100%; }
img { height: auto; }
picture { display: block; }

h1, h2, h3 {
  font-family: var(--f-titulo);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 .5em;
  text-wrap: balance;
}

p { margin: 0 0 1em; }

a { color: inherit; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--cempasuchil-luz);
  outline-offset: 3px;
  border-radius: 8px;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.saltar {
  position: fixed;
  left: 12px; top: 12px;
  z-index: 200;
  padding: .7em 1.1em;
  border-radius: 999px;
  background: var(--cempasuchil);
  color: var(--noche);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .2s;
}
.saltar:focus { transform: none; }

.contenedor {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 768px) { .contenedor { padding: 0 32px; } }

/* ---------- Botones ---------- */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 52px;
  padding: .85em 1.6em;
  border: 0;
  border-radius: 999px;
  background: var(--cempasuchil);
  color: var(--noche);
  font: 700 1.05rem/1.2 var(--f-titulo);
  letter-spacing: .01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(229, 122, 0, .35);
  transition: transform .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--cempasuchil-osc);
  opacity: 0;
  transition: opacity .2s ease;
}
@media (hover: hover) {
  .btn:hover::before { opacity: 1; }
  .btn:hover { transform: translateY(-2px); }
}
.btn:active { transform: scale(.98); }

.btn--sm {
  min-height: 44px;
  padding: .55em 1.1em;
  font-size: .92rem;
  box-shadow: none;
}

/* Pulso: el anillo es un pseudo-elemento con box-shadow fijo; se anima su transform y opacity */
.btn--pulso { animation: pulso-btn 2s ease-in-out infinite; }
.btn--pulso::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  box-shadow: 0 0 0 3px var(--cempasuchil-luz), 0 0 26px 6px rgba(255, 193, 69, .55);
  opacity: 0;
  animation: pulso-anillo 2s ease-out infinite;
}
@keyframes pulso-btn {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
@keyframes pulso-anillo {
  0%   { opacity: .85; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.16, 1.32); }
  100% { opacity: 0;   transform: scale(1.16, 1.32); }
}

.badge {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .5em 1.05em;
  border: 1.5px solid rgba(255, 193, 69, .6);
  border-radius: 999px;
  background: rgba(255, 148, 25, .14);
  color: var(--cempasuchil-luz);
  font: 500 .92rem/1 var(--f-fiesta);
  letter-spacing: .02em;
}

.pildora {
  display: inline-block;
  padding: .55em 1.1em;
  border-radius: 999px;
  background: var(--verde-bustamante);
  color: var(--hueso);
  font: 500 .95rem/1 var(--f-fiesta);
}

/* ---------- Header ---------- */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
}
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hueso);
  box-shadow: 0 6px 24px rgba(27, 18, 54, .14);
  opacity: 0;
  transition: opacity .3s ease;
}
.header.is-solid::before { opacity: 1; }

.header__in {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 768px) { .header__in { padding: 0 32px; } }

.header__logo {
  position: relative;
  display: block;
  height: 38px;
  aspect-ratio: 520 / 259;
  flex: 0 0 auto;
}
@media (min-width: 960px) { .header__logo { height: 48px; } }
.header__logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity .3s ease;
}
.header__logo-color { opacity: 0; }
.header.is-solid .header__logo-blanco { opacity: 0; }
.header.is-solid .header__logo-color { opacity: 1; }

.header__cta { transition: opacity .25s ease, transform .25s ease; }
@media (max-width: 767px) {
  .cta-flotante-on .header__cta {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + 64px) 0 96px;
  overflow: hidden;
  color: var(--hueso);
  background:
    radial-gradient(70% 55% at 72% 58%, rgba(255, 148, 25, .16), transparent 70%),
    radial-gradient(120% 90% at 60% 35%, var(--noche-2) 0%, var(--noche) 72%);
}
@media (min-width: 960px) {
  .hero { padding: calc(var(--header-h) + 72px) 0 110px; }
}

.hero__sentinela {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 72px;
  pointer-events: none;
}

.hero__in {
  position: relative;
  z-index: 2;
  text-align: center;
}

.hero__texto { position: relative; z-index: 3; max-width: 600px; margin: 0 auto; }
.hero__texto h1 {
  font-size: clamp(2rem, 1.15rem + 4.2vw, 3.6rem);
  font-weight: 700;
  color: var(--hueso);
  margin-bottom: .4em;
}
.hero__lead {
  font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem);
  color: var(--lavanda);
  max-width: 34em;
  margin: 0 auto 1.6rem;
}

.js .hero__texto > * { animation: hero-entra .8s cubic-bezier(.2, .8, .2, 1) both; }
.js .hero__texto > :nth-child(2) { animation-delay: .08s; }
.js .hero__texto > :nth-child(3) { animation-delay: .16s; }
.js .hero__texto > .btn { animation: hero-entra .8s cubic-bezier(.2, .8, .2, 1) .24s both, pulso-btn 2s ease-in-out 1.2s infinite; }
@keyframes hero-entra {
  from { transform: translateY(18px); }
  to   { transform: none; }
}

.hero__visual {
  position: relative;
  height: min(55vh, 470px);
  height: min(55svh, 470px);
  margin: 36px auto 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

@media (min-width: 960px) {
  .hero__in {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 32px;
    min-height: calc(100svh - var(--header-h) - 190px);
    text-align: left;
  }
  .hero__texto { margin: 0; }
  .hero__lead { margin-left: 0; }
  .hero__visual { height: min(72svh, 640px); margin: 0; }
}

.hero__halo {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 150%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 148, 25, .34), rgba(255, 148, 25, .12) 52%, transparent 74%);
  pointer-events: none;
}

/* Mockup del cuaderno */
.mockup {
  position: absolute;
  left: 50%;
  bottom: 12%;
  z-index: 1;
  height: 60%;
  aspect-ratio: 357 / 462;
  transform: translateX(-108%);
  pointer-events: none;
}
@media (min-width: 960px) { .mockup { transform: translateX(-96%); height: 58%; bottom: 14%; } }
.mockup__hoja {
  position: absolute;
  inset: 0;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}
.mockup__hoja img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mockup__hoja--1 { transform: rotate(-11deg) translate(-14%, 4%); }
.mockup__hoja--2 { transform: rotate(5deg) translate(10%, -3%); }
.mockup__hoja--3 { transform: rotate(-3deg); }

/* ---------- Personajes ---------- */
.personaje {
  position: relative;
  z-index: 2;
}
.personaje__halo {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 115%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 193, 69, .5), rgba(255, 193, 69, .16) 55%, transparent);
  pointer-events: none;
}
.personaje__sombra {
  position: absolute;
  left: 50%;
  bottom: -2.5%;
  width: 72%;
  height: 7%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .5), transparent);
  pointer-events: none;
}
.personaje__mov,
.personaje__brinco {
  position: relative;
  height: 100%;
  transform-origin: 50% 100%;
}

.personaje--catrina {
  height: 100%;
  aspect-ratio: 2 / 3;
}

/* Dale color: trazo abajo, color arriba enmascarado por círculos que crecen */
.dc {
  position: relative;
  width: 100%;
  height: 100%;
}
.dc picture,
.dc__trazo {
  display: block;
  width: 100%;
  height: 100%;
}
.dc__trazo { object-fit: contain; }
.dc__color,
.dc__noscript {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.dc__color { overflow: visible; }

.js .dc circle {
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
}
.dc.is-coloring circle {
  animation: dc-crece .55s cubic-bezier(.3, .7, .35, 1) both;
  animation-delay: calc(var(--i) * .25s);
}
@keyframes dc-crece {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
.dc.is-colored .dc__color image { mask: none; }

.dc__destello {
  position: absolute;
  left: 28%;
  top: -2%;
  width: 66%;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 193, 69, .9), rgba(255, 193, 69, .25) 55%, transparent);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
.dc.is-destello .dc__destello { animation: destello 1.4s ease-out both; }
@keyframes destello {
  0%   { opacity: 0;  transform: scale(.6); }
  35%  { opacity: .95; transform: scale(1.05); }
  100% { opacity: 0;  transform: scale(1.2); }
}

/* Catrina: baile */
.personaje--catrina.is-vivo .personaje__mov { animation: baile 3.2s ease-in-out infinite; }
.personaje--catrina.is-vivo .personaje__sombra { animation: sombra-baile 3.2s ease-in-out infinite; }
@keyframes baile {
  0%, 100% { transform: rotate(-3deg); }
  25%      { transform: translateY(-6px) rotate(0deg); }
  50%      { transform: rotate(3deg); }
  75%      { transform: translateY(-6px) rotate(0deg); }
}
@keyframes sombra-baile {
  0%, 50%, 100% { transform: translateX(-50%) scale(1);   opacity: 1; }
  25%, 75%      { transform: translateX(-50%) scale(.86); opacity: .7; }
}

/* Trío: flotan */
.personaje--trio {
  width: min(500px, 86%);
  aspect-ratio: 1000 / 682;
  margin: 0 auto;
  cursor: pointer;
}
.personaje--trio .personaje__halo { width: 100%; animation: halo-pulso 5s ease-in-out infinite; }
.personaje--trio .personaje__sombra { bottom: -6%; width: 62%; height: 9%; background: radial-gradient(closest-side, rgba(90, 72, 66, .3), transparent); }
.personaje--trio.is-vivo .personaje__mov { animation: flotar 4s ease-in-out infinite; }
@keyframes flotar {
  0%, 100% { transform: translateY(0) rotate(-.75deg); }
  50%      { transform: translateY(-10px) rotate(.75deg); }
}
@keyframes halo-pulso {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
@media (hover: hover) {
  .personaje--trio.is-vivo:hover .personaje__brinco { animation: brinco .55s ease-out; }
}
.personaje--trio .personaje__brinco.is-brinco { animation: brinco .55s ease-out; }
@keyframes brinco {
  0%, 100% { transform: translateY(0); }
  35%      { transform: translateY(-22px) scale(1.03); }
  70%      { transform: translateY(2px) scale(.99); }
}

/* Mariachi: saluda */
.personaje--mariachi {
  height: 100%;
  aspect-ratio: 586 / 1000;
  margin: 0 auto;
  cursor: pointer;
}
.personaje--mariachi.is-vivo .personaje__mov { animation: saludo 5.6s ease-in-out infinite; }
@keyframes saludo {
  0%       { transform: rotate(-2deg); }
  18%      { transform: rotate(2deg); }
  36%      { transform: rotate(-2deg); }
  52%      { transform: rotate(0deg); }
  62%, 72% { transform: translateY(3px) rotate(6deg); }
  84%      { transform: rotate(0deg); }
  100%     { transform: rotate(-2deg); }
}
@media (hover: hover) {
  .personaje--mariachi.is-vivo:hover .personaje__brinco { animation: reverencia .9s ease-in-out; }
}
.personaje--mariachi .personaje__brinco.is-brinco { animation: reverencia .9s ease-in-out; }
@keyframes reverencia {
  0%, 100% { transform: rotate(0deg); }
  40%, 60% { transform: translateY(4px) rotate(7deg); }
}
.personaje--mariachi.is-celebra .personaje__mov {
  animation: celebra 1.5s ease-out .5s 1 both, saludo 5.6s ease-in-out 2.2s infinite;
}
@keyframes celebra {
  0%       { transform: none; }
  18%      { transform: translateY(-28px) rotate(-4deg); }
  36%      { transform: none; }
  54%      { transform: translateY(-28px) rotate(4deg); }
  72%, 100% { transform: none; }
}

/* Veladoras */
.velas {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
}
.velas--hero {
  bottom: -3%;
  left: 50%;
  transform: translateX(42%);
}
.veladora {
  display: block;
  width: 26px;
  height: auto;
  overflow: visible;
}
.veladora--chica { width: 20px; }
@media (min-width: 960px) {
  .veladora { width: 34px; }
  .veladora--chica { width: 26px; }
}
.veladora__vaso { fill: var(--vaso, #E5007E); }
.veladora__flama {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: flama var(--fd, 1.6s) ease-in-out infinite alternate;
}
.veladora__halo { animation: halo-vela calc(var(--fd, 1.6s) * 1.3) ease-in-out infinite alternate; }
@keyframes flama {
  0%   { transform: scale(1, 1) rotate(-2deg); opacity: 1; }
  30%  { transform: scale(.92, 1.08) rotate(2deg); }
  55%  { transform: scale(1.05, .93) rotate(-1deg); opacity: .86; }
  80%  { transform: scale(.97, 1.04) rotate(1deg); }
  100% { transform: scale(.95, 1.1) rotate(3deg); opacity: 1; }
}
@keyframes halo-vela {
  from { opacity: .5; }
  to   { opacity: 1; }
}

/* ---------- Cielo, papel picado, pétalos ---------- */
.cielo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.estrella {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #FFF6DA;
  box-shadow: 0 0 6px 1px rgba(255, 233, 170, .7);
  animation: titilar var(--d) ease-in-out var(--del) infinite;
}
@keyframes titilar {
  0%, 100% { opacity: .3; transform: scale(.8); }
  50%      { opacity: 1;  transform: scale(1.1); }
}

.papel-picado {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: clamp(4px, 1vw, 10px);
  padding-top: 2px;
  overflow: hidden;
  pointer-events: none;
}
.papel-picado::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(251, 245, 234, .5);
}
.banderin {
  flex: 0 0 auto;
  width: var(--bw, 42px);
  height: auto;
  aspect-ratio: 100 / 120;
  transform-origin: 50% 0;
  opacity: .95;
  animation: mecer calc(2.6s + var(--i) * .13s) ease-in-out calc(var(--i) * -.37s) infinite alternate;
}
@keyframes mecer {
  from { transform: rotate(calc(var(--amp, 4deg) * -1)); }
  to   { transform: rotate(var(--amp, 4deg)); }
}
.papel-picado--hero {
  top: var(--header-h);
  --bw: clamp(38px, 5.6vw, 68px);
}

.petalos {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}
.petalo {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--s);
  height: 100%;
  animation: caer var(--d) linear var(--del) infinite;
}
.petalo__in {
  display: block;
  width: var(--s);
  height: calc(var(--s) * 1.4);
  color: var(--c);
  animation: vaiven var(--sd) ease-in-out var(--del) infinite alternate;
}
.petalo__in svg { display: block; width: 100%; height: 100%; }
.petalo--luz .petalo__in { filter: drop-shadow(0 0 5px rgba(255, 193, 69, .95)); }
@keyframes caer {
  from { transform: translateY(-8%); }
  to   { transform: translateY(100%); }
}
@keyframes vaiven {
  from { transform: translateX(calc(var(--sw) * -1)) rotate(0deg); }
  to   { transform: translateX(var(--sw)) rotate(var(--r)); }
}
.petalos--una-vez .petalo,
.petalos--una-vez .petalo__in { animation-iteration-count: 1; animation-fill-mode: both; }
.petalos--una-vez .petalo__in { animation-iteration-count: 3; }

.petalo-suelto {
  position: absolute;
  width: 14px;
  height: 20px;
  margin: -10px 0 0 -7px;
  color: var(--cempasuchil);
  filter: drop-shadow(0 0 4px rgba(255, 193, 69, .9));
}
.petalo-suelto svg { display: block; width: 100%; height: 100%; }

/* Guirnalda de cempasúchil y bordes de papel picado */
.guirnalda {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 4;
  display: flex;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}
.guirnalda svg {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  margin: 0 -3px;
}
.guirnalda svg:nth-child(odd) { transform: translateY(4px) rotate(18deg) scale(.86); }

.borde-picado {
  position: absolute;
  left: 0;
  right: 0;
  top: -25px;
  height: 26px;
  background: var(--fondo-seccion);
  -webkit-mask: var(--borde-picado) repeat-x left bottom / 60px 26px;
  mask: var(--borde-picado) repeat-x left bottom / 60px 26px;
  pointer-events: none;
}

/* Las pausas de los loops: sección fuera de pantalla o pestaña oculta */
[data-loop].is-paused *,
[data-loop].is-paused *::before,
[data-loop].is-paused *::after,
.tab-hidden *,
.tab-hidden *::before,
.tab-hidden *::after { animation-play-state: paused !important; }

/* ---------- Secciones ---------- */
.seccion {
  position: relative;
  padding: clamp(64px, 10vw, 112px) 0;
}
.seccion--hueso {
  --fondo-seccion: var(--hueso);
  background: var(--hueso) var(--patron-floral);
  color: var(--texto);
  z-index: 1;
}
.seccion--noche {
  --fondo-seccion: var(--noche);
  color: var(--hueso);
  background:
    radial-gradient(60% 50% at 50% 55%, rgba(255, 148, 25, .12), transparent 70%),
    radial-gradient(120% 80% at 50% 40%, var(--noche-2), var(--noche) 70%);
  z-index: 1;
}
.incluye { padding-top: clamp(56px, 8vw, 96px); }

.seccion__cabeza {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.titulo-seccion {
  text-align: center;
  font-size: clamp(1.8rem, 1.2rem + 2.6vw, 2.7rem);
  color: var(--verde-bustamante);
}
.titulo-seccion--chico { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.2rem); }
.titulo__flor {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-right: .35em;
  vertical-align: -.16em;
}
.seccion__intro {
  color: var(--cafe-bustamante);
  font-size: clamp(1.05rem, 1rem + .3vw, 1.18rem);
  margin: 0 auto;
  max-width: 44em;
}
.seccion__cta {
  margin-top: 40px;
  text-align: center;
}

/* Divisor entre secciones claras */
.divisor-flor {
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
}
.divisor-flor span {
  width: min(120px, 24vw);
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(90, 72, 66, .45));
}
.divisor-flor span:last-child { transform: scaleX(-1); }
.divisor-flor svg { width: 40px; height: 40px; }

/* ---------- Scroll reveal ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal .titulo__flor {
  transform: rotate(-140deg) scale(.5);
  transition: transform 1s cubic-bezier(.2, .8, .2, 1) .15s;
}
.js .reveal.is-visible .titulo__flor { transform: none; }

/* ---------- ¿Qué incluye? ---------- */
.actividades {
  list-style: none;
  margin: 36px -16px 0;
  padding: 8px 16px 18px;
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.actividades::-webkit-scrollbar { display: none; }
.actividad {
  flex: 0 0 76%;
  scroll-snap-align: start;
  padding: 12px 12px 18px;
  border: 1px solid rgba(90, 72, 66, .12);
  border-radius: var(--radio);
  background: #fff;
  box-shadow: var(--sombra-suave);
}
.actividad h3 {
  margin: 14px 0 4px;
  color: var(--verde-bustamante);
  font-size: 1.22rem;
}
.actividad p {
  margin: 0;
  color: var(--cafe-bustamante);
  font-size: 1rem;
  line-height: 1.5;
}
.actividades__desliza {
  margin: 4px 0 0;
  text-align: center;
  color: var(--cafe-bustamante);
  font: 500 .9rem/1.4 var(--f-fiesta);
}
.actividades__desliza::after { content: " →"; }

@media (min-width: 768px) {
  .actividades {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 44px 0 0;
    padding: 0;
    overflow: visible;
  }
  .actividades__desliza { display: none; }
}
@media (min-width: 1024px) {
  .actividades { gap: 28px; }
}

.actividad__mini {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 357 / 462;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(90, 72, 66, .1);
  -webkit-tap-highlight-color: transparent;
}
.actividad__mini img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.actividad__color {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, var(--cempasuchil) 0%, var(--rosa-mexicano) 38%, var(--morado) 66%, var(--turquesa) 100%);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity .8s ease;
}
.actividad.is-colored .actividad__color { opacity: .85; }
.actividad__hint {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  padding: .45em .95em;
  border-radius: 999px;
  background: rgba(27, 18, 54, .88);
  color: var(--hueso);
  font: 500 .82rem/1.2 var(--f-fiesta);
  white-space: nowrap;
  transition: opacity .3s ease;
}
.actividad__hint::before { content: "Toca para darle color"; }
.actividad.is-colored .actividad__hint::before { content: "Toca para ver la vista previa"; }

@media (hover: hover) {
  .actividad__mini:hover .actividad__color,
  .actividad__mini:focus-visible .actividad__color { opacity: .85; }
  .actividad .actividad__hint::before,
  .actividad.is-colored .actividad__hint::before { content: "Ver vista previa"; }
  .actividad__hint { opacity: 0; }
  .actividad__mini:hover .actividad__hint,
  .actividad__mini:focus-visible .actividad__hint { opacity: 1; }
  .actividad__mini { cursor: zoom-in; }
}

/* ---------- Ofrenda interactiva ---------- */
.ofrenda { margin-top: 40px; }
.ofrenda__indicacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  margin: 0 0 16px;
  color: var(--cafe-bustamante);
  font-weight: 700;
}
.ofrenda__escenario {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  aspect-ratio: 600 / 570;
  border-radius: 28px;
  overflow: hidden;
  background: radial-gradient(90% 80% at 50% 42%, var(--noche-3) 0%, var(--noche-2) 45%, var(--noche) 100%);
  box-shadow: 0 24px 60px rgba(27, 18, 54, .35);
}
.ofrenda__arte {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.papel-picado--ofrenda {
  top: 0;
  --bw: clamp(26px, 7%, 46px);
  --amp: 2.5deg;
}
.ofrenda__item {
  position: absolute;
  z-index: 1;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  min-width: 44px;
  padding: 4px;
  border: 0;
  border-radius: 14px;
  background: none;
  cursor: pointer;
  transform: translate(-50%, -100%);
  -webkit-tap-highlight-color: transparent;
}
.ofrenda__item svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transform-origin: 50% 100%;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.ofrenda__item::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 175%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 193, 69, .8), rgba(255, 148, 25, .25) 55%, transparent);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.7);
  transition: opacity .35s ease, transform .35s ease;
}
.ofrenda__item:not(.is-visto)::before { animation: item-pulso 2.4s ease-in-out infinite; }
.ofrenda__item:nth-of-type(2)::before { animation-delay: -.5s; }
.ofrenda__item:nth-of-type(3)::before { animation-delay: -1s; }
.ofrenda__item:nth-of-type(4)::before { animation-delay: -1.5s; }
.ofrenda__item:nth-of-type(5)::before { animation-delay: -2s; }
@keyframes item-pulso {
  0%, 100% { opacity: 0;   transform: translate(-50%, -50%) scale(.6); }
  50%      { opacity: .55; transform: translate(-50%, -50%) scale(.92); }
}
.ofrenda__item[aria-pressed="true"]::before {
  animation: none;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.ofrenda__item[aria-pressed="true"] svg { transform: scale(1.1); }
@media (hover: hover) {
  .ofrenda__item:hover svg { transform: scale(1.08); }
}

.ofrenda__panel {
  max-width: 640px;
  min-height: 112px;
  margin: 16px auto 0;
  padding: 18px 20px;
  border-left: 6px solid var(--cempasuchil);
  border-radius: var(--radio);
  background: #fff;
  box-shadow: var(--sombra-suave);
}
.ofrenda__panel-titulo {
  margin: 0 0 .3em;
  color: var(--verde-bustamante);
  font-size: 1.25rem;
}
.ofrenda__panel-texto { margin: 0; }
.ofrenda__panel.is-cambio { animation: panel-entra .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes panel-entra {
  from { opacity: .2; transform: translateY(8px); }
  to   { opacity: 1;  transform: none; }
}

/* ---------- ¿Sabías que...? ---------- */
.sabias {
  margin-top: 80px;
  text-align: center;
}
.sabias__titulo {
  margin: 28px 0 0;
  color: var(--verde-bustamante);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
}
.datos {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
@media (min-width: 768px) { .datos { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.dato { perspective: 1100px; }
.dato__tarjeta {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 176px;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.2, .8, .2, 1);
  -webkit-tap-highlight-color: transparent;
}
.dato__tarjeta[aria-expanded="true"] { transform: rotateY(180deg); }
.dato__cara {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px 22px;
  border-radius: var(--radio);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.dato__frente {
  background: linear-gradient(160deg, var(--noche-2), var(--noche));
  color: var(--hueso);
  box-shadow: 0 14px 34px rgba(27, 18, 54, .25), inset 0 0 0 2px rgba(255, 193, 69, .35);
}
.dato__icono {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cempasuchil);
  color: var(--noche);
  font: 700 1.5rem/1 var(--f-titulo);
}
.dato__pregunta {
  font: 700 1.15rem/1.35 var(--f-titulo);
}
.dato__toca {
  color: var(--cempasuchil-luz);
  font: 500 .85rem/1 var(--f-fiesta);
}
.dato__reverso {
  transform: rotateY(180deg);
  background: #fff;
  color: var(--texto);
  font-size: 1.02rem;
  line-height: 1.55;
  box-shadow: 0 14px 34px rgba(27, 18, 54, .14), inset 0 0 0 2px var(--cempasuchil);
}
@media (hover: hover) {
  .dato__tarjeta:hover .dato__frente { box-shadow: 0 18px 40px rgba(27, 18, 54, .32), inset 0 0 0 2px var(--cempasuchil-luz); }
}

.tradicion__cierre {
  max-width: 30em;
  margin: 56px auto 0;
  text-align: center;
  color: var(--verde-bustamante);
  font: 600 clamp(1.25rem, 1.05rem + 1vw, 1.6rem)/1.35 var(--f-titulo);
}

/* ---------- Registro ---------- */
.seccion { scroll-margin-top: var(--header-h); }
.registro { scroll-margin-top: calc(var(--header-h) - 20px); padding-bottom: clamp(72px, 10vw, 120px); }
.registro .petalos { z-index: 0; }
.registro__in {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
}
.registro__anfitrion {
  position: relative;
  z-index: 0;
  height: 180px;
  margin-bottom: -30px;
}
.velas--mariachi { display: none; }
@media (min-width: 600px) { .registro__anfitrion { height: 230px; } }

@media (min-width: 960px) {
  .registro__in {
    grid-template-columns: minmax(240px, 360px) minmax(0, 640px);
    justify-content: center;
    align-items: end;
    gap: 40px;
  }
  .registro__anfitrion { height: 460px; margin: 0 0 24px; }
  .velas--mariachi {
    display: flex;
    left: 50%;
    bottom: -14px;
    gap: 190px;
    transform: translateX(-50%);
  }
}

.registro__tarjeta {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 640px;
  padding: 66px 16px 22px;
  border-radius: 24px;
  background: var(--hueso);
  color: var(--texto);
  text-align: center;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 193, 69, .3), 0 0 60px rgba(255, 148, 25, .18);
}
@media (min-width: 600px) { .registro__tarjeta { padding: 76px 20px 28px; } }
.papel-picado--tarjeta {
  top: 0;
  --bw: clamp(28px, 7.5vw, 46px);
  --amp: 2deg;
}
.papel-picado--tarjeta::before { background: rgba(90, 72, 66, .45); }
.registro__marca {
  margin: 0 0 .35rem;
  color: var(--cafe-bustamante);
  font-size: .92rem;
  font-weight: 700;
}
.registro__tarjeta h2 {
  margin: 0 0 .25em;
  color: var(--verde-bustamante);
  font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.5rem);
}
.registro__sub {
  margin: 0 auto;
  color: var(--cafe-bustamante);
}
.registro__nota {
  margin: 14px 0 0;
  color: var(--cafe-bustamante);
  font-size: .9rem;
}

/* Formulario embebido de Sales24x7.
   El formulario ocupa el 90% del ancho de su página y queda pegado a la izquierda;
   el iframe se dibuja un 11% más ancho y el sobrante transparente se recorta,
   así el formulario queda del ancho exacto de la tarjeta. */
.form-embed {
  position: relative;
  max-width: 600px;
  margin: 20px auto 0;
  overflow: hidden;
  border-radius: 10px;
}
.form-embed__iframe {
  display: block;
  width: 111%;
  max-width: none;
  height: 280px;
  border: 0;
  background: transparent;
  transition: opacity .4s ease;
}
@media (min-width: 600px) { .form-embed__iframe { height: 272px; } }
.js .form-embed__iframe { opacity: 0; }
.form-embed.is-loaded .form-embed__iframe { opacity: 1; }

.form-embed__esqueleto {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px 16px;
  border-radius: 10px;
  background: #F3EEE4;
  transition: opacity .4s ease, visibility 0s linear .4s;
}
html:not(.js) .form-embed__esqueleto,
.form-embed.is-loaded .form-embed__esqueleto { opacity: 0; visibility: hidden; }
.esq {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: #E4DBCB;
}
.esq::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: translateX(-100%);
  animation: brillo 1.3s ease-in-out infinite;
}
@keyframes brillo { to { transform: translateX(100%); } }
.esq--label { width: 30%; height: 12px; margin-top: 6px; }
.esq--campo { width: 100%; height: 34px; }
.esq--boton { width: 40%; height: 40px; margin: 14px auto 0; border-radius: 999px; }

/* ---------- Tips ---------- */
.tips { padding: clamp(64px, 9vw, 96px) 0; }
.tips__lista {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
@media (min-width: 768px) { .tips__lista { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 20px;
  border-radius: var(--radio);
  background: #fff;
  text-align: center;
  box-shadow: var(--sombra-suave);
}
.tip p { margin: 0; }
.tip__icono { width: 64px; height: 64px; }
.tip__redes {
  display: flex;
  gap: 10px;
  margin-top: 6px !important;
}
.tip__redes a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--verde-bustamante);
  color: var(--hueso);
  transition: transform .2s ease;
}
.tip__redes svg { width: 22px; height: 22px; }
@media (hover: hover) { .tip__redes a:hover { transform: translateY(-2px); } }

/* ---------- Footer ---------- */
.footer {
  --fondo-seccion: var(--verde-bustamante);
  position: relative;
  z-index: 1;
  padding: 56px 0 calc(110px + env(safe-area-inset-bottom));
  background: var(--verde-bustamante);
  color: var(--hueso);
  text-align: center;
}
@media (min-width: 768px) { .footer { padding-bottom: 48px; } }
.js:not(.is-ready) .footer { visibility: hidden; }
.footer__in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.footer__logo { width: 180px; height: auto; }
.footer__nombre {
  margin: 6px 0 0;
  font: 700 1.15rem/1.3 var(--f-titulo);
  letter-spacing: .04em;
}
.footer__lema { margin: 0; color: rgba(251, 245, 234, .85); }
.btn--whatsapp {
  margin-top: 10px;
  background: #25D366;
  color: #0B2E17;
  box-shadow: none;
}
.btn--whatsapp::before { background: #1EBE5A; }
.btn--whatsapp svg { width: 22px; height: 22px; }
.footer__credito {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(251, 245, 234, .2);
  width: min(100%, 420px);
  color: rgba(251, 245, 234, .82);
  font-size: .88rem;
}

/* ---------- CTA flotante ---------- */
.cta-flotante {
  position: fixed;
  z-index: 40;
  left: 16px;
  right: 16px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  opacity: 0;
  transform: translateY(160%);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
  pointer-events: none;
}
.cta-flotante .btn { width: 100%; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
.cta-flotante.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
@media (min-width: 768px) {
  .cta-flotante { left: auto; right: 24px; bottom: 24px; }
  .cta-flotante .btn { width: auto; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
}
.lightbox[hidden] { display: none; }
.lightbox__fondo {
  position: absolute;
  inset: 0;
  background: rgba(15, 9, 32, .86);
  opacity: 0;
  transition: opacity .3s ease;
}
.lightbox__caja {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 32px);
  max-height: calc(100svh - 32px);
  overflow: auto;
  padding: 18px 16px 20px;
  border-radius: 24px;
  background: var(--hueso);
  text-align: center;
  opacity: 0;
  transform: translateY(24px) scale(.96);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
  overscroll-behavior: contain;
}
.lightbox.is-open .lightbox__fondo { opacity: 1; }
.lightbox.is-open .lightbox__caja { opacity: 1; transform: none; }
.lightbox__cerrar {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(27, 18, 54, .08);
  color: var(--noche);
  cursor: pointer;
}
.lightbox__cerrar svg { width: 22px; height: 22px; }
.lightbox__etiqueta {
  margin: 0;
  color: var(--rosa-mexicano);
  font: 500 .85rem/1 var(--f-fiesta);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.lightbox__titulo {
  margin: 6px 48px 12px;
  color: var(--verde-bustamante);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
}
.lightbox__visor {
  position: relative;
  display: flex;
  justify-content: center;
}
.lightbox__img {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(27, 18, 54, .2);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.lightbox__imagen {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(600px, 60vh);
  max-height: min(600px, 60svh);
  pointer-events: none;
  -webkit-user-drag: none;
}
.lightbox__marca {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='120'%3E%3Ctext x='95' y='66' text-anchor='middle' transform='rotate(-30 95 60)' font-family='Arial,sans-serif' font-size='17' font-weight='700' fill='%231B1236' fill-opacity='.16'%3EVista previa%3C/text%3E%3C/svg%3E");
  background-size: 190px 120px;
}
.lightbox__marca::after {
  content: "Vista previa";
  position: absolute;
  left: 50%;
  top: 50%;
  padding: .2em .6em;
  border: 3px solid rgba(229, 0, 126, .55);
  border-radius: 10px;
  color: rgba(229, 0, 126, .6);
  font: 700 clamp(1.6rem, 6vw, 2.6rem)/1 var(--f-titulo);
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-30deg);
}
.lightbox__flecha {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(27, 18, 54, .82);
  color: #fff;
  cursor: pointer;
  transform: translateY(-50%);
}
.lightbox__flecha svg { width: 22px; height: 22px; }
.lightbox__flecha--prev { left: 4px; }
.lightbox__flecha--next { right: 4px; }
.lightbox__contador {
  margin: 10px 0 14px;
  color: var(--cafe-bustamante);
  font-size: .92rem;
  font-weight: 700;
}
.lightbox__cta { width: 100%; max-width: 360px; }

html.lightbox-abierto { overflow: hidden; }
html.lightbox-abierto body { overflow: hidden; }

/* ---------- Estado final sin animaciones ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal .titulo__flor { transform: none; }
  .js .dc circle { transform: none; }
  .dc__color image { mask: none; }
  .petalos, .petalo-suelto { display: none; }
  .js .form-embed__iframe { opacity: 1; }
}
.no-anim *, .no-anim *::before, .no-anim *::after { animation: none !important; }
.no-anim .reveal { opacity: 1 !important; transform: none !important; }
.no-anim .reveal .titulo__flor { transform: none !important; }
.no-anim .dc circle { transform: none !important; }
.no-anim .dc__color image { mask: none; }
.no-anim .form-embed__iframe { opacity: 1; }

/* ==========================================================================
   Página de gracias
   ========================================================================== */
.gracias-body { background: var(--noche); }
.gracias {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: 96px 0 40px;
  overflow: hidden;
  color: var(--hueso);
  text-align: center;
  background:
    radial-gradient(60% 45% at 50% 40%, rgba(255, 148, 25, .18), transparent 70%),
    radial-gradient(120% 90% at 50% 30%, var(--noche-2), var(--noche) 72%);
}
.gracias .papel-picado { top: 0; --bw: clamp(38px, 5.6vw, 64px); }
.gracias__in {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gracias__logo { width: 150px; height: auto; margin-bottom: 18px; }
.gracias__anfitrion {
  position: relative;
  height: min(34vh, 300px);
  height: min(34svh, 300px);
  margin: 4px 0 18px;
}
.gracias__anfitrion .velas {
  left: 50%;
  bottom: -10px;
  gap: clamp(90px, 22vw, 150px);
  transform: translateX(-50%);
}
.gracias h1 {
  color: var(--hueso);
  font-size: clamp(2rem, 1.3rem + 3.5vw, 3.2rem);
  margin-bottom: .35em;
}
.gracias__texto {
  max-width: 32em;
  margin: 0 auto 26px;
  color: var(--lavanda);
  font-size: 1.1rem;
}
.gracias__tips {
  width: 100%;
  max-width: 640px;
  margin: 0 0 26px;
  padding: 18px 18px 6px;
  border-radius: var(--radio);
  background: var(--hueso);
  color: var(--texto);
  text-align: left;
}
.gracias__tips h2 {
  margin: 0 0 8px;
  color: var(--verde-bustamante);
  font-size: 1.2rem;
  text-align: center;
}
.gracias__tips ul { margin: 0; padding: 0; list-style: none; }
.gracias__tips li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(90, 72, 66, .14);
}
.gracias__tips li:first-child { border-top: 0; }
.gracias__tips svg { flex: 0 0 auto; width: 38px; height: 38px; }
.btn--secundario {
  background: transparent;
  color: var(--hueso);
  box-shadow: inset 0 0 0 2px var(--cempasuchil-luz);
}
.btn--secundario::before { background: rgba(255, 193, 69, .16); }
.btn--secundario svg { width: 20px; height: 20px; }
.gracias__aviso {
  min-height: 1.6em;
  margin: 10px 0 0;
  color: var(--cempasuchil-luz);
  font-weight: 700;
}
.gracias__volver {
  margin-top: 18px;
  color: var(--lavanda);
  font-size: .95rem;
}
.gracias__credito {
  margin-top: 28px;
  color: rgba(220, 211, 240, .7);
  font-size: .82rem;
}

/* Si el navegador no deja romper el marco y la página queda dentro del iframe */
.en-iframe .gracias { min-height: 0; padding: 16px 12px; }
.en-iframe .gracias .papel-picado,
.en-iframe .gracias .petalos,
.en-iframe .gracias__logo,
.en-iframe .gracias__tips,
.en-iframe .gracias__credito { display: none; }
.en-iframe .gracias__anfitrion { height: 120px; margin: 0 0 8px; }
.en-iframe .gracias__anfitrion .velas { display: none; }
.en-iframe .gracias h1 { font-size: 1.5rem; }
.en-iframe .gracias__texto { font-size: .95rem; margin-bottom: 12px; }