/* Landing comercial de Brindis (brindis.mx). Mismo sistema visual que las invitaciones
   (tinta + marfil + dorado foil, Cormorant + Jost) para que la landing se vea
   como el producto que vende. Mobile-first; breakpoints en 720 y 1024. */
:root{
  --ink:#0C0B10; --ink-2:#17161D; --ink-3:#221F2B; --ivory:#F3EEE4; --ivory-2:#EAE3D5;
  --gold:#E9B949; --gold-deep:#9C7126; --rose:#AF2D5C; --teal:#2FA9A2;
  --gold-grad:linear-gradient(115deg,#9C7126 0%,#E9B949 28%,#FFF1C7 50%,#E9B949 72%,#9C7126 100%);
  --gold-line:rgba(233,185,73,.45); --gold-line-soft:rgba(233,185,73,.22);
  --font-title:'Cormorant Garamond',Georgia,serif; --font-body:'Jost','Helvetica Neue',Arial,sans-serif;
  --container:1080px; --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--ivory);
  font-family:var(--font-body); font-weight:300; line-height:1.6; font-size:1rem;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
h1,h2,h3{ font-family:var(--font-title); font-weight:600; margin:0; line-height:1.1; }
p{ margin:0 0 1rem; }
a{ color:inherit; }
[hidden]{ display:none !important; }
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 1.25rem; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Dorado foil: relleno de texto con gradiente; el brillo se apaga con reduced-motion. */
.foil{
  background:var(--gold-grad); background-size:200% auto; -webkit-background-clip:text; background-clip:text;
  color:transparent; animation:shine 7s linear infinite;
}
@keyframes shine{ to{ background-position:200% center; } }

.eyebrow{
  display:block; font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
  margin-bottom:.9rem; font-weight:400;
}
.lead{ font-size:1.1rem; max-width:38rem; opacity:.9; }
.section--ivory .lead{ opacity:.85; }

/* Botones (misma forma que el boton RSVP de la invitacion) */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:48px;
  padding:.8rem 1.6rem; border:1px solid var(--gold-line); border-radius:2px; text-decoration:none;
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500; color:var(--ivory);
  background:transparent; cursor:pointer; transition:all .35s var(--ease);
}
.btn:hover,.btn:focus-visible{ border-color:var(--gold); color:var(--gold); }
.btn--primary{ background:var(--gold-grad); background-size:200% auto; color:var(--ink); border-color:transparent; }
.btn--primary:hover,.btn--primary:focus-visible{ background-position:100% center; color:var(--ink); box-shadow:0 12px 32px -10px rgba(233,185,73,.7); }
.section--ivory .btn{ color:var(--ink); border-color:rgba(12,11,16,.35); }
.section--ivory .btn:hover{ color:var(--rose); border-color:var(--rose); }
.section--ivory .btn--primary{ color:var(--ink); border-color:transparent; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* Cabecera */
.site-header{
  position:sticky; top:0; z-index:20; background:rgba(12,11,16,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--gold-line-soft);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; min-height:60px; gap:1rem; }
.brand{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-title); font-size:1.45rem; font-weight:600; letter-spacing:.04em; text-decoration:none; color:var(--ivory); }
.brand-mark{ width:34px; height:34px; flex:none; }
.footer-brand{ display:flex; align-items:center; gap:.5rem; }
.footer-links{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; }
.footer-links a{ color:var(--gold); text-decoration:none; letter-spacing:.06em; }
.footer-links a:hover{ text-decoration:underline; }
.footer-brand .brand-mark{ width:26px; height:26px; }
.nav{ display:none; gap:1.4rem; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; }
.nav a{ text-decoration:none; opacity:.8; }
.nav a:hover{ opacity:1; color:var(--gold); }
.site-header .btn{ min-height:40px; padding:.5rem 1rem; font-size:.72rem; }

/* Hero */
.hero{ position:relative; padding:4.5rem 0 4rem; text-align:center; overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 0%, rgba(233,185,73,.16), transparent 70%);
}
.hero h1{ font-size:clamp(2.4rem,7vw,4.4rem); margin:0 auto 1.25rem; max-width:16ch; filter:drop-shadow(0 4px 24px rgba(0,0,0,.6)); }
.hero .lead{ margin:0 auto 2rem; }
.hero .btn-row{ justify-content:center; margin-bottom:2.5rem; }
.hero-facts{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.25rem 2.5rem; padding:0; margin:0; list-style:none; }
.hero-facts li{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; opacity:.75; }
.hero-facts strong{ display:block; font-family:var(--font-title); font-size:1.9rem; letter-spacing:0; text-transform:none; color:var(--gold); font-weight:600; line-height:1; margin-bottom:.25rem; }

