/* ══════════════════════════════════════════════════════════
   Captación de la newsletter diaria  ·  .ccnl-*

   Dos variantes del mismo formulario:
     .ccnl--pie   ancho, encima del footer
     .ccnl--side  estrecho, en la columna del blog (220 px)

   TODO SALE DE LOS TOKENS DEL TEMA. El banner original traía su propia
   paleta y sus propias fuentes; aquí usa --accent, --surface, --text,
   --font-mono… que el tema ya define para claro y para oscuro. Así los
   dos temas salen gratis y no hay una segunda paleta que mantener al
   día cuando cambie la del sitio.
   ══════════════════════════════════════════════════════════ */

.ccnl {
	box-sizing: border-box;
	background: var(--surface);
	color: var(--text);
	border-top: 2px solid var(--accent);
	border-bottom: 1px solid var(--border);
	font-family: var(--font-body);
}
.ccnl *, .ccnl *::before, .ccnl *::after { box-sizing: border-box; }
.ccnl [hidden] { display: none !important; }

/* El honeypot. Fuera de pantalla y no `display:none`: hay bots que
 * saltan los campos ocultos, y así lo rellenan igual. */
.ccnl__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ── Piezas comunes ───────────────────────────────────── */

.ccnl__kicker {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent);
	font-weight: 500;
	margin: 0;
}
/* El mismo `// ` que llevan las etiquetas del blog. */
.ccnl__kicker::before { content: '// '; }

.ccnl__titulo {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -.01em;
	color: var(--text);
	margin: 8px 0 0;
	text-wrap: balance;
}

.ccnl__p {
	color: var(--text-muted);
	line-height: 1.6;
	margin: 9px 0 0;
	text-wrap: pretty;
}

.ccnl__form { display: flex; flex-direction: column; gap: 10px; }
.ccnl__fila { display: flex; flex-wrap: wrap; gap: 8px; }

.ccnl__input {
	min-width: 0;
	background: var(--bg);
	border: 1px solid var(--border-strong);
	border-radius: 0;
	color: var(--text);
	font-family: var(--font-body);
	/* 16 px y no 15: por debajo de 16 el iPhone amplía la página al
	   tocar el campo. */
	font-size: 16px;
	padding: 14px 15px;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}
.ccnl__input::placeholder { color: var(--text-dim); }
.ccnl__input:focus         { border-color: var(--accent); }
.ccnl__input[aria-invalid="true"] { border-color: var(--accent); }

.ccnl__btn {
	background: var(--accent-solid);
	color: #fff;
	border: 1px solid var(--accent);
	border-radius: 0;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 14px 20px;
	cursor: pointer;
	line-height: 1.3;
}
.ccnl__btn:hover:not([disabled]) { background: var(--accent-dark); border-color: var(--accent-dark); }
.ccnl__btn[disabled] { opacity: .55; cursor: default; }

.ccnl__checks { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.ccnl__check {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-muted);
	cursor: pointer;
}
.ccnl__check input {
	flex: none;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: var(--accent);
	cursor: pointer;
}
.ccnl__check a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.ccnl__check a:hover { color: var(--text); }
.ccnl__check.is-error { color: var(--accent); }

.ccnl__nota {
	min-height: 17px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .04em;
	line-height: 1.5;
	color: var(--text-dim);
	margin: 0;
}
.ccnl__nota.is-error { color: var(--accent); }

/* ── Confirmación ─────────────────────────────────────── */

.ccnl__ok {
	border: 1px solid var(--accent);
	background: var(--bg2);
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ccnl__ok:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.ccnl__ok-et {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0;
}
.ccnl__ok-p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text); }

/* ══════════════════════════════════════════════════════════
   Variante ancha · encima del footer
   ══════════════════════════════════════════════════════════ */

.ccnl--pie .ccnl__in {
	max-width: 1320px;
	margin: 0 auto;
	padding: 34px 30px;
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: 34px;
	align-items: center;
}

.ccnl--pie .ccnl__pitch { display: flex; align-items: center; gap: 22px; min-width: 0; }

.ccnl--pie .ccnl__glifo {
	flex: none;
	width: 78px;
	height: 78px;
	display: grid;
	place-items: center;
	border: 1px solid var(--border-strong);
	background: var(--bg);
	font-family: var(--font-korean);
	font-size: 34px;
	line-height: 1;
	color: var(--accent);
}

.ccnl--pie .ccnl__titulo { font-size: 32px; }
.ccnl--pie .ccnl__p      { font-size: 14px; max-width: 52ch; }

.ccnl--pie .ccnl__input--nombre { flex: 1 1 150px; }
.ccnl--pie .ccnl__input--mail   { flex: 1 1 190px; }
.ccnl--pie .ccnl__btn           { flex: 1 1 100%; }

/* El aviso de éxito ocupa la columna del formulario, no la fila
 * entera: si no, al enviarlo la página pega un salto. */
.ccnl--pie .ccnl__ok { grid-column: 2; }

@media (max-width: 1100px) {
	.ccnl--pie .ccnl__in { grid-template-columns: 1fr; gap: 26px; }
	.ccnl--pie .ccnl__ok { grid-column: 1; }
}
@media (max-width: 640px) {
	.ccnl--pie .ccnl__in    { padding: 28px 20px; }
	.ccnl--pie .ccnl__pitch { gap: 16px; align-items: flex-start; }
	.ccnl--pie .ccnl__glifo { width: 54px; height: 54px; font-size: 24px; }
	.ccnl--pie .ccnl__titulo { font-size: 25px; }
	.ccnl--pie .ccnl__input,
	.ccnl--pie .ccnl__btn   { flex: 1 1 100%; }
}

/* ══════════════════════════════════════════════════════════
   Variante estrecha · columna del blog

   La columna mide 220 px. Ahí no cabe nada en fila, así que todo va
   apilado, el glifo desaparece y el texto se acorta desde PHP —no con
   ellipsis, que deja frases a medias.

   Hereda de .pe-side-card para que no desentone con las tarjetas de
   autor y estadísticas que tiene al lado.
   ══════════════════════════════════════════════════════════ */

.ccnl--side {
	border: 1px solid var(--border-strong);
	border-top: 2px solid var(--accent);
	border-bottom: 1px solid var(--border-strong);
	background: var(--surface);
}
.ccnl--side .ccnl__in { padding: 18px 16px; display: flex; flex-direction: column; gap: 16px; }

.ccnl--side .ccnl__titulo { font-size: 21px; margin-top: 6px; }
.ccnl--side .ccnl__p      { font-size: 13px; margin-top: 7px; }

.ccnl--side .ccnl__fila   { flex-direction: column; gap: 6px; }
.ccnl--side .ccnl__input  { font-size: 14px; padding: 11px 12px; }
/* En pantalla táctil la columna también acaba en móvil: ahí vuelve a
   16 px para que el iPhone no amplíe la página al tocar el campo. */
@media (hover: none) { .ccnl--side .ccnl__input { font-size: 16px; } }
.ccnl--side .ccnl__btn    { padding: 12px 14px; font-size: 11px; }

.ccnl--side .ccnl__check  { font-size: 12px; gap: 8px; }
.ccnl--side .ccnl__check input { width: 15px; height: 15px; }
.ccnl--side .ccnl__nota   { font-size: 10px; }
.ccnl--side .ccnl__ok     { padding: 14px 15px; }
.ccnl--side .ccnl__ok-p   { font-size: 13px; }

/* Quien pide menos movimiento tampoco quiere el parpadeo del botón. */
@media (prefers-reduced-motion: reduce) {
	.ccnl__btn { transition: none; }
}