/*
 * Portada (página 514 de Elementor). Cotas medidas sobre la web actual: Plan 2, Tareas 7, 8 y 9.
 */
.hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 400px;
	box-shadow: 0 1px 10px 2px rgba(97, 97, 97, .35);
	color: #fff;
}
/* Velo sobre el vídeo: degradado de −90° de #00000038 (al 49 %) a negro, el background_overlay de Elementor. */
.hero .video-fondo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(-90deg, rgba(0, 0, 0, .22) 49%, #000 100%);
}
.hero__texto { position: relative; z-index: 1; padding-block: 10px; }
.hero__titulo { margin: 0 0 20px; font: 600 40px/30px var(--letra); text-transform: uppercase; }
.hero__lema { margin: 0 0 20px; color: var(--rosa); font: 400 34px/29px var(--letra); }
.hero__entradilla { margin: 0 0 20px; font: 300 20px/20px var(--letra); }
.hero__boton { font-size: 20px; text-transform: uppercase; } /* 20/600 hoy; 700 por D10 (.boton--rosa) */
/* Sobre el velo, que llega a negro, el anillo burdeos global no se ve (1,0-1,3:1): el de dos tonos del botón de pausa
   (componentes.css), negro pegado al botón y blanco por fuera. Uno de los dos contrasta con cualquier fotograma. */
.hero__boton:focus-visible { outline-color: #fff; box-shadow: 0 0 0 2px #000; }

.seleccion { padding-top: 70px; }
.seleccion__titulo {
	margin: 0 0 70px;
	color: var(--cuerpo);
	font: 600 40px/25px var(--letra);
	text-align: center;
	text-transform: uppercase;
}
.seleccion__tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-block: 10px; }
.tarjeta-tipo {
	display: flex;
	align-items: flex-start;
	gap: 5px;
	padding: 10px;
	box-shadow: var(--sombra);
	color: var(--enfasis);
	text-decoration: none;
}
.tarjeta-tipo:hover { text-decoration: none; }
/* Elementor encoge las dos columnas de la tarjeta (40 % y 60 %) para que quepa su hueco de 5 px: a la imagen le tocan
   2 px, y mide 137×217 como hoy (con el 40 % justo, 139×220, y la tarjeta crece de 237 a 240 px). */
.tarjeta-tipo__imagen { flex: 0 0 calc(40% - 2px); width: calc(40% - 2px); height: auto; }
.tarjeta-tipo__textos { display: flex; flex-direction: column; gap: 15px; padding: 10px 5px 10px 0; }
.tarjeta-tipo__marca { color: var(--amarillo); font: 400 38px/30px var(--rotulo); letter-spacing: -1.1px; } /* rótulo: exento de contraste, como el logo */
.tarjeta-tipo__nombre { margin: 10px 0 0 10px; font: 500 18px/1 var(--letra); letter-spacing: -.2px; }
.tarjeta-tipo__texto { margin: 0 10px 0 10px; font: 300 16px/18px var(--letra); letter-spacing: -.1px; }
.seleccion__todos {
	display: block;
	width: max-content;
	/* Hoy, 20 px de margen y 10 de relleno por encima, y 40 y 10 por debajo. Los 7 px de relleno, que dan 24 px de
	   objetivo con el interlineado de 10 px de hoy, salen de esos márgenes: el texto y lo que sigue no se mueven. */
	margin: 23px auto 43px;
	padding: 7px 0;
	color: var(--cuerpo);
	font: 600 20px/10px var(--letra);
	letter-spacing: -1px;
	text-transform: uppercase;
}

@media (max-width: 767px) {
	.hero__titulo,
	.hero__entradilla { line-height: 1.2; } /* los 30 y 20 px de escritorio montan las líneas en móvil */
	.seleccion__titulo { line-height: 1.2; } /* los 70 px de debajo, también en móvil: Elementor no los cambia */
	.seleccion__tarjetas { grid-template-columns: 1fr; }
	.tarjeta-tipo { flex-direction: column; align-items: center; text-align: center; }
	.tarjeta-tipo__imagen { flex: none; width: 50%; }
	.tarjeta-tipo__nombre,
	.tarjeta-tipo__texto { margin-inline: 0; }
	.tarjeta-tipo__texto { font-size: 14px; }
}

/* Blog «Así es como se prepara el café de verdad». */
.blog-portada { padding: 90px 0 70px; }
.blog-portada__titulo {
	margin: 0;
	color: var(--cuerpo);
	font: 600 40px/25px var(--letra);
	text-align: center;
	text-transform: uppercase;
}
.blog-portada__entradilla {
	max-width: 650px;
	margin: 40px auto 30px;
	color: var(--cuerpo);
	font: 300 16px/25px var(--letra);
}
.entradas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px 30px; } /* filas y columnas por defecto del widget */

/* Banda rosa: 42 px es texto grande, así que el blanco sobre rosa (3,26:1) basta. */
.banda-rosa {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100px;
	margin: 0;
	padding: 25px 10px;
	background: var(--rosa);
	color: #fff;
	font: 900 42px/50px var(--letra);
	word-spacing: 4px;
	text-align: center;
	text-transform: uppercase;
}

