:root{
  --bg:#0b1020;
  --text:#eaf0ff;
  --muted:#a9b4d6;
  --border:rgba(255,255,255,.12);
  --shadow: 0 18px 55px rgba(0,0,0,.35);
  --radius:18px;
  --max:1120px;
  --pad: clamp(16px, 2vw, 24px);
  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}


*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(110,231,255,.14), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(155,140,255,.12), transparent 55%),
    var(--bg);
}

a{ color:inherit; text-decoration:none; }

.container{
  width:min(var(--max), 100% - 2*var(--pad));
  margin-inline:auto;
}

/* HEADER */
.header{
  position:sticky;
  top:0;
  z-index:30;
  background: rgba(11,16,32,.65);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:14px;
}

.brand__mark{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background: linear-gradient(135deg, rgba(110,231,255,.22), rgba(155,140,255,.22));
}

.brand__stack{
  display:grid;
  line-height:1.05;
}

.brand__text{
  font-size:1.1rem;
  font-weight:800;
}

.brand__slogan{
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight:700;
}

.nav__menu{
  display:flex;
  gap:16px;
}

.nav__menu a{
  color:var(--muted);
  font-weight:700;
}

.nav__menu a:hover{
  color:var(--text);
}

/* HERO */
.hero{
  padding: clamp(48px, 8vw, 92px) 0;
}

.hero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 32px;
  align-items:center;
}

.badge{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  display:inline-block;
}

h1{
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  margin: 12px 0;
}

.lead{
  color:var(--muted);
  line-height:1.6;
}

.btn{
  display:inline-block;
  padding: 14px 22px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #6ee7ff, #9b8cff);
  color: #0b1020;
  font-weight:800;
  box-shadow: 0 10px 30px rgba(110,231,255,.25);
}
.btn:hover{
  transform: translateY(-1px);
}

/* SECTIONS */
.section{
  padding: 72px 0;
}

.section--alt{
  background: rgba(255,255,255,.03);
}

.grid{
  display:grid;
  gap:16px;
}

.grid--2{
  grid-template-columns: repeat(2,1fr);
}

.grid--3{
  grid-template-columns: repeat(3,1fr);
}

.box, .card2{
  transition: transform .2s ease, box-shadow .2s ease;
}
.box:hover, .card2:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
/* FOOTER */
.footer{
  padding: 24px 0;
  border-top:1px solid var(--border);
}

.footer__links a{
  color:var(--muted);
  font-weight:700;
}

/* RESPONSIVE */
@media (max-width: 900px){
  .hero__grid,
  .grid--2,
  .grid--3{
    grid-template-columns:1fr;
  }

  .nav__menu{
    display:none;
  }
}
/* ============================= */
/*  AJUSTES DE CALIDEZ VISUAL    */
/* ============================= */

:root{
  --warm-accent: #f5e6c8;
  --warm-soft: #ffe9c7;
}

/* TÍTULOS MÁS SUAVES */
h1, h2, h3{
  letter-spacing: -0.02em;
}

h2{
  margin-bottom: 10px;
}

h2::after{
  content:"";
  display:block;
  width:48px;
  height:3px;
  margin-top:8px;
  background: linear-gradient(90deg, var(--warm-soft), transparent);
  border-radius:3px;
}

/* TEXTO MÁS LEGIBLE */
p{
  line-height:1.75;
}

/* BOTONES MÁS HUMANOS */
.btn{
  padding:14px 26px;
  border-radius:999px;
  background: linear-gradient(135deg, #ffe9c7, #f5e6c8);
  color:#0b1020;
  font-weight:800;
  box-shadow: 0 10px 30px rgba(245,230,200,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}

.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(245,230,200,.45);
}

/* TARJETAS MÁS CÁLIDAS */
.box, .card2{
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(4px);
  transition: transform .2s ease, box-shadow .2s ease;
}

.box:hover, .card2:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
}

/* FORMULARIO MÁS ACOGEDOR */
input, textarea, select{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px;
  padding:12px 14px;
  color:var(--text);
}

input:focus, textarea:focus, select:focus{
  outline:none;
  border-color: var(--warm-soft);
  box-shadow: 0 0 0 3px rgba(255,233,199,.25);
}

/* TEXTO SUAVE */
.muted{
  color: rgba(234,240,255,.75);
}
/* =======================================================
   THEME OVERRIDE — MARFIL + OCRES (Baligò)
   Pegar al FINAL del archivo styles.css
   ======================================================= */

:root{
  /* Fondo marfil */
  --bg: #F7F2E8;          /* marfil principal */
  --surface: #FFFFFF;     /* tarjetas */
  --surface2: #FBF4E7;    /* secciones alternas */

  /* Texto (oscuro cálido, no negro puro) */
  --text: #241B12;
  --muted: #5E5346;

  /* Ocres (acentos) */
  --accent: #A86C1F;      /* ocre principal */
  --accent2: #D6A24B;     /* ocre claro / miel */
  --accent-soft: #F0DFC2; /* crema cálida */

  /* Bordes y sombras (suaves) */
  --border: rgba(36,27,18,.12);
  --shadow: 0 14px 35px rgba(36,27,18,.10);

  /* Tipografía (misma, pero en tema claro se siente mejor) */
  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Fondo general marfil con luz cálida */
body{
  color: var(--text);
  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);
}

