/* Sipi Fiestas — dos estilos sobre la misma estructura.
   "fiesta"   = colores vivos, ondas y fotos en burbuja (ref. Ismail Hossain)
   "elegante" = rosa y dorado, serif con script, fotos en arco (ref. Festivo) */

:root,
[data-estilo="fiesta"] {
  --bg: #ffffff;
  --bg-soft: #eaf6fe;
  --band: #1597e5;
  --band-ink: #ffffff;
  --ink: #0d2547;
  --ink-soft: #49607f;
  --primary: #e6197e;
  --primary-ink: #ffffff;
  --accent: #ffc23d;
  --accent-ink: #3b2a00;
  --green: #66b32e;
  --line: #d6e7f5;
  --card: #ffffff;
  --footer: #0b2a5b;
  --footer-ink: #dbe9ff;
  --wa: #1fae5b;

  --f-display: "Baloo 2", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --f-body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --f-script: "Baloo 2", "Trebuchet MS", sans-serif;
  --display-weight: 800;
  --display-style: normal;
  --script-size: 1.05rem;
  --script-transform: uppercase;
  --script-spacing: .08em;

  --r-card: 26px;
  --r-btn: 999px;
  --photo-1: 58% 42% 55% 45% / 52% 48% 52% 48%;
  --photo-2: 45% 55% 40% 60% / 55% 45% 55% 45%;
  --photo-3: 50% 50% 62% 38% / 42% 58% 42% 58%;
  --shadow: 0 14px 34px -18px rgba(13, 37, 71, .45);
  --wave: block;
  --ornament: none;
  color-scheme: light;
}

[data-estilo="elegante"] {
  --bg: #fbf4f1;
  --bg-soft: #f5e6e3;
  --band: #f3dfdc;
  --band-ink: #3a1e2c;
  --ink: #2e1a24;
  --ink-soft: #6f5763;
  --primary: #3a1e2c;
  --primary-ink: #fbf4f1;
  --accent: #c49a45;
  --accent-ink: #2e1a24;
  --green: #8a6c3a;
  --line: #e7d3cf;
  --card: #fffaf8;
  --footer: #22302a;
  --footer-ink: #e9dfd2;
  --wa: #1f7a4d;

  --f-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --f-body: "DM Sans", "Segoe UI", system-ui, sans-serif;
  --f-script: "Great Vibes", "Brush Script MT", cursive;
  --display-weight: 600;
  --display-style: normal;
  --script-size: 1.9rem;
  --script-transform: none;
  --script-spacing: 0;

  --r-card: 6px;
  --r-btn: 4px;
  --photo-1: 999px 999px 8px 8px;
  --photo-2: 999px 999px 8px 8px;
  --photo-3: 999px 999px 8px 8px;
  --shadow: 0 20px 40px -28px rgba(58, 30, 44, .55);
  --wave: none;
  --ornament: block;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  transition: background .35s ease, color .35s ease;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding-left: max(18px, env(safe-area-inset-left, 0px));
  padding-right: max(18px, env(safe-area-inset-right, 0px));
}

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: var(--display-weight);
  font-style: var(--display-style);
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.35rem; }
p { margin: 0; }

.eyebrow {
  font-family: var(--f-script);
  font-size: var(--script-size);
  text-transform: var(--script-transform);
  letter-spacing: var(--script-spacing);
  color: var(--primary);
  font-weight: 700;
  line-height: 1.1;
}
[data-estilo="elegante"] .eyebrow { color: var(--accent); font-weight: 400; }

.lead { font-size: 1.12rem; color: var(--ink-soft); max-width: 58ch; }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .9rem 1.45rem;
  border-radius: var(--r-btn);
  font-weight: 800; font-size: 1rem; text-decoration: none;
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .2s;
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
.btn-wa { background: var(--wa); color: #fff; box-shadow: 0 10px 22px -12px var(--wa); }
.btn-main { background: var(--primary); color: var(--primary-ink); }
.btn-ghost { border-color: currentColor; color: var(--ink); background: transparent; }
[data-estilo="elegante"] .btn { font-weight: 600; letter-spacing: .02em; }

/* Barra superior */
.topbar { background: var(--ink); color: var(--bg); font-size: .88rem; }
.topbar .wrap { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; justify-content: center; padding-block: .5rem; text-align: center; }
.topbar b { color: var(--accent); }

/* Header */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .7rem; }
.logo img { height: 46px; width: auto; }
.nav { display: flex; gap: 1.5rem; align-items: center; }
.nav a { text-decoration: none; font-weight: 700; }
.nav a:not(.btn) { color: var(--ink-soft); }
.nav a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--primary); }
.nav .btn { padding: .6rem 1.1rem; }
@media (max-width: 820px) { .nav a:not(.btn) { display: none; } }
@media (max-width: 420px) { .nav .btn span { display: none; } .logo img { height: 38px; } }

/* Hero */
.hero { position: relative; background: var(--bg-soft); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.5rem; align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(4rem, 8vw, 6.5rem); }
.hero-copy { display: grid; gap: 1.2rem; min-width: 0; }
.hero h1 em { font-style: normal; color: var(--primary); }
[data-estilo="elegante"] .hero h1 em { font-style: italic; color: var(--accent); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .4rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .35rem .85rem; font-size: .9rem; font-weight: 700; color: var(--ink-soft); }
[data-estilo="elegante"] .chip { border-radius: 4px; font-weight: 500; }

.collage { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 14px; min-width: 0; }
.collage img { width: 100%; height: 100%; object-fit: cover; box-shadow: var(--shadow); transition: border-radius .5s ease; }
.collage .p1 { grid-column: 1 / 3; aspect-ratio: 16 / 10; border-radius: var(--photo-1); }
.collage .p2 { aspect-ratio: 1; border-radius: var(--photo-2); }
.collage .p3 { aspect-ratio: 1; border-radius: var(--photo-3); }
.badge-float {
  position: absolute; left: -10px; bottom: 18%;
  background: var(--accent); color: var(--accent-ink);
  border-radius: var(--r-card); padding: .7rem 1rem; font-weight: 800; line-height: 1.15;
  box-shadow: var(--shadow); max-width: 12rem; font-size: .95rem;
}
.badge-float b { display: block; font-family: var(--f-display); font-size: 1.6rem; }
[data-estilo="elegante"] .badge-float { background: var(--card); color: var(--ink); border: 1px solid var(--accent); font-weight: 500; }
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .badge-float { left: 8px; bottom: 8px; }
}

/* Separadores */
.wave { display: var(--wave); position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 60px; color: var(--bg); }
.wave.top { top: -1px; bottom: auto; transform: rotate(180deg); }
.ornament { display: var(--ornament); width: 120px; height: 14px; margin: 0 auto; color: var(--accent); }

/* Secciones */
section { position: relative; }
.section { padding-block: clamp(3.2rem, 7vw, 5.5rem); }
.section-head { display: grid; gap: .7rem; text-align: center; justify-items: center; margin-bottom: 2.6rem; }
.section-head .lead { margin: 0 auto; }

/* Datos clave */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: -3.2rem; position: relative; z-index: 2; }
.fact { background: var(--card); border-radius: var(--r-card); padding: 1.2rem 1.2rem 1.3rem; box-shadow: var(--shadow); display: grid; gap: .35rem; border: 1px solid var(--line); }
.fact .ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--bg-soft); color: var(--primary); }
.fact .ico svg { width: 24px; height: 24px; }
.fact h3 { font-size: 1.1rem; }
.fact p { font-size: .93rem; color: var(--ink-soft); }
[data-estilo="elegante"] .fact .ico { border-radius: 50%; color: var(--accent); background: transparent; border: 1px solid var(--accent); }
[data-estilo="elegante"] .fact h3 { font-family: var(--f-body); font-weight: 700; }
@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .facts { grid-template-columns: 1fr; } }

/* Tarjetas de paquetes */
.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1.4rem; align-items: start; }
.pack {
  background: var(--card); border-radius: var(--r-card); overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid var(--line);
  display: grid; grid-template-rows: auto 1fr; min-width: 0;
}
.pack-media { position: relative; aspect-ratio: 16 / 9; background: var(--bg-soft); overflow: hidden; }
.pack-media img { width: 100%; height: 100%; object-fit: cover; }
.pack-media .solid { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-size: 1.6rem; color: var(--primary); text-align: center; padding: 1rem; }
.tag { position: absolute; top: 12px; left: 12px; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: .8rem; padding: .3rem .7rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.tag.alt { left: auto; right: 12px; background: var(--primary); color: var(--primary-ink); }
[data-estilo="elegante"] .tag { border-radius: 3px; font-weight: 600; }
.pack-body { padding: 1.3rem 1.4rem 1.5rem; display: grid; gap: .9rem; align-content: start; }
.pack-top { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.pack-time { font-size: .88rem; font-weight: 700; color: var(--ink-soft); }
.price { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.price .now { font-family: var(--f-display); font-size: 2.3rem; font-weight: var(--display-weight); color: var(--primary); line-height: 1; font-variant-numeric: tabular-nums; }
.price .was { color: var(--ink-soft); text-decoration: line-through; font-size: 1rem; }
.price .note { font-size: .85rem; color: var(--ink-soft); width: 100%; }
[data-estilo="elegante"] .price .now { color: var(--ink); }
.incl { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; font-size: .96rem; }
.incl li { display: grid; grid-template-columns: 1.2rem 1fr; gap: .45rem; align-items: start; }
.incl li::before { content: ""; width: .75rem; height: .75rem; margin-top: .42rem; border-radius: 50%; background: var(--green); }
[data-estilo="elegante"] .incl li::before { border-radius: 0; width: .5rem; height: .5rem; transform: rotate(45deg); background: var(--accent); margin-top: .55rem; }
.incl-label { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); margin-top: .3rem; }
.pack .btn { width: 100%; }
.pack.featured { border: 3px solid var(--primary); }
[data-estilo="elegante"] .pack.featured { border: 1px solid var(--accent); outline: 1px solid var(--accent); outline-offset: 5px; }
details.more summary { cursor: pointer; font-weight: 700; color: var(--primary); list-style: none; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: " +"; }
details.more[open] summary::after { content: " –"; }
details.more .incl { margin-top: .5rem; }

/* Pasos */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; counter-reset: paso; }
.step { display: grid; gap: .5rem; padding: 1.4rem; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); }
.step::before { counter-increment: paso; content: counter(paso); font-family: var(--f-display); font-size: 2.4rem; line-height: 1; color: var(--primary); font-weight: var(--display-weight); }
[data-estilo="elegante"] .step::before { color: var(--accent); font-style: italic; }
.step p { color: var(--ink-soft); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* Banda de color */
.band { background: var(--band); color: var(--band-ink); }
.band .lead, .band .eyebrow { color: inherit; }
[data-estilo="fiesta"] .band .eyebrow { color: var(--accent); }

/* Servicios */
.services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.svc { background: color-mix(in srgb, var(--band-ink) 10%, transparent); border: 1px solid color-mix(in srgb, var(--band-ink) 22%, transparent); border-radius: var(--r-card); padding: 1.3rem; display: grid; gap: .7rem; align-content: start; min-width: 0; }
.svc h3 { font-size: 1.2rem; }
.svc ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.svc li { font-size: .9rem; font-weight: 700; padding: .25rem .65rem; border-radius: 999px; background: color-mix(in srgb, var(--band-ink) 14%, transparent); }
[data-estilo="elegante"] .svc li { border-radius: 3px; font-weight: 500; background: color-mix(in srgb, var(--band-ink) 7%, transparent); }
.svc a { font-weight: 800; }
@media (max-width: 960px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .services { grid-template-columns: 1fr; } }

/* Galería */
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 200px; gap: 12px; }
.gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--r-card) * .7); }
.gallery .tall { grid-row: span 2; }
.gallery .wide { grid-column: span 2; }
[data-estilo="elegante"] .gallery img { border-radius: 4px; filter: saturate(.85); }
@media (max-width: 760px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; } }

