/* =========================================================
   MATIC — styles.css (limpio y comentado)
   - Paleta y base
   - Header + menú
   - Widget hero (grande) y widget compacto (header)
   - Carrusel
   ========================================================= */

/* --- Paleta / tokens --- */
:root{
  --brand:#0057B8;    /* azul Matic */
  --accent:#FFB81C;
  --fg:#1A1A1A;
  --muted:#555;
  --bg:#F5F6FA;
  --white:#fff;
  --border:#E5E5E5;

  --radius-sm:10px;
  --radius:12px;
  --radius-lg:16px;

  --container:1140px;
}

/* --- Reset suave + tipografía --- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ height:100%; }
body{
  margin:0;
  background:#fff; /* ✅ fondo blanco en toda la web */
  color:var(--fg);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.45;
}

a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
img,picture,svg{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{ margin:0 0 .5rem; line-height:1.2; }
p{ margin:0 0 1rem; color:var(--muted); }
.container{ width:100%; max-width:var(--container); margin:0 auto; padding-inline:16px; }
hr{ border:0; border-top:1px solid var(--border); margin:24px 0; }
*,*::before,*::after{ box-shadow:none !important; } /* sin sombras */

/* --- Botones/inputs --- */
button,.btn,[role="button"],input[type="button"],input[type="submit"]{
  appearance:none; cursor:pointer; background:var(--brand); color:#fff;
  border:1px solid var(--brand); border-radius:var(--radius); padding:12px 18px; font-weight:600;
}
button:hover,.btn:hover{ opacity:.95; }
input[type="text"],input[type="email"],input[type="tel"],input[type="search"],input[type="date"],select,textarea{
  width:100%; background:#fff; color:var(--fg); border:1px solid var(--border);
  border-radius:var(--radius); padding:10px 12px; outline:none;
}
input:focus,select:focus,textarea:focus{ border-color:var(--brand); }

/* =========================================================
   HEADER + menú hamburguesa (sticky)
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:60;
  background:#fff; border-bottom:1px solid #fff; /* sin sombra */
}
.header-row{
  display:flex; align-items:center; gap:20px; min-height:64px; padding-block:6px;
}
.logo-link{ flex:0 0 auto; }
.nav__toggle{ margin-left:auto; display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:var(--fg); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.5rem .65rem; line-height:1;
}

/* --- Menú panel (dropdown alineado al botón) --- */
.header-row{ position:relative; }
#menu{
  position:fixed; top:64px; right:16px; z-index:1000;
  width:260px; background:#fff; border:1px solid var(--border); border-radius:12px;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
  padding:10px 0;
}
#menu.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
#menu::before{
  content:""; position:absolute; top:-7px; right:28px; width:12px; height:12px;
  background:#fff; border-left:1px solid var(--border); border-top:1px solid var(--border);
  transform:rotate(45deg); border-radius:2px 0 0 0; z-index:1001;
}
#menu a{ display:flex; align-items:center; gap:10px; color:var(--fg); padding:10px 16px; border-radius:10px; }
#menu a:hover{ background:#F8F9FB; }

/* iconos inline (azul Matic) */
#menu a[href="#hero"]::before{ content:""; width:18px; height:18px; background:no-repeat center/18px 18px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230057B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12l9-9 9 9'/><path d='M9 21V9h6v12'/></svg>"); }
#menu a[href="#flota"]::before{ content:""; width:18px; height:18px; background:no-repeat center/18px 18px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230057B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='7' rx='2'/><path d='M5 11l2-4h10l2 4'/><circle cx='7.5' cy='18.5' r='1.5'/><circle cx='16.5' cy='18.5' r='1.5'/></svg>"); }
#menu a[href="#faq"]::before{ content:""; width:18px; height:18px; background:no-repeat center/18px 18px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230057B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 9a3 3 0 1 1 6 0c0 1.5-1 2-2 3v2'/><line x1='12' y1='19' x2='12' y2='19'/><rect x='3' y='3' width='18' height='18' rx='4'/></svg>"); }
#menu a[href="#contacto"]::before{ content:""; width:18px; height:18px; background:no-repeat center/18px 18px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230057B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16v16H4z'/><path d='M22 6l-10 7L2 6'/></svg>"); }

