/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V4
 * Hallmark · genre: modern-minimal · macrostructure: Bento Grid
 * theme: custom (marca Trámite Legal) · paper: light · display: geometric-sans · accent: warm
 * enrichment: E-foto — hero partido con foto real de la biblioteca (#2686)
 * iconos: Lucide inline (ISC) vía tlc_home_2026_icon()
 * nav: site-header.css · footer: el del tema
 * scope: page-templates/home-2026.php
 * ========================================================================
 * Copy y precios reales: los packs los pinta [tlc_asesor_packs] leyendo
 * WooCommerce, y la newsletter [ny_newsletter]. Aquí solo se les da forma.
 *
 * DEUDA CONOCIDA (color de marca, no se toca desde aquí): el naranja
 * --th-accent con texto blanco da 2,49:1, por debajo del 4,5:1 de la WCAG.
 * Afecta a TODOS los botones primarios del sitio, no solo a esta página, así
 * que arreglarlo es una decisión de marca, no de plantilla. Igual pasa con el
 * eyebrow (3,19:1) y con .th-cell__link (2,97:1), ambos en --th-accent-deep.
 * ==================================================================== */

/* 1 · TOKENS — paleta de marca en OKLCH ---------------------------------- */
.tlc-home{
	--th-ink:oklch(27.2% 0.050 253.1);        /* #14283f */
	--th-ink-soft:oklch(39.0% 0.044 250.2);   /* #33475c */
	--th-accent:oklch(73.2% 0.161 57.2);      /* #f28a2b */
	--th-accent-deep:oklch(66.7% 0.159 53.9); /* #dd7419 */
	/* Naranjas solo para los iconos. El de marca sobre las pastillas claras se
	 * quedaba en 2,75:1 y sobre la celda de tinta en 2,44:1; estos dos pasan de
	 * 3:1 sin salirse del tono. */
	--th-accent-icon:oklch(52.0% 0.150 48);
	--th-accent-icon-ink:oklch(85.0% 0.105 62);
	--th-paper:oklch(100% 0 90);
	--th-paper-2:oklch(97.6% 0.005 95.1);
	--th-paper-3:oklch(94.9% 0.007 88.6);
	/* Arena: el naranja de marca rebajado, para el panel de la newsletter. */
	--th-accent-wash:oklch(96.8% 0.020 70);
	--th-accent-edge:oklch(89.0% 0.045 68);
	--th-border:oklch(91.3% 0.011 89.7);
	--th-border-strong:oklch(86.2% 0.015 84.6);
	--th-text:oklch(26.0% 0.038 253.9);
	--th-muted:oklch(54.7% 0.021 250.7);
	--th-focus:oklch(27.2% 0.050 253.1);
	/* Sobre tinta el foco color tinta no se ve: allí el anillo pasa a blanco. */
	--th-focus-on-ink:oklch(100% 0 90);
	--th-ok:oklch(52.0% 0.130 152);
	--th-err:oklch(51.0% 0.170 27);

	--th-font:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
	--th-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

	--th-text-xs:0.8rem;
	--th-text-sm:0.875rem;
	--th-text-base:1rem;
	--th-text-md:1.125rem;
	--th-text-lg:1.25rem;
	--th-text-xl:1.5625rem;
	--th-text-3xl:2.4414rem;
	--th-display:clamp(2.5rem,4.2vw + 1rem,4.25rem);
	--th-section:clamp(1.75rem,2vw + 0.9rem,2.5rem);

	--th-sp-3xs:0.125rem; --th-sp-2xs:0.25rem; --th-sp-xs:0.5rem;
	--th-sp-sm:0.75rem;   --th-sp-md:1rem;     --th-sp-lg:1.5rem;
	--th-sp-xl:2.5rem;    --th-sp-2xl:4rem;    --th-sp-3xl:6rem;
	--th-sp-4xl:9rem;

	--th-max:1360px;
	--th-gutter:clamp(1.25rem,4vw,3rem);

	--th-radius-sm:8px;
	--th-radius-lg:18px;
	--th-pill:999px;
	--th-rule:1px solid var(--th-border);

	--th-ease:cubic-bezier(.33,0,.2,1);
	--th-dur:200ms;
}

/* Overflow decorativo permitido; el documento nunca scrollea en X. */
html{overflow-x:clip}
body{overflow-x:clip}

/* Betheme no fuerza border-box en todo: sin esto, max-width 1180 + padding 96
 * da 1276 px reales y el hero se descoloca. */
.tlc-home,
.tlc-home *,
.tlc-home *::before,
.tlc-home *::after{box-sizing:border-box}

.tlc-home{
	background:var(--th-paper);
	color:var(--th-text);
	font-family:var(--th-font);
	font-size:var(--th-text-base);
	line-height:1.6;
}
/* El reset va con :where() para tener especificidad 0: así cualquier regla
 * propia lo pisa sin pelea. Antes `.tlc-home p{margin:0}` (0,1,1) ganaba a
 * `.th-hero__lede{margin-inline:auto}` (0,1,0) y descentraba el hero. */
.tlc-home :where(h1,h2,h3,h4,p,ul,ol,dl,dd,figure){margin:0;padding:0}
.tlc-home :where(h1,h2,h3,h4){font-family:var(--th-font);font-style:normal}
.tlc-home :where(li){list-style:none}

.th-wrap{max-width:var(--th-max);margin-inline:auto;padding-inline:var(--th-gutter)}

/* 2 · BOTONES ------------------------------------------------------------- */
.tlc-home .th-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:var(--th-sp-xs);
	min-height:52px;padding:0 var(--th-sp-xl);
	border-radius:var(--th-pill);
	border:1px solid transparent;
	font-family:var(--th-font);font-size:var(--th-text-base);font-weight:600;
	line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;
	text-transform:none;letter-spacing:.01em;box-shadow:none;
	transition:background var(--th-dur) var(--th-ease),
	           border-color var(--th-dur) var(--th-ease),
	           color var(--th-dur) var(--th-ease),
	           transform 120ms var(--th-ease);
}
.tlc-home .th-btn--lg{min-height:56px;padding:0 var(--th-sp-2xl);font-size:var(--th-text-md)}
.tlc-home .th-btn--primary{background:var(--th-accent);border-color:var(--th-accent);color:#fff}
.tlc-home .th-btn--primary:hover{background:var(--th-accent-deep);border-color:var(--th-accent-deep);color:#fff;transform:translateY(-1px)}
.tlc-home .th-btn--ghost{background:var(--th-paper);border-color:var(--th-border-strong);color:var(--th-ink)}
.tlc-home .th-btn--ghost:hover{border-color:var(--th-ink);background:var(--th-paper-2);color:var(--th-ink)}
.tlc-home .th-btn:active{transform:translateY(0)}
.tlc-home .th-btn:focus-visible{outline:2px solid var(--th-focus);outline-offset:3px}

/* 3 · ICONOS (Lucide inline · tlc_home_2026_icon) -------------------------- */
/* El helper ya fija width/height/stroke; aquí solo el encaje con el texto. */
.tlc-home .th-icon{display:block;flex:none}

/* 4 · HERO — partido: texto a la izquierda, foto a la derecha -------------- */
.th-hero{
	padding-block:var(--th-sp-3xl) var(--th-sp-2xl);
	background:
		radial-gradient(52% 70% at 82% 26%, oklch(73.2% 0.161 57.2 / .09), transparent 72%),
		var(--th-paper);
	border-bottom:var(--th-rule);
}
.th-hero__inner{
	max-width:var(--th-max);margin-inline:auto;padding-inline:var(--th-gutter);
}
.th-hero__grid{
	display:grid;
	grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
	gap:clamp(2rem,4.5vw,4.5rem);
	align-items:center;
}
.th-eyebrow{
	font-family:var(--th-mono);
	font-size:var(--th-text-xs);font-weight:500;
	letter-spacing:.14em;text-transform:uppercase;
	color:var(--th-accent-deep);
	margin-bottom:var(--th-sp-md);
}
.tlc-home .th-hero__title{
	font-size:var(--th-display);
	font-weight:700;line-height:1.04;letter-spacing:-.035em;
	color:var(--th-ink);
	overflow-wrap:anywhere;
	margin-bottom:var(--th-sp-lg);
}
.th-hero__lede{
	max-width:52ch;
	font-size:var(--th-text-md);line-height:1.65;color:var(--th-ink-soft);
	margin-bottom:var(--th-sp-xl);
}
.th-hero__actions{
	display:flex;flex-wrap:wrap;gap:var(--th-sp-sm);
}

/* La foto: recorte vertical para acompañar a la columna de texto. El sujeto y
 * el pasaporte están en el tercio derecho del encuadre original, de ahí el
 * object-position tan escorado. */
.th-hero__media{
	position:relative;
	aspect-ratio:4/5;
	border-radius:var(--th-radius-lg);
	overflow:hidden;
	background:var(--th-paper-3);
	box-shadow:0 24px 60px -32px oklch(27.2% 0.050 253.1 / .45);
}
.tlc-home .th-hero__img{
	display:block;width:100%;height:100%;
	object-fit:cover;object-position:86% 42%;
}
/* Sin foto (imagen borrada de la biblioteca) el hero vuelve a una columna. */
.th-hero--no-media .th-hero__grid{grid-template-columns:minmax(0,1fr);max-width:60ch}

/* 5 · FRANJA DE DATOS ----------------------------------------------------- */
.th-facts{
	display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
	gap:var(--th-sp-lg);
	margin-top:var(--th-sp-3xl);
	padding-top:var(--th-sp-xl);
	border-top:var(--th-rule);
}
.th-fact{display:flex;align-items:flex-start;gap:var(--th-sp-sm);min-width:0}
.th-fact__icon{
	display:grid;place-items:center;flex:none;
	width:38px;height:38px;
	border-radius:var(--th-radius-sm);
	background:var(--th-paper-3);
	color:var(--th-accent-icon);
}
.th-fact__text{display:block;min-width:0}
.th-fact__k{
	display:block;
	font-family:var(--th-mono);font-size:var(--th-text-lg);font-weight:700;
	letter-spacing:-.02em;color:var(--th-ink);
	font-variant-numeric:tabular-nums;
}
.th-fact__v{
	display:block;margin-top:var(--th-sp-3xs);
	font-size:var(--th-text-sm);color:var(--th-muted);line-height:1.4;
}

/* 6 · SECCIONES ----------------------------------------------------------- */
.th-section{padding-block:var(--th-sp-3xl)}
.th-section--alt{background:var(--th-paper-2);border-block:var(--th-rule)}
.th-head{margin-bottom:var(--th-sp-2xl)}
.tlc-home .th-head__title{
	font-size:var(--th-section);
	font-weight:700;line-height:1.1;letter-spacing:-.025em;
	color:var(--th-ink);
	overflow-wrap:anywhere;
}
.th-head__sub{
	margin-top:var(--th-sp-sm);max-width:62ch;
	font-size:var(--th-text-md);color:var(--th-muted);
}

/* 7 · BENTO --------------------------------------------------------------- */
.th-bento{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	grid-auto-rows:minmax(180px,auto);
	gap:var(--th-sp-md);
}
.th-cell{
	display:flex;flex-direction:column;
	padding:var(--th-sp-xl);
	background:var(--th-paper);
	border:var(--th-rule);
	border-radius:var(--th-radius-lg);
	min-width:0;
}
.th-cell--2x2{grid-column:span 2;grid-row:span 2}
.th-cell--2x1{grid-column:span 2}
.th-cell--1x1{grid-column:span 1}
.th-cell--ink{background:var(--th-ink);border-color:var(--th-ink);color:oklch(100% 0 90 / .78)}
.tlc-home .th-cell--ink .th-cell__title{color:#fff}
.th-cell--ink .th-cell__step{color:var(--th-accent)}
.th-cell--soft{background:var(--th-paper-3);border-color:transparent}
.th-cell__icon{
	display:grid;place-items:center;
	width:42px;height:42px;
	margin-bottom:var(--th-sp-md);
	border-radius:var(--th-radius-sm);
	background:var(--th-paper-3);
	color:var(--th-accent-icon);
}
/* En la celda oscura el naranja de marca sobre tinta se queda en 2,44:1: se
 * aclara el icono y el fondo pasa a un velo blanco. */
.th-cell--ink .th-cell__icon{
	background:oklch(100% 0 90 / .12);
	color:var(--th-accent-icon-ink);
}
.th-cell--soft .th-cell__icon{background:var(--th-paper)}
.th-cell--cta .th-cell__icon{background:var(--th-paper)}
.th-cell__step{
	font-family:var(--th-mono);
	font-size:var(--th-text-xs);font-weight:500;letter-spacing:.12em;text-transform:uppercase;
	color:var(--th-accent-deep);
	margin-bottom:var(--th-sp-md);
}
.tlc-home .th-cell__title{
	font-size:var(--th-text-xl);font-weight:600;line-height:1.2;letter-spacing:-.02em;
	color:var(--th-ink);
	margin-bottom:var(--th-sp-sm);
	overflow-wrap:anywhere;
}
.tlc-home .th-cell__title--sm{font-size:var(--th-text-lg)}
.th-cell__body{font-size:var(--th-text-base);line-height:1.6;max-width:52ch}
.th-cell__body--sm{font-size:var(--th-text-sm)}
.th-cell--ink .th-cell__body{color:oklch(100% 0 90 / .74)}
.th-cell__note{
	margin-top:auto;padding-top:var(--th-sp-lg);
	font-family:var(--th-mono);font-size:var(--th-text-xs);
	color:oklch(100% 0 90 / .5);
}
.th-cell--cta{
	background:var(--th-paper-2);
	border-color:var(--th-border-strong);
	border-style:dashed;
	text-decoration:none;
	transition:border-color var(--th-dur) var(--th-ease),background var(--th-dur) var(--th-ease);
}
.th-cell--cta:hover{border-color:var(--th-accent);background:var(--th-paper)}
.th-cell--cta:focus-visible{outline:2px solid var(--th-focus);outline-offset:2px}
.th-cell__link{
	display:flex;align-items:center;gap:var(--th-sp-2xs);
	margin-top:auto;padding-top:var(--th-sp-lg);
	font-weight:600;font-size:var(--th-text-sm);color:var(--th-accent-deep);
}
.th-cell__link .th-icon{transition:transform var(--th-dur) var(--th-ease)}
.th-cell--cta:hover .th-cell__link .th-icon{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
	.th-cell--cta:hover .th-cell__link .th-icon{transform:none}
}

/* 8 · PACKS — forma para el markup de [tlc_asesor_packs] ----------------- */
.tlc-home .tlc-packs{background:transparent;padding:0}
.tlc-home .tlc-packs__inner{max-width:none;padding:0}
.tlc-home .tlc-packs__title{
	font-size:var(--th-section);font-weight:700;line-height:1.1;letter-spacing:-.025em;
	color:var(--th-ink);text-align:left;
}
.tlc-home .tlc-packs__subtitle{
	margin:var(--th-sp-sm) 0 var(--th-sp-lg);max-width:62ch;
	font-size:var(--th-text-md);color:var(--th-muted);text-align:left;
}
.tlc-home .tlc-packs__grid{gap:var(--th-sp-md)}

/* 8.1 · CONMUTADOR puntual / suscripción ---------------------------------- */
.tlc-home .tlc-toggle-switch{
	display:inline-flex;gap:var(--th-sp-3xs);
	margin-bottom:var(--th-sp-xl);
	padding:var(--th-sp-3xs);
	background:var(--th-paper-3);
	border:var(--th-rule);
	border-radius:var(--th-pill);
}
.tlc-home .tlc-toggle-switch__btn{
	appearance:none;
	min-height:40px;padding:0 var(--th-sp-lg);
	border:0;border-radius:var(--th-pill);
	background:transparent;
	font-family:var(--th-font);font-size:var(--th-text-sm);font-weight:600;
	letter-spacing:.01em;text-transform:none;line-height:1;
	color:var(--th-ink-soft);
	white-space:nowrap;cursor:pointer;
	transition:background var(--th-dur) var(--th-ease),color var(--th-dur) var(--th-ease);
}
.tlc-home .tlc-toggle-switch__btn:hover:not(.is-active){color:var(--th-ink);background:var(--th-paper-2)}
/* Pestaña activa en tinta, como en /preview/home-v2/.
 * El `!important` no es capricho: el CSS del mu-plugin marca esta misma regla
 * con `!important` (background naranja) para poder ganarle a los selectores del
 * widget de Elementor. Sin repetirlo aquí, la pestaña activa sale naranja. */
.tlc-home .tlc-toggle-switch__btn.is-active{
	background:var(--th-ink) !important;
	color:#fff !important;
	box-shadow:none;
}
.tlc-home .tlc-toggle-switch__btn:focus-visible{outline:2px solid var(--th-focus);outline-offset:2px}
.tlc-home .tlc-toggle-panel--hidden{display:none}
/* El panel entra con una opacidad corta; nada de desplazamientos. */
.tlc-home .tlc-toggle-panel--fade-in{animation:th-panel-in 180ms var(--th-ease) both}
@keyframes th-panel-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
	.tlc-home .tlc-toggle-panel--fade-in{animation:none}
}
.tlc-home .tlc-pack{
	background:var(--th-paper);
	border:var(--th-rule);
	border-radius:var(--th-radius-lg);
	padding:var(--th-sp-xl);
	box-shadow:none;
	/* El plugin reserva 380 px para una tarjeta que ya no lleva rótulo ni línea
	 * de duración. Las iguala la rejilla, que estira todas a la más alta. */
	min-height:0;
}
/* El plan destacado se levanta con borde y peso, nunca con sombra. */
.tlc-home .tlc-pack--featured{border-color:var(--th-accent);border-width:2px}
.tlc-home .tlc-pack__badge{
	background:var(--th-accent);color:#fff;
	border-radius:var(--th-pill);
	font-size:var(--th-text-xs);font-weight:600;letter-spacing:.02em;
}
/* Ojo: `.tlc-pack__duration` iba agrupado aquí con `__name` y heredaba el
 * cuerpo del titular, así que "Acceso durante 1 hora" salía tan grande como
 * "1 hora" y partía la tarjeta en cuatro líneas. Esa línea ya no se pinta
 * (la descripción del producto dice lo mismo), y el selector se va con ella. */
.tlc-home .tlc-pack__name{
	font-size:var(--th-text-xl);font-weight:600;letter-spacing:-.02em;color:var(--th-ink);
}
.tlc-home .tlc-pack__price{
	display:flex;align-items:baseline;gap:var(--th-sp-2xs);
	font-family:var(--th-mono);font-weight:700;
	font-size:var(--th-text-3xl);letter-spacing:-.05em;line-height:1;
	color:var(--th-ink);
	font-variant-numeric:tabular-nums;
}
/* "/mes" · "/año" — cadencia de la suscripción, junto al importe.
 * `.wps_sfw_interval` lo pinta subscriptions-for-woocommerce dentro del precio;
 * sin esto heredaba el cuerpo del importe (mono, 2.4rem) y se iba a otra línea.
 * `.tlc-sub__per` es el del shortcode suelto [tlc_asesor_subscriptions]. */
.tlc-home .tlc-pack__price .wps_sfw_interval,
.tlc-home .tlc-sub__per{
	font-family:var(--th-font);font-size:var(--th-text-sm);font-weight:500;
	letter-spacing:0;color:var(--th-muted);
	white-space:nowrap;word-spacing:normal;
}
/* Dos tarjetas no ocupan el ancho de cuatro. El plugin las centra con márgenes
 * automáticos; aquí van alineadas a la izquierda, bajo el título. */
.tlc-home .tlc-packs__grid--two{
	grid-template-columns:repeat(2,minmax(0,1fr));
	max-width:640px;
	margin-inline:0;
}
/* En móvil las suscripciones se apilan como los packs puntuales: esta regla
 * (por su especificidad .tlc-home) pisaba la caída a 1 columna que el
 * mu-plugin ya trae a ≤600px, y las dos tarjetas salían embutidas lado a lado. */
@media (max-width:600px){
	.tlc-home .tlc-packs__grid--two{
		grid-template-columns:minmax(0,1fr);
		max-width:none;
	}
}
.tlc-home .tlc-sub{border:var(--th-rule);min-height:0}
.tlc-home .tlc-sub.tlc-pack--featured{border-color:var(--th-accent);border-width:2px}
/* El importe llega de WooCommerce como `4,99&nbsp;<span>€</span>`: ese espacio
 * duro, a cuerpo de titular, abría un hueco de ~23 px antes del símbolo. Se
 * recorta con word-spacing porque el nbsp viene en el HTML del plugin. */
.tlc-home .tlc-pack__price bdi{word-spacing:-.36em}
.tlc-home .tlc-pack__price .woocommerce-Price-currencySymbol{
	font-family:var(--th-mono);font-size:var(--th-text-xl);font-weight:700;
	letter-spacing:-.04em;margin-left:0;word-spacing:normal;
}
.tlc-home .tlc-pack__desc{font-size:var(--th-text-sm);color:var(--th-muted)}
/* El sitio tiene un `a{color:#eb801d}` global (snippet de custom-css-js) que
 * pintaba el texto del botón del mismo naranja que su fondo: el rótulo
 * desaparecía. El color se fija aquí de forma explícita para cada estado. */
.tlc-home .tlc-pack__cta,
.tlc-home a.tlc-pack__cta,
.tlc-home a.tlc-pack__cta:link,
.tlc-home a.tlc-pack__cta:visited{
	display:inline-flex;align-items:center;justify-content:center;
	min-height:52px;padding:0 var(--th-sp-lg);
	border-radius:var(--th-pill);
	background:var(--th-accent);
	border:1px solid var(--th-accent);
	color:#fff;
	font-family:var(--th-font);font-size:var(--th-text-base);font-weight:600;
	line-height:1;text-decoration:none;white-space:nowrap;
	text-transform:none;letter-spacing:.01em;box-shadow:none;
	transition:background var(--th-dur) var(--th-ease),border-color var(--th-dur) var(--th-ease);
}
.tlc-home a.tlc-pack__cta:hover,
.tlc-home a.tlc-pack__cta:focus{
	background:var(--th-accent-deep);
	border-color:var(--th-accent-deep);
	color:#fff;
}
.tlc-home a.tlc-pack__cta:focus-visible{outline:2px solid var(--th-focus);outline-offset:3px}

/* Mismo blindaje para los otros dos botones que son <a>. */
.tlc-home a.th-btn--primary,
.tlc-home a.th-btn--primary:link,
.tlc-home a.th-btn--primary:visited,
.tlc-home a.th-btn--primary:hover{color:#fff}
.tlc-home a.th-btn--ghost,
.tlc-home a.th-btn--ghost:link,
.tlc-home a.th-btn--ghost:visited,
.tlc-home a.th-btn--ghost:hover{color:var(--th-ink)}
.tlc-home a.th-cell--cta,
.tlc-home a.th-cell--cta:link,
.tlc-home a.th-cell--cta:visited{color:var(--th-text)}
.tlc-home .tlc-packs__legal{
	margin-top:var(--th-sp-xl);
	font-size:var(--th-text-sm);color:var(--th-muted);text-align:left;
}

/* 9 · CONFIANZA ----------------------------------------------------------- */
.th-trust{
	display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);
	gap:var(--th-sp-2xl);align-items:start;
}
.th-trust__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--th-sp-xl)}
.th-trust__item dt{
	font-weight:600;color:var(--th-ink);
	padding-bottom:var(--th-sp-xs);
	border-bottom:2px solid var(--th-accent);
	/* inline-flex, no inline-block: el SVG es display:block y, dentro de una
	 * caja en línea, se llevaba el rótulo a la línea de abajo. */
	display:inline-flex;align-items:center;gap:var(--th-sp-xs);
	margin-bottom:var(--th-sp-sm);
}
.th-trust__icon{display:grid;place-items:center;flex:none;color:var(--th-accent-icon)}
.th-trust__item dd{font-size:var(--th-text-sm);color:var(--th-muted);line-height:1.6;margin:0}

