/* =============================================================
   LUMIDA DIGITAL — style.css
   Sobrio · Claro · Una sola idea por sección
   Paleta: Marfil · Crema · Carbón · Dorado
   ============================================================= */

:root {
  --ivory: #f8f6f1;
  --cream: #f0ebe1;
  --sand: #e6dfd0;
  --carbon: #1a1914;
  --carbon-2: #24231d;
  --gold: #b99452;
  --gold-light: #e4cf9f;
  --gold-deep: #9a7433;
  --gold-text: #7d5e27;      /* dorado oscuro: legible como texto sobre marfil */
  --ink: #2a2822;
  --muted: #5f5b52;
  --line: rgba(26, 25, 20, .14);
  --line-light: rgba(248, 246, 241, .18);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --nav-h: 68px;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--carbon);
  text-wrap: balance;
}

::selection {
  background: var(--gold);
  color: var(--carbon);
}

:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 3px;
}

.contacto :focus-visible,
.footer :focus-visible,
.tier-feature :focus-visible {
  outline-color: var(--gold-light);
}

.wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 200;
  background: var(--carbon);
  color: var(--ivory);
  padding: 10px 16px;
}

.skip:focus {
  left: 16px;
}

/* ---------- BOTONES Y ENLACES ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  border: 0;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}

.btn-dark {
  background: var(--carbon);
  color: var(--ivory);
}

.btn-dark:hover {
  background: #3a3830;
}

.btn-gold {
  background: var(--gold);
  color: var(--carbon);
}

.btn-gold:hover {
  background: #c9a561;
}

.text-link {
  font-size: .95rem;
  font-weight: 500;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--carbon);
  transition: color .25s ease, border-color .25s ease;
}

.text-link:hover {
  color: var(--gold-text);
  border-color: var(--gold-text);
}

/* ---------- ENCABEZADO ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(248, 246, 241, .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: box-shadow .3s ease;
}

.nav.scrolled {
  box-shadow: 0 1px 0 var(--line);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--nav-h);
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.sello {
  display: block;
  width: 34px;
  height: 34px;
  background-color: var(--carbon);
  -webkit-mask: url('images/LOGO-SELLO.svg') no-repeat center / contain;
  mask: url('images/LOGO-SELLO.svg') no-repeat center / contain;
}

.brand-text {
  display: flex;
  flex-direction: column;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--carbon);
}

.brand-text small {
  margin-top: 5px;
  font-family: var(--sans);
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .34em;
  color: var(--gold-text);
}

.nav-links {
  display: none;
  gap: 24px;
}

@media (min-width: 1100px) {
  .nav-links {
    gap: 32px;
  }
}

.nav-links a {
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}

.nav-links a:hover {
  border-color: var(--gold);
}

.nav-cta {
  display: none;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--carbon);
  border-radius: 2px;
  font-size: .9rem;
  font-weight: 500;
  transition: background-color .25s ease, color .25s ease;
}

.nav-cta:hover {
  background: var(--carbon);
  color: var(--ivory);
}

.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  background: none;
  border: 0;
  cursor: pointer;
}

.burger span {
  display: block;
  height: 2px;
  background: var(--carbon);
  transition: transform .25s ease, opacity .25s ease;
}

.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu {
  display: flex;
  flex-direction: column;
  padding: 4px 22px 22px;
  background: var(--ivory);
  border-top: 1px solid var(--line);
  box-shadow: 0 24px 40px -24px rgba(26, 25, 20, .25);
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu a {
  padding: 15px 0;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--line);
}

.mobile-menu .mobile-cta {
  margin-top: 18px;
  padding: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 2px;
  background: var(--carbon);
  color: var(--ivory);
  font-weight: 500;
}

/* ---------- INICIO ---------- */
.hero {
  padding: calc(var(--nav-h) + 40px) 0 72px;
  background:
    radial-gradient(60% 65% at 76% 48%, rgba(185, 148, 82, .22), transparent 70%),
    radial-gradient(40% 40% at 0% 100%, rgba(185, 148, 82, .10), transparent 70%),
    var(--ivory);
}

.hero-inner {
  display: grid;
  gap: 48px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.6rem, 7.4vw, 4.7rem);
  line-height: 1.08;
  letter-spacing: -.01em;
}

.hero .lead {
  max-width: 46ch;
  margin-top: 24px;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 36px;
}

.hero-note {
  margin-top: 24px;
  font-size: .9rem;
  color: var(--muted);
}

/* Única animación automática: una entrada suave al cargar */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy {
    animation: fadeIn 1s ease-in-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
}

/* ---------- SECCIONES ---------- */
.section {
  padding: 80px 0;
}

.section.alt {
  background: var(--cream);
}

.section-head {
  max-width: 640px;
  margin-bottom: 48px;
}

.section-head h2,
.nosotros h2,
.contact-copy h2 {
  font-size: clamp(1.9rem, 4.6vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -.005em;
}

.section-head p {
  margin-top: 16px;
  max-width: 56ch;
  color: var(--muted);
}

/* ---------- DISEÑOS ---------- */
.designs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 78%;
  gap: 16px;
  margin: 0 -22px;
  padding: 0 22px 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 22px;
}

.design {
  scroll-snap-align: start;
}

.design img {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 4px;
  background: var(--sand);
}

.design figcaption {
  margin-top: 16px;
}

.design strong {
  display: block;
  font-weight: 500;
  color: var(--carbon);
}

.design span {
  display: block;
  margin-top: 2px;
  font-size: .92rem;
  color: var(--muted);
}

/* ---------- CÓMO FUNCIONA ---------- */
.steps {
  list-style: none;
  display: grid;
  gap: 36px 40px;
}

.steps li {
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.step-n {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold-text);
}

.steps h3 {
  margin: 14px 0 8px;
  font-size: 1.3rem;
  line-height: 1.25;
}

.steps p {
  max-width: 36ch;
  font-size: .96rem;
  color: var(--muted);
}

/* ---------- PAQUETES ---------- */
.tiers {
  display: grid;
  gap: 20px;
}

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 56px 32px 36px;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.tier h3 {
  font-size: 1.6rem;
  line-height: 1.2;
}

.tier .sub {
  margin-top: 6px;
  font-size: .96rem;
  color: var(--muted);
}

.price {
  margin-top: 24px;
  font-family: var(--serif);
  font-size: 2.6rem;
  line-height: 1.1;
  color: var(--carbon);
}

.price .cur {
  margin-right: 3px;
  font-size: 1.2rem;
  vertical-align: top;
  color: var(--gold-text);
}

.price .mxn {
  margin-left: 8px;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--muted);
}

.includes {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: .9rem;
  font-weight: 500;
  color: var(--muted);
}

.feats {
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 16px 0 32px;
}

.feats li {
  position: relative;
  padding-left: 26px;
  font-size: .96rem;
  line-height: 1.45;
}

.feats li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .42em;
  width: 10px;
  height: 6px;
  border-left: 1.5px solid var(--gold-text);
  border-bottom: 1.5px solid var(--gold-text);
  transform: rotate(-45deg);
}

.tier .btn {
  margin-top: auto;
  width: 100%;
}

/* Plan destacado: el único bloque oscuro de la sección */
.tier-feature {
  background: var(--carbon);
  border-color: var(--carbon);
  color: var(--ivory);
}

.tier-feature h3,
.tier-feature .price {
  color: var(--ivory);
}

.tier-feature .sub,
.tier-feature .includes,
.tier-feature .price .mxn {
  color: rgba(248, 246, 241, .72);
}

.tier-feature .includes {
  border-color: var(--line-light);
}

.tier-feature .price .cur {
  color: var(--gold);
}

.tier-feature .feats li::before {
  border-color: var(--gold);
}

.tier-flag {
  position: absolute;
  top: 22px;
  left: 32px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--gold-light);
}

/* ---------- NOSOTROS ---------- */
.nosotros {
  display: grid;
  gap: 28px;
}

.nosotros-text {
  max-width: 60ch;
}

.nosotros-text p {
  margin-top: 18px;
  color: var(--muted);
}

.nosotros-text .lead-serif {
  margin-top: 0;
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--carbon);
}

/* ---------- CONTACTO ---------- */
.contacto {
  background: var(--carbon);
  color: var(--ivory);
}

.contact-grid {
  display: grid;
  gap: 48px;
}

.contact-copy h2 {
  color: var(--ivory);
}

.contact-copy p {
  margin-top: 16px;
  max-width: 40ch;
  color: rgba(248, 246, 241, .75);
}

.contact-info {
  list-style: none;
  margin-top: 32px;
  border-top: 1px solid var(--line-light);
}

.contact-info li {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-light);
}

.contact-info .k {
  font-size: .9rem;
  color: rgba(248, 246, 241, .62);
}

.contact-info a {
  overflow-wrap: anywhere;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}

.contact-info a:hover {
  border-color: var(--gold);
}

.form {
  position: relative;
  padding: 28px 22px;
  background: var(--carbon-2);
  border: 1px solid var(--line-light);
  border-radius: 2px;
  color-scheme: dark;
}

.field {
  margin-bottom: 20px;
}

.field label {
  display: block;
  margin-bottom: 4px;
  font-size: .9rem;
  color: rgba(248, 246, 241, .82);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 2px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(248, 246, 241, .4);
  border-radius: 0;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ivory);
  transition: border-color .25s ease;
}

.field textarea {
  min-height: 96px;
  resize: vertical;
}

.field select {
  cursor: pointer;
}

.field select option {
  background: var(--carbon);
  color: var(--ivory);
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(248, 246, 241, .5);
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 0;
  border-bottom-color: var(--gold-light);
  box-shadow: 0 1px 0 0 var(--gold-light);
}

.field small.msg {
  display: none;
  margin-top: 6px;
  font-size: .85rem;
  color: #f2b3a5;
}

.field.err input,
.field.err select,
.field.err textarea {
  border-bottom-color: #e08a78;
}

.field.err small.msg {
  display: block;
}

.two {
  display: grid;
}

.form .btn {
  width: 100%;
  margin-top: 8px;
}

.alert {
  margin-bottom: 22px;
  padding: 14px 16px;
  border-left: 3px solid;
  font-size: .95rem;
}

.alert.ok {
  border-color: var(--gold);
  background: rgba(185, 148, 82, .14);
  color: var(--ivory);
}

.alert.bad {
  border-color: #e08a78;
  background: rgba(224, 138, 120, .12);
  color: #f8d2c9;
}

/* ---------- PIE ---------- */
.footer {
  padding: 56px 0 28px;
  background: #11100d;
  color: rgba(248, 246, 241, .72);
}

.footer .brand-text {
  color: var(--ivory);
}

.footer .brand-text small {
  color: var(--gold);
}

.footer .sello {
  background-color: var(--gold);
}

.footer-top {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line-light);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  font-size: .92rem;
}

.footer-links a {
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, color .25s ease;
}

.footer-links a:hover {
  color: var(--ivory);
  border-color: var(--gold);
}

.footer-bottom {
  padding-top: 24px;
  font-size: .85rem;
}

