/* ═══ Tema "campo": la web de Protección Verde con la piel editorial de la guía Arva (16/09/2026) ═══
   Se carga después de main.css y solo en public-campo/ (python3 build.py --tema campo).
   Lienzo hueso, verde bosque como banda estructural, Outfit en los titulares (elegida por César el 18/09) y píldoras en todo.
   Igual contenido, igual JavaScript: solo cambia la piel. */
:root{
  --crema:#F1EFDF; --hueso:#F1EFDF; --blanco:#FFFFFF;
  --bosque:#0B3B2C; --verde-noche:#0B3B2C; --verde-panel:#124A37; --verde:#1B5E3F;
  --lima:#C4D82E; --lima-suave:#EEF3D3; --lima-viva:#E8FE85;
  --tinta:#1C221D; --gris:#4F5A51; --linea:#DCDDCD; --musgo:#C3CDA7;
  --cielo:#B2CEE7; --melocoton:#FCEACE; --salvia:#E6ECD5; --ceniza:#EFEFEF;
  --radius:20px; --radius-lg:24px;
  --sombra:0 14px 40px rgba(11,59,44,.10); --sombra-suave:0 6px 20px rgba(11,59,44,.07);
  --sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --titulos:'Outfit',var(--sans);   /* elegida por César el 18/09 entre ocho opciones */
}
body{font-family:var(--sans);background:var(--hueso);letter-spacing:-.005em}
h1,h2{font-family:var(--titulos);font-weight:600;letter-spacing:-.025em;line-height:1.06}
h1{font-size:clamp(36px,5vw,62px)}
h2{font-size:clamp(27px,3.2vw,42px)}
h3{font-family:var(--titulos);font-weight:600;letter-spacing:-.015em}
/* la palabra destacada: lima sobre foto o fondo oscuro, verde sobre el lienzo */
.acento{color:var(--verde)}
.hero-contenido .acento,.banda-oscura .acento,.especialista .acento{color:var(--lima)}
.eyebrow{font-size:11.5px;letter-spacing:.16em}
.sub{font-size:17px;line-height:1.55}

/* botones: píldora siempre, sin sombra */
.btn{border-radius:999px;padding:14px 28px;font-weight:600;font-size:14.5px;letter-spacing:.01em;box-shadow:none}
.btn-lima,.btn-verde{box-shadow:none}
.btn-verde{background:var(--bosque)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.7)}

/* cinta superior: mensajes fijos, sin mantenimiento */
.cinta-lima{background:var(--lima-viva);color:var(--tinta);height:34px;overflow:hidden;font-size:12.5px;font-weight:500;letter-spacing:.02em}
.cl-pista{display:flex;align-items:center;gap:22px;height:34px;width:max-content;animation:clDesfile 70s linear infinite;padding-left:22px;white-space:nowrap}
.cl-pista i{font-style:normal;width:16px;height:16px;border-radius:50%;border:1.3px solid var(--tinta);display:inline-grid;place-items:center;font-size:9px;flex-shrink:0}
@keyframes clDesfile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.cl-pista{animation:none}}

