/* ===========================================================================
   Insecticidas Gaspar · La Hoya, Lorca
   Dirección de arte: "El punto kilométrico".
   La paleta sale de la huerta real (tierra roja, glauco de la hoja de brásica,
   plástico de invernadero) y NO del verde de catálogo del sector.
   El blanco es FRÍO a propósito: en cuanto se calienta, esto se convierte en la
   paleta crema por defecto.
   =========================================================================== */

:root{
  --tierra:      #A9522F;   /* la tierra roja de la huerta. Relleno y display. */
  --tierra-txt:  #8C3F22;   /* la misma, oscurecida, para TEXTO sobre claro (6,1:1) */
  --hoja:        #2E4A3C;
  --cera:        #B4C7BE;   /* el glauco ceroso de la hoja de col. Aclarado a mano:
                               a #9DB3A8 el "de Lorca" del titular se quedaba en 3,18:1
                               sobre la foto, y ahí lo que hay que leer es el titular. */
  --yeso:        #E7ECE8;   /* blanco frío */
  --yeso-2:      #DDE4DF;
  --noche:       #131A17;
  --tinta:       #17211C;
  --suave:       #4D5F57;

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 56px);
  --sec: clamp(80px, 11vw, 150px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --line: rgba(23,33,28,.14);
}

