/* ==========================================================================
   TEMA: CUMPLEAÑOS DE ADULTO · LA REVISTA — dirección de arte "EDICIÓN DE COLECCIÓN"
   Creada el 5 de octubre de 2026 (trabajo nocturno). Abdiel pidió demos para
   "señoras grandes". La portada de revista es de lo más pedido para cumpleaños de
   mujer: la festejada es la noticia.

   LA IDEA: la invitación es una revista. En la entrada está cerrada, en el puesto:
   se toca y se abre la tapa. La portada de la invitación es la portada de la revista:
   el nombre es el cabezal, la festejada va ENCIMA de las letras (como en las revistas
   de verdad) y a los lados sus titulares. Adentro, todo son secciones: Sumario,
   Sociales, Agenda, Moda, Avisos de ocasión, cada una con su número de página.

   TEORÍA DEL COLOR: papel crema de base (60); rosa mexicano en la portada y rosa
   pálido en las secciones alternas (30); y el rosa mexicano otra vez, puro, solo en
   lo que se toca (10). Es una paleta de un solo color (monocromática) más negro de
   imprenta: así se ve editorial, no de fiesta infantil. La mostaza es el único
   contrapeso cálido, en filetes y detalles.

   CONTRASTE MEDIDO (fórmula WCAG):
     tinta #1C1A1A sobre crema 16.2 · sobre rosa pálido 13.5 · suave #575050 sobre crema 7.4 / rosa pálido 6.1
     rosa hondo #B81A5B sobre crema 5.9 · sobre rosa pálido 4.9
     blanco sobre rosa mexicano #D6246E 4.8 (botones y portada, letra grande) · crema sobre negro 16.2
   ========================================================================== */
:root{
  --rosa:#D6246E; --rosa-hondo:#B81A5B; --rosa-palido:#F9DCE6; --rosa-claro:#F8B9D0; --mostaza:#E0A526; --negro:#1C1A1A; --crema:#FBF7F1;
  --papel:#FBF7F1;  --papel-hondo:#F9DCE6;
  --tinta:#1C1A1A;  --tinta-suave:#575050;
  --marca:#1C1A1A;  --marca-claro:#D6246E;
  --acento:#B81A5B; --acento-hondo:#8E1244;
  --f-display:"Bodoni Moda", "Playfair Display", Georgia, serif;
  --f-texto:"DM Sans", system-ui, sans-serif;
  --radio:4px;
  --sombra:0 12px 26px -16px rgba(28,26,26,.5);
  --sombra-alta:0 26px 46px -22px rgba(28,26,26,.6);
}
body{ background:var(--papel); counter-reset:pag 3; }
.seccion{ counter-increment:pag 2; }

