/*
 * Páginas: Nosotros, Tostadero, Contacto, Lista de deseos, legales, 404, y entrada y archivos del blog. Cotas medidas
 * sobre la web actual: Plan 2, Tareas 10-13.
 * Muchas cotas suman a los márgenes del JSON el relleno de 10 px que Elementor da por defecto a cada contenedor
 * (--container-default-padding-*, frontend.min.css): por eso aquí hay 40, 60 o 70 donde el JSON dice 30, 40 o 60.
 */

/* Nosotros (página 124). */
.nosotros__intro { padding-block: 40px 70px; } /* 30 y 60 de margen del contenedor 8f9aa60, más sus 10 de relleno */
.nosotros__intro p { margin: 0 0 26px; color: #000; font: 300 16px/26px var(--letra); }
.nosotros__intro p:last-child { margin-bottom: 0; }
/* 0,9 rem (14,4 px) bajo cada párrafo, también bajo el último: el <p> de Hello Elementor. El texto es el último
   widget de cada caja, así que detrás no hay hueco de 20 entre widgets. */
.nosotros__hitos .bloque-5050__dentro p:not(.bloque-5050__subtitulo),
.nosotros__hoy p:not(.bloque-5050__subtitulo) {
	margin: 0 0 .9rem;
	color: #252525;
	font: 300 16px/25px var(--letra);
	letter-spacing: -.2px;
}
/* Las fotos de los hitos, a tamaño natural como el fondo de hoy (background-size: auto): Olula arriba a la izquierda
   (su fondo no tiene background-position) y Macael centrada (center center). Mismo método que el tambor de la
   portada (.bloque-5050__natural, componentes.css): la caja mide lo que el original y sizes lo elige en el srcset.
   Cuando su mitad es más ancha que el original (desde ≈1910 px de ventana en Olula y ≈2400 en Macael), min-width
   y min-height del 100 % las amplían lo justo para cubrirla: sin ellos, a 2560 px se veían 326 y 42,5 px del fondo
   de la página, y hoy, sin background-repeat, el fondo se repite en mosaico (fase A, D1). Por debajo no cambia nada.
   Si la mitad es más alta que la foto, la caja pierde la proporción y object-fit: cover recorta: en Olula, desde la
   esquina de arriba a la izquierda (object-position), como el fondo. */
.bloque-5050__foto > .nosotros__olula { top: 0; left: 0; width: 949px; min-width: 100%; min-height: 100%; transform: none; object-position: left top; }
.bloque-5050__foto > .nosotros__macael { width: 1200px; min-width: 100%; min-height: 100%; }
@media (min-width: 768px) {
	/* Reparto de hoy: 715 y 725 px a 1440, no 720 y 720. En los dos hitos, la columna de la izquierda no tiene relleno
	   y la de la derecha lleva los 10 de Elementor; las dos piden el 100 % y flex-shrink las encoge en proporción a su
	   caja de contenido. La de la derecha sale 10 px más ancha en cualquier anchura (a 1024, 507 y 517). */
	.nosotros__hitos .bloque-5050 { grid-template-columns: calc(50% - 5px) 1fr; }
	/* Los 10 px de relleno de la columna crema de 1982: con ellos, la caja del 90 % se mide sobre 705 px y el texto
	   empieza en x=770 y corta las líneas como hoy. */
	.nosotros__hitos .bloque-5050--crema-suave .bloque-5050__texto { padding: 10px; }
}
/* 2025: la caja de 1140 del contenedor 1fdcfac (10 de relleno) y, dentro, la de 33a62d4 (40 de margen y 10 de
   relleno): el texto va en x=160. Abajo, además, los 60 px de margen del boletín en esta página (en la portada, 0). */
.nosotros__hoy { padding: 60px 20px 120px; }
.nosotros__hoy .bloque-5050__titulo,
.nosotros__hoy .bloque-5050__subtitulo { margin-bottom: 20px; }

/* Nuestro tostadero (página 1520). */
.tostadero__portada {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 400px;
	padding: 60px; /* también en móvil: la frase va en 270 px y la portada mide 660, como hoy (fase B, anexo §8.3) */
}
.tostadero__portada > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tostadero__portada::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .68); }
/* Interlineado 1, el de todo encabezado de Elementor (.elementor-heading-title): hoy la frase es un h2. */
.tostadero__frase { position: relative; z-index: 1; max-width: 1020px; margin: 0; color: #fff; font: 300 36px/1 var(--letra); text-align: center; }
.tostadero__proceso { padding-block: 70px 0; } /* 60 de margen del contenedor 1c43812, más sus 10 de relleno */
.tostadero__titulo {
	margin: 0 0 60px; /* los 10 de relleno de su contenedor, sus 40 de margen y los 10 del acordeón */
	color: var(--cuerpo);
	font: 600 30px/20px var(--letra);
	text-align: center;
	text-transform: uppercase;
}
.acordeon__etapa { background: #fdf2f4; } /* #EA5F7F0F sobre blanco */
.acordeon__titulo {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 40px;
	padding: 10px;
	color: #1f2124; /* el del widget de Elementor (--n-accordion-title-normal-color), que el JSON no cambia */
	cursor: pointer;
	list-style: none;
}
.acordeon__titulo::-webkit-details-marker { display: none; }
.acordeon__titulo:hover { background: var(--rosa-claro); }
.acordeon__titulo h3 { margin: 0; font: 600 16px/20px var(--letra); text-transform: uppercase; }
.acordeon__titulo .icono { width: 15px; height: 15px; } /* --n-accordion-icon-size */
.acordeon__etapa[open] > .acordeon__titulo { background: var(--rosa); color: var(--burdeos); } /* D10: 4,55:1 */
.acordeon__etapa[open] .acordeon__icono--cerrada,
.acordeon__etapa:not([open]) .acordeon__icono--abierta { display: none; }
/* 20 px de relleno: los 10 del contenedor de la etapa y los 10 de cada mitad. Con el borde, la foto y el texto
   quedan a 21 px del filo, como hoy. El borde gris es el del acordeón de Elementor (--n-accordion-border-color), y
   el fondo, el de la página: el panel de Elementor no tiene fondo propio. */
.acordeon__panel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: start;
	padding: 20px;
	border: 1px solid #d5d8dc;
	background: var(--fondo);
}
.acordeon__texto,
.acordeon__texto li { font: 300 16px/24px var(--letra); }
/* Hello Elementor: 0,9 rem bajo cada párrafo y listas sin margen. Hoy cada punto de las listas es un <p>, y el hueco
   entre puntos es ese mismo 0,9 rem. En móvil, el texto queda a 34 px de la foto, como hoy. */
.acordeon__texto p,
.acordeon__texto li { margin: 0 0 .9rem; }
.acordeon__texto ul { margin: 0; }
.acordeon__panel img { justify-self: center; width: 400px; }
/* «Café Tostado Con Alma»: la caja de 1140 del contenedor 52dd710 (sin relleno), partida en dos mitades de 570 con
   10 px de relleno cada una: texto en x=160 y foto de 550×367 en x=730, también en móvil (10 px por lado). Arriba,
   los 10 de relleno del acordeón y 40 de margen; abajo, los 60 de margen del boletín en esta página. */
.tostadero__alma { display: grid; grid-template-columns: 1fr 1fr; align-items: start; max-width: 1140px; padding: 50px 0 60px; }
.tostadero__alma-texto,
.tostadero__foto { padding: 10px; }
/* En columna flex, como el contenedor cad75c5: los márgenes no se colapsan y el logo queda a 16 + 15 px del texto,
   como hoy (en un bloque normal serían 16). */
.tostadero__alma-texto { display: flex; flex-direction: column; }
.tostadero__alma h2 { margin: 0 0 20px; color: var(--cuerpo); font: 500 32px/1 var(--letra); }
.tostadero__alma p { margin: 0 0 16px; color: #000; font: 300 16px/30px var(--letra); }
.tostadero__logo { width: 25%; margin: 15px 0 0 auto; }
.tostadero__foto { width: 100%; }

/* Hasta 1024 px el título de las etapas parte en dos líneas (de 768 a 900 lo hace), y con los 20 px de interlineado
   de escritorio se montaban (anexo:912): con 35, no. A 1440 va en una línea y no cambia. */
@media (max-width: 1024px) {
	.tostadero__titulo { line-height: 35px; }
}
@media (max-width: 767px) {
	.nosotros__hoy { text-align: center; }
	.acordeon__panel,
	.tostadero__alma { grid-template-columns: 1fr; }
}

/* Contacto (página 74). */
/* El contenedor f7825d7: 20 px de relleno por los cuatro lados y el párrafo 18 px más abajo. El texto va en 1140 px
   (1180 con el relleno) y en móvil en 350, como hoy. */
.contacto__intro { max-width: 1180px; min-height: 225px; padding: 38px 20px 20px; }
.contacto__intro p { margin: 0; color: #000; font: 300 18px/26px var(--letra); text-align: center; }
/* La sección amarilla (07466e2) con sus 10 px de relleno. Abajo, 60: los 10 de relleno y los 40 de margen del
   contenedor del formulario (2de888c), y los 10 de la sección. */
.contacto { display: flex; flex-direction: column; align-items: center; padding: 10px 10px 60px; background: var(--amarillo); }
/* Hoy el título es una línea de 20 px que empieza 60 px bajo el borde (márgenes y rellenos de a042cc0 y del
   encabezado) y deja 40 hasta el texto. Con 40 px de interlineado, los 20 de más salen de esos márgenes, 10 arriba y
   10 abajo: en una línea el texto queda donde hoy, y en dos (móvil) ya no se monta. A los lados, 20: el relleno de
   a042cc0 y el margen del encabezado. En móvil parte en «¿NOS DICES LO / QUE NECESITAS?», como hoy. */
.contacto__titulo {
	margin: 40px 20px 30px;
	color: var(--burdeos); /* D10: el blanco daba 1,69:1 */
	font: 800 36px/40px var(--letra); /* hoy, 20 px: en móvil las dos líneas se montaban */
	text-align: center;
	text-transform: uppercase;
}
/* El 50 % es de la sección, que va a todo el ancho, menos los 10 px de relleno de su contenedor (eff8c5e): 700 px a
   1440. Abajo, 40: ese relleno, los 20 entre contenedores y los 10 de relleno del formulario. */
.contacto__texto {
	width: calc(50% - 10px);
	margin: 0 0 40px;
	color: var(--burdeos); /* D10 */
	font: 300 18px/1.3 var(--letra);
	letter-spacing: .01em;
	text-align: center;
}
/* El contenedor 2de888c: el 50 % de la sección menos sus 10 px de relleno por lado, 690 px a 1440. Los campos llevan
   la letra y el color del widget (15 px, 300, −0,2 y #444) y miden 41 px de alto, como hoy. */
.contacto__formulario { display: grid; gap: 10px; width: calc(50% - 20px); }
.contacto__formulario input[type="text"],
.contacto__formulario input[type="email"] { color: #444; font-size: 15px; font-weight: 300; letter-spacing: -.2px; }
/* La casilla y su texto van en línea, como hoy: las líneas siguientes empiezan bajo la casilla. La etiqueta conserva
   la letra de la página (16 px, con renglones de 26,4) y el texto va dentro en 15 px, centrado en el renglón como el
   label de Hello Elementor: así corta las líneas y las pone donde hoy (0,5 px más abajo). El interlineado 1 solo
   evita que su caja agrande el renglón. #2E2E2E es el color de las etiquetas del widget. */
.contacto__casilla { color: var(--enfasis); }
.contacto__casilla span { font-size: 15px; font-weight: 300; line-height: 1; letter-spacing: -.2px; vertical-align: middle; }
.contacto__casilla input { margin: 0; accent-color: var(--burdeos); }
.contacto__casilla a { color: var(--burdeos); text-decoration: underline; } /* el rosa sobre amarillo daba 1,93:1 */
.contacto__formulario button {
	min-height: 40px;
	border: 0;
	border-radius: 3px;
	background: #69727d; /* el gris de Elementor de hoy (4,88:1): cambiarlo es B */
	color: #fff;
	font: 400 15px/1 var(--letra); /* la letra del botón de Elementor */
	cursor: pointer;
}
/* Con el ratón encima y con el foco, el #CC3366 de Hello Elementor ([type=submit]:hover y :focus de reset.css), como
   hoy: el widget no fija color de hover. Está fuera de la paleta, como el gris, y pasarlo al rosa es B (anexo §8.3,
   §8.6 y pregunta 40). El blanco sobre él da 4,96:1 (D10). Sin transición, como los demás hovers del tema. */
.contacto__formulario button:hover,
.contacto__formulario button:focus { background: #c36; }
/* La línea de privacidad y el aviso (componentes.css) en el contacto: la privacidad en burdeos, como el resto de la
   sección amarilla, y a 15 px, la letra de la casilla. El aviso va bajo el formulario, con su mismo ancho. */
.contacto .formulario__privacidad { color: var(--burdeos); font-size: 15px; }
.contacto .formulario__aviso { width: calc(50% - 20px); }
@media (max-width: 767px) {
	/* En móvil Elementor pone al 100 % los contenedores: texto y formulario, a todo el ancho menos 10 px por lado. */
	.contacto__texto,
	.contacto__formulario,
	.contacto .formulario__aviso { width: calc(100% - 20px); }
}

/* Mi lista de deseos (página 3194). */
/* Hoy el texto es el h5 de JetCompareWishlist con el reset de Hello Elementor (20 px, peso 500, interlineado 1,2 y
   8 px de margen arriba), en un contenedor con los 10 px de relleno de Elementor. */
.lista-deseos { padding-block: 18px 40px; }
.lista-deseos__vacia { margin: 0; color: var(--cuerpo); font: 500 20px/1.2 var(--letra); }

/* Página genérica (page.php): legales, Maestros y Valores y compromiso. Caja de 1140 px; texto 16/300 justificado
   (el justificado es de hoy: cambiarlo es B). Dos estilos de título, como hoy: el h1 de hello-elementor (40/500) y,
   donde el título venía dentro del contenido, 30/600 en mayúsculas.
   El ritmo vertical es el de los widgets de Elementor: un contenedor con 10 px de relleno y 20 px de hueco entre
   widgets, que no se colapsa con los márgenes de dentro. Cada encabezado es un widget y el texto que lo sigue, otro;
   por eso el hueco de 20 va en el padding-top del encabezado, que se suma al 0,9 rem del último párrafo (o al 0 de
   una lista) en vez de colapsarse con él. Las páginas de compra ya no pasan por aquí (partes/pagina-compra.php y
   compra.css, Plan 4): el :not(.pagina--tienda) de las reglas de abajo no excluye nada, pero se deja, porque quitarlo
   bajaría su especificidad y podría mover la cascada de las legales, que ninguna prueba mira entera. */
.pagina__titulo { margin: 8px 0 16px; color: var(--cuerpo); font: 500 40px/1.2 var(--letra); }
/* Hoy, un encabezado de 30 px con interlineado de 20, que se monta al partir en móvil (anexo §8.3): con 1,2 no se
   monta. Arriba, los 10 px de relleno del contenedor y los 20 de margen de su widget; abajo, sus 10 de margen y los
   20 de hueco, menos los 10 de relleno que ya pone .pagina__contenido. A cada lado, 8 px menos, los que crece la
   línea: así, en una línea, queda donde hoy. */
.pagina__titulo--contenido { margin: 22px 0 12px; font: 600 30px/1.2 var(--letra); text-transform: uppercase; }
.pagina:not(.pagina--tienda) .pagina__contenido {
	padding-block: 10px; /* el relleno del contenedor de Elementor */
	color: #000; /* el texto de las legales va hoy en <span style="color: #000000">; los encabezados, en el #333 del cuerpo */
	font: 300 16px/1.2 var(--letra);
	letter-spacing: -.2px;
	text-align: justify;
}
.pagina__contenido:empty { display: none; } /* Maestros y Valores: hoy no tienen contenedor y el pie va 16 px bajo el h1 */
.pagina:not(.pagina--tienda) .pagina__contenido p { margin: 0 0 14.4px; }
/* Secciones: el widget de encabezado de hoy, 20/600 en mayúsculas con interlineado de 20 px y sin márgenes. */
.pagina:not(.pagina--tienda) .pagina__contenido h2,
.pagina:not(.pagina--tienda) .pagina__contenido h3 {
	margin: 0 0 20px;
	padding-top: 20px;
	color: var(--cuerpo);
	font: 600 20px/20px var(--letra);
	text-align: left;
	text-transform: uppercase;
}
.pagina:not(.pagina--tienda) .pagina__contenido > h2:first-child,
.pagina:not(.pagina--tienda) .pagina__contenido > h3:first-child { padding-top: 0; }
/* Aviso legal (página 1006): hoy sus secciones son encabezados de 30 px, como su título, con 20 px de margen arriba
   y 10 abajo (10 y 10 en «Definiciones»). Se conservan, como los dos estilos de título: unificarlos es B (anexo
   §8.3). Interlineado 1,2 por lo mismo que el título, con 8 px menos a cada lado. */
.page-id-1006 .pagina .pagina__contenido > h2,
.page-id-1006 .pagina .pagina__contenido > h3 { margin-bottom: 22px; padding-top: 32px; font-size: 30px; line-height: 1.2; }
.page-id-1006 .pagina .pagina__contenido > h3:first-child { padding-top: 2px; }
/* Hello Elementor deja las listas sin margen: tras una lista no hay hueco. */
.pagina:not(.pagina--tienda) .pagina__contenido ul,
.pagina:not(.pagina--tienda) .pagina__contenido ol { margin: 0; padding-left: 40px; }
/* Los 4 enlaces de navegadores de la política de cookies: 25 px de objetivo (WCAG 2.5.8) y en negro, como hoy. El JSON
   de 1087 les pone dentro un <span style="color: #000000"> que el post_content no guarda. */
.pagina:not(.pagina--tienda) .pagina__contenido li > a:only-child { display: inline-block; padding-block: 3px; color: #000; }

/* Archivos del blog (archive.php), con la estructura con que los pinta hoy hello-elementor (template-parts/archive.php y
   su theme.css): el h1 de las páginas (.pagina__titulo) y, por entrada, su título de 32 px, la miniatura a todo el
   ancho, de 500 px de alto como mucho (400 hasta 991 px y 300 hasta 575), y el extracto. */
.archivo { padding-bottom: 40px; }
.archivo__entrada-titulo { margin: .5rem 0 1rem; font: 500 2rem/1.2 var(--letra); }
.archivo__entrada-titulo a { color: var(--rosa); } /* 32 px es texto grande: 3,26:1 basta */
.archivo__imagen img { width: 100%; max-height: 500px; object-fit: cover; }
.archivo__extracto { margin: 0 0 .9rem; }
.archivo .nav-links { display: flex; justify-content: space-between; margin: 20px 0; } /* the_posts_navigation */
.archivo .nav-links a { display: inline-block; padding-block: 4px; } /* 24 px de objetivo */
@media (max-width: 991px) { .archivo__imagen img { max-height: 400px; } }
@media (max-width: 575px) { .archivo__imagen img { max-height: 300px; } }

/* Error 404 (plantilla 3336). En flex, como el contenedor de Elementor: las dos columnas (24,572 % y 75,394 %) y el
   hueco de 20 px no caben, y flex-shrink las encoge en proporción. Así, a 1440, el texto va en 311 px y la foto
   empieza en x=379, como hoy. */
.error-404 { display: flex; gap: 20px; margin-bottom: 10%; padding-inline: 20px; } /* el 10 % del ancho, como Elementor: 144 px a 1440 */
.error-404__texto { display: flex; flex: 0 1 24.572%; flex-direction: column; justify-content: center; gap: 40px; padding-right: 2%; text-align: center; }
.error-404__codigo { margin: -25px 0 0; color: var(--burdeos); font: 400 100px/1.2 var(--rotulo); letter-spacing: 6px; }
.error-404__aviso { margin: 0; color: #1e1e1e; font: 300 34px/50px var(--letra); letter-spacing: -.5px; }
/* 20/500 hoy; D10: 700 (.boton--rosa). 34 px de alto, como hoy (la tipografía «accent» del kit tiene interlineado de
   10 px): el bloque va centrado, y 10 px más de botón subían 5 px el «404» y el aviso. */
.error-404__boton { width: 100%; padding-block: calc((34px - 1em) / 2); font-size: 20px; }
.error-404__foto { position: relative; flex: 0 1 75.394%; min-height: 82.5vh; }
.error-404__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1024px) {
	.error-404 { flex-wrap: wrap; }
	.error-404__texto,
	.error-404__foto { flex-basis: 100%; }
	.error-404__texto { padding: 8% 20% 10%; }
	.error-404__codigo { margin-top: -15px; font-size: 50px; line-height: 1; letter-spacing: 5px; }
	.error-404__foto { min-height: 425px; }
}

/* En móvil el aviso va a todo el ancho (350 px) y parte en dos líneas, como hoy: el widget tiene el ancho «inherit»,
   así que su ancho personalizado de 340 px no se aplica. */
@media (max-width: 767px) {
	.error-404__texto { padding: 10% 0 14%; }
	.error-404__codigo { font-size: 38px; letter-spacing: 3px; } /* más pequeño que el aviso: es de hoy (B) */
	.error-404__foto { min-height: 300px; margin-bottom: 20px; }
}

/* Entrada del blog (plantilla 3526). Tres contenedores de Elementor (título, contenido y relacionadas) con una caja
   de 970 px y un 8 % de relleno lateral por fuera (content-box: a 1440, 970 px desde x=235); en móvil, el 5 % (19,5 px
   a 390) y el título, el 8 %. Los márgenes en % de Elementor se miden sobre el ancho de la página: aquí van en % donde
   la caja es la página (.entrada, .relacionadas) y en vw donde no. Cotas medidas sobre la captura de hoy a 1440 y 390.
   El fondo de la plantilla es blanco, no el #FDFDFD del resto de páginas. */
.single-post main { background: #fff; }
.entrada,
.relacionadas { box-sizing: content-box; max-width: 970px; margin-inline: auto; padding-inline: 8%; }
.entrada { padding-top: 2%; } /* el margen del contenedor del título: 28,8 px a 1440 */
.entrada__cabecera { text-align: center; }
.entrada__titulo {
	margin: 0;
	color: #1c244b;
	font: 500 70px/1.2 var(--letra);
	letter-spacing: -.5px;
	text-transform: capitalize;
	overflow-wrap: anywhere;
}
/* Hoy la fecha es una línea de 10 px que empieza 25 px bajo el título (10 de hueco y 15 de margen). Con 1,2 la línea
   crece 7 px por cada lado: 18 arriba la deja en su fila. Debajo, el 5 % de margen del contenedor del contenido (72 px
   a 1440, 19,5 a 390), menos esos 7. */
.entrada__fecha { margin: 18px 0 0; color: var(--rosa-texto); font: 200 20px/1.2 var(--letra); letter-spacing: -.2px; }
.entrada__imagen { width: 100%; height: auto; margin: calc(5vw - 7px) 0 50px; }
/* El contenido: la letra del widget (16/400, interlineado de 1,4 rem, justificado) y el reset de Hello Elementor,
   que es lo que hoy da forma al texto de la entrada: encabezados de 500 con interlineado 1,2 y márgenes de 0,5 y 1 rem
   (h2 de 32 px y h3 de 28), párrafos con 0,9 rem debajo, listas sin margen y tablas con bordes y filas alternas. Los
   encabezados heredan el color y el justificado, como hoy. flow-root, porque el widget es un elemento flex: el margen
   del primer hijo y el del último quedan dentro. */
.entrada__contenido { display: flow-root; color: #3b3b3b; font: 400 16px/1.4rem var(--letra); letter-spacing: -.2px; text-align: justify; }
.entrada__contenido h2,
.entrada__contenido h3 { margin: .5rem 0 1rem; font-weight: 500; line-height: 1.2; }
.entrada__contenido h2 { font-size: 2rem; }
.entrada__contenido h2[data-era-h1] { font-size: 2.5rem; } /* el h1 de hoy, ya como h2 (caribena_degradar_h1) */
.entrada__contenido h3 { font-size: 1.75rem; }
.entrada__contenido p { margin: 0 0 .9rem; }
/* Enlaces dentro del texto, subrayados donde el color solo no basta (WCAG 1.4.1, G183: 3:1 frente al texto). El
   #E2234F de D10 da 2,45:1 sobre el #3B3B3B de la entrada (hoy, #EA5F7F, 3,44:1), y no hay rosa que dé a la vez 4,5:1
   con el fondo y 3:1 con ese texto. En las legales, sobre negro, da 4,59:1 y no se subraya. La de las páginas de compra,
   acotada a los enlaces que van dentro de un texto, está en compra.css (Plan 4). */
.entrada__contenido a { text-decoration: underline; }
.entrada__contenido ul,
.entrada__contenido ol { margin: 0; }
/* Cada tabla va en una caja que se desplaza si no cabe, en vez de ensanchar la página (caribena_envolver_tablas): a
   320 px, la de la 2850. La tabla no cambia de display, así que llena la columna en cualquier ancho de ventana, como
   hoy (en display: block se encogía a su contenido). Los 15 px de debajo pasan a la caja: una caja desplazable
   encierra el margen de lo que lleva dentro, que ya no se juntaría con el de lo que la sigue. */
.entrada__tabla { margin: 0 0 15px; overflow-x: auto; }
.entrada__contenido table { width: 100%; margin: 0; border-collapse: collapse; font-size: .9em; }
.entrada__contenido th,
.entrada__contenido td { padding: 15px; border: 1px solid rgba(128, 128, 128, .502); line-height: 1.5; vertical-align: top; }
.entrada__contenido tbody > tr:nth-child(odd) > * { background: rgba(128, 128, 128, .071); }
.entrada__contenido tbody > tr:hover > * { background: rgba(128, 128, 128, .102); }
/* Entradas vecinas: el 3 % de margen del widget (29,1 px a 1440) más los 50 px de hueco del contenedor, y la raya.
   La etiqueta, con el interlineado del cuerpo (26,4 px): el widget no aplica el de 10 px del JSON. Si solo hay
   «Siguiente», va a la derecha, como hoy. */
.entrada__vecinas { display: flex; justify-content: space-between; margin-top: calc(3% + 50px); padding-top: 30px; border-top: 1px solid #1c244b; }
.entrada__vecina { color: var(--burdeos); font: 400 16px/1.65 var(--letra); letter-spacing: -.2px; text-transform: uppercase; }
.entrada__vecina[rel="next"] { margin-left: auto; }
/* Compartir, 50 px bajo las vecinas: el texto en una línea de 26,4 px, como hoy, y el icono arriba. */
.entrada__compartir { display: flex; align-items: flex-start; gap: 30px; margin: 50px 0 0; color: #324a6d; font: 300 16px/1.65 var(--letra); letter-spacing: -.2px; }
.entrada__compartir a { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--rosa); }
.entrada__compartir .icono { width: 22px; height: 22px; }
/* Relacionadas: el 5 % de margen arriba y abajo de su contenedor (72 px a 1440) y 100 px de hueco bajo el título. */
.relacionadas { padding-block: 5%; }
.relacionadas__titulo {
	margin: 0 0 100px;
	color: #1c244b;
	font: 500 50px/1.2 var(--letra);
	letter-spacing: -.5px;
	text-align: center;
	text-transform: capitalize;
}
.relacionadas__lista { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
/* Tarjetas del widget Posts 77d6378e: sin fondo, sombra ni relleno, con las esquinas de 3 px de Elementor y el texto
   40 px bajo la imagen (20 de la imagen y 20 del texto). */
.tarjeta-entrada--relacionada { background: none; box-shadow: none; }
.tarjeta-entrada--relacionada .tarjeta-entrada__imagen img { border-radius: 3px 3px 0 0; }
.tarjeta-entrada--relacionada .tarjeta-entrada__texto { padding: 33px 0 0; }
/* La tipografía de hoy: título 20/400 sin mayúsculas, extracto 14 px y «Leer Más» 16/500 con capitalize. El título,
   con interlineado de 1,2: los 10 px de hoy montan las líneas (A). La línea crece 7 px por lado, que salen del hueco
   de encima (40 → 33) y del de debajo (15 → 8; en móvil, 9 → 2): en una línea queda donde hoy. Bajo el extracto, los
   25 px del widget: 32-33 px en blanco hasta «Leer Más», como hoy. */
.tarjeta-entrada--relacionada .tarjeta-entrada__titulo { margin-bottom: 8px; font: 400 20px/1.2 var(--letra); letter-spacing: -.2px; text-transform: none; }
.tarjeta-entrada--relacionada .tarjeta-entrada__titulo a { color: var(--burdeos); }
.tarjeta-entrada--relacionada .tarjeta-entrada__extracto { margin-bottom: 25px; font-size: 14px; }
.tarjeta-entrada--relacionada .tarjeta-entrada__leer { font: 500 16px/10px var(--letra); letter-spacing: -.5px; text-transform: capitalize; }

/* La proporción de 0,35 del widget es de escritorio y tableta. En móvil vale la de Elementor por defecto, 0,5 (la de
   componentes.css), como hoy. */
@media (min-width: 768px) {
	.tarjeta-entrada--relacionada .tarjeta-entrada__imagen img { aspect-ratio: 1 / .35; }
}

@media (max-width: 767px) {
	.entrada,
	.relacionadas { padding-inline: 5%; }
	.entrada__cabecera { padding-inline: 3vw; } /* hasta el 8 % del contenedor del título: 31,2 px a 390 */
	.entrada__titulo { font-size: 40px; } /* 70 px desbordaba la página a 390 (anexo §8.3) */
	.entrada__imagen { margin-bottom: 25px; }
	.entrada__vecinas { margin-top: calc(3% + 25px); }
	.entrada__compartir { gap: 15px; margin-top: 35px; } /* 25 de hueco y 10 más, medidos en la captura de hoy */
	.entrada__compartir .icono { width: 18px; height: 18px; }
	.relacionadas { padding-block: 35% 0; } /* los márgenes del contenedor en móvil: 136,5 px a 390 arriba, nada abajo */
	.relacionadas__titulo { margin-bottom: 20px; }
	.relacionadas__lista { grid-template-columns: 1fr; gap: 30px; }
	.tarjeta-entrada--relacionada .tarjeta-entrada__titulo { margin-bottom: 2px; }
}