/* ============================================================
   RUOT · Rediseño visual de los PANELES DE GUÍA y TURISTA
   07-nov-2026 · Diseñador Gráfico (mismo sistema que fundador/agencia/socios)
   ------------------------------------------------------------
   REGLA DE LA CASA: solo piel. No cambia HTML ni JS. Reversible.
   Ambos paneles viven en la SPA (js/app.js):
   · Guía   → .cab-pantalla.cab-guia  (rutas #/guia/…)
   · Turista→ .cuenta-contenido .cab-pantalla (rutas #/reservas, #/perfil…)
   No se toca el resto de la web (home, fichas de tour, etc.).
   ============================================================ */

/* ---------- 1 · Cabecera con identidad ----------
   El h1 de cada pantalla pasa de titular suelto a banda de marca.
   teal-aa (#007486) y no teal: blanco encima = 5,47:1 (AA), medido. */
.cab-pantalla.cab-guia .titulo-pantalla,
.cuenta-contenido .cab-pantalla .titulo-pantalla {
  position: relative;
  overflow: hidden;
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--radio-l);
  background: linear-gradient(120deg, var(--c-petroleo) 0%, var(--c-teal-aa) 100%);
  color: var(--c-blanco);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 800;
  letter-spacing: var(--ls-titulo);
  line-height: var(--lh-titulo);
  box-shadow: var(--sombra-media);
  margin: 0 0 var(--sp-3);
}
.cab-pantalla.cab-guia .titulo-pantalla::after,
.cuenta-contenido .cab-pantalla .titulo-pantalla::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(rgba(255, 255, 255, .10) 1.3px, transparent 1.4px) 0 0 / 22px 22px;
  pointer-events: none;
}
/* El claim respira como subtítulo, debajo de la banda. */
.cab-pantalla.cab-guia .claim,
.cuenta-contenido .cab-pantalla .claim {
  color: var(--texto-suave);
  max-width: 70ch;
  margin: 0 0 var(--sp-4);
}

/* ---------- 2 · Tarjetas con jerarquía ---------- */
.guia-dos-columnas .tarjeta,
.cuenta-contenido .tarjeta {
  border: 1px solid var(--borde-suave);
  border-radius: var(--radio-m);
  background: var(--superficie);
  box-shadow: var(--sombra-suave);
}
.guia-dos-columnas .tarjeta > h2,
.cuenta-contenido .tarjeta > h2 {
  letter-spacing: var(--ls-titulo);
}

/* ---------- 3 · Subtítulos de sección ---------- */
.guia-dos-columnas .subtitulo,
.cuenta-contenido .subtitulo {
  font-size: var(--fs-h2);
  font-weight: 800;
  letter-spacing: var(--ls-titulo);
  line-height: var(--lh-titulo);
  margin: var(--sp-5) 0 var(--sp-3);
}

/* ---------- 4 · Columna lateral del guía ---------- */
.guia-aside .tarjeta {
  border-radius: var(--radio-m);
  box-shadow: var(--sombra-suave);
}

/* ---------- 5 · Listas de reservas / preferencias del turista ---------- */
.cuenta-contenido .lista-reservas .tarjeta {
  border-radius: var(--radio-m);
  box-shadow: var(--sombra-suave);
  transition: box-shadow var(--trans);
}
.cuenta-contenido .lista-reservas .tarjeta:hover {
  box-shadow: var(--sombra-media);
}

/* ---------- 6 · Avisos y notas de política: lectura cómoda ---------- */
.cuenta-contenido .nota-politica {
  border-radius: var(--radio-s);
}

/* ---------- 7 · Responsive ---------- */
@media (max-width: 640px) {
  .cab-pantalla.cab-guia .titulo-pantalla,
  .cuenta-contenido .cab-pantalla .titulo-pantalla {
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--radio-m);
    font-size: var(--fs-h2);
  }
  .guia-dos-columnas .subtitulo,
  .cuenta-contenido .subtitulo { font-size: var(--fs-titulo); }
}

/* ---------- 8 · Respeto al usuario (P16) ---------- */
:root[data-reducir-movimiento="true"] .cuenta-contenido .lista-reservas .tarjeta {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .cuenta-contenido .lista-reservas .tarjeta { transition: none; }
}