/*
 * Web pública: portada, escaparate y ficha (includes/web.php y los patrones del tema).
 * Traduce diseno/web/maqueta/web.html. Colores, fuentes, radios, líneas y espacios salen de theme.json;
 * sin sombras ni degradados. Móvil primero; desde 900 px, escritorio.
 */
:root {
	--ta-tinta: var(--wp--preset--color--texto);
	--ta-papel: var(--wp--preset--color--fondo);
	--ta-niebla: var(--wp--preset--color--superficie);
	--ta-linea: var(--wp--preset--color--borde);
	--ta-gris: var(--wp--preset--color--texto-suave);
	--ta-acero: var(--wp--preset--color--acento);
	--ta-l: var(--wp--custom--linea--grosor) solid var(--ta-linea);
	--ta-toque: var(--wp--custom--toque-minimo);
	--ta-r-boton: var(--wp--custom--radio--boton);
	--ta-r-tarjeta: var(--wp--custom--radio--tarjeta);
	--ta-r-ficha: var(--wp--custom--radio--ficha);
	/* Escala de 4 px de la maqueta, sobre los espacios de theme.json */
	--ta-e1: var(--wp--preset--spacing--10);
	--ta-e2: var(--wp--preset--spacing--20);
	--ta-e3: calc(var(--wp--preset--spacing--10) * 3);
	--ta-e4: var(--wp--preset--spacing--30);
	--ta-e5: calc(var(--wp--preset--spacing--10) * 5);
	--ta-e6: var(--wp--preset--spacing--40);
	--ta-e8: var(--wp--preset--spacing--50);
	--ta-e10: calc(var(--wp--preset--spacing--10) * 10);
	/* Aire entre secciones: 56 px en el móvil, 104 en escritorio */
	/* El aire entre secciones manda en toda la página: el pie y cada bloque se cuelgan de aquí.
	   Daniel, 22-09: subido para que la portada respire (móvil 56 → 80, escritorio 104 → 152). */
	--ta-seccion: calc(var(--wp--preset--spacing--60) + var(--wp--preset--spacing--60));
	--ta-titular: var(--wp--preset--font-family--titulares);
	--ta-anchura: var(--wp--custom--titulares--anchura);
	--ta-i-mas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
	--ta-i-menos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
	--ta-i-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--ta-i-calendario: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='14.5' rx='1.5'/%3E%3Cpath d='M4 10h16M8.5 3.5v4M15.5 3.5v4'/%3E%3C/svg%3E");
	--ta-i-ojo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	--ta-i-sello: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.2 1.6 2.7-.1.8 2.6 2.2 1.6-.9 2.6.9 2.6-2.2 1.6-.8 2.6-2.7-.1L12 21l-2.2-1.6-2.7.1-.8-2.6-2.2-1.6.9-2.6-.9-2.6 2.2-1.6.8-2.6 2.7.1z'/%3E%3Cpath d='m8.8 12.2 2.2 2.2 4.3-4.5'/%3E%3C/svg%3E");
	--ta-i-persona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.8'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E");
	--ta-i-euro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 6.8a6.5 6.5 0 1 0 0 10.4'/%3E%3Cpath d='M4.5 10.5h8.5M4.5 13.5h8.5'/%3E%3C/svg%3E");
}
@media (min-width: 900px) {
	:root { --ta-seccion: calc(var(--wp--preset--spacing--70) + var(--wp--preset--spacing--70)); }
}

/* ---------- Base ---------- */
/* La cabecera, el contenido y el pie van pegados: el aire lo pone cada sección */
.wp-site-blocks > .ta-web, .wp-site-blocks > footer { margin-block-start: 0; }
.ta-web :where(p, h1, h2, h3, ul, ol, dl, dd, figure) { margin: 0; }
.ta-web .num { font-variant-numeric: tabular-nums; }
.ta-web .i, .cab-web .i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ta-web .i.s, .cab-web .i.s { width: 18px; height: 18px; }
.ta-web .i.est { width: 15px; height: 15px; fill: currentColor; stroke-width: 1.2; }
.ta-web a:focus-visible, .ta-web button:focus-visible, .ta-web summary:focus-visible, .ta-web select:focus-visible,
.cab-web a:focus-visible, .cab-web summary:focus-visible, .pie-web a:focus-visible { outline: 2px solid var(--ta-acero); outline-offset: 2px; }

/* Botones (los mismos que dibuja evento.css; este va antes, así «En tu evento» gana) */
.btn { box-sizing: border-box; min-height: 48px; padding: 0 var(--ta-e4); border: var(--wp--custom--linea--grosor) solid transparent; border-radius: var(--ta-r-boton); display: inline-flex; align-items: center; justify-content: center; gap: var(--ta-e2); font: inherit; font-weight: 600; font-size: 15px; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer; background: none; color: inherit; }
.btn.primario { background: var(--ta-acero); border-color: var(--ta-acero); color: var(--ta-papel); }
.btn.secundario { background: var(--ta-papel); border-color: var(--ta-tinta); color: var(--ta-tinta); }
.btn.suave { background: var(--ta-papel); border-color: var(--ta-linea); color: var(--ta-tinta); }
.btn.bajo { min-height: var(--ta-toque); padding: 0 var(--ta-e3); font-size: 14px; }
.btn .i { width: 18px; height: 18px; }
.ta-anadir:not(.en-evento)::before { content: ""; width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: var(--ta-i-mas) center / contain no-repeat; mask: var(--ta-i-mas) center / contain no-repeat; }
.enlace { color: var(--ta-acero); font-weight: 500; min-height: var(--ta-toque); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap; }
.icono-btn { width: var(--ta-toque); height: var(--ta-toque); display: grid; place-items: center; border-radius: var(--ta-r-boton); color: inherit; }
.cuenta-t { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--ta-r-ficha); background: var(--ta-tinta); color: var(--ta-papel); font-size: 12px; font-weight: 600; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }

/* ---------- Cabecera ---------- */
/* La cabecera se queda arriba al bajar (Daniel, 22-09): en el móvil el escaparate es largo y
   «Tu evento» y el menú tienen que estar siempre a mano. Por debajo del velo de la hoja (z 100).
   El sticky va en el <header> de la plantilla, no en .cab-web: su padre mide lo mismo que ella y
   el sticky no tendría recorrido por donde pegarse. */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.cab-web { position: relative; z-index: 50; background: var(--ta-papel); }