/* 10 · CIERRE -------------------------------------------------------------- */
.th-closer{background:var(--th-ink);padding-block:var(--th-sp-3xl)}
/* El anillo de foco general es color tinta, y este bloque es tinta: sobre él
 * el foco del botón era invisible. Aquí pasa a blanco. */
.th-closer .th-btn:focus-visible{outline-color:var(--th-focus-on-ink)}
.th-closer__inner{
	display:flex;align-items:center;justify-content:space-between;
	gap:var(--th-sp-xl);flex-wrap:wrap;
}
.tlc-home .th-closer__title{
	font-size:var(--th-section);font-weight:700;line-height:1.1;letter-spacing:-.025em;
	color:#fff;max-width:18ch;
}

/* 11 · NEWSLETTER — forma para [ny_newsletter] ---------------------------- */
/* Panel de arena: el bloque de cierre que va justo encima ya es tinta a sangre,
 * así que un panel oscuro aquí dejaría dos bandas oscuras seguidas. El tinte
 * cálido lo separa de las tarjetas blancas de los packs sin repetir el negro.
 *
 * `.ny-newsletter-form` pasa a display:contents: sus hijos (título, texto,
 * formulario y mensaje) se colocan en la rejilla de `.th-news` sin envolverlos,
 * y así no hay que tocar la plantilla del plugin, que también sirve a Noticias.
 * El JS de news-yoo llega por closest(), que no mira el layout. */
