/* ==========================================================================
   eTaxiMadrid — hoja de estilos propia (plantilla hija de Cassiopeia)
   Fase 2 → Fase 3. Define el sistema de diseño (variables --etaxi-*) y un
   conjunto pequeño de componentes reutilizables (botones, insignias,
   tarjetas de destino). Se carga DESPUÉS del CSS de Cassiopeia (ver
   index.php), así que puede sobrescribir sus estilos base por cascada.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Variables de marca
   Nombres tal como se definieron en el briefing original del proyecto.
   -------------------------------------------------------------------------- */
:root {
  /* Rojo de marca — confirmado en el SVG original del logo (fill:#e6332a) */
  --etaxi-primary: #E6332A;
  --etaxi-primary-hover: #C22A22;
  --etaxi-primary-active: #A82219;
  --etaxi-primary-tint: #FBE7E5; /* fondo para insignias/etiquetas suaves */

  --etaxi-dark: #201A19;   /* texto principal — negro cálido, no #000 puro */
  --etaxi-light: #FBF8F7;  /* fondo de página — blanco cálido */
  --etaxi-text: #201A19;
  --etaxi-text-soft: #5B5250; /* texto secundario / descripciones */
  --etaxi-border: #E6DEDB;

  --etaxi-surface-alt: #F3ECEA;  /* franjas alternas entre secciones */
  --etaxi-surface-card: #FFFFFF; /* tarjetas — blanco puro sobre fondo cálido */

  --etaxi-radius-sm: 6px;
  --etaxi-radius: 10px;
  --etaxi-radius-lg: 14px;

  --etaxi-shadow-sm: 0 1px 2px rgba(32, 26, 25, 0.06), 0 1px 1px rgba(32, 26, 25, 0.04);
  --etaxi-shadow: 0 8px 24px rgba(32, 26, 25, 0.10);

  /* ------------------------------------------------------------------------
     Redefinición de las variables de color propias de Cassiopeia
     (definidas en colors_standard.min.css, dentro de la carpeta del
     PADRE — por eso no se toca ese archivo, solo se redefinen aquí sus
     mismas variables). Los enlaces sí se cambian a nuestro rojo: son
     seguros, comprobado en producción.

     --cassiopeia-color-primary / --cassiopeia-color-hover SE DEJAN EN SU
     VALOR ORIGINAL DE CASSIOPEIA a propósito: al ponerlas en rojo, todo
     el fondo de la cabecera (donde vive el logo) se volvió rojo sólido,
     y el icono/tagline rojos del logo se volvieron ilegibles sobre ese
     fondo. Ya localizado el elemento exacto (inspeccionado en vivo): es
     `header.container-header`, con
     background-image: linear-gradient(135deg, var(--cassiopeia-color-primary) 0%, var(--cassiopeia-color-hover) 100%).
     En vez de volver a tocar las variables compartidas (no sabemos si se
     usan en algún otro sitio), se sobrescribe directamente el fondo de
     ESE selector más abajo, en la sección 0.
     ------------------------------------------------------------------------ */
  --cassiopeia-color-primary: #112855;
  --cassiopeia-color-hover: #424077;
  --link-color: var(--etaxi-primary-hover);
  --link-color-rgb: 194, 42, 34;   /* rgb de --etaxi-primary-hover (#C22A22) */
  --link-hover-color: var(--etaxi-primary-active);
  --link-hover-color-rgb: 168, 34, 25; /* rgb de --etaxi-primary-active (#A82219) */

  --etaxi-container: 1180px;

  --etaxi-font: "Manrope", -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   0) Cabecera / contenedor del logo
   Selector real, confirmado inspeccionando el sitio en vivo:
   header.container-header (contiene el logo dentro de .navbar-brand).
   Cassiopeia lo pinta con un degradado usando las variables de la
   sección anterior; aquí se sustituye por blanco liso, que es el fondo
   real con el que está diseñado el logotipo (icono y tagline en rojo,
   ilegibles sobre un fondo también rojo o muy oscuro).
   -------------------------------------------------------------------------- */
