@charset "UTF-8";
/* ==========================================================================
   CriticaBits — los comentarios
   --------------------------------------------------------------------------
   Los comentarios venían con el formulario por defecto de WordPress: cinco
   etiquetas grises, cuatro campos de navegador y un botón. En un sitio que
   habla de máquinas de ocho bits, el sitio donde la gente escribe tiene que
   parecer lo que es: una terminal.

   Todo el bloque se compone como una ventana de consola —barra de título,
   cursor parpadeante, prompt delante de cada campo— y cada comentario como
   un registro con su raíl de neón.

   ÍNDICE
     1. La ventana
     2. Barra de título
     3. Estado vacío
     4. La lista de comentarios
     5. Respuestas anidadas
     6. El formulario
     7. Movimiento reducido
   ========================================================================== */

/* ==========================================================================
   1. La ventana
   ========================================================================== */

.comments-wrapper {
	--cb-term: rgba(0, 212, 255, .85);
	--cb-term-dim: rgba(255, 255, 255, .45);
	--cb-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

	position: relative;
	margin-block-start: var(--cb-s9, 6rem);
	padding: 0;
	border: 1px solid rgba(122, 92, 255, .3);
	border-radius: 8px;
	overflow: hidden;
	background:
		radial-gradient(120% 80% at 0% 0%, rgba(122, 92, 255, .12), transparent 62%),
		linear-gradient(180deg, rgba(18, 16, 38, .78), rgba(9, 8, 20, .86));
	box-shadow: 0 26px 70px -34px rgba(0, 0, 0, .9);
}

/* Líneas de barrido muy leves sobre toda la ventana: se intuyen, no se
   miran. */
.comments-wrapper::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(
		180deg,
		rgba(255, 255, 255, .022) 0 1px,
		transparent 1px 4px
	);
}

.comments-area {
	margin: 0;
	padding: 1.6rem 1.5rem 1.75rem;
}