.th-news{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
	grid-template-areas:
		"icon  form"
		"title form"
		"desc  form"
		".     msg";
	column-gap:var(--th-sp-2xl);
	row-gap:var(--th-sp-sm);
	align-content:center;
	padding:clamp(1.75rem,3.5vw,3rem);
	background:var(--th-accent-wash);
	border:1px solid var(--th-accent-edge);
	border-radius:var(--th-radius-lg);
}
.tlc-home .th-news .ny-newsletter-form{
	display:contents;
}
.th-news__icon{
	grid-area:icon;
	display:grid;place-items:center;
	width:44px;height:44px;
	margin-bottom:var(--th-sp-2xs);
	border-radius:var(--th-radius-sm);
	background:var(--th-paper);
	color:var(--th-accent-deep);
}
.tlc-home .th-news .ny-newsletter-form__title{
	grid-area:title;
	font-size:var(--th-text-xl);font-weight:700;line-height:1.2;letter-spacing:-.02em;
	color:var(--th-ink);
	margin:0;text-align:left;
	overflow-wrap:anywhere;
}
.tlc-home .th-news .ny-newsletter-form__desc{
	grid-area:desc;
	margin:0;max-width:46ch;
	color:var(--th-ink-soft);font-size:var(--th-text-sm);line-height:1.6;text-align:left;
}
.tlc-home .th-news .ny-newsletter-form__form{
	grid-area:form;align-self:center;
	display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
	gap:var(--th-sp-sm);
	margin:0;
}
.tlc-home .ny-newsletter-form__input{
	min-height:52px;padding:0 var(--th-sp-md);
	background:var(--th-paper);
	border:1px solid var(--th-border-strong);
	border-radius:var(--th-radius-sm);
	font-family:var(--th-font);font-size:var(--th-text-base);color:var(--th-text);
	min-width:0;box-shadow:none;
	transition:border-color var(--th-dur) var(--th-ease);
}
.tlc-home .ny-newsletter-form__input::placeholder{color:var(--th-muted);opacity:1}
.tlc-home .ny-newsletter-form__input:focus{outline:none;border-color:var(--th-accent)}
.tlc-home .ny-newsletter-form__input:focus-visible{outline:2px solid var(--th-focus);outline-offset:1px}
.tlc-home .ny-newsletter-form__button{
	grid-column:1 / -1;
	min-height:52px;padding:0 var(--th-sp-xl);
	background:var(--th-accent);border:1px solid var(--th-accent);
	border-radius:var(--th-pill);
	color:#fff;font-family:var(--th-font);font-size:var(--th-text-base);font-weight:600;
	white-space:nowrap;cursor:pointer;text-transform:none;box-shadow:none;
	transition:background var(--th-dur) var(--th-ease),border-color var(--th-dur) var(--th-ease);
}
.tlc-home .ny-newsletter-form__button:hover{background:var(--th-accent-deep);border-color:var(--th-accent-deep)}
.tlc-home .ny-newsletter-form__button:focus-visible{outline:2px solid var(--th-focus);outline-offset:3px}
/* El plugin deshabilita el botón mientras envía; sin esto no se nota. */
.tlc-home .ny-newsletter-form__button:disabled{opacity:.6;cursor:progress}
.tlc-home .th-news .ny-newsletter-form__message{
	grid-area:msg;
	font-size:var(--th-text-sm);line-height:1.5;
	text-align:left;
}
.tlc-home .th-news .ny-newsletter-form__message:empty{display:none}
.tlc-home .th-news .ny-newsletter-form__message--success{color:var(--th-ok)}
.tlc-home .th-news .ny-newsletter-form__message--error{color:var(--th-err)}