/* ---------- ≥ 560px ---------- */
@media (min-width: 560px) {
  .two {
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
  }

  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- ≥ 720px ---------- */
@media (min-width: 720px) {

  .wrap,
  .nav-bar {
    padding-left: 40px;
    padding-right: 40px;
  }

  .designs {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

  .section {
    padding: 112px 0;
  }

  .hero {
    padding: calc(var(--nav-h) + 72px) 0 104px;
  }

  .form {
    padding: 36px;
  }

  .section-head.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: end;
    max-width: none;
  }

  .section-head.split p {
    margin-top: 0;
  }
}

/* ---------- ≥ 900px ---------- */
@media (min-width: 900px) {
  .hero-inner {
    grid-template-columns: 1.15fr .85fr;
    gap: 72px;
  }

    .steps {
    grid-template-columns: repeat(4, 1fr);
  }

  .tiers {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .nosotros {
    grid-template-columns: 1fr 1.4fr;
    gap: 80px;
    align-items: start;
  }

  .contact-grid {
    grid-template-columns: .9fr 1.1fr;
    gap: 80px;
    align-items: start;
  }

  .footer-top {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ---------- ≥ 960px ---------- */
@media (min-width: 960px) {

  .nav-links,
  .nav-cta {
    display: flex;
  }

  .burger,
  .mobile-menu,
  .mobile-menu[hidden] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    transition-duration: .01ms !important;
  }
}

/* =============================================================
   HERRAMIENTAS (vistas ilustrativas) · PREGUNTAS FRECUENTES
   ============================================================= */
.tools {
  display: grid;
  gap: 20px;
}

.tool {
  display: flex;
  flex-direction: column;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.mock {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  padding: 28px;
  background: #fbfaf6;
  border-bottom: 1px solid var(--line);
}

.mock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: .92rem;
  color: var(--carbon);
}

.chip {
  flex: none;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: .78rem;
  color: var(--muted);
}

.chip.ok {
  color: var(--gold-text);
  border-color: rgba(125, 94, 39, .4);
}

.mock-tables {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.tbl {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border: 1.5px solid rgba(26, 25, 20, .3);
  border-radius: 50%;
  background: #fff;
  font-size: .78rem;
  line-height: 1.3;
  color: var(--muted);
}

.tbl strong {
  font-size: .85rem;
  font-weight: 500;
  color: var(--carbon);
}

.tbl.full {
  border-color: var(--gold);
  background: rgba(185, 148, 82, .1);
}

.mock-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-content: center;
}

.ph {
  position: relative;
  aspect-ratio: 1;
  border-radius: 2px;
}

.ph span,
.screen-cap span:last-child {
  font-size: .72rem;
  line-height: 1;
}

.ph span {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 4px 7px;
  background: rgba(248, 246, 241, .92);
  border-radius: 20px;
  color: var(--carbon);
}

.p1 { background: url('images/demo/galeria-1.jpg') center / cover no-repeat, linear-gradient(135deg, #d9c7a6, #b99452); }
.p2 { background: url('images/demo/galeria-2.jpg') center / cover no-repeat, linear-gradient(135deg, #e6d3c9, #c99f93); }
.p3 { background: url('images/demo/galeria-3.jpg') center / cover no-repeat, linear-gradient(135deg, #cfd6c4, #8f9f82); }
.p4 { background: url('images/demo/galeria-4.jpg') center / cover no-repeat, linear-gradient(135deg, #e9dfcf, #cdb892); }
.p5 { background: url('images/demo/galeria-5.jpg') center / cover no-repeat, linear-gradient(135deg, #d8cdd0, #a8929a); }
.p6 { background: url('images/demo/galeria-6.jpg') center / cover no-repeat, linear-gradient(135deg, #dfd6bf, #a89a6e); }

.screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 8px;
  background: var(--carbon);
  border-radius: 3px;
  box-shadow: 0 18px 30px -20px rgba(26, 25, 20, .5);
}

.screen-cap {
  z-index: 1;
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .8rem;
  color: var(--ivory);
}

.tool-body {
  padding: 24px 28px 30px;
}

.tool-plan {
  margin-bottom: 8px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--gold-text);
}

.tool h3 {
  font-size: 1.35rem;
  line-height: 1.25;
}

.tool-body h3 + p {
  margin-top: 10px;
  font-size: .96rem;
  color: var(--muted);
}

/* Paquetes ahora sobre marfil: las tarjetas claras necesitan un fondo propio */
.precios .tier:not(.tier-feature),
#precios .tier:not(.tier-feature) {
  background: #fdfcf9;
}

/* Preguntas frecuentes */
.faq {
  display: grid;
  gap: 28px;
}

.faq h2 {
  font-size: clamp(1.9rem, 4.6vw, 2.8rem);
  line-height: 1.15;
}

.faq-list {
  max-width: 720px;
  border-bottom: 1px solid var(--line);
}

.faq details {
  border-top: 1px solid var(--line);
}

.faq summary {
  position: relative;
  padding: 20px 40px 20px 0;
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.35;
  color: var(--carbon);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--gold-text);
}

.faq details[open] summary::after {
  content: "−";
}

.faq details p {
  max-width: 60ch;
  padding: 0 40px 22px 0;
  color: var(--muted);
}

@media (min-width: 720px) {
  .tools {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (min-width: 900px) {
  .faq {
    grid-template-columns: 1fr 1.4fr;
    gap: 80px;
    align-items: start;
  }
}


/* =============================================================
   V2 · MÁS RITMO Y PRESENCIA VISUAL
   ============================================================= */

/* Acento dorado: solo en los titulares principales */
h1 em,
h2 em,
.display em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold-deep);
}

.section.dark h2 em {
  color: var(--gold-light);
}

/* Hero: tres invitaciones superpuestas */
.hero-trio {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 1 / .98;
}

.hero-trio .t {
  position: absolute;
  width: 46%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 6px;
  background: var(--sand);
  box-shadow: 0 30px 50px -26px rgba(26, 25, 20, .55);
}

.t1 {
  left: 0;
  top: 11%;
  transform: rotate(-6deg);
}

.t3 {
  right: 0;
  top: 11%;
  transform: rotate(6deg);
}

.t2 {
  left: 27%;
  top: 0;
  z-index: 2;
  box-shadow: 0 40px 60px -26px rgba(26, 25, 20, .65);
}

/* Diseños: la tarjeta central desciende para dar movimiento */
.design img {
  box-shadow: 0 24px 40px -30px rgba(26, 25, 20, .45);
}

/* Cómo funciona: línea de tiempo con números grandes */
.steps li {
  position: relative;
  border-top-color: rgba(185, 148, 82, .55);
}

.steps li::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.step-n {
  display: block;
  font-size: 3.6rem;
  font-weight: 300;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold);
}

/* Herramientas en sección oscura */
.section.dark {
  background:
    radial-gradient(50% 40% at 85% 0%, rgba(185, 148, 82, .14), transparent 70%),
    var(--carbon);
  color: var(--ivory);
}

.section.dark :focus-visible {
  outline-color: var(--gold-light);
}

.section.dark h2 {
  color: var(--ivory);
}

.section.dark .section-head p {
  color: rgba(248, 246, 241, .72);
}

.section.dark .tool {
  background: var(--carbon-2);
  border-color: var(--line-light);
}

.section.dark .mock {
  background: #1c1b16;
  border-bottom-color: var(--line-light);
}

.section.dark .mock-row {
  background: #2b2a23;
  border-color: var(--line-light);
  color: var(--ivory);
}

.section.dark .chip {
  border-color: var(--line-light);
  color: rgba(248, 246, 241, .7);
}

.section.dark .chip.ok {
  color: var(--gold-light);
  border-color: rgba(228, 207, 159, .45);
}

.section.dark .tbl {
  background: #2b2a23;
  border-color: rgba(248, 246, 241, .3);
  color: rgba(248, 246, 241, .7);
}

.section.dark .tbl strong {
  color: var(--ivory);
}

.section.dark .tbl.full {
  background: rgba(185, 148, 82, .2);
  border-color: var(--gold);
}

.section.dark .tool h3 {
  color: var(--ivory);
}

.section.dark .tool-plan {
  color: var(--gold-light);
}

.section.dark .tool-body h3 + p {
  color: rgba(248, 246, 241, .72);
}

.section.dark .screen {
  background: #000;
  box-shadow: 0 18px 30px -20px rgba(0, 0, 0, .9);
}

/* Paquetes: el plan completo destaca con un filo dorado */
.tier-feature {
  border-top: 3px solid var(--gold);
  background:
    radial-gradient(80% 40% at 50% 0%, rgba(185, 148, 82, .18), transparent 70%),
    var(--carbon);
  box-shadow: 0 40px 60px -36px rgba(26, 25, 20, .6);
}

/* Nosotros: frase grande y sello de fondo */
.nosotros-sec {
  position: relative;
  overflow: hidden;
}

.seal-mark {
  position: absolute;
  right: -90px;
  bottom: -110px;
  width: 460px;
  height: 460px;
  background-color: var(--gold);
  opacity: .12;
  -webkit-mask: url('images/LOGO-SELLO.svg') no-repeat center / contain;
  mask: url('images/LOGO-SELLO.svg') no-repeat center / contain;
  pointer-events: none;
}

.nosotros-sec .wrap {
  position: relative;
}

.display {
  margin-top: 28px;
  font-family: var(--serif);
  font-size: clamp(3.8rem, 10vw, 7.5rem);
  font-weight: 300;
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--carbon);
}

.nosotros h2 {
  font-size: 1.1rem;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--gold-text);
}

/* Entrada suave, una sola vez, al llegar a cada bloque */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s ease, transform .8s ease;
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 720px) {
  .design:nth-child(2) {
    margin-top: 56px;
  }
}

@media (max-width: 899px) {
  .hero-trio {
    max-width: 420px;
    margin-top: 8px;
  }
}

/* =============================================================
   V3 · PARALLAX SUAVE Y DEMO INTERACTIVA
   ============================================================= */

/* Parallax por capas: usa la propiedad "translate", independiente de transform
   (no choca con rotaciones ni con la entrada suave). */
[data-speed] {
  translate: 0 var(--py, 0px);
  will-change: translate;
}

.seal-mark {
  rotate: var(--rot, 0deg);
}

/* Inclinación sutil del trío del hero con el cursor (solo escritorio) */
.hero-trio {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .35s ease-out;
}

/* ---------- Demo interactiva (lógica de la invitación real) ---------- */
.demo-note {
  margin-top: 32px;
  max-width: 62ch;
  font-size: .88rem;
  color: var(--muted);
}

.guest-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 36px;
}

.gp-label {
  margin-right: 4px;
  font-size: .9rem;
  color: var(--muted);
}

.gp {
  position: relative;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  font-family: var(--sans);
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.gp b {
  display: block;
  font-size: .92rem;
  font-weight: 500;
}

.gp small {
  display: block;
  font-size: .78rem;
  color: var(--muted);
}

.gp:hover {
  border-color: var(--carbon);
}

.gp[aria-pressed="true"] {
  background: var(--carbon);
  border-color: var(--carbon);
  color: var(--ivory);
}

.gp[aria-pressed="true"] small {
  color: rgba(248, 246, 241, .7);
}

.gp.done b::after {
  content: " ✓";
  color: var(--gold);
}

.demo-stage {
  display: grid;
  gap: 32px;
  justify-items: center;
}

.phone {
  position: relative;
  width: 296px;
  flex: none;
  padding: 9px;
  border-radius: 42px;
  background: #121210;
  box-shadow: 0 44px 70px -34px rgba(26, 25, 20, .65), inset 0 0 0 2px #2d2c27;
}

.phone::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 4;
  width: 80px;
  height: 21px;
  border-radius: 12px;
  background: #000;
  transform: translateX(-50%);
}

.phone-screen {
  position: relative;
  height: 600px;
  overflow: hidden;
  border-radius: 34px;
  background: #fbf8f1;
}

.phone-screen::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(185, 148, 82, .5);
  border-radius: 26px;
  pointer-events: none;
}

.scr {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 50px 26px 24px;
  overflow-y: auto;
  text-align: center;
  scrollbar-width: none;
}

.scr::-webkit-scrollbar {
  display: none;
}

.scr[hidden] {
  display: none;
}

.inv-kicker {
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-text);
}

.inv-names {
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 2.05rem;
  line-height: 1.05;
  color: var(--carbon);
}

.inv-names em {
  font-style: italic;
  color: var(--gold-deep);
}

.inv-date {
  margin-top: 10px;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--ink);
}

.cd {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  width: 100%;
  margin-top: 16px;
  padding: 10px 0;
  border-top: 1px solid rgba(26, 25, 20, .12);
  border-bottom: 1px solid rgba(26, 25, 20, .12);
}

.cd b {
  display: block;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--carbon);
  font-variant-numeric: tabular-nums;
}

.cd span {
  font-size: .6rem;
  color: var(--muted);
}

.guest-card {
  width: 100%;
  margin-top: 18px;
}

.gc-kicker {
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.gc-name {
  margin-top: 4px;
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--carbon);
  outline: none;
}

.pcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  margin-top: 12px;
}

.pcards div {
  padding: 10px 4px;
  border: 1px solid rgba(26, 25, 20, .14);
  border-radius: 2px;
  background: #fff;
}

.pcards b {
  display: block;
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1;
  color: var(--carbon);
}

.pcards span {
  display: block;
  margin-top: 4px;
  font-size: .62rem;
  color: var(--muted);
}

.ph-btn {
  width: 100%;
  min-height: 44px;
  margin-top: auto;
  padding: 0 12px;
  font-size: .85rem;
}

.guest-card + .ph-btn {
  margin-top: 18px;
}

.ph-back {
  margin-top: 10px;
  padding: 4px;
  background: none;
  border: 0;
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Formulario */
.f-title {
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--carbon);
  outline: none;
}

.f-sub {
  margin-top: 8px;
  font-size: .76rem;
  line-height: 1.45;
  color: var(--muted);
}

.f-sub strong {
  font-weight: 600;
  color: var(--carbon);
}

.steppers {
  width: 100%;
  margin-top: 14px;
}

.stp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(26, 25, 20, .1);
  font-size: .86rem;
  color: var(--ink);
}

