/*
 * Piezas que se repiten en varias páginas. Cotas medidas sobre la web actual: Plan 2, Tareas 7, 8 y 10.
 */

/* Bloques 50/50 de color y foto o vídeo (portada y Nosotros): dos mitades a sangre de 450 px. En móvil se apilan
   en el orden del marcado, y la foto mide 250 px: hoy queda en una franja de 50-60 px (anexo §8.2 y §8.3). */
.bloque-5050 { display: grid; grid-template-columns: 1fr 1fr; min-height: 450px; }
.bloque-5050__texto { display: flex; align-items: center; justify-content: center; }
.bloque-5050__dentro { width: 90%; padding: 10px; }
.bloque-5050--rosa .bloque-5050__texto { background: var(--rosa-claro); }
.bloque-5050--crema .bloque-5050__texto { background: var(--crema); }
.bloque-5050--crema-suave .bloque-5050__texto { background: #fceed0; } /* #F9BE3A3B, el de Nosotros */
.bloque-5050__titulo {
	margin: 0 0 20px;
	color: var(--cuerpo);
	font: 600 26px/30px var(--letra);
	text-transform: uppercase;
}
.bloque-5050__subtitulo {
	margin: 0 0 20px;
	color: var(--cuerpo);
	font: 400 18px/25px var(--letra);
	text-transform: uppercase;
}
.bloque-5050__dentro p:not(.bloque-5050__subtitulo) {
	margin: 0 0 34px; /* los 20 entre widgets de Elementor y los 14 (0,9 rem) del <p> de Hello Elementor */
	color: #252525;
	font: 400 18px/25px var(--letra);
	letter-spacing: -.2px;
}
/* 34 px de alto en una línea, como hoy (Elementor: interlineado de 10 px y relleno de 12). Aquí se queda el
   interlineado 1 de .boton y el alto sale del relleno: 7,5 px en el rosa (19 px de letra) y 9 en el amarillo (16).
   La letra sigue centrada (en el rosa, 0,5 px más arriba, por redondeo). Con 10 px, un texto que parte en dos se
   monta («EXPLORA NUESTRA TIENDA» a 320 px, el ancho de WCAG 1.4.10); con 1, las líneas van a 1 em y no se tocan. */
.bloque-5050__boton { font-weight: 800; padding-block: calc((34px - 1em) / 2); }
.bloque-5050__foto { position: relative; min-height: 250px; overflow: hidden; }
.bloque-5050__foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* background-size: auto de hoy: tamaño natural, centrado (el tambor del primer 50/50 de la portada, 2560 px). Con
   loading lazy, WordPress pone sizes="auto, 2560px": el navegador elige por el ancho de la caja, estos 2560 px, y el
   que no entiende auto, por el 2560px. */
.bloque-5050__foto > .bloque-5050__natural {
	inset: auto;
	top: 50%;
	left: 50%;
	width: 2560px;
	max-width: none;
	height: auto;
	transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
	.bloque-5050 { grid-template-columns: 1fr; min-height: 0; }
	.bloque-5050__texto { padding: 10px; }
	/* La caja del 90 % pasa al ancho entero, como hoy: en móvil Elementor pone al 100 % todo contenedor que no tiene
	   ancho propio para móvil (.e-con.e-flex { --width: 100% }). Con el 90 %, el título de la portada va en dos líneas. */
	.bloque-5050__dentro { width: 100%; }
	/* Solo el primero de la portada va centrado en móvil, y en Nosotros cada hito va a su manera: se conserva,
	   porque unificarlo cambia cómo se ve (fase B; anexo §8.2 y §8.3). */
	.bloque-5050--centrado-movil .bloque-5050__texto { text-align: center; }
}

/* Vídeo de fondo con su imagen de reserva (caribena_video_fondo): la imagen se ve siempre y el vídeo la tapa
   cuando arranca. */
.video-fondo { position: absolute; inset: 0; overflow: hidden; }
.video-fondo img,
.video-fondo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-fondo__pausa {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	cursor: pointer;
}
/* Foco en dos tonos: negro pegado al círculo (la sombra) y blanco por fuera (el contorno de 2 px a 2 px de base.css).
   El burdeos del tema no se ve sobre el vídeo (1,0-1,3:1), el blanco solo no llega en los fotogramas claros de
   body-v1.mp4, que no lleva velo, ni el negro solo en los oscuros: juntos, uno de los dos contrasta siempre. Los 4 px
   del anillo caben en .video-fondo, que recorta, porque el botón está a 12 px del borde. */
.video-fondo__pausa:focus-visible { outline-color: #fff; box-shadow: 0 0 0 2px #000; }
.video-fondo__pausa[hidden] { display: none; }
.video-fondo__pausa .icono { width: 12px; height: 12px; }
.video-fondo__pausa[data-estado="reproduciendo"] .icono--reproducir,
.video-fondo__pausa[data-estado="parado"] .icono--pausa { display: none; }

/* Tarjeta de entrada del blog (partes/tarjeta-entrada.php; widget Posts de Elementor, piel «cards»). */
.tarjeta-entrada {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, .15);
}
.tarjeta-entrada__imagen img { width: 100%; height: auto; aspect-ratio: 360 / 238; object-fit: cover; }
.tarjeta-entrada__insignia {
	position: absolute;
	top: 20px;
	right: 20px;
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--rosa);
	color: var(--burdeos); /* D10: blanco de 12 px sobre rosa daba 3,26:1 */
	font: 500 12px/10px var(--letra);
	letter-spacing: -.2px;
	text-transform: uppercase;
}
.tarjeta-entrada__texto { flex: 1; padding: 40px 30px 0; }
.tarjeta-entrada__titulo { margin: 0 0 25px; font: 600 24px/30px var(--letra); text-transform: uppercase; }
.tarjeta-entrada__titulo a { color: var(--rosa); } /* 24 px es texto grande: 3,26:1 basta */
/* Los 10 px de cards_excerpt_spacing. «Leer más» es un inline-block, como en Elementor, y se asienta en el renglón
   del bloque (16 px con interlineado 1,65): su texto queda 19 px bajo el extracto, como hoy. */
