/* ==========================================================================
   AITANA TOUR · SISTEMA BASE (rediseño 2027)
   Tokens, contenedores, kickers, titulares y botones compartidos por las
   páginas rediseñadas (.ai-home en la portada, .ai-page en el resto).
   Estilo editorial "libro de ruta": negro/blanco y el rojo #cc3300.
   Se carga en los tres layouts, después de styles-v3.css.
   ========================================================================== */

.ai-home,
.ai-page {
    --ai-rojo: #cc3300;
    --ai-rojo-oscuro: #a32900;
    --ai-negro: #0a0a0a;
    --ai-blanco: #ffffff;
    --ai-gris: #f3f2ef;
    --ai-gris-linea: #dddddd;
    --ai-gris-texto: #4a4a4a;
    --ai-gris-oscuro: #333333;
    --ai-gris-claro-texto: #b8b8b8;

    --ai-f-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --ai-f-texto: 'Barlow', 'Poppins', system-ui, sans-serif;
    --ai-f-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --ai-gutter: clamp(16px, 4vw, 48px);
    --ai-sec-pad: clamp(64px, 10vw, 128px);
    --ai-max: 1344px;

    font-family: var(--ai-f-texto);
    color: var(--ai-negro);
    background: var(--ai-blanco);
    line-height: 1.55;
}

:is(.ai-home, .ai-page) *,
:is(.ai-home, .ai-page) *::before,
:is(.ai-home, .ai-page) *::after { box-sizing: border-box; }

/* Neutraliza Bootstrap/estilos antiguos dentro de las páginas nuevas (especificidad baja) */
:where(.ai-home, .ai-page) :where(p, ul, ol, dl, dd, figure, h1, h2, h3, h4, h5, h6, blockquote) { margin: 0; }
:where(.ai-home, .ai-page) :where(ul, ol) { padding: 0; list-style: none; }
:where(.ai-home, .ai-page) a { color: inherit; text-decoration: none; }
:where(.ai-home, .ai-page) table { border-collapse: collapse; width: 100%; }

:is(.ai-home, .ai-page) :is(p, li, dd, dt, td, th) { font-family: var(--ai-f-texto); }

:is(.ai-home, .ai-page) :is(h1, h2, h3, h4) { letter-spacing: 0; }

:is(.ai-home, .ai-page) img { max-width: 100%; height: auto; display: block; }

/* ---------- Contenedor y secciones ---------- */
.ai-wrap {
    width: 100%;
    max-width: calc(var(--ai-max) + 2 * var(--ai-gutter));
    margin: 0 auto;
    padding: 0 var(--ai-gutter);
}

.ai-sec { padding: var(--ai-sec-pad) 0; }
.ai-sec--claro { background: var(--ai-blanco); color: var(--ai-negro); }
.ai-sec--gris  { background: var(--ai-gris);   color: var(--ai-negro); }
.ai-sec--negro { background: var(--ai-negro);  color: var(--ai-blanco); }