.stp[hidden] {
  display: none;
}

.ctr {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ctr button {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(26, 25, 20, .25);
  border-radius: 50%;
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--carbon);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.ctr button:hover:not(:disabled) {
  background: var(--carbon);
  color: var(--ivory);
}

.ctr button:disabled {
  opacity: .3;
  cursor: default;
}

.ctr output {
  min-width: 20px;
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--carbon);
}

.f-lbl {
  margin-top: 14px;
  align-self: flex-start;
  font-size: .74rem;
  text-align: left;
  color: var(--muted);
}

#d-msg {
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(26, 25, 20, .2);
  border-radius: 2px;
  background: #fff;
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--ink);
  resize: none;
}

#d-msg:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 1px;
}

.f-count {
  align-self: flex-end;
  margin-top: 4px;
  font-size: .68rem;
  color: var(--muted);
}

.f-warn {
  margin-top: 8px;
  padding: 8px 10px;
  border-left: 2px solid #b4533c;
  background: rgba(180, 83, 60, .08);
  font-size: .74rem;
  line-height: 1.4;
  text-align: left;
  color: #7a2f1f;
}

.f-warn[hidden] {
  display: none;
}

/* Gracias */
.th-title {
  margin-top: 36px;
  font-family: var(--serif);
  font-size: 1.8rem;
  line-height: 1.15;
  color: var(--carbon);
  outline: none;
}

#scr-thanks .pcards {
  margin-top: 22px;
}

.th-text {
  margin-top: 20px;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Diálogo de confirmación */
.dlg {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(26, 25, 20, .55);
}

.dlg[hidden] {
  display: none;
}

.dlg-card {
  width: 100%;
  padding: 22px 18px;
  border-radius: 4px;
  background: #fcfbf8;
  text-align: center;
}

.dlg-t {
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--carbon);
}

.dlg-p {
  margin-top: 8px;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--muted);
}

.dlg-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}

.dlg-no {
  padding: 4px;
  background: none;
  border: 0;
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.dlg-yes {
  min-height: 40px;
  padding: 0 18px;
  font-size: .82rem;
}

/* Panel del anfitrión */
.panel {
  width: 100%;
  padding: 26px;
  border-radius: 4px;
  background: var(--carbon);
  color: var(--ivory);
  box-shadow: 0 34px 60px -38px rgba(26, 25, 20, .7);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-light);
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
}

.live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--gold-light);
}

.live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.kpis div {
  padding: 12px;
  border: 1px solid var(--line-light);
  border-radius: 2px;
  background: rgba(248, 246, 241, .04);
}

.kpis span {
  display: block;
  font-size: .74rem;
  line-height: 1.3;
  color: rgba(248, 246, 241, .62);
}

.kpis b {
  display: block;
  margin-top: 4px;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
}

.kpis small {
  display: block;
  margin-top: 4px;
  font-size: .72rem;
  line-height: 1.3;
  color: rgba(248, 246, 241, .55);
}

.panel-label {
  margin-top: 20px;
  font-size: .82rem;
  color: rgba(248, 246, 241, .62);
}

.glist {
  list-style: none;
  margin-top: 16px;
}

.glist li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 10px 10px 10px 0;
  border-bottom: 1px solid var(--line-light);
}

.glist .g-name {
  font-size: .92rem;
}

.glist .g-mesa {
  margin-left: 8px;
  font-size: .72rem;
  color: rgba(248, 246, 241, .5);
}

.glist .g-det {
  grid-column: 1;
  font-size: .78rem;
  color: rgba(248, 246, 241, .6);
}

.chip-s {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  padding: 3px 10px;
  border: 1px solid var(--line-light);
  border-radius: 20px;
  font-size: .74rem;
  color: rgba(248, 246, 241, .65);
  white-space: nowrap;
}

.chip-s.ok {
  color: var(--gold-light);
  border-color: rgba(228, 207, 159, .45);
}

.chip-s.no {
  color: #f2b3a5;
  border-color: rgba(242, 179, 165, .4);
}

.glist li.new {
  padding-left: 12px;
  border-left: 2px solid var(--gold);
  background: rgba(185, 148, 82, .14);
}

.notif {
  margin-top: 16px;
  padding: 12px 14px;
  border-left: 2px solid var(--gold);
  border-radius: 2px;
  background: rgba(248, 246, 241, .06);
}

.notif[hidden] {
  display: none;
}

.notif-k {
  font-size: .72rem;
  color: var(--gold-light);
}

.notif-t {
  margin-top: 4px;
  font-size: .86rem;
  line-height: 1.5;
  white-space: pre-line;
}

.msgs blockquote {
  margin-top: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--line-light);
  font-family: var(--serif);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.4;
  color: rgba(248, 246, 241, .85);
}

.msgs blockquote cite {
  display: block;
  margin-top: 2px;
  font-family: var(--sans);
  font-size: .74rem;
  font-style: normal;
  color: rgba(248, 246, 241, .55);
}

.panel-status {
  margin-top: 18px;
  font-size: .85rem;
  color: rgba(248, 246, 241, .75);
}

.text-link-light {
  margin-top: 12px;
  padding: 0 0 2px;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--gold);
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--gold-light);
  cursor: pointer;
}

.text-link-light[hidden] {
  display: none;
}

.panel :focus-visible {
  outline-color: var(--gold-light);
}

@media (min-width: 900px) {
  .demo-stage {
    grid-template-columns: 296px 1fr;
    gap: 40px;
    align-items: start;
    justify-items: stretch;
  }

  .phone {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
    justify-self: center;
  }
}

@media (max-width: 480px) {
  .kpis {
    grid-template-columns: 1fr;
  }

  .kpis div {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 12px;
  }

  .kpis b {
    grid-row: 1 / span 2;
    grid-column: 2;
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  [data-speed],
  .seal-mark {
    translate: none;
    rotate: none;
  }

  .hero-trio {
    transform: none;
  }
}

/* =============================================================
   V4 · ITINERARIO ANIMADO Y HERRAMIENTAS INTERACTIVAS
   ============================================================= */

/* ---------- Itinerario ---------- */
.itin {
  display: grid;
  gap: 48px;
  align-items: start;
}

.itin-copy h2 {
  font-size: clamp(1.9rem, 4.6vw, 2.8rem);
  line-height: 1.15;
}

.itin-copy p {
  margin-top: 16px;
  max-width: 46ch;
  color: var(--muted);
}

.itin-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  list-style: none;
}

.itin-chips li {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: .85rem;
  color: var(--ink);
}

.timeline {
  position: relative;
  list-style: none;
}

.timeline::before,
.timeline::after {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 68px;
  left: 28px;
  width: 1px;
}

.timeline::before {
  background: var(--line);
}

.timeline::after {
  background: var(--gold);
  transform: scaleY(var(--prog, 0));
  transform-origin: top;
}

.timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  padding-bottom: 44px;
}

.timeline li:last-child {
  padding-bottom: 0;
}

.timeline .ico {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--ivory);
  color: var(--muted);
  transition: background-color .5s ease, border-color .5s ease, color .5s ease;
}

.timeline .ico svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.timeline li.on .ico {
  background: var(--carbon);
  border-color: var(--carbon);
  color: var(--gold);
}

.timeline .t {
  font-family: var(--serif);
  font-size: 1.7rem;
  line-height: 1.1;
  color: var(--gold-deep);
}

.timeline h3 {
  margin-top: 6px;
  font-size: 1.3rem;
}

.timeline li p:not(.t) {
  margin-top: 2px;
  color: var(--muted);
}

.tag {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: .78rem;
  color: var(--muted);
}

/* ---------- Herramientas interactivas ---------- */
.tool-link {
  display: inline-block;
  margin-top: 14px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--gold);
  font-size: .9rem;
  color: var(--gold-light);
}

.mock-mesas,
.mock-gal,
.mock-live {
  gap: 12px;
}

.m-hint {
  font-size: .8rem;
  color: rgba(248, 246, 241, .6);
}

.m-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 36px;
}

.grp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line-light);
  border-radius: 2px;
  background: #2b2a23;
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--ivory);
  cursor: grab;
  transition: border-color .2s ease, background-color .2s ease;
}

.grp small {
  font-size: .74rem;
  color: var(--gold-light);
}

.grp:hover {
  border-color: rgba(248, 246, 241, .5);
}

.grp.sel {
  border-color: var(--gold);
  background: rgba(185, 148, 82, .28);
}

.grp.drag {
  opacity: .45;
}

.m-tables {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.mt {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 10px;
  border: 1.5px solid rgba(248, 246, 241, .28);
  border-radius: 10px;
  background: #24231d;
  transition: border-color .25s ease, background-color .25s ease;
}

.mt.over {
  border-color: var(--gold-light);
  background: rgba(185, 148, 82, .14);
}

.mt.full {
  border-color: var(--gold);
}

.mt-btn {
  padding: 2px 0 4px;
  background: none;
  border: 0;
  font-family: var(--sans);
  text-align: center;
  color: var(--ivory);
  cursor: pointer;
}

.mt-btn b {
  display: block;
  font-size: .86rem;
  font-weight: 500;
}

.mt-btn .occ {
  font-size: .74rem;
  color: rgba(248, 246, 241, .62);
}

.seats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-top: 6px;
}

.seats i {
  width: 8px;
  height: 8px;
  border: 1px solid rgba(248, 246, 241, .4);
  border-radius: 50%;
}

.seats i.on {
  background: var(--gold);
  border-color: var(--gold);
}

.mt-assigned {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 4px;
}

.mt-assigned button {
  padding: 3px 6px;
  border: 0;
  border-radius: 2px;
  background: rgba(185, 148, 82, .22);
  font-family: var(--sans);
  font-size: .7rem;
  line-height: 1.25;
  color: var(--gold-light);
  cursor: pointer;
}

.mt-assigned button:hover {
  background: rgba(185, 148, 82, .38);
}

.m-msg {
  min-height: 2.6em;
  font-size: .82rem;
  line-height: 1.4;
  color: rgba(248, 246, 241, .78);
}

.m-msg.err {
  color: #f2b3a5;
}

.m-stat {
  font-size: .76rem;
  color: rgba(248, 246, 241, .55);
}

@media (prefers-reduced-motion: no-preference) {
  .mt.shake {
    animation: shake .35s ease;
  }

  @keyframes shake {
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
  }
}

/* Galería */
.gal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.ph.empty {
  background: transparent;
  border: 1px dashed rgba(248, 246, 241, .25);
}

