/* ============================================================
   El Mundo es un Viaje — Bloques
   Diseño centralizado. Cada valor configurable es una custom
   property con su valor original como fallback: si no se toca
   nada en Ajustes ni en el bloque, el diseño es el de siempre.
   Ver inc/estilos.php para el esquema de campos.
   ============================================================ */
:root {
	/* Tokens enlazados a la paleta de Blocksy (con fallback si el tema cambia) */
	--emev-verde:     var(--theme-palette-color-1, #85ab8d);
	--emev-verde-osc: color-mix(in srgb, var(--theme-palette-color-1, #85ab8d) 78%, #000);
	--emev-tinta:     var(--theme-palette-color-4, #0a0500);
	--emev-ink:       #1c1c1c;
	--emev-texto:     #202624;
	--emev-gris:      #555555;
	--emev-card-bg:   #ffffff;
	--emev-card-borde: var(--theme-palette-color-5, #ececec);
	--emev-radio: 18px;
	--emev-gap: clamp(24px, 4vw, 56px);
	/* Mismo ancho que el resto de bloques de la página (Blocksy lo limita a 1290px),
	   y el mismo margen lateral del tema cuando el bloque va a ancho completo. */
	--emev-max: min(var(--theme-block-max-width, 1290px), var(--theme-container-edge-spacing, 90vw));
	/* Tipografías del tema (títulos manuscritos + cuerpo) */
	--emev-font-head: "Patrick Hand", ui-rounded, "Segoe Print", cursive;
	--emev-font-body: "Outfit", system-ui, sans-serif;
}

/* Al pinchar una entrada del índice, por si la cabecera fija tapa el título.
   Por defecto 0: manda lo que ya haga el tema. Se sube en Ajustes si hace falta. */
h1:target, h2:target, h3:target, h4:target, h5:target, h6:target {
	scroll-margin-top: var(--emev-ancla-offset, 0px);
}

/* ---------- Cabecera País (ref. mockup imagen #4) ---------- */
.emev-cabecera {
	width: 100%;
	scroll-margin-top: 120px;

	/* Distribución por dispositivo (panel "Distribución" del bloque).
	   Cadena: valor del bloque para este dispositivo → el del dispositivo mayor →
	   default del sitio (Ajustes) → diseño del plugin. Cortes = los de Blocksy. */
	--emev-cab-ancho-def: var(--emev-cab-ancho, var(--emev-max));
	--emev-cab-cols-def:  var(--emev-cab-columnas, minmax(0, 1fr) minmax(0, 1.4fr));
	--emev-cab-gap-def:   var(--emev-cab-gap, clamp(28px, 4vw, 60px));

	--emev-cab-ancho-actual: var(--emev-cab-dist-ancho-d, var(--emev-cab-ancho-def));
	--emev-cab-cols-actual:  var(--emev-cab-dist-cols-d, var(--emev-cab-cols-def));
	--emev-cab-gap-actual:   var(--emev-cab-dist-gap-d, var(--emev-cab-gap-def));
}
.emev-cabecera--imagen-izquierda {
	--emev-cab-cols-def: var(--emev-cab-columnas, minmax(0, 1.4fr) minmax(0, 1fr));
}
/* Tableta */
@media (max-width: 999.98px) {
	.emev-cabecera {
		--emev-cab-ancho-actual: var(--emev-cab-dist-ancho-t, var(--emev-cab-dist-ancho-d, var(--emev-cab-ancho-def)));
		--emev-cab-cols-actual:  var(--emev-cab-dist-cols-t, var(--emev-cab-dist-cols-d, var(--emev-cab-cols-def)));
		--emev-cab-gap-actual:   var(--emev-cab-dist-gap-t, var(--emev-cab-dist-gap-d, var(--emev-cab-gap-def)));
		/* Posición de la imagen al apilar: -1 arriba (defecto), 2 abajo. */
		--emev-cab-orden-actual: var(--emev-cab-dist-orden-t, -1);
	}
}
/* Móvil (siempre apiladas: sólo cuentan ancho y espacio) */
@media (max-width: 689.98px) {
	.emev-cabecera {
		--emev-cab-ancho-actual: var(--emev-cab-dist-ancho-m, var(--emev-cab-dist-ancho-t, var(--emev-cab-dist-ancho-d, var(--emev-cab-ancho-def))));
		--emev-cab-gap-actual:   var(--emev-cab-dist-gap-m, var(--emev-cab-dist-gap-t, var(--emev-cab-dist-gap-d, var(--emev-cab-gap-def))));
		--emev-cab-orden-actual: var(--emev-cab-dist-orden-m, var(--emev-cab-dist-orden-t, -1));
	}
}

.emev-cabecera__inner {
	max-width: var(--emev-cab-ancho-actual);
	margin-inline: auto;
	/* Sin relleno propio: el bloque se alinea con el resto de la página. */
	padding-inline: var(--emev-cab-pad-lados, 0);
	padding-block: var(--emev-cab-pad-bloque, 0);
	display: grid;
	/* Por defecto la imagen se lleva la columna ancha (texto 1 : imagen 1.4). */
	grid-template-columns: var(--emev-cab-cols-actual);
	gap: var(--emev-cab-gap-actual);
	align-items: stretch;
}

/* Primer bloque de la página bajo la cabecera transparente del tema: deja el hueco justo
   para que no quede tapado. --has-transparent-header es el 0/1 de Blocksy, así que en
   páginas sin cabecera transparente (y en el editor) esto vale 0.
   Por defecto: lo que tapa la cabecera (82px escritorio / 62px móvil) + 16px de aire. */
.entry-content > .emev-cabecera:first-child {
	padding-top: calc(var(--emev-cab-despeje, var(--emev-cab-despeje-def, 98px)) * var(--has-transparent-header, 0));
}
@media (max-width: 999.98px) {
	.entry-content > .emev-cabecera:first-child { --emev-cab-despeje-def: 78px; }
}

.emev-cabecera--imagen-izquierda .emev-cabecera__col--imagen { order: -1; }
.emev-cabecera--imagen-derecha  .emev-cabecera__col--imagen { order: 2; }

.emev-cabecera__col--texto {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.emev-cabecera__col--texto > * { max-width: 560px; }

.emev-cabecera__eyebrow {
	font-family: var(--emev-cab-ante-fuente, var(--emev-font-body));
	font-weight: var(--emev-cab-ante-peso, 600);
	letter-spacing: var(--emev-cab-ante-espaciado, .18em);
	text-transform: uppercase;
	color: var(--emev-cab-ante-color, var(--emev-verde));
	margin: 0 0 var(--emev-cab-ante-margen, .5em);
	font-size: var(--emev-cab-ante-tamano, .8125rem);   /* 13px */
}

.emev-cabecera__titulo {
	font-family: var(--emev-cab-titulo-fuente, var(--emev-font-head));
	margin: 0 0 var(--emev-cab-titulo-margen, .18em);
	line-height: var(--emev-cab-titulo-interlineado, .95);
	font-weight: var(--emev-cab-titulo-peso, 400);
	color: var(--emev-cab-titulo-color, var(--emev-tinta));
	font-size: var(--emev-cab-titulo-tamano, clamp(3.4rem, 6.2vw, 5.25rem)); /* ~84px */
}

.emev-cabecera__subtitulo {
	font-family: var(--emev-cab-sub-fuente, var(--emev-font-body));
	margin: 0 0 var(--emev-cab-sub-margen, clamp(1.5em, 2.4vw, 2em));
	max-width: var(--emev-cab-sub-ancho, 42ch);
	color: var(--emev-cab-sub-color, var(--emev-gris));
	font-size: var(--emev-cab-sub-tamano, 1.125rem);    /* 18px */
	font-weight: var(--emev-cab-sub-peso, 400);
	line-height: var(--emev-cab-sub-interlineado, var(--emev-interlineado, 1.6));
}

/* Tarjeta CONTENIDO */
.emev-cabecera__indice {
	background: var(--emev-cab-idx-fondo, #fff);
	border: 1px solid var(--emev-cab-idx-borde, #ececec);
	border-radius: var(--emev-cab-idx-radio, 18px);
	padding: var(--emev-cab-idx-padding, clamp(22px, 2.2vw, 30px) clamp(22px, 2.4vw, 32px));
	box-shadow: var(--emev-cab-idx-sombra, 0 18px 45px -26px rgba(18, 63, 82, .35));
}

.emev-cabecera__indice-titulo {
	font-family: var(--emev-cab-idxt-fuente, var(--emev-font-body));
	margin: 0 0 var(--emev-cab-idxt-margen, .9em);
	padding-bottom: var(--emev-cab-idxt-margen, .9em);
	border-bottom: 1px solid var(--emev-cab-idx-borde, #ececec);
	font-weight: var(--emev-cab-idxt-peso, 600);
	letter-spacing: var(--emev-cab-idxt-espaciado, .18em);
	text-transform: uppercase;
	color: var(--emev-cab-idxt-color, var(--emev-verde));
	font-size: var(--emev-cab-idxt-tamano, .8125rem);   /* 13px */
}

.emev-cabecera__indice-lista {
	list-style: none;
	margin: 0; padding: 0;
	counter-reset: none;
}

.emev-cabecera__indice-item {
	display: flex;
	align-items: baseline;
	gap: var(--emev-cab-idxi-gap, 12px);
	font-family: var(--emev-cab-idxi-fuente, var(--emev-font-body));
	font-size: var(--emev-cab-idxi-tamano, 1rem);       /* 16px */
	line-height: var(--emev-cab-idxi-interlineado, 1.35);
	padding-block: var(--emev-cab-idxi-padding, 8px);
	/* Sangría por nivel: --emev-cab-idxi-prof lo pone el render (0, 1, 2…). */
	padding-inline-start: calc(var(--emev-cab-idxi-sangria, 18px) * var(--emev-cab-idxi-prof, 0));
}
.emev-cabecera__idx-num {
	color: var(--emev-cab-idxi-color-num, var(--emev-gris));
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	flex: 0 0 auto;
}
.emev-cabecera__idx-sep {
	color: var(--emev-cab-idxi-color-sep, var(--emev-verde));
	flex: 0 0 auto;
}
.emev-cabecera__idx-link {
	color: var(--emev-cab-idxi-color, var(--emev-ink));
	text-decoration: none;
	font-weight: var(--emev-cab-idxi-peso, 500);
	transition: color .15s ease;
}
.emev-cabecera__idx-link:hover { color: var(--emev-cab-idxi-color-hover, var(--emev-verde)); }

/* Carrusel de imágenes (redondeado y contenido) */
.emev-cabecera__col--imagen { min-height: 320px; }
.emev-cabecera__carrusel {
	position: relative;
	height: 100%;
	min-height: var(--emev-cab-car-alto, clamp(420px, 58vh, 600px));
	border-radius: var(--emev-cab-car-radio, 22px);
	overflow: hidden;
	background: #e9eef0;
	box-shadow: var(--emev-cab-car-sombra, 0 26px 60px -30px rgba(0, 0, 0, .45));
}
.emev-cabecera__carrusel--placeholder {
	background: linear-gradient(135deg, #cfe3d6 0%, #a9c7b4 100%);
}
.emev-cabecera__slides { position: absolute; inset: 0; }
.emev-cabecera__slide {
	position: absolute; inset: 0; margin: 0;
	opacity: 0;
	transition: opacity .6s ease;
}
.emev-cabecera__slide.is-active { opacity: 1; }
.emev-cabecera__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.emev-cabecera__flecha {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 42px; height: 42px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0; border-radius: 50%;
	background: rgba(255,255,255,.85);
	color: var(--emev-tinta);
	cursor: pointer;
	box-shadow: 0 6px 18px -6px rgba(0,0,0,.35);
	opacity: 0; transition: opacity .2s ease, background .15s ease;
}
.emev-cabecera__carrusel:hover .emev-cabecera__flecha { opacity: 1; }
.emev-cabecera__flecha:hover { background: #fff; }
.emev-cabecera__flecha--prev { left: 14px; }
.emev-cabecera__flecha--next { right: 14px; }

.emev-cabecera__puntos {
	position: absolute; left: 0; right: 0; bottom: 16px;
	display: flex; justify-content: center; gap: 8px;
}
.emev-cabecera__punto {
	width: 8px; height: 8px; padding: 0;
	border: 0; border-radius: 50%;
	background: rgba(255,255,255,.6);
	cursor: pointer; transition: background .15s ease, transform .15s ease;
}
.emev-cabecera__punto.is-active { background: #fff; transform: scale(1.25); }

/* Responsive: columnas apiladas (imagen arriba por defecto; configurable en Distribución).
   Tableta: "auto" apila por debajo de 860px; "apilada" apila en toda la tableta;
   "columnas" mantiene las dos columnas hasta el corte de móvil. Móvil: siempre apiladas.
   Apiladas: el texto ocupa todo el ancho, el índice va a dos columnas en tableta
   y la imagen es apaisada (16:9 en tableta, 4:3 en móvil). */
@media (max-width: 999.98px) {
	.emev-cabecera__flecha { opacity: 1; }
}
@media (max-width: 860px) {
	.emev-cabecera:not(.emev-cabecera--tablet-columnas) .emev-cabecera__inner { grid-template-columns: 1fr; }
	.emev-cabecera:not(.emev-cabecera--tablet-columnas) .emev-cabecera__col--imagen { order: var(--emev-cab-orden-actual, -1); min-height: 0; }
	/* El texto usa todo el ancho (en dos columnas se limita a 560px). */
	.emev-cabecera:not(.emev-cabecera--tablet-columnas) .emev-cabecera__col--texto > * { max-width: none; }
	.emev-cabecera:not(.emev-cabecera--tablet-columnas) .emev-cabecera__subtitulo { max-width: var(--emev-cab-sub-ancho, 60ch); }
	/* Imagen apaisada en vez de un bloque altísimo. */
	.emev-cabecera:not(.emev-cabecera--tablet-columnas) .emev-cabecera__carrusel { height: auto; min-height: 0; aspect-ratio: var(--emev-cab-car-ratio-apilada, 16 / 9); }
}
@media (max-width: 999.98px) {
	.emev-cabecera--tablet-apilada .emev-cabecera__inner { grid-template-columns: 1fr; }
	.emev-cabecera--tablet-apilada .emev-cabecera__col--imagen { order: var(--emev-cab-orden-actual, -1); min-height: 0; }
	/* El texto usa todo el ancho (en dos columnas se limita a 560px). */
	.emev-cabecera--tablet-apilada .emev-cabecera__col--texto > * { max-width: none; }
	.emev-cabecera--tablet-apilada .emev-cabecera__subtitulo { max-width: var(--emev-cab-sub-ancho, 60ch); }
	/* Imagen apaisada en vez de un bloque altísimo. */
	.emev-cabecera--tablet-apilada .emev-cabecera__carrusel { height: auto; min-height: 0; aspect-ratio: var(--emev-cab-car-ratio-apilada, 16 / 9); }
}
/* Índice a dos columnas mientras haya sitio (tableta apilada). */
@media (min-width: 690px) and (max-width: 860px) {
	.emev-cabecera:not(.emev-cabecera--tablet-columnas) .emev-cabecera__indice-lista { columns: 2; column-gap: 40px; }
}
@media (min-width: 690px) and (max-width: 999.98px) {
	.emev-cabecera--tablet-apilada .emev-cabecera__indice-lista { columns: 2; column-gap: 40px; }
}
.emev-cabecera__indice-item { break-inside: avoid; }
@media (max-width: 689.98px) {
	.emev-cabecera.emev-cabecera .emev-cabecera__inner { grid-template-columns: 1fr; }
	.emev-cabecera.emev-cabecera .emev-cabecera__col--imagen { order: var(--emev-cab-orden-actual, -1); min-height: 0; }
	/* El texto usa todo el ancho (en dos columnas se limita a 560px). */
	.emev-cabecera.emev-cabecera .emev-cabecera__col--texto > * { max-width: none; }
	.emev-cabecera.emev-cabecera .emev-cabecera__subtitulo { max-width: var(--emev-cab-sub-ancho, 60ch); }
	/* Imagen apaisada en vez de un bloque altísimo. */
	.emev-cabecera.emev-cabecera .emev-cabecera__carrusel { height: auto; min-height: 0; aspect-ratio: var(--emev-cab-car-ratio-apilada, 16 / 9); }
	.emev-cabecera.emev-cabecera { --emev-cab-car-ratio-apilada: 4 / 3; }
}

/* ============================================================
   FAQ — Preguntas más comunes
   ============================================================ */
.emev-faq {
	/* Ancho fijo aunque el contenedor ajuste al contenido (columnas, grupos centrados):
	   si no, el bloque mide lo que sus preguntas y cambia al abrir una respuesta. */
	width: 100%;
	box-sizing: border-box;
	max-width: var(--emev-faq-ancho, var(--emev-max));
	margin-inline: auto;
	/* Sin relleno propio: el bloque se alinea con el resto de la página. */
	padding-inline: var(--emev-faq-pad-lados, 0);
	padding-block: var(--emev-faq-pad-bloque, var(--emev-bloque-pad, 0));
}
.emev-faq__lista {
	display: grid;
	grid-template-columns: repeat(var(--emev-faq-cols, 2), minmax(0, 1fr));
	gap: var(--emev-faq-gap, clamp(14px, 1.6vw, 22px));
	/* Cada tarjeta mide lo suyo: al abrir una, la vecina de su fila NO se estira. */
	align-items: start;
}
.emev-faq__item {
	background: var(--emev-faq-item-fondo, color-mix(in srgb, var(--emev-verde) 20%, #fff));
	border-radius: var(--emev-faq-item-radio, 10px);
	overflow: hidden;
	height: auto;
}
.emev-faq__pregunta {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: var(--emev-faq-preg-padding, clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 26px));
	font-family: var(--emev-faq-preg-fuente, var(--emev-font-body));
	font-weight: var(--emev-faq-preg-peso, 600);
	font-size: var(--emev-faq-preg-tamano, 1.0625rem); /* ~17px */
	color: var(--emev-faq-preg-color, var(--emev-tinta));
}
.emev-faq__pregunta::-webkit-details-marker { display: none; }
.emev-faq__pregunta::marker { content: ''; }
.emev-faq__chevron {
	flex: 0 0 auto;
	transition: transform .2s ease;
	color: var(--emev-faq-chevron-color, var(--emev-faq-preg-color, var(--emev-tinta)));
}
.emev-faq__item[open] .emev-faq__chevron { transform: rotate(180deg); }
.emev-faq__respuesta {
	padding: var(--emev-faq-resp-padding, 0 clamp(18px, 2vw, 26px) clamp(16px, 1.8vw, 22px));
	font-family: var(--emev-faq-resp-fuente, var(--emev-font-body));
	color: var(--emev-faq-resp-color, var(--emev-texto));
	font-size: var(--emev-faq-resp-tamano, 1rem);
	line-height: var(--emev-faq-resp-interlineado, var(--emev-interlineado, 1.65));
}
.emev-faq__respuesta > :first-child { margin-top: 0; }
.emev-faq__respuesta > :last-child { margin-bottom: 0; }

/* ---------- Responsive común ---------- */
@media (max-width: 782px) {
	.emev-faq__lista { grid-template-columns: 1fr; }
}

/* ---------- Editor ---------- */
.emev-editor-preview .emev-cabecera__indice-slot { display: none; }
.emev-panel-aviso { margin-bottom: 12px; }
.emev-heading-list { border: 1px solid #e0e0e0; border-radius: 6px; max-height: 320px; overflow: auto; }
.emev-heading-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid #f0f0f0; }
.emev-heading-row:last-child { border-bottom: 0; }
.emev-heading-row .emev-heading-nivel { font-size: 10px; font-weight: 700; color: #757575; background: #f0f0f0; border-radius: 3px; padding: 1px 5px; flex: 0 0 auto; }
.emev-heading-row .emev-heading-texto { flex: 1 1 auto; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emev-heading-row.is-oculto .emev-heading-texto { opacity: .45; text-decoration: line-through; }
.emev-estilo-campo { margin-bottom: 12px; }

/* Panel Distribución: etiqueta + iconos de dispositivo, como Stackable */
.emev-resp-campo { margin-bottom: 20px; }
.emev-resp-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.emev-resp-label { font-size: 13px; font-weight: 500; }
.emev-resp-disps { display: flex; gap: 2px; }
.emev-resp-disps .components-button.is-small { min-width: 26px; height: 26px; padding: 2px; }
.emev-resp-fila { display: flex; align-items: center; gap: 8px; }
.emev-resp-slider { flex: 1 1 auto; min-width: 0; }
.emev-resp-unidad { flex: 0 0 64px; }
.emev-resp-ayuda { font-size: 12px; color: #757575; margin: 6px 0 0; }
.emev-resp-campo .components-select-control { margin-bottom: 10px; }
.emev-resp-pie { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-top: 6px; }
.emev-resp-pie .emev-resp-ayuda { margin: 0; }
.emev-resp-pie .emev-resp-reset { flex: 0 0 auto; font-size: 12px; }
.emev-resp-pie .emev-resp-reset.is-oculto { visibility: hidden; }