/* Cierre "¿Hablamos?": a la altura de la entrada (letra gigante con volumen, objetos que se pueden coger, tarjeta con cara) */
.cierre{position:relative;background:#0a0a0a;padding:clamp(70px,9vw,140px) 0 clamp(40px,5vw,80px);overflow:hidden}
.ci-escena{position:relative;height:clamp(260px,34vw,560px);margin:0 var(--pad)}
.ci-k{position:absolute;left:var(--cp);top:0;color:var(--ink-3)}
.ci-big{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%) rotate(-2deg);margin:0;white-space:nowrap;
  font-weight:900;text-transform:uppercase;letter-spacing:-.06em;line-height:.85;font-size:clamp(70px,15.5vw,300px);color:#f2efe8;
  text-shadow:none;   /* plano, sin volumen (Sergio 24/10: "que no sea tridimensional") */
  pointer-events:none;z-index:2}
.ci-obj{position:absolute;left:var(--x);top:var(--y);width:var(--w);transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--r));z-index:1;
  filter:drop-shadow(0 26px 30px rgba(0,0,0,.6));cursor:grab;touch-action:none;user-select:none;-webkit-user-drag:none;transition:filter .2s}
.ci-obj.agarrado{cursor:grabbing;z-index:3;filter:drop-shadow(0 40px 50px rgba(0,0,0,.75)) brightness(1.06)}
.ci-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,5vw,90px);align-items:start;margin:clamp(30px,4vw,60px) var(--pad) 0;padding:0 var(--cp)}
.ci-card{background:#f2efe8;color:#0a0a0a;border-radius:22px;padding:clamp(24px,2.6vw,40px);transform:rotate(-2.5deg);box-shadow:0 40px 80px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:18px;max-width:560px;justify-self:end;width:100%}
.ci-who{display:flex;align-items:center;gap:14px}
.ci-who img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 3px #0a0a0a}
.ci-who p{display:flex;flex-direction:column;line-height:1.25}
.ci-who b{font-weight:900;font-size:19px;letter-spacing:-.02em}
.ci-who span{font-size:14px;color:rgba(10,10,10,.6)}
.ci-q{font-weight:900;text-transform:uppercase;letter-spacing:-.04em;font-size:clamp(26px,2.4vw,40px);line-height:.95}
.ci-card .chips{display:flex;flex-wrap:wrap;gap:10px}
.ci-card .chips label{cursor:pointer}
.ci-card .chips input{position:absolute;opacity:0;pointer-events:none}
.ci-card .chips span{display:inline-block;border:2px solid #0a0a0a;border-radius:999px;padding:10px 16px;font-weight:600;font-size:15px;transition:background .2s,color .2s}
.ci-card .chips input:checked+span{background:#0a0a0a;color:#f2efe8}
.ci-go{display:flex;justify-content:space-between;align-items:center;background:#25D366;color:#06260f;font-weight:700;font-size:17px;padding:18px 22px;border-radius:14px}
.ci-go:hover{background:#1fbe5a}
.ci-note{font-size:13px;color:rgba(10,10,10,.55);text-align:center}
.ci-pasos{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.ci-pasos li{display:grid;grid-template-columns:52px 1fr;column-gap:14px;padding:20px 0;border-bottom:1px solid var(--line)}
.ci-pasos .label{grid-row:span 2;padding-top:6px}
.ci-pasos b{font-weight:900;text-transform:uppercase;letter-spacing:-.035em;font-size:clamp(20px,1.8vw,30px);line-height:1}
.ci-pasos p{color:var(--ink-2);font-size:15px;margin-top:6px}
.ci-contacto{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:clamp(18px,2.4vw,40px);margin-top:30px}
.ci-contacto a{display:flex;flex-direction:column;gap:6px}
.ci-contacto b{font-weight:600;font-size:16px;overflow-wrap:anywhere}
.ci-contacto a:hover b{text-decoration:underline}
.ring-mas{position:absolute;left:50%;bottom:4vh;transform:translateX(-50%);z-index:4;display:inline-flex;gap:10px;align-items:center;background:var(--ink);color:#0a0a0a;font-weight:600;font-size:15px;padding:14px 20px}
.ring.muro .ring-mas{position:relative;left:auto;bottom:auto;transform:none;align-self:center;margin:0 0 30px}
@media (max-width:820px){
  .ci-escena{height:300px}
  .ci-big{font-size:17vw;top:58%}
  .ci-obj{width:calc(var(--w) * 2.4)}
  .ci-grid{grid-template-columns:1fr;gap:36px}
  .ci-card{justify-self:stretch;transform:rotate(-1.5deg)}
  .ci-contacto{grid-template-columns:1fr}
  .ring-mas{bottom:90px}
}
.ci-big{font-size:clamp(64px,13.2vw,260px)}

/* cierre depurado: la letra, la tarjeta y el contacto, centrados */
.ci-escena{height:clamp(200px,24vw,400px)}
.ci-grid{grid-template-columns:1fr;justify-items:center;gap:40px}
.ci-card{justify-self:center}
.ci-lado{width:100%;max-width:900px}
.ci-contacto{justify-content:center;margin-top:0}
.ci-contacto a{align-items:center;text-align:center}
@media (max-width:820px){.ci-big{font-size:14.5vw}}

/* "Ver todos los clientes" abajo a la derecha (enfrente de "Pausar movimiento"), para que no pise los nombres de los móviles (24/10) */
@media (min-width:821px){.ring:not(.muro) .ring-mas{left:auto;right:var(--pad,44px);bottom:20px;transform:none;padding:11px 18px;font-size:14px}}

/* 24/10: en vez de la foto de Paloma, el vídeo de su promo al lado de la tarjeta (lo pidió Paloma) */
.ci-promo{position:relative;width:min(100%,380px);border-radius:18px;overflow:hidden;background:#111;margin-bottom:30px}
.ci-promo video{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;cursor:pointer}
.ci-sonido{position:absolute;left:14px;bottom:14px;margin:0;padding:9px 14px;border:0;border-radius:999px;background:rgba(10,10,10,.72);color:#f2efe8;cursor:pointer;backdrop-filter:blur(6px)}
@media (max-width:820px){.ci-promo{margin:0 auto 28px}}
@media (min-width:821px){.ci-grid:has(.ci-promo){grid-template-columns:minmax(0,520px) minmax(0,380px);justify-content:center;justify-items:stretch;align-items:center}.ci-grid:has(.ci-promo) .ci-lado{max-width:380px}.ci-grid:has(.ci-promo) .ci-contacto{grid-template-columns:1fr;justify-content:start;margin-top:0}.ci-grid:has(.ci-promo) .ci-contacto a{align-items:flex-start;text-align:left}}

/* 24/10: cierre corto en las páginas interiores (el completo, solo en Inicio y Contacto) */
.cierre-corto{text-align:center;padding:clamp(60px,8vw,110px) var(--pad) clamp(50px,6vw,90px)}
.cierre-corto .cc-k{color:var(--ink-3);margin:0}
.cierre-corto .cc-t{font-weight:900;text-transform:uppercase;letter-spacing:-.05em;line-height:.9;font-size:clamp(48px,7vw,120px);margin:14px 0 28px;color:#f2efe8}
.cierre-corto .cc-go{display:inline-flex;gap:28px;max-width:100%}
.cierre-corto .cc-note{margin-top:16px;font-size:14px;color:var(--ink-2)}
.cierre-corto .cc-note a{text-decoration:underline}