.comments-container {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   2. Barra de título
   ========================================================================== */

.comments-wrapper .comments-header {
	position: relative;
	display: flex;
	/* El tema compone .section-header en columna y centrado: los pilotos
	   de la ventana se iban a una línea propia. */
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	gap: .8rem;
	margin: 0;
	padding: .75rem 1.5rem;
	border: 0;
	border-bottom: 1px solid rgba(122, 92, 255, .26);
	background: rgba(0, 0, 0, .35);
}

/* Los tres pilotos de la ventana. */
.comments-wrapper .comments-header::before {
	content: "";
	flex: 0 0 auto;
	width: 42px;
	height: 10px;
	background:
		radial-gradient(circle 5px at 5px 5px, #ff5f57 96%, transparent),
		radial-gradient(circle 5px at 21px 5px, #ffbd2e 96%, transparent),
		radial-gradient(circle 5px at 37px 5px, #28c840 96%, transparent);
	opacity: .8;
}

.comments-wrapper .comments-title {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding: 0;
	border: 0;
	font-family: var(--cb-mono);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: none;
	color: rgba(255, 255, 255, .8);
	cursor: pointer;
}

/* El prompt, delante del rótulo. */
.comments-wrapper .comments-title::before {
	content: "visitantes@criticabits:~$";
	color: var(--cb-term);
}

/* Y el cursor, detrás. */
.comments-wrapper .comments-title::after {
	content: "";
	width: 8px;
	height: 1.05em;
	background: var(--cb-term);
	animation: cb-caret 1.05s steps(1) infinite;
}

@keyframes cb-caret {
	0%, 49%  { opacity: 1; }
	50%, 100% { opacity: 0; }
}

.comments-wrapper .comments-title span {
	color: rgba(255, 255, 255, .8);
}

.comments-wrapper .comments-title:hover span {
	color: #fff;
}

/* ==========================================================================
   3. Estado vacío
   ========================================================================== */

.comments-area:not(.has-comments) .comments-container::before {
	content: "> 0 registros. el hilo lo abres tú.";
	display: block;
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px dashed rgba(255, 255, 255, .1);
	font-family: var(--cb-mono);
	font-size: .82rem;
	letter-spacing: .01em;
	color: var(--cb-term-dim);
}

/* ==========================================================================
   4. La lista de comentarios
   ========================================================================== */

.comments-wrapper .comment-list {
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.comments-wrapper .comment-list li {
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.comments-wrapper .comment-body {
	position: relative;
	margin: 0 0 .9rem;
	padding: 1.1rem 1.2rem 1.1rem 1.35rem;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 6px;
	background: rgba(255, 255, 255, .025);
	transition:
		border-color var(--cb-base, 260ms) var(--cb-ease),
		background-color var(--cb-base, 260ms) var(--cb-ease),
		transform var(--cb-base, 260ms) var(--cb-ease-out);
}

/* El raíl: apagado en reposo, encendido al pasar por encima. */
.comments-wrapper .comment-body::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 2px;
	border-radius: 6px 0 0 6px;
	background: linear-gradient(180deg, var(--cb-neon-pink), var(--cb-neon-cyan));
	opacity: .35;
	transition: opacity var(--cb-base, 260ms) var(--cb-ease), box-shadow var(--cb-base, 260ms) var(--cb-ease);
}

.comments-wrapper .comment-body:hover {
	border-color: rgba(122, 92, 255, .38);
	background: rgba(255, 255, 255, .045);
	transform: translateX(2px);
}

.comments-wrapper .comment-body:hover::before {
	opacity: 1;
	box-shadow: 0 0 14px -1px var(--cb-neon-cyan);
}

/* --- Cabecera del registro ------------------------------------------------ */

.comments-wrapper .comment-author {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin-bottom: .55rem;
	font-style: normal;
}

.comments-wrapper .comment-author img.avatar {
	width: 34px;
	height: 34px;
	border-radius: 4px;
	border: 1px solid rgba(122, 92, 255, .45);
	box-shadow: 0 0 12px -4px var(--cb-neon-violet);
	/* Retratos pequeños y ampliados: mejor a cuadros que a papilla. */
	image-rendering: crisp-edges;
}

.comments-wrapper .comment-author .fn {
	font-family: var(--cb-mono);
	font-size: .86rem;
	font-weight: 700;
	font-style: normal;
	color: #fff;
}

/* El arroba delante del nombre: es una firma, no un titular. */
.comments-wrapper .comment-author .fn::before {
	content: "@";
	color: var(--cb-neon-cyan);
}

.comments-wrapper .comment-author .says {
	display: none;
}

/* 3,46:1 medido a 11,5 px sobre el fondo compuesto de la ventana. Es la
   fecha del comentario: dato, no decoración. Con .55, 6,1:1. */
.comments-wrapper .comment-metadata {
	margin: 0 0 .7rem;
	font-family: var(--cb-mono);
	font-size: .72rem;
	letter-spacing: .01em;
	color: rgba(255, 255, 255, .55);
}

.comments-wrapper .comment-metadata a {
	color: inherit;
	text-decoration: none;
	border: 0;
}

.comments-wrapper .comment-metadata a:hover {
	color: var(--cb-neon-cyan);
}

.comments-wrapper .comment-content {
	font-size: .94rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, .78);
	/* Un comentario es texto de terceros: una URL sin espacios de 78
	   caracteres —o un «jajajaja» de cuarenta— no puede ensanchar el
	   registro ni salirse de la ventana. */
	overflow-wrap: anywhere;
}

.comments-wrapper .comment-content p:last-child {
	margin-bottom: 0;
}

/* --- Responder ------------------------------------------------------------ */

.comments-wrapper .reply {
	margin-top: .8rem;
}

.comments-wrapper .comment-reply-link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .3rem .7rem;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 3px;
	font-family: var(--cb-mono);
	font-size: .72rem;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .58);
	text-decoration: none;
	transition:
		border-color var(--cb-fast) var(--cb-ease),
		color var(--cb-fast) var(--cb-ease),
		background-color var(--cb-fast) var(--cb-ease);
}

.comments-wrapper .comment-reply-link::before {
	content: "↳";
	color: var(--cb-neon-cyan);
}

.comments-wrapper .comment-reply-link:hover {
	border-color: var(--cb-neon-cyan);
	background: rgba(0, 212, 255, .1);
	color: #fff;
}

/* --- Marca de la casa ----------------------------------------------------- */

.comments-wrapper .bypostauthor > .comment-body {
	border-color: rgba(255, 0, 94, .35);
	background: rgba(255, 0, 94, .05);
}

.comments-wrapper .bypostauthor > .comment-body .comment-author .fn::after {
	content: "redacción";
	margin-left: .5rem;
	padding: .1rem .4rem;
	border: 1px solid rgba(255, 0, 94, .5);
	border-radius: 3px;
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cb-neon-rose);
}

/* ==========================================================================
   5. Respuestas anidadas
   ========================================================================== */

.comments-wrapper .children {
	position: relative;
	margin: 0 0 0 1.5rem;
	padding-left: 1.35rem;
	list-style: none;
}

/* La rama de la que cuelgan las respuestas. */
.comments-wrapper .children::before {
	content: "";
	position: absolute;
	top: -.4rem;
	bottom: 1.6rem;
	left: 0;
	width: 1px;
	background: rgba(122, 92, 255, .3);
}

.comments-wrapper .children > li > .comment-body::after {
	content: "";
	position: absolute;
	top: 1.7rem;
	left: -1.35rem;
	width: 1.35rem;
	height: 1px;
	background: rgba(122, 92, 255, .3);
}

/* ==========================================================================
   6. El formulario
   ========================================================================== */

.comments-wrapper .comment-respond {
	margin: 0;
	padding: 0;
	border: 0;
}

.comments-wrapper .comment-reply-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .6rem;
	margin: 0 0 1.1rem;
	padding: 0;
	border: 0;
	font-family: var(--cb-mono);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: none;
	color: rgba(255, 255, 255, .82);
}

