/* ==========================================================================
   MUESTRARIO — SeqLogic · concepto "SOBRE Y LACRE"
   La página que Abdiel le manda al cliente. No es una invitación: es la mesa
   de la papelería donde están puestas todas. Papel crema con grano, tinta
   café y un solo color vivo —el rojo del lacre— para lo que se toca.
   Las invitaciones ya traen todos los colores: aquí el fondo se calla.

   PALETA (60-30-10)
     60%  papel    #F6EFE3   fondo            (alterna #EDE3D2, hoja #FFFDF8)
     30%  tinta    #2A211C   texto y bloques oscuros
     10%  lacre    #B8301F   botones y precios: lo que convierte

   CONTRASTE MEDIDO (WCAG):
     tinta  #2A211C sobre papel #F6EFE3 → 13.8  AAA   · sobre alterna → 12.4
     suave  #6B5A4E sobre papel         →  5.8  AA    · sobre alterna →  5.2 · sobre hoja → 6.5
     lacre  #B8301F sobre papel         →  5.3  AA    · sobre hoja    →  6.9
     crema  #FFF8EE sobre lacre         →  5.7  AA    (texto de botón)
     papel  #F6EFE3 sobre tinta         → 13.8  AAA
     tenue  #C9BBAA sobre tinta         →  8.4  AAA
     rosado #FFE9DF sobre lacre         →  6.0  AA    (texto del cierre)
   ========================================================================== */

:root{
  --papel:#F6EFE3;
  --papel-2:#EDE3D2;
  --hoja:#FFFDF8;
  --tinta:#2A211C;
  --tinta-suave:#6B5A4E;
  --sobre-tinta:#C9BBAA;
  --lacre:#B8301F;
  --lacre-hondo:#8E2012;
  --rubor:#F3CDBE;
  --crema:#FFF8EE;

  --f-display:"Fraunces", Georgia, "Times New Roman", serif;
  --f-texto:"Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mano:"Caveat", "Segoe Print", "Bradley Hand", cursive;

  --ancho:1120px;
  --margen:1.25rem;
  --sombra:0 1px 0 rgba(42,33,28,.05), 0 18px 34px -24px rgba(42,33,28,.6);
  --raya:rgba(42,33,28,.26);

  /* El grano del papel: ruido dibujado por el navegador, pesa 0 KB */
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2  0 0 0 0 .14  0 0 0 0 .1  0 0 0 .5 -.17'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --grano-claro:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 .95  0 0 0 0 .88  0 0 0 .5 -.19'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --palomita:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23B8301F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:clip; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background-color:var(--papel);
  background-image:var(--grano);
  color:var(--tinta);
  font-family:var(--f-texto);
  font-size:16px; line-height:1.6;
  overflow-x:clip;
}
img,video{ max-width:100%; display:block; }
h1,h2,h3{ margin:0; font-family:var(--f-display); font-weight:400; font-optical-sizing:auto; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--lacre); outline-offset:3px; border-radius:6px; }
[hidden]{ display:none !important; }

.oculto{ position:absolute; width:0; height:0; overflow:hidden; }
.oculto-visual{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.saltar{
  position:absolute; left:.6rem; top:-4rem; z-index:50;
  background:var(--tinta); color:var(--papel);
  padding:.6rem 1rem; border-radius:10px; font-weight:700;
}
.saltar:focus{ top:.6rem; }


/* ══════════ BOTONES ══════════ */
.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.95rem 1.5rem;
  border:0; border-radius:999px;
  background:var(--lacre); color:var(--crema);
  font-family:var(--f-texto); font-weight:700; font-size:1rem; line-height:1.2;
  text-decoration:none; text-align:center; cursor:pointer;
  box-shadow:0 3px 0 var(--lacre-hondo), 0 16px 22px -14px rgba(142,32,18,.85);
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.boton svg{ width:20px; height:20px; flex:none; }
.boton:hover{ transform:translateY(-2px); box-shadow:0 5px 0 var(--lacre-hondo), 0 20px 26px -14px rgba(142,32,18,.9); }
.boton:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--lacre-hondo); }
.boton--linea{
  background:transparent; color:var(--tinta);
  box-shadow:inset 0 0 0 1.5px var(--tinta);
}
.boton--linea:hover{ background:var(--tinta); color:var(--papel); box-shadow:inset 0 0 0 1.5px var(--tinta); }
.boton--linea:active{ box-shadow:inset 0 0 0 1.5px var(--tinta); }
.boton--claro{
  background:var(--crema); color:var(--tinta);
  box-shadow:0 3px 0 rgba(60,10,4,.55), 0 18px 26px -14px rgba(40,6,2,.8);
}
.boton--claro:hover{ box-shadow:0 5px 0 rgba(60,10,4,.55), 0 22px 30px -14px rgba(40,6,2,.85); }
.boton--claro:active{ box-shadow:0 1px 0 rgba(60,10,4,.55); }
.enlace{
  font-weight:700; color:var(--tinta);
  text-decoration-thickness:1.5px; text-underline-offset:.28em;
}
.enlace:hover{ color:var(--lacre); }


/* ══════════ BARRA ══════════ */
.barra{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  max-width:var(--ancho); margin:0 auto;
  padding:.9rem 1.25rem .5rem;
}
.marca{
  display:grid; grid-template-columns:auto auto; column-gap:.55rem; align-items:center;
  text-decoration:none;
}
.marca__sello{ grid-row:1 / 3; width:36px; height:36px; }
.marca__nombre{ font-family:var(--f-display); font-weight:500; font-size:1.14rem; line-height:1; align-self:end; }
.marca__que{ font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--tinta-suave); font-weight:700; line-height:1.5; align-self:start; }
.barra__nav{ display:none; gap:1.7rem; }
.barra__nav a{ font-weight:600; font-size:.95rem; text-decoration:none; }
.barra__nav a:hover{ color:var(--lacre); }
.barra__wa{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .95rem;
  border:1.5px solid var(--tinta); border-radius:999px;
  font-weight:700; font-size:.86rem; text-decoration:none;
  transition:background-color .15s ease, color .15s ease;
}
.barra__wa svg{ width:18px; height:18px; }
.barra__wa:hover{ background:var(--tinta); color:var(--papel); }