.ph .like {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 5px 8px;
  border: 0;
  border-radius: 20px;
  background: rgba(248, 246, 241, .92);
  font-family: var(--sans);
  font-size: .72rem;
  line-height: 1;
  color: var(--carbon);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.ph .like[aria-pressed="true"] {
  background: #fff;
  color: var(--carbon);
}

.ph .new {
  position: absolute;
  right: auto;
  bottom: auto;
  left: 6px;
  top: 6px;
  padding: 3px 7px;
  border-radius: 20px;
  background: var(--carbon);
  font-size: .62rem;
  color: var(--gold-light);
}

.mini-btn {
  align-self: flex-start;
  padding: 9px 16px;
  border: 1px solid var(--gold);
  border-radius: 2px;
  background: transparent;
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--gold-light);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.mini-btn:hover {
  background: var(--gold);
  color: var(--carbon);
}

/* Live Display */
.slides {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 1px;
}

.slides::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .62));
  pointer-events: none;
}

.slide {
  position: absolute;
  inset: 0;
  border-radius: 0;
  opacity: 0;
  transition: opacity .9s ease;
}

.slide.on {
  opacity: 1;
}

.screen-qr {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  width: 34px;
  height: 34px;
  padding: 4px;
  border-radius: 3px;
  background: var(--ivory);
}

.screen-qr i {
  background: var(--carbon);
}

.screen-qr i:nth-child(2),
.screen-qr i:nth-child(4),
.screen-qr i:nth-child(8) {
  background: transparent;
}

.new-tag {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--gold);
  font-size: .72rem;
  font-weight: 500;
  color: var(--carbon);
}

.new-tag[hidden] {
  display: none;
}

.live-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.live-stats div {
  padding: 8px 6px;
  border: 1px solid var(--line-light);
  border-radius: 2px;
  text-align: center;
}

.live-stats b {
  display: block;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--ivory);
}

.live-stats span {
  font-size: .68rem;
  color: rgba(248, 246, 241, .6);
}

@media (min-width: 900px) {
  .itin {
    grid-template-columns: .85fr 1.15fr;
    gap: 80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .timeline::after {
    transform: none;
  }

  .slide {
    transition: none;
  }
}

/* =============================================================
   V5 · TRES INVITACIONES EN MINIATURA (funcionales)
   ============================================================= */

.minis {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(86%, 320px);
  gap: 24px;
  margin: 0 -22px;
  padding: 0 22px 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 22px;
}

.mini {
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.minis .phone {
  position: relative;
  top: auto;
  width: 100%;
  max-width: 296px;
}

.minis .phone-screen {
  height: 580px;
  overflow: hidden;
}

.minis .phone-screen::before {
  display: none;
}

.mini-cap {
  width: 100%;
  max-width: 296px;
  margin-top: 24px;
}

.mini-plan {
  font-size: .85rem;
  font-weight: 500;
  color: var(--gold-text);
}

.mini-cap h3 {
  margin-top: 4px;
  font-size: 1.35rem;
}

.mini-cap > p:not(.mini-plan) {
  margin-top: 2px;
  font-size: .92rem;
  color: var(--muted);
}

.mini-inc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
  list-style: none;
}

.mini-inc li {
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: .78rem;
  color: var(--ink);
}

@media (min-width: 1100px) {
  .minis {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
}

/* ---------- Dentro del teléfono ---------- */
.th-clasica {
  --bg: #fbf8f1; --ink: #2a2822; --mut: #6b665b; --acc: #9a7433; --acc2: #b99452;
  --card: #ffffff; --ln: rgba(26, 25, 20, .14); --btn-bg: #2b2a26; --btn-fg: #f8f6f1;
  background: var(--bg);
}

.th-gold {
  --bg: #14130e; --ink: #f1e6c8; --mut: #b8aa83; --acc: #d9b865; --acc2: #e6c978;
  --card: #1f1d15; --ln: rgba(217, 184, 101, .3); --btn-bg: #d9b865; --btn-fg: #14130e;
  background: radial-gradient(120% 60% at 50% 0%, #26231a, var(--bg) 70%);
}

.th-bot {
  --bg: #f6e8df; --ink: #4a3b34; --mut: #7d6a60; --acc: #8a6a2f; --acc2: #a98446;
  --card: rgba(255, 255, 255, .72); --ln: rgba(111, 143, 114, .35); --btn-bg: #a98446; --btn-fg: #fff;
  background: linear-gradient(180deg, #f9eee6, #f1d9cc 55%, #f8ece4);
}

.inv-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  color: var(--ink);
  scrollbar-width: none;
}

.inv-scroll::-webkit-scrollbar {
  display: none;
}

.inv-scroll section {
  position: relative;
  padding: 38px 24px;
  text-align: center;
}

.inv-scroll h4 {
  font-family: var(--serif);
  font-weight: 400;
}

/* Entrada al hacer scroll dentro del teléfono */
.rv {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--d, 0s);
}

.rv.l { transform: translateX(-24px); }
.rv.r { transform: translateX(24px); }
.rv.z { transform: scale(.92); }

.rv.in {
  opacity: 1;
  transform: none;
}

/* Parallax interno */
.px {
  translate: 0 calc(var(--sy, 0) * var(--k, -.18) * 1px);
}

/* Botón de música */
.music {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--ln);
  border-radius: 20px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--sans);
  font-size: .68rem;
  color: var(--ink);
  cursor: pointer;
}

.music svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.music .eq {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 11px;
}

.music .eq i {
  width: 2px;
  height: 4px;
  background: var(--acc);
}

.music.on .eq i {
  animation: eq .9s ease-in-out infinite;
}

.music.on .eq i:nth-child(2) { animation-delay: .2s; }
.music.on .eq i:nth-child(3) { animation-delay: .4s; }

@keyframes eq {
  0%, 100% { height: 3px; }
  50% { height: 11px; }
}

/* Hero */
.hero-s {
  min-height: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 60px !important;
}

.h-band {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 44px 0 14px;
  background: #2b2a26;
  font-family: var(--serif);
  font-size: .95rem;
  letter-spacing: .12em;
  color: #d9bd7e;
}

.th-clasica .hero-s {
  padding-top: 110px !important;
}

.orn {
  position: absolute;
  width: 70px;
  height: 112px;
  color: var(--acc2);
  pointer-events: none;
  opacity: .9;
}

.orn.o1 { top: 40px; right: -8px; transform: rotate(32deg); }
.orn.o2 { bottom: 40px; left: -10px; transform: rotate(210deg); }
.th-clasica .orn.o1 { top: 78px; }

.th-clasica .orn ellipse,
.th-gold .orn ellipse {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

.th-clasica .orn path,
.th-gold .orn path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

.th-bot .orn {
  color: #7e9a82;
  width: 90px;
  height: 140px;
}

.th-bot .orn ellipse {
  fill: currentColor;
  opacity: .8;
}

.th-bot .orn path {
  fill: none;
  stroke: #6f8f72;
  stroke-width: 1.5;
}

.th-gold .hero-s::before {
  content: "";
  position: absolute;
  inset: 22px 16px;
  border: 1px solid var(--ln);
  box-shadow: inset 0 0 0 5px var(--bg), inset 0 0 0 6px var(--ln);
  pointer-events: none;
}

.hero-s .k,
.s-rsvp .k {
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--acc);
}

.hero-s .nm {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--acc2);
}

.hero-s .nm em {
  font-style: italic;
  font-size: .7em;
  color: var(--acc);
}

.th-gold .hero-s .nm {
  font-size: 3.6rem;
  font-style: italic;
  background: linear-gradient(180deg, #f6e3a1, #c79a3a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 14px rgba(217, 184, 101, .35));
}

.th-bot .hero-s .nm {
  font-style: italic;
  color: #a37f3f;
}

.hero-s .sub {
  margin-top: 8px;
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mut);
}

.hero-s .dt {
  margin-top: 20px;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--ink);
}

.hero-s .pl {
  margin-top: 4px;
  font-size: .76rem;
  color: var(--mut);
}

.ph-frame {
  display: none;
  width: 130px;
  height: 160px;
  margin-top: 18px;
  border-radius: 65px 65px 6px 6px;
  border: 1px solid var(--ln);
  background-size: cover;
  background-position: center;
}

.ph-frame.has {
  display: block;
}

.hint {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mut);
  transition: opacity .4s ease;
}

.hint::after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin: 6px auto 0;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  animation: bob 1.8s ease-in-out infinite;
}

@keyframes bob {
  50% { transform: translateY(5px) rotate(45deg); }
}

.scrolled .hint {
  opacity: 0;
}

/* Títulos y textos de sección */
.sh {
  font-size: 1.55rem;
  line-height: 1.15;
  color: var(--ink);
}

.th-gold .sh,
.th-bot .sh {
  color: var(--acc2);
}

.sp {
  margin-top: 8px;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--mut);
}

/* Cuenta regresiva */
.cdn {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 18px;
}

.cdn div {
  padding: 12px 2px;
  border: 1px solid var(--ln);
  border-radius: 3px;
  background: var(--card);
}

.cdn b {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--acc2);
  font-variant-numeric: tabular-nums;
}

.cdn span {
  font-size: .6rem;
  color: var(--mut);
}

/* Itinerario */
.tl {
  position: relative;
  margin-top: 22px;
  list-style: none;
  text-align: left;
}

.tl::before,
.tl::after {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 40px;
  left: 20px;
  width: 1px;
}

.tl::before {
  background: var(--ln);
}

.tl::after {
  background: var(--acc2);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 2.2s ease .3s;
}

.tl.in::after {
  transform: scaleY(1);
}

.tl li {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  padding-bottom: 24px;
}

.tl .ic {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--acc2);
  border-radius: 50%;
  background: var(--bg);
  color: var(--acc2);
}

.th-bot .tl .ic {
  background: #f6e8df;
}

.tl .ic svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tl .tm {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.1;
  color: var(--acc);
}

.tl .tt {
  margin-top: 3px;
  font-size: .86rem;
  font-weight: 500;
  color: var(--ink);
}

.tl .tp {
  font-size: .74rem;
  color: var(--mut);
}

/* Mapa */
.map {
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid var(--ln);
  border-radius: 6px;
  background: var(--card);
}

.map svg {
  display: block;
  width: 100%;
  height: auto;
}