.cab-web .cab-fila { min-height: 56px; gap: var(--ta-e1); }
.cab-web .wp-block-site-logo { margin-right: auto; }
.cab-web .wp-block-site-logo a { display: flex; align-items: center; min-height: var(--ta-toque); }
.cab-web .volver { order: -1; margin-left: calc(var(--ta-e2) * -1); }
.cab-web a { color: var(--ta-tinta); text-decoration: none; }
.cab-web .menu-web { display: none; }
.cab-web .dcha { display: flex; align-items: center; gap: var(--ta-e1); }
/* Móvil: volver y menú a la izquierda, el logo, y «Tu evento» a la derecha. */
@media (max-width: 899px) {
	.cab-web .dcha { display: contents; }
	.cab-web .menu-movil { order: -1; margin-left: calc(var(--ta-e2) * -1); }
	.cab-web .volver { order: -2; }
	.cab-web .volver + .menu-web + .dcha .menu-movil { margin-left: 0; }
	.cab-web .tu-evento-m { order: 3; margin-left: auto; }
	.cab-web .wp-block-site-logo img { width: min(var(--wp--custom--logo--ancho), 148px); } /* que quepan volver, menú y «Tu evento» */
}
.cab-web .dcha > .paises { display: none; }
.paises { display: inline-flex; border: var(--ta-l); border-radius: var(--ta-r-ficha); }
.paises a { min-width: var(--ta-toque); height: var(--ta-toque); display: grid; place-items: center; border-radius: var(--ta-r-ficha); font-size: 13px; font-weight: 600; color: var(--ta-gris); }
.paises { gap: 2px; padding: 0 2px; }
/* La bandera elegida va rodeada con la tinta; la otra, algo apagada hasta pasar por encima. */
.paises .ta-bandera { display: block; width: 24px; height: 16px; border-radius: 2px; outline: 1px solid var(--ta-linea); }
.paises a:not([aria-current]) .ta-bandera { opacity: .55; }
.paises a:not([aria-current]):hover .ta-bandera, .paises a:focus-visible .ta-bandera { opacity: 1; }
.paises a[aria-current] { outline: 2px solid var(--ta-tinta); outline-offset: -2px; }
/* Contador de «Tu evento» (CONTRATO.md, punto 3): en el móvil, el icono con su número */
/* En el móvil, una pastilla con el icono y el número al lado: el icono se ve y el número no lo tapa. */
.tu-evento-m { position: relative; min-width: var(--ta-toque); height: var(--ta-toque); padding: 0 var(--ta-e2) 0 var(--ta-e3); display: inline-flex; align-items: center; gap: 6px; border: var(--ta-l); border-radius: var(--ta-r-ficha); font-size: 0; }
.tu-evento-m::before { content: ""; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--ta-i-calendario) center / contain no-repeat; mask: var(--ta-i-calendario) center / contain no-repeat; }
.tu-evento-m .num { position: static; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--ta-r-ficha); background: var(--ta-tinta); color: var(--ta-papel); font-size: 11px; font-weight: 600; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.tu-evento-m[hidden] { display: none; }
/* Menú del móvil, sin JS */
.menu-movil > summary { list-style: none; cursor: pointer; }
.menu-movil > summary::-webkit-details-marker { display: none; }
.menu-movil .i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.menu-movil-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--ta-papel); border-bottom: var(--ta-l); padding: var(--ta-e2) var(--ta-e5) var(--ta-e5); display: grid; gap: var(--ta-e4); }
.menu-movil-panel nav a { display: flex; align-items: center; min-height: 52px; font-size: 17px; font-weight: 500; border-bottom: var(--ta-l); }
.menu-movil-panel .paises { justify-self: start; }
@media (min-width: 900px) {
	.cab-web .cab-fila { min-height: 72px; }
	.cab-web .wp-block-site-logo { margin-right: 0; }
	.cab-web .volver, .menu-movil { display: none; }
	.cab-web .menu-web { display: flex; gap: var(--ta-e1); margin-left: var(--ta-e10); }
	.menu-web a { min-height: var(--ta-toque); padding: 0 var(--ta-e3); display: inline-flex; align-items: center; font-size: 15px; font-weight: 500; border-radius: var(--ta-r-boton); }
	.menu-web a[aria-current] { color: var(--ta-acero); }
	.cab-web .dcha { display: flex; margin-left: auto; gap: var(--ta-e3); }
	.cab-web .dcha > .paises { display: inline-flex; }
	.tu-evento-m { width: auto; min-height: var(--ta-toque); height: auto; padding: 0 var(--ta-e3) 0 var(--ta-e4); border: var(--ta-l); border-radius: var(--ta-r-ficha); display: inline-flex; align-items: center; gap: var(--ta-e2); font-size: 14px; font-weight: 600; }
	.tu-evento-m .num { position: static; min-width: 22px; height: 22px; padding: 0 6px; font-size: 12px; }
}

/* ---------- Pie ---------- */
.pie-web { margin-top: var(--ta-seccion); }
.pie-web .pie-dentro { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--ta-e4); padding-top: var(--ta-e8); }
.pie-web .pie-marca { grid-column: 1 / -1; margin-bottom: var(--ta-e5); }
.pie-web .wp-block-site-logo img { width: 150px; }
.pie-web .wp-block-site-logo a { display: flex; align-items: center; min-height: var(--ta-toque); }
.pie-web .iniciativa { margin: var(--ta-e2) 0 0; font-size: 14px; color: var(--ta-gris); }
.pie-web .pie-navs { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--ta-e5) var(--ta-e4); padding-bottom: var(--ta-e5); }
.pie-web h3 { margin: 0 0 var(--ta-e1); font-family: var(--wp--preset--font-family--texto); font-stretch: normal; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--ta-gris); }
.pie-web nav a { display: flex; align-items: center; min-height: var(--ta-toque); font-size: 15px; color: var(--ta-tinta); text-decoration: none; }
.pie-web .abajo { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; border-top: var(--ta-l); padding: var(--ta-e3) 0 var(--ta-e5); font-size: 13px; color: var(--ta-gris); }
.pie-web .abajo nav { display: flex; gap: var(--ta-e5); }
.pie-web .abajo nav a { font-size: 13px; color: var(--ta-gris); }
@media (min-width: 900px) {
	.pie-web .pie-dentro { grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--ta-e8); padding-top: var(--ta-e10); }
	.pie-web .pie-marca { grid-column: auto; margin: 0; }
	.pie-web .pie-navs { grid-column: auto; grid-template-columns: repeat(2, 200px); gap: var(--ta-e8); padding-bottom: var(--ta-e10); }
	.pie-web .abajo { flex-direction: row; justify-content: space-between; align-items: center; gap: var(--ta-e4); min-height: 64px; padding: 0; }
}