.tarjeta-entrada__extracto {
	margin: 0 0 10px;
	color: var(--gris-texto); /* #777 daba 4,48:1 */
	font: 300 16px/1.2 var(--letra);
	letter-spacing: -.2px;
}
.tarjeta-entrada__leer {
	display: inline-block;
	margin-bottom: 13px;
	padding: 7px 0; /* 24 px de objetivo */
	color: var(--rosa-texto);
	font: 600 14px/10px var(--letra);
	letter-spacing: -.2px;
	text-transform: uppercase;
}
.tarjeta-entrada__fecha {
	margin: 0;
	padding: 15px 30px;
	border-top: 1px solid #eaeaea;
	color: var(--gris-texto); /* #ADADAD daba 2,24:1 */
	font: 300 16px/10px var(--letra);
	letter-spacing: -.5px;
}

/* En móvil, la imagen va a la mitad de su ancho (370×185), el item_ratio móvil por defecto del widget: con 360/238
   medía 245 px. También en las relacionadas de la entrada (Tarea 13): su proporción de 0,35 es solo desde 768 px
   (paginas.css). */
@media (max-width: 767px) {
	.tarjeta-entrada__imagen img { aspect-ratio: 2 / 1; }
}

/* Pre-pie «Últimas noticias» (partes/boletin.php): texto y formulario a la izquierda y la acuarela a la derecha,
   sobre gris claro; en móvil, apilado y centrado. */