.m-bg { fill: #ece2d4; }
.m-park { fill: #cfdac4; }
.m-road { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; }
.m-road.t { stroke-width: 3; }
.m-route { fill: none; stroke: var(--acc2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 400; }
.m-pin path { fill: var(--acc2); }
.m-pin circle { fill: #fff; }
.m-txt { font-family: var(--sans); font-size: 8px; fill: #5b5348; }

.th-gold .m-bg { fill: #24211a; }
.th-gold .m-park { fill: #2d3022; }
.th-gold .m-road { stroke: #3a3626; }
.th-gold .m-txt { fill: #cdbf94; }
.th-bot .m-bg { fill: #efdcd0; }

.map.go .m-route {
  animation: draw 1.6s ease forwards;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

.map .mp {
  padding: 8px 10px;
  border-top: 1px solid var(--ln);
  font-size: .76rem;
  color: var(--ink);
}

.route-msg {
  min-height: 1.4em;
  margin-top: 8px;
  font-size: .72rem;
  color: var(--mut);
}

/* Botones y campos dentro de la invitación */
.btn-in {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-top: 14px;
  padding: 0 22px;
  border: 0;
  border-radius: 2px;
  background: var(--btn-bg);
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 500;
  color: var(--btn-fg);
  cursor: pointer;
  transition: opacity .2s ease;
}

.btn-in:hover {
  opacity: .88;
}

.btn-in.ghost {
  border: 1px solid var(--acc2);
  background: transparent;
  color: var(--acc);
}

.in-l {
  display: block;
  margin-top: 14px;
  font-size: .72rem;
  text-align: left;
  color: var(--mut);
}

.fld {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 9px 10px;
  border: 1px solid var(--ln);
  border-radius: 2px;
  background: var(--card);
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--ink);
}

.fld::placeholder {
  color: var(--mut);
  opacity: .7;
}

textarea.fld {
  resize: none;
}

.inv-scroll :focus-visible {
  outline: 2px solid var(--acc2);
  outline-offset: 2px;
}

.wa-box {
  margin-top: 14px;
  padding: 12px;
  border-radius: 8px 8px 8px 2px;
  background: var(--card);
  border: 1px solid var(--ln);
  text-align: left;
}

.wa-box[hidden] { display: none; }

.wa-k {
  font-size: .64rem;
  color: var(--mut);
}

.wa-m {
  margin-top: 4px;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--ink);
}

/* RSVP con pases */
.gn {
  margin-top: 4px;
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--acc2);
}

.pcs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.pcs div {
  padding: 10px 2px;
  border: 1px solid var(--ln);
  border-radius: 3px;
  background: var(--card);
}

.pcs b {
  display: block;
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
}

.pcs span {
  font-size: .6rem;
  color: var(--mut);
}

.qs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--ln);
  font-size: .82rem;
}

.qs[hidden] { display: none; }

.qs .qc {
  display: flex;
  align-items: center;
  gap: 12px;
}

.qs button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--ln);
  border-radius: 50%;
  background: transparent;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}

.qs button:disabled {
  opacity: .3;
  cursor: default;
}

.qs output {
  min-width: 18px;
  font-family: var(--serif);
  font-size: 1.2rem;
}

.rs-warn {
  margin-top: 10px;
  padding: 8px 10px;
  border-left: 2px solid #c0654d;
  background: rgba(192, 101, 77, .12);
  font-size: .72rem;
  line-height: 1.4;
  text-align: left;
  color: var(--ink);
}

.rs-warn[hidden],
.rs-thanks[hidden],
.rs-form[hidden] { display: none; }

.rs-thanks h4 {
  font-size: 1.5rem;
  color: var(--acc2);
}

.mesa-tag {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 16px;
  border: 1px solid var(--acc2);
  border-radius: 20px;
  font-size: .8rem;
  color: var(--ink);
}

/* Libro de firmas */
.gb-list {
  margin-top: 16px;
  list-style: none;
  text-align: left;
}

.gb-list li {
  margin-top: 8px;
  padding: 10px 12px;
  border-left: 2px solid var(--acc2);
  background: var(--card);
  font-family: var(--serif);
  font-size: .9rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--ink);
  animation: fadein .6s ease both;
}

.gb-list cite {
  display: block;
  margin-top: 3px;
  font-family: var(--sans);
  font-size: .68rem;
  font-style: normal;
  color: var(--mut);
}

@keyframes fadein {
  from { opacity: 0; transform: translateY(8px); }
}

/* Galería colaborativa */
.g-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 16px;
}

.th-bot .ph.empty {
  border-color: rgba(111, 143, 114, .5);
}

.g-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}

.g-row .btn-in {
  margin-top: 0;
}

.qrm {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5px;
  width: 44px;
  height: 44px;
  padding: 4px;
  border: 1px solid var(--ln);
  background: #fff;
}

.qrm i { background: transparent; }
.qrm i.k { background: #2a2822; }

.g-live {
  margin-top: 12px;
  font-size: .7rem;
  color: var(--mut);
}

/* Pie */
.s-ft {
  padding-bottom: 56px !important;
}

.s-ft .nm2 {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--acc2);
}

.s-ft .tag {
  margin-top: 4px;
  font-size: .78rem;
  color: var(--ink);
}

.s-ft .mini-n {
  margin-top: 18px;
  font-size: .64rem;
  color: var(--mut);
}

@media (prefers-reduced-motion: reduce) {
  .rv {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .px { translate: none; }
  .tl::after { transform: none; transition: none; }
  .m-route { stroke-dashoffset: 0; }
  .music.on .eq i, .hint::after { animation: none; }
}

/* Pulidos de las invitaciones en miniatura */
.minis .phone-screen::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  height: 58px;
  background: linear-gradient(to bottom, var(--bg) 55%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.minis .phone-screen.scrolled::after {
  opacity: 1;
}

.th-gold .hero-s .k {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: none;
}

.th-bot {
  background:
    radial-gradient(70% 22% at 18% 10%, rgba(238, 190, 170, .6), transparent 70%),
    radial-gradient(60% 20% at 88% 38%, rgba(214, 170, 150, .4), transparent 70%),
    radial-gradient(70% 22% at 20% 78%, rgba(236, 196, 178, .45), transparent 70%),
    linear-gradient(180deg, #f9eee6, #f1d9cc 55%, #f8ece4);
}

/* =============================================================
   V6 · HÉROES ESPECTACULARES, ITINERARIO EN COLOR, CORAZONES ROJOS
   ============================================================= */

/* ---------- Corazones ---------- */
.hrt {
  display: inline-block;
  color: rgba(26, 25, 20, .5);
  transition: color .2s ease;
}

.hrt.on,
.hrt.red {
  color: #e5384f;
}

.hrt.pop {
  animation: pop .45s ease;
}

@keyframes pop {
  0% { transform: scale(.5); }
  55% { transform: scale(1.6); }
  100% { transform: scale(1); }
}

.screen-cap .hrt.red {
  margin-right: 2px;
}

/* ---------- Héroes ---------- */
.hero-s.hero-x {
  min-height: 580px;
  justify-content: flex-end;
  padding: 0 !important;
}

.hbg {
  position: absolute;
  inset: -40px 0;
  z-index: 0;
  overflow: hidden;
}

.kb,
.sl {
  position: absolute;
  inset: 0;
  background-color: #cdb99d;
  background-size: cover;
  background-position: center;
}

.kb {
  transform-origin: 50% 35%;
  animation: kenburns 20s ease-in-out infinite alternate;
}

@keyframes kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.14); }
}

.sl {
  opacity: 0;
  transform: scale(1);
  transition: opacity 1.4s ease, transform 9s linear;
}

.sl.on {
  opacity: 1;
  transform: scale(1.12);
}

.hshade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(10, 8, 4, .38) 0%, rgba(10, 8, 4, 0) 32%, rgba(14, 10, 6, .55) 62%, rgba(14, 10, 6, .86) 100%);
  pointer-events: none;
}

.hero-slides .hshade {
  background: linear-gradient(to bottom, rgba(40, 24, 20, .35) 0%, rgba(40, 24, 20, 0) 30%, rgba(46, 28, 24, .5) 60%, rgba(40, 22, 18, .85) 100%);
}

.h-frame {
  position: absolute;
  inset: 14px;
  z-index: 2;
  border: 1px solid rgba(240, 219, 166, .6);
  pointer-events: none;
}

.hero-x .hcont {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 26px 74px;
  text-align: center;
}

.hero-x .k {
  color: #f0dba6;
}

.hero-x .nm,
.th-bot .hero-x .nm {
  margin-top: 8px;
  font-size: 3.1rem;
  color: #fff;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .45);
}

.hero-x .nm em,
.th-bot .hero-x .nm em {
  color: #f0dba6;
}

.hero-x .dt {
  margin-top: 18px;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

.hero-x .pl {
  color: rgba(255, 255, 255, .82);
}

.hero-x .hint {
  z-index: 3;
  color: rgba(255, 255, 255, .85);
}

.hero-x .orn {
  z-index: 3;
}

.th-bot .hero-x .orn {
  color: #c9dbc6;
}

.dots {
  position: absolute;
  bottom: 46px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.dots i {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .5);
  transition: width .4s ease, background-color .4s ease;
}

.dots i.on {
  width: 20px;
  background: #fff;
}

/* Héroe dorado: destellos, anillo giratorio y brillo en el nombre */
.hero-gold {
  min-height: 580px;
}

.ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 310px;
  height: 310px;
  margin: -175px 0 0 -155px;
  pointer-events: none;
}

.ring svg {
  display: block;
  width: 100%;
  height: 100%;
  animation: spin 80s linear infinite;
}

.ring .r1 {
  fill: none;
  stroke: #d9b865;
  stroke-width: .7;
  stroke-dasharray: 1 5;
  stroke-linecap: round;
}

.ring .r2 {
  fill: none;
  stroke: rgba(217, 184, 101, .35);
  stroke-width: .5;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.xvg {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--serif);
  font-size: 12rem;
  font-style: italic;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(217, 184, 101, .18);
  pointer-events: none;
}