/* ---------- Portada: hero con vídeo ---------- */
.ta-web .hero.con-video { position: relative; overflow: hidden; padding-top: 0; padding-bottom: 0; background-color: var(--ta-tinta); color: var(--ta-papel); }
.ta-web .hero .ta-hero-video { position: absolute; inset: 0; margin: 0; max-width: none; }
.ta-web .hero .ta-hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Velo plano de tinta al 60 %: blanco sobre la pared blanca del vídeo ≈ 4,9:1 */
.ta-web .hero.con-video::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--ta-tinta) 60%, transparent); }
.ta-web .hero-txt { position: relative; z-index: 1; margin-top: 0; padding: var(--wp--preset--spacing--60) 0 var(--ta-e10); }
.ta-web .hero-txt > * { max-width: 760px; }
.ta-web .hero h1 { color: var(--ta-papel); font-size: var(--wp--preset--font-size--xx-grande); line-height: 1.04; letter-spacing: -0.025em; }
.ta-web .hero .apoyo { margin-top: var(--ta-e3); font-size: 16px; line-height: 1.45; max-width: 40ch; text-wrap: pretty; }
.ta-web .hero .unete { margin-top: var(--ta-e4); font-size: 14px; }
/* «Proponedme vosotros», justo bajo el buscador: para quien no sabe a quién elegir. */
.ta-web .hero .proponer { margin-top: var(--ta-e3); font-size: 15px; }
.ta-web .hero .unete { margin-top: 0; }
.ta-web .hero .proponer a { display: inline-flex; align-items: center; min-height: var(--ta-toque); color: var(--ta-papel); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ta-web .hero .unete a { display: inline-flex; align-items: center; min-height: var(--ta-toque); color: var(--ta-papel); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ta-web .hero .ta-hero-video { display: none; } }

/* El buscador: tres desplegables y «Buscar» */
.buscador-web { margin-top: var(--ta-e6); display: grid; grid-template-columns: 1fr; border: var(--wp--custom--linea--grosor) solid var(--ta-papel); border-radius: var(--ta-r-boton); background: var(--ta-papel); color: var(--ta-tinta); }
.bw-campo { position: relative; min-height: 68px; padding: var(--ta-e3) var(--ta-e4); display: flex; flex-direction: column; justify-content: center; gap: 3px; border-bottom: var(--ta-l); min-width: 0; cursor: pointer; }
.bw-campo:nth-of-type(3) { border-bottom: 0; }
.bw-campo .rot { font-size: 13px; font-weight: 600; }
.bw-campo .val { position: relative; display: flex; align-items: center; }
.bw-campo select, .campo-f select { -webkit-appearance: none; appearance: none; width: 100%; min-height: 28px; padding: 0 28px 0 0; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ta-tinta); text-overflow: ellipsis; cursor: pointer; }
.bw-campo:has(option[value=""]:checked) select, .campo-f:has(option[value=""]:checked) select { color: var(--ta-gris); }
.bw-campo select:focus-visible, .campo-f select:focus-visible { outline: 2px solid var(--ta-acero); outline-offset: 4px; border-radius: 2px; }
.bw-campo .i, .campo-f .i { position: absolute; right: 0; width: 18px; height: 18px; color: var(--ta-gris); pointer-events: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.buscador-web .btn { margin: 0 var(--ta-e2) var(--ta-e2); min-height: 52px; padding: 0 var(--ta-e6); font-size: 16px; }
@media (min-width: 900px) {
	.ta-web .hero-txt { padding: calc(var(--wp--preset--spacing--70) + var(--wp--preset--spacing--50)) 0 calc(var(--wp--preset--spacing--70) + var(--ta-e10)); }
	.ta-web .hero .apoyo { margin-top: var(--ta-e5); font-size: 19px; }
	.buscador-web { margin-top: var(--ta-e8); grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
	/* Hero más alto (casi toda la pantalla, con el texto centrado) y buscador más ancho que el titular (Daniel, 22-09). */
	.ta-web .hero.con-video .hero-txt { min-height: min(86svh, 880px); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
	.ta-web .hero-txt > .buscador-web { max-width: 1040px; width: 100%; }
	.buscador-web .bw-campo { padding-top: var(--ta-e4); padding-bottom: var(--ta-e4); }
	.bw-campo { min-height: 76px; border-bottom: 0; border-right: var(--ta-l); }
	.bw-campo:nth-of-type(3) { border-right: 0; }
	.buscador-web .btn { margin: var(--ta-e2); min-height: 58px; }
}

/* ---------- Franja de confianza ---------- */
.ta-web .confianza { background: var(--ta-niebla); border-top: var(--ta-l); border-bottom: var(--ta-l); padding-top: 0; padding-bottom: 0; }
.ta-web .confianza-lista { list-style: none; padding: 0; margin-top: 0; display: grid; grid-template-columns: 1fr 1fr; }
.ta-web .confianza-lista li { display: flex; align-items: flex-start; gap: var(--ta-e2); min-height: 72px; padding: var(--ta-e3) var(--ta-e2) var(--ta-e3) 0; font-size: 14px; font-weight: 500; line-height: 1.3; }
.ta-web .confianza-lista li:nth-child(even) { border-left: var(--ta-l); padding-left: var(--ta-e3); }
.ta-web .confianza-lista li:nth-child(n+3) { border-top: var(--ta-l); }
.ta-web .confianza-lista li::before { content: ""; width: 22px; height: 22px; flex: none; background: currentColor; -webkit-mask: var(--ta-i-ojo) center / contain no-repeat; mask: var(--ta-i-ojo) center / contain no-repeat; }
.ta-web .confianza-lista li:nth-child(2)::before { -webkit-mask-image: var(--ta-i-sello); mask-image: var(--ta-i-sello); }
.ta-web .confianza-lista li:nth-child(3)::before { -webkit-mask-image: var(--ta-i-persona); mask-image: var(--ta-i-persona); }
.ta-web .confianza-lista li:nth-child(4)::before { -webkit-mask-image: var(--ta-i-euro); mask-image: var(--ta-i-euro); }
@media (min-width: 900px) {
	.ta-web .confianza-lista { grid-template-columns: repeat(4, auto); justify-content: space-between; }
	.ta-web .confianza-lista li { align-items: center; gap: var(--ta-e3); min-height: 76px; padding: 0 var(--ta-e6); font-size: 15px; }
	.ta-web .confianza-lista li:first-child { padding-left: 0; }
	.ta-web .confianza-lista li:last-child { padding-right: 0; }
	.ta-web .confianza-lista li + li { border-left: var(--ta-l); }
	.ta-web .confianza-lista li:nth-child(n+3) { border-top: 0; }
	.ta-web .confianza-lista li:nth-child(even) { padding-left: var(--ta-e6); }
}

/* ---------- Secciones de la portada ---------- */
.ta-web .sec-web { padding-top: var(--ta-seccion); margin-top: 0; }
.ta-web .sec-web .cab { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--ta-e4); margin-bottom: var(--ta-e5); }
.ta-web .sec-web h2, .ta-web .faq-web h2 { font-size: var(--wp--preset--font-size--x-grande); line-height: 1.08; letter-spacing: -0.02em; }
.ta-web .sec-web > h2 { margin-bottom: var(--ta-e6); }
@media (min-width: 900px) {
	.ta-web .sec-web .cab, .ta-web .sec-web > h2 { margin-bottom: var(--ta-e10); }
}

/* Categorías: la foto 4:3 y el nombre debajo; la tarjeta entera es el enlace */
.cats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ta-e5) var(--ta-e2); }
.cat { display: block; color: var(--ta-tinta); text-decoration: none; }
.cat .foto { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--ta-r-tarjeta); background: var(--ta-niebla); }
.cat .foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat .nom-cat { display: block; margin-top: var(--ta-e2); font-family: var(--ta-titular); font-stretch: var(--ta-anchura); font-size: 16px; line-height: 1.15; letter-spacing: -0.01em; }
@media (min-width: 600px) {
	.cats { grid-template-columns: repeat(4, 1fr); gap: var(--ta-e6) var(--ta-e4); }
	.cat .nom-cat { margin-top: var(--ta-e3); font-size: 22px; }
}

