/* ========================================================
   Estilo personalizado tipo TaxiAr para eTaxiMadrid
   Plantilla: Helix Ultimate
   ======================================================== */

/* IMPORTAR FUENTES */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Radio+Canada:wght@400;500;700&display=swap');

/* COLORES BASE */
:root {
  --primary-color2: #ffcc00; /* Amarillo taxi */
  --primary-color33: #ff0000; /* Rojo taxi */
  --primary-color: #e53935; /* Cambia esto por tu rojo exacto si es otro */
  --dark-color: #111;
  --text-color: #333;
  --light-gray: #f7f7f7;
  --white: #fff;
}

/* ============================
   TIPOGRAFÍA GENERAL
   ============================ */
body {
  font-family: 'Inter', sans-serif;
  color: var(--text-color);
  font-size: 16px;
  line-height: 1.6;
  background-color: var(--white);
}

/* ENCABEZADOS */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Radio Canada', sans-serif;
  font-weight: 700;
  /* color: var(--dark-color);*/
  margin-bottom: 0.5em;
}

h1 { font-size: 2.8rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.8rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }

/* ============================
   BOTONES
   ============================ */
.btn,
.button,
.sppb-btn {
  background-color: var(--primary-color);
  color: var(--dark-color);
  border: none;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
}

.btn:hover,
.button:hover,
.sppb-btn:hover {
  background-color: var(--dark-color);
  color: var(--primary-color);
}

/* ============================
   MENÚ PRINCIPAL
   ============================ */
.sp-megamenu-parent > li > a {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  color: var(--dark-color);
  padding: 15px 20px;
}

#sp-menu .sp-megamenu-parent > li.active > a,
#sp-menu .sp-megamenu-parent > li > a:hover,
#sp-menu .sp-megamenu-parent>li:hover>a {
/*  color: var(--primary-color);*/
  color: var(--dark-color);
}

/* ============================
   SECCIÓN CABECERA
   ============================ */
.header {
  background-color: var(--white);
  border-bottom: 1px solid #ddd;
}

.logo img {
  max-height: 60px;
}

/* ============================
   FORMULARIOS
   ============================ */
input, select, textarea {
  border: 1px solid #ccc;
  border-radius: 0.4rem;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  padding: 0.5rem;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--primary-color);
  outline: none;
}

/* ============================
   PIE DE PÁGINA
   ============================ */
footer {
  background-color: var(--dark-color);
  color: var(--white);
  padding: 2rem 0;
  font-size: 0.9rem;
}

footer a {
  color: var(--primary-color);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}


/* ============================
   AJUSTES
   ============================ */
#sp-header {
    height: auto;
}

#sp-header .logo {
  height: 138px;
}

.sp-megamenu-parent > li > a {
  padding-top:39px;
  padding-bottom:39px;
}

/* alineamos verticalmente el logo */
/* Centrado vertical del logo */
#sp-logo .sp-column {
  display: flex;
  align-items: center;
  height: 100%;
}

/* Controlar el tamaño del logo */
.logo img {
  max-height: none;
  height: 200px;
  display: block;
}

.sp-megamenu-parent li > a {
  text-transform: uppercase;
/*  font-size: 16px; */
  font-family: Radio Canada;
}

/* Estilo completo para icono destacado dentro del addon .material-image */
.material-image .sppb-img-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  background-color: var(--primary-color);
  border-radius: 50%;
  margin-bottom: 1rem;
}

.material-image .sppb-img-container img {
  width: 72px;
  height: auto;
  margin: 20px;
  filter: brightness(0) invert(1); /* Icono blanco si es negro originalmente */
}

/* banda roja en diagonal en la cabecera */
#sp-header {
  background: linear-gradient(-45deg, var(--primary-color) 30%, #ffffff 30%);
  color: #fff;
}
/* no mostrar el boton hamburguesa cuando usamos un pc */
@media (min-width: 992px) {
  #sp-header {
    background: linear-gradient(-45deg, var(--primary-color) 50%, #ffffff 50%);
  }

  #offcanvas-toggler {
    display: none !important;
  }
}
/* incrementar el tamaño de la barra top */
#sp-top-bar {
  font-size: 1.2rem;
}