/* Header en marfil translúcido */
.header{
  background: rgba(247,242,232,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

/* Enlaces (calidez) */
a{
  color: inherit;
}
.nav__menu a{
  color: rgba(36,27,18,.70);
}
.nav__menu a:hover{
  color: var(--text);
}

/* Marca / icono */
.brand__mark{
  background: linear-gradient(135deg, rgba(214,162,75,.35), rgba(168,108,31,.28));
  border: 1px solid rgba(36,27,18,.10);
  box-shadow: var(--shadow);
}
.brand__slogan{
  color: rgba(36,27,18,.60);
}

/* Badge del hero más cálido */
.badge{
  background: rgba(240,223,194,.55);
  border: 1px solid rgba(36,27,18,.10);
  color: rgba(36,27,18,.75);
}

/* Sección alternativa: crema suave */
.section--alt{
  background: var(--surface2);
  border-top: 1px solid rgba(36,27,18,.06);
  border-bottom: 1px solid rgba(36,27,18,.06);
}

/* Tarjetas: blanco cálido */
.box, .card2{
  background: var(--surface);
  border: 1px solid rgba(36,27,18,.10);
  box-shadow: 0 10px 30px rgba(36,27,18,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.box:hover, .card2:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 55px rgba(36,27,18,.12);
}

/* Botón principal ocre */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid rgba(36,27,18,.10);
  background: linear-gradient(135deg, var(--accent), #8F5B18);
  color: #FFF;
  font-weight: 800;
  box-shadow: 0 14px 35px rgba(168,108,31,.22);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(168,108,31,.28);
  filter: brightness(1.03);
}

/* Texto muted mejor en fondo claro */
.muted{
  color: rgba(36,27,18,.70);
}

/* Formularios: crema suave, foco ocre */
input, textarea, select{
  background: rgba(240,223,194,.45);
  border: 1px solid rgba(36,27,18,.12);
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--text);
}
input:focus, textarea:focus, select:focus{
  outline:none;
  border-color: rgba(168,108,31,.55);
  box-shadow: 0 0 0 3px rgba(214,162,75,.25);
}

/* Footer en crema */
.footer{
  border-top: 1px solid rgba(36,27,18,.10);
  background: rgba(251,244,231,.55);
}
.footer__links a{
  color: rgba(36,27,18,.70);
}
.footer__links a:hover{
  color: var(--text);
}
/* =======================================================
   THEME OVERRIDE — MARFIL + OCRES (Baligò)
   Pegar al FINAL del archivo styles.css
   ======================================================= */

:root{
  /* Fondo marfil */
  --bg: #F7F2E8;          /* marfil principal */
  --surface: #FFFFFF;     /* tarjetas */
  --surface2: #FBF4E7;    /* secciones alternas */

  /* Texto (oscuro cálido, no negro puro) */
  --text: #241B12;
  --muted: #5E5346;

  /* Ocres (acentos) */
  --accent: #A86C1F;      /* ocre principal */
  --accent2: #D6A24B;     /* ocre claro / miel */
  --accent-soft: #F0DFC2; /* crema cálida */

  /* Bordes y sombras (suaves) */
  --border: rgba(36,27,18,.12);
  --shadow: 0 14px 35px rgba(36,27,18,.10);

  /* Tipografía (misma, pero en tema claro se siente mejor) */
  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Fondo general marfil con luz cálida */
body{
  color: var(--text);
  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);
}

/* Header en marfil translúcido */
.header{
  background: rgba(247,242,232,.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

/* Enlaces (calidez) */
a{
  color: inherit;
}
.nav__menu a{
  color: rgba(36,27,18,.70);
}
.nav__menu a:hover{
  color: var(--text);
}

/* Marca / icono */
.brand__mark{
  background: linear-gradient(135deg, rgba(214,162,75,.35), rgba(168,108,31,.28));
  border: 1px solid rgba(36,27,18,.10);
  box-shadow: var(--shadow);
}
.brand__slogan{
  color: rgba(36,27,18,.60);
}

/* Badge del hero más cálido */
.badge{
  background: rgba(240,223,194,.55);
  border: 1px solid rgba(36,27,18,.10);
  color: rgba(36,27,18,.75);
}

/* Sección alternativa: crema suave */
.section--alt{
  background: var(--surface2);
  border-top: 1px solid rgba(36,27,18,.06);
  border-bottom: 1px solid rgba(36,27,18,.06);
}

/* Tarjetas: blanco cálido */
.box, .card2{
  background: var(--surface);
  border: 1px solid rgba(36,27,18,.10);
  box-shadow: 0 10px 30px rgba(36,27,18,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.box:hover, .card2:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 55px rgba(36,27,18,.12);
}

/* Botón principal ocre */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid rgba(36,27,18,.10);
  background: linear-gradient(135deg, var(--accent), #8F5B18);
  color: #FFF;
  font-weight: 800;
  box-shadow: 0 14px 35px rgba(168,108,31,.22);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(168,108,31,.28);
  filter: brightness(1.03);
}

/* Texto muted mejor en fondo claro */
.muted{
  color: rgba(36,27,18,.70);
}

/* Formularios: crema suave, foco ocre */
input, textarea, select{
  background: rgba(240,223,194,.45);
  border: 1px solid rgba(36,27,18,.12);
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--text);
}
input:focus, textarea:focus, select:focus{
  outline:none;
  border-color: rgba(168,108,31,.55);
  box-shadow: 0 0 0 3px rgba(214,162,75,.25);
}

/* Footer en crema */
.footer{
  border-top: 1px solid rgba(36,27,18,.10);
  background: rgba(251,244,231,.55);
}
.footer__links a{
  color: rgba(36,27,18,.70);
}
.footer__links a:hover{
  color: var(--text);
}
/* ============================= */
/*  TEXTURA SUAU TIPUS PAPER     */
/* ============================= */

body::before{
  content:"";
  position: fixed;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(168,108,31,0.03),
      rgba(168,108,31,0.03) 1px,
      transparent 1px,
      transparent 6px
    );
  opacity: 0.35;
  pointer-events: none;
  z-index: -1;
}
/* ============================= */
/*  HERO AMB IMATGE CÀLIDA       */
/* ============================= */

.hero--image{
  position: relative;
  overflow: hidden;
}

.hero--image::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(
      rgba(247,242,232,0.85),
      rgba(247,242,232,0.92)
    ),
    url("../img/showroom/hero.jpg");
  background-size: cover;
  background-position: center;
  filter: sepia(20%) saturate(110%);
  z-index:0;
}

.hero--image > .container{
  position: relative;
  z-index:1;
}
/* ============================= */
/*  LOGO PRINCIPAL CABECERA XXL  */
/* ============================= */

.brand__logo{
  height: 180px;
  width: auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(36,27,18,.18));
}

@media (max-width: 1200px){
  .brand__logo{ height: 96px; }
}
@media (max-width: 1024px){
  .brand__logo{ height: 82px; }
}
@media (max-width: 768px){
  .brand__logo{ height: 64px; }
}

.nav .brand{
  display: flex;
  align-items: center;
}
/* Header més espaiós */
.header{
  padding: 8px 0;
}
/* Ombra suau al logo */
.brand__logo{
  filter: drop-shadow(0 4px 8px rgba(36,27,18,.15));
}
/* Hero amb més respir */
.hero{
  padding-top: clamp(80px, 10vw, 120px);
  padding-bottom: clamp(80px, 10vw, 120px);
}
/* Enllaços amb subratllat suau */
.nav__menu a{
  position: relative;
}

.nav__menu a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:100%;
  height:2px;
  background: linear-gradient(90deg, var(--accent2), transparent);
  opacity:0;
  transition: opacity .2s ease;
}