/* Banda de foto con velo negro al 50 %. */
.banda-foto {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 250px;
	padding: 20px 10px;
	color: #fff;
	text-align: center;
}
.banda-foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banda-foto::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
.banda-foto__texto { position: relative; z-index: 1; margin: 0; font: 600 30px/1.2 var(--letra); text-transform: uppercase; }

/* Hasta 1024 px el título puede partir en dos líneas (a 768, 800 y 834 lo hace), y con los 25 px de interlineado de
   escritorio se montaban (anexo:912): con 1,2, no. A 1440 va en una línea y no cambia. */
@media (max-width: 1024px) {
	.blog-portada__titulo { line-height: 1.2; }
}
/* Tableta: dos columnas, las que Elementor Pro da en tableta al widget, que no fija las suyas (3, 2 y 1). */
@media (min-width: 768px) and (max-width: 1024px) {
	.entradas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.blog-portada__entradilla { max-width: 266px; line-height: 1.2; text-align: center; } /* los 266 px de hoy: B */
	.entradas { grid-template-columns: 1fr; }
}

/* «Lo que dicen nuestros clientes» (partes/resenas.php): resumen a la izquierda y carrusel de tarjetas, tres en
   escritorio y una en móvil, con flechas y puntos. Los puntos miden 8 px, como hoy, dentro de un botón de 24 px
   (hoy el objetivo es de 5-8 px: anexo §8.5). Alturas medidas sobre la captura de hoy: las tarjetas empiezan 52 px
   bajo el título (el widget suma 8 px de margen a cada tarjeta) y bajo ellas quedan 48 px hasta la banda de foto,
   con los puntos en medio. */
.resenas { padding: 40px 0 14px; }
.resenas__titulo {
	margin: 0 0 52px;
	color: var(--cuerpo);
	font: 500 28px/20px var(--letra);
	text-align: center;
	text-transform: uppercase;
}
.resenas__cuerpo { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: center; }
/* Resumen como hoy: el logotipo (48 px, el --head-img-size de la colección) a la izquierda de los cuatro textos, y
   los dos botones debajo, centrados. Se apilan si no caben en una línea: en escritorio van uno sobre otro y en
   móvil, en una, como hoy. */