/* ══════════ PORTADA ══════════ */
.hero{
  position:relative; isolation:isolate;
  max-width:var(--ancho); margin:0 auto;
  padding:1.1rem 1.25rem 2.6rem;
}
/* manchas de rubor detrás: le quitan lo plano al papel */
.hero::before{
  content:""; position:absolute; z-index:-1;
  inset:-6rem -40vw -2rem;
  background:
    radial-gradient(34% 30% at 62% 74%, rgba(243,205,190,.95), transparent 72%),
    radial-gradient(30% 26% at 30% 22%, rgba(240,222,190,.75), transparent 72%);
  pointer-events:none;
}
.sobrelinea{
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--tinta-suave);
}
.hero__titulo{
  margin-top:.55rem;
  font-size:clamp(2.5rem,10.8vw,4.1rem);
  line-height:1; letter-spacing:-.024em;
}
.hero__titulo em{
  font-style:italic; color:var(--lacre);
  white-space:nowrap;
  /* subrayado a mano */
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23B8301F' stroke-width='3' stroke-linecap='round' d='M3 9C40 3 78 12 112 7s58-3 85 1'/%3E%3C/svg%3E") no-repeat 0 100% / 100% .22em;
  padding-bottom:.06em;
}
.hero__bajada{
  margin-top:1rem; max-width:40ch;
  color:var(--tinta-suave); font-size:1.03rem; line-height:1.55;
}
.hero__bajada b{ color:var(--tinta); }
.hero__botones{
  margin-top:1.35rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:.9rem 1rem;
}
.hero__botones .boton{ padding-left:1.25rem; padding-right:1.25rem; }

