/* ============================================================================
   BLOQUES VISUALES
   ----------------------------------------------------------------------------
   Piezas configurables desde el panel: cabecera, carrusel, banda, partido y
   cita. Un solo conjunto de reglas para los cinco tipos.
   ============================================================================ */

.blk {
  position: relative;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

/* --- Altura ---------------------------------------------------------------
   En vh para que el hero ocupe pantalla, con mínimo en px para que en un móvil
   apaisado no se quede en una franja de 200 px. */
.blk--h-short  { min-height: clamp(220px, 34vh, 340px); }
.blk--h-medium { min-height: clamp(320px, 52vh, 520px); }
.blk--h-tall   { min-height: clamp(420px, 76vh, 760px); }
.blk--h-full   { min-height: 100svh; }

/* --- Fondo ----------------------------------------------------------------
   <img> y no background-image: el navegador puede priorizarla, calcular el LCP
   y servirla en el formato que soporte. Un fondo CSS no permite nada de eso. */
/* z-index 0 y no negativo: con «isolation: isolate» en el contenedor, un valor
   negativo manda la imagen detrás del fondo del propio bloque y no se ve nada.
   El texto se coloca por encima con su propio z-index. */
.blk__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* Velo configurable: el contraste depende de la foto. Un amanecer en el
   desierto necesita más velo que una pista en sombra, y sin él el titular
   blanco desaparece. */
/* El velo se construye con color-mix sobre transparente en lugar de meter
   calc() dentro de rgba(): un calc() con un número sin unidad ahí no es válido
   en todos los navegadores, la declaración entera se descarta y el degradado
   caía al valor por defecto, tapando la fotografía por completo.
   Aquí --velo llega ya como porcentaje, que sí es una unidad válida. */
.blk[data-overlay]::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(
    to top,
    rgb(18 24 27 / var(--velo-alto, 70%)) 0%,
    rgb(18 24 27 / var(--velo, 45%)) 55%,
    rgb(18 24 27 / var(--velo-bajo, 22%)) 100%);
}
.blk--claro[data-overlay]::before {
  background: linear-gradient(
    to top,
    rgb(250 250 247 / var(--velo-alto, 70%)) 0%,
    rgb(250 250 247 / var(--velo, 45%)) 60%,
    rgb(250 250 247 / var(--velo-bajo, 22%)) 100%);
}

/* --- Texto ----------------------------------------------------------------- */
.blk__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 76rem;
  margin: 0 auto; padding: clamp(32px, 6vw, 80px) 24px;
}
.blk__text { max-width: 44rem; }