/* Cómo funciona */
.ta-web .pasos { display: grid; grid-template-columns: 1fr; gap: var(--ta-e6); }
.ta-web .paso { display: grid; grid-template-columns: 48px 1fr; gap: 0 var(--ta-e3); align-content: start; border-top: var(--wp--custom--linea--grosor) solid var(--ta-tinta); padding-top: var(--ta-e4); margin: 0; }
.ta-web .paso > * { margin: 0; }
.ta-web .paso .ta-paso-foto { grid-column: 1 / -1; margin-bottom: var(--ta-e4); }
.ta-web .paso .ta-paso-foto img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--ta-r-tarjeta); background: var(--ta-niebla); }
.ta-web .paso .n { grid-row: span 2; font-family: var(--ta-titular); font-stretch: var(--ta-anchura); font-size: 32px; line-height: 1; font-variant-numeric: tabular-nums; }
.ta-web .paso h3 { margin-top: 2px; font-family: var(--wp--preset--font-family--texto); font-stretch: normal; font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.ta-web .paso p:not(.n) { margin-top: var(--ta-e1); color: var(--ta-gris); font-size: 15px; max-width: 34ch; text-wrap: pretty; }
@media (min-width: 900px) {
	.ta-web .pasos { grid-template-columns: repeat(3, 1fr); gap: var(--ta-e8); }
	.ta-web .paso { display: block; padding-top: var(--ta-e5); }
	.ta-web .paso .ta-paso-foto { margin-bottom: var(--ta-e5); }
	.ta-web .paso .ta-paso-foto img { aspect-ratio: 4 / 3; }
	.ta-web .paso .n { font-size: 48px; }
	.ta-web .paso h3 { margin-top: var(--ta-e6); font-size: 20px; }
	.ta-web .paso p:not(.n) { margin-top: var(--ta-e2); font-size: 16px; }
}

/* Bloque para artistas */
.ta-web .para-artistas { margin-top: var(--ta-seccion); background: var(--ta-niebla); border-top: var(--ta-l); border-bottom: var(--ta-l); }
.ta-web .pa-dentro { padding: var(--ta-e10) 0; }
.ta-web .ta-pa-foto { margin: 0 0 var(--ta-e6); }
.ta-web .ta-pa-foto img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--ta-r-tarjeta); background: var(--ta-linea); }
.ta-web .pa-txt > * { margin: 0; }
.ta-web .pa-txt h2 { font-size: var(--wp--preset--font-size--grande); line-height: 1.05; letter-spacing: -0.02em; }
.ta-web .pa-txt .gratis { margin-top: var(--ta-e5); font-size: 18px; font-weight: 600; line-height: 1.3; }
.ta-web .con-check { list-style: none; padding: 0; margin-top: var(--ta-e4); display: grid; gap: var(--ta-e3); font-size: 15px; color: var(--ta-gris); }
.ta-web .con-check li { display: flex; gap: var(--ta-e3); }
.ta-web .con-check li::before { content: ""; width: 20px; height: 20px; margin-top: 1px; flex: none; background: var(--ta-tinta); -webkit-mask: var(--ta-i-ok) center / contain no-repeat; mask: var(--ta-i-ok) center / contain no-repeat; }
.ta-web .pa-txt .wp-block-buttons { margin-top: var(--ta-e6); }
.ta-web .pa-txt .wp-block-button { width: 100%; }
.ta-web .pa-txt .wp-block-button__link { width: 100%; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--ta-e6); background: var(--ta-papel); color: var(--ta-tinta); border: var(--wp--custom--linea--grosor) solid var(--ta-tinta); border-radius: var(--ta-r-boton); font-size: 15px; font-weight: 600; text-decoration: none; }
@media (min-width: 900px) {
	.ta-web .pa-dentro { display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: 80px; align-items: center; padding: calc(var(--wp--preset--spacing--70) + var(--ta-e2)) 0; }
	.ta-web .ta-pa-foto { margin: 0; }
	.ta-web .ta-pa-foto img { aspect-ratio: 4 / 3; }
	.ta-web .pa-txt h2 { font-size: var(--wp--preset--font-size--xx-grande); }
	.ta-web .pa-txt .gratis { margin-top: var(--ta-e8); font-size: 22px; }
	.ta-web .con-check { font-size: 16px; }
	.ta-web .pa-txt .wp-block-button { width: auto; }
}

/* Preguntas frecuentes: acordeón con <details> */
.ta-web .faq-web { padding-top: var(--ta-seccion); margin-top: 0; }
.ta-web .faq-web > h2 { margin-bottom: var(--ta-e4); }
.ta-web .acordeon > * { margin: 0; }
.ta-web .acordeon details { border-top: var(--ta-l); }
.ta-web .acordeon details:last-child { border-bottom: var(--ta-l); }
.ta-web .acordeon summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--ta-e4); min-height: 60px; font-size: 16px; font-weight: 600; cursor: pointer; }
.ta-web .acordeon summary::-webkit-details-marker { display: none; }
.ta-web .acordeon summary::after { content: ""; width: 22px; height: 22px; flex: none; background: var(--ta-gris); -webkit-mask: var(--ta-i-mas) center / contain no-repeat; mask: var(--ta-i-mas) center / contain no-repeat; }
.ta-web .acordeon details[open] summary::after { -webkit-mask-image: var(--ta-i-menos); mask-image: var(--ta-i-menos); }
.ta-web .acordeon details p { margin: 0; padding: 0 0 var(--ta-e5); color: var(--ta-gris); font-size: 15px; line-height: 1.55; max-width: 64ch; text-wrap: pretty; }
@media (min-width: 900px) {
	.ta-web .faq-web { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 80px; align-items: start; }
	.ta-web .faq-web > h2 { margin: 0; }
	.ta-web .acordeon summary { min-height: 68px; font-size: 18px; }
	.ta-web .acordeon details p { padding-right: var(--ta-e10); font-size: 16px; }
}