.nav__menu a:hover::after{
  opacity:1;
}
/* Separació elegant entre seccions */
.section{
  position: relative;
}

.section:not(:last-child)::after{
  content:"";
  display:block;
  width:60%;
  height:1px;
  margin:80px auto 0;
  background: linear-gradient(90deg, transparent, rgba(36,27,18,.12), transparent);
}
.brand__logo{
  height: 150px;
  width: auto;
}
/* ============================= */
/*  MARQUES – TARGETES CÀLIDES   */
/* ============================= */

.brand-card{
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #fbf4e7 100%
  );
  border: 1px solid rgba(36,27,18,.10);
  border-radius: 20px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 14px 40px rgba(36,27,18,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}

.brand-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(36,27,18,.14);
}

/* Logo dins la targeta */
.brand-card img{
  max-height: 70px;
  width: auto;
  margin: 0 auto 18px;
  display: block;
  filter: drop-shadow(0 3px 6px rgba(36,27,18,.12));
}

/* Text descriptiu */
.brand-card p{
  margin: 0;
  font-size: 0.95rem;
  color: rgba(36,27,18,.75);
  line-height: 1.6;
}
.brand-card::before{
  content:"";
  display:block;
  width: 48px;
  height: 3px;
  margin: 0 auto 18px;
  background: linear-gradient(
    90deg,
    #d6a24b,
    #f0dfc2
  );
  border-radius: 3px;
}
/* ============================= */
/*  MARQUES – LOGOS ALINEATS     */
/* ============================= */

/* Contenidor del logo */
.brand-logo{
  height: 90px;                 /* alçada fixa per tots */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

/* Imatge del logo */
.brand-logo img{
  max-height: 65px;             /* normalitza alçada */
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(36,27,18,.12));
}
.brand-card{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* ============================= */
/*  MARQUES: 2 LOGOS PER LÍNIA   */
/* ============================= */

/* Forcem la graella a 2 columnes */
#marques .grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

/* A mòbil, 1 columna per llegibilitat */
@media (max-width: 768px){
  #marques .grid{
    grid-template-columns: 1fr;
  }
/* ============================= */
/*  HOVER AMB ACCENT OCRE SUAU   */
/* ============================= */

.brand-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  background: linear-gradient(
    135deg,
    rgba(214,162,75,.18),
    rgba(240,223,194,.25)
  );
  opacity:0;
  transition: opacity .25s ease;
  pointer-events:none;
}

.brand-card{
  position: relative;
  overflow: hidden;
}