/* La escena: tres invitaciones abiertas en abanico. Al centro, la que se mueve. */
.hero__escena{
  --w:clamp(168px,50vw,232px);
  position:relative;
  height:calc(var(--w) * 1.836 + 34px);
  margin:2rem auto 0;
  max-width:560px;
}
.lamina{
  position:absolute; left:50%; display:block;
  border:5px solid var(--hoja); border-radius:20px;
  overflow:hidden;
  background:#EEEDE4;
  box-shadow:0 28px 40px -24px rgba(42,33,28,.7), 0 3px 8px rgba(42,33,28,.12);
}
.lamina img,.lamina video{ width:100%; height:100%; object-fit:cover; }
.lamina--centro{
  top:0; width:var(--w); aspect-ratio:720 / 1322;
  translate:-50% 0; z-index:2;
  animation:entra-centro .8s cubic-bezier(.2,.8,.2,1) both;
}
.lamina--izq,.lamina--der{
  top:9%; width:calc(var(--w) * .74); aspect-ratio:3 / 5; z-index:1;
  transition:rotate .3s ease, translate .3s ease;
}
.lamina--izq{ translate:calc(-50% - var(--w) * .57) 0; rotate:-8deg; animation:entra-izq 1s cubic-bezier(.2,.8,.2,1) .15s both; }
.lamina--der{ translate:calc(-50% + var(--w) * .57) 0; rotate:8deg;  animation:entra-der 1s cubic-bezier(.2,.8,.2,1) .15s both; }
@keyframes entra-centro{ from{ opacity:0; translate:-50% 26px; } }
@keyframes entra-izq{ from{ opacity:0; translate:-50% 20px; rotate:0deg; } }
@keyframes entra-der{ from{ opacity:0; translate:-50% 20px; rotate:0deg; } }
@media (hover:hover){
  .lamina--izq:hover{ rotate:-11deg; translate:calc(-50% - var(--w) * .63) -6px; }
  .lamina--der:hover{ rotate:11deg;  translate:calc(-50% + var(--w) * .63) -6px; }
}
.lamina__chip{
  position:absolute; left:.45rem; top:.45rem;
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.28rem .6rem; border-radius:999px;
  background:rgba(255,253,248,.94); color:var(--tinta);
  font-size:.58rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  box-shadow:0 2px 6px rgba(42,33,28,.18);
}
.lamina__chip i{ width:7px; height:7px; border-radius:50%; background:var(--lacre); animation:latido 1.6s ease-in-out infinite; }
@keyframes latido{ 50%{ scale:.55; opacity:.5; } }
.lamina__pie{
  position:absolute; inset:auto 0 0;
  display:flex; flex-direction:column; align-items:center;
  padding:2.4rem .4rem .65rem;
  background:linear-gradient(180deg, rgba(238,237,228,0), #EEEDE4 64%);
  color:var(--tinta); text-align:center;
}
.lamina__pie small{ font-size:.5rem; letter-spacing:.32em; text-transform:uppercase; color:var(--tinta-suave); font-weight:700; }
.lamina__pie b{ font-family:var(--f-display); font-style:italic; font-weight:400; font-size:1.22rem; line-height:1.2; }

.hero__nota{
  position:absolute; left:max(4px, calc(50% - var(--w) * 1.04)); bottom:0;
  font-family:var(--f-mano); font-size:1.32rem; line-height:.95;
  rotate:-6deg; text-align:center;
}
.hero__nota svg{ display:block; width:50px; margin:.2rem 0 0 1.5rem; color:var(--lacre); }

.hero__sello{
  position:absolute; z-index:3;
  left:calc(50% + var(--w) * .5 - 30px); bottom:0;
  width:100px; height:100px; border-radius:50%;
  background:var(--hoja);
  box-shadow:0 10px 18px -8px rgba(42,33,28,.55);
}
.hero__aro{ position:absolute; inset:0; width:100%; height:100%; animation:girar 24s linear infinite; }
.hero__aro text{ font-family:var(--f-texto); font-weight:700; font-size:11.4px; letter-spacing:.12em; fill:var(--tinta); }
.hero__lacre{ position:absolute; inset:21%; width:58%; height:58%; filter:drop-shadow(0 3px 4px rgba(90,20,10,.4)); }
@keyframes girar{ to{ rotate:360deg; } }


/* ══════════ LA CINTA ══════════ */
.cinta{
  width:106%; margin:.4rem -3% 0;
  rotate:-1.3deg;
  background:var(--tinta); background-image:var(--grano-claro);
  color:var(--papel);
  overflow:hidden; padding:.72rem 0;
}
.cinta__riel{ display:flex; width:max-content; animation:cinta 30s linear infinite; }
.cinta__riel span{
  display:inline-flex; align-items:center;
  font-family:var(--f-display); font-style:italic; font-size:1.06rem;
  white-space:nowrap;
}
.cinta__riel span::after{ content:"✦"; font-style:normal; font-size:.72rem; color:var(--rubor); margin:0 1.4rem; }
@keyframes cinta{ to{ translate:-50% 0; } }


/* ══════════ SECCIONES ══════════ */
.seccion{ padding:3.6rem 1.25rem; max-width:var(--ancho); margin:0 auto; }
.seccion.alterna{ max-width:none; background-color:var(--papel-2); background-image:var(--grano); }
.seccion.alterna > *{ max-width:calc(var(--ancho) - 2 * var(--margen)); margin-left:auto; margin-right:auto; }
.etiqueta{
  display:flex; align-items:center; gap:.6rem;
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  font-weight:700; color:var(--tinta-suave);
}
.etiqueta::before{ content:""; width:1.5rem; height:1.5px; background:currentColor; }
.titulo{
  text-wrap:balance;
  font-size:clamp(1.95rem,7.8vw,3.2rem);
  line-height:1.05; letter-spacing:-.02em;
  margin-top:.5rem; margin-bottom:.9rem;
}
.intro{ max-width:46ch; color:var(--tinta-suave); margin-bottom:1.6rem; }
.seccion.alterna > .intro{ margin-bottom:1.6rem; }
.intro b{ color:var(--tinta); }


/* ══════════ ¿QUÉ FESTEJAS? — las ventanas ══════════ */
.festejo{ padding-top:3.4rem; padding-bottom:1rem; }
.festejo .intro{ margin-bottom:1.4rem; }
/* cinco ventanas: en celular van 3 arriba y 2 abajo, centradas (retícula de 6, cada una ocupa 2) */
.ventanas{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:1rem .7rem; max-width:640px; }
.ventanas li{ grid-column:span 2; }
.ventanas li:nth-child(4){ grid-column:2 / span 2; }
.ventanas a{
  display:flex; flex-direction:column; align-items:center;
  text-decoration:none; text-align:center;
}
.ventana{
  display:block; width:100%; aspect-ratio:3 / 4.2;
  border-radius:999px 999px 12px 12px;
  border:3px solid var(--hoja);
  overflow:hidden;
  box-shadow:var(--sombra);
  margin-bottom:.55rem;
  transition:transform .25s ease;
}
.ventana img{ width:100%; height:100%; object-fit:cover; }
.ventanas b{ font-family:var(--f-display); font-weight:500; font-size:.84rem; line-height:1.15; }
.ventanas small{ font-size:.7rem; color:var(--tinta-suave); line-height:1.4; }
.ventanas a:hover .ventana{ transform:translateY(-5px) rotate(-1.5deg); }
.ventanas a:hover b{ color:var(--lacre); }


/* ══════════ EL MUESTRARIO ══════════ */
.muestrario{ padding-top:3rem; }
.grupo{ margin-top:2.5rem; scroll-margin-top:1.2rem; }
.grupos > .grupo:first-child{ margin-top:0; }
.grupo__cabeza{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-bottom:.65rem; margin-bottom:1rem;
  border-bottom:1.5px dashed var(--raya);
}
.grupo__cabeza h3{ font-weight:500; font-size:1.65rem; line-height:1.1; letter-spacing:-.01em; }
.desde{
  flex:none;
  padding:.22rem .7rem;
  border:1.5px solid var(--raya); border-radius:999px;
  font-size:.78rem; color:var(--tinta-suave);
  text-decoration:none; white-space:nowrap;
}
.desde b{ color:var(--tinta); }
.desde:hover{ border-color:var(--lacre); }
/* qué plan es cada ejemplo marcado */
.grupo__nota{ margin:0 0 1.1rem; font-size:.88rem; line-height:1.5; color:var(--tinta-suave); }
.grupo__nota b{ color:var(--tinta); }

.rejilla{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; }
.tarjeta{
  display:flex; flex-direction:column;
  background:var(--hoja);
  border:1px solid rgba(42,33,28,.09);
  border-radius:16px;
  overflow:hidden;
  text-decoration:none;
  box-shadow:var(--sombra);
  transition:transform .22s ease, box-shadow .22s ease;
}
.tarjeta__foto{
  position:relative; display:block;
  aspect-ratio:3 / 5;
  overflow:hidden;
  background:var(--papel-2);
}
.tarjeta__foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* La segunda foto es la invitación ya abierta: aparece al llegar a ella */
.tarjeta__b{ opacity:0; scale:1.07; transition:opacity .7s ease, scale 1s ease; }
.tarjeta.abierta .tarjeta__b{ opacity:1; scale:1; }
.tarjeta__cuerpo{ display:flex; flex-direction:column; gap:.2rem; padding:.8rem .8rem .95rem; flex:1; }
.tarjeta__tipo{
  font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--tinta-suave);
}
.marca-mov{
  display:inline-block; margin-left:.35rem;
  padding:.16rem .5rem; border-radius:999px;
  background:var(--tinta); color:var(--papel);
  font-style:normal; letter-spacing:.07em;
}
.marca-completo{ background:var(--lacre); color:var(--crema); }      /* el ejemplo trae panel y muro: es el Evento completo */
.tarjeta__nombre{ font-family:var(--f-display); font-weight:500; font-size:1.16rem; line-height:1.15; }
.tarjeta__cuerpo small{ color:var(--tinta-suave); font-size:.82rem; line-height:1.45; flex:1; }
.tarjeta__cuerpo small b{ color:var(--tinta); }
.tarjeta__ver{ margin-top:.5rem; font-weight:700; font-size:.86rem; color:var(--lacre); }
.tarjeta__ver::after{ content:"→"; display:inline-block; margin-left:.35em; transition:translate .2s ease; }
@media (hover:hover){
  .tarjeta:hover{ transform:translateY(-5px); box-shadow:0 1px 0 rgba(42,33,28,.05), 0 26px 40px -24px rgba(42,33,28,.75); }
  .tarjeta:hover .tarjeta__b{ opacity:1; scale:1; }
  .tarjeta:hover .tarjeta__ver::after{ translate:4px 0; }
}