/* ---------- Tarjeta de artista (destacados y escaparate) ---------- */
/* En el móvil, en fila: la foto a la izquierda y el botón a todo el ancho */
.rejilla-ta { display: block; }
.ta { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 var(--ta-e4); padding: var(--ta-e4) 0; border-bottom: var(--ta-l); min-width: 0; }
.ta .foto { width: 96px; height: 96px; }
.foto { display: block; overflow: hidden; border-radius: var(--ta-r-tarjeta); background: var(--ta-linea); }
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto.sin-foto { display: grid; place-items: center; font-family: var(--ta-titular); font-stretch: var(--ta-anchura); font-size: 22px; color: var(--ta-gris); }
.ta .nom { display: block; margin-top: 2px; font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--ta-tinta); text-decoration: none; overflow-wrap: anywhere; }
.ta .nom:hover { text-decoration: underline; }
.ta .rol { margin: 0; font-size: 14px; color: var(--ta-gris); }
.ta .meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: var(--ta-e1); font-size: 14px; }
.ta .meta:empty { display: none; }
.ta > .btn { grid-column: 1 / -1; margin-top: var(--ta-e3); width: 100%; }
.nota { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.nota b { font-weight: 600; }
.nota span { color: var(--ta-gris); }
.desde { font-size: 14px; color: var(--ta-gris); font-variant-numeric: tabular-nums; white-space: nowrap; }
.desde b { color: var(--ta-tinta); font-weight: 600; }
@media (min-width: 600px) {
	.rejilla-ta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ta-e8) var(--ta-e6); }
	.ta { display: flex; flex-direction: column; padding: 0; border-bottom: 0; }
	.ta .foto { width: 100%; height: auto; aspect-ratio: 4 / 3; }
	.ta .foto.sin-foto { font-size: 30px; }
	.ta .nom { margin-top: var(--ta-e3); }
	.ta .meta { flex-direction: row; justify-content: space-between; align-items: center; gap: var(--ta-e2); min-height: 22px; margin: var(--ta-e2) 0 var(--ta-e3); }
	.ta .meta:empty { display: flex; }
	.ta > .btn { margin-top: auto; }
}
@media (min-width: 900px) {
	.rejilla-ta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.rejilla-ta.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ta-e10) var(--ta-e8); }
}

/* ---------- Escaparate ---------- */
.ta-escaparate .res-cab { padding: var(--ta-e4) 0 var(--ta-e1); }
.fichas-quitar { display: flex; align-items: flex-start; gap: var(--ta-e2); flex-wrap: wrap; }
.ficha.quitar { min-height: var(--ta-toque); padding: 0 6px 0 var(--ta-e4); border: var(--wp--custom--linea--grosor) solid var(--ta-niebla); border-radius: var(--ta-r-ficha); background: var(--ta-niebla); display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; white-space: nowrap; color: var(--ta-tinta); text-decoration: none; }
.ficha.quitar .x { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--ta-r-ficha); }
.ficha.quitar:hover .x { background: var(--ta-linea); }
.ta-filtros > summary { list-style: none; }
.ta-filtros > summary::-webkit-details-marker { display: none; }
.btn-filtros-t { min-height: var(--ta-toque); padding: 0 var(--ta-e4); border: var(--ta-l); border-radius: var(--ta-r-ficha); display: inline-flex; align-items: center; gap: var(--ta-e2); font-size: 14px; font-weight: 600; background: var(--ta-papel); cursor: pointer; }
.btn-filtros-t .cuenta-t { min-width: 20px; height: 20px; font-size: 11px; }
.ta-filtros[open] > summary { border-color: var(--ta-tinta); }
.ta-filtros-form { margin-top: var(--ta-e2); border: var(--ta-l); border-radius: var(--ta-r-tarjeta); padding: var(--ta-e4); display: grid; gap: var(--ta-e4); background: var(--ta-papel); width: min(100vw - 2 * var(--ta-e4), 360px); }
.campo-f { display: grid; gap: 6px; }
.campo-f .rot { font-size: 14px; font-weight: 500; }
.campo-f .val { position: relative; display: flex; align-items: center; }
.campo-f select { min-height: 48px; padding: 0 40px 0 var(--ta-e3); background: var(--ta-niebla); border: var(--wp--custom--linea--grosor) solid var(--ta-niebla); border-radius: var(--ta-r-boton); }
.campo-f .i { right: var(--ta-e3); }
.ta-filtros-form .btn { width: 100%; }
.ta-escaparate h1 { margin-top: var(--ta-e4); font-size: var(--wp--preset--font-size--x-grande); line-height: 1.05; letter-spacing: -0.02em; }
.ta-escaparate .rejilla-ta { margin-top: var(--ta-e2); }
.mas-res { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--ta-e4); padding-top: var(--ta-e10); }
.mas-res .pag { font-size: 14px; color: var(--ta-gris); }
/* Vacío (s2b) */
.vacio { padding: var(--ta-e10) 0 0; }
.icono-cuadro { width: 48px; height: 48px; margin-bottom: var(--ta-e5); border-radius: var(--ta-r-tarjeta); background: var(--ta-niebla); display: grid; place-items: center; }
.ta-web .vacio h1 { font-size: var(--wp--preset--font-size--grande); line-height: 1.15; }
.ta-web .vacio p { margin-top: var(--ta-e2); color: var(--ta-gris); max-width: 34ch; }
.vacio .acciones { margin-top: var(--ta-e6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--ta-e2) var(--ta-e5); }
@media (min-width: 900px) {
	.ta-escaparate .res-cab { padding: var(--ta-e8) 0; }
	.ta-escaparate h1 { margin-top: var(--ta-e6); font-size: calc((var(--wp--preset--font-size--x-grande) + var(--wp--preset--font-size--xx-grande)) / 2); }
	.ta-escaparate .rejilla-ta { margin-top: 0; }
	.ta-filtros { position: relative; }
	.ta-filtros-form { position: absolute; z-index: 20; top: 100%; left: 0; }
	.vacio { padding-top: var(--ta-e6); }
}