header.container-header {
  background-color: var(--etaxi-surface-card);
  background-image: none;
}

/* El menú (Inicio, Destinos, Contacto, Área de conductores) estaba en
   blanco porque Cassiopeia lo diseñó para leerse sobre el degradado de
   color oscuro que acabamos de quitar. Comprobado en vivo: sin este
   ajuste, el menú se vuelve invisible (blanco sobre blanco). */
header.container-header .container-nav a,
header.container-header .container-nav .mod-menu__heading {
  color: var(--etaxi-dark);
}
header.container-header .container-nav a:hover,
header.container-header .container-nav a:focus,
header.container-header .container-nav .mod-menu__heading:hover,
header.container-header .container-nav .mod-menu__heading:focus {
  color: var(--etaxi-primary-hover);
}

/* 0b) Disposición logo + menú (encontrado y probado en vivo)
   Cassiopeia coloca el logo y el menú en dos ".grid-child" hijos
   directos de header.container-header, y da a cada uno "width: 100%"
   — una regla pensada para encajar en columnas de un grid. El problema:
   header.container-header no tiene ningún display:grid/flex propio en
   ningún sitio (ni en template.min.css ni en ninguna media/@container
   query), así que por defecto es display:block y cada ".grid-child"
   (al 100% de ancho) se apila en su propia fila — de ahí el menú debajo
   del logo. Encima, la imagen del logo no tiene max-height, así que se
   pinta a su tamaño real (aquí, 386×150px) en vez de a un tamaño de
   cabecera razonable. Se soluciona con grid (que además respeta esa
   regla de "width: 100%" de cada columna, cosa que un simple
   "display:flex" no hace) y un límite de alto para el logo. */
header.container-header {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  column-gap: 1.5rem;
  padding-inline: 1.5rem;
}
header.container-header .navbar-brand {
  display: inline-flex;
  align-items: center;
}
header.container-header .navbar-brand img {
  max-height: 56px;
  width: auto;
  display: block;
}
header.container-header .container-nav {
  display: flex;
  justify-content: flex-end;
}
header.container-header .container-nav ul {
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 0.35rem;
  column-gap: 1.5rem;
}
/* 0c) Botón de menú (hamburguesa) para móvil
   Cassiopeia no añade ningún botón/offcanvas a este bloque de menú (el
   markup real es solo <ul class="mod-menu...">, sin toggler), así que
   lo añadimos nosotros: el botón lo crea etaximadrid.js (ver ese
   archivo) y se inserta junto al logo; aquí solo se define su aspecto
   y el estado abierto/cerrado. Sin el JS, este botón simplemente no
   existe y el CSS de abajo no tiene ningún efecto — por eso no hace
   falta que estas reglas comprueben si JS está activo. */
.etx-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.etx-nav-toggle span,
.etx-nav-toggle span::before,
.etx-nav-toggle span::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--etaxi-dark);
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.etx-nav-toggle span {
  position: relative;
}
.etx-nav-toggle span::before,
.etx-nav-toggle span::after {
  position: absolute;
  left: 0;
}
.etx-nav-toggle span::before {
  transform: translateY(-7px);
}
.etx-nav-toggle span::after {
  transform: translateY(7px);
}
header.container-header.etx-nav-open .etx-nav-toggle span {
  background: transparent;
}
header.container-header.etx-nav-open .etx-nav-toggle span::before {
  transform: translateY(0) rotate(45deg);
}
header.container-header.etx-nav-open .etx-nav-toggle span::after {
  transform: translateY(0) rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
  .etx-nav-toggle span,
  .etx-nav-toggle span::before,
  .etx-nav-toggle span::after {
    transition: none;
  }
}

/* Por debajo de este ancho no cabe el logo + los 4 enlaces en una fila
   sin apretarlos: se muestra el botón de arriba y el menú se oculta
   hasta que se abre (header.etx-nav-open), en vez de forzar la fila o
   dejarlo siempre visible en lista larga. */
