/* ============================================================================
   cierre.css — CIERRE UNIFICADO (Moderno 2026-06-27). El mismo cierre premium
   CLARO en TODA piel (gente/inversor/portada/nichos): barra de fuentes (stat) +
   newsletter premium (panel dark) + disclaimer + footer split (marca izq / volver
   der). Se carga DESPUES de la skin (gana por orden + especificidad). La zona
   reescribe los tokens de color a la paleta CLARA, asi rinde identico sobre el
   fondo dark del inversor. Molde: un solo lugar -> las pieles nunca mas divergen.
   ============================================================================ */
/* La PALETA de la zona la define CADA SKIN en su `.cierre-zone{}` (gente=claro, despegue=oscuro): asi el
   MISMO cierre (estructura Moderno) rinde claro en gente y OSCURO en inversor/portada. Aca solo estructura.
   Tokens que cada skin debe definir: --paper --card --soft --bd --bd2 --ink --sec --dim --ac --acink
   --ac-soft --ver --pro --bad --on-ac (texto sobre el acento: #fff en claro, casi-negro en dark). */
.cierre-zone{background:var(--paper);color:var(--ink);font-family:var(--sans);
  border:1px solid var(--bd);border-radius:18px;padding:28px 26px 22px;margin-top:30px;
  /* el logo del newsletter va sobre el panel SIEMPRE oscuro -> mismo celeste en toda piel (no es por-skin) */
  --cap-dot:#5FA8D6}

/* kicker (regla 3px + azul) */
.cierre-zone .mm-kicker{display:flex;align-items:center;gap:10px;margin:0 0 13px}
.cierre-zone .mm-kicker i{width:24px;height:3px;background:var(--ac);border-radius:2px;flex:0 0 auto}
.cierre-zone .mm-kicker span{font-family:var(--mono);font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--acink)}

/* fuentes como BARRA DE STATS (summary de un details; abrir -> catalogo) */
.cierre-zone .fsrc{margin:0}
.cierre-zone .fsrc-bar{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--card);border:1px solid var(--bd);border-radius:14px;box-shadow:0 1px 2px rgba(26,28,22,.03);padding:18px 22px}
.cierre-zone .fsrc-bar::-webkit-details-marker{display:none}
/* hover: la caja entera es cliqueable -> se ilumina como el resto (borde acento + CTA relleno) */
.cierre-zone .fsrc-bar:hover{border-color:var(--ac)}
.cierre-zone .fsrc-bar:hover .fsrc-cta{background:var(--ac);color:var(--on-ac);border-color:var(--ac)}
.cierre-zone .fsrc[open] .fsrc-bar{border-radius:14px 14px 0 0}
.cierre-zone .fsrc-stats{display:flex;align-items:center;gap:22px;flex-wrap:wrap;flex:1 1 auto;min-width:0}
.cierre-zone .fsrc-n{font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums lining-nums}
.cierre-zone .fsrc-n.ac{color:var(--acink)}
.cierre-zone .fsrc-n.ok{color:var(--ver)}
.cierre-zone .fsrc-l{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-top:4px}
.cierre-zone .fsrc-div{width:1px;height:34px;background:var(--bd)}
.cierre-zone .fsrc-note{font-size:var(--fs-body);line-height:1.35;color:var(--sec);max-width:210px}
.cierre-zone .fsrc-note.compact{max-width:none;flex:1 1 auto}
.cierre-zone .fsrc-note b{color:var(--ink);font-weight:700}
.cierre-zone .fsrc-cta{flex:0 0 auto;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--acink);background:var(--ac-soft);border:1px solid var(--bd2);padding:11px 16px;border-radius:9px;white-space:nowrap}
.cierre-zone .fsrc-cta::after{content:"abrir el cat\00E1logo \2192"}
.cierre-zone .fsrc[open] .fsrc-cta::after{content:"cerrar el cat\00E1logo"}
.cierre-zone .fsrc-cat{border:1px solid var(--bd);border-top:none;border-radius:0 0 14px 14px;padding:6px 16px 14px;background:var(--card);overflow-x:auto}
.cierre-zone .fsrc-cat .panel{border:none;box-shadow:none;padding:0;margin:0}
/* la tabla del catalogo es auto-layout: un token largo en un titulo la ensancha mas alla del
   viewport movil (cazado a 390px en la pagina del escribano, 2026-07-06). La celda quiebra la
   palabra y, como red, el contenedor scrollea en vez de desbordar la pagina. Molde x34 paginas. */
