/* ===========================================================================
   /viajes/{slug}/ — estilos exclusivos de la ficha de itinerario.

   Va aparte de assets/css/site.css a propósito: esta noche cuatro agentes
   trabajan en paralelo y la hoja principal es de todos. Se carga desde el
   controlador con head_extra, solo en esta plantilla. Cuando la noche termine,
   lo que sea reutilizable se sube a site.css y este fichero se queda con lo que
   de verdad sea propio de la ficha.

   Reutiliza las variables de site.css (--azul, --acento, --radio…): esta hoja
   no declara paleta nueva.
   =========================================================================== */

/* ─────────────────────────── Portada ─────────────────────────── */

.viaje-portada { margin-bottom: 1.5rem; }

.viaje-portada__media {
  position: relative;
  background: var(--azul-tenue);
}

.viaje-portada__imagen {
  display: block;
  width: 100%;
  height: clamp(220px, 38vw, 460px);
  object-fit: cover;
}

.viaje-portada__texto { padding-top: 1.5rem; }

.viaje-portada__titulo { margin-bottom: .5rem; }

.viaje-portada__entradilla {
  max-width: var(--ancho-texto);
  font-size: 1.075rem;
  color: var(--tinta-suave);
}
.viaje-portada__entradilla p:last-child { margin-bottom: 0; }

/* ─────────────────────── Respuesta rápida ─────────────────────── */

.respuesta-rapida {
  border: 1px solid var(--azul-borde);
  border-radius: var(--radio);
  background: var(--azul-tenue);
  padding: 1.25rem;
  margin-block: 1.5rem;
}

.respuesta-rapida__datos {
  display: grid;
  gap: 1rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  margin: 0 0 1.25rem;
}

.respuesta-rapida__dato dt {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gris);
  font-weight: 600;
}

.respuesta-rapida__dato dd {
  margin: .15rem 0 0;
  font-weight: 600;
  color: var(--tinta);
  line-height: 1.35;
}

.respuesta-rapida__detalle {
  display: block;
  font-weight: 400;
  font-size: .82rem;
  color: var(--tinta-suave);
  margin-top: .1rem;
}

.respuesta-rapida__importe {
  font-family: var(--fuente-titulos);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

.respuesta-rapida__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 0;
}

.respuesta-rapida__categorias {
  margin: 1rem 0 0;
  font-size: .875rem;
  color: var(--tinta-suave);
}

/* ────────────────── Índice de la ficha (sin JS) ────────────────── */

/* Sustituye a las pestañas de Elementor de la web actual: ni pestañas ni JS,
   solo anclas a secciones que ya están en el HTML. */
/* Ya SÍ es pegajoso. site.css publica `--alto-cabecera` (A1 §1.4) y con eso el
   índice se pega justo debajo de la cabecera en vez de meterse detrás.
   `z-index: 30` lo deja por debajo del 40 de `.cabecera`: pasa por debajo, no
   la tapa. Es el mismo par de reglas que la clase `.bajo-cabecera` de site.css;
   se escriben aquí en vez de añadir la clase en la plantilla para no depender
   de dos ficheros de dos dueños distintos para un solo efecto. */
.viaje-indice {
  position: sticky;
  top: var(--alto-cabecera);
  z-index: 30;
  background: var(--blanco);
  border-block: 1px solid var(--linea);
  margin-bottom: .5rem;
}

.viaje-indice__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: .25rem;
  -webkit-overflow-scrolling: touch;
}

.viaje-indice__enlace {
  display: block;
  white-space: nowrap;
  padding: .7rem .9rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--azul);
  border-bottom: 3px solid transparent;
}
.viaje-indice__enlace:hover {
  border-bottom-color: var(--acento);
  color: var(--azul-oscuro);
}

/* Que el ancla no quede debajo de la cabecera pegajosa NI debajo del índice,
   que ahora también es pegajoso. Antes eran 7rem a ojo; ahora se calcula:
   cabecera + índice + un dedo de aire. El índice mide 45 px (enlace de .7rem de
   padding + 3px de borde inferior + los dos bordes del <nav>), medido en
   Chrome. site.css ya pone `[id] { scroll-margin-top: calc(var(--alto-cabecera)
   + 1rem) }`; esto lo aumenta solo en las anclas de la ficha, que son las que
   quedan debajo de la barra de secciones. */
