/* Chrome compartido (header + footer) — alineado con el home nuevo. Auto-contenido. */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800;900&display=swap');
/* Fuente base para páginas que no declaran la suya (plagas, garantía, etc.).
   El margin:0 es el reset mínimo: sin él, las páginas sin reset propio dejan
   el header y el footer despegados 8px de los bordes. */
body{ font-family:'Figtree', system-ui, -apple-system, sans-serif; margin:0; }
:root{
  --gold:#D4A82B; --green:#0A6A39; --green-dark:#022e14;
  --ink:#1a1a1a; --muted:#555; --hairline:1px solid rgba(0,0,0,.08);
  --radius:6px; --radius-lg:8px; --shadow-hover:0 2px 6px rgba(0,0,0,.10);
}
.chrome-wrap{ width:100%; max-width:1180px; margin:0 auto; padding:0 20px; }
/* Fuente neutra (igual al home nuevo, no Nunito) solo para el chrome */
#site-header, footer{ font-family:'Figtree', system-ui, -apple-system, sans-serif; }

/* ---- Header ----
   Declara padding y margin de forma explícita: varias páginas del long tail
   cargan blog.css, que trae reglas viejas de elemento (header{padding:.6rem 0},
   header nav a{padding:.5rem 1rem}) de cuando el chrome no era compartido.
   Como aquí mandan los selectores con ID, basta con declarar la propiedad
   para que la regla vieja no se cuele. */
#site-header{ position:sticky; top:0; z-index:1000; margin:0; padding:0; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-bottom:var(--hairline); box-shadow:none; }
#site-header .header-inner{ display:flex; align-items:center; gap:18px; height:64px; flex-wrap:nowrap; padding:0 20px; }
#site-header .brand{ flex-shrink:0; display:flex; align-items:center; gap:10px; font-weight:700; color:var(--ink); font-size:1.05rem; letter-spacing:-.02em; flex:0 0 auto; text-decoration:none; }
#site-header .brand img{ height:44px; width:auto; }
#site-header .brand span b{ color:var(--green); }
#header-nav{ display:flex; align-items:center; gap:15px; margin-left:auto; padding:0; }
#header-nav a{ color:var(--ink); font-weight:700; font-size:.88rem; text-decoration:none; white-space:nowrap; flex-shrink:0; padding:0; border:0; background:none; }
#header-nav a:hover{ color:var(--green); }
#header-nav .header-cta{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; background:var(--gold); color:var(--green-dark); padding:9px 15px; border-radius:var(--radius); font-weight:600; font-size:.9rem; }
#header-nav .header-cta:hover{ background:#c2971f; color:var(--green-dark); }
#header-nav .header-cta svg{ width:16px; height:16px; }
#header-nav-toggle{ display:none; margin-left:auto; width:44px; height:44px; background:none; border:none; cursor:pointer; flex-direction:column; gap:5px; justify-content:center; align-items:center; }
#site-header .hamburger-bar{ width:24px; height:2.5px; background:var(--ink); border-radius:2px; transition:.25s; }
@media(min-width:901px) and (max-width:1150px){
  #header-nav{ gap:11px; }
  #header-nav a{ font-size:.82rem; }
  #site-header .brand span{ display:none; }
}
@media(max-width:900px){
  #header-nav{ position:fixed; inset:64px 0 auto 0; background:#fff; flex-direction:column; align-items:stretch; gap:0; padding:8px 0; border-bottom:var(--hairline); margin:0; transform:translateY(-130%); transition:transform .28s; box-shadow:var(--shadow-hover); }
  .nav-open #header-nav{ transform:translateY(0); }
  #header-nav a{ padding:14px 24px; border-bottom:var(--hairline); }
  #header-nav .header-cta{ margin:10px 24px; justify-content:center; }
  #header-nav-toggle{ display:flex; }
  .nav-open .hamburger-bar:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .nav-open .hamburger-bar:nth-child(2){ opacity:0; }
  .nav-open .hamburger-bar:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
}