.resenas__resumen { display: grid; grid-template-columns: 48px auto; gap: 6px 8px; padding: 10px 20px; }
.resenas__resumen p { grid-column: 2; margin: 0; }
.resenas__google { grid-row: span 4; align-self: start; width: 48px; height: 48px; color: #4285f4; }
.resenas__escala,
.resenas__negocio { color: var(--burdeos); font: 600 17px/1.3 var(--letra); }
.resenas__nota { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.resenas__total { color: var(--gris-texto); font-size: 14px; } /* hoy #777 (4,48:1): D10 */
.resenas__botones { display: flex; flex-wrap: wrap; grid-column: 1 / -1; justify-content: center; gap: 8px; margin-top: 14px; }
.resenas__enlace {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 24px;
	padding: 4px 10px;
	border-radius: 12px;
	background: var(--rosa);
	color: var(--burdeos); /* D10: texto pequeño sobre rosa que no es un botón de acción de la tienda */
	font: 400 12px/1 var(--letra);
}
.resenas__enlace .icono { width: 12px; height: 12px; }
.estrellas { display: inline-flex; gap: 2px; color: var(--amarillo); } /* el --star-color de la colección */
.estrellas .icono { width: 16px; height: 16px; }
.estrellas .estrella--vacia { color: #d5d8dc; }
/* minmax(0, 1fr): la columna del centro no crece con lo que lleva, y los puntos (uno por reseña, de 24 px) parten en
   filas. Con 1fr y en una fila, 10 puntos ensanchaban la portada a 334 px de 320 a 339 px de ventana (WCAG 1.4.10), y
   con más reseñas desbordaría también a 390. */
.resenas__carrusel { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; align-items: center; gap: 10px; }
.resenas__lista {
	position: relative;
	display: grid;
	grid-auto-columns: calc((100% - 32px) / 3);
	grid-auto-flow: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.resenas__lista::-webkit-scrollbar { display: none; }
.resena {
	position: relative;
	display: grid;
	grid-template-columns: 48px 1fr;
	align-content: start;
	column-gap: 10px;
	padding: 20px;
	border-radius: 12px;
	background: #f4f4f4;
	scroll-snap-align: start;
}
.resena p { margin: 0; }
/* El logotipo de Google de cada tarjeta, en su esquina como hoy (14 px a .75em del borde). Invade 6 px del
   contenido: el padding-right de .resena__autor impide que un nombre largo pase por debajo. */
.resena__google { position: absolute; top: 12px; right: 12px; width: 14px; height: 14px; color: #4285f4; }
.resena__inicial {
	display: inline-flex;
	grid-row: span 3;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--burdeos);
	color: #fff;
	font: 600 18px/1 var(--letra);
}
.resena__autor { padding-right: 6px; color: var(--burdeos); font: 400 13px/1.3 var(--letra); }
.resena__fecha { color: #555; font-size: 13px; }
.resena__texto { grid-column: 1 / -1; margin-top: 15px !important; color: var(--cuerpo); font: 400 15px/1.45 var(--letra); } /* #333, el --card-color de hoy */
.resenas__flecha {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid #d5d8dc;
	border-radius: 50%;
	background: #fff;
	color: #555;
	cursor: pointer;
}
.resenas__flecha .icono { width: 10px; height: 14px; }
.resenas__puntos { display: flex; flex-wrap: wrap; grid-column: 2; justify-content: center; }
.resenas__punto { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.resenas__punto::before {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	margin: auto;
	border-radius: 50%;
	background: #d5d8dc;
}
.resenas__punto[aria-current="true"]::before { background: var(--rosa); }

/* Tableta: como el widget de hoy, que elige las columnas por el ancho de su caja (menos de 1050 px, dos tarjetas), el
   resumen va arriba y se ven dos reseñas. Con tres junto al resumen, a 768 px cada tarjeta medía 117 y su texto se
   metía 49 px bajo la siguiente. */
@media (min-width: 768px) and (max-width: 1049px) {
	.resenas__cuerpo { grid-template-columns: 1fr; }
	.resenas__resumen { justify-content: center; }
	.resenas__lista { grid-auto-columns: calc((100% - 16px) / 2); }
}

@media (max-width: 767px) {
	.resenas__titulo { line-height: 1.2; }
	.resenas__cuerpo { grid-template-columns: 1fr; }
	.resenas__resumen { justify-content: center; } /* el logotipo y los textos, juntos y centrados */
	.resenas__lista { grid-auto-columns: 100%; }
}

/* Popup «Registro» (partes/popup-registro.php): el popup 3577 de Elementor Pro con el diseño nuevo («Popup de registro»
   de Claude Design, estilo puro: mismo marcado, textos y disparadores). Tarjeta blanca de 440 px a 24 px de la esquina
   inferior derecha (en móvil, hoja inferior a todo el ancho), velo burdeos, la × dentro y el botón rosa de la web. La
   imagen se limita a un 34 % del alto de la ventana y el panel hace scroll: en ventanas bajas el botón sigue a la vista. */
.popup-registro { position: fixed; inset: auto var(--espacio-l) var(--espacio-l) auto; width: 440px; max-width: calc(100vw - 32px); max-height: calc(100vh - 48px); margin: 0; padding: 0; overflow: auto; border: 0; background: #fff; box-shadow: var(--sombra-panel); }
.popup-registro::backdrop { background: rgba(49, 2, 28, .55); }
.popup-registro[open] { animation: popup-registro-entra .45s ease-out; }
@keyframes popup-registro-entra { from { opacity: 0; transform: translateY(24px); } }
.popup-registro__cerrar { position: absolute; top: 10px; right: 10px; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: var(--objetivo-min); height: var(--objetivo-min); padding: 0; border: 0; border-radius: 50%; background: #fff; color: var(--burdeos); cursor: pointer; }
.popup-registro__cerrar:hover { background: var(--rosa-claro); }
.popup-registro__cerrar .icono, .popup-registro__cerrar svg { width: 14px; height: 14px; fill: currentColor; }
.popup-registro__imagen { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 34vh; object-fit: cover; }
.popup-registro__texto { display: flex; flex-direction: column; gap: var(--espacio-s); padding: 28px 32px 32px; text-align: left; }
.popup-registro__antetitulo { margin: 0; color: var(--burdeos); font: 600 var(--antetitulo)/1.3 var(--letra); letter-spacing: .14em; text-transform: uppercase; }
.popup-registro__titulo { margin: 0; color: var(--rosa); font: 900 56px/.95 var(--letra); letter-spacing: -.02em; text-transform: uppercase; }
.popup-registro__cuerpo { margin: 0 0 var(--espacio-xs); color: var(--texto); font: 300 17px/1.45 var(--letra); }
.popup-registro__boton { display: flex; align-items: center; justify-content: center; align-self: stretch; min-height: 52px; padding: 0 var(--espacio-l); border: 0; border-radius: var(--radio-boton); background: var(--rosa); color: #fff; font: 700 19px/1 var(--letra); letter-spacing: 0; text-transform: uppercase; text-decoration: none; }
.popup-registro__boton:hover { background: var(--burdeos); color: #fff; text-decoration: none; }
.popup-registro__boton:focus-visible { outline: 2px solid var(--burdeos); outline-offset: 3px; background: var(--rosa); color: #fff; }
@media (max-width: 767px) {
	.popup-registro { inset: auto 0 0 0; width: 100%; max-width: 100vw; max-height: 92vh; }
	.popup-registro__imagen { max-height: 26vh; }
	.popup-registro__texto { padding: 20px var(--espacio-m) var(--espacio-m); }
	.popup-registro__titulo { font-size: 44px; }
	.popup-registro__cuerpo { font-size: var(--texto-m); }
}
@media (prefers-reduced-motion: reduce) { .popup-registro[open] { animation: none; } }