/* ─────────────────────────────────────────────────────────────
   Wedly — Base de las webs de boda
   Los colores y tipografías llegan en :root desde PHP.
   Diseñado por Olivier Melín · tecmad.es
   ───────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--c-fondo);color:var(--c-texto);
  font-family:var(--f-texto);font-size:17px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-primario)}
:focus-visible{outline:2px solid var(--c-acento);outline-offset:3px}

.b-contenedor{width:100%;max-width:1080px;margin:0 auto;padding:0 24px}
.b-contenedor--estrecho{max-width:680px}

/* ── Navegación fija ────────────────────────────────────── */
.b-nav{
  position:sticky;top:0;z-index:50;background:var(--c-fondo);
  border-bottom:1px solid color-mix(in srgb,var(--c-texto) 12%,transparent);
}
.b-nav__fila{display:flex;align-items:center;justify-content:center;gap:26px;padding:15px 24px;flex-wrap:wrap}
.b-nav a{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--c-texto);text-decoration:none;opacity:.72;transition:opacity .2s;
}
.b-nav a:hover{opacity:1}

/* ── Secciones ──────────────────────────────────────────── */
.b-seccion{padding:clamp(64px,9vw,116px) 0}
.b-seccion--alt{background:color-mix(in srgb,var(--c-primario) 5%,var(--c-fondo))}

.b-cab{text-align:center;margin-bottom:clamp(36px,5vw,60px)}
.b-titulo{
  font-family:var(--f-titulo);font-weight:400;
  font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.16;
  color:var(--c-primario);margin:0;
}
.b-regla{display:block;width:48px;height:1px;background:var(--c-acento);margin:20px auto}
.b-sub{
  font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  opacity:.65;margin:0;
}

.b-prosa{font-size:1.04rem;line-height:1.85}
.b-prosa--centro{text-align:center}
.b-prosa p{margin:0 0 1.1em}
.b-prosa p:last-child{margin-bottom:0}
.b-prosa h2,.b-prosa h3{font-family:var(--f-titulo);font-weight:400;color:var(--c-primario)}
.b-prosa ul,.b-prosa ol{padding-left:1.3em}
.b-prosa li{margin-bottom:.5em}

/* ── Botones ────────────────────────────────────────────── */
.b-boton{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-texto);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  padding:15px 28px;border-radius:2px;text-decoration:none;cursor:pointer;
  border:1px solid var(--c-primario);transition:background .25s,color .25s;line-height:1;
}
.b-boton--solido{background:var(--c-primario);color:var(--c-fondo)}
.b-boton--solido:hover{background:transparent;color:var(--c-primario)}
.b-boton--linea{background:transparent;color:var(--c-primario)}
.b-boton--linea:hover{background:var(--c-primario);color:var(--c-fondo)}

/* ── Cuenta atrás ───────────────────────────────────────── */
.b-cuenta{text-align:center}
.b-reloj{display:flex;justify-content:center;gap:clamp(18px,5vw,56px);flex-wrap:wrap}
.b-reloj__u{min-width:66px}
.b-reloj__u .n{
  display:block;font-family:var(--f-titulo);font-weight:400;
  font-size:clamp(2.2rem,5.4vw,3.4rem);line-height:1;color:var(--c-primario);
  font-variant-numeric:tabular-nums;
}
.b-reloj__u .e{
  display:block;margin-top:10px;font-size:.66rem;
  letter-spacing:.22em;text-transform:uppercase;opacity:.6;
}
.b-cuenta__fecha{
  margin-top:34px;font-family:var(--f-titulo);font-size:1.28rem;color:var(--c-primario);
}
.b-cuenta__ya{font-family:var(--f-titulo);font-size:1.5rem;color:var(--c-primario);margin:0}

/* ── Eventos ────────────────────────────────────────────── */
.b-eventos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:color-mix(in srgb,var(--c-texto) 12%,transparent)}
.b-evento{
  background:var(--c-fondo);padding:clamp(28px,3.4vw,42px) clamp(20px,2.6vw,32px);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;
}
.b-evento__hora{
  font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--c-acento);margin:0 0 14px;
}
.b-evento__titulo{
  font-family:var(--f-titulo);font-weight:400;font-size:1.5rem;
  color:var(--c-primario);margin:0 0 10px;
}
.b-evento__fecha{font-size:.86rem;opacity:.7;margin:0 0 10px}
.b-evento__lugar{font-size:1.02rem;margin:0}
.b-evento__dir{font-size:.88rem;opacity:.62;margin:4px 0 0}
.b-evento__notas{font-size:.88rem;opacity:.75;margin:14px 0 0;max-width:34ch}
.b-evento .b-boton{margin-top:22px}