/* Secciones: ritmo oscuro / marfil con filo dorado entre ellas */
.section{ position:relative; padding:4rem 0; }
.section::before{
  content:""; position:absolute; top:0; left:8%; right:8%; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-line),transparent);
}
.section--dark{ background:var(--ink-2); }
.section--ivory{ background:var(--ivory); color:var(--ink); }
.section--ivory .eyebrow{ color:var(--rose); }
.section--ivory h2{ color:var(--ink); }
.section--dark h2{ filter:drop-shadow(0 2px 12px rgba(0,0,0,.5)); }
.section h2{ font-size:clamp(2rem,5.5vw,3rem); margin-bottom:.75rem; }
.section-head{ max-width:44rem; margin-bottom:2.5rem; }

/* Marco ornamental simplificado: doble linea dorada */
.frame{ position:relative; border:1px solid var(--gold-line); padding:1.5rem; }
.frame::after{ content:""; position:absolute; inset:6px; border:1px solid var(--gold-line-soft); pointer-events:none; }
.section--ivory .frame{ border-color:rgba(156,113,38,.5); background:rgba(255,255,255,.35); }

/* Rejilla de servicios y add-ons */
.grid{ display:grid; gap:1.25rem; grid-template-columns:1fr; }
.card h3{ font-size:1.45rem; margin-bottom:.5rem; }
.card p{ font-size:.95rem; margin:0; opacity:.88; }
.card .icon{ width:36px; height:36px; color:var(--gold); margin-bottom:.9rem; }
.section--ivory .card .icon{ color:var(--rose); }
.tag{
  display:inline-block; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  padding:.25rem .6rem; border-radius:2px; margin-bottom:.75rem;
}
.tag--ok{ background:rgba(47,169,162,.18); color:var(--teal); border:1px solid rgba(47,169,162,.5); }
.tag--soon{ background:rgba(233,185,73,.12); color:var(--gold-deep); border:1px solid rgba(233,185,73,.5); }
.section--dark .tag--soon{ color:var(--gold); }
.tag--featured{ background:var(--gold); color:var(--ink); border:1px solid var(--gold); }

/* Demo en vivo */
.demos{ display:grid; gap:1.5rem; }
.demo-card{ display:grid; gap:1.25rem; padding:1.25rem; }
.demo-phone{ display:block; width:min(100%,220px); margin:0 auto; border:1px solid var(--gold-line); border-radius:26px; padding:.5rem; background:var(--ink-3); box-shadow:0 30px 60px -30px rgba(0,0,0,.9); }
.demo-phone img{ display:block; width:100%; height:auto; border-radius:18px; }
.demo-body h3{ font-size:1.7rem; margin:.5rem 0 .25rem; }
.demo-style{ font-size:.85rem; opacity:.75; margin:0 0 1rem; }
.demo-body .check{ margin-bottom:1.25rem; }
.demo-body .check li{ font-size:.92rem; }
.demo-body .btn-row{ display:flex; flex-wrap:wrap; gap:.75rem; }
.check{ list-style:none; padding:0; margin:0 0 1.75rem; display:grid; gap:.6rem; }
.check li{ position:relative; padding-left:1.6rem; font-size:.98rem; }
.check li::before{ content:""; position:absolute; left:0; top:.55em; width:.7rem; height:.7rem; border:1px solid var(--gold); transform:rotate(45deg); }
.section--ivory .check li::before{ border-color:var(--rose); }

/* Como funciona */
.steps{ counter-reset:paso; list-style:none; padding:0; margin:0; display:grid; gap:1.5rem; }
.steps li{ counter-increment:paso; display:grid; grid-template-columns:3.2rem 1fr; gap:1rem; align-items:start; }
.steps li::before{
  content:counter(paso,decimal-leading-zero); font-family:var(--font-title); font-size:2.4rem; line-height:1;
  color:var(--gold); font-weight:600;
}
.steps h3{ font-size:1.3rem; margin-bottom:.3rem; }
.steps p{ font-size:.95rem; margin:0; opacity:.85; }