.brand-card:hover::after{
  opacity:1;
}
/* ===== TEST MODALS ===== */
.brand-modal{ display:none; }
.brand-modal.active{ display:flex; 
}
/* ============================= */
/*  MODALS DEFINITIUS (OVERLAY)  */
/* ============================= */

.brand-modal{
  display: none !important;   /* amagat per defecte */
  position: fixed !important; /* clau: overlay real */
  inset: 0 !important;
  z-index: 99999 !important;
  background: rgba(247,242,232,.92) !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 22px !important;
}

.brand-modal{ display:none; }
.brand-modal.active{
  display:flex;
  position:fixed;
  inset:0;
}
body.modal-open{ overflow:hidden; }}

.modal-content{
  max-width: 980px;
  width: min(980px, 100%);
  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;
  max-height: 85vh;
  overflow: auto;
}

.modal-close{
  position: absolute;
  top: 14px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(36,27,18,.14);
  background: rgba(247,242,232,.9);
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
}
.modal-close {
  background: #fff;
  color: #000;
  opacity: 1;
  border: 1px solid #ccc;
}

.modal-gallery{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

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

/* Indica que la targeta és clicable */
.brand-card{
  cursor: pointer;
}

/* Bloqueja scroll del fons quan hi ha modal */
body.modal-open{
  overflow: hidden;
}
/* ============================= */
/*  MODAL: CENTRAT I PER SOBRE   */
/* ============================= */

.brand-modal{
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;           /* molt per sobre del header sticky */
  background: rgba(247,242,232,.92) !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(12px, 3vw, 28px) !important;
}

.brand-modal.active{
  display: flex !important;
}

.modal-content{
  width: min(980px, 100%) !important;
  max-height: 86vh !important;
  overflow: auto !important;
  background: #fff !important;
  border-radius: 22px !important;
  border: 1px solid rgba(36,27,18,.12) !important;
  box-shadow: 0 30px 80px rgba(36,27,18,.25) !important;
  padding: clamp(18px, 3vw, 28px) !important;
  position: relative !important;
}

/* Títol una mica separat */
.modal-content h3{
  margin: 0 0 14px 0;
}

/* Botó tancar */
.modal-close{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(36,27,18,.14) !important;
  background: rgba(247,242,232,.95) !important;
  cursor: pointer !important;
  font-size: 26px !important;
  line-height: 1 !important;
}

/* Galeria: que NO quedi petita ni a l'esquerra */
.modal-gallery{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 14px !important;
}

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

/* Bloqueja scroll del fons només quan toca */
body.modal-open{
  overflow: hidden !important;
}
/* ============================= */
/*  MODAL: CENTRAT I PER SOBRE   */
/* ============================= */

.brand-modal{
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;           /* molt per sobre del header sticky */
  background: rgba(247,242,232,.92) !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(12px, 3vw, 28px) !important;
}

.brand-modal.active{
  display: flex !important;
}

.modal-content{
  width: min(980px, 100%) !important;
  max-height: 86vh !important;
  overflow: auto !important;
  background: #fff !important;
  border-radius: 22px !important;
  border: 1px solid rgba(36,27,18,.12) !important;
  box-shadow: 0 30px 80px rgba(36,27,18,.25) !important;
  padding: clamp(18px, 3vw, 28px) !important;
  position: relative !important;
}

/* Títol una mica separat */
.modal-content h3{
  margin: 0 0 14px 0;
}

/* Botó tancar */
.modal-close{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(36,27,18,.14) !important;
  background: rgba(247,242,232,.95) !important;
  cursor: pointer !important;
  font-size: 26px !important;
  line-height: 1 !important;
}

/* Galeria: que NO quedi petita ni a l'esquerra */
.modal-gallery{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 14px !important;
}

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

/* Bloqueja scroll del fons només quan toca */
body.modal-open{
  overflow: hidden !important;
}
/* ============================= */
/*  GALERIA DINS MODAL: BÉ!      */
/* ============================= */

.brand-modal{
  display:none;
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(247,242,232,.92);
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.brand-modal.active{ display:flex; }

.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;
}

.modal-gallery{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.modal-gallery img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 14px;
  display: block;        /* clau: evita “petit a l’esquerra” */
}

body.modal-open{ overflow: hidden; 
}
/* ============================= */
/*  ANIMACIÓ D'ENTRADA DEL MODAL */
/* ============================= */

/* estat base (ocult) */
.brand-modal{
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
}

/* quan s'activa */
.brand-modal.active{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* animació del contenidor */
.modal-content{
  transform: translateY(10px) scale(.98);
  opacity: 0;
  transition: transform .26s ease, opacity .26s ease;
  will-change: transform, opacity;
}

/* quan modal està actiu, animem el contingut */
.brand-modal.active .modal-content{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* opcional: reducció de moviment si l'usuari ho demana */
@media (prefers-reduced-motion: reduce){
  .brand-modal, .modal-content{
    transition: none !important;
  
}
/* ============================= */
/*  CONTACTE – NET I ELEGANT     */
/* ============================= */

.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: start;
}

/* Columna esquerra */
.contact-info .lead{
  margin-bottom: 12px;
}

.contact-details{
  margin-top: 24px;
  display: grid;
  gap: 14px;
}

/* Formulari */
.contact-form{
  background: #fff;
  border-radius: 22px;
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid rgba(36,27,18,.12);
  box-shadow: 0 20px 50px rgba(36,27,18,.08);
}

.contact-form label{
  display: block;
  margin-bottom: 14px;
}

.contact-form button{
  margin-top: 12px;
  width: 100%;
}

/* Responsive */
@media (max-width: 900px){
  .contact-grid{
    grid-template-columns: 1fr;
  
}
/* ============================= */
/*  CONTACTE – TO DE MARCA       */
/* ============================= */

.contact-info h2{
  margin-bottom: 8px;
}

.contact-info .lead{
  font-size: 1.1rem;
  max-width: 32ch;
}

.contact-info .muted{
  max-width: 40ch;
}

.contact-sign{
  margin-top: 16px;
  font-style: italic;
  color: rgba(36,27,18,.75);
}

/* Email com a element de confiança */
.contact-email{
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(36,27,18,.12);
}

/* Formulari més “calm” */
.contact-form{
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #fbf4e7 100%
  );
}

/* Focus dels camps amb ocre suau */
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
  outline: none;
  border-color: rgba(214,162,75,.6);
  box-shadow: 0 0 0 3px rgba(214,162,75,.25);
}

/* Botó amb una mica més de pes visual */
.contact-form .btn{
  margin-top: 8px;
}
/* ============================= */
/*  MODAL GRÀCIES (CONTACTE)     */
/* ============================= */

.modal-success{
  text-align: center;
  padding: clamp(28px, 5vw, 40px);
}

.success-icon{
  font-size: 3rem;
  margin-bottom: 12px;
}

.modal-success h3{
  margin-bottom: 8px;
}

.modal-success .lead{
  margin-bottom: 6px;
}
/* CONTACTE NET I DE MARCA */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(28px, 6vw, 64px);
  align-items:start;
}
@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr; }