/* menú: blanco al entrar, verde bosque en cuanto se baja (César, 16/09) */
.navbar{background:#fff;border-bottom:none;backdrop-filter:none;transition:background .35s ease,box-shadow .35s ease}
.navbar.con-sombra{background:var(--bosque);box-shadow:0 8px 30px rgba(0,0,0,.18)}
.logo .logo-claro{display:block}.logo .logo-oscuro{display:none}
.con-sombra .logo .logo-claro{display:none}.con-sombra .logo .logo-oscuro{display:block}
.nav-links a{color:var(--tinta);font-weight:500;font-size:14.5px;transition:color .3s,border-color .2s}
.nav-links a:hover,.nav-links a.activo{color:var(--verde);border-color:var(--lima)}
.con-sombra .nav-links a{color:rgba(255,255,255,.88)}
.con-sombra .nav-links a:hover,.con-sombra .nav-links a.activo{color:#fff}
.drop-caja{background:#fff;border-radius:16px}
.drop-caja a,.con-sombra .drop-caja a{color:var(--tinta)}
.nav-buscar{color:var(--tinta);background:transparent;border:1.5px solid var(--linea);border-radius:999px;padding:9px 16px;transition:color .3s,border-color .3s}
.nav-buscar:hover{border-color:var(--verde)}
.con-sombra .nav-buscar{color:#fff;border-color:rgba(255,255,255,.35)}
.con-sombra .nav-buscar:hover{border-color:#fff}
.nav-cta{background:var(--bosque);color:#fff;padding:11px 20px;transition:background .3s,color .3s}
.nav-cta:hover{background:var(--verde)}
.con-sombra .nav-cta{background:#fff;color:var(--bosque)}
.con-sombra .nav-cta:hover{background:var(--lima)}
.burger span{background:var(--tinta);transition:background .3s,transform .28s ease,opacity .2s ease}
.con-sombra .burger span{background:#fff}
@media (max-width:860px){
  .nav-links{background:#fff;border-bottom:none}
  .con-sombra .nav-links{background:var(--bosque)}
  .con-sombra .nav-links a{color:#fff;border-bottom-color:rgba(255,255,255,.12)}
  .drop-caja{background:transparent}
  .con-sombra .drop-caja a{color:rgba(255,255,255,.8)}
  .nav-links .solo-movil{color:var(--verde)}.con-sombra .nav-links .solo-movil{color:var(--lima)}
}

/* hero de la home: pantalla entera, centrado, casi sin velo, guía de scroll */
.hero-full:not(.hero-sector):not(.hero-corto):not(.hero-empresa){min-height:calc(100svh - 108px);align-items:center}
.hero-velo{background:linear-gradient(180deg,rgba(11,59,44,.16) 0%,rgba(11,59,44,.02) 35%,rgba(11,59,44,.24) 72%,rgba(11,59,44,.56) 100%)}
.hero-contenido{text-align:center;display:flex;flex-direction:column;align-items:center;padding-top:60px;padding-bottom:150px}
.hero-contenido h1{max-width:16ch;font-size:clamp(38px,5.8vw,74px);text-shadow:0 2px 30px rgba(8,20,12,.5)}
.hero-contenido .sub{max-width:52ch;font-size:clamp(16px,1.5vw,19px);margin-top:18px}
.hero-contenido .pill{background:rgba(255,255,255,.14);color:#fff;letter-spacing:.16em;font-weight:600}
.hero-contenido .hero-ctas{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.hero-sector .hero-contenido, .hero-empresa .hero-contenido{text-align:left;align-items:flex-start;padding-bottom:60px}
.hero-sector .hero-contenido h1,.hero-empresa .hero-contenido h1{font-size:clamp(32px,4.4vw,56px)}
.hero-sector .hero-ctas,.hero-empresa .hero-ctas{justify-content:flex-start}

/* buscador: píldora sobre el borde del hero */
.buscador{margin-top:-38px;will-change:transform}
.buscador-caja{border:1px solid var(--musgo);box-shadow:var(--sombra)}
.buscador-caja .btn{background:var(--bosque);color:#fff}
.sugerencias,.bc-panel{border-radius:20px}

/* secciones y tarjetas: radios grandes, serifa en titulares, color en vez de sombra */
.cabecera-seccion h2{max-width:720px}
.sector-tile{border-radius:var(--radius)}
.sector-tile h3{font-size:21px}.marca-hero, .hito, .pp, .form-caja, .quien, .donde, .chip-marca, .cinta-item, .pr, .pedido-contacto, .especialista, .banda-oscura, .tarjeta-nota, .ief{border-radius:var(--radius)}
.marca-icl{background:var(--bosque)}.marca-sg{background:var(--verde)}
.pp{border:none}.pp:nth-child(1){background:var(--salvia)}.pp:nth-child(2){background:var(--melocoton)}.pp:nth-child(3){background:var(--cielo)}.pp:nth-child(4){background:var(--ceniza)}
.pp h3{font-size:19px}.hito h3{font-size:21px}.pr h3{font-size:23px}
.banda-oscura,.especialista{background:var(--bosque)}
.hito{border:none}
.pr-1{background:var(--salvia)}.pr-2{background:var(--melocoton)}.pr-3{background:var(--cielo)}
.mani-frase{font-family:var(--titulos);font-weight:600;font-size:clamp(26px,3.4vw,44px);letter-spacing:-.025em;line-height:1.12;max-width:26ch}
.ob-titulo{font-family:var(--titulos);font-weight:600;font-size:clamp(26px,3.2vw,40px);letter-spacing:-.025em}.ob-pilar b{font-family:var(--titulos);font-weight:600;letter-spacing:-.02em}
.dest h3,.cinta-texto{font-family:var(--titulos);font-weight:600}
.dest h3{font-size:19px}
.form-caja{box-shadow:none;border:1px solid var(--linea)}
.campo input,.campo select,.campo textarea{border-radius:14px;border-color:var(--musgo);background:#fff}
.tarjeta-nota,.pedido-contacto{background:var(--salvia);color:var(--tinta)}.quien, .chip-marca, .cinta-item, .hito, .ief{box-shadow:none}
.ief{border:1px solid var(--linea)}
footer{background:var(--bosque);margin-top:60px}

@media (max-width:560px){
  .hero-contenido{padding-bottom:150px}
  .hero-contenido h1{font-size:clamp(32px,9.4vw,42px);max-width:none}
}

/* catálogo en la piel campo */
.cat-item,.cat-buscar .buscador-caja,.ficha-meta{border-radius:20px}
.cat-item b,.ficha-cuerpo h2{font-family:var(--titulos);font-weight:600}
.cat-buscar .buscador-caja{border:1px solid var(--musgo)}
.pf.on,.busca-accesos a.todo{background:var(--bosque);border-color:var(--bosque);color:#fff}
/* 25/09: casas, opiniones y preguntas en la piel campo */
.marca-icl{background:#08241A}
.faq-item summary{font-family:var(--titulos);font-weight:600;font-size:17px}
.faq-item,.lm-item,.reel{border-radius:22px}
.reel-cita{font-family:var(--titulos)}