/* ---------- Ficha ---------- */
.ta-ficha .ficha-principal { display: flex; flex-direction: column; min-width: 0; }
.galeria-f { display: grid; gap: var(--ta-e2); margin-inline: calc(var(--wp--style--root--padding-left, var(--ta-e4)) * -1); }
.galeria-f .principal { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--ta-linea); }
.galeria-f .principal.sin-foto { display: grid; place-items: center; font-family: var(--ta-titular); font-stretch: var(--ta-anchura); font-size: 40px; color: var(--ta-gris); }
.galeria-f .minis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ta-e2); padding: 0 var(--wp--style--root--padding-left, var(--ta-e4)); }
.galeria-f .mini { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--ta-r-tarjeta); background: var(--ta-linea); }
.galeria-f .mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria-f .mini.sel { outline: 2px solid var(--ta-tinta); outline-offset: -2px; }
.ficha-id { padding-top: var(--ta-e5); }
.ta-web .ficha-id h1 { font-size: var(--wp--preset--font-size--x-grande); line-height: 1.04; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ficha-id .disc { margin-top: var(--ta-e2); font-size: 15px; }
.nota-media { display: inline-flex; align-items: center; gap: 6px; min-height: var(--ta-toque); color: var(--ta-tinta); text-decoration: none; font-size: 15px; }
.nota-media b { font-weight: 600; }
.nota-media span { color: var(--ta-gris); text-decoration: underline; text-underline-offset: 3px; }
.ficha-id .zonas { margin-top: var(--ta-e2); display: grid; gap: var(--ta-e1); font-size: 14px; }
.ficha-id .zonas div { display: flex; gap: var(--ta-e2); align-items: flex-start; }
.ficha-id .zonas .i { width: 18px; height: 18px; color: var(--ta-gris); margin-top: 1px; }
.ficha-id .zonas span { color: var(--ta-gris); }
.ficha-id .zonas b { font-weight: 500; }
.ta-web .frase { margin-top: var(--ta-e6); font-family: var(--ta-titular); font-stretch: var(--ta-anchura); font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
.descripcion { margin-top: var(--ta-e4); font-size: 15px; line-height: 1.6; max-width: 62ch; text-wrap: pretty; }
.descripcion p + p { margin-top: var(--ta-e3); }
.guiados { margin-top: var(--ta-e6); }
.guiado { border-top: var(--ta-l); padding: var(--ta-e5) 0; }
.ta-web .guiado h2 { font-family: var(--wp--preset--font-family--texto); font-stretch: normal; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.guiado p { margin-top: var(--ta-e2); font-size: 15px; line-height: 1.6; max-width: 62ch; text-wrap: pretty; }
.videos { margin-top: var(--ta-e6); display: grid; gap: var(--ta-e2); }
.video-f { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--ta-r-tarjeta); background: var(--ta-tinta); }
.bloque-resenas { margin-top: var(--ta-e4); }
.ta-web .bloque-resenas h2 { font-size: var(--wp--preset--font-size--grande); }
/* Las dos acciones: en el móvil, una barra fija abajo */
.lateral { position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; background: var(--ta-papel); border-top: var(--ta-l); padding: var(--ta-e3) var(--ta-e5) max(var(--ta-e3), env(safe-area-inset-bottom)); }
.lateral .quien, .lateral .datos-l, .lateral .nota-l { display: none; }
.lateral .acciones { display: flex; gap: var(--ta-e3); } /* en el orden del HTML: el tabulador va como se ve */
.lateral .acciones .btn { flex: 1; min-width: 0; padding: 0 var(--ta-e3); white-space: normal; text-align: center; }
.ta-ficha-pagina { padding-bottom: 88px; }
/* Con «Tu evento» abierto abajo, su barra ocupa ese sitio (pantalla 4 de la maqueta) */
/* Con el artista ya en «Tu evento», la barra ocupa el sitio de sus acciones (s4); si no, las acciones se quedan (s3) y la barra se aparta. */
body.ta-con-barra.ta-ficha-en-evento .lateral { display: none; }
body.ta-con-barra:not(.ta-ficha-en-evento):has(.lateral) .ta-barra-evento { display: none; }
body.ta-con-barra .ta-ficha-pagina { padding-bottom: 0; }
@media (min-width: 900px) {
	.ta-ficha-pagina, body.ta-con-barra .ta-ficha-pagina { padding-bottom: 0; }
	.ficha-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 80px; padding-top: var(--ta-e8); align-items: start; }
	.ficha-id { order: -1; padding-top: 0; }
	.ta-web .ficha-id h1 { font-size: var(--wp--preset--font-size--xx-grande); }
	.ficha-id .disc { font-size: 17px; }
	.ficha-id .zonas { margin-top: var(--ta-e3); font-size: 15px; }
	/* La galería es el primer hijo del HTML (el titular sube con `order`), y WordPress le quita el
	   margen a todo primer hijo: se repone con un selector que gane al suyo. */
	.ta-ficha .ficha-principal > .galeria-f { margin: var(--ta-e6) 0 0; }
	.galeria-f .principal { aspect-ratio: 16 / 9; border-radius: var(--ta-r-tarjeta); }
	.galeria-f .minis { grid-template-columns: repeat(6, 1fr); padding: 0; }
	.ta-web .frase { margin-top: var(--ta-e8); font-size: 26px; }
	.descripcion, .guiado p { font-size: 17px; }
	.guiado p { font-size: 16px; }
	.guiados, .videos { margin-top: var(--ta-e8); }
	.bloque-resenas { margin-top: var(--ta-e10); }
	.ta-web .bloque-resenas h2 { font-size: 32px; }
	body.ta-con-barra:not(.ta-ficha-en-evento):has(.lateral) .ta-barra-evento { display: block; } /* en escritorio caben las dos */
	.lateral, body.ta-con-barra.ta-ficha-en-evento .lateral { display: block; position: sticky; z-index: auto; top: var(--ta-e6); border: var(--ta-l); border-radius: var(--ta-r-tarjeta); padding: var(--ta-e6); }
	.lateral .quien { display: flex; gap: var(--ta-e3); align-items: center; }
	.lateral .quien .foto { width: 48px; height: 48px; flex: none; }
	.lateral .quien .foto.sin-foto { font-size: 15px; }
	.lateral .quien strong { display: block; font-size: 17px; font-weight: 600; line-height: 1.25; }
	.lateral .quien span { font-size: 14px; color: var(--ta-gris); }
	.lateral .datos-l { display: block; margin: var(--ta-e4) 0 0; border-top: var(--ta-l); }
	.lateral .datos-l > div { display: flex; justify-content: space-between; align-items: center; min-height: 48px; border-bottom: var(--ta-l); font-size: 14px; }
	.lateral .datos-l dt { color: var(--ta-gris); }
	.lateral .datos-l dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
	.lateral .acciones { display: grid; gap: var(--ta-e3); margin-top: var(--ta-e5); }
	.lateral .acciones .btn { width: 100%; }
	.lateral .nota-l { display: flex; gap: var(--ta-e2); margin: var(--ta-e4) 0 0; font-size: 13px; color: var(--ta-gris); }
	.lateral .nota-l .i { width: 16px; height: 16px; margin-top: 1px; }
}

@media (prefers-reduced-motion: reduce) {
	.ta-web *, .cab-web *, .pie-web * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Lo que escribe el artista puede traer palabras larguísimas (o un enlace pegado): que no ensanchen la página. */
.ta-ficha h1, .ta-ficha .frase, .ta-ficha .descripcion, .ta-ficha .guiado p, .ta-web .nom, .lateral .quien strong { overflow-wrap: anywhere; }

/* Barra de desplazamiento de la página: oculta, sin hueco ni fondo (Daniel, 22-09). Se sigue desplazando con rueda, dedo y teclado. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { width: 0; height: 0; }

/* ---------- Secciones nuevas de la portada, «Cómo funciona» y blog (includes/paginas.php) ---------- */
.lead-sec { margin-top: var(--ta-e3); font-size: 17px; color: var(--ta-gris); max-width: 62ch; text-wrap: pretty; }
.nota-sec { margin-top: var(--ta-e4); font-size: 14px; color: var(--ta-gris); }

/* Para qué eventos */
.ev-cards { margin-top: var(--ta-e5); display: grid; grid-template-columns: 1fr; gap: var(--ta-e5); }
.ev-card { display: block; color: var(--ta-tinta); text-decoration: none; }
.ev-card .foto { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--ta-r-tarjeta); background: var(--ta-niebla); }
.ev-card .foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ev-card .nom { display: block; margin-top: var(--ta-e3); font-family: var(--ta-titular); font-stretch: var(--ta-anchura); font-size: 20px; line-height: 1.15; }
.ev-card .txt { display: block; margin-top: var(--ta-e1); font-size: 15px; color: var(--ta-gris); text-wrap: pretty; }

/* Qué incluye */
.incluye-lista { margin-top: var(--ta-e5); display: grid; grid-template-columns: 1fr; gap: var(--ta-e5); }
.incluye-lista .punto { border-top: var(--ta-l); padding-top: var(--ta-e4); }
.incluye-lista .punto h3 { font-size: 18px; line-height: 1.25; }
.incluye-lista .punto p { margin-top: var(--ta-e2); font-size: 15px; color: var(--ta-gris); text-wrap: pretty; }

/* Dónde trabajamos */
.paises-b { margin-top: var(--ta-e5); display: grid; grid-template-columns: 1fr; gap: var(--ta-e5); }
.pais-b { border-top: var(--ta-l); padding-top: var(--ta-e4); }
.pais-b h3 { display: flex; align-items: center; gap: var(--ta-e3); font-size: 20px; }
.pais-b .ta-bandera { width: 28px; height: 19px; border-radius: 2px; outline: 1px solid var(--ta-linea); }
.pais-b p { margin-top: var(--ta-e2); font-size: 15px; color: var(--ta-gris); }
.pais-b .enlace { margin-top: var(--ta-e3); display: inline-flex; align-items: center; min-height: var(--ta-toque); }

/* ¿Organizas algo? y la misma llamada en el blog */
.ta-organizas { position: relative; }
.ta-organizas > .foto { display: block; overflow: hidden; border-radius: var(--ta-r-tarjeta); aspect-ratio: 3 / 2; background: var(--ta-niebla); }
.ta-organizas > .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.llamada { margin-top: var(--ta-e6); border: var(--ta-l); border-radius: var(--ta-r-tarjeta); padding: var(--ta-e6); }
.llamada h2 { font-size: 24px; line-height: 1.1; }
.llamada p { margin-top: var(--ta-e3); font-size: 16px; color: var(--ta-gris); max-width: 52ch; text-wrap: pretty; }
.llamada .acciones { margin-top: var(--ta-e5); display: flex; flex-wrap: wrap; gap: var(--ta-e3); }
.llamada .promesa { margin-top: var(--ta-e3); font-size: 13px; }

/* Blog: índice, tarjetas y artículo */
.ta-blog, .ta-articulo { padding: var(--ta-e8) 0 var(--ta-e10); }
.ta-blog > h1, .ta-articulo > h1 { font-size: 34px; line-height: 1.06; letter-spacing: -0.02em; }
.cats-blog { margin-top: var(--ta-e5); display: flex; flex-wrap: wrap; gap: var(--ta-e2); }
.cats-blog .ficha { min-height: var(--ta-toque); padding: 0 var(--ta-e4); border: var(--ta-l); border-radius: var(--ta-r-ficha); display: inline-flex; align-items: center; font-size: 14px; font-weight: 500; color: var(--ta-tinta); text-decoration: none; }
.cats-blog .ficha.activa { background: var(--ta-tinta); border-color: var(--ta-tinta); color: var(--ta-papel); }
/* Sin foto, la tarjeta no deja un hueco gris. */
.art .foto:empty, .ev-card .foto:empty { display: none; }
.arts { margin-top: var(--ta-e6); display: grid; grid-template-columns: 1fr; gap: var(--ta-e8); }
.art a { display: block; color: var(--ta-tinta); text-decoration: none; }
.art .foto { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--ta-r-tarjeta); background: var(--ta-niebla); }
.art .foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat-et { display: inline-block; margin-top: var(--ta-e3); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ta-gris); }
.art h3 { margin-top: var(--ta-e1); font-size: 20px; line-height: 1.2; }
.art .entradilla { margin-top: var(--ta-e2); font-size: 15px; color: var(--ta-gris); text-wrap: pretty; }
.art .fecha { display: block; margin-top: var(--ta-e2); font-size: 13px; color: var(--ta-gris); }
.art.destacado { margin-top: var(--ta-e6); }
.art.destacado h3 { font-size: 26px; }
.ta-articulo .miga { display: flex; align-items: center; gap: var(--ta-e1); font-size: 14px; color: var(--ta-gris); }
.ta-articulo .miga a { color: inherit; min-height: var(--ta-toque); display: inline-flex; align-items: center; }
.ta-articulo .cat-et { margin-top: var(--ta-e4); }
.entradilla-art { margin-top: var(--ta-e3); font-size: 18px; color: var(--ta-gris); max-width: 62ch; text-wrap: pretty; }
.ta-articulo .firma { margin-top: var(--ta-e4); font-size: 14px; color: var(--ta-gris); }
.foto-art { margin: var(--ta-e6) 0 0; }
.foto-art img { width: 100%; height: auto; border-radius: var(--ta-r-tarjeta); display: block; }
.cuerpo-art { margin-top: var(--ta-e6); max-width: 68ch; font-size: 17px; line-height: 1.6; }
.cuerpo-art > * + * { margin-top: var(--ta-e4); }
.cuerpo-art h2 { margin-top: var(--ta-e8); font-size: 24px; line-height: 1.15; }
.cuerpo-art h3 { margin-top: var(--ta-e6); font-size: 19px; }
.cuerpo-art ul, .cuerpo-art ol { padding-left: var(--ta-e5); }
.cuerpo-art li + li { margin-top: var(--ta-e2); }
.cuerpo-art a { color: var(--ta-acero); }
.ta-articulo .rel { margin-top: var(--ta-e10); border-top: var(--ta-l); padding-top: var(--ta-e6); }