.contact-form{
  background: linear-gradient(180deg,#fff 0%, #fbf4e7 100%);
  border-radius: 22px;
  padding: clamp(18px, 4vw, 30px);
  border: 1px solid rgba(36,27,18,.12);
  box-shadow: 0 20px 50px rgba(36,27,18,.08);
}

.contact-form label{ display:block; margin-bottom: 14px; }
.contact-form button{ width:100%; margin-top: 6px; }

/* Important: amagar només el honeypot */
.hp{ display:none !important; }

/* Consentiment visible i bonic */
.consent{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-weight:700;
  color: rgba(36,27,18,.80);
}
.consent input{ width:auto; margin-top:3px; }
.modal-success{ text-align:center; padding: clamp(24px, 5vw, 40px); }
.success-icon{ font-size: 3rem; margin-bottom: 12px; }
/* ===================================== */
/*  ANIMACIÓ MODAL GRÀCIES (PREMIUM)     */
/* ===================================== */

/* Estat base (tancat) */
#modal-gracies{
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

/* Quan s’activa */
#modal-gracies.active{
  opacity: 1;
  visibility: visible;
}

/* Contenidor: entra amb calma */
#modal-gracies .modal-content{
  transform: translateY(18px) scale(.97);
  opacity: 0;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
}

/* Quan el modal està actiu */
#modal-gracies.active .modal-content{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Animació subtil del símbol 🌅 */
#modal-gracies .success-icon{
  transform: translateY(6px);
  opacity: 0;
  transition: transform .45s ease .15s, opacity .45s ease .15s;
}

#modal-gracies.active .success-icon{
  transform: translateY(0);
  opacity: 1;
}

/* Respectar usuaris que prefereixen menys moviment */
@media (prefers-reduced-motion: reduce){
  #modal-gracies,
  #modal-gracies .modal-content,
  #modal-gracies .success-icon{
    transition: none !important;
    transform: none !important;
 }
/* ===================================== */
/*  RECUADRES D'INFORMACIÓ – ESTIL BALIGÒ */
/* ===================================== */

.box,
.card,
.contact-form,
.brand-card{
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #fbf4e7 100%
  );
  border-radius: 22px;
  border: 1px solid rgba(36,27,18,.12);
  box-shadow:
    0 12px 30px rgba(36,27,18,.08),
    inset 0 1px 0 rgba(255,255,255,.6);
}

/* cantonada orgànica (no simètrica) */
.box,
.card,
.brand-card{
  border-top-left-radius: 26px;
  border-bottom-right-radius: 28px;
}
/* Hover tranquil i amb criteri */
.box,
.brand-card{
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s ease;
}

.box:hover,
.brand-card:hover{
  transform: translateY(-6px);
  box-shadow:
    0 22px 50px rgba(36,27,18,.14),
    inset 0 1px 0 rgba(255,255,255,.6);
}
/* Franja ocre subtil de marca */
.box::before,
.brand-card::before,
.contact-form::before{
  content:"";
  display:block;
  height:4px;
  width:64px;
  margin-bottom:16px;
  background: linear-gradient(
    90deg,
    rgba(214,162,75,.9),
    rgba(240,223,194,.9)
  );
  border-radius: 4px;
}
/* ===================================== */
/*  TEXT CENTRAT ALS RECUADRES            */
/* ===================================== */

