/* =========================================
   FIXES FORMULARIO — Baligò (estable)
   Se carga después de styles.css
   ========================================= */

#contacte .contact-form{
  /* MISMO look corporativo (marfil/ocre) */
  background: linear-gradient(180deg,#f6efe4 0%, #efe2c9 100%) !important;
  border: 1px solid rgba(36,27,18,.12) !important;
  border-radius: 28px !important;
  box-shadow: 0 18px 40px rgba(120,90,40,.18) !important;
  padding: clamp(18px, 4vw, 30px) !important;

  /* clave para que no quede “centrado raro” */
  text-align: left !important;
}

/* Quitar el “recuadro misterioso” decorativo */
#contacte .contact-form::before{
  content: none !important;
  display: none !important;
}

/* Si aún existe el honeypot, que no se vea */
#contacte .contact-form .hp{
  display:none !important;
}

/* Cada etiqueta arriba y su campo debajo (sin líos) */
#contacte .contact-form label{
  display:block !important;
  margin: 0 0 14px 0 !important;
  font-weight: 700 !important;
  color: rgba(36,27,18,.92) !important;
}

#contacte .contact-form label > input,
#contacte .contact-form label > select,
#contacte .contact-form label > textarea{
  display:block !important;
  width:100% !important;
  margin-top: 6px !important;
}

/* Campos limpios */
#contacte .contact-form input,
#contacte .contact-form select,
#contacte .contact-form textarea{
  width:100% !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(36,27,18,.18) !important;
  background: rgba(255,255,255,.85) !important;
  color: rgba(36,27,18,.95) !important;
  font-size: 1rem !important;
}

#contacte .contact-form input:focus,
#contacte .contact-form select:focus,
#contacte .contact-form textarea:focus{
  outline:none !important;
  border-color: rgba(214,162,75,.85) !important;
  box-shadow: 0 0 0 3px rgba(214,162,75,.22) !important;
}

/* Checkbox bonito y alineado */
#contacte .contact-form .consent{
  display:flex !important;
  gap:10px !important;
  align-items:flex-start !important;
  font-weight:600 !important;
  color: rgba(36,27,18,.80) !important;
}

#contacte .contact-form .consent input{
  width:auto !important;
  margin-top: 4px !important;
}

/* Botón corporativo y visible */
#contacte .contact-form button{
  width:100% !important;
  margin-top: 16px !important;
  padding: 14px 16px !important;
  border-radius: 999px !important;
  border:none !important;
  cursor:pointer !important;
  background: linear-gradient(135deg,#A86C1F,#8F5B18) !important;
  color:#fff !important;
  font-weight:800 !important;
  box-shadow: 0 12px 30px rgba(168,108,31,.28) !important;
}
/* =========================================
   FIX MODALS MARQUES — Baligò (estable)
   ========================================= */

/* Por defecto, oculto */
.brand-modal{
  display: none;               /* sin !important aquí */
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(247,242,232,.92);
  align-items: center;
  justify-content: center;
  padding: 22px;
}

/* Cuando JS añade .active, SE TIENE QUE VER sí o sí */
.brand-modal.active{
  display: flex !important;    /* esta es la clave */
}

/* Caja interior del modal */
.brand-modal .modal-content{
  width: min(980px, 100%);
  max-height: 86vh;
  overflow: auto;
  background: #fff;
  border-radius: 22px;
  border: 1px solid rgba(36,27,18,.12);
  box-shadow: 0 30px 80px rgba(36,27,18,.25);
  padding: 26px;
  position: relative;
}

/* Botón cerrar visible */
.brand-modal .modal-close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(36,27,18,.14);
  background: #fff;            /* visible, no transparente */
  color: #241b12;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
}

/* Galería dentro del modal */
.brand-modal .modal-gallery{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.brand-modal .modal-gallery img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(36,27,18,.10);
  display: block;
}

/* Asegurar que las tarjetas son clicables */
.brand-card{
  cursor: pointer;
}
/* ================================
   FIX DEFINITIVO MODALES MARQUES
   ================================ */