/* «Cómo funciona» */
.ta-como-pagina .como-cab { padding: var(--ta-e8) 0 0; }
.ta-como-pagina .como-cab h1 { font-size: 36px; line-height: 1.04; letter-spacing: -0.02em; }
.como-foto { margin: var(--ta-e6) 0 0; }
.como-foto img { width: 100%; height: auto; border-radius: var(--ta-r-tarjeta); display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.pasos-l { margin-top: var(--ta-e5); display: grid; gap: var(--ta-e8); }
.paso-l .ta-paso-foto img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--ta-r-tarjeta); }
.paso-l .n { margin-top: var(--ta-e4); font-family: var(--ta-titular); font-stretch: var(--ta-anchura); font-size: 32px; line-height: 1; }
.paso-l h3 { margin-top: var(--ta-e2); font-size: 20px; }
.paso-l p { margin-top: var(--ta-e2); color: var(--ta-gris); text-wrap: pretty; }
.maneras { margin-top: var(--ta-e5); display: grid; gap: var(--ta-e5); align-items: stretch; }
/* Las dos tarjetas miden lo mismo y sus botones quedan a la misma altura, aunque un texto sea más largo. */
.manera { display: flex; flex-direction: column; border: var(--ta-l); border-radius: var(--ta-r-tarjeta); padding: var(--ta-e5); }
.manera .acc { margin-top: auto; padding-top: var(--ta-e4); }
/* El espacio entre bloques de WordPress añadiría un margen a la segunda tarjeta y la bajaría. */
.maneras > * + *, .incluye-lista > * + *, .paises-b > * + *, .ev-cards > * + *, .pasos-l > * + * { margin-top: 0; }
.manera h3 { font-size: 20px; }
.manera p { margin-top: var(--ta-e3); color: var(--ta-gris); text-wrap: pretty; }
.manera .btn { width: 100%; justify-content: center; }
.ta-como-pagina section p { max-width: 68ch; }
.ta-como-pagina .como-elegimos p, .ta-como-pagina .como-precio p, .ta-como-pagina .como-cambia p { margin-top: var(--ta-e3); font-size: 16px; }

