/* ════════════════════════════════════════════════════════════
   CIERRE — "Tu tienda Shopify, con Draco, por 0 €."
   Último bloque antes del footer: tarjeta azul centrada con la
   promesa, los mismos botones que el hero y lo que incluye.
   Los botones usan .dh-btn (css/hero-draco.css); aquí solo se
   ajustan para ir sobre azul.
   ════════════════════════════════════════════════════════════ */

.cierre{position:relative;padding:calc(var(--section-pad) * .5) 0 calc(var(--section-pad) + 60px)}
.cierre-container{max-width:var(--page-max);margin:0 auto;padding-inline:var(--page-gutter)}

.cierre-card{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:64px 32px 52px;border-radius:32px;color:#fff;
  background:radial-gradient(120% 90% at 50% 0%,#2c5fd9 0%,#1f4bbd 40%,#14327f 75%,#0e2560 100%);
  box-shadow:0 30px 60px -40px rgba(36,87,230,.4),inset 0 1px 0 rgba(255,255,255,.14)}
/* rejilla de puntos que se apaga hacia los bordes */
.cierre-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.3px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(60% 70% at 50% 40%,#000,transparent);mask-image:radial-gradient(60% 70% at 50% 40%,#000,transparent)}

/* el logo es azul: va en una pastilla oscura para que no se pierda en el fondo */
.cierre-logo{box-sizing:content-box;width:44px;height:auto;margin-bottom:22px;padding:12px;border-radius:18px;background:#0a0f1c;box-shadow:0 12px 26px -10px rgba(0,0,0,.6)}
.cierre-title{font-size:clamp(2rem,4.4vw,3.4rem);font-weight:900;letter-spacing:-.035em;line-height:1.04;margin-bottom:16px;color:#fff}
.cierre-title span{color:#bfe3ff}
.cierre-sub{max-width:48ch;font-size:17px;line-height:1.55;color:rgba(255,255,255,.82);margin-bottom:30px}

.cierre-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-bottom:26px}
.cierre .cierre-btn{background:#fff!important;color:#163b9e!important;box-shadow:0 14px 30px -12px rgba(0,0,0,.45)}
.cierre .cierre-btn:hover{background:#eef4ff!important}
.cierre .cierre-btn--ghost{border-color:rgba(255,255,255,.45)!important;color:#fff!important;background:rgba(255,255,255,.06)!important}
.cierre .cierre-btn--ghost:hover{background:rgba(255,255,255,.14)!important}
.cierre .cierre-btn--ghost .dh-btn-play{border-color:rgba(255,255,255,.7);color:#fff}
.cierre .cierre-btn--ghost small{color:rgba(255,255,255,.7)}

.cierre-list{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin:0 0 18px;padding:0;font-size:14.5px;font-weight:600}
.cierre-list li{display:flex;align-items:center;gap:8px}
.cierre-list span{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.18);font-size:11px}
.cierre-fine{max-width:60ch;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.6)}

@media(max-width:640px){
  .cierre-card{padding:44px 20px 36px;border-radius:24px}
  .cierre-sub{font-size:15.5px}
  .cierre-actions{flex-direction:column;align-self:stretch}
  .cierre-actions .dh-btn{width:100%;justify-content:center}
  .cierre-list{flex-direction:column;align-items:center;gap:8px}
}