.box,
.brand-card,
.card{
  text-align: center;
}

.box h3,
.brand-card h3,
.card h3{
  margin-left: auto;
  margin-right: auto;
}

.box p,
.brand-card p,
.card p{
  margin-left: auto;
  margin-right: auto;
  max-width: 42ch;   /* clau: evita sensació de flyer */
}
/* ===================================== */
/*  FONS MÉS BALIGÒ (MENYS BLANC)         */
/* ===================================== */

.box,
.card,
.brand-card,
.contact-form{
  background: linear-gradient(
    180deg,
    #f6efe4 0%,      /* marfil arena */
    #efe2c9 100%     /* arena amb ocre */
  );
}
/* Més cos i suavitat */
.box,
.brand-card,
.card{
  border-radius: 28px;
  padding: clamp(22px, 4vw, 32px);
}
/* Accent Baligò més present */
.box::before,
.brand-card::before,
.contact-form::before{
  width: 80px;
  height: 5px;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(
    90deg,
    rgba(214,162,75,.95),
    rgba(240,223,194,.95)
  );
}
/* Ombra càlida */
.box,
.brand-card,
.card{
  box-shadow:
    0 18px 40px rgba(120,90,40,.18),
    inset 0 1px 0 rgba(255,255,255,.5);
}
/* No bloquejar clics amb elements decoratius */
.box::before,
.brand-card::before,
.contact-form::before{
  pointer-events: none;
}
.box,
.brand-card,
.contact-form{
  position: relative;
}

.box::before,
.brand-card::before,
.contact-form::before{
  position: relative;
  z-index: 0;
}
/* ===================================== */
/*  GARANTIR CLIC A LES MARQUES           */
/* ===================================== */

/* La targeta ha de ser el punt de clic */
.brand-card{
  position: relative;
  z-index: 10;
  cursor: pointer;
}

/* EXCEPCIÓ: permetre clic només a la targeta */
.brand-card{
  pointer-events: auto;
}
/* ===================================== */
/*  SHOWROOM – GALERIA VISIBLE            */
/* ===================================== */

.showroom-gallery{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.showroom-gallery img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 14px 35px rgba(120,90,40,.18);
  transition: transform .4s ease, box-shadow .4s ease;
}

/* Hover molt suau (només desktop) */
@media (hover: hover){
  .showroom-gallery img:hover{
    transform: translateY(-4px);
    box-shadow: 0 22px 55px rgba(120,90,40,.28);
  }
}
/* ===================================== */
/*  LIGHTBOX SHOWROOM                    */
/* ===================================== */

.modal-showroom{
  padding: clamp(12px, 3vw, 24px);
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-showroom img{
  max-width: 100%;
  max-height: 85vh;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(120,90,40,.35);
}

/* cursor de clic */
.showroom-photo{
  cursor: zoom-in;
}
/* ============================= */
/*  INSTAGRAM – SVG BALIGÒ       */
/* ============================= */

.instagram-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  font-weight: 700;
  color: rgba(36,27,18,.85);
  text-decoration: none;
}

.instagram-icon{
  width: 22px;
  height: 22px;
  fill: rgba(36,27,18,.75);
  transition: fill .25s ease, transform .25s ease;
}

.instagram-link:hover .instagram-icon{
  fill: rgba(214,162,75,.95); /* ocre Baligò */
  transform: translateY(-1px);
}

.instagram-link:hover{
  text-decoration: underline;
}
/* ===================================== */
/*  FOOTER – BALIGÒ                      */
/* ===================================== */

.footer{
  margin-top: 80px;
  padding: 48px 0 24px;
  background: linear-gradient(
    180deg,
    #efe2c9 0%,
    #e6d6b8 100%
  );
}

.footer-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.footer-brand strong{
  font-size: 1.1rem;
}

.footer-contact{
  text-align: right;
}

.footer-contact p{
  margin-bottom: 12px;
}

.footer-bottom{
  margin-top: 32px;
  text-align: center;
}