/* 12 · RESPONSIVE --------------------------------------------------------- */
@media (max-width:1024px){
	.th-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
	.th-cell--2x2,.th-cell--2x1{grid-column:span 2}
	.th-cell--2x2{grid-row:auto}
	.th-trust{grid-template-columns:1fr;gap:var(--th-sp-xl)}
}

/* El hero se apila antes que el resto: por debajo de ~900 px las dos columnas
 * dejan la entradilla en un canalón demasiado estrecho. Coincide con el
 * `sizes` de la imagen en la plantilla. */
@media (max-width:899px){
	.th-hero{padding-block:var(--th-sp-2xl)}
	.th-hero__grid{grid-template-columns:minmax(0,1fr);gap:var(--th-sp-xl)}
	/* Apaisada bajo el texto: en vertical se comería la pantalla entera. */
	.th-hero__media{aspect-ratio:16/10}
	.tlc-home .th-hero__img{object-position:78% 42%}
	.th-facts{margin-top:var(--th-sp-2xl)}
	.th-news{
		grid-template-columns:minmax(0,1fr);
		grid-template-areas:"icon" "title" "desc" "form" "msg";
		row-gap:var(--th-sp-md);
	}
	.tlc-home .th-news .ny-newsletter-form__desc{max-width:none}
}
@media (max-width:767px){
	.th-section{padding-block:var(--th-sp-2xl)}
	.th-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--th-sp-lg)}
	.th-hero__actions{flex-direction:column;align-items:stretch}
	.tlc-home .th-btn{width:100%}
	.th-bento{grid-template-columns:1fr}
	.th-cell--2x2,.th-cell--2x1,.th-cell--1x1{grid-column:span 1}
	.th-trust__list{grid-template-columns:1fr;gap:var(--th-sp-lg)}
	/* Nombre y email dejan de convivir en una fila de ~150 px. */
	.tlc-home .th-news .ny-newsletter-form__form{grid-template-columns:minmax(0,1fr)}
	/* El conmutador ocupa el ancho: dos pestañas a media pantalla cada una. */
	.tlc-home .tlc-toggle-switch{display:flex;width:100%}
	.tlc-home .tlc-toggle-switch__btn{flex:1;padding:0 var(--th-sp-sm)}
	.th-closer__inner{flex-direction:column;align-items:flex-start}
	.tlc-home .th-closer__title{max-width:none}
}
/* 320-375 px: cuatro datos a dos columnas dejan claves como "19,99 €" partidas. */
@media (max-width:400px){
	.th-facts{grid-template-columns:minmax(0,1fr)}
}