@media (min-width: 900px) {
	.ev-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ta-e6); }
	.incluye-lista, .paises-b { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ta-e6); }
	.paises-b { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.arts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ta-e8) var(--ta-e6); }
	/* Una sola rejilla, la del enlace: con otra por fuera, el enlace se quedaba en la primera
	   columna y el destacado ocupaba media página. */
	.art.destacado a { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--ta-e8); align-items: center; }
	.art.destacado .foto { grid-row: span 4; }
	.art.destacado:has(.foto:empty) a { display: block; } /* sin foto, a una columna */
	.art.destacado h3 { font-size: 32px; }
	.ta-blog > h1, .ta-articulo > h1 { font-size: 48px; }
	.ta-articulo { max-width: 100%; }
	.pasos-l { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ta-e6); }
	.maneras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ta-e6); }
	.ta-como-pagina .como-cab h1 { font-size: 52px; }
	.llamada { padding: var(--ta-e8); }
	.llamada h2 { font-size: 30px; }
	.ta-organizas > .foto { aspect-ratio: 21 / 9; }
}

/* =====================================================================
   Movimiento (Daniel, 22-09-2026): que todo entre y salga suave, sin que
   parezca una web que hace cosas. Tres reglas:
   1. Nada dura más de 240 ms: si se nota que hay animación, sobra.
   2. Solo se animan transform y opacity, que no obligan al navegador a
      recalcular la página (nada de animar alto, ancho ni márgenes).
   3. Quien pide menos movimiento en su sistema no ve ninguna: el bloque
      de prefers-reduced-motion de arriba las apaga todas.
   ===================================================================== */

/* Cambio de página: el navegador funde la salida con la entrada. Donde no
   está soportado (Firefox hoy), la navegación es la de siempre. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
	::view-transition-old(root) { animation: ta-salir 160ms ease both; }
	::view-transition-new(root) { animation: ta-entrar 220ms ease both; }
	/* La cabecera y el pie no parpadean en cada cambio: se quedan quietos. */
	.cab-web, .pie-web { view-transition-name: ta-fijo; }
}
@keyframes ta-entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ta-salir { from { opacity: 1; } to { opacity: 0; } }

/* Lo que se toca responde al momento. */
.ta-web .btn, .cab-web .btn, .art, .cat-tarjeta, .ev-tarjeta, .ta-web .ficha, .paises a, .mini {
	transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease, opacity 140ms ease;
}
.ta-web .btn:active, .cab-web .btn:active, .paises a:active { transform: scale(.97); }
@media (hover: hover) {
	.art:hover, .cat-tarjeta:hover, .ev-tarjeta:hover { transform: translateY(-2px); }
	.art:hover .foto img, .cat-tarjeta:hover img, .ev-tarjeta:hover img { transform: scale(1.03); }
}
.art .foto img, .cat-tarjeta img, .ev-tarjeta img { transition: transform 320ms cubic-bezier(.22, 1, .36, 1); }
.art .foto, .cat-tarjeta, .ev-tarjeta { overflow: hidden; } /* que el zoom de la foto no se salga */

/* Las secciones y las tarjetas entran al llegar a ellas. Lo dispara assets/entradas.js, que solo
   añade `ta-anima` al <html> cuando puede hacerlo bien: sin JavaScript, o con «menos movimiento»
   puesto en el sistema, este bloque no aplica y la web se ve entera desde el primer momento. */
html.ta-anima .ta-web .sec-web,
html.ta-anima .ta-web .llamada,
html.ta-anima .ta-web .art,
html.ta-anima .ta-web .cat-tarjeta,
html.ta-anima .ta-web .ev-tarjeta,
html.ta-anima .ta-web .paso-l,
html.ta-anima .ta-web .manera,
html.ta-anima .bloque-resenas .resena {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 520ms ease, transform 520ms cubic-bezier(.22, 1, .36, 1);
}
/* Gana a las de arriba por especificidad: si no, se marca como vista y se queda invisible. */
html.ta-anima .ta-web .ta-visto,
html.ta-anima .bloque-resenas .ta-visto { opacity: 1; transform: none; }
/* Las tarjetas de una misma fila entran una detrás de otra, muy poco: da sensación de orden. */
html.ta-anima .ta-web .art:nth-child(2), html.ta-anima .ta-web .cat-tarjeta:nth-child(2), html.ta-anima .ta-web .ev-tarjeta:nth-child(2) { transition-delay: 60ms; }
html.ta-anima .ta-web .art:nth-child(3), html.ta-anima .ta-web .cat-tarjeta:nth-child(3), html.ta-anima .ta-web .ev-tarjeta:nth-child(3) { transition-delay: 120ms; }
html.ta-anima .ta-web .art:nth-child(4), html.ta-anima .ta-web .cat-tarjeta:nth-child(4), html.ta-anima .ta-web .ev-tarjeta:nth-child(4) { transition-delay: 180ms; }
/* El hero manda: se ve al instante, sin esperar a nada. */
html.ta-anima .ta-web .hero, html.ta-anima .ta-web .hero * { opacity: 1; transform: none; transition: none; }

/* Al imprimir (o al guardar en PDF) no hay scroll que dispare nada: sin esto, todo lo que no se
   hubiera visto saldría en blanco. */
@media print {
	.ta-web *, .cab-web *, .pie-web * { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}