/* Forzar visibilidad cuando está activo */
.brand-modal.active {
  display: flex !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  background: rgba(247,242,232,.92) !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Contenido del modal */
.brand-modal .modal-content {
  background: #fff !important;
  border-radius: 22px !important;
  padding: 26px !important;
  max-width: 960px !important;
  max-height: 85vh !important;
  overflow: auto !important;
  box-shadow: 0 30px 80px rgba(36,27,18,.25) !important;
  position: relative !important;
}

/* Botón cerrar visible */
.brand-modal .modal-close {
  background: #fff !important;
  color: #241b12 !important;
  border: 1px solid rgba(36,27,18,.2) !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

/* Las tarjetas son clicables */
.brand-card {
  cursor: pointer;
}
/* =========================================
   FIX CLICS — MARQUES Y SHOWROOM
   ========================================= */

/* Los adornos NO deben captar clics */
.brand-card::before,
.brand-card::after,
.box::before,
.box::after,
.showroom-photo::before,
.showroom-photo::after {
  pointer-events: none !important;
}

/* Las tarjetas de marca SÍ deben recibir clics */
.brand-card {
  position: relative;
  pointer-events: auto !important;
  cursor: pointer;
  z-index: 5;
}

/* Las fotos del showroom SÍ deben recibir clics */
.showroom-photo {
  position: relative;
  pointer-events: auto !important;
  cursor: zoom-in;
  z-index: 5;
}
/* =========================================
   AJUSTES MÓVIL — Baligò
   ========================================= */
@media (max-width: 768px){

  /* Contenedores con más aire */
  .container{
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Hero más compacto */
  h1{
    font-size: 1.9rem;
  }

  .hero{
    padding: 56px 0;
  }

  /* Grids a una sola columna */
  .grid--2,
  .grid--3,
  #marques .grid,
  .contact-grid{
    grid-template-columns: 1fr !important;
  }

  /* Tarjetas clicables más claras */
  .brand-card{
    padding: 22px 18px;
  }

  /* Imágenes de showroom más bajas */
  .showroom-photo{
    height: 180px;
  }

  /* Modales: que no se salgan de la pantalla */
  .brand-modal .modal-content{
    max-height: 90vh;
    padding: 18px;
  }

  /* Botón cerrar más accesible */
  .brand-modal .modal-close{
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
/* Tamaño logo Baligò */
.brand__logo{
  height: px;
  width: auto;
  }
/* Quitar recuadro decorativo del logo */
.brand__mark{
  display: none !important;
}
/* Footer ordenado */
.footer-title{
  font-weight: 700;
  margin-bottom: 8px;
}

.footer-email a{
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}

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

.footer-brand p{
  max-width: 32ch;
}
/* Footer minimalista */
.footer--minimal{
  padding: 36px 0 24px;
}

.footer-minimal{
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.footer-minimal a{
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

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

.footer-brand{
  font-size: 0.95rem;
}

.footer-contact{
  font-size: 0.9rem;
}

.footer-bottom{
  margin-top: 20px;
  text-align: center;
}
/* =========================
   Selector de idioma (header)
   ========================= */
.lang-switch{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(36,27,18,.12);
  background: rgba(255,255,255,.55);
  font-weight: 800;
  letter-spacing: .06em;
  font-size: .78rem;
  line-height: 1;
}

.lang-switch a{
  text-decoration: none;
  color: rgba(36,27,18,.75);
}

.lang-switch a:hover{
  color: rgba(36,27,18,.95);
  text-decoration: underline;
}

.lang-switch a.is-active{
  color: rgba(36,27,18,.98);
  text-decoration: none;
}

/* En móvil, si el menú se oculta, mantenemos el selector visible */
@media (max-width: 900px){
  .lang-switch{
    margin-left: auto;
  }
/* =========================
   Selector de idioma con banderas
   ========================= */
.lang-switch{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(36,27,18,.12);
  background: rgba(255,255,255,.55);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .04em;
}

.lang-switch a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: rgba(36,27,18,.75);
}

.lang-switch a:hover{
  color: rgba(36,27,18,.95);
}

.lang-switch .sep{
  opacity: .4;
  margin: 0 2px;
}

.lang-flag{
  width: 16px;
  height: 12px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}

.lang-flag.is-active,
.lang-switch .is-active{
  filter: saturate(1.2);
  color: rgba(36,27,18,.95);
}

/* En móvil */
@media (max-width: 900px){
  .lang-switch{
    margin-left: auto;
  }
/* =====================================================
   FORZAR TEMA BALIGÒ (CA / FR / ES UNIFICADO)
   ===================================================== */

/* Variables finales de marca (las que ya funcionan en CA y FR) */
:root{
  --bg: #F7F2E8;
  --surface: #ffffff;
  --surface2: #FBF4E7;

  --text: #241B12;
  --muted: #5E5346;

  --accent: #A86C1F;
  --accent2: #D6A24B;
  --accent-soft: #F0DFC2;

  --border: rgba(36,27,18,.12);
  --shadow: 0 18px 40px rgba(120,90,40,.18);
}

/* Fondo general */
body{
  background:
    radial-gradient(1200px 650px at 10% 0%, rgba(214,162,75,.22), transparent 60%),
    radial-gradient(900px 550px at 90% 12%, rgba(168,108,31,.16), transparent 55%),
    var(--bg);
  color: var(--text);
}

/* Header idéntico */
.header{
  background: rgba(247,242,232,.92) !important;
  border-bottom: 1px solid var(--border);
}

/* Secciones */
.section--alt{
  background: var(--surface2);
}

/* Recuadros */
.box,
.card,
.brand-card,
.contact-form{
  background: linear-gradient(180deg,#f6efe4 0%, #efe2c9 100%);
  border: 1px solid var(--border);
  border-radius: 28px;
  box-shadow: var(--shadow);
}

/* Botones */
.btn{
  background: linear-gradient(135deg, var(--accent), #8F5B18);
  color: #fff;
  box-shadow: 0 14px 35px rgba(168,108,31,.25);
}

/* Texto muted */
.muted{
  color: rgba(36,27,18,.70);
}
/* =========================================
   HERO – DISTRIBUCIÓN EQUILIBRADA (CA/ES/FR)
   ========================================= */

/* Grid más estable */
.hero__grid{
  grid-template-columns: 1.15fr 0.85fr;
  align-items: flex-start;
  gap: clamp(32px, 5vw, 72px);
}

/* Columna de texto */
.hero__copy{
  max-width: 60ch;       /* evita líneas eternas */
}

/* Espaciado interno entre bloques */
.hero__copy > * + *{
  margin-top: 16px;
}

/* Badge más separado */
.hero__copy .badge{
  margin-bottom: 12px;
}

/* Título con respiración */
.hero__copy h1{
  margin-top: 0;
  margin-bottom: 16px;
  line-height: 1.15;
}

/* Párrafos lead más aireados */
.hero__copy .lead{
  margin-bottom: 12px;
}

/* Caja de cita */
.hero__copy .box{
  margin-top: 24px;
}

/* Botones */
.hero__cta{
  margin-top: 28px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Card lateral alineada correctamente */
.hero__card{
  margin-top: 12px;
}

/* =============================
   MOBILE
   ============================= */
@media (max-width: 900px){
  .hero__grid{
    grid-template-columns: 1fr;
  }

  .hero__card{
    margin-top: 32px;
  }

  .hero__copy{
    max-width: none;
  }
/* =====================================================
   RESCATE (FUERA DE @media) — HERO BALIGÒ
   Si tu fixes.css tiene llaves mal cerradas, esto aún aplica
   ===================================================== */

.hero__grid{
  grid-template-columns: 1.15fr 0.85fr !important;
  align-items: flex-start !important;
  gap: clamp(32px, 5vw, 72px) !important;
}

.hero__copy{
  max-width: 60ch !important;
}

.hero__copy > * + *{
  margin-top: 16px !important;
}

.hero__copy .badge{
  margin-bottom: 12px !important;
}

.hero__copy h1{
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  line-height: 1.15 !important;
}

.hero__copy .lead{
  margin-bottom: 12px !important;
}

.hero__copy .box{
  margin-top: 24px !important;
}

.hero__cta{
  margin-top: 28px !important;
  display: flex !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}

.hero__card{
  margin-top: 12px !important;
}

@media (max-width: 900px){
  .hero__grid{ grid-template-columns: 1fr !important; }
  .hero__card{ margin-top: 32px !important; }
  .hero__copy{ max-width: none !important; }
}
/* =========================================
   BOTÓN FLOTANTE WHATSAPP
   ========================================= */
.whatsapp-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 58px;
  height: 58px;
  background: #25D366;
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.whatsapp-float img{
  width: 28px;
  height: 28px;
}

/* Más cómodo en móvil */
@media (max-width: 768px){
  .whatsapp-float{
    width: 64px;
    height: 64px;
    right: 14px;
    bottom: 14px;
  }

  .whatsapp-float img{
    width: 32px;
    height: 32px;
  }

/* ================================
   BOTÓN FLOTANTE WHATSAPP
   ================================ */
.whatsapp-float {
  position: fixed;          /* ← CLAVE */
  right: 18px;
  bottom: 18px;

  width: 58px;
  height: 58px;

  background: #25D366;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  z-index: 9999;
}

.whatsapp-float img {
  width: 28px;
  height: 28px;
}

/* Más cómodo en móvil */
@media (max-width: 768px) {
  .whatsapp-float {
    width: 64px;
    height: 64px;
    right: 14px;
    bottom: 14px;
  }

  .whatsapp-float img {
    width: 32px;
    height: 32px;
  }
/* ================================
   WHATSAPP SOLO EN MÓVIL
   ================================ */

/* Oculto por defecto */
.whatsapp-mobile{
  display: none;
}

/* Visible solo en móvil */
@media (max-width: 768px){
  .whatsapp-mobile{
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 24px 0;
    padding: 14px 16px;

    background: #25D366;
    color: #fff;
    font-weight: 800;
    border-radius: 14px;
    text-decoration: none;

    box-shadow: 0 8px 20px rgba(0,0,0,.25);
  }

  .whatsapp-mobile img{
    width: 28px;
    height: 28px;
  }
}/* ================================
   WHATSAPP EN HEADER
   ================================ */

.header .whatsapp-header{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 14px;
  border-radius: 999px;

  background: #25D366;
  color: #fff;
  font-weight: 800;
  font-size: .85rem;
  text-decoration: none;

  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

.header .whatsapp-header img{
  width: 18px;
  height: 18px;
}

/* En desktop lo hacemos más discreto */
@media (min-width: 901px){
  .header .whatsapp-header span{
    display: none; /* solo icono */
  }
}

/* En móvil es protagonista */
@media (max-width: 900px){
  .header .whatsapp-header{
    margin-left: auto;
  }
}