/* En celular, la que queda sola al final se acuesta a lo ancho */
@media (max-width:719px){
  .rejilla > .tarjeta:last-child:nth-child(odd){ grid-column:1 / -1; flex-direction:row; }
  .rejilla > .tarjeta:last-child:nth-child(odd) .tarjeta__foto{ flex:0 0 44%; aspect-ratio:3 / 4.6; }
  .rejilla > .tarjeta:last-child:nth-child(odd) .tarjeta__cuerpo{ justify-content:center; padding:1rem; gap:.3rem; }
  .rejilla > .tarjeta:last-child:nth-child(odd) .tarjeta__cuerpo small{ flex:none; font-size:.86rem; }
  .rejilla > .tarjeta:last-child:nth-child(odd) .tarjeta__nombre{ font-size:1.42rem; }
}

.nota{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:.5rem;
  margin-top:2.4rem; padding:1.4rem 1.3rem;
  border:1.5px dashed var(--raya); border-radius:16px;
}
.nota b{ font-family:var(--f-display); font-weight:500; font-size:1.5rem; line-height:1.15; }
.nota p{ color:var(--tinta-suave); font-size:.95rem; }
.nota .enlace{ color:var(--lacre); }


/* ══════════ TUS FOTOS — de tres maneras ══════════ */
.fotos{ scroll-margin-top:1rem; }
.maneras{ display:grid; gap:.9rem; }
.manera{
  display:flex; align-items:center; gap:1rem;
  padding:.7rem;
  background:var(--hoja);
  border:1px solid rgba(42,33,28,.09); border-radius:16px;
  box-shadow:var(--sombra);
}
.manera__foto{
  flex:0 0 35%; aspect-ratio:4 / 5;
  border-radius:11px; overflow:hidden;
  background:var(--papel-2);
}
.manera__foto img,.manera__foto video{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.manera__texto{ display:flex; flex-direction:column; align-items:flex-start; gap:.3rem; padding-right:.3rem; }
.manera__marca{
  padding:.14rem .58rem; border-radius:999px;
  border:1.5px solid var(--raya);
  font-size:.6rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--tinta-suave);
}
.manera__marca--plan{ background:var(--tinta); border-color:var(--tinta); color:var(--papel); }
.manera b{ font-family:var(--f-display); font-weight:500; font-size:1.34rem; line-height:1.15; }
.manera small{ color:var(--tinta-suave); font-size:.88rem; line-height:1.46; }
.manera small a{ color:var(--lacre); font-weight:700; white-space:nowrap; text-underline-offset:.2em; }


/* ══════════ CÓMO FUNCIONA ══════════ */
.pasos{ display:grid; gap:1.5rem; margin-top:1.4rem; }
.pasos li{ display:grid; grid-template-columns:auto 1fr; column-gap:1rem; align-content:start; }
.pasos__num{
  grid-row:1 / 3;
  width:3.1rem; height:3.1rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--hoja);
  border:1.5px dashed rgba(42,33,28,.5);
  font-family:var(--f-display); font-weight:500; font-size:1.5rem; line-height:1;
}
.pasos b{ font-family:var(--f-display); font-weight:500; font-size:1.3rem; line-height:1.2; }
.pasos small{ color:var(--tinta-suave); font-size:.93rem; line-height:1.5; margin-top:.2rem; }


/* ══════════ PLANES Y PRECIOS ══════════ */
.planes{
  background-color:var(--tinta); background-image:var(--grano-claro);
  color:var(--papel);
  padding:3.9rem 1.25rem 3.6rem;
  scroll-margin-top:0;
}
.planes__dentro{ max-width:calc(var(--ancho) - 2 * var(--margen)); margin:0 auto; }
.planes .etiqueta,.planes .intro{ color:var(--sobre-tinta); }
.planes .intro{ margin-bottom:1.2rem; }
.planes :focus-visible{ outline-color:var(--rubor); }

.selector{
  display:inline-flex; gap:.2rem; padding:.3rem;
  border-radius:999px;
  background:rgba(246,239,227,.09);
  border:1px solid rgba(246,239,227,.2);
}
.selector{ max-width:100%; }
.selector button{
  border:0; border-radius:999px; background:none;
  padding:.66rem .8rem;
  color:var(--papel);
  font-family:var(--f-texto); font-weight:700; font-size:.92rem;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease;
}
.selector button[aria-selected="true"]{ background:var(--papel); color:var(--tinta); }

