/* ==========================================================================
   Italy Experience 2026 — tipografía y color de marca para TODO el sitio
   Alfa Romeo + Fiat

   Esta hoja no vive dentro de la portada: se carga en todas las páginas para
   que el hub del viajero, los documentos, las responsivas y cualquier página
   que arme el equipo en Elementor hablen el mismo idioma que el cartel.

   Sobre el !important: el sitio trae una fuente global llamada `brand`,
   aplicada por el plugin de tipografías con una regla tan amplia que gana a
   todo lo demás. Contra un override global que no controlamos, subir la
   especificidad no alcanza y encadenar selectores sería peor de mantener.
   Está acotado a tipografía y no toca ni color ni disposición del tema.
   ========================================================================== */

/* ==========================================================================
   LA TIPOGRAFÍA DE LOS TÍTULOS

   This Appeal, la condensada del cartel. Sustituye a Anton, que era el
   sustituto libre que se venía usando mientras no había archivo.

   Va servida desde este mismo servidor y no desde Google Fonts: pesa 4.3 KB en
   WOFF2 —menos que el ida y vuelta de DNS y TLS a otro dominio— y así el
   titular del hero no depende de un tercero para pintarse.

   OJO con el archivo: el ThisAppeal-FreeDemo.ttf original mapea Á É Í Ó Ú Ü a
   la vocal SIN acento y Ñ a la N. No es que falte el glifo, es que apunta al
   equivocado, así que el navegador nunca recurre a la fuente de reserva y
   MILÁN sale "MILAN" y AÑO sale "ANO". En un sitio en español eso son faltas
   de ortografía en cada título.

   El archivo que se sirve aquí lleva las tildes dibujadas con el mismo grosor
   de asta que la letra, más la raya, la raya corta y el punto medio, que
   tampoco estaban y salían como caja vacía. El original y el guion que lo
   parchea quedan en assets/fuentes/ por si hay que rehacerlo.

   Anton se queda de reserva: la demo no trae cirílico ni griego, y si algún
   día entra un texto fuera del latín conviene que caiga en algo con el mismo
   aire y no en la Times del sistema.
   ========================================================================== */

@font-face {
    font-family: 'This Appeal IE';
    src: url('fuentes/thisappeal-ie.woff2') format('woff2'),
         url('fuentes/thisappeal-ie.woff')  format('woff');
    font-weight: 400;
    font-style: normal;
    /* swap: el titular se lee de inmediato con la de reserva y cambia al
       llegar la buena. Con block, el hero aparece vacío hasta que baje. */
    font-display: swap;
}

:root {
    --ie-red:       #BA1F27;
    --ie-red-claro: #E04751;
    --ie-red-hondo: #9A1820;
    --ie-maroon:    #5E1719;
    --ie-cream:     #F4EFE9;
    --ie-cream-alt: #FAF7F3;
    --ie-ink:       #241012;
    --ie-ink-soft:  #6B5B58;
    --ie-line:      #DED5CC;
    --ie-noche:     #140A0B;

    /* La condensada del cartel, ya con el archivo real. */
    --ie-display: 'This Appeal IE', 'Anton', 'Archivo Black', Impact, sans-serif;
    --ie-body:    'Archivo', 'Inter', system-ui, -apple-system, sans-serif;

    --ie-curva: cubic-bezier(.16, 1, .3, 1);
}

/* --- Cuerpo de texto --- */

body,
p, li, td, th, label, input, textarea, select, button, a,
.elementor-widget-text-editor,
.elementor-widget-container {
    font-family: var(--ie-body) !important;
}

/* El texto en negrita, aparte y con un escalón más de especificidad.
   
   No basta con nombrar `strong`: el plugin Use Any Font (uaf.css) declara
   `strong` con !important dentro de una lista de veinticinco selectores, y su
   hoja se carga DESPUÉS que esta. Con la misma especificidad y los dos con
   !important, gana el último en llegar — y el último no somos nosotros.
   
   `body strong` vale 0-0-2 contra el 0-0-1 de `strong`, así que gana sin
   depender del orden de carga, que no controlamos.
   
   Se notaba: dentro de un párrafo, la parte en negrita saltaba a la fuente
   `brand` del tema y cambiaba de letra a media frase. Lo vio la clienta en la
   introducción de "Cómo vestir". */
body strong,
body b,
body em,
body i,
body small {
    font-family: var(--ie-body) !important;
}

/* --- Titulares: la condensada del cartel --- */

h1, h2, h3, h4,
.elementor-heading-title,
.entry-title,
.page-title {
    font-family: var(--ie-display) !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: .95;
}

/* h5 y h6 se quedan en la de cuerpo: en condensada pesada, a tamaño pequeño,
   se leen peor de lo que lucen. */
h5, h6 {
    font-family: var(--ie-body) !important;
    font-weight: 600 !important;
    text-transform: none;
}

/* Cifras tabulares donde importa comparar columnas (reportes, cuentas). */
table, .ie-cifras { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   EL SUELO DEL SITIO

   El tema (reset.css) pinta el body de blanco puro. Sobre blanco, la paleta del
   programa se ve como una marca cualquiera: el crema #F4EFE9 no es un detalle
   del cartel, es la mitad del cartel — el papel sobre el que está impreso todo.

   Además del color va una textura de grano muy tenue. El arte es un impreso, y
   un crema perfectamente plano se lee a pantalla; con grano se lee a papel. Va
   como imagen de fondo del propio body, no como capa extra, para no meter un
   elemento posicionado que después estorbe al apilado.
   ========================================================================== */

body {
    background-color: var(--ie-cream) !important;
    background-image:
        radial-gradient(120% 70% at 50% -10%, rgba(186,31,39,.055), transparent 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.055'/%3E%3C/svg%3E");
    background-attachment: fixed, fixed;
    background-repeat: no-repeat, repeat;
}

/* Los planos a sangre de la portada llevan su propio fondo oscuro: el grano del
   body no debe asomar por debajo de un video. */
.ie-acto, .ie-pie { background-color: var(--ie-noche); }

/* --- El pie del tema ---

   La plantilla de pie viene del evento anterior y usa negro puro (#000). Junto
   al crema del cartel, el negro absoluto se ve como un corte, no como parte de
   la pieza; el negro de la marca (#140A0B) es cálido y sí pertenece a la misma
   familia.

   OJO: el TEXTO del pie ("© 2025, Desarrollado por Mediatech") vive en una
   plantilla de Elementor, en la base de datos, no aquí. El año está mal y hay
   que corregirlo desde el editor de plantillas. Esto solo arregla el color. */
footer,
.site-footer,
[data-elementor-type="footer"] .elementor-section,
[data-elementor-type="footer"] .e-con {
    background-color: var(--ie-noche) !important;
}