/* Landing del producto (/inicio). Marfil, eucalipto profundo, dorado y rubor; títulos en
   Playfair Display con acentos en caligrafía (Great Vibes). Las animaciones se apagan con
   "reducir movimiento". */

@font-face { font-family: 'Figtree'; src: url('/fonts/figtree-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/fonts/figtree-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/fonts/figtree-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Pinyon Script'; src: url('/fonts/pinyon-script-latin-400-normal.woff2') format('woff2'); font-display: swap; }

:root {
  --tinta: #1c2620;
  --tinta-2: #44544b;
  --marfil: #fbf7f0;
  --arena: #f3ece0;
  --rubor: #ecc9bd;
  --rubor-2: #f6e1d9;
  --oro: #b8925a;
  --oro-claro: #e6cf9d;
  --verde: #2e4439;
  --linea: rgba(28, 38, 32, .1);
  --sombra: 0 30px 60px -30px rgba(28, 38, 32, .35);
  --f-display: 'Playfair Display', Georgia, serif;
  --f-script: 'Great Vibes', 'Pinyon Script', cursive;
  --f-texto: 'Figtree', system-ui, -apple-system, sans-serif;
  --ancho: 76rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--marfil); color: var(--tinta); font-family: var(--f-texto); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.12; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
.script { font-family: var(--f-script); color: var(--oro); font-size: 1.32em; line-height: .9; letter-spacing: 0; white-space: nowrap; }
.eyebrow { margin: 0 0 .9rem; font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--oro); }