/* Precios */
.plans{ display:grid; gap:1.25rem; grid-template-columns:1fr; align-items:stretch; }
.plan{ display:flex; flex-direction:column; }
.plan .tag{ align-self:flex-start; }
.plan--featured{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold-line-soft), 0 24px 48px -28px rgba(233,185,73,.5); }
.plan h3{ font-size:1.6rem; }
.plan .price{ font-family:var(--font-title); font-size:2.6rem; font-weight:600; line-height:1; margin:.75rem 0 .25rem; }
.plan .price small{ font-family:var(--font-body); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; opacity:.7; font-weight:400; }
.plan .price-note{ font-size:.8rem; opacity:.7; margin-bottom:1.25rem; }
.plan-specs{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem .9rem; margin:0 0 1.4rem; padding:1rem 0; border-top:1px solid var(--gold-line-soft); border-bottom:1px solid var(--gold-line-soft); }
.plan-specs div{ margin:0; }
.plan-specs dt{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; opacity:.6; }
.plan-specs dd{ margin:.15rem 0 0; font-family:var(--font-title); font-size:1.15rem; font-weight:600; color:var(--gold); }
.plans-soon{ margin-top:1.5rem; border:1px solid var(--gold-line-soft); }
.plans-soon summary{ list-style:none; cursor:pointer; padding:1rem 1.25rem; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; font-size:.95rem; position:relative; padding-right:3rem; }
.plans-soon summary::-webkit-details-marker{ display:none; }
.plans-soon summary::after{ content:"+"; position:absolute; right:1.25rem; top:50%; transform:translateY(-50%); font-size:1.6rem; color:var(--gold); }
.plans-soon[open] summary::after{ content:"\2013"; }
.plans--soon{ padding:0 1.25rem 1.25rem; }
.plans--soon .plan{ opacity:.85; }
.plan .check{ flex:1; margin-bottom:1.5rem; }
.plan .check li{ font-size:.92rem; }
.plan .btn{ align-self:flex-start; }
.pricing-foot{ font-size:.85rem; opacity:.75; margin-top:1.5rem; max-width:44rem; }

/* FAQ */
.faq{ display:grid; gap:.5rem; max-width:52rem; }
.faq details{ border-bottom:1px solid rgba(12,11,16,.15); padding:.25rem 0; }
.faq summary{
  cursor:pointer; list-style:none; font-family:var(--font-title); font-size:1.3rem; font-weight:600;
  padding:.85rem 2rem .85rem 0; position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:0; top:.7rem; font-size:1.6rem; color:var(--rose); font-weight:400; }
.faq details[open] summary::after{ content:"\2013"; }
.faq details p{ font-size:.97rem; padding-bottom:1rem; margin:0; opacity:.9; }

/* Contacto */
.contact{ display:grid; gap:2rem; }
.form{ display:grid; gap:1rem; }
.form label{ display:grid; gap:.35rem; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; }
.form input,.form select,.form textarea{
  width:100%; min-height:48px; padding:.7rem .9rem; font:inherit; font-size:1rem; color:var(--ivory);
  background:rgba(255,255,255,.04); border:1px solid var(--gold-line-soft); border-radius:2px;
}
.form input:focus,.form select:focus,.form textarea:focus{ outline:none; border-color:var(--gold); }
.form textarea{ min-height:110px; resize:vertical; }
.form select option{ color:var(--ink); }
.form-aviso{ font-size:.9rem; color:var(--gold); }
.contact-side p{ font-size:.98rem; opacity:.88; }

/* Pie */
.site-footer{ padding:2.5rem 0; border-top:1px solid var(--gold-line-soft); font-size:.8rem; opacity:.7; text-align:center; }
.site-footer p{ margin:.25rem 0; }

@media (min-width:720px){
  .nav{ display:flex; }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .plans{ grid-template-columns:repeat(2,1fr); }
  .demo-card{ grid-template-columns:200px 1fr; align-items:center; }
  .contact{ grid-template-columns:1.2fr 1fr; }
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
}
@media (min-width:1024px){
  .grid--3{ grid-template-columns:repeat(3,1fr); }
  .plans{ grid-template-columns:repeat(2,1fr); max-width:52rem; margin-inline:auto; }
  .demos{ grid-template-columns:1fr 1fr; }
  .plans--soon{ max-width:none; }
  .plans-soon,.pricing-foot{ max-width:52rem; margin-inline:auto; }
  .section{ padding:5.5rem 0; }
  .hero{ padding:6.5rem 0 5.5rem; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .foil{ animation:none; }
  .btn,.btn--primary{ transition:none; }
}