.comments-wrapper .comment-reply-title::before {
	content: "$";
	color: var(--cb-neon-pink);
}

.comments-wrapper .comment-reply-title small a {
	font-family: var(--cb-mono);
	font-size: .72rem;
	color: var(--cb-term-dim);
}

/*
 * Contraste medido con la fórmula WCAG sobre los colores calculados y el
 * fondo compuesto real de la ventana, rgb(15,13,30): el .38 daba 3,46:1 a
 * 11,5 px. Texto pequeño: el mínimo es 4,5:1. Con .55 sube a 6,1:1. Y son
 * las instrucciones del formulario y la casilla de consentimiento, o sea
 * lo que hay que poder leer antes de escribir.
 */
.comments-wrapper .comment-notes,
.comments-wrapper .comment-form-cookies-consent label {
	font-family: var(--cb-mono);
	font-size: .72rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .55);
}

.comments-wrapper .comment-notes {
	margin: 0 0 1.35rem;
}

.comments-wrapper .required {
	color: var(--cb-neon-pink);
}

/* --- Campos --------------------------------------------------------------- */

.comments-wrapper .comment-form p {
	margin: 0 0 1rem;
}

.comments-wrapper .comment-form label {
	display: block;
	margin-bottom: .4rem;
	font-family: var(--cb-mono);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
}

/* El prompt delante de cada rótulo. */
.comments-wrapper .comment-form-comment label::before,
.comments-wrapper .comment-form-author label::before,
.comments-wrapper .comment-form-email label::before,
.comments-wrapper .comment-form-url label::before {
	content: "> ";
	color: var(--cb-term);
}

.comments-wrapper .comment-form input[type="text"],
.comments-wrapper .comment-form input[type="email"],
.comments-wrapper .comment-form input[type="url"],
.comments-wrapper .comment-form textarea {
	width: 100%;
	padding: .8rem .95rem;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 5px;
	background: rgba(0, 0, 0, .4);
	color: #fff;
	font-family: var(--cb-mono);
	font-size: .88rem;
	line-height: 1.6;
	transition: border-color var(--cb-fast) var(--cb-ease), box-shadow var(--cb-fast) var(--cb-ease), background-color var(--cb-fast) var(--cb-ease);
}