.blk--oscuro .blk__text { color: var(--signal, #FAFAF7); }
.blk--claro  .blk__text { color: var(--basalt, #12181B); }

.blk__eyebrow {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: 'opsz' 12, 'wdth' 88;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ember, #E8A24D);
  margin: 0 0 14px;
}

.blk__title {
  font-size: clamp(34px, 7vw, 84px);
  line-height: .98; letter-spacing: -.035em;
  margin: 0 0 18px;
  text-wrap: balance;
}
.blk--hero .blk__title { font-variation-settings: 'opsz' 96, 'wdth' 92; }
.blk--band .blk__title { font-size: clamp(28px, 4.6vw, 52px); }

.blk__sub {
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.6; max-width: 38rem;
  opacity: .88; margin: 0 0 26px;
}

.btn-lg {
  display: inline-block; padding: 15px 32px;
  background: var(--ember, #E8A24D); color: var(--basalt, #12181B);
  font-family: var(--display); font-weight: 600;
  font-variation-settings: 'opsz' 14, 'wdth' 92;
  font-size: 15px; letter-spacing: .01em; text-decoration: none;
  border-radius: 2px;
  transition: transform .18s cubic-bezier(.16,1,.3,1), background .18s ease;
}
.btn-lg:hover { background: #F0B466; transform: translateY(-2px); text-decoration: none; }
.btn-lg:focus-visible { outline: 3px solid var(--glacier, #8FD8E0); outline-offset: 3px; }

/* --- Carrusel --------------------------------------------------------------
   Lista con desplazamiento horizontal y ajuste por posición: funciona sin nada
   de JavaScript, con teclado y con gesto táctil nativo. El script solo añade el
   avance automático y sincroniza los puntos. */
.blk__car { position: absolute; inset: 0; z-index: 0; }

.blk__track {
  display: flex; height: 100%; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.blk__track::-webkit-scrollbar { display: none; }

.blk__slide {
  position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: center;
}
.blk__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.blk__cap {
  position: absolute; left: 24px; bottom: 74px; z-index: 3;
  max-width: 28rem; margin: 0;
  font-family: var(--mono); font-size: 12px;
  color: var(--signal, #FAFAF7);
  text-shadow: 0 1px 8px rgba(18,24,27,.8);
}

.blk__dots {
  position: absolute; left: 0; right: 0; bottom: 24px; z-index: 4;
  display: flex; justify-content: center; gap: 10px;
}
.blk__dot {
  width: 28px; height: 4px; border-radius: 2px;
  background: rgba(250,250,247,.35);
  transition: background .25s ease, width .25s ease;
}
.blk__dot.is-on { background: var(--ember, #E8A24D); width: 44px; }
.blk__dot:focus-visible { outline: 2px solid var(--glacier, #8FD8E0); outline-offset: 3px; }

/* --- Variantes de composición ---------------------------------------------- */
.blk--split .blk__inner { max-width: 76rem; }
@media (min-width: 900px) {
  .blk--split { grid-template-columns: 1fr 1fr; }
  .blk--split .blk__bg { position: relative; inset: auto; z-index: 0; grid-column: 1; }
  .blk--split .blk__inner { grid-column: 2; padding-left: clamp(24px, 4vw, 56px); }
  .blk--split[data-overlay]::before { display: none; }
}

.blk--quote .blk__inner { text-align: center; }
.blk--quote .blk__text { max-width: 34rem; margin: 0 auto; }
.blk--quote .blk__title { font-size: clamp(24px, 3.4vw, 40px); line-height: 1.2; }

/* --- Movimiento reducido ---------------------------------------------------
   Para algunas personas el desplazamiento automático provoca malestar real: se
   detiene el avance y el ajuste suave, conservando toda la información. */
@media (prefers-reduced-motion: reduce) {
  .blk__track { scroll-behavior: auto; }
  .btn-lg { transition: none; }
  .btn-lg:hover { transform: none; }
}

@media print {
  .blk { min-height: 0; }
  .blk__bg, .blk__car, .blk__dots { display: none; }
  .blk__text { color: #000 !important; }
}

/* ============================================================================
   PERFIL DE LA RUTA INSIGNIA · interactivo
   ----------------------------------------------------------------------------
   Se recorre punto a punto con ratón, dedo o teclado. Antes era una curva
   decorativa que no se podía consultar.
   ============================================================================ */

.fprof { padding: clamp(56px, 9vw, 104px) 0; background: var(--basalt, #12181B); color: var(--signal, #FAFAF7); }

.fprof__head {
  display: flex; flex-wrap: wrap; gap: var(--s-4, 20px) 40px;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: 32px;
}
.fprof__t {
  font-size: clamp(26px, 3.6vw, 42px); line-height: 1.05;
  letter-spacing: -.03em; margin: 10px 0 0;
}
.fprof__sum { display: flex; gap: 32px; margin: 0; }
.fprof__sum dt {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(250,250,247,.5);
}
.fprof__sum dd {
  margin: 4px 0 0; font-family: var(--mono, monospace);
  font-size: 20px; font-weight: 600;
}

/* --- El trazo -------------------------------------------------------------- */
.fprof__chart {
  position: relative;
  /* El gráfico no puede desbordar su columna: las zonas activas se colocan en
     porcentaje y las de los extremos sobresalían media diana. */
  overflow: hidden;
}
.fprof__chart svg { width: 100%; height: clamp(160px, 22vw, 240px); display: block; }

.fprof__grid { stroke: rgba(250,250,247,.08); stroke-width: 1; }
.fprof__area { fill: rgba(143,216,224,.10); }
.fprof__line {
  fill: none; stroke: var(--glacier, #8FD8E0); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.fprof__dot {
  fill: var(--basalt, #12181B); stroke: var(--glacier, #8FD8E0); stroke-width: 2;
  vector-effect: non-scaling-stroke;
  transition: r .18s ease, fill .18s ease;
}
.fprof__dot.is-top { fill: var(--ember, #E8A24D); stroke: var(--ember, #E8A24D); }
.fprof__dot.is-on { fill: var(--ember, #E8A24D); stroke: var(--ember, #E8A24D); r: 6; }

.fprof__cursor {
  stroke: rgba(232,162,77,.5); stroke-width: 1; stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke; transition: opacity .15s ease;
}

/* --- Zonas activas ---------------------------------------------------------
   Botones reales sobre el trazo: se tabulan y se activan con teclado. Un SVG
   con solo eventos de ratón deja fuera a quien no lo usa. */
.fprof__hits { position: absolute; inset: 0; overflow: hidden; }
.fprof__hit {
  position: absolute; top: 0; bottom: 0;
  width: 44px; margin-left: -22px;      /* diana táctil cómoda */
  padding: 0; border: 0; background: none; cursor: pointer;
}
.fprof__hit:focus-visible {
  outline: 2px solid var(--ember, #E8A24D); outline-offset: -2px; border-radius: 3px;
}

/* --- Detalle ---------------------------------------------------------------
   En HTML y no dentro del SVG: el texto se selecciona, lo lee un lector de
   pantalla y no hay que calcular tipografías en coordenadas. */
/* El ancho se acota también en CSS: en una ventana estrecha, 260 px pueden ser
   más que el propio gráfico y el recuadro se saldría por los dos lados. */
.fprof__tip {
  position: absolute; top: 8px; z-index: 3;
  min-width: min(190px, 90%); max-width: min(260px, calc(100% - 16px));
  padding: 12px 14px;
  background: rgba(18,24,27,.96); border: 1px solid rgba(250,250,247,.16);
  border-radius: 3px; pointer-events: none;
  transform: translateX(-50%);
}
.fprof__tipday {
  font-family: var(--mono, monospace); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ember, #E8A24D); margin: 0 0 4px;
}
.fprof__tiptitle { font-size: 14px; font-weight: 600; margin: 0 0 6px; line-height: 1.25; }
.fprof__tipmeta {
  font-family: var(--mono, monospace); font-size: 11px;
  color: rgba(250,250,247,.68); margin: 0; line-height: 1.5;
}

.fprof__legend { display: none; }

.fprof__foot {
  margin-top: 22px; font-size: 13px; color: rgba(250,250,247,.55);
}
.fprof__foot a { color: var(--glacier, #8FD8E0); }

@media (max-width: 700px) {
  .fprof__head { flex-direction: column; align-items: flex-start; }
  .fprof__sum { gap: 22px; }
  .fprof__tip { position: static; transform: none; max-width: none; margin-top: 14px; }
}

@media print { .fprof { background: #fff; color: #000; } .fprof__hits { display: none; } }

/* ============================================================================
   GALERÍA EDITORIAL (tipo «carrusel»)
   ----------------------------------------------------------------------------
   El texto NO va encima de las fotos. Un titular sobre imágenes que cambian
   obliga a subir tanto el velo que la fotografía deja de verse, y con velo bajo
   el texto se vuelve ilegible en cuanto pasa una imagen clara. Separados, cada
   uno hace su trabajo.
   ============================================================================ */

.blk--carousel {
  display: block;
  min-height: 0 !important;   /* anula la altura de .blk--h-*: aquí manda el contenido */
  padding: clamp(56px, 9vw, 104px) 0;
  background: var(--bone, #F6F7F5);
}
.blk--carousel.blk--oscuro { background: var(--basalt, #12181B); color: var(--signal, #FAFAF7); }
.blk--carousel::before { display: none; }   /* sin velo: no hay nada que velar */

.gal__inner { max-width: 76rem; margin: 0 auto; padding: 0 24px; }

.gal__head { max-width: 38rem; margin-bottom: clamp(28px, 4vw, 44px); }
.gal__eyebrow {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: 'opsz' 12, 'wdth' 88;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ember, #E8A24D); margin: 0 0 12px;
}
.gal__title {
  font-size: clamp(28px, 4.4vw, 50px); line-height: 1.02;
  letter-spacing: -.03em; margin: 0 0 14px; text-wrap: balance;
}
.gal__sub { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; opacity: .8; margin: 0; }

/* --- La tira ---------------------------------------------------------------
   Se recorre con gesto, rueda o teclado. Las imágenes NO ocupan el ancho
   completo: se ve un trozo de la siguiente, que es lo que indica que hay más
   sin necesidad de flechas. */
.gal__strip { overflow: hidden; }
.gal__track {
  display: flex; gap: clamp(12px, 1.6vw, 22px);
  margin: 0; padding: 0 0 4px; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; scroll-behavior: smooth;
}
.gal__track::-webkit-scrollbar { display: none; }

/* Ancho de tarjeta en una sola declaración, sin puntos de ruptura: crece con la
   ventana y se detiene donde deja de tener sentido. En un monitor ancho tres
   fotos de 30 rem cada una son murales; el tope las mantiene en su sitio. */
.gal__item {
  flex: 0 0 clamp(15rem, 30vw, 22rem);
  scroll-snap-align: start;
  align-self: start;          /* sin esto la tarjeta se estira a la altura de la tira */
}
.gal__item figure { margin: 0; }
/* Sin recorte: la imagen se ve ENTERA.
   Antes se forzaba una proporción 3/2 y «object-fit: cover», que recorta lo que
   sobra. Con fotos donde el vehículo está abajo o el cielo arriba, ese recorte
   se come justo lo que da sentido a la imagen.
   Ahora manda la proporción del archivo: la anchura la fija la tarjeta y la
   altura sale sola. */
.gal__item img {
  display: block; width: 100%; height: auto;
  border-radius: 2px;
  background: rgba(128,128,128,.12);
}
.gal__cap {
  margin: 10px 0 0; font-family: var(--mono, monospace);
  font-size: 12px; line-height: 1.5; opacity: .7;
}

.gal__cta { margin: 28px 0 0; }

.gal__strip:focus-visible { outline: 2px solid var(--ember, #E8A24D); outline-offset: 4px; }

/* En pantalla estrecha se ve un trozo de la siguiente: es lo que indica que hay
   más, sin necesidad de flechas. */
@media (max-width: 600px) {
  /* Una imagen por pantalla, completa.
     Con 82% asomaba un trozo de la siguiente: en escritorio eso indica que hay
     más, pero en móvil solo parece un recorte mal hecho. Aquí manda ver la
     fotografía entera; que hay más se descubre al deslizar. */
  .gal__item { flex: 0 0 100%; }
  .gal__track { gap: 12px; }
}

/* --- Galería sin imágenes -------------------------------------------------
   Se compone como banda tipográfica en lugar de dejar un titular pequeño con
   medio metro de blanco debajo esperando fotos que no hay. Es también el
   resultado de quitarle las imágenes desde el panel: una decisión válida, no
   un estado roto. */
.blk--carousel.blk--sinimg { padding: clamp(64px, 11vw, 128px) 0; }
.blk--carousel.blk--sinimg .gal__head {
  max-width: 46rem; margin-bottom: 0;
  border-left: 3px solid var(--ember, #E8A24D);
  padding-left: clamp(20px, 3vw, 36px);
}
.blk--carousel.blk--sinimg .gal__title { font-size: clamp(32px, 6vw, 68px); }
.blk--carousel.blk--sinimg .gal__sub { font-size: clamp(16px, 1.6vw, 20px); max-width: 34rem; }
.blk--carousel.blk--sinimg .gal__cta { margin-top: 32px; }

/* Con una sola imagen no tiene sentido una tira: se compone a dos columnas. */
@media (min-width: 900px) {
  .blk--carousel:not(.blk--sinimg) .gal__inner:has(.gal__item:only-child) {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 64px); align-items: center;
  }
  .gal__inner:has(.gal__item:only-child) .gal__head { margin-bottom: 0; }
  .gal__inner:has(.gal__item:only-child) .gal__item { flex-basis: 100%; }

}

/* --- Bloques y perfil de portada en móvil --------------------------------- */
@media (max-width: 900px) {
  .fprof__head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .fprof__sum { gap: 24px; }
}

@media (max-width: 600px) {
  /* La cabecera a pantalla completa deja de tener sentido en vertical: ocupa
     todo el alto y el visitante no ve que hay más debajo. */
  .blk--h-full { min-height: 78dvh; }
  .blk--h-tall { min-height: clamp(360px, 62dvh, 520px); }

  .blk__inner { padding: 40px var(--gutter); }
  .blk__title { font-size: clamp(30px, 9vw, 44px); }
  .btn-lg { display: block; text-align: center; }

  /* El detalle del perfil pasa debajo del trazo: flotando tapaba justo el
     punto que se estaba consultando. */
  .fprof__tip { position: static; transform: none; max-width: none; margin-top: 16px; }
  .fprof__sum { gap: 18px; }
  .fprof__sum dd { font-size: 17px; }
}

@media (max-width: 700px) {
  /* En vertical el gráfico se achica: con 375 px de ancho, 190 px de alto lo
     dejan casi cuadrado y el relieve deja de leerse. */
  .fprof__chart svg { height: clamp(120px, 26vw, 160px); }
  .fprof__t { font-size: clamp(22px, 7vw, 30px); }
  .fprof__foot { font-size: 12px; }
}