/* Cierre y pie (frente A4). Autónomo: define sus propios colores y botones con prefijo cierre-. */
.cierre, .pie{
  --c-azul:#0B2733; --c-azul-hondo:#071A22; --c-menta:#2FD5B8; --c-menta-hondo:#0FA48B;
  --c-crema:#F5F2EA; --c-linea:#D8D4C9; --c-linea-suave:#E4E0D6;
  --c-tinta-suave:#46545A; --c-tinta-tenue:#6E7A80; --c-sobre-azul:#F5F2EA; --c-sobre-azul-suave:#9DB4BA;
  --c-salida:cubic-bezier(0.23,1,0.32,1);
}
/* La calle fija se ve detrás: la sección es transparente y el contenido va en una tarjeta de papel (como la frase de la portada). */
.cierre{ position:relative; background:transparent; padding:88px 20px 72px; color:var(--c-azul); font-family:'Instrument Sans',Arial,sans-serif; }
.cierre-wrap{ max-width:880px; margin:0 auto; padding:48px 32px 40px; background:rgba(250,250,247,0.94); border:1.5px solid var(--c-azul); border-radius:18px; box-shadow:0 24px 60px -28px rgba(11,39,51,0.45); }
.cierre-eyebrow{ margin:0; text-align:center; color:var(--c-menta-hondo); font:600 13px 'Space Grotesk',Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.cierre h2{ margin:8px 0 0; text-align:center; font:700 clamp(1.9rem,4vw,2.8rem)/1.1 'Space Grotesk',Arial,sans-serif; color:var(--c-azul); }
.cierre-lead{ margin:14px auto 0; max-width:580px; text-align:center; color:var(--c-tinta-suave); font-size:16px; line-height:1.55; }
.cierre-accion{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:26px; }

.cierre-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; box-sizing:border-box;
  font:600 14.5px 'Space Grotesk',Arial,sans-serif; padding:14px 26px; min-height:46px;
  border-radius:999px; border:1px solid transparent; text-decoration:none; cursor:pointer;
  transition:transform 160ms var(--c-salida), background 180ms ease, border-color 180ms ease, color 180ms ease;
}
@media (hover:hover) and (pointer:fine){ .cierre-btn:hover{ transform:translateY(-1px); } }
.cierre-btn:active{ transform:scale(0.97); transition-duration:100ms; }
.cierre-btn:focus-visible{ outline:2px solid var(--c-menta-hondo); outline-offset:3px; }
.cierre-btn-menta{ background:var(--c-menta); color:var(--c-azul-hondo); }
.cierre-btn-menta:hover{ background:#4EE2C8; }
.cierre-btn-linea{ background:transparent; border-color:var(--c-linea); color:var(--c-azul); }
.cierre-btn-linea:hover{ border-color:var(--c-azul); background:rgba(11,39,51,.04); }

.cierre-card{
  display:flex; align-items:center; gap:22px; margin-top:44px; background:#fff;
  border:1px solid var(--c-linea); border-radius:18px; padding:22px;
}
.cierre-card-texto{ min-width:0; }
.cierre-card h3{ margin:0 0 6px; font:600 1.05rem 'Space Grotesk',Arial,sans-serif; color:var(--c-azul); }
.cierre-card p{ margin:0 0 14px; font-size:14px; color:var(--c-tinta-suave); }
.cierre-card .cierre-btn{ font-size:13px; padding:10px 16px; min-height:0; }
.cierre-card .cierre-correo{ margin:10px 0 0; font-size:13px; color:var(--c-tinta-tenue); word-break:break-all; }
.cierre-qr{ flex:0 0 auto; display:block; padding:8px; background:#fff; border:1px solid var(--c-linea-suave); border-radius:12px; line-height:0; }
.cierre-qr img{ width:170px; height:170px; max-width:100%; display:block; }
.cierre-aviso{ margin:18px auto 0; max-width:620px; text-align:center; font-size:13px; color:var(--c-tinta-tenue); }
.cierre-aviso a{ color:var(--c-menta-hondo); }

/* Pie */
.pie{ background:var(--c-azul-hondo); color:var(--c-sobre-azul-suave); padding:40px 0; text-align:center; font:400 12.5px/1.7 'Instrument Sans',Arial,sans-serif; }
.pie-wrap{ max-width:1100px; margin:0 auto; padding:0 24px; }
.pie a{ color:var(--c-sobre-azul); text-decoration:underline; text-underline-offset:3px; }
.pie a:hover{ color:var(--c-menta); }
.pie a:focus-visible{ outline:2px solid var(--c-menta); outline-offset:3px; border-radius:2px; }

@media (max-width:720px){
  .cierre{ padding:64px 16px 48px; }
  .cierre-wrap{ padding:36px 20px 32px; }
  .pie-wrap{ padding:0 20px; }
  .cierre-card{ flex-direction:column; text-align:center; }
  .cierre-card .cierre-btn, .cierre-accion .cierre-btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){ .cierre-btn{ transition:none; } .cierre-btn:hover,.cierre-btn:active{ transform:none; } }