.spk {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f6e3a1;
  box-shadow: 0 0 10px 3px rgba(246, 227, 161, .55);
  opacity: .1;
  animation: twinkle 3.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes twinkle {
  0%, 100% { opacity: .1; transform: scale(.5); }
  50% { opacity: 1; transform: scale(1.25); }
}

.th-gold .hero-gold .nm {
  position: relative;
  z-index: 1;
  background: linear-gradient(100deg, #b88a2e 0%, #f6e3a1 30%, #fff6d6 45%, #f6e3a1 60%, #b88a2e 100%);
  background-size: 240% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 5.5s linear infinite;
}

@keyframes shimmer {
  from { background-position: 100% 0; }
  to { background-position: -40% 0; }
}

.hero-gold > p:not(.hint) {
  position: relative;
  z-index: 1;
}

/* ---------- Itinerario que cambia de color al bajar ---------- */
@property --glow {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

.s-it {
  overflow: hidden;
}

.s-it::before {
  content: "";
  position: absolute;
  left: -30%;
  right: -30%;
  top: 22%;
  height: 62%;
  background: radial-gradient(closest-side, var(--glow, transparent), transparent);
  opacity: .32;
  transition: --glow 1s ease;
  pointer-events: none;
}

.s-it > * {
  position: relative;
}

.tl::after,
.tl.in::after {
  width: 2px;
  left: 19px;
  background: linear-gradient(to bottom, var(--lg));
  transform: none;
  transition: none;
  clip-path: inset(0 0 calc((1 - var(--p, 0)) * 100%) 0);
}

.tl .ic {
  transition: background-color .6s ease, border-color .6s ease, color .6s ease, box-shadow .6s ease;
}

.tl li.on .ic {
  background: var(--c);
  border-color: var(--c);
  color: #fff;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 22%, transparent);
}

.tl .tm {
  transition: color .6s ease;
}

.tl li.on .tm {
  color: var(--c);
}

/* ---------- Hero de la página principal: teléfonos estáticos ---------- */
.hero-trio {
  aspect-ratio: 1 / 1.08;
}

.hero-trio .hp {
  aspect-ratio: 296 / 598;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.hp .phone {
  position: absolute;
  top: 0;
  left: 0;
  width: 296px;
  transform: scale(var(--s, .8));
  transform-origin: 0 0;
}

.hp .phone-screen {
  height: 580px;
}

.hp .phone-screen::before {
  display: none;
}

.is-static .inv-scroll {
  overflow: hidden;
}

.is-static .hint {
  display: none;
}

.is-static *,
.is-static *::before,
.is-static *::after {
  animation: none !important;
  transition: none !important;
}

.is-static .sl.on {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .kb, .ring svg, .spk, .th-gold .hero-gold .nm { animation: none; }
  .sl, .sl.on { transition: opacity .01s; transform: none; }
}

/* Hero principal: teléfonos más separados para que se lean los nombres */
.hero-trio {
  aspect-ratio: 1 / .98;
}

.hero-trio .hp {
  width: 40%;
}

.hero-trio .t1 {
  top: 12%;
  transform: rotate(-5deg);
}

.hero-trio .t3 {
  top: 12%;
  transform: rotate(5deg);
}

.hero-trio .t2 {
  left: 30%;
}

@media (min-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .hero-trio {
    max-width: 620px;
  }
}

/* Retoques finales de los héroes */
.hero-x .k {
  font-size: .6rem;
  letter-spacing: .16em;
}

.hero-slides .orn.o1 {
  top: 34px;
  right: -26px;
  width: 70px;
  height: 110px;
  opacity: .8;
}

.hero-slides .orn.o2 {
  bottom: -14px;
  left: -28px;
  width: 70px;
  height: 110px;
  opacity: .8;
}

/* =============================================================
   V7 · ESTRUCTURA DE INVITACIÓN REAL (bandas, apreciable, slider…)
   ============================================================= */

.th-clasica { --band: #2b2a26; --band-fg: #f4efe3; --band-acc: #d9bd7e; --hl: #2b2a26; --hl-fg: #f4efe3; }
.th-gold    { --band: #0a0906; --band-fg: #f1e6c8; --band-acc: #d9b865; --hl: #d9b865; --hl-fg: #14130e; }
.th-bot     { --band: #4a5237; --band-fg: #f4efe3; --band-acc: #dbc78c; --hl: #4a5237; --hl-fg: #f4efe3; }

/* Banda oscura: re-tematiza todo lo que lleva dentro */
.inv-scroll .band {
  --ink: var(--band-fg);
  --mut: color-mix(in srgb, var(--band-fg) 70%, transparent);
  --acc: var(--band-acc);
  --acc2: var(--band-acc);
  --card: rgba(255, 255, 255, .07);
  --ln: color-mix(in srgb, var(--band-acc) 40%, transparent);
  --btn-bg: var(--band-acc);
  --btn-fg: var(--band);
  background: var(--band);
  color: var(--band-fg);
}

.th-gold .inv-scroll .band {
  border-top: 1px solid rgba(217, 184, 101, .25);
  border-bottom: 1px solid rgba(217, 184, 101, .25);
}

/* Etiqueta con rayitas a los lados */
.kl::before,
.kl::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  margin: 0 10px;
  vertical-align: middle;
  background: currentColor;
  opacity: .7;
}

.inv-scroll .k {
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--acc);
}

.hero-x .k.kl::before,
.hero-x .k.kl::after {
  display: none;
}

/* ---------- Hero: las tres con foto ---------- */
.hero-gold .hshade {
  background: linear-gradient(to bottom, rgba(10, 8, 4, .6) 0%, rgba(10, 8, 4, .15) 30%, rgba(10, 8, 4, .62) 62%, rgba(10, 8, 4, .94) 100%);
}

.hero-gold .kb {
  filter: saturate(.9) contrast(1.02);
}

.hero-gold .spk {
  z-index: 3;
}

.hero-bot .hshade {
  background: linear-gradient(to bottom, rgba(36, 40, 24, .3) 0%, rgba(36, 40, 24, 0) 30%, rgba(40, 36, 22, .5) 62%, rgba(32, 30, 16, .88) 100%);
}

.hero-classic .hshade {
  background: linear-gradient(to bottom, rgba(20, 14, 6, .28) 0%, rgba(20, 14, 6, 0) 28%, rgba(20, 14, 6, .5) 62%, rgba(16, 12, 6, .88) 100%);
}

/* ---------- Apreciable + pases ---------- */
.s-guest {
  padding-bottom: 34px;
}

.s-guest .gn,
.gn {
  margin-top: 8px;
  font-size: 1.9rem;
  line-height: 1.15;
  color: var(--ink);
}

.pcg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 20px;
  border: 1px solid var(--ln);
}

.pcg div {
  padding: 16px 4px 14px;
  border-right: 1px solid var(--ln);
  background: var(--card);
}

.pcg div:last-child {
  border-right: 0;
}

.pcg .tot {
  background: var(--hl);
  color: var(--hl-fg);
}

.inv-scroll .band .pcg .tot {
  --hl: var(--band-acc);
  --hl-fg: var(--band);
}

.pcg b {
  display: block;
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1;
}

.pcg .tot b {
  color: var(--hl-fg);
}

.pcg span {
  display: block;
  margin-top: 6px;
  font-size: .56rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mut);
}

.pcg .tot span {
  color: var(--hl-fg);
  opacity: .85;
}

.s-guest .btn-in,
.s-rsvp .btn-in {
  min-width: 200px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .7rem;
}

/* ---------- Cuenta regresiva (2×2) + calendario ---------- */
.band .cdn {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 20px;
}

.band .cdn div {
  padding: 18px 4px 14px;
  border: 1px solid var(--ln);
  background: transparent;
  border-radius: 0;
}

.band .cdn b {
  font-size: 2.3rem;
  color: var(--band-fg);
}

.band .cdn span {
  display: block;
  margin-top: 6px;
  font-size: .56rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--band-acc);
}

.cal-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}

.cal-row .btn-in {
  min-width: 190px;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.cal-msg {
  min-height: 1.5em;
  margin-top: 10px;
  font-size: .7rem;
  color: var(--mut);
}

/* ---------- Galería slider en arco ---------- */
.s-gal {
  overflow: hidden;
}

.archwrap {
  position: relative;
  width: 82%;
  margin: 22px auto 0;
}

.arch {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 2px solid var(--acc2);
  border-radius: 999px 999px 8px 8px;
  background: var(--card);
}

.gtrack {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.gtrack::-webkit-scrollbar {
  display: none;
}

.gs {
  flex: 0 0 100%;
  scroll-snap-align: center;
  background-size: cover;
  background-position: center;
}

.ga {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 28px;
  height: 28px;
  padding: 0 0 3px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  font-size: 1.3rem;
  line-height: 1;
  color: #2a2822;
  cursor: pointer;
  transform: translateY(-50%);
}

.ga.prev { left: 6px; }
.ga.next { right: 6px; }

.archwrap .orn {
  top: -10px;
  z-index: 3;
  width: 58px;
  height: 92px;
}

.archwrap .orn.ol { left: -15px; right: auto; transform: rotate(-28deg); }
.archwrap .orn.or { right: -15px; left: auto; transform: rotate(28deg) scaleX(-1); }

.gdots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}

.gdots i {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--ln);
  transition: width .3s ease, background-color .3s ease;
}

.gdots i.on {
  width: 18px;
  background: var(--acc2);
}

/* ---------- Itinerario: un solo color (dorado) ---------- */
.s-it::before {
  display: none;
}

.tl .ic {
  color: var(--c);
  border-color: var(--c);
}

.tl .tm {
  color: var(--c);
}

/* ---------- Vestimenta ---------- */
.dress-g {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
}

.dic {
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 auto;
  color: var(--acc);
}

.dic svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dress-g h5 {
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--acc);
}

.dress-g p {
  margin-top: 4px;
  font-size: .72rem;
  line-height: 1.5;
  color: var(--ink);
}

.dress-g em {
  display: block;
  margin-top: 8px;
  font-size: .64rem;
  line-height: 1.45;
  color: var(--mut);
}

.s-dress .btn-in {
  margin-top: 18px;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.tip-msg {
  margin-top: 12px;
  font-size: .72rem;
  line-height: 1.5;
  color: var(--mut);
}

.tip-msg[hidden],
.gift-d[hidden],
.th-note[hidden] { display: none; }

/* ---------- Mesa de regalos ---------- */
.gift-c {
  margin-top: 18px;
  padding: 18px 16px 20px;
  border: 1px solid var(--ln);
  background: var(--card);
}

.gift-c > p:first-child {
  font-family: var(--serif);
  font-size: .86rem;
  font-style: italic;
  line-height: 1.65;
  color: var(--ink);
}

.gift-c .btn-in {
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.gift-d {
  margin-top: 12px;
  font-size: .7rem;
  line-height: 1.5;
  color: var(--mut);
}

/* ---------- Confirmación (banda) ---------- */
.s-rsvp .sh,
.s-gb .sh,
.s-dress .sh {
  color: var(--ink);
}

.sels {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 14px;
}

.sels label {
  font-family: var(--serif);
  font-size: .82rem;
  font-style: italic;
  color: var(--mut);
}

.sels select {
  display: block;
  width: 86px;
  margin-top: 6px;
  padding: 9px 8px;
  border: 0;
  border-radius: 3px;
  background: #fff;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: #2a2822;
}

.band textarea.fld {
  background: #fbfbf9;
  border-color: transparent;
  color: #2a2822;
}

.band .in-l {
  font-weight: 500;
  color: var(--acc);
}

.cnt {
  margin-top: 6px;
  font-size: .66rem;
  text-align: right;
  color: var(--mut);
}

.s-rsvp .btn-in {
  margin-top: 16px;
}

.rs-thanks .sh {
  margin-bottom: 4px;
}

.rs-thanks .pcg {
  margin-top: 16px;
}

.th-note {
  margin-top: 10px;
  font-size: .72rem;
  color: var(--mut);
}

/* ---------- Libro de firmas (carrusel) ---------- */
.gb-car {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
}

.car-b {
  width: 28px;
  height: 36px;
  border: 0;
  background: none;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--acc);
  cursor: pointer;
}

.qm {
  display: block;
  font-family: var(--serif);
  font-size: 3rem;
  line-height: .7;
  color: var(--acc);
  opacity: .8;
}

.gb-t {
  min-height: 5.6em;
  margin-top: 10px;
  font-family: var(--serif);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
}

.gb-w {
  margin-top: 8px;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--acc);
}

/* ---------- Cierre ---------- */
.s-close {
  padding-top: 46px;
}

.cl-p {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: .9rem;
  font-style: italic;
  line-height: 1.65;
  color: var(--ink);
}

.s-close .rule {
  display: block;
  width: 56px;
  height: 1px;
  margin: 22px auto 0;
  background: var(--acc2);
}

.s-close .script {
  margin-top: 18px;
  font-family: var(--serif);
  font-size: 2.2rem;
  font-style: italic;
  line-height: 1.1;
  color: var(--acc);
}

.th-gold .s-close .script { color: var(--acc2); }

/* Galería colaborativa: fotos reales */
.ph {
  background-size: cover;
  background-position: center;
}

@media (prefers-reduced-motion: reduce) {
  .gtrack { scroll-behavior: auto; }
}

/* Kicker del héroe: se mantiene claro sobre la foto */
.inv-scroll .hero-x .k {
  color: #f0dba6;
  font-size: .6rem;
  letter-spacing: .16em;
}

.th-gold .inv-scroll .hero-gold .k {
  font-size: 1.5rem;
  letter-spacing: .1em;
  text-transform: none;
}

/* Retoques V7 */
.kl {
  white-space: nowrap;
}

.kl::before,
.kl::after {
  width: 14px;
  margin: 0 8px;
}

.band .fld::placeholder {
  color: #8a857a;
  opacity: 1;
}

.hero-bot .orn.o1 {
  top: 34px;
  right: -26px;
  width: 70px;
  height: 110px;
  opacity: .85;
}

.hero-bot .orn.o2 {
  bottom: -16px;
  left: -30px;
  width: 70px;
  height: 110px;
  opacity: .85;
}

.g-grid .ph .like {
  right: 4px;
  bottom: 4px;
  padding: 4px 7px;
  font-size: .64rem;
}

/* El corazón dentro del botón de "me gusta" no es una etiqueta flotante */
.ph .hrt {
  position: static;
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: inherit;
  color: rgba(26, 25, 20, .5);
}

.ph .hrt.on {
  color: #e5384f;
}

/* =============================================================
   V8 · VENTANAS MODALES ("Más detalles") Y DEMO DE LOS XV
   ============================================================= */

.mini-more {
  min-height: 44px;
  margin-top: 18px;
  padding: 0 24px;
  border: 1px solid var(--carbon);
  border-radius: 2px;
  background: transparent;
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 500;
  color: var(--carbon);
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}

.mini-more:hover {
  background: var(--carbon);
  color: var(--ivory);
}

/* ---------- Modal ---------- */
.modal {
  width: min(1180px, calc(100% - 20px));
  max-width: none;
  max-height: calc(100dvh - 20px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--ink);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .7);
}

.modal::backdrop {
  background: rgba(14, 12, 8, .74);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.modal-light {
  background: var(--ivory);
}

.modal-dark {
  background: var(--carbon);
  color: var(--ivory);
}

html.modal-open {
  overflow: hidden;
}

.modal-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: flex-end;
  height: 0;
}

.modal-x {
  width: 42px;
  height: 42px;
  margin: 14px 14px 0 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--ivory);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--carbon);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.modal-x:hover {
  background: var(--carbon);
  color: var(--ivory);
}

.modal-dark .modal-x {
  border-color: var(--line-light);
  background: var(--carbon-2);
  color: var(--ivory);
}

.modal-dark .modal-x:hover {
  background: var(--gold);
  color: var(--carbon);
}

.modal :focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 3px;
}