/* la portada y los dos bloques negros voltean las letras a claro; las tarjetas de adentro regresan a tinta */
.portada, .cuenta.alterna, .rsvp.alterna, .pie{ --tinta:#FFFFFF; --tinta-suave:#CFC8C4; --marca:#FFFFFF; --acento:#F8B9D0; color:var(--tinta); }
:is(.cuenta.alterna, .rsvp.alterna) :is(.cuenta__caja, .formulario){ --tinta:#1C1A1A; --tinta-suave:#575050; --marca:#1C1A1A; --acento:#B81A5B; color:var(--tinta); }

/* el encabezado de cada sección, como en una revista: nombre de la sección, filete y número de página */
.etiqueta{
  display:flex; align-items:center; gap:.8rem; width:100%; max-width:640px; margin:0 auto;
  font-family:var(--f-texto); font-weight:700; font-size:.68rem; letter-spacing:.3em; color:var(--tinta);
}
.etiqueta::before{ content:""; order:2; flex:1; height:1px; background:currentColor; opacity:.5; }
.etiqueta::after{ content:"PÁG. " counter(pag); order:3; letter-spacing:.2em; opacity:.75; }
.titulo{ font-family:var(--f-display); font-style:italic; font-weight:600; line-height:1.04; font-size:clamp(2.3rem,10.4vw,3.2rem); margin:1rem 0 1.4rem; color:var(--acento); letter-spacing:-.01em; }


/* ══════════════════════════════════════════════════════════════════════
   LA ENTRADA — la revista cerrada. Se toca dos veces y se abre la tapa.
   ══════════════════════════════════════════════════════════════════════ */
.entrada{ overflow:hidden; background:linear-gradient(180deg, var(--rosa-palido) 0%, var(--rosa-palido) 62%, #F2C9D8 62%, #F6D5E1 100%); transition:opacity .6s ease .75s, visibility 0s linear 1.4s; }
.entrada > *{ position:relative; z-index:1; }
.entrada__para{ font-family:var(--f-texto); font-weight:700; letter-spacing:.34em; font-size:.68rem; color:var(--rosa-hondo); }
.entrada__nombre{ font-family:var(--f-display); font-style:italic; font-weight:600; font-size:clamp(1.9rem,8.6vw,2.6rem); line-height:1.08; margin:.2rem 0 1.1rem; color:var(--negro); }
.gancho.revista-cerrada{ position:relative; width:min(60vw,244px); aspect-ratio:760/1140; perspective:1100px; animation:rv-reposa 3.8s ease-in-out infinite; }
@keyframes rv-reposa{ 0%,100%{ transform:rotate(-2.2deg); } 50%{ transform:rotate(1.2deg) translateY(-6px); } }
.revista__hojas{                               /* las hojas de adentro: se ven cuando la tapa se levanta */
  position:absolute; inset:0; background:
    linear-gradient(#DAD3CB, #DAD3CB) 12% 16% / 76% 2px no-repeat, linear-gradient(#DAD3CB, #DAD3CB) 12% 22% / 60% 2px no-repeat,
    linear-gradient(var(--rosa-claro), var(--rosa-claro)) 12% 34% / 76% 26% no-repeat,
    linear-gradient(#DAD3CB, #DAD3CB) 12% 68% / 76% 2px no-repeat, linear-gradient(#DAD3CB, #DAD3CB) 12% 73% / 70% 2px no-repeat, linear-gradient(#DAD3CB, #DAD3CB) 12% 78% / 74% 2px no-repeat, #fff;
  box-shadow:10px 14px 0 rgba(28,26,26,.16), 0 0 0 1px rgba(28,26,26,.12);
}
.revista__tapa{ position:absolute; inset:0; width:100%; height:100%; transform-origin:0 50%; backface-visibility:hidden; box-shadow:0 0 0 1px rgba(28,26,26,.2); transition:transform .9s cubic-bezier(.5,0,.2,1), box-shadow .9s ease; }
.revista__cintillo{
  position:absolute; left:-10px; top:11%; padding:.3rem .8rem .26rem; background:var(--mostaza); color:var(--negro);
  font-family:var(--f-texto); font-weight:700; font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; transform:rotate(-6deg); box-shadow:3px 3px 0 rgba(28,26,26,.3);
  transition:opacity .3s ease;
}
/* primer toque: se asoma (la tapa se levanta tantito) */
.gancho.revista-cerrada.golpe .revista__tapa{ animation:rv-asoma .55s ease; }
@keyframes rv-asoma{ 0%,100%{ transform:rotateY(0); } 45%{ transform:rotateY(-32deg); } }
/* al abrir: la tapa da la vuelta completa y la revista se viene encima */
.gancho.revista-cerrada.abre{ animation:rv-abre 1s ease-in .35s forwards; }
@keyframes rv-abre{ 0%{ transform:rotate(0) scale(1); opacity:1; } 100%{ transform:rotate(0) scale(2.6) translateX(12%); opacity:0; } }
.gancho.revista-cerrada.abre .revista__tapa{ transform:rotateY(-168deg); box-shadow:none; }
.gancho.revista-cerrada.abre .revista__cintillo{ opacity:0; }
.entrada__pista{
  margin-top:1.6rem; padding:.72rem 1.5rem .66rem; background:var(--rosa); color:#fff; box-shadow:5px 5px 0 var(--negro);
  font-family:var(--f-texto); font-weight:700; font-size:.92rem; letter-spacing:.14em; text-transform:uppercase;
  animation:rv-late 1.6s ease-in-out infinite;
}
@keyframes rv-late{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } }
.entrada__marcador{ margin-top:.9rem; color:var(--negro); font-weight:700; letter-spacing:.1em; }


/* ══════════════════════════════════════════════════════════════════════
   LA PORTADA — la portada de la revista: cabezal, festejada encima, titulares
   ══════════════════════════════════════════════════════════════════════ */
.portada{ overflow:hidden; gap:0; padding:1.6rem 1.2rem 4.4rem; justify-content:center; background:radial-gradient(circle at 50% 44%, #EC5C98 0, #E0397F 46%, var(--rosa) 100%); }
.portada__arriba{ order:0; font-family:var(--f-texto); font-weight:700; font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:#fff; }
.portada__nombre{                              /* el cabezal: el nombre, del ancho de la revista */
  order:1; font-family:var(--f-display); font-weight:900; text-transform:uppercase; line-height:.86; letter-spacing:-.02em;
  font-size:clamp(3.3rem,17.4vw,6.2rem); margin:.4rem 0 0; color:#fff; white-space:nowrap;
}
.tapa{ order:2; position:relative; width:min(100%,430px); margin:max(calc(-17.8vw + 6px), -4.5rem) auto 0; }      /* se sube en proporción al ancho: tapa media altura del cabezal, no todo */      /* se sube para montarse sobre el cabezal */
.tapa__figura{ position:relative; z-index:1; display:block; width:96%; height:auto; margin:0 auto; filter:drop-shadow(0 18px 14px rgba(110,10,50,.35)); }
.tapa__linea{ position:absolute; z-index:2; margin:0; line-height:1.1; text-align:left; }
.tapa__linea i{ display:block; font-family:var(--f-display); font-style:italic; font-weight:600; font-size:1.9rem; color:#fff; }
.tapa__linea b{ display:block; margin-top:.2rem; font-family:var(--f-texto); font-weight:700; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--negro); }
.tapa__linea--i{ left:0; top:50%; }
.tapa__linea--d{ right:0; top:67%; text-align:right; }
.tapa__linea--d i{ color:#FFE9A8; } .tapa__linea--d b{ color:#fff; }
/* los flashazos de los fotógrafos */
.flash{ position:absolute; z-index:0; width:120px; height:120px; margin:-60px; border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(circle, #fff 0, rgba(255,255,255,.7) 12%, rgba(255,255,255,0) 62%); animation:rv-flash 4.2s ease-out infinite; }
.flash--1{ left:12%; top:30%; } .flash--2{ left:88%; top:22%; animation-delay:1.5s; } .flash--3{ left:80%; top:82%; animation-delay:2.9s; }
@keyframes rv-flash{ 0%,7%,100%{ opacity:0; transform:scale(.4); } 2%{ opacity:1; transform:scale(1); } 4%{ opacity:.4; transform:scale(1.25); } }
.portada__de{ order:3; position:relative; z-index:2; margin:-.4rem 0 .7rem; padding:.5rem 1.2rem .4rem; background:var(--negro); font-family:var(--f-display); font-style:italic; font-weight:600; font-size:1.7rem; line-height:1; color:#fff; box-shadow:0 -5px 0 var(--mostaza); }
.portada__fecha{ order:4; border:0; padding:.2rem 0; gap:.9rem; }
.portada__fecha .fcol{ color:#fff; font-weight:700; letter-spacing:.2em; font-size:.7rem; }
.portada__fecha .fcol small{ color:#fff; opacity:.9; }
.portada__fecha .fnum{ font-family:var(--f-display); font-weight:900; font-size:3rem; color:#fff; }
.portada__lugar{ order:5; margin-top:.5rem; color:#fff; font-weight:500; }
.portada__flecha span{ border-color:#fff; }


/* ══════════════════════════════════════════════════════════════════════
   LAS SECCIONES — páginas de revista
   ══════════════════════════════════════════════════════════════════════ */
.saludo .etiqueta{ justify-content:center; } .saludo .etiqueta::before, .saludo .etiqueta::after{ display:none; }
.saludo__nombre{ font-family:var(--f-display); font-style:italic; font-weight:600; font-size:clamp(2rem,8.6vw,2.6rem); line-height:1.08; color:var(--negro); }
.saludo__pases{ background:var(--negro); color:#fff; border-radius:0; font-weight:700; letter-spacing:.06em; }

.seccion.alterna{ background:var(--rosa-palido); }
.cuenta.alterna, .rsvp.alterna{ background:var(--negro); }
:is(.cuenta.alterna, .rsvp.alterna) .titulo{ color:#fff; }
.rsvp__intro b{ color:var(--rosa-claro); }

.cuenta__caja, .formulario{ background:var(--crema); border:0; border-radius:var(--radio); box-shadow:6px 6px 0 var(--rosa); }
.cuenta__caja .n{ font-family:var(--f-display); font-weight:900; color:#B81A5B; }
.cuenta__caja .l{ color:#575050; font-weight:700; letter-spacing:.14em; }

/* la carta de los editores: con su letra capital */
.dedicatoria__texto{ font-family:var(--f-display); font-weight:500; font-size:1.34rem; line-height:1.5; color:var(--tinta); text-align:left; }
.dedicatoria{ border-top:3px solid var(--negro); border-bottom:1px solid rgba(28,26,26,.3); max-width:560px; }
.dedicatoria .etiqueta{ display:block; margin-top:1.4rem; text-align:left; letter-spacing:.22em; color:var(--tinta-suave); }
.dedicatoria .etiqueta::before, .dedicatoria .etiqueta::after{ display:none; }
.dedicatoria__firma{ font-family:var(--f-display); font-style:italic; font-weight:600; font-size:1.6rem; color:var(--acento); text-align:left; }

/* el sumario: renglones numerados, no tarjetas */
.tarjetas{ display:block; counter-reset:nota; text-align:left; }
.tarjeta{ display:grid; grid-template-columns:auto 1fr; column-gap:1rem; align-items:center; padding:1rem 0; background:none; border:0; border-bottom:1px solid rgba(28,26,26,.3); border-radius:0; box-shadow:none; counter-increment:nota; text-align:left; }
.tarjeta:first-child{ border-top:3px solid var(--negro); }
.tarjeta__icono{ grid-row:1 / 3; width:54px; height:54px; padding:11px; box-sizing:border-box; border-radius:50%; color:#fff; background:var(--rosa); }
.tarjeta b{ font-family:var(--f-display); font-style:italic; font-weight:600; font-size:1.5rem; line-height:1.1; color:var(--tinta); }
.tarjeta b::before{ content:"0" counter(nota) "  "; font-family:var(--f-texto); font-style:normal; font-weight:700; font-size:.7rem; letter-spacing:.14em; color:var(--acento); vertical-align:middle; }
.tarjeta small{ color:var(--tinta-suave); font-size:.92rem; }

.galeria__grid{ gap:.8rem; }
.foto img{ border-radius:0; box-shadow:var(--sombra); background:var(--rosa-palido); }
.foto__hueco{ border:1px dashed var(--negro); border-radius:0; }

.linea::before{ background:var(--negro); width:1px; }
.linea__paso::before{ background:var(--rosa); border:3px solid var(--rosa-palido); border-radius:50%; box-shadow:0 0 0 1px var(--negro); }
.linea__paso.destaca::before{ background:var(--mostaza); }
.linea__hora{ font-family:var(--f-display); font-weight:900; font-size:1.25rem; color:var(--acento); }
.linea__que b{ font-family:var(--f-display); font-style:italic; font-weight:600; font-size:1.3rem; color:var(--tinta); }

.lugares__hora{ font-weight:700; color:var(--acento); }
.mapa{ border:1px solid var(--negro); border-radius:0; box-shadow:8px 8px 0 var(--rosa-claro); }

.parrafo b{ color:var(--acento); }
.notas__lista{ margin-top:1.2rem; }
.notas__lista li{ background:var(--crema); border:1px solid var(--negro); border-left:8px solid var(--rosa); border-radius:0; box-shadow:none; }
.faq__item{ background:none; border-radius:0; box-shadow:none; border-bottom:1px solid rgba(28,26,26,.3); }
.faq__lista{ border-top:3px solid var(--negro); }
.faq__item summary{ font-family:var(--f-display); font-weight:700; font-size:1.14rem; color:var(--tinta); padding-left:0; padding-right:0; }
.faq__item p{ padding-left:0; padding-right:0; }

.boton{
  background:var(--rosa); color:#fff; border:0; border-radius:0; box-shadow:5px 5px 0 var(--negro);
  font-family:var(--f-texto); font-weight:700; font-size:.98rem; letter-spacing:.12em; text-transform:uppercase;
}
.rsvp.alterna .boton{ box-shadow:5px 5px 0 var(--mostaza); }
.boton:active{ transform:translate(4px,4px); box-shadow:1px 1px 0 var(--negro); }
.boton--linea{ background:transparent; color:var(--tinta); border:1.5px solid var(--negro); box-shadow:none; font-size:.82rem; }

.formulario{ padding:1.4rem 1.1rem 1.5rem; }
.campo input, .campo select, .campo textarea, .buscar__entrada{ border:1.5px solid #1C1A1A; border-radius:0; background:#fff; color:#1C1A1A; }
.buscar{ border:1px solid var(--negro); border-radius:0; box-shadow:8px 8px 0 var(--rosa-claro); }

.pie{ background:var(--rosa); }
.pie__nombre{ font-family:var(--f-display); font-weight:900; text-transform:uppercase; font-size:3.2rem; line-height:.9; letter-spacing:-.02em; color:#fff; }

@media (prefers-reduced-motion:reduce){
  .gancho.revista-cerrada, .entrada__pista, .flash{ animation:none; }
  .revista__tapa{ transition:none; }
}