/* 13 · MOVIMIENTO REDUCIDO ------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
	.tlc-home *,.tlc-home *::before,.tlc-home *::after{
		transition-duration:.01ms !important;
		animation-duration:.01ms !important;
	}
	.tlc-home .th-btn:hover{transform:none}
}

/* 13b · EL HERO LLEGA HASTA ARRIBA ---------------------------------------- */
/* La píldora flota, pero ocupa flujo: sin esto la banda cálida del hero
 * empezaba 68px por debajo del borde y quedaba un corte blanco feo. El hero
 * se cuela por detrás del header y devuelve el espacio en padding. */
.th-hero{
	margin-top:calc(-1 * var(--th-header-flow, 72px));
	padding-top:calc(var(--th-sp-3xl) + var(--th-header-flow, 72px));
}
@media (max-width:899px){
	.th-hero{padding-top:calc(var(--th-sp-2xl) + var(--th-header-flow, 72px))}
}

/* 14 · FOTOGRAFÍA (Pexels · rediseño espectacular) ------------------------ */
/* Los bloques con foto reciben la URL por variable --th-photo desde la
 * plantilla; si el adjunto desaparece, el bloque vuelve a la tinta plana. */

/* 14.1 · Chips flotantes sobre la foto del hero */
.th-hero__chip{
	position:absolute;
	display:inline-flex;align-items:center;gap:var(--th-sp-xs);
	padding:var(--th-sp-xs) var(--th-sp-md);
	background:oklch(100% 0 90 / .9);
	backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
	border:var(--th-rule);border-radius:var(--th-pill);
	font-size:var(--th-text-xs);font-weight:600;color:var(--th-ink);
	box-shadow:0 12px 30px -18px oklch(27.2% 0.050 253.1 / .55);
	white-space:nowrap;
}
.th-hero__chip--top{top:var(--th-sp-md);left:var(--th-sp-md)}
.th-hero__chip--bottom{bottom:var(--th-sp-md);right:var(--th-sp-md)}
.th-hero__chip .th-icon{color:var(--th-accent-icon)}
.th-hero__dot{
	width:9px;height:9px;border-radius:50%;
	background:var(--th-ok);
	animation:th-pulse 2s infinite;
}
@keyframes th-pulse{
	0%{box-shadow:0 0 0 0 oklch(52% 0.13 152 / .45)}
	70%{box-shadow:0 0 0 9px oklch(52% 0.13 152 / 0)}
	100%{box-shadow:0 0 0 0 oklch(52% 0.13 152 / 0)}
}
/* La foto nueva (terminal de aeropuerto) pide encuadre centrado; el
 * object-position escorado era para la foto anterior. Y al ser apaisada, la
 * caja pasa de retrato (4/5) a apaisada: el hero queda más bajo. */