[id^="dia-"],
#itinerario, #precios, #incluye, #no-incluye, #notas,
#que-ver, #extensiones, #solicitud, #presentacion {
  scroll-margin-top: calc(var(--alto-cabecera) + 45px + 1rem);
}

/* ─────────── Corrección medida del alto de cabecera ───────────
   A1 §1.4 publicó `--alto-cabecera` con un valor CALCULADO, no medido, y pidió
   que se comprobara. Medido en Chrome 151 headless contra
   http://localhost:8187/viajes/de-costa-a-costa/ en doce anchos:

     ancho        --alto-cabecera   .cabecera real
     390 – 760     92px              92.016px    ← 0,016 px, ruido de subpíxel
     761 – 980     96px              96.797px    ← 0,8 px de MÁS: el índice se metía debajo
     981 – 1920    96px              96px        ← exacto

   El escalón de 761 a 980 es el botón de menú móvil: site.css lo enseña en
   `@media (max-width: 980px)` y mide 47 px, tres más que el menú de escritorio;
   con el padding de `.cabecera__interior` el alto natural sube a 95,8 y se come
   el `min-height: calc(var(--alto-cabecera) - 1px)`.

   Se corrige aquí y no en site.css porque site.css es de otro agente. Con 97px
   el `min-height` pasa a 96 > 95,8 natural, así que vuelve a mandar la variable
   y el alto real es exactamente el declarado. **Esto debería acabar en
   site.css**: afecta a todas las páginas, no solo a la ficha. Anotado en
   docs/noche/B7-ficha.md. */
@media (min-width: 761px) and (max-width: 980px) {
  :root { --alto-cabecera: 97px; }
}

/* ─────────────────────── Secciones alternas ─────────────────────── */

.seccion--alterna { background: var(--gris-claro); }

/* ─────────────────────── Presentación y mapa ─────────────────────── */

.viaje-presentacion {
  display: grid;
  gap: 2rem;
  align-items: start;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}
@media (max-width: 860px) {
  .viaje-presentacion { grid-template-columns: 1fr; }
}

.viaje-mapa { margin: 0; }
.viaje-mapa__imagen {
  width: 100%;
  height: auto;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--blanco);
}
.viaje-mapa__pie {
  font-size: .8rem;
  color: var(--gris);
  margin-top: .4rem;
}

/* ─────────────────────────── Día a día ─────────────────────────── */

.dias--itinerario { margin-top: 1.25rem; }

.dias--itinerario .dias__dia {
  border-left-color: var(--azul-claro);
  padding-bottom: 1.35rem;
}

.dias__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  font-size: 1.05rem;
}

.dias__numero {
  font-family: var(--fuente);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--blanco);
  background: var(--azul);
  padding: .15rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
}

.dias__ruta { font-weight: 700; }

.dias__ancla {
  font-family: var(--fuente);
  font-size: .9rem;
  text-decoration: none;
  color: var(--azul-borde);
  opacity: 0;
}
.dias__dia:hover .dias__ancla,
.dias__ancla:focus-visible { opacity: 1; color: var(--acento); }

.dias__texto { margin: 0; color: var(--tinta-suave); max-width: 78ch; }

/* ───────────────────── Incluye / no incluye ───────────────────── */

.viaje-listas {
  display: grid;
  gap: 0 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: start;
}
.viaje-listas .bloque--listas { margin-block: 1rem; }

/* ─────────────────────────── Qué ver ─────────────────────────── */

.que-ver {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--blanco);
  overflow: hidden;
}

.que-ver__item + .que-ver__item { border-top: 1px solid var(--linea); }