*{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  background:var(--yeso); color:var(--tinta);
  font:400 17px/1.62 "Hanken Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
h1,h2,h3{ font-family:"Archivo", system-ui, sans-serif; text-wrap:balance; letter-spacing:-.035em; line-height:.92 }
p{ text-wrap:pretty }
::selection{ background:var(--tierra); color:#fff }
:focus-visible{ outline:3px solid var(--tierra); outline-offset:3px }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad) }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--noche); color:var(--yeso); padding:12px 18px; font-size:.9rem;
}
.skip:focus{ left:8px; top:8px }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em; justify-content:center;
  font:600 .95rem/1 "Hanken Grotesk", sans-serif; letter-spacing:.01em;
  padding:15px 22px; border:1.5px solid transparent; border-radius:0;
  transition:background-color .22s var(--ease), color .22s var(--ease),
             border-color .22s var(--ease), transform .22s var(--ease);
}
.btn--solid{ background:var(--tierra); color:#fff }
.btn--linea{ border-color:currentColor }
.btn--sm{ padding:11px 16px; font-size:.875rem }
.btn__ico{
  width:.95em; height:.95em; flex:none; background:currentColor;
  -webkit-mask:var(--ico-tel) center/contain no-repeat; mask:var(--ico-tel) center/contain no-repeat;
}
:root{
  --ico-tel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2Z'/%3E%3C/svg%3E");
}
@media (hover:hover){
  .btn--solid:hover{ background:var(--tierra-txt) }
  .btn--linea:hover{ background:var(--tinta); color:var(--yeso); border-color:var(--tinta) }
}
.btn:active{ transform:scale(.97) }

/* ---------- la MARCA del sitio: cartelito con visera (mismo lenguaje que el hito) ---------- */
.marca{ display:inline-flex; align-items:stretch; margin-bottom:26px }
.marca__cap{ width:9px; background:var(--tierra) }
.marca__txt{
  background:var(--noche); color:var(--yeso);
  font:700 .75rem/1 "Space Mono", ui-monospace, monospace;
  letter-spacing:.16em; text-transform:uppercase; padding:9px 13px 8px;
}
.marca--claro .marca__cap{ background:var(--tierra) }
.marca--claro .marca__txt{ background:var(--yeso); color:var(--noche) }

/* ---------- cabecera ---------- */
.head{ position:fixed; inset:0 0 auto; z-index:60; background:transparent }
.head__in{
  max-width:var(--maxw); margin-inline:auto; padding:16px var(--pad);
  display:flex; align-items:center; gap:clamp(14px,3vw,40px);
}
.head.scrolled{ background:rgba(231,236,232,.93); backdrop-filter:blur(12px) saturate(1.3); box-shadow:0 1px 0 var(--line) }

.brand{ display:flex; align-items:center; gap:11px; margin-right:auto }
.brand__mark{
  display:block;           /* es un <span>: sin esto, en el pie (que no es flex) colapsa */
  width:20px; height:30px; flex:none;
  background:linear-gradient(180deg, var(--noche) 0 34%, var(--yeso) 34% 100%);
  border:1.5px solid var(--noche); border-radius:5px 5px 0 0;
  position:relative;
}
.brand__mark::after{ content:""; position:absolute; left:3px; right:3px; bottom:5px; height:3px; background:var(--tierra) }
.brand__txt{ display:flex; flex-direction:column; line-height:1 }
.brand__txt b{ font:800 .82rem/1 "Archivo", sans-serif; letter-spacing:.02em; text-transform:uppercase; color:#fff }
.brand__txt i{ font:500 .82rem/1.25 "Space Mono", monospace; font-style:normal; letter-spacing:.2em; text-transform:uppercase; color:var(--cera) }
.head.scrolled .brand__txt b{ color:var(--tinta) }
.head.scrolled .brand__txt i{ color:var(--tierra-txt) }
.head.scrolled .brand__mark{ background:linear-gradient(180deg, var(--noche) 0 34%, #fff 34% 100%) }

.nav{ display:flex; gap:clamp(16px,2.4vw,32px) }
.nav a{
  font:600 .92rem/1 "Hanken Grotesk", sans-serif; color:#fff; padding:6px 0;
  border-bottom:2px solid transparent;
  transition:border-color .22s var(--ease), color .22s var(--ease);
  text-shadow:0 1px 10px rgba(19,26,23,.55);
}
.head.scrolled .nav a{ color:var(--tinta); text-shadow:none }
.nav a.active{ border-bottom-color:var(--tierra) }
@media (hover:hover){ .nav a:hover{ border-bottom-color:var(--tierra) } }

.head__cta{ background:var(--tierra); color:#fff }
.burger{ display:none; width:42px; height:36px; background:none; border:0; cursor:pointer; flex-direction:column; justify-content:center; gap:5px }
.burger span{ display:block; height:2px; background:#fff; box-shadow:0 1px 6px rgba(19,26,23,.55); transition:background-color .22s var(--ease) }
.head.scrolled .burger span{ box-shadow:none }
.head.scrolled .burger span{ background:var(--tinta) }

/* ===========================================================================
   PORTADA — la foto manda: a sangre, 100svh, el texto ENCIMA
   =========================================================================== */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; isolation:isolate }
.hero__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 58%; z-index:-2;
}
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    /* Los topes intermedios están puestos MIDIENDO, no a ojo: con el mínimo del velo
       en el 24% caía justo donde arranca el titular y el blanco sobre el cielo se
       quedaba en 2,1:1 en el 5% peor de los píxeles. */
    linear-gradient(180deg, rgba(19,26,23,.62) 0%, rgba(19,26,23,.22) 13%, rgba(19,26,23,.52) 30%, rgba(19,26,23,.58) 58%, rgba(19,26,23,.93) 100%),
    linear-gradient(90deg, rgba(19,26,23,.46) 0%, rgba(19,26,23,0) 66%);
}
.hero__in{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:150px var(--pad) clamp(34px,5vh,60px);
  display:flex; flex-direction:column; gap:clamp(30px,5vh,58px);
}
.hero__h1{
  color:#fff; font-weight:900;
  font-size:clamp(3.1rem, 10.6vw, 8.6rem);   /* hasta 137px: el titular manda */
  text-shadow:0 1px 16px rgba(19,26,23,.42);
  margin-top:auto;
}
.hero__h1 em{ font-style:normal; color:var(--cera) }

.hero__foot{ display:flex; align-items:flex-end; gap:clamp(20px,4vw,46px); flex-wrap:wrap }

/* ---------- LA FIRMA: el hito kilométrico de la N-340 ---------- */
.hito{
  flex:none; width:clamp(132px, 14vw, 182px); min-height:clamp(180px, 25vh, 244px);
  display:flex; flex-direction:column;
  border-radius:14px 14px 0 0; overflow:hidden;
  box-shadow:0 26px 50px -22px rgba(0,0,0,.75);
}
.hito__via{
  background:var(--noche); color:#fff; text-align:center;
  font:700 clamp(.9rem,1.5vw,1.12rem)/1 "Space Mono", monospace; letter-spacing:.09em;
  padding:13px 6px 12px;
}
.hito__cuerpo{
  flex:1; background:#fff; color:var(--noche);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  padding:12px 8px 16px;
}
.hito__km{ font:700 .75rem/1 "Space Mono", monospace; letter-spacing:.24em; text-transform:uppercase; color:var(--suave) }
.hito__num{
  font:900 clamp(1.72rem,3.5vw,2.85rem)/.94 "Archivo", sans-serif;
  letter-spacing:-.05em; text-align:center;
}
.hito__coma{ color:var(--tierra) }

.hero__datos{ display:flex; flex-direction:column; gap:20px; padding-bottom:6px }
.hero__dir{ color:#fff; font-weight:600; font-size:clamp(1rem,1.7vw,1.2rem); line-height:1.42 }
.hero__dir span{ color:var(--cera); font-weight:400 }
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap }
.hero__cta .btn--linea{ color:#fff; background:rgba(19,26,23,.34); backdrop-filter:blur(6px) }

/* ===========================================================================
   SECCIONES CLARAS
   =========================================================================== */
.sec{ padding-block:var(--sec) }
.sec__cab{ max-width:760px; margin-bottom:clamp(38px,5vw,66px) }
.sec__h2{ font-size:clamp(2.4rem,6vw,4.6rem); font-weight:900; margin-bottom:22px }
.sec__lead{ font-size:clamp(1.04rem,1.6vw,1.24rem); color:var(--suave); max-width:60ch }
.sec__lead b{ color:var(--tinta); font-weight:600 }

/* ---------- catálogo asimétrico (bento roto) ---------- */
.cat{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px }
.cat__c{ background:#fff; border:1px solid var(--line); padding:clamp(22px,2.6vw,34px); display:flex; flex-direction:column; gap:12px }
.cat__c h3{ font-size:clamp(1.35rem,2.3vw,1.95rem); font-weight:800 }
.cat__c p{ color:var(--suave); font-size:1.01rem }
.cat__pie{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line);
  font:700 .75rem/1 "Space Mono", monospace; letter-spacing:.15em; text-transform:uppercase; color:var(--tierra-txt);
}

.cat__c--a{ grid-column:1/7;  grid-row:1/3 }
.cat__c--b{ grid-column:7/13; grid-row:1/2 }
.cat__c--c{ grid-column:7/10; grid-row:2/3 }
.cat__c--d{ grid-column:10/13;grid-row:2/3 }
.cat__c--e{ grid-column:1/13; grid-row:3/4 }

.cat__c--foto{ position:relative; padding:0; overflow:hidden; min-height:280px; border-color:transparent }
.cat__c--foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.cat__c--a img{ object-position:center 42% }
.cat__c--d img{ object-position:center 55% }
.cat__foto-txt{
  position:relative; margin-top:auto; padding:clamp(22px,2.6vw,34px); color:#fff;
  background:linear-gradient(180deg, rgba(19,26,23,0) 0%, rgba(19,26,23,.86) 62%);
}
.cat__foto-txt p{ color:rgba(255,255,255,.86) }

.cat__c--cta{ flex-direction:row; align-items:center; gap:clamp(18px,3vw,40px); flex-wrap:wrap; background:var(--yeso-2) }
.cat__c--cta h3{ flex:none }
.cat__c--cta p{ flex:1; min-width:240px; margin:0 }
.cat__c--cta .btn{ flex:none }

/* ===========================================================================
   BANDA OSCURA A SANGRE — la huerta
   =========================================================================== */
.huerta{ position:relative; padding-block:clamp(96px,13vw,180px); isolation:isolate; overflow:hidden }
.huerta__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; z-index:-2 }
.huerta__veil{ position:absolute; inset:0; z-index:-1; background:linear-gradient(105deg, rgba(19,26,23,.93) 0%, rgba(19,26,23,.74) 52%, rgba(19,26,23,.34) 100%) }
.huerta__in{ max-width:900px; margin-inline:0; padding-left:max(var(--pad), calc(50vw - var(--maxw)/2 + var(--pad))) }
.huerta__h2{ color:#fff; font-size:clamp(2.5rem,6.4vw,5rem); font-weight:900; margin-bottom:28px }
.huerta__p{ color:var(--cera); font-size:clamp(1.06rem,1.7vw,1.3rem); max-width:56ch; line-height:1.6 }
.huerta__firma{
  margin-top:36px; color:#fff;
  font:700 clamp(.8rem,1.2vw,.95rem)/1.5 "Space Mono", monospace; letter-spacing:.14em; text-transform:uppercase;
  padding-left:16px; border-left:4px solid var(--tierra);
}

/* ===========================================================================
   DÓNDE ESTAMOS
   =========================================================================== */
.sec--donde{ background:var(--yeso-2) }
.donde{ display:grid; grid-template-columns:1.35fr .95fr; gap:18px; align-items:stretch }
.donde__mapa{ position:relative; min-height:440px; border:1px solid var(--line); background:#fff }
.donde__mapa iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:saturate(.8) }
.donde__ficha{ background:#fff; border:1px solid var(--line); padding:clamp(24px,2.8vw,36px); display:flex; flex-direction:column; gap:26px }
.ficha__blq{ display:flex; flex-direction:column; gap:8px }
.ficha__et{ font:700 .75rem/1 "Space Mono", monospace; letter-spacing:.18em; text-transform:uppercase; color:var(--tierra-txt) }
.ficha__val{ font-size:1.05rem; line-height:1.55 }
.ficha__val a{ font-weight:700; border-bottom:2px solid var(--tierra) }
.ficha__val--suave{ color:var(--suave); font-size:.99rem }
.ficha__nota{ font:400 .75rem/1 "Space Mono", monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--suave); margin-left:6px }
.ficha__acc{ margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; padding-top:6px }

/* ===========================================================================
   PIE
   =========================================================================== */
.pie{ background:var(--noche); color:var(--cera); padding-top:clamp(60px,8vw,96px) }
.pie a{ transition:color .22s var(--ease) }
@media (hover:hover){ .pie a:hover{ color:#fff } }
.pie__in{ display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:clamp(26px,4vw,54px); padding-bottom:clamp(44px,6vw,72px) }
.brand__mark--pie{ margin-bottom:14px }
.pie__nom{ font:800 1.24rem/1 "Archivo", sans-serif; color:#fff; letter-spacing:-.02em }
.pie__leg{ font:400 .8rem/1.5 "Space Mono", monospace; letter-spacing:.04em; margin-top:8px }
.pie__et{ display:block; font:700 .75rem/1 "Space Mono", monospace; letter-spacing:.18em; text-transform:uppercase; color:#fff; margin-bottom:13px }
.pie__col p{ font-size:.98rem; line-height:1.72 }

.pie__bajo{
  border-top:1px solid rgba(231,236,232,.16); padding-block:30px 30px;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px;
}
.pie__legal{ display:flex; gap:20px; font-size:.85rem; order:1 }
.pie__cop{ font-size:.85rem; order:2; margin-right:auto }
.demo-aviso{ order:3; flex-basis:100%; font-size:.78rem; color:rgba(157,179,168,.62); line-height:1.5 }

/* ===========================================================================
   BARRA DE LLAMADA EN MÓVIL (hereda la visera del hito)
   =========================================================================== */
.callbar{ display:none }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width:1000px){
  .donde{ grid-template-columns:1fr }
  .donde__mapa{ min-height:320px }
  .pie__in{ grid-template-columns:1fr 1fr }
}

@media (max-width:820px){
  .burger{ display:flex }
  .head__cta{ display:none }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(320px,84vw);
    background:var(--noche); flex-direction:column; justify-content:center; gap:6px;
    padding:32px; transform:translateX(100%);
    transition:transform .32s var(--ease);
  }
  .nav.open{ transform:none }
  .nav a{ color:#fff; font-size:1.3rem; text-shadow:none; padding:12px 0; border-bottom:1px solid rgba(231,236,232,.12) }
  .head.scrolled .nav a{ color:#fff }

  .cat{ grid-template-columns:1fr }
  .cat__c--a,.cat__c--b,.cat__c--c,.cat__c--d,.cat__c--e{ grid-column:1/-1; grid-row:auto }
  .cat__c--foto{ min-height:300px }
  .cat__c--cta{ flex-direction:column; align-items:flex-start }

  .huerta__in{ padding-left:var(--pad); padding-right:var(--pad) }

  body{ padding-bottom:74px }
  /* el hero mide 100svh: sin esto sus CTAs quedan DEBAJO de la barra fija de llamada */
  .hero__in{ padding-bottom:calc(74px + 26px) }
  .callbar{
    display:grid; grid-template-columns:1.35fr 1fr; gap:1px;
    position:fixed; inset:auto 0 0; z-index:70;
    background:var(--noche); border-top:4px solid var(--tierra);
  }
  .callbar__b{
    display:flex; align-items:center; justify-content:center; gap:.5em;
    padding:17px 10px; color:#fff;
    font:700 .95rem/1 "Hanken Grotesk", sans-serif;
  }
  .callbar__b--main{ background:var(--tierra) }
  .callbar__b:active{ opacity:.86 }
}

@media (max-width:520px){
  .hero__in{ padding-top:120px }
  .hero__foot{ gap:22px }
  .hito{ width:118px; min-height:158px }
  .hero__cta .btn{ flex:1 1 auto }
  .pie__in{ grid-template-columns:1fr }
  .pie__bajo{ flex-direction:column; align-items:flex-start }
  .pie__cop{ margin-right:0 }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}