/* Llamado a la acción */
.cta-box { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: center; background: var(--primary); color: var(--primary-ink); border-radius: calc(var(--r-card) * 1.3); padding: clamp(1.6rem, 4vw, 3rem); box-shadow: var(--shadow); }
.cta-box .lead { color: inherit; opacity: .9; }
.cta-box .eyebrow { color: var(--accent); }
.cta-actions { display: grid; gap: .8rem; }
.phone { display: grid; gap: .1rem; padding: .8rem 1rem; border-radius: calc(var(--r-card) * .6); background: color-mix(in srgb, var(--primary-ink) 12%, transparent); }
.phone small { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.phone b { font-size: 1.35rem; font-variant-numeric: tabular-nums; user-select: all; }
@media (max-width: 760px) { .cta-box { grid-template-columns: 1fr; } }

/* Preguntas */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: .8rem; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--r-card) * .6); padding: 1rem 1.2rem; }
.faq summary { cursor: pointer; font-weight: 800; font-size: 1.05rem; }
.faq p { margin-top: .6rem; color: var(--ink-soft); }

/* Pie */
.footer { background: var(--footer); color: var(--footer-ink); padding-block: 2.6rem 6rem; font-size: .95rem; }
.footer .wrap { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem; }
.footer h3 { font-size: 1.05rem; margin-bottom: .6rem; color: #fff; font-family: var(--f-body); font-weight: 800; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.footer .logo-foot { background: #fff; border-radius: 12px; padding: .5rem .8rem; display: inline-block; }
.footer .logo-foot img { height: 40px; }
@media (max-width: 760px) { .footer .wrap { grid-template-columns: 1fr; } }

/* Flotantes */
.wa-float {
  position: fixed; z-index: 30;
  right: calc(18px + env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--wa); color: #fff; display: grid; place-items: center;
  box-shadow: 0 12px 26px -10px rgba(0,0,0,.45);
}
.wa-float svg { width: 32px; height: 32px; }

.style-switch {
  position: fixed; z-index: 30;
  left: calc(14px + env(safe-area-inset-left, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: .3rem;
  background: #111; color: #fff; border-radius: 999px; padding: .3rem .3rem .3rem .9rem;
  font: 600 .82rem/1 "Nunito", system-ui, sans-serif; box-shadow: 0 10px 26px -10px rgba(0,0,0,.5);
}
.style-switch span { opacity: .75; margin-right: .2rem; }
.style-switch button { border: 0; border-radius: 999px; padding: .5rem .85rem; font: inherit; cursor: pointer; background: transparent; color: #fff; }
.style-switch button[aria-pressed="true"] { background: #fff; color: #111; }
@media (max-width: 420px) { .style-switch span { display: none; } }

/* Guisados (comida) */
.menu-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.4rem; }
.menu-tabs button { border: 2px solid var(--line); background: var(--card); color: var(--ink); border-radius: var(--r-btn); padding: .55rem 1.1rem; font: 700 .95rem var(--f-body); cursor: pointer; }
.menu-tabs button[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.menu-search { display: flex; justify-content: center; margin-bottom: 1.4rem; }
.menu-search input { width: min(100%, 420px); padding: .8rem 1rem; border-radius: var(--r-btn); border: 2px solid var(--line); font: inherit; background: var(--card); color: var(--ink); }
.guisos { list-style: none; margin: 0; padding: 0; columns: 3 220px; column-gap: 2rem; }
.guisos li { break-inside: avoid; padding: .45rem 0; border-bottom: 1px dashed var(--line); }
.guisos-empty { text-align: center; color: var(--ink-soft); }
.note-strip { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; justify-content: center; margin-top: 2rem; color: var(--ink-soft); font-weight: 700; text-align: center; }

/* ============ v2: movimiento y piezas premium ============ */
:root, [data-estilo="fiesta"] {
  --fx1: #e6197e; --fx2: #ffc23d; --fx3: #1597e5; --fx4: #66b32e;
  --hero-grad: radial-gradient(1200px 500px at 85% -10%, #bfe6ff 0%, transparent 60%), radial-gradient(800px 400px at -10% 110%, #ffe3f1 0%, transparent 60%), #eaf6fe;
  --shine: linear-gradient(100deg, #e6197e 0%, #ff7a3d 40%, #ffc23d 70%, #e6197e 100%);
  --marquee-bg: #0d2547; --marquee-ink: #ffffff;
}
[data-estilo="elegante"] {
  --fx1: #c49a45; --fx2: #e8cf98; --fx3: #d9a3ae; --fx4: #fff3dc;
  --hero-grad: radial-gradient(900px 500px at 90% 0%, #f6dcd6 0%, transparent 60%), radial-gradient(700px 400px at 0% 100%, #f9ece3 0%, transparent 60%), #fbf4f1;
  --shine: linear-gradient(100deg, #9c7326 0%, #e8cf98 35%, #b88a35 60%, #f3e2b8 80%, #9c7326 100%);
  --marquee-bg: #3a1e2c; --marquee-ink: #f3e2b8;
}

.hero { background: var(--hero-grad); isolation: isolate; }
.hero .wrap { position: relative; z-index: 2; }
.fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* Titular con brillo y entrada por palabras */
.shine { background: var(--shine); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: shine 6s linear infinite; }
@keyframes shine { to { background-position: -250% 0; } }
.hero h1 .w { display: inline-block; animation: rise .8s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--i, 0) * 70ms + 150ms); }
@keyframes rise { from { opacity: 0; transform: translateY(.6em) rotate(2deg); } }
.hero-copy > :not(h1) { animation: fadeup .9s ease backwards; animation-delay: .7s; }
@keyframes fadeup { from { opacity: 0; transform: translateY(16px); } }

/* Collage con flotado y parallax */
.collage img { animation: bob 7s ease-in-out infinite; }
.collage .p2 { animation-delay: -2.3s; }
.collage .p3 { animation-delay: -4.6s; }
@keyframes bob { 50% { transform: translateY(-10px) rotate(-.6deg); } }
.collage { transition: transform .3s ease-out; }

/* Sello giratorio */
.seal { position: absolute; right: -14px; top: -18px; width: 118px; height: 118px; z-index: 3; display: grid; place-items: center; }
.seal svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.seal text { font: 800 11.5px var(--f-body); letter-spacing: .22em; text-transform: uppercase; fill: var(--ink); }
.seal b { position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: var(--primary); color: var(--primary-ink); font: 800 1.15rem/1 var(--f-display); text-align: center; box-shadow: var(--shadow); }
.seal b small { display: block; font-size: .62rem; font-family: var(--f-body); letter-spacing: .08em; }
[data-estilo="elegante"] .seal b { background: var(--accent); color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 860px) { .seal { right: 4px; top: -34px; width: 100px; height: 100px; } }

/* Globos decorativos (solo fiesta) */
.balloons { display: var(--wave); position: absolute; z-index: 1; pointer-events: none; }
.balloons.left { left: 1.5%; top: 16%; width: 64px; }
.balloons.right { right: 2%; bottom: 18%; width: 52px; }
.balloons svg { width: 100%; height: auto; animation: float 9s ease-in-out infinite; transform-origin: 50% 100%; }
.balloons.right svg { animation-delay: -3s; }
@keyframes float { 50% { transform: translateY(-22px) rotate(4deg); } }
@media (max-width: 1100px) { .balloons { display: none; } }

/* Marquesina */
.marquee { background: var(--marquee-bg); color: var(--marquee-ink); overflow: hidden; padding-block: 1rem; position: relative; z-index: 3; }
[data-estilo="fiesta"] .marquee { transform: rotate(-1.2deg) scale(1.03); margin-top: -10px; }
.marquee-track { display: flex; width: max-content; animation: slide 38s linear infinite; }
.marquee-track span { font: var(--display-weight) clamp(1.2rem, 2.4vw, 1.75rem)/1.1 var(--f-display); white-space: nowrap; padding-inline: 1.1rem; display: inline-flex; align-items: center; gap: 2.2rem; }
.marquee-track span::after { content: "\2726"; color: var(--accent); font-size: .8em; }
[data-estilo="elegante"] .marquee-track span { font-style: italic; font-weight: 500; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
body, main { overflow-x: clip; }

/* Números */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; text-align: center; }
.stat b { display: block; font: var(--display-weight) clamp(2.6rem, 5vw, 3.8rem)/1 var(--f-display); color: var(--primary); font-variant-numeric: tabular-nums; }
[data-estilo="elegante"] .stat b { color: var(--accent); }
.stat span { color: var(--ink-soft); font-weight: 700; }
@media (max-width: 700px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.6rem; } }

/* Aparición al hacer scroll: solo para lo que está abajo del pliegue al cargar */
.reveal { opacity: 0; transform: translateY(34px) scale(.985); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }

/* Filtros */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: -1rem 0 2rem; }
.filters button { border: 2px solid var(--line); background: var(--card); color: var(--ink); border-radius: var(--r-btn); padding: .55rem 1.15rem; font: 700 .95rem var(--f-body); cursor: pointer; transition: all .2s; }
.filters button:hover { border-color: var(--primary); }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pack.is-hidden { display: none; }

/* Tarjetas: elevación, zoom y borde animado */
.pack { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, opacity .8s ease; position: relative; }
.pack:hover { transform: translateY(-8px); box-shadow: 0 30px 50px -28px rgba(13,37,71,.55); }
.pack-media img { transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.pack:hover .pack-media img { transform: scale(1.07); }
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.pack.featured { border: 0; padding: 3px; background: conic-gradient(from var(--ang), var(--fx1), var(--fx2), var(--fx3), var(--fx4), var(--fx1)); animation: rot 6s linear infinite; }
.pack.featured > .pack-media { border-radius: calc(var(--r-card) - 3px) calc(var(--r-card) - 3px) 0 0; }
.pack.featured > .pack-body { background: var(--card); border-radius: 0 0 calc(var(--r-card) - 3px) calc(var(--r-card) - 3px); }
[data-estilo="elegante"] .pack.featured { outline: 0; padding: 2px; }
@keyframes rot { to { --ang: 360deg; } }
.sticker { position: absolute; z-index: 3; right: 12px; bottom: 10px; width: 76px; height: 76px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; align-content: center; text-align: center; font: 800 .66rem/1.05 var(--f-body); text-transform: uppercase; transform: rotate(-12deg); box-shadow: var(--shadow); transition: transform .4s; }
.sticker b { display: block; font: 800 1.05rem/1 var(--f-display); }
.pack:hover .sticker { transform: rotate(6deg) scale(1.08); }
[data-estilo="elegante"] .sticker { background: var(--card); border: 1px solid var(--accent); color: var(--ink); }

/* Servicios */
.svc { transition: transform .3s, background .3s; }
.svc:hover { transform: translateY(-6px); background: color-mix(in srgb, var(--band-ink) 16%, transparent); }
.svc-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.svc-ico svg { width: 28px; height: 28px; }
[data-estilo="elegante"] .svc-ico { background: transparent; border: 1px solid var(--accent); color: var(--accent); border-radius: 50%; }

/* Cotizador */
.builder { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2rem; align-items: start; }
.b-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(1.2rem, 3vw, 2rem); box-shadow: var(--shadow); display: grid; gap: 1.3rem; min-width: 0; }
.b-field { display: grid; gap: .5rem; min-width: 0; border: 0; margin: 0; padding: 0; }
.b-field > label, .b-field > legend { font-weight: 800; font-size: .95rem; padding: 0; margin-bottom: .5rem; }
.b-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .b-row { grid-template-columns: 1fr; } }
.b-form input[type="date"], .b-form input[type="text"], .b-form select { width: 100%; padding: .8rem .9rem; border-radius: calc(var(--r-card) * .45); border: 2px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; }
.b-form input:focus, .b-form select:focus { outline: none; border-color: var(--primary); }
.pills { display: flex; flex-wrap: wrap; gap: .45rem; }
.pills label { position: relative; cursor: pointer; }
.pills input { position: absolute; opacity: 0; pointer-events: none; }
.pills span { display: inline-block; padding: .5rem .9rem; border-radius: var(--r-btn); border: 2px solid var(--line); font-weight: 700; font-size: .92rem; transition: all .18s; user-select: none; }
.pills input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); transform: scale(1.04); }
.pills input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.range-row { display: flex; align-items: center; gap: 1rem; }
.range-row input { flex: 1; accent-color: var(--primary); min-width: 0; }
.range-row output { font: var(--display-weight) 1.8rem/1 var(--f-display); color: var(--primary); min-width: 3.2ch; text-align: right; font-variant-numeric: tabular-nums; }
.chat { position: sticky; top: 100px; background-color: #efe7de; background-image: radial-gradient(rgba(0,0,0,.05) 1px, transparent 1px); background-size: 14px 14px; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); min-width: 0; }
.chat-head { background: #075e54; color: #ffffff; display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; }
.chat-head img { width: 40px; height: 40px; border-radius: 50%; background: #ffffff; object-fit: contain; padding: 3px; }
.chat-head small { display: block; opacity: .8; font-size: .78rem; }
.chat-body { padding: 1.2rem 1rem 1rem; display: grid; gap: .6rem; min-height: 280px; align-content: end; }
.bubble { justify-self: end; max-width: 92%; background: #d9fdd3; color: #111b21; padding: .7rem .85rem .5rem; border-radius: 12px 12px 2px 12px; font-size: .93rem; line-height: 1.45; white-space: pre-wrap; box-shadow: 0 1px 1px rgba(0,0,0,.12); overflow-wrap: anywhere; }
.bubble.bump { animation: pop .3s ease; }
.bubble.in-msg { justify-self: start; background: #ffffff; border-radius: 12px 12px 12px 2px; }
.bubble time { display: block; text-align: right; font-size: .7rem; color: #667781; margin-top: .2rem; }
@keyframes pop { from { transform: scale(.97); } }
.chat-foot { padding: 0 1rem 1rem; }
.chat-foot .btn { width: 100%; }
@media (max-width: 900px) { .builder { grid-template-columns: 1fr; } .chat { position: static; } }

/* Pasos */
.step { position: relative; transition: transform .3s; }
.step:hover { transform: translateY(-4px); }

/* Galería en movimiento */
.rail { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rail + .rail { margin-top: 14px; }
.rail-track { display: flex; gap: 14px; width: max-content; animation: slide 55s linear infinite; }
.rail.rev .rail-track { animation-direction: reverse; animation-duration: 62s; }
.rail:hover .rail-track { animation-play-state: paused; }
.rail img { height: clamp(170px, 22vw, 260px); width: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--r-card) * .7); flex: none; transition: transform .4s; }
.rail img:hover { transform: scale(1.04) rotate(-1deg); }
[data-estilo="elegante"] .rail img { border-radius: 999px 999px 6px 6px; aspect-ratio: 3 / 4; }

/* Llamado final */
.cta-box { position: relative; overflow: hidden; isolation: isolate; }
.cta-box::before { content: ""; position: absolute; inset: -60%; z-index: -1; background: conic-gradient(from 0deg, transparent 0 70%, color-mix(in srgb, var(--accent) 45%, transparent) 80%, transparent 90%); animation: spin 14s linear infinite; }
.cta-box::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(500px 300px at 100% 0, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); }
.pulse, .wa-float { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wa) 55%, transparent); } 50% { box-shadow: 0 0 0 14px transparent; } }

/* FAQ */
.faq details { transition: box-shadow .3s, border-color .3s; }
.faq details[open] { border-color: var(--primary); box-shadow: var(--shadow); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 700 1.6rem/1 var(--f-display); color: var(--primary); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] p { animation: fadeup .4s ease; }

/* Selector de guisados */
.guisos li { padding: 0; border: 0; }
.guisos button { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .55rem .2rem; border: 0; border-bottom: 1px dashed color-mix(in srgb, var(--band-ink) 30%, transparent); background: transparent; color: inherit; font: inherit; cursor: pointer; transition: color .2s, padding .2s; }
.guisos button::after { content: "+"; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; flex: none; border: 1.5px solid currentColor; font-weight: 800; line-height: 1; opacity: .7; transition: all .2s; }
.guisos button:hover { padding-left: .5rem; }
.guisos button[aria-pressed="true"] { font-weight: 800; color: var(--accent); }
[data-estilo="elegante"] .guisos button[aria-pressed="true"] { color: var(--primary); }
.guisos button[aria-pressed="true"]::after { content: "\2713"; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); opacity: 1; }
.guisos button:disabled { opacity: .45; cursor: not-allowed; }
.pick-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .8rem 1.2rem; margin-top: 1.6rem; }
.pick-count { font-weight: 800; }
.pick-count b { color: var(--accent); font-size: 1.3rem; }
[data-estilo="elegante"] .pick-count b { color: var(--primary); }
.band .menu-tabs button { background: transparent; color: var(--band-ink); border-color: color-mix(in srgb, var(--band-ink) 35%, transparent); }
.band .menu-tabs button[aria-selected="true"] { background: var(--band-ink); color: var(--band); border-color: var(--band-ink); }
.band .menu-search input { background: color-mix(in srgb, var(--band-ink) 10%, transparent); color: var(--band-ink); border-color: color-mix(in srgb, var(--band-ink) 35%, transparent); }
.band .menu-search input::placeholder { color: color-mix(in srgb, var(--band-ink) 70%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .marquee-track, .rail-track { animation: none; }
}

/* ============ Estilo 3: Kermés mexicana (papel picado y lotería) ============ */
.papel { display: none; }
[data-estilo="kermes"] {
  --bg: #fff6e6;
  --bg-soft: #ffeccc;
  --band: #1d3a8a;
  --band-ink: #fff6e6;
  --ink: #2a1a12;
  --ink-soft: #6b4a36;
  --primary: #e4007c;
  --primary-ink: #ffffff;
  --accent: #ffb800;
  --accent-ink: #2a1a12;
  --green: #00a651;
  --line: #f0d9b3;
  --card: #fffbf3;
  --footer: #2a1a12;
  --footer-ink: #ffe9c7;
  --wa: #1fae5b;
  --fx1: #e4007c; --fx2: #ffb800; --fx3: #00a651; --fx4: #1d8fe0;
  --hero-grad: radial-gradient(900px 420px at 85% 10%, #ffd9ec 0%, transparent 60%), radial-gradient(700px 380px at 0% 100%, #fff0b3 0%, transparent 60%), #fff6e6;
  --shine: linear-gradient(100deg, #e4007c 0%, #ff6a00 35%, #ffb800 60%, #00a651 85%, #e4007c 100%);
  --marquee-bg: #e4007c; --marquee-ink: #fff6e6;

  --f-display: "Alfa Slab One", "Rockwell", Georgia, serif;
  --f-body: "Rubik", "Segoe UI", system-ui, sans-serif;
  --f-script: "Alfa Slab One", Georgia, serif;
  --display-weight: 400;
  --script-size: .95rem;
  --script-transform: uppercase;
  --script-spacing: .12em;
  --r-card: 12px;
  --r-btn: 10px;
  --photo-1: 12px; --photo-2: 12px; --photo-3: 12px;
  --shadow: 6px 6px 0 rgba(42, 26, 18, .9);
  --wave: none;
  --ornament: none;
}
[data-estilo="kermes"] .papel { display: block; position: relative; z-index: 3; height: 64px; overflow: hidden; pointer-events: none; }
[data-estilo="kermes"] .papel svg { display: block; width: 100%; height: 100%; }
[data-estilo="kermes"] .papel .flag { transform-box: fill-box; transform-origin: 50% 0; animation: mecer 3.2s ease-in-out infinite; }
@keyframes mecer { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
[data-estilo="kermes"] .hero > .papel { position: absolute; top: 0; left: 0; right: 0; }
[data-estilo="kermes"] .hero .wrap { padding-top: clamp(4.5rem, 8vw, 6.5rem); }
[data-estilo="kermes"] .band > .papel { position: absolute; top: 0; left: 0; right: 0; }
[data-estilo="kermes"] .band > .wrap { padding-top: 2.5rem; }
[data-estilo="kermes"] .eyebrow { color: var(--primary); font-weight: 400; }
[data-estilo="kermes"] .band .eyebrow { color: var(--accent); }
[data-estilo="kermes"] h1, [data-estilo="kermes"] h2 { letter-spacing: .01em; }
[data-estilo="kermes"] .btn { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font-weight: 700; }
[data-estilo="kermes"] .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
[data-estilo="kermes"] .collage img { border: 6px solid #ffffff; outline: 2px solid var(--ink); }
[data-estilo="kermes"] .collage .p2 { transform: rotate(-2deg); }
[data-estilo="kermes"] .collage .p3 { transform: rotate(2deg); }
[data-estilo="kermes"] .badge-float, [data-estilo="kermes"] .chip { border: 2px solid var(--ink); border-radius: 8px; }
/* Tarjetas como cartas de lotería */
[data-estilo="kermes"] .packs { counter-reset: carta; }
[data-estilo="kermes"] .pack { counter-increment: carta; border: 3px solid var(--ink); padding: 10px; background: var(--card); }
[data-estilo="kermes"] .pack-media { border: 2px solid var(--ink); border-radius: 6px; }
[data-estilo="kermes"] .pack-media::before { content: "N.º " counter(carta); position: absolute; z-index: 2; left: 8px; bottom: 8px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); font: 400 .85rem/1 var(--f-display); padding: .35rem .5rem; border-radius: 4px; }
[data-estilo="kermes"] .pack-top h3 { text-transform: uppercase; letter-spacing: .03em; }
[data-estilo="kermes"] .pack:hover { transform: rotate(-1.2deg) translateY(-8px); box-shadow: 10px 10px 0 var(--ink); }
[data-estilo="kermes"] .pack.featured { padding: 10px; background: var(--accent); animation: none; border: 3px solid var(--ink); }
[data-estilo="kermes"] .pack.featured > .pack-body { background: var(--card); border-radius: 0 0 6px 6px; }
[data-estilo="kermes"] .tag { border-radius: 4px; border: 2px solid var(--ink); }
[data-estilo="kermes"] .sticker { border: 2px solid var(--ink); }
/* Precio como boleto */
[data-estilo="kermes"] .price .now { background: var(--accent); color: var(--ink); padding: .35rem .8rem .25rem; border: 2px dashed var(--ink); border-radius: 6px; font-size: 1.9rem; -webkit-mask: radial-gradient(circle 7px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 7px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; }
[data-estilo="kermes"] .incl li::before { border-radius: 2px; transform: rotate(45deg); width: .55rem; height: .55rem; background: var(--primary); margin-top: .5rem; }
[data-estilo="kermes"] .fact, [data-estilo="kermes"] .step, [data-estilo="kermes"] .b-form, [data-estilo="kermes"] .faq details { border: 2px solid var(--ink); }
[data-estilo="kermes"] .fact .ico { background: var(--accent); color: var(--ink); border: 2px solid var(--ink); }
[data-estilo="kermes"] .svc-ico { border: 2px solid var(--band-ink); }
[data-estilo="kermes"] .marquee { border-block: 3px solid var(--ink); }
[data-estilo="kermes"] .rail img { border: 5px solid #ffffff; outline: 2px solid var(--ink); border-radius: 8px; }
[data-estilo="kermes"] .cta-box { border: 3px solid var(--ink); }
[data-estilo="kermes"] .filters button[aria-pressed="true"] { background: var(--primary); border-color: var(--ink); color: #ffffff; }

/* ============ Estilo 4: Noche neón ============ */
[data-estilo="neon"] {
  --bg: #0b0614;
  --bg-soft: #130a24;
  --band: #120826;
  --band-ink: #f4ecff;
  --ink: #f4ecff;
  --ink-soft: #b9a8d6;
  --primary: #ff2bd6;
  --primary-ink: #14031a;
  --accent: #22e1ff;
  --accent-ink: #04131a;
  --green: #39ff88;
  --line: #2c1b4a;
  --card: #140b26;
  --footer: #06030c;
  --footer-ink: #cdbdf0;
  --wa: #25d366;
  --fx1: #ff2bd6; --fx2: #22e1ff; --fx3: #39ff88; --fx4: #fff36b;
  --hero-grad: radial-gradient(700px 380px at 80% 10%, rgba(255, 43, 214, .35) 0%, transparent 60%), radial-gradient(700px 380px at 5% 90%, rgba(34, 225, 255, .25) 0%, transparent 60%), #0b0614;
  --shine: linear-gradient(100deg, #ff2bd6 0%, #22e1ff 40%, #39ff88 70%, #ff2bd6 100%);
  --marquee-bg: #000000; --marquee-ink: #f4ecff;

  --f-display: "Righteous", "Arial Black", system-ui, sans-serif;
  --f-body: "Outfit", "Segoe UI", system-ui, sans-serif;
  --f-script: "Righteous", system-ui, sans-serif;
  --display-weight: 400;
  --script-size: 1rem;
  --script-transform: uppercase;
  --script-spacing: .2em;
  --r-card: 18px;
  --r-btn: 999px;
  --photo-1: 18px; --photo-2: 50%; --photo-3: 50%;
  --shadow: 0 0 0 1px rgba(255, 43, 214, .25), 0 18px 40px -20px rgba(255, 43, 214, .5);
  --wave: none;
  --ornament: none;
  color-scheme: dark;
}
[data-estilo="neon"] .topbar { background: #000000; color: var(--ink-soft); }
[data-estilo="neon"] .logo img, [data-estilo="neon"] .chat-head img { background: #ffffff; border-radius: 12px; padding: 3px 8px; }
[data-estilo="neon"] .hero::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 45%; z-index: 0; pointer-events: none; background: linear-gradient(rgba(34, 225, 255, .35) 1px, transparent 1px) 0 0 / 100% 38px, linear-gradient(90deg, rgba(255, 43, 214, .3) 1px, transparent 1px) 0 0 / 60px 100%; transform: perspective(500px) rotateX(62deg); transform-origin: bottom; -webkit-mask-image: linear-gradient(transparent, #000 70%); mask-image: linear-gradient(transparent, #000 70%); }
[data-estilo="neon"] h1, [data-estilo="neon"] h2 { text-shadow: 0 0 18px rgba(255, 43, 214, .45); }
[data-estilo="neon"] .eyebrow { color: var(--accent); text-shadow: 0 0 10px var(--accent); animation: parpadeo 5s infinite; }
@keyframes parpadeo { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: .35; } }
[data-estilo="neon"] .shine { filter: drop-shadow(0 0 12px rgba(255, 43, 214, .6)); }
[data-estilo="neon"] .btn-wa { box-shadow: 0 0 22px -4px var(--wa); }
[data-estilo="neon"] .btn-main { box-shadow: 0 0 24px -4px var(--primary); }
[data-estilo="neon"] .btn-ghost { border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 12px -4px var(--accent), 0 0 14px -6px var(--accent); }
[data-estilo="neon"] .collage img { border: 2px solid var(--primary); box-shadow: 0 0 26px -4px var(--primary); }
[data-estilo="neon"] .collage .p2 { border-color: var(--accent); box-shadow: 0 0 26px -4px var(--accent); }
[data-estilo="neon"] .collage .p3 { border-color: var(--green); box-shadow: 0 0 26px -4px var(--green); }
[data-estilo="neon"] .chip, [data-estilo="neon"] .badge-float { background: rgba(20, 11, 38, .8); }
[data-estilo="neon"] .badge-float { color: var(--ink); border: 1px solid var(--accent); box-shadow: 0 0 20px -6px var(--accent); }
[data-estilo="neon"] .seal text { fill: var(--accent); }
[data-estilo="neon"] .pack { border-color: var(--line); }
[data-estilo="neon"] .pack:hover { box-shadow: 0 0 0 1px var(--primary), 0 0 40px -8px var(--primary); }
[data-estilo="neon"] .pack.featured > .pack-body { background: var(--card); }
[data-estilo="neon"] .price .now { color: var(--accent); text-shadow: 0 0 14px rgba(34, 225, 255, .6); }
[data-estilo="neon"] .incl li::before { box-shadow: 0 0 8px var(--green); }
[data-estilo="neon"] .fact .ico, [data-estilo="neon"] .svc-ico { background: transparent; border: 1px solid var(--accent); color: var(--accent); box-shadow: 0 0 14px -4px var(--accent); }
[data-estilo="neon"] .stat b { text-shadow: 0 0 20px rgba(255, 43, 214, .55); }
[data-estilo="neon"] .marquee-track span { text-shadow: 0 0 12px rgba(255, 43, 214, .8); }
[data-estilo="neon"] .rail img { border: 1px solid var(--line); }
[data-estilo="neon"] .rail img:hover { box-shadow: 0 0 30px -6px var(--accent); }
[data-estilo="neon"] .filters button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); box-shadow: 0 0 18px -4px var(--primary); }
[data-estilo="neon"] .b-form input[type="date"] { color-scheme: dark; }
[data-estilo="neon"] .footer .logo-foot { box-shadow: 0 0 20px -6px var(--primary); }

/* Selector de 4 estilos en celular */
@media (max-width: 520px) {
  .style-switch { padding: .25rem; gap: .1rem; right: calc(90px + env(safe-area-inset-right, 0px)); }
  .style-switch button { padding: .5rem .55rem; font-size: .78rem; }
}

/* ============ Catálogo de personajes ============ */
.pj-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .pj-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 620px) { .pj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pj { position: relative; margin: 0; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 3 / 4; background: var(--bg-soft); box-shadow: var(--shadow); isolation: isolate; }
.pj img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.pj:hover img { transform: scale(1.08); }
.pj figcaption { position: absolute; inset: auto 0 0 0; padding: 2.2rem .8rem .8rem; background: linear-gradient(transparent, rgba(0,0,0,.78)); color: #ffffff; display: grid; gap: .1rem; }
.pj figcaption b { font: var(--display-weight) 1.15rem/1.1 var(--f-display); }
.pj figcaption small { font-size: .78rem; opacity: .85; }
.pj a { position: absolute; inset: 0; z-index: 2; }
.pj a span { position: absolute; top: 10px; right: 10px; background: var(--wa); color: #ffffff; border-radius: 999px; padding: .3rem .65rem; font-size: .75rem; font-weight: 800; opacity: 0; transform: translateY(-6px); transition: all .3s; }
.pj:hover a span, .pj a:focus-visible span { opacity: 1; transform: none; }
@media (hover: none) { .pj a span { opacity: 1; transform: none; } }
.pj-more { display: grid; place-items: center; text-align: center; padding: 1rem; background: var(--primary); color: var(--primary-ink); text-decoration: none; }
.pj-more b { font: var(--display-weight) 1.3rem/1.15 var(--f-display); }
.pj-more small { display: block; margin-top: .4rem; opacity: .9; }
.pj-filters { margin-top: -1rem; }
[data-estilo="elegante"] .pj { border-radius: 999px 999px 6px 6px; }
[data-estilo="kermes"] .pj { border: 3px solid var(--ink); }
[data-estilo="neon"] .pj { border: 1px solid var(--line); }
[data-estilo="neon"] .pj:hover { box-shadow: 0 0 30px -6px var(--primary); border-color: var(--primary); }

/* ============ Zona de cobertura ============ */
.cobertura { display: grid; grid-template-columns: .9fr 1.1fr; gap: 2rem; align-items: start; }
@media (max-width: 860px) { .cobertura { grid-template-columns: 1fr; } }
.cob-check { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: clamp(1.2rem, 3vw, 1.8rem); box-shadow: var(--shadow); display: grid; gap: 1rem; min-width: 0; }
.cob-check label { font-weight: 800; }
.cob-check input { width: 100%; padding: .9rem 1rem; border-radius: var(--r-btn); border: 2px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; }
.cob-check input:focus { outline: none; border-color: var(--primary); }
.cob-result { border-radius: calc(var(--r-card) * .6); padding: 1rem 1.1rem; display: grid; gap: .6rem; background: var(--bg-soft); }
.cob-result b { font: var(--display-weight) 1.25rem/1.2 var(--f-display); }
.cob-result.ok b { color: var(--green); }
.cob-result.extra b { color: var(--primary); }
.cob-result .btn { justify-self: start; }
.cob-lists { display: grid; gap: 1.2rem; min-width: 0; }
.cob-lists h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.cob-lists ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.cob-lists li { padding: .35rem .75rem; border-radius: var(--r-btn); border: 1px solid var(--line); background: var(--card); font-size: .9rem; font-weight: 600; transition: all .2s; }
.cob-lists li.hit { background: var(--green); border-color: var(--green); color: #ffffff; transform: scale(1.06); }
.cob-note { font-size: .88rem; color: var(--ink-soft); }
[data-estilo="kermes"] .cob-check, [data-estilo="kermes"] .cob-lists li { border: 2px solid var(--ink); }
[data-estilo="neon"] .cob-lists li.hit { box-shadow: 0 0 16px -4px var(--green); color: #04130a; }

/* ============ Landings para anuncios: todo apunta a un mensaje de WhatsApp ============
   Celular primero (la mayoría del tráfico de Meta y Google llega por celular).
   Sin menú que distraiga, oferta y precio arriba, botón de WhatsApp siempre a la mano. */
.ad .site-header .wrap { padding-block: .55rem; }
.ad-temporada { background: var(--primary); color: var(--primary-ink); text-align: center; font-weight: 800; font-size: .92rem; }
.ad-temporada .wrap { padding-block: .55rem; }
.ad-temporada[hidden] { display: none; }
.ad-hero { position: relative; background: var(--hero-grad); overflow: hidden; isolation: isolate; }
.ad-hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.2rem; align-items: center; padding-block: clamp(1.6rem, 4vw, 3.5rem) clamp(2rem, 5vw, 4rem); }
.ad-copy { display: grid; gap: 1rem; min-width: 0; }
.ad-copy h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.ad-copy h1 .zona { color: var(--primary); }
[data-estilo="elegante"] .ad-copy h1 .zona { color: var(--accent); font-style: italic; }
.ad-desde { display: inline-flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.ad-desde small { font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }
.ad-desde b { font: var(--display-weight) clamp(1.9rem, 4vw, 2.6rem)/1 var(--f-display); color: var(--primary); font-variant-numeric: tabular-nums; }
.ad-desde span { color: var(--ink-soft); font-weight: 600; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.checks li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .55rem; align-items: start; font-weight: 700; }
.checks li::before { content: "\2713"; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #ffffff; font-size: .85rem; font-weight: 900; }
.btn-xl { font-size: 1.12rem; padding: 1.05rem 1.6rem; }
.ad-ctas { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.ad-ctas small { color: var(--ink-soft); font-weight: 600; width: 100%; }
.ad-photo { position: relative; min-width: 0; }
.ad-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--photo-1); box-shadow: var(--shadow); }
.ad-photo .badge-float { left: 12px; bottom: 12px; }
@media (max-width: 860px) {
  .ad-hero .wrap { grid-template-columns: 1fr; gap: 1.4rem; }
  .ad-photo { order: -1; }
  .ad-photo img { aspect-ratio: 16 / 10; }
}

/* Cotizador rápido (3 datos y listo) */
.quick { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); padding: clamp(1.1rem, 3vw, 1.6rem); display: grid; gap: 1rem; }
.quick h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; align-items: end; }
.quick-grid .b-field label { font-size: .88rem; }
.quick input, .quick select { width: 100%; padding: .8rem .9rem; border-radius: calc(var(--r-card) * .45); border: 2px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; }
.quick input:focus, .quick select:focus { outline: none; border-color: var(--primary); }
.quick .btn { width: 100%; }
@media (max-width: 900px) { .quick-grid { grid-template-columns: 1fr 1fr; } .quick-grid .quick-send { grid-column: 1 / -1; } }
@media (max-width: 460px) { .quick-grid { grid-template-columns: 1fr; } }
[data-estilo="kermes"] .quick { border: 2px solid var(--ink); }

/* Por qué nosotros */
.why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.why div { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.2rem; display: grid; gap: .4rem; }
.why b { font: var(--display-weight) 1.15rem/1.2 var(--f-display); }
.why p { color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 900px) { .why { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .why { grid-template-columns: 1fr; } }
[data-estilo="kermes"] .why div { border: 2px solid var(--ink); }

/* Galería simple en cuadrícula (carga ligera) */
.ad-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ad-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--r-card) * .6); }
@media (max-width: 700px) { .ad-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Barra fija abajo en celular: WhatsApp y llamar */
.sticky-bar { display: none; }
@media (max-width: 760px) {
  .ad .wa-float { display: none; }
  .ad .sticky-bar {
    display: grid; grid-template-columns: 1fr auto; gap: .5rem;
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0;
    padding: .6rem max(12px, env(safe-area-inset-right, 0px)) calc(.6rem + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -18px rgba(0,0,0,.4);
  }
  .ad .sticky-bar .btn { padding: .85rem 1rem; }
  .ad .sticky-bar .btn-ghost { padding-inline: 1.1rem; }
  .ad .footer { padding-bottom: 8rem; }
  .ad .style-switch { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); right: auto; }
}

/* Cartas de personaje dentro de la landing de botargas: 4 por fila */
.ad .pj-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 620px) { .ad .pj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Ajustes de las landings: botón del cotizador a todo lo ancho y papel picado sobre la portada */
.quick-grid .quick-send { grid-column: 1 / -1; }
.ad .section-head { margin-bottom: 1.6rem; }
.ad-hero > .papel { position: absolute; top: 0; left: 0; right: 0; }
[data-estilo="kermes"] .ad-hero .wrap { padding-top: calc(64px + 1rem); }
.ad-photo img { height: auto; }
.ad .sticky-bar .btn { white-space: nowrap; font-size: .98rem; }
@media (max-width: 860px) {
  .ad-photo .badge-float { font-size: .8rem; padding: .45rem .75rem; max-width: 10rem; }
  .ad-photo .badge-float b { font-size: 1.15rem; }
}

/* Landings v2 (ver sipifiestas/INVESTIGACION-LANDINGS.md): oferta, precio y botón en la primera
   pantalla del celular, textos cortos y el mensaje de WhatsApp a la vista antes de mandarlo. */
.ad-sub { font-size: 1.1rem; color: var(--ink-soft); font-weight: 600; max-width: 46ch; }
.ad-copy h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
.ad-ctas .btn-ghost { padding: .95rem 1.3rem; }
.ad-nota { font-size: .85rem; color: var(--ink-soft); }
.quick-preview {
  grid-column: 1 / -1; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
  background: #d9fdd3; color: #111b21; border-radius: 12px 12px 2px 12px;
  padding: .7rem .9rem; font-size: .92rem; line-height: 1.45; box-shadow: 0 1px 1px rgba(0, 0, 0, .12);
}
.quick-note { grid-column: 1 / -1; font-size: .85rem; color: var(--ink-soft); text-align: center; }
.cta-actions .phone-link { color: inherit; text-decoration: none; }
@media (max-width: 860px) {
  /* La foto se queda arriba pero baja de alto, para que el botón aparezca sin hacer scroll */
  .ad-photo img { aspect-ratio: 2 / 1; }
  .ad-hero .wrap { gap: 1rem; padding-top: 1rem; }
  .ad-copy { gap: .8rem; }
  .ad-sub { font-size: 1rem; }
  .ad-ctas .btn { flex: 1 1 auto; }
  .ad-ctas .btn-ghost { flex: 0 1 auto; }
}
@media (max-width: 400px) {
  .ad-copy h1 { font-size: 1.85rem; }
  .ad-ctas .btn-xl { font-size: 1.02rem; padding: .95rem 1.1rem; }
}

/* ===================================================================================
   Estilos 5 a 15: más opciones para que el cliente elija.
   Cada uno define los mismos tokens que "fiesta" y algunos detalles propios.
   Las fuentes de cada estilo las carga app.js solo cuando se elige.
   Referencias (Dribbble): Tacos Yoyo y ¡Gordo! (taquería), Mozaic y Luxury Catering (gourmet),
   Candy Cloud (dulcería), MOKI (juguete), Font Library neubrutalism (pop), Glow Up Y2K (holograma),
   Badum Music Festival (retro 70s), Retro Food (historieta), Élan Weddings (editorial),
   Kids Foam Party (tropical) y menús de pizarrón de taquería (pizarrón).
   =================================================================================== */

/* Temas oscuros: logo sobre fondo blanco para que se lea */
[data-tema="oscuro"] .logo img, [data-tema="oscuro"] .chat-head img { background: #ffffff; border-radius: 12px; padding: 3px 8px; }
[data-tema="oscuro"] input[type="date"] { color-scheme: dark; }

/* ---------- 5. Taquería: rojo, amarillo y lucha libre ---------- */
[data-estilo="taqueria"] {
  --bg: #fff8ec; --bg-soft: #ffe9c2; --band: #d7191f; --band-ink: #fff8ec;
  --ink: #1b1110; --ink-soft: #5c3b33; --primary: #d7191f; --primary-ink: #fff8ec;
  --accent: #ffc400; --accent-ink: #1b1110; --green: #0f8a45; --line: #f0cfa0;
  --card: #fffdf7; --footer: #1b1110; --footer-ink: #ffe9c2; --wa: #1fae5b;
  --fx1: #d7191f; --fx2: #ffc400; --fx3: #0f8a45; --fx4: #1b1110;
  --hero-grad: radial-gradient(rgba(215, 25, 31, .14) 1.6px, transparent 1.8px) 0 0 / 14px 14px, linear-gradient(160deg, #fff8ec 55%, #ffd34d 55.2%);
  --shine: linear-gradient(100deg, #d7191f 0%, #ff6a00 45%, #d7191f 100%);
  --marquee-bg: #ffc400; --marquee-ink: #1b1110;
  --f-display: "Bungee", "Arial Black", Impact, sans-serif; --f-body: "Archivo", "Segoe UI", system-ui, sans-serif; --f-script: "Bungee", Impact, sans-serif;
  --display-weight: 400; --display-style: normal; --script-size: .9rem; --script-transform: uppercase; --script-spacing: .06em;
  --r-card: 6px; --r-btn: 6px; --photo-1: 6px; --photo-2: 6px; --photo-3: 6px;
  --shadow: 5px 5px 0 #1b1110; --wave: none; --ornament: none; color-scheme: light;
}
[data-estilo="taqueria"] h1 { text-transform: uppercase; line-height: 1.02; letter-spacing: -.01em; }
[data-estilo="taqueria"] h2 { text-transform: uppercase; }
[data-estilo="taqueria"] .topbar { background: var(--primary); color: #fff8ec; }
[data-estilo="taqueria"] .topbar b { color: var(--accent); }
[data-estilo="taqueria"] .btn { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); text-transform: uppercase; letter-spacing: .03em; }
[data-estilo="taqueria"] .btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
[data-estilo="taqueria"] .pack, [data-estilo="taqueria"] .step, [data-estilo="taqueria"] .fact, [data-estilo="taqueria"] .faq details,
[data-estilo="taqueria"] .b-form, [data-estilo="taqueria"] .quick, [data-estilo="taqueria"] .why div, [data-estilo="taqueria"] .cob-check { border: 2px solid var(--ink); }
[data-estilo="taqueria"] .pack.featured { padding: 0; background: var(--card); animation: none; border: 3px solid var(--primary); box-shadow: 6px 6px 0 var(--primary); }
[data-estilo="taqueria"] .collage img, [data-estilo="taqueria"] .ad-photo img { border: 3px solid var(--ink); }
[data-estilo="taqueria"] .collage .p2 { transform: rotate(-3deg); }
[data-estilo="taqueria"] .collage .p3 { transform: rotate(3deg); }
[data-estilo="taqueria"] .price .now { background: var(--accent); color: var(--ink); padding: .2rem .55rem .1rem; transform: rotate(-2deg); box-shadow: 3px 3px 0 var(--ink); }
[data-estilo="taqueria"] .tag, [data-estilo="taqueria"] .badge-float, [data-estilo="taqueria"] .sticker { border: 2px solid var(--ink); }
[data-estilo="taqueria"] .eyebrow { background: var(--ink); color: var(--accent); padding: .35rem .6rem .25rem; justify-self: start; display: inline-block; transform: rotate(-1.5deg); }
[data-estilo="taqueria"] .section-head .eyebrow { justify-self: center; }
[data-estilo="taqueria"] .cta-box { border: 3px solid var(--ink); }
[data-estilo="taqueria"] .marquee { border-block: 3px solid var(--ink); }
[data-estilo="taqueria"] .rail img, [data-estilo="taqueria"] .ad-gallery img, [data-estilo="taqueria"] .pj { border: 3px solid var(--ink); }
[data-estilo="taqueria"] .incl li::before { border-radius: 0; background: var(--primary); }

/* ---------- 6. Gourmet: negro, dorado y serif fina (catering de lujo) ---------- */
[data-estilo="gourmet"] {
  --bg: #121110; --bg-soft: #1b1a18; --band: #1e1c19; --band-ink: #efe6d6;
  --ink: #efe6d6; --ink-soft: #b3a892; --primary: #c9a46a; --primary-ink: #121110;
  --accent: #c9a46a; --accent-ink: #121110; --green: #a8b386; --line: #34302a;
  --card: #1a1917; --footer: #0b0a09; --footer-ink: #b3a892; --wa: #25a35a;
  --fx1: #c9a46a; --fx2: #f3dfb4; --fx3: #8c6b3a; --fx4: #fff3dc;
  --hero-grad: radial-gradient(900px 480px at 85% 0%, rgba(201, 164, 106, .16) 0%, transparent 60%), #121110;
  --shine: linear-gradient(100deg, #9c7326 0%, #f3dfb4 35%, #c9a46a 60%, #fff3dc 80%, #9c7326 100%);
  --marquee-bg: #0b0a09; --marquee-ink: #c9a46a;
  --f-display: "Cormorant Garamond", Georgia, serif; --f-body: "Manrope", "Segoe UI", system-ui, sans-serif; --f-script: "Manrope", system-ui, sans-serif;
  --display-weight: 500; --display-style: normal; --script-size: .78rem; --script-transform: uppercase; --script-spacing: .32em;
  --r-card: 2px; --r-btn: 2px; --photo-1: 2px; --photo-2: 2px; --photo-3: 2px;
  --shadow: 0 30px 60px -40px rgba(0, 0, 0, .9); --wave: none; --ornament: block; color-scheme: dark;
}
[data-estilo="gourmet"] h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 500; letter-spacing: -.01em; }
[data-estilo="gourmet"] .eyebrow { color: var(--accent); }
[data-estilo="gourmet"] .topbar { background: #0b0a09; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
[data-estilo="gourmet"] .btn { text-transform: uppercase; letter-spacing: .14em; font-size: .85rem; font-weight: 700; }
[data-estilo="gourmet"] .btn-xl { font-size: .95rem; }
[data-estilo="gourmet"] .btn-ghost { color: var(--accent); }
[data-estilo="gourmet"] .pack.featured { padding: 1px; background: linear-gradient(var(--accent), transparent 60%); animation: none; }
[data-estilo="gourmet"] .price .now { color: var(--accent); font-style: italic; }
[data-estilo="gourmet"] .incl li::before { border-radius: 0; width: .9rem; height: 1px; margin-top: .8rem; background: var(--accent); }
[data-estilo="gourmet"] .tag, [data-estilo="gourmet"] .badge-float, [data-estilo="gourmet"] .sticker { background: #121110; color: var(--accent); border: 1px solid var(--accent); border-radius: 2px; }
[data-estilo="gourmet"] .collage img, [data-estilo="gourmet"] .ad-photo img { filter: saturate(.9) contrast(1.05); }
[data-estilo="gourmet"] .step::before, [data-estilo="gourmet"] .stat b { color: var(--accent); font-style: italic; }
[data-estilo="gourmet"] .cta-box { background: #1e1c19; color: var(--ink); border: 1px solid var(--accent); }
[data-estilo="gourmet"] .marquee-track span { font-style: italic; }
[data-estilo="gourmet"] .ad-desde b, [data-estilo="gourmet"] .ad-copy h1 .zona { color: var(--accent); font-style: italic; }
[data-estilo="gourmet"] .checks li::before { background: transparent; border: 1px solid var(--accent); color: var(--accent); }

/* ---------- 7. Dulcería: rosa pastel, rayas de caramelo y orillas onduladas ---------- */
[data-estilo="dulceria"] {
  --bg: #fff7f9; --bg-soft: #ffe8ef; --band: #ff8fb1; --band-ink: #4a1630;
  --ink: #4a1630; --ink-soft: #8a5470; --primary: #e8457c; --primary-ink: #ffffff;
  --accent: #8fd6c9; --accent-ink: #12403a; --green: #4fb39f; --line: #ffd3e1;
  --card: #ffffff; --footer: #4a1630; --footer-ink: #ffd9e6; --wa: #1fae5b;
  --fx1: #ff8fb1; --fx2: #8fd6c9; --fx3: #ffd36e; --fx4: #c7a6ff;
  --hero-grad: radial-gradient(700px 360px at 85% 10%, #ffd9e6 0%, transparent 60%), radial-gradient(600px 320px at 0% 100%, #d9f3ee 0%, transparent 60%), #fff7f9;
  --shine: linear-gradient(100deg, #e8457c 0%, #ff8fb1 40%, #c7a6ff 70%, #e8457c 100%);
  --marquee-bg: #e8457c; --marquee-ink: #ffffff;
  --f-display: "Fraunces", Georgia, serif; --f-body: "Quicksand", "Segoe UI", system-ui, sans-serif; --f-script: "Fraunces", Georgia, serif;
  --display-weight: 800; --display-style: normal; --script-size: 1.15rem; --script-transform: none; --script-spacing: 0;
  --r-card: 28px; --r-btn: 999px; --photo-1: 40px; --photo-2: 50%; --photo-3: 40px 40px 999px 999px;
  --shadow: 0 16px 30px -18px rgba(232, 69, 124, .55); --wave: block; --ornament: none; color-scheme: light;
}
[data-estilo="dulceria"] .eyebrow { font-style: italic; font-weight: 600; }
[data-estilo="dulceria"] .topbar, [data-estilo="dulceria"] .ad-temporada { background: repeating-linear-gradient(-45deg, #e8457c 0 14px, #f0679a 14px 28px); color: #fff; }
[data-estilo="dulceria"] .topbar b { color: #fff3c4; }
[data-estilo="dulceria"] .marquee { background: repeating-linear-gradient(-45deg, #e8457c 0 18px, #f0679a 18px 36px); }
[data-estilo="dulceria"] .collage img, [data-estilo="dulceria"] .ad-photo img { border: 6px solid #fff; outline: 2px dashed var(--primary); outline-offset: 4px; }
[data-estilo="dulceria"] .pack { border: 2px solid var(--line); }
[data-estilo="dulceria"] .pack-media { -webkit-mask: radial-gradient(14px at 50% 100%, #0000 98%, #000) 50% / 28px 100%; mask: radial-gradient(14px at 50% 100%, #0000 98%, #000) 50% / 28px 100%; }
[data-estilo="dulceria"] .pack.featured { padding: 4px; background: repeating-linear-gradient(-45deg, #e8457c 0 10px, #fff 10px 20px); animation: none; }
[data-estilo="dulceria"] .btn { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .14); }
[data-estilo="dulceria"] .tag { background: #fff; color: var(--primary); border: 2px solid var(--primary); }
[data-estilo="dulceria"] .incl li::before { background: var(--primary); box-shadow: 0 0 0 3px var(--bg-soft); }
[data-estilo="dulceria"] .cta-box { background: repeating-linear-gradient(-45deg, #e8457c 0 26px, #ec5689 26px 52px); }
[data-estilo="dulceria"] .step::before, [data-estilo="dulceria"] .stat b { font-style: italic; }

/* ---------- 8. Juguete: lila, formas infladas y botones en 3D ---------- */
[data-estilo="juguete"] {
  --bg: #f6f2ff; --bg-soft: #ece4ff; --band: #6c4cf5; --band-ink: #ffffff;
  --ink: #241653; --ink-soft: #5e5285; --primary: #6c4cf5; --primary-ink: #ffffff;
  --accent: #ffcd3c; --accent-ink: #3a2a00; --green: #2ec4a0; --line: #dcd2ff;
  --card: #ffffff; --footer: #1d1146; --footer-ink: #d9d0ff; --wa: #1fae5b;
  --fx1: #6c4cf5; --fx2: #ffcd3c; --fx3: #ff6fa8; --fx4: #2ec4a0;
  --hero-grad: radial-gradient(520px 320px at 88% 12%, #ffd8ec 0%, transparent 70%), radial-gradient(600px 380px at 5% 95%, #d6f6ee 0%, transparent 70%), linear-gradient(180deg, #ece4ff, #f6f2ff);
  --shine: linear-gradient(100deg, #6c4cf5 0%, #ff6fa8 45%, #ffcd3c 75%, #6c4cf5 100%);
  --marquee-bg: #6c4cf5; --marquee-ink: #ffffff;
  --f-display: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif; --f-body: "Nunito", "Segoe UI", system-ui, sans-serif; --f-script: "Fredoka", system-ui, sans-serif;
  --display-weight: 700; --display-style: normal; --script-size: 1rem; --script-transform: uppercase; --script-spacing: .1em;
  --r-card: 32px; --r-btn: 20px; --photo-1: 36px; --photo-2: 36px; --photo-3: 50%;
  --shadow: 0 10px 0 -2px #d0c3ff, 0 24px 40px -20px rgba(36, 22, 83, .45); --wave: none; --ornament: none; color-scheme: light;
}
[data-estilo="juguete"] .btn { box-shadow: 0 6px 0 rgba(0, 0, 0, .22); transition: transform .12s, box-shadow .12s; }
[data-estilo="juguete"] .btn:hover { transform: translateY(2px); box-shadow: 0 3px 0 rgba(0, 0, 0, .22); }
[data-estilo="juguete"] .btn:active { transform: translateY(6px); box-shadow: 0 0 0 rgba(0, 0, 0, .22); }
[data-estilo="juguete"] .pack, [data-estilo="juguete"] .step, [data-estilo="juguete"] .why div, [data-estilo="juguete"] .faq details { border: 2px solid var(--line); }
[data-estilo="juguete"] .pack.featured { padding: 0; background: var(--card); animation: none; border: 3px solid var(--primary); box-shadow: 0 10px 0 -2px var(--primary), 0 24px 40px -20px rgba(36, 22, 83, .45); }
[data-estilo="juguete"] .collage img, [data-estilo="juguete"] .ad-photo img { border: 5px solid #fff; }
[data-estilo="juguete"] .tag, [data-estilo="juguete"] .badge-float { box-shadow: 0 5px 0 rgba(0, 0, 0, .18); }
[data-estilo="juguete"] .fact .ico, [data-estilo="juguete"] .svc-ico { background: var(--accent); color: var(--accent-ink); box-shadow: 0 4px 0 rgba(0, 0, 0, .15); }
[data-estilo="juguete"] .step::before { background: var(--accent); color: var(--accent-ink); width: 3rem; height: 3rem; border-radius: 16px; display: grid; place-items: center; font-size: 1.6rem; box-shadow: 0 5px 0 rgba(0, 0, 0, .15); }
[data-estilo="juguete"] .eyebrow { background: #fff; color: var(--primary); padding: .35rem .8rem; border-radius: 999px; display: inline-block; justify-self: start; box-shadow: 0 4px 0 #d0c3ff; }
[data-estilo="juguete"] .section-head .eyebrow { justify-self: center; }
[data-estilo="juguete"] .band .eyebrow { color: var(--primary); }

/* ---------- 9. Pop: neobrutalismo con bloques de color y bordes gruesos ---------- */
[data-estilo="pop"] {
  --bg: #fffdf5; --bg-soft: #fff1b8; --band: #b8a4ff; --band-ink: #111111;
  --ink: #111111; --ink-soft: #3d3d3d; --primary: #ff5c39; --primary-ink: #111111;
  --accent: #ffde4d; --accent-ink: #111111; --green: #22c55e; --line: #111111;
  --card: #ffffff; --footer: #111111; --footer-ink: #f1f1f1; --wa: #22c55e;
  --fx1: #ff5c39; --fx2: #ffde4d; --fx3: #b8a4ff; --fx4: #7ee0c3;
  --hero-grad: linear-gradient(#11111112 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, #11111112 1px, transparent 1px) 0 0 / 32px 32px, #fff1b8;
  --shine: linear-gradient(100deg, #111 0%, #111 100%);
  --marquee-bg: #111111; --marquee-ink: #ffde4d;
  --f-display: "Archivo Black", "Arial Black", system-ui, sans-serif; --f-body: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --f-script: "Space Grotesk", system-ui, sans-serif;
  --display-weight: 400; --display-style: normal; --script-size: .85rem; --script-transform: uppercase; --script-spacing: .12em;
  --r-card: 14px; --r-btn: 12px; --photo-1: 14px; --photo-2: 14px; --photo-3: 999px;
  --shadow: 6px 6px 0 #111111; --wave: none; --ornament: none; color-scheme: light;
}
[data-estilo="pop"] .shine { background: var(--primary); -webkit-background-clip: border-box; background-clip: border-box; color: #111 !important; padding: 0 .2em; border: 3px solid #111; border-radius: 10px; animation: none; box-shadow: 4px 4px 0 #111; }
[data-estilo="pop"] .ad-copy h1 .zona { background: var(--accent); color: #111; padding: 0 .2em; border-radius: 8px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
[data-estilo="pop"] .btn { border: 3px solid #111; box-shadow: 4px 4px 0 #111; }
[data-estilo="pop"] .btn-main { background: var(--accent); }
[data-estilo="pop"] .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #111; }
[data-estilo="pop"] .pack, [data-estilo="pop"] .step, [data-estilo="pop"] .fact, [data-estilo="pop"] .why div, [data-estilo="pop"] .faq details,
[data-estilo="pop"] .b-form, [data-estilo="pop"] .quick, [data-estilo="pop"] .cob-check, [data-estilo="pop"] .cta-box, [data-estilo="pop"] .chat { border: 3px solid #111; }
[data-estilo="pop"] .pack:nth-child(4n+1) .pack-body { background: #fff1b8; }
[data-estilo="pop"] .pack:nth-child(4n+2) .pack-body { background: #e3dbff; }
[data-estilo="pop"] .pack:nth-child(4n+3) .pack-body { background: #c9f5e7; }
[data-estilo="pop"] .pack:nth-child(4n+4) .pack-body { background: #ffd6cc; }
[data-estilo="pop"] .pack.featured { padding: 0; background: var(--card); animation: none; border: 3px solid #111; }
[data-estilo="pop"] .pack-media { border-bottom: 3px solid #111; }
[data-estilo="pop"] .collage img, [data-estilo="pop"] .ad-photo img, [data-estilo="pop"] .ad-gallery img, [data-estilo="pop"] .rail img, [data-estilo="pop"] .pj { border: 3px solid #111; box-shadow: 6px 6px 0 #111; }
[data-estilo="pop"] .tag, [data-estilo="pop"] .badge-float, [data-estilo="pop"] .sticker, [data-estilo="pop"] .chip { border: 2px solid #111; box-shadow: 3px 3px 0 #111; }
[data-estilo="pop"] .price .now { color: #111; }
[data-estilo="pop"] .why div:nth-child(1) { background: #fff1b8; }
[data-estilo="pop"] .why div:nth-child(2) { background: #e3dbff; }
[data-estilo="pop"] .why div:nth-child(3) { background: #c9f5e7; }
[data-estilo="pop"] .why div:nth-child(4) { background: #ffd6cc; }
[data-estilo="pop"] .cta-box .eyebrow { color: #111; }
[data-estilo="pop"] .step::before, [data-estilo="pop"] .stat b { color: var(--primary); -webkit-text-stroke: 2px #111; }
[data-estilo="pop"] .incl li::before { border-radius: 3px; background: var(--primary); outline: 2px solid #111; }
[data-estilo="pop"] .checks li::before { background: var(--accent); color: #111; outline: 2px solid #111; }

/* ---------- 10. Holograma: Y2K, degradados iridiscentes y vidrio ---------- */
[data-estilo="holograma"] {
  --bg: #f7f5ff; --bg-soft: #eee9ff; --band: #20123d; --band-ink: #f3eeff;
  --ink: #1d1636; --ink-soft: #5b5480; --primary: #8a3ffc; --primary-ink: #ffffff;
  --accent: #ff7ad9; --accent-ink: #2a0b25; --green: #19c2a8; --line: #e1d9ff;
  --card: rgba(255, 255, 255, .72); --footer: #160d2b; --footer-ink: #d9cffc; --wa: #1fae5b;
  --fx1: #8a3ffc; --fx2: #ff7ad9; --fx3: #57d5ff; --fx4: #c8ffef;
  --hero-grad: radial-gradient(520px 340px at 15% 20%, #c8b4ff 0%, transparent 70%), radial-gradient(520px 340px at 85% 25%, #ffc1ec 0%, transparent 70%), radial-gradient(600px 380px at 60% 100%, #b9f1ff 0%, transparent 70%), #f7f5ff;
  --shine: linear-gradient(100deg, #8a3ffc 0%, #ff7ad9 30%, #57d5ff 60%, #8a3ffc 100%);
  --marquee-bg: #1d1636; --marquee-ink: #f3eeff;
  --f-display: "Unbounded", "Arial Black", system-ui, sans-serif; --f-body: "Inter", "Segoe UI", system-ui, sans-serif; --f-script: "Unbounded", system-ui, sans-serif;
  --display-weight: 700; --display-style: normal; --script-size: .78rem; --script-transform: uppercase; --script-spacing: .18em;
  --r-card: 24px; --r-btn: 999px; --photo-1: 28px; --photo-2: 50%; --photo-3: 28px;
  --shadow: 0 20px 50px -24px rgba(138, 63, 252, .45); --wave: none; --ornament: none; color-scheme: light;
}
[data-estilo="holograma"] h1 { letter-spacing: -.03em; font-size: clamp(2.1rem, 5vw, 3.7rem); }
[data-estilo="holograma"] h2 { letter-spacing: -.02em; }
[data-estilo="holograma"] .hero, [data-estilo="holograma"] .ad-hero { background-size: 160% 160%; animation: holo 14s ease-in-out infinite alternate; }
@keyframes holo { to { background-position: 100% 100%; } }
[data-estilo="holograma"] .pack, [data-estilo="holograma"] .step, [data-estilo="holograma"] .fact, [data-estilo="holograma"] .why div, [data-estilo="holograma"] .faq details,
[data-estilo="holograma"] .quick, [data-estilo="holograma"] .b-form { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .9); }
[data-estilo="holograma"] .pack.featured { padding: 2px; background: conic-gradient(from var(--ang), #8a3ffc, #ff7ad9, #57d5ff, #c8ffef, #8a3ffc); }
[data-estilo="holograma"] .pack.featured > .pack-body { background: #fbfaff; }
[data-estilo="holograma"] .collage img, [data-estilo="holograma"] .ad-photo img { border: 3px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(120deg, #8a3ffc, #ff7ad9, #57d5ff) border-box; }
[data-estilo="holograma"] .btn-main, [data-estilo="holograma"] .cta-box { background: linear-gradient(120deg, #8a3ffc, #ff7ad9 55%, #57d5ff); }
[data-estilo="holograma"] .cta-box .eyebrow { color: #fff; }
[data-estilo="holograma"] .tag, [data-estilo="holograma"] .badge-float { background: linear-gradient(120deg, #c8ffef, #ffc1ec 50%, #c8b4ff); color: var(--ink); }
[data-estilo="holograma"] .price .now, [data-estilo="holograma"] .ad-desde b, [data-estilo="holograma"] .step::before, [data-estilo="holograma"] .stat b { background: var(--shine); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-estilo="holograma"] .eyebrow { color: var(--primary); }
[data-estilo="holograma"] .topbar { background: linear-gradient(90deg, #8a3ffc, #ff7ad9, #57d5ff); color: #fff; }
[data-estilo="holograma"] .topbar b { color: #fff; }

/* ---------- 11. Retro 70s: naranja, mostaza y verde olivo con rayos de sol ---------- */
[data-estilo="retro"] {
  --bg: #fbf1dc; --bg-soft: #f5e2bb; --band: #4b5d2e; --band-ink: #fbf1dc;
  --ink: #3b2414; --ink-soft: #74543a; --primary: #e0602a; --primary-ink: #fff6e3;
  --accent: #f2b33d; --accent-ink: #3b2414; --green: #6d8b3a; --line: #ead2a5;
  --card: #fff8ea; --footer: #3b2414; --footer-ink: #f5e2bb; --wa: #2e9e57;
  --fx1: #e0602a; --fx2: #f2b33d; --fx3: #6d8b3a; --fx4: #b8452a;
  --hero-grad: repeating-conic-gradient(from -8deg at 50% 118%, rgba(242, 179, 61, .26) 0 6deg, transparent 6deg 12deg), #fbf1dc;
  --shine: linear-gradient(100deg, #b8452a 0%, #e0602a 35%, #f2b33d 65%, #b8452a 100%);
  --marquee-bg: #e0602a; --marquee-ink: #fff6e3;
  --f-display: "Shrikhand", "Cooper Black", Georgia, serif; --f-body: "Work Sans", "Segoe UI", system-ui, sans-serif; --f-script: "Shrikhand", Georgia, serif;
  --display-weight: 400; --display-style: normal; --script-size: 1.15rem; --script-transform: none; --script-spacing: 0;
  --r-card: 22px; --r-btn: 999px; --photo-1: 999px 999px 22px 22px; --photo-2: 50%; --photo-3: 50%;
  --shadow: 0 6px 0 #e9c98d; --wave: block; --ornament: none; color-scheme: light;
}
[data-estilo="retro"] h1, [data-estilo="retro"] h2 { color: var(--primary); text-shadow: 3px 3px 0 #f2b33d; }
[data-estilo="retro"] .eyebrow { color: var(--green); }
[data-estilo="retro"] .topbar { background: linear-gradient(#b8452a 0 33%, #e0602a 33% 66%, #f2b33d 66%); color: #fff6e3; }
[data-estilo="retro"] .topbar b { color: #fff6e3; text-decoration: underline; }
[data-estilo="retro"] .marquee { box-shadow: 0 6px 0 #f2b33d, 0 12px 0 #6d8b3a; margin-bottom: 12px; }
[data-estilo="retro"] .btn { border: 2px solid var(--ink); }
[data-estilo="retro"] .btn-ghost { border-color: var(--primary); color: var(--primary); }
[data-estilo="retro"] .pack, [data-estilo="retro"] .step, [data-estilo="retro"] .why div, [data-estilo="retro"] .faq details { border: 2px solid var(--line); }
[data-estilo="retro"] .pack.featured { padding: 0; background: var(--card); animation: none; border: 3px solid var(--primary); box-shadow: 0 6px 0 var(--accent), 0 12px 0 var(--green); }
[data-estilo="retro"] .collage img, [data-estilo="retro"] .ad-photo img { border: 6px solid var(--accent); }
[data-estilo="retro"] .collage .p2 { border-color: var(--primary); }
[data-estilo="retro"] .collage .p3 { border-color: var(--green); }
[data-estilo="retro"] .cta-box { background: var(--green); color: #fbf1dc; }
[data-estilo="retro"] .cta-box h2 { color: #fbf1dc; text-shadow: 3px 3px 0 #2f3b1c; }
[data-estilo="retro"] .tag { background: var(--green); color: #fff6e3; }
[data-estilo="retro"] .band h2 { color: var(--accent); text-shadow: 3px 3px 0 #2f3b1c; }

/* ---------- 12. Historieta: tinta negra, puntos de imprenta y globos de diálogo ---------- */
[data-estilo="historieta"] {
  --bg: #fffbea; --bg-soft: #fff3c2; --band: #1a1a1a; --band-ink: #fffbea;
  --ink: #1a1a1a; --ink-soft: #464646; --primary: #e63946; --primary-ink: #ffffff;
  --accent: #ffd60a; --accent-ink: #1a1a1a; --green: #2a9d8f; --line: #1a1a1a;
  --card: #ffffff; --footer: #1a1a1a; --footer-ink: #fff3c2; --wa: #1fae5b;
  --fx1: #e63946; --fx2: #ffd60a; --fx3: #1d7bd6; --fx4: #1a1a1a;
  --hero-grad: radial-gradient(circle at 70% 40%, #fff3c2 0 30%, transparent 60%), radial-gradient(#1a1a1a33 1.1px, transparent 1.4px) 0 0 / 9px 9px, #fff3c2;
  --shine: linear-gradient(100deg, #e63946 0%, #e63946 100%);
  --marquee-bg: #e63946; --marquee-ink: #ffffff;
  --f-display: "Bangers", Impact, "Arial Black", sans-serif; --f-body: "Lexend", "Segoe UI", system-ui, sans-serif; --f-script: "Bangers", Impact, sans-serif;
  --display-weight: 400; --display-style: normal; --script-size: 1.25rem; --script-transform: uppercase; --script-spacing: .06em;
  --r-card: 4px; --r-btn: 6px; --photo-1: 4px; --photo-2: 4px; --photo-3: 4px;
  --shadow: 5px 5px 0 #1a1a1a; --wave: none; --ornament: none; color-scheme: light;
}
[data-estilo="historieta"] h1, [data-estilo="historieta"] h2 { letter-spacing: .03em; }
[data-estilo="historieta"] h1 { font-size: clamp(2.6rem, 6.4vw, 4.6rem); text-shadow: 3px 3px 0 var(--accent), 5px 5px 0 #1a1a1a; }
[data-estilo="historieta"] .eyebrow { position: relative; display: inline-block; justify-self: start; background: #fff; border: 3px solid #1a1a1a; border-radius: 18px; padding: .3rem .9rem; color: #1a1a1a; }
[data-estilo="historieta"] .eyebrow::after { content: ""; position: absolute; left: 22px; bottom: -11px; width: 14px; height: 14px; background: #fff; border-right: 3px solid #1a1a1a; border-bottom: 3px solid #1a1a1a; transform: skewX(-25deg) rotate(45deg); }
[data-estilo="historieta"] .section-head .eyebrow { justify-self: center; }
[data-estilo="historieta"] .btn { border: 3px solid #1a1a1a; box-shadow: 4px 4px 0 #1a1a1a; text-transform: uppercase; }
[data-estilo="historieta"] .pack, [data-estilo="historieta"] .step, [data-estilo="historieta"] .fact, [data-estilo="historieta"] .why div, [data-estilo="historieta"] .faq details,
[data-estilo="historieta"] .b-form, [data-estilo="historieta"] .quick, [data-estilo="historieta"] .cob-check, [data-estilo="historieta"] .cta-box { border: 3px solid #1a1a1a; }
[data-estilo="historieta"] .pack.featured { padding: 0; background: var(--card); animation: none; border: 3px solid #1a1a1a; box-shadow: 8px 8px 0 var(--primary); }
[data-estilo="historieta"] .pack-media { border-bottom: 3px solid #1a1a1a; }
[data-estilo="historieta"] .collage img, [data-estilo="historieta"] .ad-photo img, [data-estilo="historieta"] .ad-gallery img, [data-estilo="historieta"] .rail img, [data-estilo="historieta"] .pj { border: 4px solid #1a1a1a; }
[data-estilo="historieta"] .collage .p2 { transform: rotate(-2deg); }
[data-estilo="historieta"] .collage .p3 { transform: rotate(2.5deg); }
[data-estilo="historieta"] .badge-float { background: var(--accent); color: #1a1a1a; border: 3px solid #1a1a1a; border-radius: 4px; transform: rotate(-3deg); }
[data-estilo="historieta"] .sticker { background: var(--accent); color: #1a1a1a; border: 3px solid #1a1a1a; }
[data-estilo="historieta"] .tag { border: 2px solid #1a1a1a; border-radius: 4px; }
[data-estilo="historieta"] .price .now { color: var(--primary); text-shadow: 2px 2px 0 #1a1a1a; }
[data-estilo="historieta"] .step::before { color: var(--accent); -webkit-text-stroke: 1.5px #1a1a1a; text-shadow: 3px 3px 0 #1a1a1a; }

/* ---------- 13. Editorial: blanco, negro y serif grande, estilo revista ---------- */
[data-estilo="editorial"] {
  --bg: #ffffff; --bg-soft: #f4f1ec; --band: #111111; --band-ink: #f4f1ec;
  --ink: #111111; --ink-soft: #5d5d5d; --primary: #111111; --primary-ink: #ffffff;
  --accent: #d6452b; --accent-ink: #ffffff; --green: #111111; --line: #e2ded7;
  --card: #ffffff; --footer: #111111; --footer-ink: #cfcac2; --wa: #1f8f50;
  --fx1: #d6452b; --fx2: #111111; --fx3: #bdb6aa; --fx4: #d6452b;
  --hero-grad: #f4f1ec;
  --shine: linear-gradient(100deg, #d6452b 0%, #d6452b 100%);
  --marquee-bg: #ffffff; --marquee-ink: #111111;
  --f-display: "Instrument Serif", Georgia, "Times New Roman", serif; --f-body: "Inter", "Segoe UI", system-ui, sans-serif; --f-script: "Inter", system-ui, sans-serif;
  --display-weight: 400; --display-style: normal; --script-size: .74rem; --script-transform: uppercase; --script-spacing: .22em;
  --r-card: 0; --r-btn: 0; --photo-1: 0; --photo-2: 0; --photo-3: 0;
  --shadow: none; --wave: none; --ornament: none; color-scheme: light;
}
[data-estilo="editorial"] h1 { font-size: clamp(2.8rem, 7vw, 5.4rem); line-height: .98; letter-spacing: -.02em; }
[data-estilo="editorial"] h2 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); letter-spacing: -.01em; }
[data-estilo="editorial"] .shine, [data-estilo="editorial"] .ad-copy h1 .zona { font-style: italic; }
[data-estilo="editorial"] .ad-copy h1 .zona { color: var(--accent); }
[data-estilo="editorial"] .eyebrow { color: var(--ink); }
[data-estilo="editorial"] .section-head { border-top: 1px solid #111; padding-top: 1.4rem; }
[data-estilo="editorial"] .pack, [data-estilo="editorial"] .step, [data-estilo="editorial"] .fact, [data-estilo="editorial"] .why div, [data-estilo="editorial"] .faq details { border: 0; border-top: 1px solid #111; background: transparent; }
[data-estilo="editorial"] .pack-body { padding-inline: 0; }
[data-estilo="editorial"] .pack.featured { padding: 0; background: transparent; animation: none; border-top: 4px solid var(--accent); }
[data-estilo="editorial"] .pack.featured > .pack-body { background: transparent; }
[data-estilo="editorial"] .pack:hover { transform: none; box-shadow: none; }
[data-estilo="editorial"] .price .now { color: var(--ink); font-size: 2.6rem; }
[data-estilo="editorial"] .tag, [data-estilo="editorial"] .badge-float, [data-estilo="editorial"] .sticker { background: #fff; color: #111; border-radius: 0; font-weight: 600; }
[data-estilo="editorial"] .sticker { border: 1px solid #111; }
[data-estilo="editorial"] .collage img, [data-estilo="editorial"] .ad-photo img { filter: grayscale(.15) contrast(1.05); }
[data-estilo="editorial"] .marquee { border-block: 1px solid #111; }
[data-estilo="editorial"] .marquee-track span { font-style: italic; }
[data-estilo="editorial"] .incl li::before { border-radius: 0; width: .7rem; height: 1px; margin-top: .8rem; background: #111; }
[data-estilo="editorial"] .checks li::before { background: #111; border-radius: 0; }
[data-estilo="editorial"] .step::before, [data-estilo="editorial"] .stat b { color: var(--accent); font-style: italic; }
[data-estilo="editorial"] .cta-box { background: #111; color: #f4f1ec; }
[data-estilo="editorial"] .btn { text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; font-weight: 600; }
[data-estilo="editorial"] .btn-xl { font-size: .95rem; }
[data-estilo="editorial"] .btn-ghost { border-width: 1px; }

/* ---------- 14. Tropical: agua, coral y sol para fiestas de alberca y verano ---------- */
[data-estilo="tropical"] {
  --bg: #fffdf6; --bg-soft: #e3f8f6; --band: #0fa3a8; --band-ink: #ffffff;
  --ink: #0d3b3e; --ink-soft: #3f6b6d; --primary: #ff6b57; --primary-ink: #ffffff;
  --accent: #ffd23f; --accent-ink: #3a2b00; --green: #2fb36c; --line: #cdeeea;
  --card: #ffffff; --footer: #0b4b4f; --footer-ink: #d4f3f0; --wa: #1fae5b;
  --fx1: #ff6b57; --fx2: #ffd23f; --fx3: #0fa3a8; --fx4: #2fb36c;
  --hero-grad: radial-gradient(420px 420px at 88% 8%, #ffe58a 0%, #ffe58a 18%, transparent 60%), radial-gradient(700px 300px at 20% 110%, #9ee7e3 0%, transparent 70%), linear-gradient(180deg, #d8f6f3, #fffdf6);
  --shine: linear-gradient(100deg, #ff6b57 0%, #ffb03f 40%, #0fa3a8 75%, #ff6b57 100%);
  --marquee-bg: #0fa3a8; --marquee-ink: #ffffff;
  --f-display: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif; --f-body: "Nunito", "Segoe UI", system-ui, sans-serif; --f-script: "Lilita One", system-ui, sans-serif;
  --display-weight: 400; --display-style: normal; --script-size: 1.05rem; --script-transform: uppercase; --script-spacing: .08em;
  --r-card: 26px; --r-btn: 999px; --photo-1: 90px 12px 90px 12px; --photo-2: 12px 90px 12px 90px; --photo-3: 50%;
  --shadow: 0 16px 34px -20px rgba(13, 59, 62, .5); --wave: block; --ornament: none; color-scheme: light;
}
[data-estilo="tropical"] .eyebrow { color: var(--band); }
[data-estilo="tropical"] .band .eyebrow { color: var(--accent); }
[data-estilo="tropical"] .collage img, [data-estilo="tropical"] .ad-photo img { border: 5px solid #fff; }
[data-estilo="tropical"] .pack.featured { background: conic-gradient(from var(--ang), #ff6b57, #ffd23f, #0fa3a8, #2fb36c, #ff6b57); }
[data-estilo="tropical"] .topbar { background: var(--band); color: #fff; }
[data-estilo="tropical"] .cta-box { background: linear-gradient(135deg, #ff6b57, #ff8f5a); }
[data-estilo="tropical"] .step::before { color: var(--band); }
[data-estilo="tropical"] .tag { background: var(--band); color: #fff; }

/* ---------- 15. Pizarrón: menú de gis sobre pizarra verde y fotos tipo polaroid ---------- */
[data-estilo="pizarron"] {
  --bg: #1f3a30; --bg-soft: #24443a; --band: #172c24; --band-ink: #f4f1e6;
  --ink: #f4f1e6; --ink-soft: #c8d2c6; --primary: #ffd166; --primary-ink: #1f3a30;
  --accent: #ff8fa3; --accent-ink: #2a0d14; --green: #9be38b; --line: rgba(244, 241, 230, .28);
  --card: #24443a; --footer: #13241d; --footer-ink: #c8d2c6; --wa: #25a35a;
  --fx1: #ffd166; --fx2: #ff8fa3; --fx3: #9be38b; --fx4: #f4f1e6;
  --hero-grad: radial-gradient(600px 300px at 20% 20%, rgba(255, 255, 255, .07), transparent 70%), radial-gradient(500px 280px at 85% 80%, rgba(255, 255, 255, .05), transparent 70%), #1f3a30;
  --shine: linear-gradient(100deg, #ffd166 0%, #ffd166 100%);
  --marquee-bg: #13241d; --marquee-ink: #ffd166;
  --f-display: "Cabin Sketch", "Comic Sans MS", system-ui, sans-serif; --f-body: "Kalam", "Comic Sans MS", system-ui, sans-serif; --f-script: "Caveat", "Comic Sans MS", cursive;
  --display-weight: 700; --display-style: normal; --script-size: 1.6rem; --script-transform: none; --script-spacing: 0;
  --r-card: 6px; --r-btn: 8px; --photo-1: 2px; --photo-2: 2px; --photo-3: 2px;
  --shadow: 0 18px 30px -18px rgba(0, 0, 0, .7); --wave: none; --ornament: none; color-scheme: dark;
}
[data-estilo="pizarron"] body { background-image: radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1.2px); background-size: 5px 5px; }
[data-estilo="pizarron"] .eyebrow { color: var(--accent); }
[data-estilo="pizarron"] .pack, [data-estilo="pizarron"] .step, [data-estilo="pizarron"] .fact, [data-estilo="pizarron"] .why div, [data-estilo="pizarron"] .faq details,
[data-estilo="pizarron"] .quick, [data-estilo="pizarron"] .b-form, [data-estilo="pizarron"] .cob-check { border: 2px dashed var(--line); background: rgba(255, 255, 255, .03); }
[data-estilo="pizarron"] .pack.featured { padding: 0; background: rgba(255, 255, 255, .03); animation: none; border: 2px dashed var(--primary); }
[data-estilo="pizarron"] .pack-media { margin: 10px 10px 0; border-radius: 2px; }
[data-estilo="pizarron"] .collage img, [data-estilo="pizarron"] .ad-photo img, [data-estilo="pizarron"] .ad-gallery img { background: #fff; padding: 8px 8px 26px; box-shadow: 0 16px 24px -14px rgba(0, 0, 0, .8); }
[data-estilo="pizarron"] .collage .p1, [data-estilo="pizarron"] .ad-photo img { transform: rotate(-1.5deg); }
[data-estilo="pizarron"] .collage .p2 { transform: rotate(3deg); }
[data-estilo="pizarron"] .collage .p3 { transform: rotate(-3deg); }
[data-estilo="pizarron"] .ad-gallery img:nth-child(odd) { transform: rotate(-2deg); }
[data-estilo="pizarron"] .ad-gallery img:nth-child(even) { transform: rotate(2deg); }
[data-estilo="pizarron"] .btn-main, [data-estilo="pizarron"] .btn-ghost { border: 2px dashed currentColor; }
[data-estilo="pizarron"] .btn-ghost { color: var(--ink); }
[data-estilo="pizarron"] .incl li::before { background: transparent; border: 2px solid var(--green); border-radius: 50%; }
[data-estilo="pizarron"] .tag, [data-estilo="pizarron"] .badge-float { background: var(--primary); color: #1f3a30; transform: rotate(-3deg); }
[data-estilo="pizarron"] .cta-box { background: #172c24; color: var(--ink); border: 2px dashed var(--primary); }
[data-estilo="pizarron"] .topbar { background: #13241d; color: var(--ink-soft); }
[data-estilo="pizarron"] .quick input, [data-estilo="pizarron"] .quick select, [data-estilo="pizarron"] .b-form input, [data-estilo="pizarron"] .b-form select { background: #1a3229; }

/* ---------- Selector de estilos: botón que abre un panel con todos ---------- */
.style-switch { padding: .3rem; gap: .2rem; }
.style-switch .ss-nav { width: 2.1rem; height: 2.1rem; padding: 0; display: grid; place-items: center; font-size: 1.1rem; }
.style-switch .ss-open { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; background: #fff; color: #111; }
.style-switch .ss-open b { font-weight: 800; }
.ss-panel { position: absolute; left: 0; bottom: calc(100% + 10px); width: min(440px, calc(100vw - 28px)); max-height: min(70vh, 560px); overflow: auto; background: #111; color: #fff; border-radius: 20px; padding: .9rem; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .6); display: grid; gap: .7rem; }
.ss-panel[hidden] { display: none; }
.ss-panel p { margin: 0; opacity: .7; font-size: .8rem; }
.ss-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.style-switch .ss-grid button { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .6rem; text-align: left; border-radius: 12px; padding: .55rem .6rem; background: #1d1d1d; color: #fff; border: 1px solid #2c2c2c; }
.style-switch .ss-grid button[aria-pressed="true"] { background: #fff; color: #111; border-color: #fff; }
.ss-grid .ss-sw { width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .25); }
.ss-grid .ss-name { display: grid; line-height: 1.15; min-width: 0; }
.ss-grid .ss-name b { font-size: 1rem; font-weight: 400; overflow-wrap: anywhere; }
.ss-grid .ss-name small { font: 500 .7rem/1.2 "Nunito", system-ui, sans-serif; opacity: .7; }
@media (max-width: 520px) {
  .style-switch { right: auto; }
  .style-switch .ss-open span { display: none; }
  .ss-grid { grid-template-columns: 1fr 1fr; }
}
/* Las reglas viejas del selector ocultaban todos los span en celular; aquí se respetan los del panel */
.style-switch .ss-grid span, .style-switch .ss-open span { opacity: 1; margin: 0; }
.style-switch .ss-grid .ss-sw { display: block; }
.style-switch .ss-grid .ss-name { display: grid; }
/* Barra fija: que el botón de WhatsApp se encoja antes que desbordar, en cualquier estilo */
@media (max-width: 760px) {
  .ad .sticky-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .ad .sticky-bar .btn { min-width: 0; text-transform: none; letter-spacing: 0; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- Selector de páginas de la demo: encima del de estilos (lo arma app.js) ---------- */
.page-switch {
  position: fixed; z-index: 29;
  left: calc(14px + env(safe-area-inset-left, 0px));
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  background: #111; color: #fff; border-radius: 999px; padding: .3rem;
  font: 600 .82rem/1 "Nunito", system-ui, sans-serif; box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .5);
}
.page-switch .ps-open { display: inline-flex; align-items: center; gap: .45rem; border: 0; border-radius: 999px; padding: .5rem .85rem; background: #fff; color: #111; font: inherit; cursor: pointer; }
.page-switch .ps-open span { opacity: .7; }
.page-switch .ps-open b { font-weight: 800; }
.ps-panel { position: absolute; left: 0; bottom: calc(100% + 10px); width: min(300px, calc(100vw - 28px)); background: #111; border-radius: 20px; padding: .8rem; display: grid; gap: .4rem; box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .6); }
.ps-panel[hidden] { display: none; }
.ps-panel p { margin: 0 0 .2rem; opacity: .7; font-size: .8rem; }
.ps-panel a { display: grid; gap: .15rem; padding: .6rem .75rem; border-radius: 12px; background: #1d1d1d; color: #fff; text-decoration: none; border: 1px solid #2c2c2c; }
.ps-panel a:hover { border-color: #555; }
.ps-panel a[aria-current="page"] { background: #fff; color: #111; border-color: #fff; }
.ps-panel a b { font-size: .95rem; }
.ps-panel a small { font-weight: 500; font-size: .72rem; opacity: .7; }
@media (max-width: 760px) { .ad .page-switch { bottom: calc(130px + env(safe-area-inset-bottom, 0px)); } }