.boletin { background: var(--gris-claro); }
.boletin__dentro { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.boletin__texto { padding: 10px; }
.boletin__titulo {
	margin: 20px 0;
	color: var(--cuerpo);
	font: 600 30px/20px var(--letra);
	text-transform: uppercase;
}
/* 34 px: los 20 entre widgets de Elementor y los 14 (0,9 rem) del <p> de Hello Elementor, como en los 50/50. */
.boletin__texto > p { margin: 0 0 34px; color: #353535; font: 300 16px/25px var(--letra); }
/* Sin margen debajo, como hoy (Elementor compensa el hueco de la última fila): en escritorio el bloque queda centrado
   donde está hoy y en móvil hay 20 px hasta la acuarela. */
.boletin__formulario { display: grid; gap: 10px; }
.boletin__formulario input { height: 42px; font-weight: 300; }
/* 40 px de alto como mínimo, no fijos: con el espaciado de texto de WCAG 1.4.12, a 390 px el texto parte en dos líneas
   y «TODO!» quedaba fuera del botón, en blanco sobre el gris. En una línea mide 40 px y el texto va donde iba. */
.boletin__formulario button {
	min-height: 40px;
	padding: 5px 24px;
	border: 0;
	border-radius: 3px;
	background: var(--burdeos);
	color: #fff;
	font: 400 20px/1 var(--letra);
	letter-spacing: -.2px;
	cursor: pointer;
}
.boletin__imagen { width: 100%; height: auto; padding: 10px; }

@media (max-width: 767px) {
	.boletin__dentro { grid-template-columns: 1fr; }
	.boletin__texto { padding: 20px 10px 10px; text-align: center; } /* márgenes simétricos: hoy 20 y 10 px (anexo §8.2) */
	.boletin__titulo { line-height: 1.2; }
	/* La acuarela, a todo el ancho menos 10 px por lado (370 px a 390), como hoy: la columna ya trae esos 10 px. */
	.boletin__imagen { padding: 10px 0; }
}

/* Formularios (Plan 4, Tarea 8). El aviso tras el envío, dentro de la región viva (role=status) que pintan
   partes/boletin.php y page-contacto.php. Lleva la letra y los colores del mensaje del boletín de Elementor de hoy: 20 px
   en 400, #0A5E2C el éxito y #A30C0C el error (7,1:1 sobre el gris del boletín y 4,8:1 sobre el amarillo del
   contacto). El interlineado es 1,2: los 10 px de hoy montan las líneas en cuanto el aviso ocupa dos (anexo §8.3). El
   contacto de hoy no fija colores y lleva el mismo aviso (puerta 2). La región vacía no ocupa nada: el margen va en el
   párrafo, no en la región. */
.formulario__mensaje { margin: 10px 0 0; font: 400 20px/1.2 var(--letra); letter-spacing: -.2px; }
.formulario__mensaje--ok { color: #0a5e2c; }
.formulario__mensaje--error { color: #a30c0c; }
/* La línea de privacidad (P13), nueva: pequeña, en el gris del texto del boletín, con el enlace en burdeos y subrayado.
   El rosa sobre el gris del boletín daría 4,1:1 (D10). En el contacto va toda en burdeos (paginas.css). */
.formulario__privacidad { margin: 0; color: #353535; font: 300 14px/1.4 var(--letra); }
.formulario__privacidad a { color: var(--burdeos); text-decoration: underline; }

/* Banda burdeos con el h1 de la página (partes/banda-titulo.php). Interlineado de 1,1: con los 30 px de hoy y
   letra de 40, los títulos de dos líneas se montan en móvil (anexo §8.3). En una línea no cambia nada. */
.banda-titulo { display: flex; align-items: center; justify-content: center; padding: 10px; background: var(--burdeos); }
.banda-titulo--oscura { background: #31021c; } /* #52042F bajo el velo negro al 40 % de Elementor */
.banda-titulo--120 { min-height: 120px; }
.banda-titulo--150 { min-height: 150px; }
.banda-titulo--200 { min-height: 200px; }
.banda-titulo--240 { min-height: 240px; }
.banda-titulo__texto {
	margin: 0;
	color: #fff;
	font: 600 40px/1.1 var(--letra);
	text-align: center;
	text-transform: uppercase;
}