.comments-wrapper .comment-form textarea {
	min-height: 150px;
	resize: vertical;
}

.comments-wrapper .comment-form input:focus,
.comments-wrapper .comment-form textarea:focus {
	outline: none;
	border-color: var(--cb-neon-cyan);
	background: rgba(0, 0, 0, .55);
	box-shadow: 0 0 0 3px rgba(0, 212, 255, .16);
}

.comments-wrapper .comment-form ::placeholder {
	color: rgba(255, 255, 255, .3);
}

/* --- Los tres campos cortos, en fila --------------------------------------- */

@media (min-width: 720px) {

	.comments-wrapper .comment-form {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0 1rem;
	}

	.comments-wrapper .comment-form > p,
	.comments-wrapper .comment-form > .comment-notes,
	.comments-wrapper .comment-form > .form-submit {
		grid-column: 1 / -1;
	}

	.comments-wrapper .comment-form > .comment-form-author,
	.comments-wrapper .comment-form > .comment-form-email,
	.comments-wrapper .comment-form > .comment-form-url {
		grid-column: auto;
	}
}

/* --- La casilla ------------------------------------------------------------ */

.comments-wrapper .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
}

.comments-wrapper .comment-form-cookies-consent input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: .15rem;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 3px;
	background: rgba(0, 0, 0, .4);
	cursor: pointer;
	transition: border-color var(--cb-fast) var(--cb-ease), background-color var(--cb-fast) var(--cb-ease);
}

.comments-wrapper .comment-form-cookies-consent input[type="checkbox"]:checked {
	border-color: var(--cb-neon-cyan);
	background:
		linear-gradient(135deg, var(--cb-neon-cyan), var(--cb-neon-violet));
}

.comments-wrapper .comment-form-cookies-consent label {
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
}

/* --- Enviar ---------------------------------------------------------------- */

.comments-wrapper .form-submit {
	margin-bottom: 0;
}

.comments-wrapper .comment-form input[type="submit"] {
	position: relative;
	width: auto;
	min-width: 220px;
	height: auto;
	padding: .95rem 1.6rem;
	border: 1px solid var(--cb-neon-cyan);
	border-radius: 5px;
	background: rgba(0, 212, 255, .1);
	color: #fff;
	font-family: var(--cb-mono);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	cursor: pointer;
	overflow: hidden;
	transition:
		background-color var(--cb-fast) var(--cb-ease),
		box-shadow var(--cb-base, 260ms) var(--cb-ease),
		transform var(--cb-fast) var(--cb-ease-out);
}

.comments-wrapper .comment-form input[type="submit"]:hover {
	background: rgba(0, 212, 255, .2);
	box-shadow: 0 0 26px -6px var(--cb-neon-cyan);
	transform: translateY(-1px);
}

.comments-wrapper .comment-form input[type="submit"]:active {
	transform: translateY(0);
}

/* El aviso de Akismet llegaba con la tipografía del cuerpo y a tamaño de
   párrafo: rompía la ventana justo al cerrarla. */
/* El peor contraste de todo el bloque: 2,54:1 medido a 10,9 px. Con .5
   queda en 5,2:1, y sigue siendo el texto más apagado de la ventana. */
.comments-wrapper .akismet_comment_form_privacy_notice,
.comments-wrapper #comments .akismet_comment_form_privacy_notice p,
.comments-wrapper .comment-form + p,
.comments-wrapper .comment-respond > p:last-child {
	margin: 1.25rem 0 0;
	font-family: var(--cb-mono);
	font-size: .68rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .5);
}