/* ---------- Kicker: "KM 01 ———— RECORRIDOS" ---------- */
.ai-kicker {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 clamp(24px, 4vw, 40px);
    font-family: var(--ai-f-mono) !important;
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #555555;
}
.ai-kicker__km { color: var(--ai-rojo); font-weight: 500; white-space: nowrap; }
.ai-kicker__linea { flex: 1 1 auto; height: 1px; background: currentColor; opacity: .9; min-width: 24px; }
.ai-kicker > span:last-child { text-align: right; }
.ai-sec--negro .ai-kicker { color: #a8a8a8; }
.ai-sec--negro .ai-kicker__km { color: var(--ai-blanco); }
.ai-sec--negro .ai-kicker__linea { background: #444444; }

/* ---------- Titulares ---------- */
.ai-display {
    font-family: var(--ai-f-display) !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    line-height: .9 !important;
    letter-spacing: -.005em !important;
    font-size: clamp(48px, 9vw, 112px);
    margin: 0;
    text-shadow: none;
}
.ai-display--m { font-size: clamp(40px, 6vw, 64px); }
.ai-sec__titulo { margin-bottom: clamp(40px, 6vw, 72px); }
.ai-rojo { color: var(--ai-rojo); }

/* ---------- Botones ---------- */
.ai-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 24px;
    font-family: var(--ai-f-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: 0;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.ai-btn--negro  { background: var(--ai-negro); color: var(--ai-blanco); border-color: var(--ai-negro); }
.ai-btn--negro:hover  { background: var(--ai-rojo); border-color: var(--ai-rojo); color: var(--ai-blanco); }
.ai-btn--rojo  { background: var(--ai-rojo); color: var(--ai-blanco); border-color: var(--ai-rojo); }
.ai-btn--rojo:hover  { background: var(--ai-rojo-oscuro); border-color: var(--ai-rojo-oscuro); color: var(--ai-blanco); }
.ai-btn--blanco { background: var(--ai-blanco); color: var(--ai-negro); border-color: var(--ai-blanco); }
.ai-btn--blanco:hover { background: var(--ai-rojo); border-color: var(--ai-rojo); color: var(--ai-blanco); }
.ai-btn--linea  { background: transparent; color: inherit; border-color: currentColor; }
.ai-btn--linea:hover  { background: var(--ai-blanco); color: var(--ai-negro); border-color: var(--ai-blanco); }
.ai-sec--claro .ai-btn--linea:hover { background: var(--ai-negro); color: var(--ai-blanco); border-color: var(--ai-negro); }
.ai-btn:focus-visible,
.ai-enlace:focus-visible,
.ai-item summary:focus-visible,
.ai-patro__logo:focus-visible { outline: 3px solid var(--ai-rojo); outline-offset: 3px; }

.ai-enlace {
    font-family: var(--ai-f-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ai-rojo) !important;
}
.ai-enlace:hover { color: var(--ai-rojo-oscuro) !important; }

.ai-etiqueta {
    display: inline-block;
    padding: 6px 12px;
    font-family: var(--ai-f-mono);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 1px solid currentColor;
    white-space: nowrap;
}
.ai-etiqueta--roja { background: var(--ai-rojo); border-color: var(--ai-rojo); color: var(--ai-blanco); }

/* ==========================================================================
   COMPONENTES DE PÁGINA INTERIOR (cabecera, títulos numerados, textos,
   rejillas de tarjetas y CTA final). Usados por Guía, Contacto e Inscripciones.
   ========================================================================== */

/* ---------- Cabecera de página ---------- */
.gc-cabecera {
    background: var(--ai-negro);
    color: var(--ai-blanco);
    padding: clamp(40px, 6vw, 72px) 0 0;
}
.gc-miga {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px !important;
    font-family: var(--ai-f-mono) !important;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ai-gris-claro-texto);
}
.gc-miga a:hover { color: var(--ai-blanco); }

.gc-cabecera__grid { display: grid; gap: 32px; align-items: end; }
@media (min-width: 1024px) { .gc-cabecera__grid { grid-template-columns: 3fr 2fr; gap: 48px; } }
.gc-cabecera__titulo { font-size: clamp(60px, 12vw, 176px); line-height: .84 !important; }
.gc-cabecera__lateral { display: flex; flex-direction: column; gap: 24px; padding-bottom: 8px; }
.gc-cabecera__sub { font-size: clamp(17px, 1.6vw, 20px); color: #d6d6d6; }

.gc-botones { display: flex; flex-wrap: wrap; gap: 12px; }

.gc-datos {
    margin-top: clamp(48px, 6vw, 72px) !important;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--ai-gris-oscuro);
}
.gc-datos > div {
    padding: 22px 16px 26px 0;
    border-bottom: 1px solid var(--ai-gris-oscuro);
}
.gc-datos > div:nth-child(2n) { padding-left: 16px; border-left: 1px solid var(--ai-gris-oscuro); }
.gc-datos > div:last-child { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
@media (min-width: 900px) {
    .gc-datos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .gc-datos > div { border-bottom: 0; padding: 26px 20px 32px; border-left: 1px solid var(--ai-gris-oscuro); }
    .gc-datos > div:first-child { padding-left: 0; border-left: 0; }
    .gc-datos > div:last-child { grid-column: auto; padding-left: 20px; border-left: 1px solid var(--ai-gris-oscuro); }
}
.gc-datos dt {
    font-family: var(--ai-f-mono) !important;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ai-gris-claro-texto);
}
.gc-datos dd {
    margin-top: 8px !important;
    font-family: var(--ai-f-display) !important;
    font-weight: 800;
    font-size: clamp(30px, 3.2vw, 44px);
    line-height: 1;
}
.gc-datos .gc-datos__extra {
    margin-top: 6px !important;
    font-family: var(--ai-f-texto) !important;
    font-weight: 500;
    font-size: 15px;
    color: #cfcfcf;
}

/* ---------- Títulos de sección: "01 ——— TÍTULO" ---------- */
.gc-sec { scroll-margin-top: 80px; }
.gc-titulo {
    display: flex;
    align-items: baseline;
    gap: clamp(12px, 2vw, 20px);
    border-bottom: 3px solid var(--ai-negro);
    padding-bottom: 16px;
    margin-bottom: clamp(24px, 3vw, 32px);
}
.gc-titulo--negro { border-bottom-color: var(--ai-blanco); }
.gc-titulo--sep { margin-top: clamp(64px, 8vw, 96px); }
.gc-titulo__num {
    font-family: var(--ai-f-display);
    font-weight: 800;
    font-size: clamp(24px, 3vw, 32px);
    color: var(--ai-rojo);
}
.gc-titulo--negro .gc-titulo__num { color: var(--ai-blanco); }
.gc-titulo__h {
    font-family: var(--ai-f-display) !important;
    font-weight: 800 !important;
    font-size: clamp(30px, 5.4vw, 64px) !important;
    line-height: .95 !important;
    text-transform: uppercase;
    margin: 0 !important;
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
}
.gc-intro {
    max-width: 760px;
    margin-bottom: clamp(32px, 4vw, 48px) !important;
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.55;
    color: #2a2a2a;
}
.gc-intro--negro { color: #d6d6d6; }

/* ---------- Piezas de texto reutilizables ---------- */
.gc-sub {
    margin-bottom: 16px !important;
    font-family: var(--ai-f-mono) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #555555;
}
.ai-sec--negro .gc-sub,
.gc-bloque--negro .gc-sub { color: var(--ai-gris-claro-texto); }
.gc-etq {
    font-family: var(--ai-f-mono) !important;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #555555;
}
.gc-lugar {
    font-family: var(--ai-f-display) !important;
    font-weight: 700;
    font-size: clamp(26px, 2.8vw, 34px);
    line-height: 1.05;
    text-transform: uppercase;
}
.gc-texto { font-size: 16px; line-height: 1.6; color: var(--ai-gris-texto); }
.gc-texto--l { font-size: 18px; color: #2a2a2a; }
.ai-sec--negro .gc-texto { color: #cfcfcf; }
.gc-cifra {
    font-family: var(--ai-f-display) !important;
    font-weight: 800;
    font-size: clamp(48px, 6vw, 72px);
    line-height: 1;
    color: var(--ai-rojo);
    margin-bottom: 8px !important;
}
.gc-nota {
    padding-left: 14px;
    border-left: 3px solid var(--ai-rojo);
    font-size: 15px;
    color: var(--ai-gris-texto);
}
.gc-nota--negro { color: #cfcfcf; }
.gc-auto { align-self: flex-start; }

.gc-dos { display: grid; gap: clamp(32px, 4vw, 48px); align-items: start; }
@media (min-width: 960px) {
    .gc-dos { grid-template-columns: 5fr 6fr; }
    .gc-dos--igual { grid-template-columns: 1fr 1fr; }
}
.gc-pila { display: flex; flex-direction: column; gap: 16px; }

/* ---------- Rejilla de tarjetas ---------- */
.gc-rejilla { display: grid; gap: 1px; background: var(--ai-gris-linea); border: 1px solid var(--ai-gris-linea); }
@media (min-width: 640px)  { .gc-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gc-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gc-rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 640px)  { .gc-rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.gc-card { background: var(--ai-blanco); padding: clamp(24px, 2.6vw, 32px); display: flex; flex-direction: column; gap: 10px; }
.gc-card__n { font-family: var(--ai-f-display); font-weight: 800; font-size: 40px; line-height: 1; color: var(--ai-rojo); }
.gc-card__t {
    font-family: var(--ai-f-display) !important;
    font-weight: 700 !important;
    font-size: 26px !important;
    line-height: 1.05 !important;
    text-transform: uppercase;
}

/* ==========================================================================
   CTA FINAL (rojo)
   ========================================================================== */
.gc-cta { background: var(--ai-rojo); color: var(--ai-blanco); padding: clamp(64px, 9vw, 112px) 0; }
.gc-cta__grid { display: grid; gap: 48px; align-items: end; }
@media (min-width: 1024px) { .gc-cta__grid { grid-template-columns: 3fr 2fr; } }
.gc-cta__texto { display: flex; flex-direction: column; gap: 24px; }
.gc-cta__titulo { font-size: clamp(48px, 7vw, 96px); }
.gc-cta__sub { font-size: clamp(17px, 1.6vw, 20px); max-width: 640px; }
.gc-cta .ai-btn--linea { color: var(--ai-blanco); }
.gc-cta .ai-btn--linea:hover { background: var(--ai-blanco); color: var(--ai-rojo); border-color: var(--ai-blanco); }
.gc-cta .ai-btn--negro:hover { background: var(--ai-blanco); color: var(--ai-negro); border-color: var(--ai-blanco); }
.gc-cta__contacto { font-size: 16px; }
.gc-cta__contacto a { font-weight: 700; text-decoration: underline !important; text-underline-offset: 3px; }
.gc-cta__stats { border-top: 1px solid rgba(255, 255, 255, .5); }
.gc-cta__stats > div { display: flex; flex-direction: column-reverse; gap: 2px; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .5); }
.gc-cta__stats dd { font-family: var(--ai-f-display) !important; font-weight: 800; font-size: clamp(40px, 5vw, 60px); line-height: 1; }
.gc-cta__stats dt { font-family: var(--ai-f-mono) !important; font-weight: 400; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

/* Variante de la fila de datos con 3 columnas (Contacto) */
@media (min-width: 900px) { .gc-datos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gc-datos--3 > div:last-child { grid-column: 1 / -1; }
@media (min-width: 900px) { .gc-datos--3 > div:last-child { grid-column: auto; } }
.gc-datos dd a { color: inherit; }
.gc-datos dd a:hover { color: var(--ai-rojo); }

/* Bloque destacado gris / rojo */
.gc-bloque { background: var(--ai-gris); padding: 28px; display: flex; flex-direction: column; gap: 8px; }
.gc-bloque .gc-sub { margin-bottom: 8px !important; }
.gc-bloque--negro { background: var(--ai-rojo); color: var(--ai-blanco); }
.gc-bloque--negro .gc-sub { color: var(--ai-blanco); opacity: .85; }
.gc-bloque--negro .gc-texto { color: var(--ai-blanco); font-size: 18px; font-weight: 500; }

/* Títulos de cabecera largos (p. ej. "Inscripciones Aitana Tour 2027") */
.gc-cabecera__grid > * { min-width: 0; }
.gc-cabecera__titulo { overflow-wrap: normal; word-break: normal; hyphens: manual; } /* nunca partir palabras */
.gc-cabecera__titulo { font-size: clamp(44px, 13vw, 120px) !important; }
@media (min-width: 1024px) { .gc-cabecera__titulo { font-size: clamp(64px, 8.6vw, 132px) !important; } }
.gc-cabecera__titulo--largo { font-size: clamp(34px, 10.5vw, 112px) !important; }
@media (min-width: 1024px) { .gc-cabecera__titulo--largo { font-size: clamp(56px, 6.4vw, 104px) !important; } }

/* Listas, puntos de avituallamiento y chips (Guía, Recorrido, Expo) */
.gc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px !important; }
.gc-chips li {
    padding: 8px 14px;
    background: var(--ai-blanco);
    border: 1px solid var(--ai-negro);
    font-family: var(--ai-f-display);
    font-weight: 700;
    font-size: 17px;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.gc-lista-num { counter-reset: none; border-top: 3px solid var(--ai-negro); }
.gc-lista-num li {
    display: flex;
    gap: 20px;
    align-items: baseline;
    padding: 20px 0;
    border-bottom: 1px solid var(--ai-gris-linea);
    font-size: 18px;
    line-height: 1.45;
}
.gc-lista-num__n {
    flex: 0 0 auto;
    font-family: var(--ai-f-display);
    font-weight: 800;
    font-size: 28px;
    line-height: 1;
    color: var(--ai-rojo);
}
.gc-punto {
    display: inline-block;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid var(--ai-negro);
    background: var(--ai-blanco);
}
.gc-punto--comp { background: var(--ai-rojo); border-color: var(--ai-rojo); }
.gc-lista-guion li { position: relative; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--ai-gris-oscuro); font-size: 17px; color: #e4e4e4; }
.gc-lista-guion li::before { content: ''; position: absolute; left: 0; top: 23px; width: 10px; height: 2px; background: var(--ai-rojo); }

/* Variante de la fila de datos con 4 columnas (Recorrido, Expo) */
@media (min-width: 900px) { .gc-datos--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gc-datos--4 > div:last-child { grid-column: auto; padding-left: 16px; border-left: 1px solid var(--ai-gris-oscuro); }

/* Títulos de cabecera de una sola palabra muy larga (p. ej. "Recomendaciones") */
.gc-cabecera__titulo--xl { font-size: clamp(28px, 8.2vw, 88px) !important; }
@media (min-width: 1024px) { .gc-cabecera__titulo--xl { font-size: clamp(44px, 5vw, 80px) !important; } }

/* Variante de la fila de datos con 2 columnas (Solidario) */
.gc-datos--2 > div:last-child { grid-column: auto; padding-left: 16px; border-left: 1px solid var(--ai-gris-oscuro); }
@media (min-width: 900px) { .gc-datos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Títulos de cabecera en forma de frase (Reglamento, páginas legales) */
.gc-cabecera__titulo--frase { font-size: clamp(34px, 8.4vw, 72px) !important; line-height: .94 !important; }
@media (min-width: 1024px) { .gc-cabecera__titulo--frase { font-size: clamp(48px, 4.6vw, 76px) !important; } }