@media (max-width: 700px) {
  header.container-header {
    grid-template-columns: 1fr;
    row-gap: 0;
    padding-block: 0.6rem;
  }
  header.container-header > .grid-child:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  header.container-header .navbar-brand img {
    max-height: 44px;
  }
  .etx-nav-toggle {
    display: inline-flex;
  }
  header.container-header .container-nav {
    display: none;
    justify-content: flex-start;
    padding-top: 0.5rem;
  }
  header.container-header.etx-nav-open .container-nav {
    display: flex;
  }
  header.container-header .container-nav ul {
    justify-content: flex-start;
    column-gap: 1rem;
    row-gap: 0.4rem;
  }
}

/* 0d) Submenú de "Destinos" (Aeropuerto / IFEMA)
   Cassiopeia trae media/mod_menu/js/menu.min.js, que añade la clase
   "show-menu" al <ul> del submenú al pasar el ratón por "Destinos" —
   pero ninguna hoja de estilo de Cassiopeia da estilo a ".show-menu",
   así que no se veía nunca (esa parte la completa el CSS de aquí
   abajo). Además, comprobado en vivo disparando los eventos reales:
   su manejador de "mouseout" es ingenuo y cierra el submenú en cuanto
   el ratón sale del propio enlace "Destinos", sin comprobar si vas
   hacia el submenú — combinado con el hueco (margen) entre el enlace
   y el panel, al bajar el ratón para elegir una opción se cruza una
   zona que no es ni el enlace ni el panel, y el menú se cierra antes
   de llegar. En vez de pelearnos con ese script (no es nuestro y no
   podemos corregirlo), etaximadrid.js gestiona el submenú por su
   cuenta con su propia clase, "etx-submenu-open", con mouseenter/
   mouseleave (a diferencia de mouseover/mouseout, no se disparan al
   moverse entre el enlace y su propio submenú) y también por click
   (para móvil/teclado). El CSS de abajo da estilo a las dos clases —
   "show-menu" se deja por si el mecanismo de Joomla llega a
   funcionar bien en el futuro, no estorba.

   El elemento de "Destinos" en sí puede ser un <a> (si el ítem de menú
   lleva un enlace propio) o un <span class="mod-menu__heading"> (si es
   de tipo "Encabezado", sin URL — el caso actual: no tiene página
   propia, solo abre el desplegable). Los selectores de abajo cubren
   los dos casos con :is(a, span); el span no tiene cursor de mano por
   defecto al no ser un enlace, así que se añade a mano. */
header.container-header .mod-menu .parent > :is(a, span) {
  cursor: pointer;
}
header.container-header .mod-menu .parent > :is(a, span)::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  vertical-align: middle;
  opacity: 0.55;
}
header.container-header .mod-menu .parent > ul:is(.show-menu, .etx-submenu-open) {
  display: block;
}

/* Escritorio: panel flotante bajo "Destinos". */
@media (min-width: 701px) {
  header.container-header .mod-menu .parent > ul:is(.show-menu, .etx-submenu-open) {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    margin: 0.5rem 0 0;
    padding: 0.5rem 0;
    list-style: none;
    background: var(--etaxi-surface-card);
    border: 1px solid var(--etaxi-border);
    border-radius: var(--etaxi-radius-sm);
    box-shadow: var(--etaxi-shadow);
    z-index: 20;
  }
  /* Puente invisible que rellena el hueco del margen de arriba, para
     que el área "encima del submenú" sea continua con el panel — ver
     la nota de más arriba sobre por qué hace falta. */
  header.container-header .mod-menu .parent > ul:is(.show-menu, .etx-submenu-open)::before {
    content: "";
    position: absolute;
    top: -0.5rem;
    left: 0;
    right: 0;
    height: 0.5rem;
  }
  header.container-header .mod-menu .parent > ul:is(.show-menu, .etx-submenu-open) a {
    display: block;
    padding: 0.5rem 1.25rem;
    color: var(--etaxi-dark);
    white-space: nowrap;
  }
  header.container-header .mod-menu .parent > ul:is(.show-menu, .etx-submenu-open) a:hover,
  header.container-header .mod-menu .parent > ul:is(.show-menu, .etx-submenu-open) a:focus-visible {
    color: var(--etaxi-primary-hover);
    background: var(--etaxi-surface-alt);
  }
}

