/* ============================================================
   THE FESTIVE COUPLE — CAPA DE PORTADA (v3 · rediseno premium)
   Se carga DESPUES de festive.css y solo en is_front_page().

   Que hace esta hoja ahora:
     · pone la portada sobre fondo BLANCO (body, hero y secciones)
     · convierte el hero oscuro en un hero claro a dos columnas
     · deja las tarjetas quietas: elevacion leve + glow de categoria
     · conserva el header sticky y los contadores

   Que ya NO hace (v2 → v3): cursor personalizado, tilt 3D, auroras,
   chispas, parallax, botones magneticos, mascara por palabra del H1,
   latido del CTA, shine infinito del <em> y banda animada de cifras.

   Los reveals los hace festive.js en todo el sitio (.is-visible,
   12px / 480ms). Aqui solo se anaden los retardos del escalonado.
   ============================================================ */

:root {
	--tfc-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ============================================================
   1 · Fondo blanco de la portada
   ------------------------------------------------------------
   Solo la portada: esta hoja no se encola en ninguna otra vista,
   asi que el blog y las paginas internas conservan su --c-paper.
   El ritmo entre secciones lo daba el lavado cyan de --c-ambient;
   al quedar todo blanco lo sustituye una linea fina, que es lo que
   pide la guia de marca cuando la elevacion no aporta jerarquia.
   ============================================================ */
body.tfc-has-hero { background: var(--c-white); }

.tfc-section--paper,
.tfc-section--cream { background: var(--c-white); }
.tfc-section--cream { border-top: 1px solid var(--c-line-soft); }

/* Blanco sobre blanco: las tarjetas necesitan un contorno de 1px
   para no perder el borde. La sombra sola no basta a este nivel. */
.tfc-card { border: 1px solid var(--c-line); }
.tfc-quote-card {
	border: 1px solid var(--c-line);
	border-top: 2px solid var(--c-magenta);
}

/* ============================================================
   2 · Header sticky
   ------------------------------------------------------------
   El nav arrancaba transparente con logo y texto en cream porque
   debajo tenia el hero oscuro. Con el hero claro eso seria texto
   blanco sobre blanco: se fuerza el juego oscuro desde el principio.
   ============================================================ */
.tfc-nav {
	transition: background .3s var(--tfc-ease),
	            border-color .3s var(--tfc-ease),
	            box-shadow .3s var(--tfc-ease);
}
.tfc-nav.tfc-scrolled,
.tfc-nav.is-glass {
	background: rgba(255, 255, 255, .86);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border-bottom-color: var(--c-line);
	box-shadow: 0 4px 20px rgba(26, 26, 46, .05);
}

body.tfc-has-hero .tfc-nav__logo--cream { display: none; }
body.tfc-has-hero .tfc-nav__logo--navy  { display: inline-block; }
body.tfc-has-hero .tfc-nav__name,
body.tfc-has-hero .tfc-nav__menu a,
body.tfc-has-hero .tfc-nav__toggle { color: var(--c-navy); }
body.tfc-has-hero .tfc-nav__menu a:hover { color: var(--c-magenta-deep); }

.tfc-nav.is-open .tfc-nav__menu { background: var(--c-white); }

/* ============================================================
   3 · Hero claro, solo tipografia
   ------------------------------------------------------------
   El markup perdio las cuatro capas de oscurecimiento (__base,
   __sunset, __band, __vignette), que existian para leer texto cream
   encima de la foto, y despues tambien __image con la foto del
   crucero. Al quitarla, el hero deja de ser una rejilla de dos
   columnas: si se quedara en grid, la segunda columna seguiria
   reservando su ancho y dejaria un hueco a la derecha del texto.
   Vuelve a ser un bloque simple, alineado a la izquierda como los
   encabezados de seccion que vienen debajo.
   ============================================================ */
.tfc-hero {
	display: block;
	min-height: 0;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: calc(76px + clamp(52px, 6.5vw, 96px)) var(--gutter) clamp(48px, 5.5vw, 80px);
	background: var(--c-white);
	overflow: visible;
}

.tfc-hero__content {
	max-width: none;
	width: auto;
	margin: 0;
	padding: 0;
	z-index: 3;
	color: var(--c-ink);
	/* La entrada la sigue dando tfcRise de festive.css (12px/900ms):
	   es el reveal base y se conserva tal cual. */
}

/* Fraunces, no Lovelo. Lovelo entro como piloto sin firmar y no
   figura en la guia de marca; ademas no trae italica, asi que el
   enfasis del <em> tenia que ser solo color. Con Fraunces el <em>
   vuelve a ser cursiva de la misma familia, como pide la guia. */
.tfc-hero h1 {
	font-family: var(--font-serif);
	font-size: clamp(2.5rem, 4.4vw, 4rem);
	line-height: var(--lh-display);
	letter-spacing: var(--ls-tight);
	font-weight: 400;
	color: var(--c-ink);
	max-width: 15ch;
	margin: 22px 0 0;
}
.tfc-hero h1 em {
	font-style: italic;
	font-weight: 400;
	color: var(--c-magenta);
}

.tfc-hero__lede {
	color: var(--c-fg-muted);
	max-width: 46ch;
	margin: 26px 0 0;
}

.tfc-hero__ctas { margin-top: 36px; }

/* El grano se retiro con la foto. Existia para texturarla y para
   romper el bandeado del blur de las auroras; sin ninguna de las dos
   no aportaba nada y si restaba: .tfc-hero__fx creaba contexto de
   apilado con z-index, asi que su mix-blend-mode:soft-light no
   mezclaba contra el blanco del hero sino contra el fondo vacio del
   propio contexto, y el ruido se veia como un velo gris del tamano
   exacto del hero. */

@media (max-width: 900px) {
	.tfc-hero {
		padding-top: calc(76px + 44px);
		padding-bottom: clamp(40px, 7vw, 64px);
	}
	.tfc-hero h1 { max-width: 18ch; }
}

/* ============================================================
   4 · Reveals — solo el escalonado
   ------------------------------------------------------------
   La geometria y la duracion las pone festive.css (12px / 480ms).
   Antes esta hoja las pisaba con 40px / 900ms; eso era el grueso
   de la sensacion de exceso de movimiento y ya no esta.
   ============================================================ */
.tfc-reveal--d1 { transition-delay: .08s; }
.tfc-reveal--d2 { transition-delay: .16s; }
.tfc-reveal--d3 { transition-delay: .24s; }

/* Subrayado bajo el <em> de los H2. Un solo acento de marca: el
   degradado de tres colores que habia aqui incumplia la regla de
   "un acento = un color de marca". */
.tfc-section__head h2 em,
.tfc-newsletter h2 em {
	background-image: linear-gradient(90deg, var(--c-magenta), var(--c-magenta));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 2px;
	padding-bottom: .08em;
	transition: background-size .6s var(--tfc-ease) .15s;
}
.tfc-reveal.is-visible .tfc-section__head h2 em,
.tfc-section__head.tfc-reveal.is-visible h2 em,
.tfc-newsletter__inner.tfc-reveal.is-visible h2 em {
	background-size: 100% 2px;
}

/* ============================================================
   5 · Tarjetas de experiencias — quietas
   ------------------------------------------------------------
   Se fue el tilt 3D por completo, y con el la perspectiva de la
   rejilla, el preserve-3d, el overflow:visible y los parches de
   radio que aquel obligaba. La tarjeta vuelve a recortar con su
   propio overflow:hidden, que es lo que redondea la imagen.

   Queda: elevacion de 4px + sombra neutra + un glow del color de
   la categoria. El glow va como capa de sombra y no como radial
   con blur porque la tarjeta recorta su contenido: una sombra se
   pinta fuera de la caja y no la recorta el overflow, que es
   justamente lo que hace falta para que el halo se vea detras.
   ============================================================ */
.tfc-card {
	position: relative;
	--tfc-tinte: var(--c-magenta);
	--tfc-tinte-rgb: 255, 51, 144;
	transition: box-shadow .45s var(--tfc-ease),
	            transform .45s var(--tfc-ease);
}
.tfc-card--disney    { --tfc-tinte: var(--c-magenta); --tfc-tinte-rgb: 255, 51, 144; --tfc-tinte-deep: var(--c-magenta-deep); }
.tfc-card--universal { --tfc-tinte: var(--c-violet);  --tfc-tinte-rgb: 90, 90, 255;  --tfc-tinte-deep: var(--c-violet-deep); }
.tfc-card--crucero   { --tfc-tinte: var(--c-cyan);    --tfc-tinte-rgb: 3, 182, 244;  --tfc-tinte-deep: var(--c-cyan-deep); }

/* ── CTA de cotizacion ────────────────────────────────────────
   La tarjeta de portada tiene una sola salida: cotizar. Se fueron
   el recuadro de novedades y el enlace "Conocer mas", que ademas
   apuntaba al mismo Jotform con etiqueta de lectura.

   El pie conserva el flex:1 de festive.css, que es lo que alinea
   los tres botones a la misma altura aunque las descripciones
   midan distinto. Se le quitan el filete y su padding: sobraban
   encima de un boton solido a todo el ancho.

   El fondo usa la variante deep de cada categoria, no la base:
   sobre el color base el texto blanco no llega al contraste que
   pide la guia (magenta base da 3.4:1, cyan base 2.3:1). */
.tfc-card__foot {
	margin-top: 26px;
	padding-top: 0;
	border-top: 0;
}
.tfc-card__foot .tfc-card__cta {
	flex: 1;
	min-width: 0;
	background: var(--tfc-tinte-deep);
	color: #fff;
	padding: 14px 18px;
	text-align: center;
	/* .tfc-btn trae white-space:nowrap, pensado para rotulos cortos.
	   Estos son largos ("Cotiza tu proximo crucero Disney" mide 297px)
	   y en movil la tarjeta solo deja 237px: con nowrap el boton no
	   podia encoger y el overflow:hidden de la tarjeta lo recortaba.
	   Dejandolo partir, en escritorio sigue en una linea y en movil
	   pasa a dos. */
	white-space: normal;
	line-height: 1.35;
}
/* El hover va a ink en las tres: la tarjeta ya se eleva sola, asi
   que el boton cambia de color y no se mueve. */
.tfc-card__foot .tfc-card__cta:hover,
.tfc-card__foot .tfc-card__cta:focus-visible {
	background: var(--c-ink);
	color: #fff;
	transform: none;
	box-shadow: none;
}

.tfc-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--sh-hover),
	            0 14px 28px -6px rgba(var(--tfc-tinte-rgb), .28);
}