/* Responsive */
@media (max-width: 700px){
  .footer-grid{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-contact{
    text-align: center;
 }
/* ===================================== */
/*  OFFSET SCROLL PER HEADER STICKY       */
/* ===================================== */

/* Alçada del header (ajusta si cal) */
:root{
  --header-height: 180px;
}

/* Offset d’ancoratges (sempre segur) */
section[id]{
  scroll-margin-top: calc(var(--header-height) + 16px);
}
/* ===================================== */
/* RECUADROS BALIGÒ – ESTADO ESTABLE */
/* ===================================== */

.box,
.brand-card,
.contact-form,
.card{
  background: linear-gradient(
    180deg,
    #f6efe4 0%,
    #efe2c9 100%
  );
  border-radius: 28px;
  border: 1px solid rgba(36,27,18,.12);
  padding: clamp(22px, 4vw, 32px);
  box-shadow:
    0 18px 40px rgba(120,90,40,.18),
    inset 0 1px 0 rgba(255,255,255,.6);
  position: relative;
}

/* franja cálida superior */
.box::before,
.brand-card::before,
.contact-form::before{
  content:"";
  display:block;
  width:80px;
  height:5px;
  margin:0 auto 16px;
  background: linear-gradient(
    90deg,
    #d6a24b,
    #f0dfc2
  );
  border-radius:5px;
  pointer-events:none;
}

/* hover suave */
@media (hover: hover){
  .box:hover,
  .brand-card:hover{
    transform: translateY(-4px);
    box-shadow:
      0 22px 50px rgba(120,90,40,.22),
      inset 0 1px 0 rgba(255,255,255,.6);
  }
}
``
/* =============================== */
/* SHOWROOM – FIX DEFINITIVO */
/* =============================== */

.showroom-gallery{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.showroom-photo{
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 14px 35px rgba(120,90,40,.18);
}
/* =============================== */
/* RECUADROS – ESTADO BUENO */
/* =============================== */

.box,
.brand-card,
.contact-form{
  background: linear-gradient(
    180deg,
    #f6efe4 0%,
    #efe2c9 100%
  );
  border-radius: 28px;
  border: 1px solid rgba(36,27,18,.12);
  padding: clamp(22px, 4vw, 32px);
  box-shadow:
    0 18px 40px rgba(120,90,40,.18),
    inset 0 1px 0 rgba(255,255,255,.6);
}
/* =============================== */
/* INSTAGRAM – TAMAÑO CONTROLADO */
/* =============================== */

.instagram-icon{
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.instagram-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* =============================== */
/* CONTACTE – ESTRUCTURA ESTABLE */
/* =============================== */

.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 6vw, 72px);
  align-items: start;
}

@media (max-width: 900px){
  .contact-grid{
    grid-template-columns: 1fr;
  }
}
/* ===================================== */
/*  HEADER – AFINAMENT BALIGÒ             */
/* ===================================== */

/* Estat normal (a dalt) */
.header{
  transition:
    background .35s ease,
    padding .35s ease,
    box-shadow .35s ease;
}

/* Contingut intern */
.header .nav{
  transition: padding .35s ease;
}

/* Estat compacte (en scroll) */
.header.is-compact{
  background: rgba(11,16,32,.85); /* una mica més opac */
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

.header.is-compact .nav{
  padding: 8px 0; /* abans era 14px */
}

/* Lleu ajust del logo/text */
.header.is-compact .brand__text{
  font-size: 1rem;
}

.header.is-compact .brand__slogan{
  font-size: .7rem;
}
/* Millor contrast del menú en scroll */
.header.is-compact .nav__menu a{
  color: rgba(234,240,255,.95);
}

.header.is-compact .nav__menu a:hover{
  color: #fff;
}
/* ===================================== */
/*  HEADER: ALÇADA REAL I OFFSET          */
/* ===================================== */

:root{
  --header-height: 88px;        /* alçada real compacta */
  --header-height-top: 112px;   /* alçada a dalt */
}

/* Header normal (a dalt) */
.header{
  height: var(--header-height-top);
}

/* Header compacte */
.header.is-compact{
  height: var(--header-height);
}

/* Evitar que el contingut intern canviï l’alçada */
.header .nav{
  height: 100%;
  display: flex;
  align-items: center;
}
/* Detall visual quan es compacta */
.header.is-compact{
  background: rgba(11,16,32,.9);
  backdrop-filter: blur(14px);
}
/* ===================================== */
/*  HEADER — FIX DEFINITIU BALIGÒ         */
/* ===================================== */

/* Alçada real del header */
:root{
  --header-height: 96px;
}

/* Header estable */
.header{
  height: var(--header-height);
  padding: 0;
  background: rgba(247,242,232,.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(36,27,18,.12);
  transition: background .25s ease, box-shadow .25s ease;
}

/* Contingut centrat verticalment */
.header .nav{
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0;
}

/* Logo amb mida controlada */
.brand__logo{
  height: 56px !important;
  width: auto;
}

/* Ombra suau en scroll */
.header.is-compact{
  box-shadow: 0 6px 18px rgba(36,27,18,.18);
}
/* Offset correcte per ancoratges */
section[id]{
  scroll-margin-top: calc(var(--header-height) + 12px);
}
/* ===================================== */
/* FIX DEFINITIVO HEADER + ANCLAS         */
/* ===================================== */

/* Altura real del header (ajusta si quieres) */
:root{
  --fixed-header-height: 180px;
}

/* Este es EL FIX CLAVE */
html{
  scroll-padding-top: var(--fixed-header-height);
}

/* Backup adicional por sección */
section[id]{
  scroll-margin-top: var(--fixed-header-height);
}
/* ===================================== */
/* FIX DEFINITIVO: DESACTIVAR STICKY      */
/* ===================================== */

.header{
  position: relative !important;
  top: auto !important;
}
/* ================================================= */
/* HEADER RESET DEFINITIVO (AISLADO Y ESTABLE)       */
/* ================================================= */

/* Altura real y única del header */
:root{
  --header-fixed-height: 140px;
}

/* Neutralizar cualquier header previo */
.header{
  position: sticky !important;
  top: 0 !important;
  height: var(--header-fixed-height) !important;
  padding: 0 !important;
  background: rgba(247,242,232,.95) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid rgba(36,27,18,.12) !important;
  z-index: 9999 !important;
}

/* Contenido centrado */
.header .nav{
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 0 !important;
}

/* Logo CONTROLADO (clave) */
.brand__logo{
  height: 60px !important;
  max-height: 60px !important;
  width: auto !important;
}

/* Evitar compactaciones viejas */
.header.is-compact{
  height: var(--header-fixed-height) !important;
}

/* ================================================ */
/* OFFSET REAL PARA ANCLAS (ESTE ES EL FIX CLAVE)   */
/* ================================================ */

html{
  scroll-padding-top: var(--header-fixed-height) !important;
}

section[id]{
  scroll-margin-top: var(--header-fixed-height) !important;
}

.hp {
  display: none !important;
}
.contact-form label {
  display: block;
  margin-bottom: 14px;
}

.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.95rem;
}

.consent input {
  margin-top: 4px;
}

.contact-form button {
  margin-top: 16px;
}
/* Ocultar campo antispam */
.hp {
  display: none !important;
}
/* Formulario limpio y ordenado */
.contact-form label {
  display: block;
  margin-bottom: 14px;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
}

.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.95rem;
  margin-top: 10px;
}

.consent input {
  margin-top: 4px;
}

.contact-form button {
  margin-top: 18px;
}

/* ============================
   FORMULARIO LIMPIO Y ESTABLE
   ============================ */

.contact-form {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* Reset básico dentro del formulario */
.contact-form * {
  box-sizing: border-box;
}

.contact-form label {
  display: block;
  margin-bottom: 16px;
  font-weight: 600;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 1rem;
}

.contact-form textarea {
  resize: vertical;
}

/* Checkbox de consentimiento */
.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 400;
}

.consent input {
  width: auto;
  margin-top: 4px;
}

/* Botón claro y visible */
.contact-form button {
  margin-top: 20px;
  width: 100%;
  background: #a86c1f;
  color: #fff;
  border: none;
  padding: 12px;
  font-size: 1rem;
  border-radius: 10px;
  cursor: pointer;
}

.contact-form button:hover {
  background: #8f5b18;
}

/* =================================================
   FORMULARIO BALIGÒ — ESTILO LIMPIO Y ATRACTIVO
   ================================================= */

.contact-form {
  background: linear-gradient(180deg, #ffffff 0%, #fbf4e7 100%);
  border-radius: 20px;
  padding: 28px;
  border: 1px solid rgba(36,27,18,.12);
  box-shadow: 0 18px 40px rgba(120,90,40,.18);
}

/* Reset interno para evitar caos */
.contact-form * {
  box-sizing: border-box;
}

/* Etiquetas */
.contact-form label {
  display: block;
  margin-bottom: 16px;
  font-weight: 600;
  color: #241b12;
}

/* Inputs */
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 12px 14px;
  margin-top: 6px;
  border-radius: 12px;
  border: 1px solid rgba(36,27,18,.18);
  font-size: 1rem;
  background: #fff;
  transition: border .2s ease, box-shadow .2s ease;
}

/* Focus agradable */
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: #d6a24b;
  box-shadow: 0 0 0 3px rgba(214,162,75,.25);
}

/* Textarea */
.contact-form textarea {
  resize: vertical;
  min-height: 110px;
}

/* Consentimiento */
.consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-weight: 400;
  font-size: 0.95rem;
  margin-top: 10px;
  color: #5e5346;
}