.cierre-zone .fsrc-cat table{width:100%}
.cierre-zone .fsrc-cat td,.cierre-zone .fsrc-cat th{overflow-wrap:anywhere}

/* newsletter PREMIUM (panel izq dark-gradient + form der) */
.cierre-zone .capture{display:grid;grid-template-columns:300px 1fr;background:var(--card);border:1px solid var(--bd);border-radius:18px;overflow:hidden;box-shadow:0 1px 2px rgba(26,28,22,.03),0 20px 44px -30px rgba(26,28,22,.5);margin:18px 0 0}
/* contenido centrado: el panel izq es mas bajo que el form y el vacio caia entero antes del
   "SIN SPAM" (hallazgo 2026-07-03); centrado, el aire se reparte arriba y abajo */
.cierre-zone .cap-head{background:linear-gradient(165deg,#1A2733,#243446);padding:30px 28px;display:flex;flex-direction:column;justify-content:center}
.cierre-zone .cap-head svg{margin-bottom:20px}
.cierre-zone .cap-head h2{margin:0 0 12px;font-size:25px;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1.1}
.cierre-zone .cap-head p{margin:0;font-size:15px;line-height:1.5;color:#AAB8C4;max-width:none}
.cierre-zone .cap-head p b{color:#CDD9E2;font-weight:700}
.cierre-zone .cap-head::after{content:"SIN SPAM \00B7 UN ENV\00CDO POR SEMANA";font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:#637A8C;padding-top:24px}
.cierre-zone .cap-form{padding:26px 28px}
.cierre-zone .cap-q{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:11px}
.cierre-zone .cap-k{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);flex:0 0 100%;margin-bottom:1px}
.cierre-zone .cap-q label{cursor:pointer;position:relative}
.cierre-zone .cap-q input{position:absolute;opacity:0;pointer-events:none}
.cierre-zone .cap-q .opt{display:inline-block;font-size:var(--fs-body-lg);font-weight:500;padding:9px 16px;border-radius:9px;border:1.5px solid var(--bd2);color:var(--sec);background:var(--card);transition:.12s}
.cierre-zone .cap-q input:checked+.opt{color:var(--on-ac);border-color:var(--ac);background:var(--ac);font-weight:700}
.cierre-zone .cap-q input:focus-visible+.opt{outline:2px solid var(--ac);outline-offset:2px}
.cierre-zone .cap-q-prov{align-items:flex-start;margin-top:11px}
.cierre-zone .cap-q-prov .opt{font-size:var(--fs-sub);padding:6px 12px;border-width:1px;font-weight:500}
.cierre-zone .cap-hint{font-size:var(--fs-body-sm);color:var(--dim);flex:0 0 100%;margin-top:2px}
.cierre-zone .cap-row{display:flex;gap:11px;margin-top:20px;flex-wrap:wrap}
.cierre-zone .cap-mail{flex:1;min-width:220px;background:var(--paper);border:1.5px solid var(--bd2);border-radius:10px;padding:13px 16px;font:15px var(--sans);color:var(--ink)}
.cierre-zone .cap-mail::placeholder{color:var(--dim)}
.cierre-zone .cap-mail:focus{outline:none;border-color:var(--ac)}
/* campo abierto de nicho de interes (lead segmentado: en pagina de nicho viene prellenado con ese nicho).
   OJO: .cap-q input{opacity:0;position:absolute} oculta los radios/checkboxes -> hay que RE-MOSTRAR este
   input de texto con mayor especificidad (.cap-q .cap-nicho), si no queda invisible (bug visto en vivo). */
.cierre-zone .cap-q-nicho{align-items:flex-start;margin-top:11px}
.cierre-zone .cap-q .cap-nicho{position:static;opacity:1;pointer-events:auto;flex:0 0 100%;
  background:var(--paper);border:1.5px solid var(--bd2);border-radius:10px;padding:12px 16px;
  font:15px var(--sans);color:var(--ink);margin-top:8px}
.cierre-zone .cap-q .cap-nicho::placeholder{color:var(--dim)}
.cierre-zone .cap-q .cap-nicho:focus{outline:none;border-color:var(--ac)}
/* texto libre "contanos tu caso" (pedido usuario 2026-07-05: el formato cerrado perdia contactos/
   oportunidades). textarea, mismo look que .cap-nicho; resize solo vertical. */
.cierre-zone .cap-q .cap-msg{position:static;opacity:1;pointer-events:auto;flex:0 0 100%;
  background:var(--paper);border:1.5px solid var(--bd2);border-radius:10px;padding:12px 16px;
  font:15px/1.5 var(--sans);color:var(--ink);margin-top:8px;resize:vertical;min-height:74px}
.cierre-zone .cap-q .cap-msg::placeholder{color:var(--dim)}
.cierre-zone .cap-q .cap-msg:focus{outline:none;border-color:var(--ac)}
.cierre-zone .cap-btn{font:700 15px var(--sans);background:var(--ac);color:var(--on-ac);border:none;border-radius:10px;padding:13px 28px;cursor:pointer;min-height:44px}
.cierre-zone .cap-btn:hover{filter:brightness(1.07)}
.cierre-zone .cap-ok{margin-top:12px;font-size:var(--fs-body);font-weight:700;color:var(--ver)}
/* estados honestos del form (C3 2026-07-09): sin endpoint no se simula el alta; error deja reintentar */
.cierre-zone .cap-off{margin-top:12px;font-size:var(--fs-body);font-weight:700;color:var(--dim)}
.cierre-zone .cap-err{margin-top:12px;font-size:var(--fs-body);font-weight:700;color:var(--bad)}

/* disclaimer como caja clara */
.cierre-zone .disc{background:var(--soft);border:1px solid var(--bd);border-radius:13px;padding:15px 20px;margin:18px 0 0;font-size:var(--fs-body);line-height:1.55;color:var(--sec)}
.cierre-zone .disc b{color:var(--ink);font-weight:700}
.cierre-zone .disc .src{color:var(--acink);text-decoration:none;font-weight:600}

/* footer SPLIT: marca a la izquierda, 'volver a la portada ->' a la derecha */
.cierre-zone .foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:var(--fs-micro);color:var(--dim);margin:22px 0 0;padding-top:16px;border-top:1px solid var(--bd);text-align:left}
.cierre-zone .foot .src{color:var(--acink);text-decoration:none}
.cierre-zone .foot b{color:var(--acink);font-weight:600}

@media(max-width:620px){
  .cierre-zone{padding:22px 18px 18px}
  .cierre-zone .fsrc-bar{gap:14px;flex-wrap:wrap}
  .cierre-zone .fsrc-div{display:none}
  .cierre-zone .fsrc-stats{gap:18px}
  .cierre-zone .fsrc-cta{flex:0 0 100%;text-align:center}
  .cierre-zone .capture{grid-template-columns:1fr}
  .cierre-zone .cap-head{padding:24px 22px}
  .cierre-zone .cap-head::after{padding-top:18px}
  .cierre-zone .cap-form{padding:22px}
  .cierre-zone .cap-q .opt{padding:10px 15px}
  .cierre-zone .cap-row{flex-direction:column}
  .cierre-zone .cap-btn{width:100%}
  .cierre-zone .foot{justify-content:flex-start}
}