.modal-dark :focus-visible {
  outline-color: var(--gold-light);
}

.modal .section,
.modal .section.dark {
  padding: 64px 0 52px;
  background: transparent;
}

.modal .wrap {
  padding: 0 32px;
}

.modal .section-head {
  padding-right: 40px;
}

.modal .phone {
  top: 24px;
}

@media (max-width: 640px) {
  .modal {
    width: calc(100% - 12px);
    max-height: calc(100dvh - 12px);
  }

  .modal .wrap {
    padding: 0 18px;
  }

  .modal .section,
  .modal .section.dark {
    padding: 60px 0 40px;
  }
}

/* ---------- Panel: datos del evento ---------- */
.panel-ev {
  margin-top: 14px;
  font-size: .82rem;
  color: var(--gold-light);
}

/* ---------- Teléfono de la demo con el tema de los XV (negro y oro) ---------- */
.phone-screen.xv {
  background: radial-gradient(120% 60% at 50% 0%, #26231a, #14130e 70%);
  color: #f1e6c8;
}

.phone-screen.xv::before {
  border-color: rgba(217, 184, 101, .4);
}

.xv .inv-kicker { color: #d9b865; }

.xv .inv-names {
  font-style: italic;
  font-size: 2.6rem;
  background: linear-gradient(100deg, #b88a2e 0%, #f6e3a1 40%, #c79a3a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.xv .inv-date { color: #e9dcb8; }

.xv .cd { border-color: rgba(217, 184, 101, .3); }
.xv .cd b { color: #f1e6c8; }
.xv .cd span { color: #b8aa83; }

.xv .gc-kicker { color: #b8aa83; }
.xv .gc-name,
.xv .f-title,
.xv .th-title { color: #e6c978; }

.xv .pcards div {
  border-color: rgba(217, 184, 101, .3);
  background: rgba(255, 255, 255, .05);
}

.xv .pcards b { color: #f1e6c8; }
.xv .pcards span,
.xv .f-sub,
.xv .f-lbl,
.xv .f-count,
.xv .th-text { color: #b8aa83; }

.xv .f-sub strong { color: #f1e6c8; }

.xv .btn-dark {
  background: #d9b865;
  color: #14130e;
}

.xv .btn-dark:hover {
  background: #e6c978;
}

.xv .ph-back { color: #b8aa83; }

.xv .stp {
  border-bottom-color: rgba(217, 184, 101, .22);
  color: #f1e6c8;
}

.xv .ctr button {
  border-color: rgba(217, 184, 101, .45);
  color: #f1e6c8;
}

.xv .ctr button:hover:not(:disabled) {
  background: #d9b865;
  color: #14130e;
}

.xv .ctr output { color: #f1e6c8; }

.xv #d-msg {
  border-color: rgba(217, 184, 101, .35);
  background: rgba(255, 255, 255, .06);
  color: #f1e6c8;
}

.xv #d-msg::placeholder { color: #8f845f; }

.xv .f-warn {
  background: rgba(224, 112, 122, .14);
  color: #f2b3a5;
}

/* Botones "Más detalles" alineados al fondo de cada columna */
.mini {
  align-self: stretch;
}

.mini-cap {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.mini-inc {
  margin-bottom: 4px;
}

.mini-more {
  align-self: flex-start;
  margin-top: auto;
}

.mini-inc + .mini-more {
  margin-top: auto;
  position: relative;
  top: 0;
}

.mini-inc {
  margin-bottom: 18px;
}

/* =============================================================
   V9 · "TOCA PARA EXPLORAR": el scroll es de la página hasta activar un teléfono
   ============================================================= */

.phone-lock {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 26px;
  border: 0;
  border-radius: 34px;
  background: transparent;
  cursor: pointer;
}

.phone-lock[hidden] {
  display: none;
}

.lock-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 30px;
  background: rgba(20, 18, 12, .62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 500;
  color: #fff;
  transition: background-color .25s ease, border-color .25s ease;
}

.lock-pill svg {
  width: 17px;
  height: 17px;
}

.phone-lock:hover .lock-pill,
.phone-lock:focus-visible .lock-pill {
  background: rgba(20, 18, 12, .82);
  border-color: var(--gold-light);
}

.phone-lock:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: -4px;
}

@media (prefers-reduced-motion: no-preference) {
  .lock-pill {
    animation: nudge 2.8s ease-in-out infinite;
  }

  @keyframes nudge {
    50% { transform: translateY(-3px); }
  }
}

/* Mientras está bloqueado, el desplazamiento nunca es del teléfono */
.is-locked .inv-scroll {
  overflow-y: hidden;
}

.is-locked .hint {
  opacity: 0;
}

.lock-exit {
  position: absolute;
  top: 16px;
  left: 18px;
  z-index: 6;
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 20px;
  background: rgba(20, 18, 12, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}

.lock-exit[hidden] {
  display: none;
}

.lock-exit:hover {
  background: rgba(20, 18, 12, .85);
}

/* Teléfono activo: aro dorado para que se note que está en modo explorar */
.minis .phone.active {
  box-shadow: 0 0 0 3px rgba(185, 148, 82, .65), 0 44px 70px -34px rgba(26, 25, 20, .65), inset 0 0 0 2px #2d2c27;
}

.minis .phone {
  transition: box-shadow .3s ease;
}

/* =============================================================
   V10 · ANTES/DESPUÉS DEL EVENTO · PAQUETES INTERACTIVOS · WHATSAPP
   ============================================================= */

/* ---------- Interruptor Antes / Después ---------- */
.mode-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.mode-btn {
  min-height: 42px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.mode-btn:hover {
  border-color: var(--carbon);
}

.mode-btn[aria-pressed="true"] {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--carbon);
}

/* ---------- Pantalla "después del evento" (teléfono XV) ---------- */
#scr-after .th-title {
  margin-top: 8px;
  font-size: 1.7rem;
}

.af-guest {
  margin-top: 10px;
  font-size: .76rem;
  line-height: 1.45;
  color: #e9dcb8;
}

.af-h {
  margin-top: 16px;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: #e6c978;
}

.af-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
}

.af-ph {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 2px;
  background-color: #2a2820;
  background-size: cover;
  background-position: center 20%;
}

.af-rank {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 3px 8px;
  border-radius: 20px;
  background: rgba(20, 18, 12, .75);
  font-size: .64rem;
  font-weight: 600;
  color: #f1e6c8;
}

.af-rank.top {
  background: #d9b865;
  color: #14130e;
}

.af-like {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 4px 8px;
  border: 0;
  border-radius: 20px;
  background: rgba(248, 246, 241, .94);
  font-family: var(--sans);
  font-size: .68rem;
  line-height: 1;
  color: var(--carbon);
  cursor: pointer;
}

.af-like .hrt {
  color: rgba(26, 25, 20, .5);
}

.af-like .hrt.on {
  color: #e5384f;
}

.xv .f-count,
.xv .th-text {
  margin-top: 12px;
}

/* Panel: evento en curso */
.panel-closed {
  margin-top: 14px;
  padding: 10px 12px;
  border-left: 2px solid var(--gold);
  background: rgba(185, 148, 82, .14);
  font-size: .84rem;
  line-height: 1.5;
}

.panel-closed[hidden] {
  display: none;
}

.panel-closed span {
  display: block;
  margin-top: 2px;
  color: var(--gold-light);
}

/* ---------- Paquetes: qué plan incluye cada función ---------- */
.tier {
  transition: opacity .3s ease, outline-color .3s ease, transform .3s ease;
}

.feats li {
  margin-left: -8px;
  padding: 4px 8px 4px 34px;
  border-radius: 2px;
  cursor: default;
  transition: background-color .2s ease;
}

.feats li::before {
  left: 10px;
  top: .72em;
}

.feats li:hover,
.feats li:focus-visible,
.feats li.hl-li {
  background: rgba(185, 148, 82, .16);
}

.tier-feature .feats li:hover,
.tier-feature .feats li:focus-visible,
.tier-feature .feats li.hl-li {
  background: rgba(185, 148, 82, .24);
}

.inc-tag {
  position: absolute;
  top: -11px;
  right: 16px;
  padding: 4px 12px;
  border-radius: 20px;
  background: var(--gold);
  font-size: .72rem;
  font-weight: 600;
  color: var(--carbon);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

.tier.inc {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.tier.inc .inc-tag {
  opacity: 1;
  transform: none;
}

.tier.exc {
  opacity: .42;
}

.tiers-hint {
  min-height: 1.6em;
  margin-top: 22px;
  font-size: .92rem;
  text-align: center;
  color: var(--muted);
}

/* ---------- WhatsApp ---------- */
.wa-btn {
  margin-top: 24px;
  min-width: 230px;
}

.wa-note {
  margin-top: 10px;
  max-width: 40ch;
  font-size: .82rem;
  color: rgba(248, 246, 241, .6);
}

@media (prefers-reduced-motion: reduce) {
  .tier, .inc-tag { transition: none; }
}

/* La atenuación de planes no incluidos debe ganarle a la entrada suave de las tarjetas */
.js .tier.exc.reveal.in,
.tier.exc {
  opacity: .42;
}

/* =============================================================
   V11 · INTERACTUAR MÁS NOTORIO · CÓMO FUNCIONA COMPACTO · CONTACTO COMPACTO
   ============================================================= */

/* ---------- Invitaciones bloqueadas: velo suave + botón dorado grande ---------- */
.phone-lock {
  align-items: center;
  padding: 0;
  background: rgba(14, 12, 8, .24);
  -webkit-backdrop-filter: blur(3px) saturate(1.05);
  backdrop-filter: blur(3px) saturate(1.05);
  transition: background-color .3s ease;
}

.phone-lock:hover {
  background: rgba(14, 12, 8, .16);
}

.lock-pill {
  gap: 10px;
  padding: 15px 24px;
  border: 0;
  border-radius: 40px;
  background: var(--gold);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--carbon);
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .65);
  animation: none;
  transition: background-color .25s ease, transform .25s ease;
}

.lock-pill svg {
  width: 21px;
  height: 21px;
}

.phone-lock:hover .lock-pill,
.phone-lock:focus-visible .lock-pill {
  background: var(--gold-light);
  border-color: transparent;
  transform: scale(1.04);
}

@media (prefers-reduced-motion: no-preference) {
  .lock-pill {
    animation: ring 2.3s ease-out infinite;
  }

  @keyframes ring {
    0% { box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .65), 0 0 0 0 rgba(228, 207, 159, .75); }
    70%, 100% { box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .65), 0 0 0 18px rgba(228, 207, 159, 0); }
  }
}

/* ---------- Contacto compacto ---------- */
.contact-quick {
  margin-top: 26px;
}

.contact-quick .wa-btn {
  margin-top: 0;
  min-width: 0;
  width: 100%;
  max-width: 320px;
}

.cq-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 16px;
  list-style: none;
  font-size: .9rem;
}

.cq-links a {
  overflow-wrap: anywhere;
  color: rgba(248, 246, 241, .8);
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}

.cq-links a:hover {
  color: var(--ivory);
  border-color: var(--gold);
}

/* ---------- Celular: secciones más compactas ---------- */
@media (max-width: 559px) {

  /* Cómo funciona: número pequeño a la izquierda, texto a la derecha */
  #como-funciona.section {
    padding: 56px 0 48px;
  }

  #como-funciona .section-head {
    margin-bottom: 22px;
  }

  .steps {
    gap: 0;
  }

  .steps li {
    display: grid;
    grid-template-columns: 42px 1fr;
    column-gap: 14px;
    align-items: start;
    padding: 18px 0 20px;
  }

  .step-n {
    grid-row: 1 / span 2;
    font-size: 2.3rem;
    line-height: 1;
  }

  .steps h3 {
    grid-column: 2;
    margin: 2px 0 4px;
    font-size: 1.1rem;
  }

  .steps p {
    grid-column: 2;
    max-width: none;
    font-size: .92rem;
    line-height: 1.55;
  }

  /* Contacto */
  .contacto.section {
    padding: 56px 0 48px;
  }

  .contact-grid {
    gap: 28px;
  }

  .contact-copy h2 {
    font-size: 1.9rem;
  }

  .contact-copy p {
    margin-top: 12px;
    font-size: .95rem;
  }

  .contact-quick {
    margin-top: 20px;
  }

  .contact-quick .wa-btn {
    max-width: none;
  }
}

/* Botón "interactuar": una sola línea, sin ocupar todo el ancho */
.lock-pill {
  gap: 9px;
  padding: 13px 20px;
  font-size: .86rem;
  white-space: nowrap;
}

.lock-pill svg {
  flex: none;
  width: 19px;
  height: 19px;
}

.phone-lock {
  -webkit-backdrop-filter: blur(2.5px) saturate(1.05);
  backdrop-filter: blur(2.5px) saturate(1.05);
}

/* =============================================================
   V12 · BOTÓN DE MÚSICA CIRCULAR · RAMAS CON CURVATURA
   ============================================================= */

/* ---------- Botón de música: círculo dorado con "PLAY" curvo ---------- */
.music {
  top: auto;
  right: auto;
  left: 14px;
  bottom: 16px;
  flex-direction: column;
  align-items: center;
  gap: 0;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #fff;
  cursor: pointer;
}

.music .m-arc {
  display: block;
  width: 56px;
  height: 25px;
  margin-bottom: -7px;
  overflow: visible;
  fill: none;
}

.music .m-arc text {
  font-family: var(--sans);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .2em;
  fill: #f7f1e1;
  stroke: rgba(20, 18, 12, .7);
  stroke-width: 2.4px;
  paint-order: stroke;
}

.music .m-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e6d3a0, #a98a4a);
  box-shadow: 0 8px 18px -5px rgba(0, 0, 0, .6), inset 0 0 0 2px rgba(255, 255, 255, .4);
  color: #fff;
  transition: transform .25s ease, filter .25s ease;
}

.music .m-btn svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.music .i-play {
  transform: translateX(1px);
}

.music .i-pause {
  display: none;
}

.music.on .i-play {
  display: none;
}

.music.on .i-pause {
  display: block;
}

.music:hover .m-btn,
.music:focus-visible .m-btn {
  transform: scale(1.07);
  filter: brightness(1.08);
}

.music:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 4px;
  border-radius: 28px;
}

@media (prefers-reduced-motion: no-preference) {
  .music.on .m-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: musicring 1.8s ease-out infinite;
  }

  @keyframes musicring {
    0% { box-shadow: 0 0 0 0 rgba(230, 211, 160, .75); }
    100% { box-shadow: 0 0 0 14px rgba(230, 211, 160, 0); }
  }
}

/* ---------- Ramas curvas ---------- */
.orn .stem {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
}

.orn .lf {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

.orn .vein {
  fill: none;
  stroke: currentColor;
  stroke-width: .6;
  opacity: .55;
}

.th-bot .orn path.stem {
  stroke: #6f8f72;
  stroke-width: 1.7;
}

.th-bot .orn path.lf {
  fill: currentColor;
  stroke: none;
  opacity: .85;
}

.th-bot .orn path.lf.b {
  opacity: .6;
}

.th-bot .orn path.vein {
  stroke: rgba(255, 255, 255, .55);
  stroke-width: .8;
  opacity: 1;
}

.hero-bot .orn path.stem {
  stroke: #b9d0b6;
}

/* La rama de la galería abraza el arco: más grande y más hacia afuera */
.archwrap .orn {
  top: 7px;
  z-index: 3;
  width: 78px;
  height: 124px;
}

.archwrap .orn.ol { left: -34px; right: auto; transform: rotate(-12deg); }
.archwrap .orn.or { right: -34px; left: auto; transform: rotate(12deg) scaleX(-1); }

/* Música: la etiqueta "PLAY" es un arco concéntrico al círculo (como en tu diseño) */
.music {
  display: block;
  left: 8px;
  bottom: 10px;
  width: 64px;
  height: 64px;
}

.music .m-arc {
  position: absolute;
  inset: 0;
  width: 64px;
  height: 64px;
  margin: 0;
  overflow: visible;
}

.music .m-arc text {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .24em;
  fill: #fff7e0;
  stroke: rgba(20, 18, 12, .6);
  stroke-width: 1.9px;
}

.music .m-btn {
  position: absolute;
  top: 9px;
  left: 9px;
}

/* "PLAY": cinta dorada curva con letras oscuras (legible sobre foto, negro o claro) */
.music .m-arc {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}

.music .m-band {
  fill: none;
  stroke: #dfcb94;
  stroke-width: 11px;
  stroke-linecap: round;
}

.music .m-arc text {
  font-size: 8px;
  letter-spacing: .26em;
  fill: #3b2f12;
  stroke: none;
}

/* =============================================================
   V13 · ACTIVACIÓN SOLO CON EL BOTÓN · MÚSICA BAJO EL VELO
   ============================================================= */

/* La capa ya no es un botón: solo el botón dorado activa la invitación */
.phone-lock {
  cursor: default;
}

@media (hover: hover) {
  .phone-lock {
    cursor: pointer;
  }
}

.lock-pill {
  cursor: pointer;
}

.lock-pill:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* El botón de música queda por DEBAJO del velo: se difumina junto con la invitación */
.music {
  z-index: 4;
}

/* "Seguir bajando": salida más visible en pantallas táctiles */
.lock-exit.big {
  height: 38px;
  padding: 0 16px;
  border-color: var(--gold-light);
  background: rgba(20, 18, 12, .88);
  font-size: .8rem;
  font-weight: 600;
}

/* =============================================================
   V14 · CARRUSEL SIN "TRAMPA": SOLO SE DESPLAZA DE LADO
   ============================================================= */

@media (max-width: 1099px) {

  /* Antes: overflow-y quedaba en "auto" (por tener overflow-x) y el carrusel absorbía los
     deslizamientos verticales con rebote. Ahora el eje vertical es de la página. */
  .minis {
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-top: 8px;
    padding-bottom: 24px;
  }

  .minis::-webkit-scrollbar {
    display: none;
  }
}

/* Puntos indicadores (solo cuando hay carrusel) */
.minis-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

.minis-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: rgba(26, 25, 20, .22);
  cursor: pointer;
  transition: width .3s ease, background-color .3s ease;
}

.minis-dots button.on {
  width: 26px;
  background: var(--gold-text);
}

/* el área de toque es más grande que el punto, sin cambiar su tamaño visual */
.minis-dots button {
  position: relative;
}

.minis-dots button::after {
  content: "";
  position: absolute;
  inset: -12px -6px;
}

@media (min-width: 1100px) {
  .minis-dots {
    display: none;
  }
}

/* =============================================================
   V18 · LISTO PARA PUBLICAR
   ============================================================= */

/* Demos: velo ligero en lugar de desenfoque, para que se lean nombres y fechas */
.phone-lock {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: linear-gradient(to top, rgba(20, 19, 16, .38), rgba(20, 19, 16, 0) 55%);
}

/* Hero: los tres teléfonos ya no se tapan entre sí */
.hero-trio { max-width: 640px; }
.hero-trio .hp { width: 33%; }
.hero-trio .t1 { left: 0; top: 14%; }
.hero-trio .t3 { left: auto; right: 0; top: 14%; }
.hero-trio .t2 { left: 33.5%; top: 0; }

/* Las listas bajo cada demo repetían "Paquetes" */
.mini-inc { display: none; }

/* Textos legibles: mínimo ~14 px en la interfaz del sitio (no toca el interior de los teléfonos) */
.mini-plan, .tool-plan, .hero-note, .demo-note, .tiers-hint, .includes, .tier .sub, .tier-flag,
.field label, .field .msg, .mini-cap p, .mini-more, .price .mxn, .footer-bottom, .footer-links a,
.cq-links, .cq-links a, .gp small, .gp-label, .panel-label, .chip, .nav-links a, .mobile-menu a,
.faq-list summary + p, .b-plan, .opt { font-size: .9rem; }
.hero-note, .demo-note, .tiers-hint { line-height: 1.55; }

/* Precios sin cifra */
.price-ask { font-family: var(--serif); font-size: 1.5rem; margin: 18px 0; }
.price .desde { font-size: .9rem; margin-right: 6px; color: var(--muted); }
.tier-feature .price .desde { color: var(--gold-light); }
.price-note { max-width: 640px; margin: 22px auto 0; text-align: center; color: var(--muted); font-size: .95rem; }

/* Cuadro comparativo (sirve en celular, donde no existe el "pasar el cursor") */
.cmp-wrap { margin-top: 40px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; min-width: 520px; border-collapse: collapse; background: #fcfbf8; border: 1px solid var(--line); }
.cmp caption { text-align: left; font-family: var(--serif); font-size: 1.25rem; padding: 0 0 12px; }
.cmp th, .cmp td { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: .95rem; text-align: center; }
.cmp thead th { background: var(--carbon); color: var(--ivory); font-weight: 500; }
.cmp tbody th { text-align: left; font-weight: 400; }
.cmp .y { color: var(--gold-text); font-weight: 600; }
.cmp .n { color: #a39d90; }
@media (hover: none) { .tiers-hint { display: none; } }

/* Beneficios visibles */
.benefits { list-style: none; display: grid; gap: 28px; margin-top: 40px; grid-template-columns: 1fr; }
.benefits li { border-top: 1px solid var(--gold); padding-top: 18px; }
.benefits h3 { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; margin-bottom: 8px; }
.benefits p { color: var(--muted); font-size: 1rem; }
.b-plan { display: inline-block; margin-top: 10px; color: var(--gold-text); }
.benefits-cta { margin-top: 36px; }
@media (min-width: 760px) { .benefits { grid-template-columns: repeat(2, 1fr); gap: 36px 48px; } }
@media (min-width: 1060px) { .benefits { grid-template-columns: repeat(4, 1fr); } }

/* Prueba social */
.quotes { display: grid; gap: 28px; margin-top: 32px; }
.quotes blockquote { font-family: var(--serif); font-size: 1.25rem; line-height: 1.5; }
.quotes figcaption { margin-top: 10px; color: var(--muted); font-size: .95rem; }
.live-links { margin-top: 28px; } .live-links a { text-decoration: underline; margin-right: 14px; }
.panel-video { display: block; width: 100%; max-width: 720px; margin-top: 28px; }
@media (min-width: 760px) { .quotes { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }

/* Nosotros más corto */
.nosotros .display { font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1.05; }
.nos-facts { margin: 18px 0 0 18px; color: var(--muted); }
.nos-facts li { margin-bottom: 6px; }

/* Contacto: "qué pasa después" llena la columna izquierda */
.after { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line-light); max-width: 460px; }
.after h3 { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; margin-bottom: 14px; }
.after ol { list-style: none; counter-reset: s; display: grid; gap: 12px; }
.after li { counter-increment: s; position: relative; padding-left: 38px; font-size: .95rem; opacity: .92; }
.after li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border: 1px solid var(--gold); border-radius: 50%; text-align: center; line-height: 24px; font-size: .85rem; color: var(--gold-light); }
.opt { font-weight: 400; opacity: .7; }
.consent { margin-top: 4px; }
.chk { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; cursor: pointer; }
.chk input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--gold); }
.chk a { text-decoration: underline; }

/* Pie con legales */
.footer-info { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line-light); font-size: .9rem; opacity: .9; }
.footer-info a { text-decoration: underline; text-underline-offset: 3px; }

/* Páginas legales */
.legal { max-width: 760px; padding: calc(var(--nav-h) + 40px) 20px 80px; }
.legal h1 { font-family: var(--serif); font-weight: 400; font-size: 2rem; margin: 32px 0 10px; }
.legal h2 { font-family: var(--serif); font-weight: 400; font-size: 1.2rem; margin: 26px 0 6px; }
.legal p { color: var(--ink); max-width: 68ch; }
.legal-draft { background: #fff6dc; border: 1px solid var(--gold); padding: 14px 16px; margin-bottom: 20px; }