/* Móvil: lista anidada e indentada bajo "Destinos", sin flotar (ya
   estamos dentro del panel del menú, que ya tiene su propio scroll). */
@media (max-width: 700px) {
  header.container-header .mod-menu .parent > ul:is(.show-menu, .etx-submenu-open) {
    list-style: none;
    margin: 0.35rem 0 0.5rem;
    padding-left: 1rem;
    border-left: 2px solid var(--etaxi-border);
  }
  header.container-header .mod-menu .parent > ul:is(.show-menu, .etx-submenu-open) a {
    display: block;
    padding: 0.35rem 0;
    color: var(--etaxi-text-soft);
  }
  header.container-header .mod-menu .parent > ul:is(.show-menu, .etx-submenu-open) a:hover,
  header.container-header .mod-menu .parent > ul:is(.show-menu, .etx-submenu-open) a:focus-visible {
    color: var(--etaxi-primary-hover);
  }
}

/* --------------------------------------------------------------------------
   2) Tipografía base
   Sustituye la fuente por defecto de Cassiopeia por Manrope en todo el
   sitio (la misma familia que usa el logotipo).
   -------------------------------------------------------------------------- */
body {
  font-family: var(--etaxi-font);
  color: var(--etaxi-text);
  background: var(--etaxi-light);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--etaxi-font);
  font-weight: 800;
  color: var(--etaxi-dark);
}

a {
  color: var(--etaxi-primary-hover);
}
a:hover {
  color: var(--etaxi-primary-active);
}

/* Foco visible en todos los elementos interactivos (accesibilidad) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--etaxi-primary-hover);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3) Botones
   Un único botón de acción principal (rojo de marca) en todo el sitio,
   para que "Reservar taxi" no compita nunca con otros enlaces.
   Prefijo etx- para no chocar con las clases de Bootstrap de Cassiopeia.
   -------------------------------------------------------------------------- */
.etx-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--etaxi-font);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  padding: 0.85em 1.5em;
  border-radius: var(--etaxi-radius-sm);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.etx-btn-primary {
  background: var(--etaxi-primary);
  color: #fff;
}
.etx-btn-primary:hover,
.etx-btn-primary:focus-visible {
  background: var(--etaxi-primary-hover);
  color: #fff;
}
.etx-btn-primary:active {
  background: var(--etaxi-primary-active);
}

.etx-btn-outline {
  background: transparent;
  color: var(--etaxi-dark);
  border-color: var(--etaxi-border);
}
.etx-btn-outline:hover {
  border-color: var(--etaxi-text-soft);
  color: var(--etaxi-dark);
}

/* Variante para usar sobre foto/fondo oscuro (p.ej. el hero) */
.etx-btn-outline-dark {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.etx-btn-outline-dark:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.etx-btn-ghost {
  background: transparent;
  color: var(--etaxi-primary-hover);
  border-color: transparent;
  padding-left: 0.25em;
  padding-right: 0.25em;
}
.etx-btn-ghost:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   4) Insignias circulares de "ventajas"
   Elemento reconocible del sitio actual (círculo rojo, icono blanco) —
   se conserva la forma, se sustituye el propio icono por un set lineal
   propio y coherente.
   -------------------------------------------------------------------------- */
.etx-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--etaxi-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.etx-badge svg {
  width: 26px;
  height: 26px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.etx-advantage {
  text-align: left;
}
.etx-advantage h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0.75em 0 0.25em;
}
.etx-advantage p {
  font-size: 0.9rem;
  color: var(--etaxi-text-soft);
  margin: 0;
}

/* --------------------------------------------------------------------------
   5) Tarjeta de destino
   Patrón reutilizable para Aeropuerto, IFEMA, Estaciones y futuros
   destinos — sustituye a las páginas individuales de SP Page Builder.
   -------------------------------------------------------------------------- */