/* Filete de categoria: 4px de color plano, siempre visible. Antes
   se desplegaba en hover con un scaleX de 600ms; el despliegue era
   movimiento que la portada ya no quiere, y dejarlo fijo hace que
   el color de categoria se lea sin tener que pasar el raton. */
.tfc-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	z-index: 3;
	background: var(--tfc-tinte);
	pointer-events: none;
}

/* La flecha del enlace avanza con la tarjeta */
.tfc-card .tfc-btn-arrow {
	display: inline-block;
	transition: transform .45s var(--tfc-ease);
}
.tfc-card:hover .tfc-btn-arrow { transform: translateX(5px); }

/* ============================================================
   6 · Estadisticas
   tabular-nums evita que el numero salte de ancho al contar.
   La banda ambiental animada de 12s que habia detras se retiro.
   ============================================================ */
.tfc-stat__n {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* ============================================================
   7 · Botones
   Sin iman y sin latido: elevacion corta y sombra de marca.
   ============================================================ */
.tfc-btn--primary {
	transition: background var(--dur-base) var(--tfc-ease),
	            color var(--dur-base) var(--tfc-ease),
	            box-shadow .3s var(--tfc-ease),
	            transform .3s var(--tfc-ease);
}
.tfc-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px -6px rgba(255, 51, 144, .32);
}
.tfc-btn--primary:active { transform: translateY(0) scale(.98); }

/* ============================================================
   8 · Accesibilidad — sin movimiento
   Va al final a proposito: festive.css tiene su propio bloque
   reduce, pero esta hoja carga despues y sus reglas base lo
   pisarian si no se repitiera aqui.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
	}
	.tfc-reveal,
	.tfc-reveal--d1,
	.tfc-reveal--d2,
	.tfc-reveal--d3 {
		opacity: 1 !important;
		transform: none !important;
		transition-delay: 0s !important;
	}
	.tfc-section__head h2 em,
	.tfc-newsletter h2 em { background-size: 100% 2px !important; }

	/* Ni elevacion ni glow: la tarjeta se queda exactamente igual. */
	.tfc-card:hover {
		transform: none !important;
		box-shadow: var(--sh-2) !important;
	}
	.tfc-card:hover .tfc-btn-arrow { transform: none !important; }
	.tfc-card:hover .tfc-card__image > div { transform: none !important; }

	.tfc-btn--primary:hover {
		transform: none !important;
		box-shadow: none !important;
	}
}