/* ---------- botones ---------- */
.boton {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.3rem; padding: .85rem 1.6rem; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--tinta); color: var(--marfil); font: 600 1rem var(--f-texto); text-decoration: none;
  overflow: hidden; isolation: isolate;
  transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), box-shadow .25s;
  box-shadow: 0 14px 30px -14px rgba(28, 38, 32, .6);
}
.boton::after { /* brillo que cruza al pasar el mouse */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s ease;
}
.boton:hover { transform: translateY(-2px); }
.boton:hover::after { transform: translateX(120%); }
.boton:active { transform: translateY(0) scale(.98); }
.boton-claro { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.boton-oro { background: linear-gradient(135deg, #d6b675, var(--oro)); color: #1c140a; }
.boton-chico { min-height: 2.6rem; padding: .5rem 1.15rem; font-size: .92rem; }
.boton[disabled] { opacity: .6; cursor: progress; }
.boton-pronto { opacity: .55; cursor: default; pointer-events: none; }

/* ---------- navegación ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 2rem;
  padding: .9rem max(1.25rem, calc((100vw - var(--ancho)) / 2));
  transition: background .3s, box-shadow .3s, padding .3s;
}
.nav.con-fondo { background: rgba(251, 247, 240, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--linea); padding-block: .6rem; }
.marca { display: flex; align-items: center; gap: .55rem; text-decoration: none; font-family: var(--f-display); font-size: 1.2rem; }
.marca svg { width: 1.7rem; height: 1.7rem; color: var(--oro); }
.marca em { font-family: var(--f-script); font-style: normal; font-size: 1.5em; line-height: .8; color: var(--oro); margin-left: .08em; }
.nav-enlaces { display: flex; gap: 1.6rem; margin-left: auto; }
.nav-enlaces a { position: relative; text-decoration: none; font-size: .95rem; color: var(--tinta-2); }
.nav-enlaces a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: var(--oro); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.nav-enlaces a:hover { color: var(--tinta); }
.nav-enlaces a:hover::after { transform: scaleX(1); }
.nav-menu { display: none; }

/* ---------- portada ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 2rem;
  max-width: var(--ancho); margin: 0 auto; padding: 7rem 1.25rem 4rem;
}
.hero-fondo { position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; overflow: hidden; pointer-events: none; }
.mancha { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: deriva 18s ease-in-out infinite alternate; }
.m1 { width: 38rem; height: 38rem; background: var(--rubor); top: -12rem; right: -6rem; }
.m2 { width: 30rem; height: 30rem; background: #d9e4d7; bottom: -10rem; left: -8rem; animation-delay: -6s; }
.m3 { width: 18rem; height: 18rem; background: var(--oro-claro); top: 40%; left: 45%; opacity: .35; animation-delay: -12s; }
@keyframes deriva { to { transform: translate(40px, -30px) scale(1.08); } }

.petalos span {
  position: absolute; top: -40px; width: 14px; height: 18px; border-radius: 80% 0 80% 0;
  background: var(--rubor); opacity: .8;
  animation: cae linear infinite;
}
@keyframes cae {
  0% { transform: translate(0, -5vh) rotate(0); }
  100% { transform: translate(var(--x, 60px), 110vh) rotate(var(--r, 540deg)); }
}

.hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); }
.hero h1 .script { display: block; margin-top: .25em; font-size: 1.25em; }
.hero-sub { max-width: 34rem; margin: 1.6rem 0 2rem; font-size: 1.12rem; color: var(--tinta-2); }
.hero-botones { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero-badges { display: flex; flex-wrap: wrap; gap: .55rem; max-width: 36rem; margin: 1.6rem 0 2rem; padding: 0; list-style: none; }
.hero-badges li { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem .45rem .6rem; border: 1px solid var(--linea); border-radius: 999px; background: rgba(255, 255, 255, .65); font-size: .92rem; font-weight: 500; color: var(--tinta); }
.hero-badges svg { flex: none; width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--oro); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hero-puntos { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 1.6rem 0 0; padding: 0; list-style: none; font-size: .92rem; color: var(--tinta-2); }
.hero-puntos li::before { content: '✓'; margin-right: .4rem; color: var(--oro); font-weight: 700; }

/* escena: tele al fondo, polaroids flotando y el celular al frente */
.hero-escena { position: relative; height: min(78vh, 46rem); min-height: 34rem; }
.telefono {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  width: 17.5rem; aspect-ratio: 390 / 820; transform: translate(-40%, -50%) rotate(3deg);
  padding: .65rem; border-radius: 2.9rem; background: #111;
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .55), inset 0 0 0 2px #2b2b2b;
  transition: transform .4s ease-out;
}
.telefono-pantalla { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 2.3rem; background: #fff; }
.telefono-pantalla iframe { position: absolute; top: 0; left: 0; width: 390px; height: 820px; border: 0; transform-origin: 0 0; background: #fff; }
.telefono-respaldo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.telefono-isla { position: absolute; top: 1.2rem; left: 50%; width: 5.5rem; height: 1.45rem; transform: translateX(-50%); border-radius: 99px; background: #111; z-index: 2; }
.escena-pista {
  position: absolute; z-index: 4; right: 2%; bottom: 3%; margin: 0;
  padding: .45rem .9rem; border-radius: 999px; background: var(--tinta); color: var(--marfil); font-size: .82rem;
  animation: flota 4s ease-in-out infinite;
}
.tele {
  position: absolute; z-index: 1; left: 0; top: 10%; width: 74%;
  transform: rotate(-4deg); transition: transform .4s ease-out;
}
.tele-pantalla { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #1c1220; border: 8px solid #15161a; box-shadow: var(--sombra); }
.tele-pie { display: block; width: 26%; height: 10px; margin: 0 auto; border-radius: 0 0 8px 8px; background: #15161a; }
.tele-pantalla img, .mt-pantalla img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.tele-pantalla img.activa, .mt-pantalla img.activa { opacity: 1; animation: zoom-lento 6s ease-out forwards; }
@keyframes zoom-lento { from { transform: scale(1); } to { transform: scale(1.1); } }

.polaroid {
  position: absolute; z-index: 2; margin: 0; padding: .55rem .55rem 0; width: 8.5rem;
  background: #fffdf8; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .45);
  animation: flota 6s ease-in-out infinite;
}
.polaroid img { aspect-ratio: 1; width: 100%; object-fit: cover; }
.polaroid figcaption { font-family: 'Pinyon Script', cursive; text-align: center; font-size: 1.15rem; padding: .3rem 0 .45rem; color: #333; }
.p1 { left: -4%; bottom: 6%; --rot: -9deg; animation-delay: -1s; }
.p2 { right: -2%; top: 4%; --rot: 8deg; animation-delay: -3s; width: 7.5rem; }
.p3 { left: 16%; top: -2%; --rot: -4deg; animation-delay: -4.5s; width: 7rem; }
@keyframes flota { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-14px) rotate(var(--rot, 0deg)); } }

/* ---------- franja ---------- */
.franja { overflow: hidden; padding: 1.15rem 0; background: var(--tinta); color: var(--oro-claro); }
.franja-pista { display: flex; gap: 1.6rem; width: max-content; animation: desliza 38s linear infinite; font-family: var(--f-display); font-size: 1.35rem; white-space: nowrap; }
.franja i { font-style: normal; color: var(--oro); }
@keyframes desliza { to { transform: translateX(-50%); } }

/* ---------- secciones ---------- */
.seccion { max-width: var(--ancho); margin: 0 auto; padding: 7rem 1.25rem; text-align: center; }
.seccion > h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
.seccion-sub { max-width: 38rem; margin: 1.2rem auto 0; color: var(--tinta-2); }
.seccion-arena, .seccion-oscura { max-width: none; }
.seccion-arena { background: var(--arena); }
.seccion-arena > *, .seccion-oscura > * { max-width: var(--ancho); margin-left: auto; margin-right: auto; }
.seccion-oscura { background: radial-gradient(120% 80% at 50% 0%, #2c3b33 0%, var(--tinta) 60%); color: var(--marfil); }
.seccion-oscura .seccion-sub, .seccion-oscura .planes-nota { color: rgba(251, 247, 240, .72); }

/* cómo funciona */
.pasos { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin: 4rem 0 0; padding: 0; list-style: none; counter-reset: paso; }
.pasos::before { /* línea punteada que une los pasos */
  content: ''; position: absolute; top: 3.2rem; left: 16%; right: 16%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--oro) 0 8px, transparent 8px 16px); opacity: .5;
}
.paso { position: relative; padding: 2.2rem 1.6rem 2rem; border-radius: 28px; background: #fff; box-shadow: var(--sombra); text-align: left; }
.paso-num { position: absolute; top: -1.6rem; right: 1.4rem; font-family: var(--f-script); font-size: 4.2rem; line-height: 1; color: var(--oro); }
.paso svg { width: 3.2rem; height: 3.2rem; margin-bottom: 1rem; fill: none; stroke: var(--verde); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; padding: .6rem; border-radius: 16px; background: var(--rubor-2); }
.paso h3 { font-size: 1.45rem; margin-bottom: .5rem; }
.paso p { margin: 0; color: var(--tinta-2); }

/* ---------- funciones: mosaico ---------- */
.bento {
  display: grid; gap: 1.2rem; margin-top: 3.5rem; text-align: left;
  grid-template-columns: repeat(6, 1fr);
  grid-template-areas: "sobre sobre sobre rsvp rsvp rsvp" "tele tele tele tele panel panel" "qr qr qr qr panel panel";
}
.tile { position: relative; overflow: hidden; padding: 1.8rem; border-radius: 28px; background: #fff; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: .6rem; }
.tile h3 { font-size: 1.5rem; }
.tile p { margin: 0; color: var(--tinta-2); font-size: .98rem; }
.tile > div:first-child { flex: 1; display: grid; place-items: center; min-height: 13rem; margin-bottom: .8rem; border-radius: 20px; }
.tile-sobre { grid-area: sobre; }
.tile-rsvp { grid-area: rsvp; }
.tile-tele { grid-area: tele; }
.tile-panel { grid-area: panel; }
.tile-qr { grid-area: qr; flex-direction: row; align-items: center; gap: 1.6rem; }
.tile-qr > div:first-child { flex: none; min-height: 0; margin: 0; }
.tile-qr h3 { margin-bottom: .5rem; }

/* sobre que se abre en bucle */
.mini-sobre { position: relative; background: linear-gradient(160deg, #2e4439, #16221c); perspective: 600px; }
.mini-sobre > * { position: absolute; left: 50%; top: 55%; width: 15rem; height: 10rem; margin: -5rem 0 0 -7.5rem; }
.ms-carta { display: grid; place-content: center; text-align: center; background: var(--marfil); border-radius: 4px; transform: scale(.88); animation: carta 6s ease-in-out infinite; }
.ms-carta b { font-family: 'Pinyon Script', cursive; font-weight: 400; font-size: 2rem; }
.ms-carta small { font-family: var(--f-display); color: var(--tinta-2); }
.ms-frente { background: #f1ede6; clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); border-radius: 4px; }
.ms-solapa { height: 54%; background: #e7e1d6; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; animation: solapa 6s ease-in-out infinite; }
.ms-sello { width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; top: calc(55% - 5rem + 5.4rem); display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #a54a5a, #7b2d3b 60%, #571e29); color: #f3c9cf; font: .78rem var(--f-display); box-shadow: 0 4px 8px rgba(0, 0, 0, .35); animation: sello 6s ease-in-out infinite; }
@keyframes sello { 0%, 15% { opacity: 1; transform: none; } 25%, 85% { opacity: 0; transform: translateY(-30px) scale(1.1); } 100% { opacity: 1; transform: none; } }
@keyframes solapa { 0%, 22% { transform: rotateX(0); z-index: 3; } 40% { z-index: 0; } 40%, 85% { transform: rotateX(180deg); z-index: 0; } 100% { transform: rotateX(0); z-index: 3; } }
@keyframes carta { 0%, 38% { transform: scale(.88); z-index: 1; } 55%, 85% { transform: translateY(-58%) scale(.92); z-index: 1; } 100% { transform: scale(.88); } }
.ms-frente { z-index: 2; }

/* confirmación */
.mini-rsvp { background: var(--rubor-2); gap: .7rem; padding: 1.5rem; align-content: center; }
.mr-titulo { margin: 0; font-family: var(--f-display); font-size: 1.3rem; text-align: center; }
.mr-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; width: min(100%, 19rem); }
.mr-opciones span { padding: .7rem .4rem; border-radius: 14px; background: #fff; text-align: center; font-size: .88rem; font-weight: 500; }
.mr-si { animation: elige 5s ease-in-out infinite; }
@keyframes elige { 0%, 15% { background: #fff; color: var(--tinta); } 25%, 100% { background: var(--tinta); color: var(--marfil); } }
.mr-personas { display: flex; align-items: center; justify-content: space-between; width: min(100%, 19rem); font-size: .9rem; }
.mr-personas b { display: flex; align-items: center; gap: .4rem; padding: .2rem; border-radius: 99px; background: #fff; }
.mr-personas i { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--rubor-2); font-style: normal; }
.mr-personas output { min-width: 1.2rem; text-align: center; font-weight: 600; }
.mr-listo { padding: .45rem .9rem; border-radius: 99px; background: #2f7d57; color: #fff; font-size: .85rem; font-weight: 600; animation: listo 5s ease-in-out infinite; }
@keyframes listo { 0%, 55% { opacity: 0; transform: translateY(8px) scale(.9); } 65%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* pantalla en vivo */
.mini-tele { position: relative; background: #120c14; overflow: hidden; }
.mt-pantalla { position: absolute; inset: 0; }
.mt-liston { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); padding: .35rem 1.1rem; background: var(--oro); color: #fff; font-family: var(--f-display); letter-spacing: .05em; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); animation: liston 6s ease-in-out infinite; }
@keyframes liston { 0%, 70% { opacity: 0; transform: translate(-50%, -150%); } 78%, 96% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
.mt-qr { position: absolute; right: .9rem; bottom: .9rem; width: 3.4rem; height: 3.4rem; border-radius: 8px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'%3E%3Cpath d='M0 0h3v3H0zM4 0h3v3H4zM0 4h3v3H0zM4 4h1v1H4zM6 4h1v1H6zM5 5h1v1H5zM4 6h1v1H4zM6 6h1v1H6z' fill='%231c2620'/%3E%3C/svg%3E") center / 70% no-repeat; }

/* panel: carta que se desliza para aprobar */
.mini-panel { background: var(--arena); gap: 1rem; padding: 1.4rem; }
.mp-carta { position: relative; width: 11rem; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; box-shadow: var(--sombra); animation: desliza-carta 4.5s ease-in-out infinite; }
.mp-carta img { width: 100%; height: 100%; object-fit: cover; }
.mp-sello { position: absolute; top: .8rem; left: .7rem; padding: .15rem .55rem; border: 3px solid #2f7d57; border-radius: 8px; color: #2f7d57; background: rgba(255, 255, 255, .85); font-weight: 700; font-size: .9rem; text-transform: uppercase; transform: rotate(-10deg); animation: sello-aprobar 4.5s ease-in-out infinite; }
@keyframes desliza-carta { 0%, 25% { transform: none; opacity: 1; } 55% { transform: translateX(65%) rotate(14deg); opacity: 0; } 56% { transform: translateX(0) scale(.85); opacity: 0; } 70%, 100% { transform: none; opacity: 1; } }
@keyframes sello-aprobar { 0%, 22% { opacity: 0; } 35%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.mp-botones { display: flex; gap: 1.2rem; }
.mp-botones i { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: #fff; font-style: normal; font-size: 1.2rem; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .3); }
.mp-botones .no { color: #b23a3a; }
.mp-botones .si { color: #2f7d57; animation: pulso 4.5s ease-in-out infinite; }
@keyframes pulso { 15%, 25% { transform: scale(1.15); } 0%, 35%, 100% { transform: none; } }

/* QR con línea que escanea */
.mini-qr { position: relative; width: 9rem; height: 9rem; padding: .7rem; border-radius: 18px; background: #fff; box-shadow: var(--sombra); overflow: hidden; }
.mq-codigo svg { display: block; width: 100%; height: 100%; }
.mq-linea { position: absolute; left: 0; right: 0; height: 3px; background: var(--oro); box-shadow: 0 0 12px 3px rgba(184, 146, 90, .6); animation: escanea 2.6s ease-in-out infinite alternate; }
@keyframes escanea { from { top: 8%; } to { top: 90%; } }

/* ---------- demos ---------- */
.demos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; margin-top: 3.5rem; text-align: left; }
.demo { position: relative; display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: #fff; box-shadow: var(--sombra); transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s; will-change: transform; }
.demo:hover { transform: translateY(-8px); box-shadow: 0 40px 70px -30px rgba(28, 38, 32, .5); }
.demo-foto { position: relative; aspect-ratio: 4 / 4.4; overflow: hidden; }
.demo-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.demo:hover .demo-foto img { transform: scale(1.07); }
.demo-tipo { position: absolute; top: .9rem; left: .9rem; padding: .3rem .8rem; border-radius: 99px; background: rgba(255, 255, 255, .9); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.demo-cuerpo { display: flex; flex-direction: column; gap: .7rem; padding: 1.1rem 1.2rem 1.3rem; flex: 1; }
.demo h3 { font-size: 2.1rem; line-height: 1.15; }
.demo p { margin: 0; color: var(--tinta-2); font-size: .9rem; flex: 1; }
.demo-enlaces { display: flex; gap: .5rem; }
.demo-enlaces a { flex: 1; padding: .6rem .5rem; border-radius: 99px; text-align: center; text-decoration: none; font-size: .88rem; font-weight: 600; }
.demo-enlaces a:first-child { color: #fff; }
.demo-enlaces a:last-child { box-shadow: inset 0 0 0 1.5px var(--linea); }

/* ---------- planes ---------- */
.planes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-top: 3.5rem; align-items: stretch; text-align: left; }
.plan { position: relative; display: flex; flex-direction: column; padding: 2.2rem 1.8rem; border-radius: 30px; background: rgba(251, 247, 240, .05); border: 1px solid rgba(251, 247, 240, .14); backdrop-filter: blur(6px); }
/* borde dorado que gira: el fondo marfil va en el relleno y el degradado en el borde */
.plan-destacado {
  color: var(--tinta); transform: translateY(-1rem); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);
  border: 2px solid transparent;
  background:
    linear-gradient(var(--marfil), var(--marfil)) padding-box,
    conic-gradient(from var(--giro, 0deg), var(--oro), #f4e2b8, var(--oro), #8e6a35, var(--oro)) border-box;
  animation: gira 6s linear infinite;
}
@property --giro { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes gira { to { --giro: 360deg; } }
.plan-insignia { position: absolute; top: -.9rem; left: 50%; transform: translateX(-50%); padding: .3rem 1rem; border-radius: 99px; background: linear-gradient(135deg, #d6b675, var(--oro)); color: #1c140a; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.plan h3 { font-size: 1.9rem; }
.plan-lema { margin: .4rem 0 1.4rem; font-size: .95rem; opacity: .75; }
.plan-precio { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .2rem; }
.plan-precio b { font-family: var(--f-display); font-weight: 400; font-size: 3.1rem; line-height: 1; }
.plan-precio span { font-size: .95rem; opacity: .7; }
.plan-detalle { margin: 0 0 1.4rem; font-size: .85rem; opacity: .65; }
.plan ul { flex: 1; margin: 0 0 1.8rem; padding: 0; list-style: none; display: grid; align-content: start; gap: .65rem; }
.plan li { position: relative; padding-left: 1.7rem; font-size: .95rem; }
.plan li::before { content: ''; position: absolute; left: 0; top: .3em; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--oro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; }
.plan li.encabezado { padding-left: 0; font-weight: 600; }
.plan li.encabezado::before { display: none; }
.plan .boton { width: 100%; }
.seccion-oscura .plan:not(.plan-destacado) .boton { background: var(--marfil); color: var(--tinta); }
.planes-nota { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 2.6rem !important; font-size: .9rem; }
.planes-nota svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; }

/* ---------- preguntas ---------- */
.preguntas { max-width: 46rem; margin: 3rem auto 0; text-align: left; }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary { position: relative; padding: 1.3rem 2.5rem 1.3rem 0; cursor: pointer; list-style: none; font-family: var(--f-display); font-size: 1.25rem; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: '+'; position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); font-family: var(--f-texto); font-size: 1.6rem; color: var(--oro); transition: transform .3s; }
.preguntas details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.preguntas p { margin: 0 0 1.3rem; color: var(--tinta-2); animation: abre .35s ease; }
@keyframes abre { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- cierre ---------- */
.cierre { position: relative; overflow: hidden; padding: 8rem 1.25rem; text-align: center; background: var(--tinta); color: var(--marfil); }
.cierre h2 { position: relative; max-width: 50rem; margin: 0 auto 2.2rem; font-size: clamp(2.2rem, 4.8vw, 3.8rem); }
.cierre .hero-botones { position: relative; justify-content: center; }
.cierre .boton-claro { color: var(--marfil); box-shadow: inset 0 0 0 1.5px var(--marfil); }
.cierre-fotos img { position: absolute; width: 11rem; aspect-ratio: 1; object-fit: cover; padding: .5rem .5rem 1.6rem; background: #fffdf8; opacity: .22; box-shadow: 0 20px 40px rgba(0, 0, 0, .4); animation: flota 7s ease-in-out infinite; }
.cierre-fotos img:nth-child(1) { left: 4%; top: 12%; --rot: -10deg; }
.cierre-fotos img:nth-child(2) { right: 6%; top: 8%; --rot: 8deg; animation-delay: -2s; }
.cierre-fotos img:nth-child(3) { left: 10%; bottom: 6%; --rot: 6deg; animation-delay: -4s; }
.cierre-fotos img:nth-child(4) { right: 12%; bottom: 10%; --rot: -6deg; animation-delay: -5s; }

/* ---------- pie ---------- */
.pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; max-width: var(--ancho); margin: 0 auto; padding: 2.5rem 1.25rem calc(2.5rem + env(safe-area-inset-bottom)); font-size: .92rem; color: var(--tinta-2); }
.pie nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.pie nav a { text-decoration: none; }
.pie p { margin: 0; }

/* aviso */
.aviso { position: fixed; left: 50%; bottom: 1.5rem; z-index: 60; max-width: calc(100% - 2rem); padding: .9rem 1.2rem; border-radius: 14px; background: var(--tinta); color: var(--marfil); box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .5); transform: translate(-50%, 150%); transition: transform .4s cubic-bezier(.2, .9, .2, 1); }
.aviso.visible { transform: translate(-50%, 0); }
.aviso a { color: var(--oro-claro); }

/* ---------- aparecer al hacer scroll ---------- */
.revelar { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2, .8, .2, 1), transform .9s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 110ms); }
.revelar.visible { opacity: 1; transform: none; }

/* ---------- responsivo ---------- */
@media (max-width: 1080px) {
  .planes { grid-template-columns: repeat(2, 1fr); max-width: 50rem; margin-inline: auto; }
  .plan-destacado { transform: none; }
  .hero { grid-template-columns: 1fr; text-align: center; padding-top: 6.5rem; }
  .hero-sub { margin-inline: auto; }
  .hero-botones, .hero-puntos, .hero-badges { justify-content: center; }
  .hero-badges { margin-inline: auto; }
  .hero-escena { height: 36rem; max-width: 34rem; width: 100%; margin: 1rem auto 0; }
  .demos { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: 1fr 1fr; grid-template-areas: "sobre sobre" "rsvp panel" "tele tele" "qr qr"; }
}
@media (max-width: 860px) {
  .nav { gap: 1rem; }
  .nav-cta { margin-left: auto; }
  .nav-menu { display: grid; gap: 6px; width: 2.6rem; height: 2.6rem; place-content: center; border: 0; border-radius: 50%; background: var(--tinta); cursor: pointer; }
  .nav-menu span { display: block; width: 1.1rem; height: 2px; background: var(--marfil); transition: transform .3s; }
  .nav-menu[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav-menu[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .nav-enlaces {
    position: fixed; inset: 4.2rem 1rem auto; flex-direction: column; gap: 0; margin: 0; padding: .6rem;
    border-radius: 22px; background: var(--marfil); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .35);
    opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all .3s;
  }
  .nav-enlaces.abierto { opacity: 1; visibility: visible; transform: none; }
  .nav-enlaces a { padding: .9rem 1rem; font-size: 1.05rem; border-radius: 14px; }
  .nav-enlaces a::after { display: none; }
  .pasos { grid-template-columns: 1fr; gap: 2.4rem; max-width: 28rem; margin-inline: auto; }
  .pasos::before { display: none; }
  .planes { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; }
  .plan-destacado { transform: none; order: -1; }
  .seccion { padding: 5rem 1.25rem; }
}
@media (max-width: 620px) {
  .hero-badges { gap: .4rem; }
  .hero-badges li { padding: .4rem .75rem .4rem .5rem; font-size: .84rem; }
  body { font-size: 16px; }
  .marca span { font-size: 1.05rem; }
  .hero-escena { height: 31rem; min-height: 0; }
  .telefono { width: 14.5rem; }
  .tele { width: 88%; top: 4%; }
  .polaroid { width: 6.2rem; }
  .p2 { width: 5.6rem; }
  .p3 { display: none; }
  .demos { grid-template-columns: 1fr; max-width: 24rem; margin-inline: auto; }
  .bento { grid-template-columns: 1fr; grid-template-areas: "sobre" "rsvp" "tele" "panel" "qr"; }
  .tile-qr { flex-direction: column; align-items: flex-start; }
  .franja-pista { font-size: 1.1rem; }
  .pie { flex-direction: column; text-align: center; }
}

/* Con "reducir movimiento" se quita lo que se desplaza, gira o flota; se conservan los
   desvanecidos (aparecer al hacer scroll, cambio de fotos, mensajes). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .petalos { display: none; }
  .mancha, .polaroid, .escena-pista, .franja-pista, .cierre-fotos img, .ms-solapa, .ms-carta, .ms-sello,
  .mp-carta, .mp-botones .si, .mq-linea, .plan-destacado { animation: none; }
  .tele-pantalla img.activa, .mt-pantalla img.activa { animation: none; }
  .mt-liston, .mr-listo, .mp-sello { animation-name: aparece-suave; }
  .revelar { transform: none; }
  .boton:hover, .demo:hover { transform: none; }
  .demo:hover .demo-foto img { transform: none; }
  .ms-carta { transform: translateY(-58%) scale(.92); }
  .ms-solapa { transform: rotateX(180deg); z-index: 0; }
  .ms-sello { opacity: 0; }
}
@keyframes aparece-suave { 0%, 60% { opacity: 0; } 70%, 95% { opacity: 1; } 100% { opacity: 0; } }