.etx-dest-card {
  background: var(--etaxi-surface-card);
  border: 1px solid var(--etaxi-border);
  border-radius: var(--etaxi-radius-lg);
  overflow: hidden;
  box-shadow: var(--etaxi-shadow-sm);
}
.etx-dest-card__banner {
  background: var(--etaxi-dark);
  color: #fff;
  padding: 1.25em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75em;
}
.etx-dest-card__banner svg {
  width: 34px;
  height: 34px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.8;
}
.etx-dest-card__price {
  text-align: right;
}
.etx-dest-card__price .etx-amount {
  font-family: var(--etaxi-font);
  font-size: 1.5rem;
  font-weight: 800;
  display: block;
}
.etx-dest-card__price .etx-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.75;
}
.etx-dest-card__body {
  padding: 1.25em 1.35em 1.4em;
}
.etx-dest-card__body h4 {
  font-size: 1.05rem;
  margin: 0 0 0.5em;
}
.etx-dest-card__body p {
  font-size: 0.88rem;
  color: var(--etaxi-text-soft);
  margin: 0 0 1em;
}
.etx-dest-card__body .etx-btn {
  width: 100%;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   6) Utilidades
   -------------------------------------------------------------------------- */
.etx-container {
  max-width: var(--etaxi-container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.etx-surface-alt {
  background: var(--etaxi-surface-alt);
}

/* --------------------------------------------------------------------------
   7) Hero de portada (Fase 4)
   Foto real con velo oscuro en degradado (igual que el sitio actual),
   con la tipografía y el botón nuevos encima. Ver fase4-portada.html
   para el marcado y las notas sobre dónde subir la foto.
   -------------------------------------------------------------------------- */
.etx-hero {
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}
.etx-hero__inner {
  /* Mismo ancho/centrado/margen que .etx-container (sección 6), para que
     el texto del hero quede alineado con las tarjetas de las secciones
     de debajo en vez de pegado al borde de la ventana. El límite de
     lectura del titular/párrafo sigue viniendo del max-width en "ch" de
     .etx-hero h1/p, no de aquí. */
  width: 100%;
  max-width: var(--etaxi-container);
  margin-inline: auto;
  padding: 4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.etx-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
}
.etx-hero__eyebrow .etx-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--etaxi-primary);
  display: inline-block;
}
.etx-hero h1 {
  color: #fff;
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.7rem);
  line-height: 1.1;
  max-width: 12ch;
  margin: 0;
}
.etx-hero p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
  max-width: 40ch;
  margin: 0;
}
.etx-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.4rem;
}
@media (max-width: 640px) {
  .etx-hero__inner {
    max-width: none;
    padding: 2.75rem 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   8) Secciones de contenido genéricas
   -------------------------------------------------------------------------- */
.etx-section {
  padding: 3.5rem 0;
}
.etx-section-header {
  max-width: 62ch;
  margin-bottom: 2rem;
}
.etx-section-header h2 {
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  margin: 0 0 0.5rem;
}
.etx-section-header p {
  color: var(--etaxi-text-soft);
  margin: 0;
}
.etx-section-header.etx-center {
  margin-inline: auto;
  text-align: center;
}

.etx-intro {
  max-width: 68ch;
  color: var(--etaxi-text-soft);
  font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   9) Rejillas (ventajas / destinos)
   -------------------------------------------------------------------------- */
.etx-advantages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}
@media (max-width: 860px) {
  .etx-advantages {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}
@media (max-width: 480px) {
  .etx-advantages {
    grid-template-columns: 1fr;
  }
}

.etx-destinations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

/* --------------------------------------------------------------------------
   10) Bloque de reserva destacado
   La reserva es el objetivo principal del sitio (ya no hay app externa:
   el formulario de ConvertForms vive en la página "Reservar taxi", este
   bloque es el CTA que lleva hasta allí desde la portada y desde el
   resto de páginas).
   -------------------------------------------------------------------------- */
.etx-reserva {
  background: var(--etaxi-dark);
  border-radius: var(--etaxi-radius-lg);
  padding: 2.75rem 2rem;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.etx-reserva h2 {
  color: #fff;
  margin: 0;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
}
.etx-reserva p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 48ch;
  margin: 0;
}