.th-hero__media--stack{aspect-ratio:5/4;align-self:center}
.tlc-home .th-hero__media--stack .th-hero__img{object-position:50% 42%}

/* 14.2 · Franja de datos como tarjetas */
.th-facts--tiles{border-top:0;padding-top:0;gap:var(--th-sp-md)}
.th-facts--tiles .th-fact{
	background:var(--th-paper-2);
	border:var(--th-rule);
	border-radius:var(--th-radius-lg);
	padding:var(--th-sp-lg);
}
.th-facts--tiles .th-fact__icon{background:var(--th-paper)}

/* 14.3 · Celda del bento con fotografía bajo la tinta */
.th-cell--photo{
	background-image:
		linear-gradient(160deg,oklch(27.2% 0.050 253.1 / .95) 34%,oklch(27.2% 0.050 253.1 / .55)),
		var(--th-photo);
	background-size:cover;
	background-position:center;
}

/* 14.4 · Banda a sangre (Cibeles) */
.th-eyebrow--on-ink{color:var(--th-accent-icon-ink)}
.th-band{
	background-image:
		linear-gradient(oklch(27.2% 0.050 253.1 / .76),oklch(27.2% 0.050 253.1 / .84)),
		var(--th-photo);
	background-size:cover;
	background-position:center 38%;
	padding-block:var(--th-sp-4xl);
}
.th-band__inner{display:flex;flex-direction:column;align-items:flex-start;gap:var(--th-sp-md)}
.tlc-home .th-band__title{
	font-size:var(--th-section);font-weight:700;line-height:1.1;letter-spacing:-.025em;
	color:#fff;max-width:24ch;
}
.th-band__sub{color:oklch(100% 0 90 / .8);max-width:52ch;font-size:var(--th-text-md)}
.th-band .th-btn{margin-top:var(--th-sp-sm)}
.th-band .th-btn:focus-visible{outline-color:var(--th-focus-on-ink)}

/* 14.5 · Foto en la columna de garantías */
.th-trust__photo{margin:var(--th-sp-xl) 0 0;max-width:340px}
.tlc-home .th-trust__photo img{
	display:block;width:100%;height:auto;
	border-radius:var(--th-radius-lg);
	border:var(--th-rule);
}

/* 14.6 · Cierre fotográfico (tejados de Madrid) */
.th-closer--photo{
	background-image:
		linear-gradient(oklch(27.2% 0.050 253.1 / .8),oklch(27.2% 0.050 253.1 / .88)),
		var(--th-photo);
	background-size:cover;
	background-position:center 30%;
	padding-block:var(--th-sp-4xl);
}

@media (max-width:767px){
	.th-hero__chip{padding:var(--th-sp-2xs) var(--th-sp-sm)}
	.th-band{padding-block:var(--th-sp-3xl)}
	.th-trust__photo{max-width:none}
}
@media (prefers-reduced-motion:reduce){
	.th-hero__dot{animation:none}
}