.comments-wrapper .akismet_comment_form_privacy_notice a,
.comments-wrapper .comment-respond > p:last-child a {
	color: rgba(255, 255, 255, .5);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.comments-wrapper .akismet_comment_form_privacy_notice a:hover,
.comments-wrapper .comment-respond > p:last-child a:hover {
	color: var(--cb-neon-cyan);
}

/* ==========================================================================
   7. Movimiento reducido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.comments-wrapper .comments-title::after {
		animation: none;
		opacity: 1;
	}

	.comments-wrapper .comment-body,
	.comments-wrapper .comment-form input[type="submit"] {
		transition: none;
	}
}

@media (max-width: 599px) {

	.comments-wrapper .comments-header {
		padding: .7rem 1.1rem;
	}

	.comments-wrapper .comments-title::before {
		content: "criticabits:~$";
	}

	.comments-area {
		padding: 1.3rem 1.1rem 1.4rem;
	}

	.comments-wrapper .comment-form input[type="submit"] {
		width: 100%;
	}
}

/* ==========================================================================
   8. Móvil
   --------------------------------------------------------------------------
   Medido a 360 y 390 px. Cuatro defectos, todos de la ventana:

   1. LA BARRA DE TÍTULO SE PARTÍA A MEDIA PALABRA. La cabecera es
      `flex-wrap: nowrap` y a 360 px sólo quedan 263 px libres tras los
      30 px de `.wrap`, el borde y el relleno de 1,1 rem. Ahí no caben los
      42 px de los tres pilotos + el prompt + «Deja tu comentario» + el
      cursor: el prompt salía cortado como «criticabit / s:~$» y el rótulo
      en dos renglones. Rótulo medido: 208×30 px en una barra de 53.

   2. NOMBRE Y CORREO, UNO AL LADO DEL OTRO A 360 px. La rejilla de tres
      columnas de esta hoja empieza en 720 px, pero por debajo manda el
      `.comment-form { display:flex; flex-wrap:wrap }` del tema con
      `flex: 1 1 40%` en esos dos campos: dos cajas de 123 px, y como
      «Correo electrónico» ocupa dos líneas de rótulo, su campo caía
      34 px más abajo que el de al lado.

   3. CAMPOS A 14 px. Por debajo de 16 px, Safari en iPhone amplía la
      página al enfocar un campo y ya no la devuelve: el formulario se
      queda descuadrado a mitad de escribir.

   4. LA CASILLA, 16×16 px. Es el objetivo de toque más pequeño de la
      página.
   ========================================================================== */

@media (max-width: 767px) {

	/* --- La barra de título, en una línea --------------------------------- */
	.comments-wrapper .comments-header {
		flex-wrap: wrap;
		gap: .5rem .6rem;
	}

	.comments-wrapper .comments-title {
		font-size: .7rem;
		min-width: 0;
	}

	/* El prompt no se parte nunca: o cabe entero o baja de renglón. */
	.comments-wrapper .comments-title::before {
		white-space: nowrap;
	}

	/* --- Los campos, uno debajo de otro ------------------------------------
	   Se neutraliza el `flex: 1 1 40%` del tema. El hueco entre campos lo
	   pone ya el margen de los <p>, así que el `gap` de la fila sobra:
	   sumaba 32 px entre campos donde debería haber 16.
	   ---------------------------------------------------------------------- */
	.comments-wrapper .comment-form {
		gap: 0;
	}

	.comments-wrapper .comment-form > p,
	.comments-wrapper .comment-form > .comment-form-author,
	.comments-wrapper .comment-form > .comment-form-email,
	.comments-wrapper .comment-form > .comment-form-url {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* El área de texto ocupaba 192 px de los 800 de pantalla útil sin que
	   haya nada escrito todavía. */
	.comments-wrapper .comment-form textarea {
		min-height: 8.5rem;
	}

	/* --- Respuestas anidadas ------------------------------------------------
	   1,5 rem de margen + 1,35 rem de relleno son 46 px por nivel. En una
	   columna de 300 px, una respuesta a una respuesta se queda en 208 px
	   de ancho útil. Aquí un nivel cuesta 18 px.
	   ---------------------------------------------------------------------- */
	.comments-wrapper .children {
		margin-left: .5rem;
		padding-left: .65rem;
	}

	.comments-wrapper .children > li > .comment-body::after {
		left: -.65rem;
		width: .65rem;
	}

	.comments-wrapper .comment-body {
		padding: .95rem 1rem .95rem 1.1rem;
	}

	/* --- El texto del comentario, a su sitio -------------------------------
	   El tema le mete `padding-left: 40px` para dejar hueco al retrato,
	   pero el retrato ya va en su propia fila. Medido a 360 px: el
	   párrafo del comentario quedaba en 187 px de ancho —unos 22
	   caracteres por línea— y en el tercer nivel de respuesta, en 150:
	   cuatro palabras por renglón.
	   ---------------------------------------------------------------------- */
	.comments-wrapper .comment-content {
		padding-left: 0;
	}

	/* El botón de responder colgaba del mismo sangrado de 40 px que el
	   texto y se quedaba descolgado a la derecha de su propio registro. */
	.comments-wrapper .reply {
		padding-left: 0;
	}

	/* El nombre y la chapa de «redacción» no caben en la misma línea a
	   360 px. El retrato se queda donde está —es la fila del autor, no
	   una fila propia— y lo que se parte es el nombre. */
	.comments-wrapper .comment-author {
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: .6rem;
	}

	.comments-wrapper .comment-author .fn {
		min-width: 0;
		overflow-wrap: anywhere;
	}

	/* --- Responder: 26 px de alto medidos ---------------------------------- */
	.comments-wrapper .comment-reply-link {
		min-height: 44px;
		padding: .55rem .9rem;
	}

	/* --- El aire de arriba --------------------------------------------------
	   Medido a 390 px: entre el final de las entradas anterior/siguiente y
	   el borde de la ventana de comentarios quedaban 10 px. El
	   `margin-block-start` de esta hoja no llegaba a aplicarse —lo pisa una
	   regla del tema con más peso—, así que se sube la especificidad con
	   el contenedor. Un cambio de sección pide más que un filete de 10 px.
	   ---------------------------------------------------------------------- */
	.single .after-content .comments-wrapper,
	.page .after-content .comments-wrapper {
		margin-block-start: 2.25rem;
	}
}

@media (max-width: 480px) {

	/* Ni con el rótulo a .7 rem cabe el prompt largo: se recorta a la
	   forma mínima que sigue leyéndose como consola. */
	.comments-wrapper .comments-title::before {
		content: "cb:~$";
	}
}

/* --------------------------------------------------------------------------
   Los campos, hasta la tableta
   --------------------------------------------------------------------------
   Hasta 1023 px y no hasta 767: un iPad en vertical mide 768 y se escribe
   con el dedo igual que un teléfono, así que el cuerpo de los campos y el
   tamaño de la casilla tienen que valer también ahí. Medido a 768 px antes
   de esto: campos a 14,08 px y casilla de 16×16.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {

	/* 16 px es el mínimo que evita que Safari en iOS amplíe la página al
	   enfocar un campo —y no la devuelve al salir—. */
	.comments-wrapper .comment-form input[type="text"],
	.comments-wrapper .comment-form input[type="email"],
	.comments-wrapper .comment-form input[type="url"],
	.comments-wrapper .comment-form textarea {
		font-size: 1rem;
	}

	/* La casilla sube a 24 px, que es lo que cabe sin descolocar la línea
	   del rótulo. Los 44 px de objetivo los da la etiqueta: WordPress emite
	   `<label for="wp-comment-cookies-consent">`, así que el bloque de
	   texto entero —41,6 px de alto y 627 de ancho a 768— marca la
	   casilla. */
	.comments-wrapper .comment-form-cookies-consent {
		gap: .7rem;
	}

	.comments-wrapper .comment-form-cookies-consent input[type="checkbox"] {
		width: 24px;
		height: 24px;
		margin-top: 0;
	}

	.comments-wrapper .comment-form-cookies-consent label {
		cursor: pointer;
	}
}