/* ── Galería ────────────────────────────────────────────── */
.b-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.b-galeria__item{
  padding:0;border:0;background:none;cursor:zoom-in;overflow:hidden;
  aspect-ratio:1;display:block;
}
.b-galeria__item img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.3,1)}
.b-galeria__item:hover img{transform:scale(1.045)}

.b-visor{
  position:fixed;inset:0;z-index:100;background:rgba(12,14,12,.94);
  display:grid;place-items:center;padding:40px 20px;
}
.b-visor[hidden]{display:none}
.b-visor__img{max-width:min(94vw,1200px);max-height:82vh;object-fit:contain}
.b-visor__pie{position:absolute;bottom:24px;left:0;right:0;text-align:center;color:#fff;font-size:.86rem;opacity:.8;margin:0}
.b-visor__cerrar,.b-visor__nav{
  position:absolute;background:none;border:0;color:#fff;cursor:pointer;
  font-size:2.4rem;line-height:1;padding:12px 18px;opacity:.7;transition:opacity .2s;
}
.b-visor__cerrar:hover,.b-visor__nav:hover{opacity:1}
.b-visor__cerrar{top:12px;right:16px;font-size:2.2rem}
.b-visor__nav--ant{left:6px;top:50%;transform:translateY(-50%);font-size:3rem}
.b-visor__nav--sig{right:6px;top:50%;transform:translateY(-50%);font-size:3rem}

/* ── Formularios ────────────────────────────────────────── */
.b-form{max-width:520px;margin:0 auto}
.b-form--corto{margin-top:44px}
.b-campo{margin-bottom:20px}
.b-campo label{
  display:block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  opacity:.7;margin-bottom:8px;
}
.b-opcional{text-transform:none;letter-spacing:0;opacity:.7}
.b-campo input,.b-campo select,.b-campo textarea{
  width:100%;padding:13px 14px;border:1px solid color-mix(in srgb,var(--c-texto) 22%,transparent);
  background:var(--c-fondo);color:var(--c-texto);font-family:var(--f-texto);font-size:1rem;
  border-radius:2px;
}
.b-campo textarea{resize:vertical;line-height:1.6}
.b-campo--doble{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:520px){.b-campo--doble{grid-template-columns:1fr}}

.b-opciones{border:0;padding:0;margin:0 0 22px;display:flex;gap:12px;flex-wrap:wrap}
.b-opciones legend{
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;opacity:.7;
  margin-bottom:10px;padding:0;
}
.b-opcion{flex:1 1 150px;position:relative;cursor:pointer}
.b-opcion input{position:absolute;opacity:0;pointer-events:none}
.b-opcion span{
  display:block;text-align:center;padding:14px 12px;border-radius:2px;
  border:1px solid color-mix(in srgb,var(--c-texto) 22%,transparent);
  font-size:.9rem;transition:border-color .2s,background .2s,color .2s;
}
.b-opcion input:checked + span{
  border-color:var(--c-primario);background:var(--c-primario);color:var(--c-fondo);
}
.b-opcion input:focus-visible + span{outline:2px solid var(--c-acento);outline-offset:2px}

.b-check{display:flex;align-items:center;gap:11px;margin-bottom:22px;font-size:.94rem;cursor:pointer}
.b-check input{width:auto}

/* Campo trampa contra bots */
.b-trampa{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important}

.b-aviso{
  padding:14px 18px;border-left:2px solid var(--c-acento);margin:0 auto 24px;
  max-width:520px;font-size:.94rem;
  background:color-mix(in srgb,var(--c-acento) 10%,transparent);
}
.b-aviso--ok{border-color:var(--c-primario);background:color-mix(in srgb,var(--c-primario) 9%,transparent)}
.b-aviso--error{border-color:#A03A2B;background:rgba(160,58,43,.09);color:#8C3325}

/* ── Regalos ────────────────────────────────────────────── */
.b-regalos{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:24px;margin-top:44px}
.b-regalo{
  border:1px solid color-mix(in srgb,var(--c-texto) 14%,transparent);
  padding:24px;text-align:center;display:flex;flex-direction:column;gap:8px;
}
.b-regalo--tomado{opacity:.5}
.b-regalo__img{width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:14px}
.b-regalo__titulo{font-family:var(--f-titulo);font-weight:400;font-size:1.24rem;color:var(--c-primario);margin:0}
.b-regalo__desc{font-size:.9rem;opacity:.75;margin:0}
.b-regalo__precio{font-size:.86rem;letter-spacing:.12em;color:var(--c-acento);margin:0}
.b-regalo__estado{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;opacity:.6;margin:12px 0 0}
.b-regalo__form{display:grid;gap:9px;margin-top:auto;padding-top:16px}
.b-regalo__form input{
  padding:11px 13px;border:1px solid color-mix(in srgb,var(--c-texto) 22%,transparent);
  background:var(--c-fondo);color:var(--c-texto);font-family:var(--f-texto);font-size:.94rem;border-radius:2px;
}
.b-regalo .b-boton{margin-top:14px}


/* ── Pie y marca de agua ────────────────────────────────── */
.b-pie{
  text-align:center;padding:52px 24px 40px;
  border-top:1px solid color-mix(in srgb,var(--c-texto) 12%,transparent);
}
.b-pie__nombres{font-family:var(--f-titulo);font-size:1.5rem;color:var(--c-primario);margin:0}
.b-pie__hash{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;opacity:.6;margin:12px 0 0}

.b-marca{
  display:inline-block;margin-top:26px;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;opacity:.45;text-decoration:none;color:var(--c-texto);
}
.b-marca:hover{opacity:.8}
.b-marca strong{font-weight:400;color:var(--c-primario)}

/* ── Insignia del plan gratuito ─────────────────────────── */
.b-insignia{
  position:fixed;right:16px;bottom:16px;z-index:70;
  display:flex;align-items:stretch;
  background:color-mix(in srgb,var(--c-fondo) 92%,#fff);
  border:1px solid color-mix(in srgb,var(--c-texto) 14%,transparent);
  border-radius:100px;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.34);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  overflow:hidden;max-width:calc(100vw - 32px);
  transition:opacity .3s,transform .3s;
}
.b-insignia[hidden]{display:none}
.b-insignia--fuera{opacity:0;transform:translateY(14px);pointer-events:none}

.b-insignia__enlace{
  display:flex;align-items:center;gap:10px;
  padding:8px 6px 8px 8px;text-decoration:none;min-width:0;
}
.b-insignia__sello{
  width:30px;height:30px;border-radius:50%;flex:none;
  background:var(--c-primario);color:var(--c-fondo);
  display:grid;place-items:center;
  font-family:var(--f-titulo);font-size:.68rem;letter-spacing:.02em;
}
.b-insignia__txt{display:grid;line-height:1.25;min-width:0}
.b-insignia__alto{
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb,var(--c-texto) 68%,transparent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.b-insignia__cta{
  font-size:.8rem;color:var(--c-primario);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.b-insignia__enlace:hover .b-insignia__cta{text-decoration:underline;text-underline-offset:3px}

.b-insignia__cerrar{
  border:0;background:none;cursor:pointer;padding:0 14px 0 8px;
  font-size:1.1rem;line-height:1;
  color:color-mix(in srgb,var(--c-texto) 42%,transparent);
}
.b-insignia__cerrar:hover{color:var(--c-texto)}

@media (max-width:560px){
  .b-insignia{right:12px;bottom:12px}
  .b-insignia__alto{display:none}
  .b-insignia__cta{font-size:.76rem}
}
@media print{ .b-insignia{display:none} }
@media (prefers-reduced-motion:reduce){ .b-insignia{transition:none} }

/* ── Libro de firmas: muro de polaroids ─────────────────── */
.b-muro{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:clamp(22px,3.5vw,38px);
  align-items:start;
  padding:8px 0;
}

/* La polaroid: marco blanco con más aire abajo, como las de verdad */
.b-polaroid{
  margin:0;
  background:#FCFBF7;
  padding:11px 11px 0;
  border-radius:2px;
  box-shadow:0 10px 26px -10px rgba(0,0,0,.34), 0 1px 3px rgba(0,0,0,.12);
  transform:rotate(var(--giro,0deg));
  transition:transform .28s ease, box-shadow .28s ease;
  position:relative;
}
.b-polaroid:hover{
  transform:rotate(0deg) translateY(-4px) scale(1.02);
  box-shadow:0 18px 38px -12px rgba(0,0,0,.4);
  z-index:2;
}

.b-polaroid__foto{
  aspect-ratio:1/1;overflow:hidden;background:#E8E6E0;
}
.b-polaroid__foto img{
  width:100%;height:100%;object-fit:cover;display:block;
}

.b-polaroid figcaption{
  display:grid;gap:5px;
  padding:13px 6px 16px;
  text-align:center;
}
.b-polaroid__txt{
  font-family:var(--f-texto);font-size:.88rem;line-height:1.5;
  color:#2A2A28;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
  overflow:hidden;
}
.b-polaroid__nom{
  font-family:var(--f-titulo);font-size:1rem;font-style:italic;
  color:var(--c-primario);
}

/* Chincheta */
.b-polaroid__chincheta{
  position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  width:13px;height:13px;border-radius:50%;
  background:var(--c-acento);
  box-shadow:0 2px 4px rgba(0,0,0,.3), inset 0 -2px 3px rgba(0,0,0,.2);
  z-index:3;
}
.b-polaroid__chincheta::after{
  content:"";position:absolute;top:3px;left:3px;width:4px;height:4px;
  border-radius:50%;background:rgba(255,255,255,.6);
}

/* Mensajes sin foto: nota de papel */
.b-nota{
  margin:0;
  background:color-mix(in srgb,var(--c-fondo) 92%,#fff);
  border:1px solid color-mix(in srgb,var(--c-acento) 30%,transparent);
  border-radius:2px;
  padding:24px 22px 20px;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.24);
  transform:rotate(var(--giro,0deg));
  transition:transform .28s ease;
  display:grid;gap:14px;align-content:start;
}
.b-nota:hover{transform:rotate(0deg) translateY(-3px)}
.b-nota blockquote{
  margin:0;font-family:var(--f-texto);font-size:.94rem;line-height:1.65;
  color:var(--c-texto);position:relative;padding-top:14px;
}
.b-nota blockquote::before{
  content:"“";position:absolute;top:-6px;left:-2px;
  font-family:var(--f-titulo);font-size:2.6rem;line-height:1;
  color:var(--c-acento);opacity:.4;
}
.b-nota figcaption{
  font-family:var(--f-titulo);font-style:italic;font-size:1rem;
  color:var(--c-primario);text-align:right;
}
.b-nota figcaption::before{
  content:"";display:inline-block;width:18px;height:1px;vertical-align:middle;
  background:var(--c-acento);margin-right:9px;
}

/* Campo de subida */
.b-subir{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  padding:15px 18px;border-radius:3px;
  border:1px dashed color-mix(in srgb,var(--c-texto) 26%,transparent);
  background:color-mix(in srgb,var(--c-fondo) 96%,#fff);
  transition:border-color .18s,background .18s;
}
.b-subir:hover{
  border-color:var(--c-acento);
  background:color-mix(in srgb,var(--c-acento) 6%,transparent);
}
.b-subir__ic{
  width:30px;height:30px;border-radius:50%;flex:none;
  display:grid;place-items:center;font-size:1.1rem;
  background:color-mix(in srgb,var(--c-acento) 16%,transparent);
  color:var(--c-primario);
}
.b-subir__txt{font-size:.92rem;color:var(--c-texto);opacity:.85;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-subir__campo{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.b-subir__campo:focus-visible + .b-subir,
.b-subir:focus-within{outline:2px solid var(--c-acento);outline-offset:2px}
.b-opcional{
  text-transform:none;letter-spacing:0;opacity:.6;font-size:.82em;
}
.b-ayuda{margin:7px 0 0;font-size:.82rem;opacity:.7}

@media (max-width:480px){
  .b-muro{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px}
  .b-polaroid{padding:8px 8px 0}
  .b-polaroid figcaption{padding:10px 4px 12px}
}
@media (prefers-reduced-motion:reduce){
  .b-polaroid,.b-nota{transform:none;transition:none}
  .b-polaroid:hover,.b-nota:hover{transform:none}
}
@media print{
  .b-polaroid,.b-nota{transform:none;box-shadow:none;break-inside:avoid}
}