/* ---- Footer ---- */
footer{ background:var(--green-dark); color:rgba(255,255,255,.72); padding:48px 0 28px; font-size:.9rem; border-top:3px solid var(--gold); }
footer .footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; margin-bottom:30px; }
footer h4{ color:#fff; font-size:1rem; margin-bottom:14px; }
footer a{ color:rgba(255,255,255,.72); text-decoration:none; }
footer a:hover{ color:#fff; }
footer .footer-links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
footer .footer-brand img{ height:54px; margin-bottom:14px; }
footer .footer-bottom{ border-top:1px solid rgba(255,255,255,.14); padding-top:18px; text-align:center; font-size:.82rem; }
@media(max-width:980px){ footer .footer-grid{ grid-template-columns:1fr 1fr; gap:26px; } }
@media(max-width:620px){ footer .footer-grid{ grid-template-columns:1fr; gap:24px; } }

/* ---- Pulido 2026: micro-interacción cohesiva con el landing ---- */
#header-nav .header-cta{ transition:background .15s ease, box-shadow .15s ease, transform .15s ease; }
#header-nav .header-cta:hover{ box-shadow:0 6px 16px -6px rgba(212,168,43,.6); transform:translateY(-1px); }
#header-nav a{ transition:color .15s ease; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--green); outline-offset:2px; border-radius:4px; }

/* Portal de clientes y cambio de idioma: presentes en todas las páginas */
#header-nav .nav-portal{ display:inline-flex; align-items:center; gap:6px; color:var(--green); border:1.5px solid var(--green); padding:6px 12px; border-radius:var(--radius); font-size:.86rem; }
#header-nav .nav-portal:hover{ background:var(--green); color:#fff; }

/* ---- Selector de idioma ----
   Los enlaces vienen horneados por página desde scripts/sync-chrome.py: apuntan
   a la página equivalente, no al home, y existen en el HTML para que se puedan
   rastrear. El JS solo abre y cierra; sin JS, :focus-within lo deja usable. */
#header-nav .lang-picker{ position:relative; flex-shrink:0; }
#header-nav .lang-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:inherit; font-weight:600; font-size:.85rem; color:var(--ink);
  background:none; border:1.5px solid #d8d8d8; border-radius:var(--radius);
  padding:5px 9px; cursor:pointer; line-height:1;
}
#header-nav .lang-btn:hover{ border-color:var(--green); color:var(--green); }
#header-nav .lang-picker.abierto .lang-btn{ border-color:var(--green); color:var(--green); }
#header-nav .lang-caret{ transition:transform .2s; }
#header-nav .lang-picker.abierto .lang-caret{ transform:rotate(180deg); }
#header-nav .lang-menu{
  position:absolute; top:calc(100% + 7px); right:0; z-index:1200;
  min-width:172px; margin:0; padding:6px; list-style:none;
  background:#fff; border:var(--hairline); border-radius:var(--radius-lg);
  box-shadow:0 10px 34px -8px rgba(10,60,35,.28), 0 2px 6px rgba(0,0,0,.06);
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:.18s;
}
#header-nav .lang-picker.abierto .lang-menu,
#header-nav .lang-picker:focus-within .lang-menu{ opacity:1; visibility:visible; transform:translateY(0); }
#header-nav .lang-menu a{
  display:flex; align-items:center; gap:9px; padding:9px 11px;
  font-size:.88rem; font-weight:600; color:var(--ink); border-radius:5px; white-space:nowrap;
}
#header-nav .lang-menu a:hover{ background:#f2f7f3; color:var(--green); }
#header-nav .lang-menu .lang-code{
  font-size:.68rem; font-weight:800; letter-spacing:.06em; color:var(--muted);
  border:1px solid #e0e0e0; border-radius:4px; padding:2px 5px; min-width:27px; text-align:center;
}
#header-nav .lang-menu a[aria-current]{ background:#f2f7f3; color:var(--green); }
#header-nav .lang-menu a[aria-current] .lang-code{ border-color:var(--green); color:var(--green); }

@media(max-width:900px){
  #header-nav .nav-portal{ margin:10px 24px; justify-content:center; border-radius:var(--radius); }
  /* En el drawer no hay espacio para un desplegable: se listan los idiomas. */
  #header-nav .lang-picker{ margin:10px 24px 4px; }
  #header-nav .lang-btn{ display:none; }
  #header-nav .lang-menu{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:var(--hairline); min-width:0; padding:5px;
  }
  #header-nav .lang-menu a{ padding:11px; border-bottom:0; }
}

/* ===================================================================
   Sistema de lectura compartido
   -------------------------------------------------------------------
   El long tail (blog, plagas, zonas, garantía, guía) ya compartía una
   escala buena, pero vivía duplicada dentro de blog.css y tres páginas
   habían quedado fuera con su propio ancho y tamaño de letra. Los
   valores se definen acá porque chrome.css lo cargan las 138 páginas,
   así que es el único sitio donde un cambio llega a todas.

   Medido antes de fijarlos: el ancho de 720px y el cuerpo de 1.075rem
   con interlineado 1.75 eran ya el patrón de 9 de las 14 plantillas.
   =================================================================== */
:root{
  --medida-prosa: 720px;   /* ancho del bloque de lectura */
  --medida-ancha: 1180px;  /* portada y páginas de rejilla */
  --texto: 1.075rem;
  --texto-lh: 1.75;
  --texto-color: #2c2c2c;
  --fondo-pagina: #f5f8f5; /* había dos verdes casi iguales conviviendo */
  --h1-tam: clamp(1.9rem, 4.2vw, 2.5rem);
  --h2-tam: clamp(1.35rem, 2.6vw, 1.65rem);
  --h3-tam: 1.15rem;
}

/* Un solo fondo de página para todo lo que no sea landing */
body.prosa{ background: var(--fondo-pagina); }

/* Bloque de lectura. Las páginas se suman poniendo .prosa en el body;
   el ancho y la escala salen de los tokens, no de cada hoja. */
.prosa .container,
.prosa .wrap,
.prosa .content{ max-width: var(--medida-prosa); margin-inline: auto; padding-inline: 1.25rem; }

.prosa .article p,
.prosa .article li,
.prosa .prosa-texto{ font-size: var(--texto); line-height: var(--texto-lh); color: var(--texto-color); }

.prosa .article h1{ font-size: var(--h1-tam); line-height: 1.14; }
.prosa .article h2{ font-size: var(--h2-tam); }
.prosa .article h3{ font-size: var(--h3-tam); }

/* En móvil el margen lateral es el mismo en todas: 20px. Antes iba de
   16 a 44 según la página, y bien-social dejaba el texto en 306px. */
@media(max-width:640px){
  .prosa .container,
  .prosa .wrap,
  .prosa .content{ padding-inline: 1.25rem; }
}