/* Estilos compartidos del álbum. Marca de Mireia (skill marca-mireia):
   rojo #99261E como principal, superficies en crema, Montserrat para títulos y
   Nunito Sans para el texto. Claro a propósito: lo ve un invitado en el celular. */
:root{
  --rojo:#99261E; --rojo-osc:#7A1E18; --topo:#70665B; --crema:#D8D5C1; --arena:#DDBC8C;
  --fondo:#F3F0E6; --papel:#FFFDF8; --tinta:#2B2522; --suave:#6E655C; --linea:#E3DDCC;
  --ok:#4F6B3A; --alerta:#B25B12;
  --t:"Montserrat","Helvetica Neue",Arial,sans-serif; --b:"Nunito Sans","Segoe UI",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font-family:var(--b);font-size:16px;line-height:1.5}
h1,h2,h3{font-family:var(--t);margin:0;line-height:1.15;text-wrap:balance}
p{margin:0}
button,input,select{font:inherit}
:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}

.pagina{max-width:520px;margin:0 auto;background:var(--papel);min-height:100vh;box-shadow:0 0 0 1px var(--linea)}
.barra{background:var(--rojo);padding:16px 18px;display:flex;justify-content:center}
.barra .logo{display:block;width:112px;height:60px;background:url("/logo-negativo.svg") center/contain no-repeat}

.hero{position:relative;aspect-ratio:16/10;background:#CFC8B5 center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(30,20,16,.72),rgba(30,20,16,0) 62%)}
.hero .texto{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;color:#fff}
.hero .zona{font-family:var(--t);font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.92}
.hero h1{font-size:24px;margin-top:4px}

.cuerpo{padding:20px 18px 28px;display:flex;flex-direction:column;gap:18px}
.cuerpo h2{font-size:19px}
.sub{font-size:15px;color:var(--suave)}
.tarjeta{border:1px solid var(--linea);border-radius:6px;padding:16px;display:flex;flex-direction:column;gap:12px;background:#fff}
.tarjeta.crema{background:#F6F1E4}
.tarjeta h3{font-size:16px;color:var(--rojo)}

.btn{display:block;width:100%;border:0;background:var(--rojo);color:#fff;font-family:var(--t);font-weight:700;font-size:14px;letter-spacing:.02em;padding:14px;border-radius:4px;cursor:pointer;text-align:center;text-decoration:none}
.btn:hover{background:var(--rojo-osc)}
.btn:disabled{background:#C9BFB3;cursor:not-allowed}
.btn.sec{background:transparent;color:var(--rojo);border:1.5px solid var(--rojo)}
.btn.sec:hover{background:#F6ECE6}
.btn.chico{display:inline-block;width:auto;padding:8px 14px;font-size:13px}

.check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;font-size:14px;color:var(--suave);align-items:start;cursor:pointer}
.check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--rojo)}
.legal{font-size:12.5px;color:var(--suave)}
.aviso{padding:12px 14px;border-radius:4px;font-size:14px;background:#F6ECE6;color:var(--rojo-osc)}
.aviso.ok{background:#EEF1E6;color:var(--ok)}

.contador{display:flex;justify-content:space-between;font-size:14px;color:var(--suave)}
.contador b{color:var(--tinta);font-weight:700}
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.item{position:relative;aspect-ratio:1;background:#E9E4D3;border-radius:3px;overflow:hidden}
.item img,.item video{width:100%;height:100%;object-fit:cover;display:block}
.item .estado{position:absolute;left:4px;bottom:4px;background:rgba(43,37,34,.82);color:#fff;font-size:10.5px;font-family:var(--t);font-weight:600;padding:2px 6px;border-radius:2px}
.item .barra-prog{position:absolute;left:0;bottom:0;height:4px;background:var(--rojo);width:0;transition:width .2s}
.item.error .estado{background:var(--rojo)}

.campo{display:flex;flex-direction:column;gap:6px}
.campo label,.campo legend{font-family:var(--t);font-weight:600;font-size:13px;padding:0}
fieldset{border:0;margin:0;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label{font-family:var(--b);font-weight:600;font-size:14px;padding:8px 13px;border:1.5px solid var(--linea);border-radius:999px;cursor:pointer;background:#fff}
.chips input:checked+label{border-color:var(--rojo);color:var(--rojo);background:#F6ECE6}
.chips input:focus-visible+label{outline:2px solid var(--rojo);outline-offset:2px}
select,input[type=text]{font-size:16px;padding:11px 12px;border:1.5px solid var(--linea);border-radius:4px;background:#fff;color:var(--tinta);width:100%}

.pie{padding:0 18px 28px;font-size:12.5px;color:var(--suave);text-align:center}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}