.que-ver__titulo {
  cursor: pointer;
  padding: .85rem 1rem;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.que-ver__titulo::-webkit-details-marker { display: none; }

.que-ver__titulo::before {
  content: "＋";
  font-weight: 700;
  color: var(--acento);
  flex: 0 0 auto;
  line-height: 1;
}
.que-ver__item[open] .que-ver__titulo::before { content: "－"; }

.que-ver__nombre {
  display: inline;
  margin: 0;
  font-size: 1.1rem;
}

.que-ver__cuerpo { padding: 0 1rem 1rem 2.4rem; }
.que-ver__cuerpo p { margin: 0 0 .6rem; color: var(--tinta-suave); max-width: 78ch; }
.que-ver__enlace { font-size: .9rem; }
.que-ver__enlace a { font-weight: 600; }

/* ────────────────────────── Extensiones ────────────────────────── */

.extensiones-grupo { margin-bottom: 2.5rem; }
.extensiones-grupo:last-child { margin-bottom: 0; }
.extensiones-grupo__titulo {
  font-size: 1.15rem;
  border-bottom: 2px solid var(--azul-borde);
  padding-bottom: .35rem;
  margin-bottom: 1.25rem;
}

/* ────────────────────────── Solicitud ────────────────────────── */

.solicitud { max-width: 900px; }

.aviso {
  border-radius: var(--radio);
  padding: 1rem 1.15rem;
  margin-bottom: 1.5rem;
  border: 1px solid;
}
.aviso p:last-child, .aviso ul:last-child { margin-bottom: 0; }
.aviso--ok    { background: #eef7f1; border-color: #9dc9ae; color: #17492c; }
.aviso--ok a  { color: #17492c; }
.aviso--error { background: #fdf0ef; border-color: #e2a9a4; color: #7c1f19; }
.aviso--error a { color: #7c1f19; }

.solicitud__rejilla {
  display: grid;
  gap: 1rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

.campo { margin: 0; display: flex; flex-direction: column; gap: .3rem; }
.campo--ancho { margin-top: 1rem; }

.campo label { font-weight: 600; font-size: .9rem; color: var(--tinta); }
.campo__obligatorio { color: var(--acento); }
.campo__opcional { font-weight: 400; color: var(--gris); }

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo input[type="number"],
.campo select,
.campo textarea {
  font: inherit;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--azul-borde);
  border-radius: var(--radio);
  padding: .55rem .7rem;
  width: 100%;
}
.campo textarea { resize: vertical; }

.campo input::placeholder,
.campo textarea::placeholder { color: #9aa4b2; }

.campo--error input,
.campo--error select,
.campo--error textarea { border-color: var(--acento); border-width: 2px; }

.campo__error { font-size: .82rem; color: var(--acento-oscuro); font-weight: 600; }

.campo--casilla {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .55rem;
  margin-top: 1rem;
}
.campo--casilla input[type="checkbox"] {
  margin: .25rem 0 0;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--azul);
  flex: 0 0 auto;
}
.campo--casilla label { font-weight: 400; font-size: .92rem; flex: 1 1 260px; }
.campo--casilla .campo__error { flex: 1 0 100%; }

.solicitud__envio { margin-top: 1.5rem; }

/* La trampa antispam se esconde sin display:none, que algunos robots detectan,
   y fuera del orden de tabulación. */
.solicitud__trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.solicitud__legal {
  margin-top: 2rem;
  font-size: .85rem;
  color: var(--tinta-suave);
  border-top: 1px solid var(--linea);
  padding-top: 1rem;
}
.solicitud__legal summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--azul);
}
.solicitud__legal ul { margin-top: .75rem; padding-left: 1.2rem; }

/* ══════════════ Acciones flotantes de conversión (B7) ══════════════

   Los dos botones que produccion tiene fijos a la derecha mientras se hace
   scroll: «Descarga el itinerario» y «¿Quieres financiar tu viaje?».

   Cómo está en produccion: un contenedor de Elementor con
   `sticky:top, sticky_on:[desktop,tablet], sticky_parent:yes, sticky_offset:100`
   en la columna derecha, fuera de la tarjeta de descripción. En la captura de
   móvil (390 px) la clase `elementor-sticky` NO aparece: en móvil no es
   pegajoso, va en el flujo.

   Cómo está aquí, sin una línea de JavaScript, en dos estados:

   1. Estrecho (por defecto): en el flujo, una fila de dos botones dentro del
      contenedor. Siempre visibles, cero riesgo de taparse con nada. Es lo que
      hace produccion en móvil.
   2. Ancho (>= 1412px): fuera del flujo, `position: fixed` pegado al margen
      derecho. El umbral NO es un número redondo elegido a ojo, es una cuenta:
      el contenedor mide `--ancho` (1180px) y el raíl 100px con 16px de aire a
      cada lado, así que hace falta 1180 + 2*(100+16) = 1412px para que el raíl
      quepa ENTERO en el margen sin pisar el texto. Por debajo de eso lo
      pisaría, y un botón de conversión encima del itinerario es peor que un
      botón que no flota. La captura de produccion es de 1440px, o sea que a
      ese ancho el clon flota igual que el original.

   `top` deja libre la cabecera y el índice pegajoso, los dos con z-index más
   alto que este raíl. */

.viaje-acciones {
  width: min(100% - 2rem, var(--ancho));
  margin: 1.25rem auto 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: stretch;
}

.viaje-accion {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex: 1 1 260px;
  min-width: 0;
  padding: .7rem .9rem;
  border: 1px solid var(--azul-borde);
  border-radius: var(--radio);
  background: var(--blanco);
  color: var(--azul);
  text-decoration: none;
  font-weight: 700;
  line-height: 1.25;
}
.viaje-accion:hover {
  border-color: var(--acento);
  color: var(--azul-oscuro);
  box-shadow: var(--sombra);
}

/* El `currentColor` del círculo de los dos SVG sale de aquí: un solo sitio
   donde cambiar el color del icono. En produccion es el rosa #EB5574; aquí se
   usa el acento de la paleta, que es el que B0 midió del logotipo. */
.viaje-accion__icono {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--acento);
}
.viaje-accion__icono svg { display: block; width: 44px; height: 44px; }

.viaje-accion__texto { min-width: 0; }

@media (min-width: 1412px) {
  .viaje-acciones {
    position: fixed;
    top: calc(var(--alto-cabecera) + 6rem);
    right: 1rem;
    /* 35: por encima del índice de secciones (30) y por debajo de la cabecera
       (40). No es capricho. El índice es una barra a todo el ancho, así que
       mientras baja hasta quedarse pegada CRUZA el raíl y, con un z-index más
       bajo, le tapaba el rótulo «Descarga el itinerario» durante todo ese
       tramo. Visto en la captura del clon a 1440x1000 con scrollY=900. Por
       encima del índice no molesta: el raíl vive en el margen derecho y la
       lista de secciones empieza por la izquierda. */
    z-index: 35;
    width: 100px;
    margin: 0;
    flex-direction: column;
    gap: 1rem;
  }

  /* Sin tarjeta ni borde: en produccion el raíl es solo icono y texto sobre el
     fondo de la página. El borde solo vuelve al enfocarlo con el teclado, que
     lo pone el `:focus-visible` global de site.css. */
  .viaje-accion {
    flex: 0 0 auto;
    flex-direction: column;
    text-align: center;
    gap: .45rem;
    padding: .6rem .35rem;
    font-size: .8rem;
    border-color: transparent;
    background: none;
  }
  .viaje-accion:hover {
    border-color: transparent;
    box-shadow: none;
    background: rgb(255 255 255 / 90%);
    border-radius: var(--radio);
  }

  .viaje-accion__icono svg { width: 52px; height: 52px; }
}

/* Pantalla ancha pero muy baja (un portátil de 1440x600, un móvil apaisado):
   el raíl mide unos 230 px y con la cabecera encima no cabe. Vuelve al flujo,
   que es donde siempre se puede leer. */
@media (min-width: 1412px) and (max-height: 520px) {
  .viaje-acciones {
    position: static;
    width: min(100% - 2rem, var(--ancho));
    margin: 1.25rem auto 1.5rem;
    flex-direction: row;
  }
  .viaje-accion { flex: 1 1 260px; flex-direction: row; text-align: left; font-size: 1rem; }
}

/* ════════════════ Icono de categoría (B7) ════════════════
   Arriba a la izquierda del bloque de descripción, como en produccion, donde
   sobresale por la esquina de la tarjeta. Aquí no hay tarjeta con fondo, así
   que se deja alineado con el texto y con el `<h2>` a continuación.
   Sale de la taxonomía `categorias`; el SVG está en línea en
   core/web/views/itinerario/icono-categoria.php. */

.viaje-categoria-icono {
  display: block;
  width: 92px;
  height: 92px;
  margin-bottom: .5rem;
}
.viaje-categoria-icono svg { display: block; width: 100%; height: 100%; }

@media (max-width: 640px) {
  .viaje-categoria-icono { width: 72px; height: 72px; }
}

/* ─────────────────────────── Impresión ─────────────────────────── */

@media print {
  .viaje-indice,
  .respuesta-rapida__acciones,
  .viaje-acciones,
  .solicitud__form { display: none; }
  .que-ver__cuerpo { display: block !important; }
  .seccion--alterna { background: none; }
}