.consent input {
  margin-top: 4px;
  width: auto;
}

/* Botón principal */
.contact-form button {
  margin-top: 22px;
  width: 100%;
  padding: 14px;
  font-size: 1.05rem;
  font-weight: 800;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #a86c1f, #8f5b18);
  color: #fff;
  box-shadow: 0 12px 30px rgba(168,108,31,.35);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

/* Hover elegante */
.contact-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(168,108,31,.45);
  filter: brightness(1.05);
}

/* Texto pequeño bajo el botón */
.contact-form .small {
  margin-top: 10px;
  text-align: center;
  color: #5e5346;
}

/* Responsive */
@media (max-width: 600px) {
  .contact-form {
    padding: 22px;
  }
}
``
/* =========================================
   OVERRIDE FORMULARIO (LIMPIO + CORPORATIVO)
   ========================================= */

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

  /* Esto arregla “desorden” visual típico */
  text-align: left !important;
}

/* 2) QUITAR el “recuadro misterioso”
   (en tu CSS existe .contact-form::before con content:"" ) */
#contacte .contact-form::before{
  content: none !important;
  display: none !important;
}

/* 3) Estructura clara: título encima, campo debajo */
#contacte .contact-form label{
  display: block !important;
  margin: 0 0 14px 0 !important;
  font-weight: 700 !important;
  color: rgba(36,27,18,.92) !important;
}

/* el campo SIEMPRE debajo del texto del label */
#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;
}

/* 4) Inputs bonitos y consistentes */
#contacte .contact-form input,
#contacte .contact-form select,
#contacte .contact-form textarea{
  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;
}

/* 5) Ocultar el honeypot (si sigue en el HTML) */
#contacte .contact-form .hp{
  display: none !important;
}

/* 6) Checkbox de consentimiento bien 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;
}

/* 7) 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;
}

#contacte .contact-form button:hover{
  filter: brightness(1.05) !important;
  transform: translateY(-1px) !important;
}