/* =========================================================
   HERO + Widget grande (estilo barra)
   ========================================================= */
/* --- HERO modernizado tipo bloque (no pantalla completa) --- */
.hero{
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* 🔹 Dimensiones parecidas al bloque de Turo */
  max-width: 1200px;       /* ancho máximo del bloque */
  margin: 40px auto;       /* centrado con margen superior/inferior */
  padding: 80px 40px;      /* espacio interno */
  border-radius: 18px;     /* bordes suaves */
  overflow: hidden;        /* recorta exceso del fondo */
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);

  /* 🔹 Fija la altura del área visible (para control visual) */
  min-height: 320px;
}

/* capa semitransparente (más sutil que antes) */
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(255, 255, 255); /* leve oscurecimiento */
  pointer-events: none;
}

/* texto centrado dentro del hero */
.hero > .container{
  position: relative;
  z-index: 1;
  text-align: center;
}

.hero__title{
  color: #fff;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 800;
  margin-bottom: 10px;
}

.hero__subtitle{
  color: rgba(255,255,255,.9);
  font-size: 1.1rem;
  margin-bottom: 25px;
}

.hero::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.12); pointer-events:none; }
.hero > *{ position:relative; z-index:1; }
.hero__title{ color:#fff; font-size:clamp(28px,4.2vw,48px); font-weight:800; }
.hero__subtitle{ color:rgba(255,255,255,.92); font-size:clamp(15px,1.4vw,18px); }

/* barra grande */
.search-widget{
  background:#fff; border:1px solid var(--border); border-radius:16px;
  padding:10px; max-width:980px; margin:14px auto 0;
}
.widget-content{ display:flex; align-items:center; gap:15px; padding:0 10px; }
.search-fields{
  display:flex; flex:1; gap:10px; background:var(--bg);
  padding:12px; border-radius:12px; border:1px solid var(--border);
}
.search-field{ flex:1; display:flex; flex-direction:column; gap:6px; }
.search-field label{
  font-size:12px; font-weight:600; color:#666; text-transform:uppercase; letter-spacing:.5px;
}
.search-input{
  background:#fff; color:var(--fg); border:1px solid var(--border);
  border-radius:12px; padding:10px 12px; outline:none; cursor:pointer;
}
.search-input::placeholder{ color:#999; }
.search-button{
  background:var(--brand); color:#fff; border:1px solid var(--brand);
  border-radius:12px; width:50px; height:50px; display:flex; align-items:center; justify-content:center;
  font-size:20px; line-height:1; cursor:pointer;
}
.search-button:hover{ opacity:.95; }

/* =========================================================
   Widget compacto (header) — aparece solo con scroll
   ========================================================= */
.compact-widget{ display:none; flex:1 1 auto; margin:0 8px; }
.site-header.is-compact .compact-widget{ display:flex; }         /* visible con scroll */
.site-header.is-compact ~ .hero .search-widget{ display:none; }  /* oculta la barra del hero */

.compact-search{
  display:flex; align-items:center; background:#fff;
  border:1px solid var(--border); border-radius:25px; padding:8px 12px;
}
.compact-field{ flex:1 1 0; padding:6px 12px; border-right:1px solid var(--border); cursor:pointer; }
.compact-field:last-child{ border-right:0; }
.compact-field .label{ font-size:11px; font-weight:600; color:#666; text-transform:uppercase; letter-spacing:.5px; line-height:1.2; }
.compact-field .value{ font-size:14px; font-weight:500; color:var(--fg); }
.compact-field .value.placeholder{ color:#999; }

@media(max-width:900px){
  .compact-widget{ display:none !important; } /* en móvil, solo la barra del hero */
  .search-fields{ flex-wrap:wrap; }
  .search-input{ width:100%; }
}

/* =========================================================
   Carrusel (plano, sin sombras)
   ========================================================= */
.carousel{ background:#fff; border:none !important; }
.carousel__viewport,.carousel__track,.slide{ border:0 !important; background:transparent; }
.slide img{ display:block; width:100%; height:auto; }
.carousel__btn{ background:transparent; border:1px solid var(--border); width:40px; height:40px; border-radius:var(--radius-sm); }
.carousel__btn:hover{ background:#F8F9FB; }
.carousel__dots button{ width:8px; height:8px; border-radius:999px; border:1px solid var(--border); background:#fff; opacity:.7; }
.carousel__dots button[aria-current="true"]{ opacity:1; border-color:var(--brand); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ background:#fff; border-top:1px solid var(--border); padding:24px 0; text-align:center; }
/* ===== CARRUSEL ===== */
.carousel-section{
  background: #fff;
  padding: 40px 0;
  display: flex;
  justify-content: center;
}

.carousel-container{
  position: relative;
  width: 100%;
  max-width: 1200px; /* mismo ancho que el widget */
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
}

.carousel{
  width: 100%;
  overflow: hidden;
}

.carousel-track{
  display: flex;
  transition: transform 0.6s ease-in-out;
  width: 100%;
}

.carousel-track img{
  width: 100%;
  height: 500px; /* ajusta si quieres más o menos alto */
  object-fit: cover;
}

/* Botones laterales */
.carousel-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.9);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 22px;
  cursor: pointer;
  transition: background 0.3s ease;
  z-index: 10;
}
.carousel-btn:hover{
  background: #0071e3; /* azul Matic */
  color: #fff;
}
.carousel-btn.prev{ left: 15px; }
.carousel-btn.next{ right: 15px; }

/* Dots de navegación */
.carousel-dots{
  display: flex;
  justify-content: center;
  margin-top: 15px;
  gap: 8px;
}
.carousel-dots button{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #ccc;
  cursor: pointer;
  transition: all 0.3s ease;
}
.carousel-dots button[aria-current="true"]{
  background: #0071e3; /* color Matic principal */
}
/* ===== CARRUSEL ===== */
.carousel-section {
  background: #fff;
  padding: 40px 0;
  display: flex;
  justify-content: center;
}

.carousel-container {
  position: relative;
  width: 100%;
  max-width: 1200px; /* mismo ancho que el widget */
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
}

.carousel {
  width: 100%;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.6s ease-in-out;
  width: 100%;
}

.carousel-track img {
  width: 100%;
  height: 350px; /* ✅ altura reducida tipo galería */
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

/* Botones laterales */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 22px;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
  z-index: 10;
}
.carousel-btn:hover {
  background: #0071e3; /* azul Matic */
  color: #fff;
}
.carousel-btn.prev {
  left: 15px;
}
.carousel-btn.next {
  right: 15px;
}

/* Dots de navegación */
.carousel-dots {
  display: flex;
  justify-content: center;
  margin-top: 15px;
  gap: 8px;
}
.carousel-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #ccc;
  cursor: pointer;
  transition: all 0.3s ease;
}
.carousel-dots button[aria-current="true"] {
  background: #0071e3; /* color Matic principal */
}
/* ===== CARRUSEL (flechas superpuestas y dots neutros) ===== */
.carousel-section {
  background: #fff;
  padding: 40px 0;
  display: flex;
  justify-content: center;
}

.carousel-container {
  position: relative;
  width: 100%;
  max-width: 1200px;   /* mismo ancho que el widget/hero */
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
}

.carousel { width: 100%; overflow: hidden; }
.carousel-track {
  display: flex;
  transition: transform 0.5s ease; /* la animación del slide */
  will-change: transform;
}

/* Alto tipo galería */
.carousel-track img {
  width: 100%;
  height: 350px;      /* ✅ lo que pediste */
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

/* Flechas superpuestas (dentro del bloque, centradas) */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.9);
  width: 44px; height: 44px;
  border-radius: 999px;
  font-size: 22px;
  cursor: pointer;
  z-index: 10;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.carousel-btn:hover {
  background: #fff;
  color: var(--brand);
  border-color: var(--brand);
}
.carousel-btn.prev { left: 16px; }
.carousel-btn.next { right: 16px; }

/* Dots neutros (sin azul) */
.carousel-dots {
  display: flex;
  justify-content: center;
  margin-top: 14px;
  gap: 8px;
}
.carousel-dots button {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #e5e5e5;
  cursor: pointer;
  transition: transform .15s ease;
}
.carousel-dots button[aria-current="true"] {
  background: #bdbdbd;   /* gris activo (sin azul) */
  transform: scale(1.1);
}

/* Si prefieres ocultar los dots, descomenta: */
/* .carousel-dots { display: none !important; } */
/* Cada slide ocupa todo el ancho del carrusel */
.slide{
  position: relative;
  flex: 0 0 100%;               /* una slide por vista */
}

/* Imagen (la altura ya la definiste en 350px) */
.slide img{
  width: 100%;
  height: 650px;
  object-fit: cover;
  display: block;
}

/* Etiqueta superpuesta */
.slide figcaption{
  position: absolute;
  top: 16px; left: 16px;
  max-width: min(70%, 560px);
  background: rgba(0,0,0,.55);  /* fondo oscuro translúcido */
  color: #fff;
  padding: 10px 14px;
  border-radius: 14px;
  line-height: 1.2;
  backdrop-filter: blur(2px);    /* sutil, si tu navegador lo soporta */
}

.slide figcaption strong{
  display: block;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 2px;
  letter-spacing: .2px;
}

.slide figcaption span{
  display: block;
  font-size: 14px;
  opacity: .95;
}
.carousel-dots{ display: none !important; }
/* Carrusel: corregir ancho exacto de cada slide */
.carousel { padding: 0; }                 /* sin padding en el viewport */
.carousel-track { gap: 0; }               /* sin espacios entre slides */

/* Cada slide ocupa exactamente el 100% del viewport */
.slide{
  margin: 0;                              /* <figure> trae margen por defecto */
  padding: 0;
  box-sizing: border-box;
  flex: 0 0 100%;
  min-width: 100%;
}
/* === Ajuste visual del widget en el menú sticky === */
.compact-widget {
  flex: 1;                     /* permite que crezca entre logo y menú */
  max-width: 900px;            /* agrandamos el ancho máximo */
  margin: 0 50px;              /* respiración lateral */
}

.compact-search {
  width: 100%;
  justify-content: space-between;
  background: #fff;
  border-radius: 40px;
  padding: 10px 25px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e5e5;
}

.compact-field {
  flex: 1;
  padding: 6px 20px;
  border-right: 1px solid #e5e5e5;
}
.compact-field:last-child {
  border-right: none;
}

.compact-field .label {
  font-size: 11px;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.compact-field .value {
  font-size: 14px;
  font-weight: 500;
  color: #222;
}

.search-button {
  background: #0066ff;
  color: #fff;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  transition: 0.3s ease;
}

.search-button:hover {
  background: #0049b7;
  transform: scale(1.05);
}
/* ===== Modelos destacados ===== */
.featured-cars{ padding: 34px 0; }
.featured-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px;
}
.featured-head h2{ font-size:clamp(20px,2.4vw,28px); }
.featured-link{ font-weight:600; }

.grid-cars{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.car-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  transition: border-color .15s ease, transform .15s ease;
}
.car-card:hover{ border-color: var(--brand); transform: translateY(-2px); }

.car-card__link{ display:block; color:inherit; text-decoration:none; height:100%; }
.car-card__media{ margin:0; }
.car-card__media img{
  width:100%; height:180px; object-fit:cover; display:block;
}
.car-card__body{ padding:12px 14px; }
.car-card__title{ font-size:16px; margin-bottom:4px; }
.car-card__meta{ font-size:14px; color:var(--muted); margin-bottom:8px; }
.car-card__cta{ font-weight:600; color:var(--brand); }

/* ===== Alquileres (4 columnas) ===== */
.rentals{ padding: 34px 0; }
.rentals h2{ font-size:clamp(20px,2.4vw,28px); margin-bottom:16px; }

.grid-info{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
}

.info-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
}
.info-card h3{ margin-bottom:8px; }
.info-card .info-link{ font-weight:600; }
.info-card details summary{ cursor:pointer; }

.btn-outline{
  display:inline-block;
  border:1px solid var(--brand);
  color: var(--brand);
  background:#fff;
  border-radius:12px;
  padding:8px 12px;
  font-weight:600;
}

/* ===== Responsive ===== */
@media (max-width: 1100px){
  .grid-cars, .grid-info{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .grid-cars, .grid-info{ grid-template-columns: 1fr; }
  .car-card__media img{ height: 200px; } /* un poco más alto en móvil */
}
/* ===== Título centrado ===== */
.section-title{
  text-align:center;
  font-size:clamp(22px,2.6vw,32px);
  margin: 6px 0 18px;
}

/* ===== Grid ===== */
.grid-info{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
}

/* ===== Card con icono ===== */
.info-card{
  display:flex;
  gap:12px;
  align-items:flex-start;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
}

.info-icon{
  flex:0 0 44px;
  width:44px; height:44px;
  border:1px solid var(--border);
  border-radius:12px;
  display:grid; place-items:center;
  color: var(--brand);          /* icono en azul Matic */
  background:#fff;
}

.info-content h3{
  margin:0 0 6px;
  font-size:16px;
}
.info-content p{ margin:0 0 8px; }
.info-content ul{ margin:0; padding-left:18px; }
.info-link{ font-weight:600; }
.btn-outline{ margin-top:8px; }

/* Hover sutil: solo borde */
.info-card:hover{ border-color: var(--brand); }

/* Responsive */
@media (max-width:1100px){
  .grid-info{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width:640px){
  .grid-info{ grid-template-columns: 1fr; }
}
/* ===== Card contenedora centrada (sin sombras) ===== */
.card-frame{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  margin-inline:auto;
}

/* ===== FAQ ===== */
.faq{ padding:34px 0; }
.faq-card{
  max-width: 980px;
}

/* items */
.faq-item{
  border:1px solid var(--border);
  border-radius:12px;
  padding:0;
  background:#fff;
  overflow:hidden;
  margin-bottom:10px;
}
.faq-item:last-child{ margin-bottom:0; }

.faq-item > summary{
  list-style:none;
  cursor:pointer;
  padding:14px 16px;
  font-weight:600;
  color:var(--fg);
  position:relative;
}
.faq-item > summary::-webkit-details-marker{ display:none; }

/* chevron */
.faq-item > summary::after{
  content:"▾";
  position:absolute;
  right:14px; top:50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform .15s ease;
  color: var(--muted);
  font-size:14px;
}
.faq-item[open] > summary::after{
  transform: translateY(-50%) rotate(180deg);
}

.faq-body{
  border-top:1px solid var(--border);
  padding:14px 16px;
  color:var(--muted);
}

/* ===== Contacto ===== */
.contact{ padding:34px 0; }
.contact-card{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:18px;
  max-width: 1100px;
}

/* form */
.contact-form label{ display:block; font-weight:600; margin:0 0 6px; }
.contact-form .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.contact-form > div:not(.grid-2){ margin-bottom:12px; }

.btn-primary.full{ width:100%; }
.legal-note{ display:block; margin-top:8px; color:var(--muted); }

/* aside */
.contact-aside .contact-list{ list-style:none; padding:0; margin:0 0 12px; }
.contact-aside .contact-list li{ margin-bottom:6px; }
.map-wrap{
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
}
.map-wrap iframe{ width:100%; height:260px; border:0; }

/* responsive */
@media (max-width: 960px){
  .contact-card{ grid-template-columns:1fr; }
  .contact-form .grid-2{ grid-template-columns:1fr; }
}
/* ===== Paleta Matic (asegura estos tokens) ===== */
:root{
  --brand: #0071e3;        /* azul Matic */
  --brand-2: #22b7c7;      /* turquesa Matic (acento) */
  --fg: #1b1b1b;
  --muted: #6c727f;
  --border: #e6e8ec;
}

/* ===== FAQ (acentos y hover) ===== */
.section-title{
  text-align:center;
  font-size:clamp(22px,2.6vw,32px);
  margin: 6px 0 18px;
}

.faq-card{ max-width: 980px; }
.faq-item{
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  margin-bottom:10px;
  transition: border-color .15s ease;
}
.faq-item:hover{ border-color: var(--brand); }

.faq-item > summary{
  padding:14px 16px;
  font-weight:600;
  color:var(--fg);
}
.faq-item > summary::after{
  content:"▾";
  position:absolute; right:14px; top:50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform .15s ease, color .15s ease;
  color: var(--muted);
}
.faq-item[open] > summary::after{
  transform: translateY(-50%) rotate(180deg);
  color: var(--brand);
}
.faq-body{
  border-top:1px solid var(--border);
  padding:14px 16px;
  color:var(--fg);
}

/* ===== Contacto: botones y campos con acento ===== */
.btn-primary{
  display:inline-block;
  background: var(--brand);
  color:#fff;
  border:1px solid var(--brand);
  border-radius:12px;
  padding:10px 14px;
  font-weight:700;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.btn-primary:hover{ background:#005ac0; border-color:#005ac0; transform: translateY(-1px); }
.btn-primary:active{ transform: translateY(0); }

.btn-outline{
  display:inline-block;
  border:1px solid var(--brand);
  color: var(--brand);
  background:#fff;
  border-radius:12px;
  padding:8px 12px;
  font-weight:700;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .08s ease;
}
.btn-outline:hover{ background:#eff6ff; border-color:#005ac0; color:#005ac0; transform: translateY(-1px); }

.info-link{ color: var(--brand); font-weight:700; }
.info-link:hover{ color:#005ac0; text-decoration: underline; }

/* Inputs y selects con foco Matic */
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  color:var(--fg);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0,113,227,.15);
}
/* WhatsApp FAB */
.whatsapp-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px; height: 56px;
  border-radius: 999px;
  background: #25D366;
  display:grid; place-items:center;
  border: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  z-index: 999;
  transition: transform .1s ease, box-shadow .15s ease;
}
.whatsapp-fab:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.16);
}
/* Botón flotante de WhatsApp estilo oficial */
.whatsapp-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 10px rgba(37, 211, 102, 0.6),
    0 0 20px rgba(37, 211, 102, 0.3);
  z-index: 1000;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.whatsapp-fab:hover {
  transform: scale(1.08);
  box-shadow:
    0 0 12px rgba(37, 211, 102, 0.7),
    0 0 24px rgba(37, 211, 102, 0.4);
}

.whatsapp-fab svg {
  width: 22px;
  height: 22px;
  fill: #fff;
}
/* Botón WhatsApp tipo píldora flotante */
.whatsapp-pill {
  position: fixed;
  right: 22px;
  bottom: 22px;
  background-color: #25D366;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 40px;
  padding: 10px 20px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
  z-index: 999;
}

.whatsapp-pill svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}

.whatsapp-pill:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  background-color: #20c55c;
}
/* =====================================================
   Ajustes visuales finales MATIC
   ===================================================== */

/* 🔹 Enlaces globales: turquesa Matic */
a {
  color: #22b7c7;
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: #0fa1af;
  text-decoration: underline;
}

/* 🔹 Enlaces especiales (botones dentro del contenido) */
a.btn-primary,
a.btn-outline {
  text-decoration: none;
}

/* 🔹 Botón de WhatsApp tipo píldora: versión móvil */
@media (max-width: 600px) {
  .whatsapp-pill {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    padding: 0;
    justify-content: center;
    gap: 0;
  }

  .whatsapp-pill span {
    display: none; /* oculta el texto “Asesor” */
  }

  .whatsapp-pill svg {
    width: 24px;
    height: 24px;
  }
}
/* =====================================================
   CORRECCIÓN DE COLORES - MATIC TURQUESA
   ===================================================== */

/* 🔹 Botón de búsqueda */
.search-button {
  background: #22b7c7 !important;
  color: white !important;
}
.search-button:hover {
  background: #1fa8b5 !important;
  transform: scale(1.05);
}

/* 🔹 Links globales y locales (Ver detalles, etc.) */
a,
a:visited {
  color: #22b7c7 !important;
}
a:hover {
  color: #0fa1af !important;
  text-decoration: underline;
}

/* 🔹 Links dentro de cards (por si hay estilos más específicos) */
.info-icon,
.car-card__cta,
.card a, 
.section a,
.flota a {
  color: #22b7c7 !important;
}
.card a:hover,
.section a:hover,
.flota a:hover {
  color: #0fa1af !important;
}

/* 🔹 Íconos o botones que usen background azul */
button,
.btn-primary {
  background-color: #22b7c7 !important;
  border-color: #22b7c7 !important;
  
}
button:hover,
.btn-primary:hover {
  background-color: #1fa8b5 !important;
  border-color: #1fa8b5 !important;
}
/* Flechas centradas y por encima de todo */
.carousel { position: relative; }
.carousel__btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 20;                 /* por encima de imágenes/captions */
  pointer-events: auto;        /* asegúrate de que reciban el click */
}
.carousel__btn.prev { left: 14px; }
.carousel__btn.next { right: 14px; }

.carousel__btn:hover { background: var(--brand-ghost); }

/* Icono dentro (si usas ‹ y › como texto, esto solo mejora legibilidad) */
.carousel__btn { font-size: 24px; line-height: 1; color: var(--brand); }
/* --- HEADER SIEMPRE VISIBLE --- */
.site-header{
  position: sticky;        /* se queda pegado al hacer scroll */
  top: 0;
  z-index: 3000;           /* por encima de carrusel y demás */
  background: #fff;        /* blanco para que no “se funda” con el fondo */
  border-bottom: 1px solid var(--border);
}

/* Asegura que nada tape al header */
.carousel,
.hero,
main { position: relative; z-index: 1; }

.site-header{ position: fixed; left:0; right:0; }
body{ padding-top: 76px; }   /* 76px = altura del header */

/* Contenedor del carrusel */
.carousel-section { padding: 12px 0; }
.carousel-container { position: relative; overflow: hidden; }

/* Track y slides (funciona igual con <figure>) */
#carouselTrack{ display: flex; gap: 0; }
.slide{ flex: 0 0 100%; min-width: 100%; margin: 0; padding: 0; }
.slide img{ width:100%; height:auto; display:block; }

/* Flechas (tus clases .carousel-btn prev/next) */
.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  border:none; background:#22b7c7; color:#fff; font-size:22px;
  cursor:pointer; z-index:20;
}
.carousel-btn.prev{ left:18px; }
.carousel-btn.next{ right:18px; }
.carousel-btn:hover{ filter:brightness(.95); }





/* Por si algún overlay del carrusel intercepta el puntero cerca del header */
.carousel * { pointer-events: auto; }

/* =========================
   Responsive — tablets & mobile
   (añadido sin romper estilos existentes)
========================= */

/* Base tweaks for better scaling */
img, video { max-width: 100%; height: auto; }

/* Layout helpers */
.container { padding-left: min(5vw, 24px); padding-right: min(5vw, 24px); }

/* Carousel heights adapt */
.carousel-track img,
.slide img { height: 350px; object-fit: cover; display:block; }

/* Tablet */
@media (max-width: 1024px){
  html { font-size: 15px; }
  .hero { min-height: 64vh; }
  .hero .hero__title { font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.15; }
  .hero .hero__subtitle { font-size: clamp(1rem, 1.8vw, 1.125rem); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
  .carousel-track img,
  .slide img { height: 280px; }
  header.site-header .nav__menu { gap: 12px; }
}

/* Mobile */
@media (max-width: 768px){
  html { font-size: 14.5px; }
  body { padding-top: 76px; } /* por header fixed */
  .hero { padding: 64px 0 40px; min-height: 56vh; }
  .hero .hero__title { font-size: clamp(1.6rem, 6vw, 2.1rem); }
  .hero .hero__subtitle { font-size: 1rem; }
  .grid, .grid-2, .grid-3 { display:grid; grid-template-columns: 1fr; gap: 14px; }
  .cards, .car-list { grid-template-columns: 1fr !important; }
  .btn, button, .cta .btn { width: 100%; }
  .car-card__media img { height: 200px; object-fit: cover; }
  .carousel-track img,
  .slide img { height: 220px; }
  .whatsapp-pill { left: 12px; right: 12px; bottom: 14px; transform:none; width:auto; }
  footer .footer__cols { grid-template-columns: 1fr; gap: 18px; }
}

/* Small phones */
@media (max-width: 480px){
  .hero { padding: 56px 0 32px; }
  .hero .hero__title { font-size: clamp(1.4rem, 7.2vw, 1.8rem); }
  .hero .hero__subtitle { font-size: 0.95rem; }
  .carousel-track img,
  .slide img { height: 200px; }
  .car-card__media img { height: 180px; }
  .header .logo img { max-height: 28px; }
}

/* Mejora targets táctiles */
@media (hover:none){
  .nav__menu a,
  .carousel .arrow { min-height: 44px; min-width: 44px; }
}


/* WhatsApp pill — base (desktop/tablet) */
.whatsapp-pill{
  position: fixed;
  right: 24px;          /* usar solo right, SIN left */
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: #25D366;
  color: #fff;
  border-radius: 9999px;
  box-shadow: 0 8px 20px rgba(37,211,102,.35);
  z-index: 9999;
  text-decoration: none;
}

.whatsapp-pill svg{
  width: 24px; height: 24px; display:block; fill:#fff;
}

.whatsapp-pill span{
  font-weight: 600; line-height: 1;
}

/* ==== Carrusel: mostrar el auto completo (sin recortes) ==== */
.carousel-container{ --car-h: clamp(220px, 38vw, 420px); }

.carousel-track{ height: var(--car-h); }
.slide{ 
  height: var(--car-h); 
  display:flex; 
  align-items:center; 
  justify-content:center; 
}

.slide img{
  width: 100%;
  height: 100%;
  object-fit: contain !important; /* antes era cover */
  background: #fff;               /* “letterbox” blanco donde falte */
  display: block;
  border-radius: 14px;             /* coincide con esquinas del carrusel */
  padding: 4px;                    /* evita pegarse a los bordes */
}

/* Ajuste responsive de altura */
@media (max-width: 1024px){
  .carousel-container{ --car-h: clamp(200px, 44vw, 360px); }
}
@media (max-width: 768px){
  .carousel-container{ --car-h: clamp(180px, 52vw, 300px); }
}
@media (max-width: 480px){
  .carousel-container{ --car-h: clamp(160px, 58vw, 260px); }
}

/* ===== Toast de notificación ===== */
.toast{
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(16px);
  min-width: 240px;
  max-width: min(92vw, 520px);
  padding: 12px 16px;
  border-radius: 12px;
  background: #111;
  color: #fff;
  font-size: 15px;
  line-height: 1.3;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 99999;
}
.toast--show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.toast--success{ background: #22b7c7; color:#fff; } /* color marca */
.toast--error{ background: #e5484d; color:#fff; }



/* .carousel { overflow: hidden; padding: 0; } carrusel mas pequeño donde se puede apreciar los vehiculos de distinta forma
.carousel-track { display: flex; gap: 0; }

.slide{
  margin: 0;                figure sin margen por defecto 
  padding: 0;
  flex: 0 0 100%;
  min-width: 100%;
  box-sizing: border-box;
}

/* Imagen completa sin recorte 
.slide img{
  width: 100%;
  height: 350px;
  object-fit: contain;     /* muestra el auto completo 
  background: #fff;        /* “letterbox” blanco donde falte 
  display: block;
}
 */