.linea{ margin-top:1.5rem; }
.linea__para{ font-size:.84rem; color:var(--sobre-tinta); margin-bottom:1.4rem; }
.linea__planes{ display:grid; gap:1.5rem; }
.plan{
  position:relative;
  display:flex; flex-direction:column;
  background-color:var(--hoja); background-image:var(--grano);
  color:var(--tinta);
  border-radius:20px;
  padding:1.6rem 1.3rem 1.4rem;
}
.plan--estelar{ box-shadow:0 0 0 3px var(--lacre), 0 30px 44px -26px rgba(0,0,0,.9); }
.plan__cinta{
  position:absolute; top:-.78rem; left:1.3rem;
  padding:.34rem .75rem; border-radius:999px;
  background:var(--lacre); color:var(--crema);
  font-size:.64rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.plan header{ display:flex; align-items:flex-start; justify-content:space-between; gap:.8rem; }
.plan h3{ font-weight:500; font-size:1.6rem; line-height:1.1; padding-top:.35rem; }
/* El precio va en un timbre postal: orilla dentada hecha con máscara */
.plan__precio{
  --r:4px;
  flex:none;
  padding:calc(var(--r) + .5rem) calc(var(--r) + .75rem);
  background:var(--papel-2); color:var(--tinta);
  font-family:var(--f-display); font-weight:500; font-size:2rem; line-height:1;
  rotate:3deg;
  -webkit-mask:
    linear-gradient(#000 0 0) center / calc(100% - 2 * var(--r)) calc(100% - 2 * var(--r)) no-repeat,
    radial-gradient(50% 50%, #000 66%, #0000 70%) 0 0 / calc(2 * var(--r)) calc(2 * var(--r)) round;
          mask:
    linear-gradient(#000 0 0) center / calc(100% - 2 * var(--r)) calc(100% - 2 * var(--r)) no-repeat,
    radial-gradient(50% 50%, #000 66%, #0000 70%) 0 0 / calc(2 * var(--r)) calc(2 * var(--r)) round;
}
.plan__precio span{ font-size:.52em; vertical-align:.62em; margin-right:.06em; }
.plan--estelar .plan__precio{ background:var(--lacre); color:var(--crema); }
.plan__frase{ margin-top:.7rem; color:var(--tinta-suave); font-size:.96rem; line-height:1.45; }
.plan ul{ display:grid; gap:.55rem; margin:1.1rem 0 1.4rem; flex:1; align-content:start; }
.plan li{
  position:relative; padding-left:1.65rem;
  font-size:.94rem; line-height:1.4;
}
.plan li::before{
  content:""; position:absolute; left:0; top:.14em;
  width:1.1rem; height:1.1rem;
  background:var(--palomita) center / contain no-repeat;
}
/* la liga para ver el ejemplo, dentro de un renglón del plan (lacre sobre hoja: 6.9 de contraste) */
.plan__liga{ color:var(--lacre); font-weight:700; text-underline-offset:.2em; white-space:nowrap; }
.plan__liga::after{ content:" →"; }
.plan .boton{ width:100%; }
/* el plan que se cotiza: un cartel con sus cuatro piezas */
.plan__precio--texto{ font-size:1.25rem; padding-top:calc(var(--r) + .6rem); padding-bottom:calc(var(--r) + .6rem); }
.plan--completo{ box-shadow:0 0 0 3px var(--lacre), 0 30px 44px -26px rgba(0,0,0,.9); }
/* "desde", chiquito arriba del precio */
.plan__precio--desde i{
  display:block; margin-bottom:.2rem;
  font-family:var(--f-texto); font-style:normal; font-weight:700;
  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; line-height:1.1;
}
/* la letra chica del plan completo: lo que se puede agregar y lo que hay que saber.
   Medido sobre papel-2 #EDE3D2: tinta 12.4 · suave 5.2 · lacre hondo 7.0 */
.plan__letras{ display:grid; gap:1.2rem; margin:0 0 1.5rem; padding:1.1rem 1.1rem 1.2rem; border-radius:14px; background:var(--papel-2); }
.plan__letras h4{
  margin:0 0 .6rem; font-family:var(--f-texto); font-size:.66rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--tinta-suave);
}
.plan .plan__letras ul{ margin:0; gap:.5rem; }
.plan .plan__letras li{ padding-left:0; font-size:.9rem; line-height:1.45; }
.plan .plan__letras li::before{ display:none; }
.plan__letras b{ color:var(--lacre-hondo); }
.plan__letras a{ color:var(--lacre-hondo); font-weight:700; text-underline-offset:.2em; white-space:nowrap; }
.plan--completo .plan__precio{ background:var(--lacre); color:var(--crema); }
/* la foto de la invitación impresa junto al celular */
.plan__muestra{ margin:0 0 1.5rem; }
.plan__muestra img{ display:block; width:100%; height:auto; border-radius:12px; }
.plan__muestra figcaption{ margin-top:.5rem; font-size:.86rem; font-style:italic; color:var(--tinta-suave); text-align:center; }
.casilla i{ color:var(--tinta-suave); font-size:.88em; }
/* la fila de invitaciones impresas (se desliza de lado) */
.plan__muestra{ margin-bottom:1rem; }
.impresas__titulo{ margin:0 0 .6rem; font-size:.9rem; font-weight:700; color:var(--tinta); }
.impresas{ display:flex; gap:.8rem; margin:0 -.2rem 1.5rem; padding:.2rem .2rem .8rem; overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.impresas a{ flex:none; width:6.4rem; scroll-snap-align:start; text-decoration:none; color:var(--tinta-suave); }
.impresas img{ display:block; width:100%; height:auto; border-radius:3px; box-shadow:0 8px 14px -8px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.06); }
.impresas span{ display:block; margin-top:.4rem; font-size:.74rem; line-height:1.25; text-align:center; }
.plan .modulos{ display:grid; gap:1.1rem; margin:1.3rem 0 1.5rem; }
.plan .modulos li{ position:relative; padding-left:3.1rem; display:grid; gap:.12rem; }
.plan .modulos li::before{ display:none; }
.modulos__ico{ position:absolute; left:0; top:.1rem; width:2.2rem; height:2.2rem; color:var(--lacre); }
.modulos__ico svg{ width:100%; height:100%; }
.modulos b{ font-family:var(--f-display); font-weight:500; font-size:1.2rem; line-height:1.2; }
.modulos small{ color:var(--tinta-suave); font-size:.92rem; line-height:1.45; }
.modulos small b{ font-family:inherit; font-size:inherit; font-weight:700; line-height:inherit; color:var(--tinta); }
.modulos__ligas{ display:flex; flex-wrap:wrap; gap:.25rem 1.2rem; }
.modulos a{ justify-self:start; margin-top:.15rem; font-weight:700; font-size:.88rem; color:var(--lacre); text-underline-offset:.22em; }
.modulos a::after{ content:"→"; display:inline-block; margin-left:.35em; }
.plan__chico{ margin-top:.8rem; text-align:center; font-size:.84rem; color:var(--tinta-suave); }
.plan__ejemplo{
  margin-top:.9rem; text-align:center;
  font-size:.88rem; font-weight:700;
  text-underline-offset:.25em;
}
.plan__ejemplo::after{ content:"→"; display:inline-block; margin-left:.35em; }
.plan__ejemplo:hover{ color:var(--lacre); }

.planes__pie{ margin-top:1.9rem; }
/* LOS TRES PASOS de cada pestaña: 1 escoge tu invitación · 2 agrégale lo que quieras · 3 o llévatelo todo junto */
.paso{ display:flex; align-items:center; gap:.7rem; margin:2.1rem 0 1rem; text-align:left; color:var(--papel); }
.linea__para + .paso{ margin-top:.2rem; }
.paso span{ flex:none; display:grid; place-items:center; width:2rem; height:2rem; border-radius:50%; background:var(--rubor); color:var(--tinta); font-weight:700; font-size:1.05rem; }
.paso b{ font-family:var(--f-display); font-weight:500; font-size:1.32rem; line-height:1.2; }
.paso small{ display:block; margin-top:.15rem; font-family:var(--f-texto, inherit); font-weight:400; font-size:.86rem; line-height:1.4; color:var(--sobre-tinta); }
.arma{ padding:.3rem 1.1rem 1rem; border:1px dashed rgba(246,239,227,.5); border-radius:14px; text-align:left; }
.arma__extras{ margin:0; padding:0; list-style:none; }
.arma__extras li{ display:grid; grid-template-columns:4.3rem 1fr; gap:.8rem; align-items:baseline; padding:.8rem 0; border-bottom:1px solid rgba(246,239,227,.16); }
.arma__extras > li > b{ color:var(--rubor); font-size:1.15rem; white-space:nowrap; }
.arma__extras strong{ display:block; margin-bottom:.1rem; color:var(--papel); font-weight:700; font-size:1rem; }
.arma__extras span{ color:var(--sobre-tinta); font-size:.9rem; line-height:1.45; }
.arma__nota{ margin:.8rem 0 0; font-size:.9rem; }
.arma__nota a{ color:var(--papel); font-weight:700; text-underline-offset:.22em; }
.arma__nota a::after{ content:" →"; }
.modulos__precio{ display:block; font-style:normal; font-weight:700; font-size:.9rem; line-height:1.35; color:var(--lacre-hondo); }
.casilla--incluida{ opacity:.55; }
.casilla--incluida b{ text-decoration:line-through; }
.cotizador__incluye{ margin:.3rem 0 .6rem; font-size:.9rem; font-weight:700; color:var(--lacre-hondo); }
/* el escalón: aclara que el precio de arriba es de la invitación sola, y cuánto cuesta subirle (panel, muro…) */
.linea__sube{ margin-top:1.5rem; padding:1rem 1.15rem 1.05rem; border:1px dashed rgba(246,239,227,.5); border-radius:14px; font-size:.95rem; line-height:1.55; color:var(--papel); text-align:left; }
.linea__sube b{ color:var(--rubor); }
.linea__sube a{ display:table; margin-top:.45rem; color:var(--papel); font-weight:700; text-underline-offset:.22em; }
.linea__sube a::after{ content:" →"; }
.planes__extra{ font-size:.84rem; color:var(--sobre-tinta); margin-bottom:.7rem; }
.extras{ display:flex; flex-wrap:wrap; gap:.6rem; }
.extras li{
  padding:.5rem .95rem; border-radius:999px;
  border:1px dashed rgba(246,239,227,.45);
  font-size:.88rem;
}
.extras b{ color:var(--rubor); margin-right:.2rem; }
.planes__chico{ margin-top:1.1rem; font-size:.8rem; color:var(--sobre-tinta); }
.planes__chico a{ color:var(--papel); font-weight:700; text-underline-offset:.22em; }


/* ══════════ COTIZADOR ══════════ */
.cotiza{ position:relative; isolation:isolate; }
.cotiza::before{
  content:""; position:absolute; z-index:-1; inset:10% -40vw 0;
  background:radial-gradient(32% 40% at 58% 60%, rgba(243,205,190,.8), transparent 72%);
  pointer-events:none;
}
.cotizador{
  display:grid; gap:1.4rem;
  max-width:720px;
  padding:1.35rem 1.1rem 1.4rem;
  background-color:var(--hoja); background-image:var(--grano);
  border:1px solid rgba(42,33,28,.1); border-radius:22px;
  box-shadow:var(--sombra);
}
.cotizador fieldset{ border:0; padding:0; margin:0; min-width:0; }
.cotizador legend{
  display:flex; align-items:center; gap:.55rem;
  padding:0; margin-bottom:.75rem;
  font-family:var(--f-display); font-weight:500; font-size:1.2rem; line-height:1.2;
}
.cotizador legend span{
  width:1.6rem; height:1.6rem; border-radius:50%;
  display:grid; place-items:center;
  background:var(--tinta); color:var(--papel);
  font-family:var(--f-texto); font-weight:700; font-size:.78rem;
}
.fichas{ display:flex; flex-wrap:wrap; gap:.45rem; }
.ficha{ position:relative; }
.ficha input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer; }
.ficha span{
  display:block;
  padding:.58rem .95rem; border-radius:999px;
  border:1.5px solid var(--raya);
  font-weight:600; font-size:.92rem; line-height:1.2;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ficha input:checked + span{ background:var(--tinta); color:var(--papel); border-color:var(--tinta); }
.ficha input:focus-visible + span{ outline:3px solid var(--lacre); outline-offset:2px; }
.fichas--planes .ficha{ flex:1 1 138px; display:flex; }
.fichas--planes .ficha span{
  flex:1;
  display:flex; flex-direction:column; justify-content:space-between; gap:.1rem;
  border-radius:14px; padding:.7rem .95rem;
}
.fichas--planes .ficha b{ font-family:var(--f-display); font-weight:500; font-size:1.5rem; line-height:1.1; }
.cotizador__aviso{ color:var(--tinta-suave); font-size:.92rem; }
.campo{ display:block; }
.cotizador select,
.cotizador input[type="date"]{
  width:100%; min-height:48px;
  padding:.7rem .9rem;
  border:1.5px solid var(--raya); border-radius:12px;
  background-color:var(--papel); color:var(--tinta);
  font-family:var(--f-texto); font-size:1rem;
}
.casilla{ display:flex; align-items:center; gap:.65rem; padding:.42rem 0; cursor:pointer; font-size:.96rem; }
.casilla input{ width:1.3rem; height:1.3rem; flex:none; accent-color:var(--lacre); }
.casilla b{ color:var(--lacre); white-space:nowrap; }
.campo--fecha{ display:grid; gap:.4rem; margin-top:.7rem; font-size:.92rem; font-weight:600; }
.campo--fecha i{ font-style:normal; font-weight:400; color:var(--tinta-suave); }
.cotizador__total{
  display:grid; gap:.85rem;
  padding-top:1.15rem;
  border-top:1.5px dashed var(--raya);
}
.cotizador__total p{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.cotizador__total p span{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; color:var(--tinta-suave);
}
.cotizador__total output{ font-family:var(--f-display); font-weight:500; font-size:2.5rem; line-height:1; letter-spacing:-.02em; }
.cotizador__total output.chico{ font-size:1.5rem; }
.cotizador__total small{ text-align:center; color:var(--tinta-suave); font-size:.82rem; }


/* ══════════ VENTAJAS ══════════ */
.ventajas{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; margin-top:1.5rem; }
.ventaja{
  display:flex; flex-direction:column; gap:.3rem;
  padding:1rem;
  background-color:var(--hoja);
  border:1px solid rgba(42,33,28,.08); border-radius:16px;
}
.ventaja--grande{ grid-column:1 / -1; padding:1.3rem 1.2rem; }
.ventaja > b{ font-family:var(--f-display); font-weight:500; font-size:1.12rem; line-height:1.2; }
.ventaja--grande > b{ font-size:1.45rem; }
.ventaja > small{ color:var(--tinta-suave); font-size:.86rem; line-height:1.5; }
.ventaja--grande > small{ font-size:.94rem; }
.ventaja__ico{ width:30px; height:30px; margin-bottom:.4rem; }
.ventaja__ico svg{ width:100%; height:100%; }
.pase{
  align-self:flex-start;
  display:flex; flex-direction:column;
  margin:0 0 1.1rem .2rem;
  padding:.7rem 1.2rem .8rem;
  background-color:var(--papel); background-image:var(--grano);
  border:1.5px dashed rgba(42,33,28,.42); border-radius:12px;
  rotate:-2.5deg;
  box-shadow:0 12px 18px -14px rgba(42,33,28,.6);
}
.pase small{ font-size:.54rem; letter-spacing:.32em; text-transform:uppercase; font-weight:700; color:var(--tinta-suave); }
.pase b{ font-family:var(--f-mano); font-weight:600; font-size:2rem; line-height:1.05; }
.pase span{ font-size:.78rem; font-weight:700; color:var(--lacre); }
.burbuja{
  position:relative; align-self:flex-end;
  max-width:17rem; margin-bottom:1.1rem;
  padding:.65rem .9rem 1.35rem;
  background:#DCF6CD; color:#1F2A1B;
  border-radius:14px 14px 3px 14px;
  font-size:.9rem; line-height:1.4;
  box-shadow:0 10px 16px -12px rgba(42,33,28,.55);
}
.burbuja i{ position:absolute; right:.7rem; bottom:.35rem; font-style:normal; font-size:.64rem; color:#4E6B47; }


/* ══════════ DUDAS ══════════ */
.dudas .intro{ margin-bottom:1.3rem; }
.dudas .enlace{ color:var(--lacre); }
.faq{ display:grid; gap:.6rem; max-width:760px; }
.faq details{
  background:var(--hoja);
  border:1px solid rgba(42,33,28,.1); border-radius:14px;
}
.faq summary{
  position:relative; cursor:pointer; list-style:none;
  padding:1rem 2.9rem 1rem 1.1rem;
  font-weight:700; font-size:1rem; line-height:1.35;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:1.1rem; top:50%; translate:0 -50%;
  font-family:var(--f-display); font-size:1.7rem; line-height:1; color:var(--lacre);
}
.faq details[open] summary::after{ content:"–"; }
.faq p{ padding:0 1.1rem 1.1rem; color:var(--tinta-suave); font-size:.95rem; }
.faq p b{ color:var(--tinta); }
.faq p a{ color:var(--lacre); font-weight:700; text-underline-offset:.2em; }


/* ══════════ CIERRE ══════════ */
.cierre{
  position:relative; isolation:isolate; overflow:hidden;
  padding:4.4rem 1.25rem 4.2rem;
  background-color:var(--lacre); background-image:var(--grano-claro);
  color:var(--crema); text-align:center;
}
.cierre__sello{
  position:absolute; z-index:-1;
  width:360px; height:360px; right:-130px; top:-150px;
  opacity:.5; mix-blend-mode:multiply;
}
.cierre__titulo{ font-size:clamp(2.5rem,11vw,4.4rem); line-height:1; letter-spacing:-.024em; }
.cierre__texto{ margin:1rem auto 1.9rem; max-width:34ch; color:#FFE9DF; font-size:1.04rem; }
.cierre__chico{ margin-top:1.3rem; font-size:.86rem; color:#FFE9DF; letter-spacing:.04em; }
.cierre :focus-visible{ outline-color:var(--crema); }


/* ══════════ PIE Y FIRMA SEQLOGIC ══════════ */
.pie{ background:var(--tinta); padding:.6rem 1.25rem 2.6rem; }
.seqlogic-watermark-container{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  padding-top:2rem;
  width:100%; max-width:300px;
  margin:0 auto;
}
.seqlogic-watermark-title{ font-size:.75rem; color:rgba(255,255,255,.5); letter-spacing:2px; text-transform:uppercase; }
.seqlogic-watermark{
  width:130px; height:auto; opacity:.5;
  filter:grayscale(1) brightness(2.2);
  transition:opacity .4s ease, filter .4s ease, transform .4s ease;
}
.seqlogic-watermark:hover{
  opacity:1; filter:grayscale(0) brightness(1.15) drop-shadow(0 0 10px rgba(0,144,224,.55));
  transform:scale(1.03);
}
.seqlogic-social-links{ display:flex; gap:1rem; margin-top:.5rem; justify-content:center; }
.seqlogic-social-icon{
  color:rgba(255,255,255,.7); transition:all .3s ease;
  padding:.5rem; border-radius:50%; background:rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:center;
}
.seqlogic-social-icon:hover{ transform:translateY(-3px); background:rgba(255,255,255,.15); }
.seqlogic-social-icon.facebook:hover{ color:#1877F2; background:rgba(24,119,242,.2); }
.seqlogic-social-icon.youtube:hover{ color:#FF0000; background:rgba(255,0,0,.2); }
.pie :focus-visible{ outline-color:var(--rubor); }


/* ══════════ BOTÓN FLOTANTE ══════════ */
.flotante{
  position:fixed; z-index:30;
  right:max(.9rem, env(safe-area-inset-right));
  bottom:max(.9rem, env(safe-area-inset-bottom));
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.78rem 1.05rem; border-radius:999px;
  background:var(--lacre); color:var(--crema);
  font-weight:700; font-size:.92rem; text-decoration:none;
  box-shadow:0 3px 0 var(--lacre-hondo), 0 16px 26px -10px rgba(42,33,28,.7);
  translate:0 150%; opacity:0; visibility:hidden;
  transition:translate .35s ease, opacity .35s ease, visibility .35s;
}
.flotante.visible{ translate:0 0; opacity:1; visibility:visible; }
.flotante svg{ width:20px; height:20px; }


/* ══════════ APARECER AL BAJAR (lo hace el navegador, sin código) ══════════ */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .aparece{
      animation:aparece linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 42%;
    }
    @keyframes aparece{ from{ opacity:0; translate:0 28px; } to{ opacity:1; translate:0 0; } }
  }
}


/* ══════════ PANTALLAS ANCHAS ══════════ */
@media (min-width:720px){
  :root{ --margen:2rem; }
  .seccion{ padding:5rem 2rem; }
  .barra{ padding:1.2rem 2rem .6rem; }
  .barra__nav{ display:flex; }
  .ventanas{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:1.4rem; }
  .ventanas li, .ventanas li:nth-child(4){ grid-column:auto; }
  .ventanas b{ font-size:1.02rem; }
  .ventanas small{ font-size:.82rem; }
  .festejo{ padding-bottom:1rem; }

  .rejilla{ grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1.3rem; }
  .tarjeta--estelar{ grid-column:1 / -1; flex-direction:row; max-width:660px; }
  .tarjeta--estelar .tarjeta__foto{ flex:0 0 40%; }
  .tarjeta--estelar .tarjeta__cuerpo{ justify-content:center; padding:2rem; gap:.5rem; }
  .tarjeta--estelar .tarjeta__cuerpo small{ flex:none; font-size:1rem; }
  .tarjeta--estelar .tarjeta__nombre{ font-size:2rem; }

  .maneras{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.3rem; }
  .manera{ flex-direction:column; align-items:stretch; gap:1rem; padding:.8rem .8rem 1.4rem; }
  .manera__foto{ flex:none; aspect-ratio:4 / 4.3; }
  .manera__texto{ padding:0 .5rem; }
  .manera small{ font-size:.94rem; }
  .pasos{ grid-template-columns:repeat(3,1fr); gap:2.2rem; }
  .planes{ padding:5.4rem 2rem 5rem; }
  .linea__planes{ grid-template-columns:repeat(2,minmax(0,400px)); }
  .plan{ padding:2rem 1.8rem 1.8rem; }
  .cotizador{ padding:2rem; }
  .ventajas{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.1rem; }
  .ventaja--grande{ grid-column:span 2; }
  .cierre{ padding:6rem 2rem 5.6rem; }
}

/* Escritorio: nada de columnas vacías a la derecha */
@media (min-width:1040px){
  .festejo{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr); align-items:center; gap:3rem; }
  .festejo .intro{ margin-bottom:0; }
  .ventanas{ max-width:none; gap:1.6rem; }

  /* El muestrario en una retícula de 5: XV + Bodas · Cumpleaños · Bebés + a la medida */
  .grupos{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); column-gap:1.3rem; row-gap:3.2rem; }
  .grupos > .grupo{ margin-top:0; display:flex; flex-direction:column; }
  .grupos .rejilla{ flex:1; gap:1.3rem; }
  .grupo--xv{ grid-column:span 2; }
  .grupo--bodas{ grid-column:span 3; }
  .grupo--cumple, .grupo--adultos{ grid-column:1 / -1; }
  .grupo--bebes{ grid-column:span 3; }
  .grupo--xv .rejilla{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grupo--bodas .rejilla{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grupo--cumple .rejilla, .grupo--adultos .rejilla{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .grupo--bebes .rejilla{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .tarjeta--estelar{ max-width:none; }
  .tarjeta--estelar .tarjeta__foto{ flex:0 0 46%; aspect-ratio:auto; }
  .tarjeta--estelar .tarjeta__cuerpo{ padding:1.3rem; }
  .tarjeta--estelar .tarjeta__cuerpo small{ font-size:.9rem; }
  .tarjeta--estelar .tarjeta__nombre{ font-size:1.6rem; }
  .grupos > .nota{ grid-column:span 2; margin-top:4.15rem; padding:2rem; }
  .grupos > .nota b{ font-size:2rem; }

  .planes__dentro{
    display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,2fr);
    grid-template-areas:"cabeza lineas" "pie lineas";
    grid-template-rows:auto 1fr; column-gap:3.4rem;
  }
  .planes__cabeza{ grid-area:cabeza; }
  .planes__lineas{ grid-area:lineas; }
  .planes__pie{ grid-area:pie; }
  .planes__lineas .linea{ margin-top:.4rem; }
  .linea__planes{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .plan .modulos{ grid-template-columns:1fr 1fr; gap:1.4rem 2rem; }
  .plan--completo .boton{ width:auto; align-self:flex-start; padding-left:2.2rem; padding-right:2.2rem; }
  .plan--completo .plan__chico{ text-align:left; }
  .plan__letras{ grid-template-columns:1fr 1fr; gap:1.4rem 2rem; }
  .extras{ flex-direction:column; align-items:flex-start; }

  .cotizador{ max-width:none; grid-template-columns:minmax(0,1fr) 330px; column-gap:2.6rem; padding:2.2rem; }
  .cotizador fieldset{ grid-column:1; }
  .cotizador__total{
    grid-column:2; grid-row:1 / span 4; align-self:start;
    position:sticky; top:1.5rem;
    padding:1.5rem; border:1.5px dashed var(--raya); border-radius:16px;
    background-color:var(--papel);
  }
  .cotizador__total p{ flex-direction:column; gap:.4rem; }
  .cotizador__total output{ font-size:3.4rem; }

  .dudas{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.7fr); gap:3rem; align-items:start; }
  .dudas__cabeza{ position:sticky; top:1.5rem; }
  .faq{ max-width:none; }
}

@media (min-width:940px){
  .hero{
    display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    align-items:center; gap:2rem;
    padding:2.2rem 2rem 4.4rem;
  }
  .hero__bajada{ font-size:1.14rem; }
  .hero__botones{ margin-top:1.8rem; }
  .hero__escena{ --w:270px; margin:0 auto; width:100%; }
  .hero__nota{ font-size:1.6rem; }
  .hero__sello{ width:118px; height:118px; }
}


@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .cinta__riel{ animation:none; }
}