/* entotecno · tokens y componentes (colores de plantilla_dashboard/DISENO.md). Ningún color a pelo fuera de :root. */
/* Layout: cabecera fija con menús desplegables · contenedor 1240 · índice lateral en escritorio · fotos sin recortar */
:root{
  --ground:#f3f5f1;--surface:#ffffff;--raised:#eaeee8;--hairline:#d5ddd6;--line:#7e8e84;
  --ink:#13201a;--muted:#4e5e55;
  --polen:#e9b949;--polen-ink:#8a6200;--on-polen:#13201a;
  --ambar:#a64f18;--ciencia:#17715f;--insights:#6b52b8;--agro:#43701a;--foto:#8a6200;--colecciones:#a64f18;
  --pos:#17715f;--neg:#c9642a;--sev1:#7e8e84;--sev2:#b08400;--sev3:#c9642a;--sev4:#a64f18;
  --shadow:0 10px 28px rgba(19,32,26,.08);--bar-bg:rgba(243,245,241,.94);--velo:rgba(19,32,26,.55);
  --muestra-claro:block;--muestra-oscuro:none;
  --f-display:"IBM Plex Serif",Georgia,"Times New Roman",serif;--f-text:"IBM Plex Sans",system-ui,sans-serif;
  --f-serif:"IBM Plex Serif",Georgia,serif;--f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --acento:var(--polen-ink);--radio:8px;color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#0b110e;--surface:#121b16;--raised:#18231d;--hairline:#2c3c33;--line:#5c7165;
  --ink:#eee8da;--muted:#a3b1a6;--polen-ink:#e9b949;
  --ambar:#de7a34;--ciencia:#4cc3ae;--insights:#a994e6;--agro:#9bc554;--foto:#e9b949;--colecciones:#de7a34;
  --pos:#4cc3ae;--neg:#de7a34;--sev2:#e9b949;--sev3:#de7a34;--sev4:#f0915a;
  --shadow:0 10px 28px rgba(0,0,0,.35);--bar-bg:rgba(11,17,14,.92);--velo:rgba(11,17,14,.6);
  --muestra-claro:none;--muestra-oscuro:block;color-scheme:dark;
}}
:root[data-theme="dark"]{
  --ground:#0b110e;--surface:#121b16;--raised:#18231d;--hairline:#2c3c33;--line:#5c7165;
  --ink:#eee8da;--muted:#a3b1a6;--polen-ink:#e9b949;
  --ambar:#de7a34;--ciencia:#4cc3ae;--insights:#a994e6;--agro:#9bc554;--foto:#e9b949;--colecciones:#de7a34;
  --pos:#4cc3ae;--neg:#de7a34;--sev2:#e9b949;--sev3:#de7a34;--sev4:#f0915a;
  --shadow:0 10px 28px rgba(0,0,0,.35);--bar-bg:rgba(11,17,14,.92);--velo:rgba(11,17,14,.6);
  --muestra-claro:none;--muestra-oscuro:block;color-scheme:dark;
}
[data-pilar="foto"]{--acento:var(--foto)}[data-pilar="ciencia"]{--acento:var(--ciencia)}
[data-pilar="insights"]{--acento:var(--insights)}[data-pilar="biocontrol"]{--acento:var(--agro)}
[data-pilar="digitalizacion"]{--acento:var(--colecciones)}

*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--ground);color:var(--ink);font:16px/1.6 var(--f-text);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.15;letter-spacing:-.005em;margin:0 0 .6rem;text-wrap:balance}
h1{font-size:clamp(2rem,4.2vw,3.2rem)}h2{font-size:clamp(1.5rem,2.5vw,2.05rem)}h3{font-size:1.2rem}
p,li{max-width:70ch}p{margin:0 0 1rem}.lead{font-size:1.12rem;color:var(--muted)}
.lema{font-family:var(--f-serif);font-style:italic;color:var(--muted)}
.mono,.exif,td.num,.kpi b{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}small{font-size:.86em}
.sr{position:absolute;left:-999px;width:1px;height:1px;overflow:hidden}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
.saltar{position:absolute;left:8px;top:-40px;background:var(--surface);padding:.5rem 1rem;border:1px solid var(--hairline);border-radius:var(--radio);z-index:99}.saltar:focus{top:8px}
.wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
section{padding-block:clamp(2.5rem,6vw,5rem)}section + section{border-top:1px solid var(--hairline)}
.grid{display:grid;gap:1.25rem;align-items:stretch}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid>*{min-width:0}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.g3{grid-template-columns:1fr}.g4{grid-template-columns:1fr}.g2{grid-template-columns:1fr}}

/* cabecera con menús desplegables */
.cab{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--bar-bg);backdrop-filter:blur(10px);border-bottom:1px solid var(--hairline)}
.cab .wrap{display:flex;align-items:center;gap:.75rem;min-height:62px;position:relative}
.cab .logo{display:flex;align-items:center;color:var(--ink);text-decoration:none;flex:none}.cab .logo svg{height:26px;width:auto}
.cab nav{margin-left:auto;display:flex;gap:.1rem;overflow:visible}
.cab nav>.menu{position:relative}
.cab nav a{font-family:var(--f-text);font-weight:600;font-size:.9rem;text-decoration:none;padding:.45rem .6rem;border-radius:var(--radio);white-space:nowrap;color:var(--muted);display:block}
.cab nav a:hover,.cab nav a[aria-current]{color:var(--ink);background:var(--raised)}
.cab nav .sub{position:absolute;top:100%;left:0;display:none;min-width:240px;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radio);box-shadow:var(--shadow);padding:.4rem;z-index:60}
.cab nav .sub a{font-weight:500;color:var(--ink)}
.cab nav .menu:hover .sub,.cab nav .menu:focus-within .sub{display:grid}
.ctrl{display:flex;align-items:center;gap:.5rem;flex:none}
.idioma{display:flex;gap:.25rem;font-size:.78rem;font-weight:600;color:var(--muted)}.idioma a{text-decoration:none;padding:.3rem .45rem;border-radius:var(--radio)}.idioma a[aria-current]{color:var(--ink);background:var(--raised)}.idioma a[aria-disabled]{opacity:.55;cursor:not-allowed}
.tema{border:1px solid var(--hairline);background:var(--surface);color:var(--ink);border-radius:999px;height:36px;padding:0 .75rem 0 .55rem;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;font:600 .78rem var(--f-text)}
.progreso{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--acento)}
@media (max-width:1100px){.cab .wrap{flex-wrap:wrap;padding-block:.5rem}.cab nav{order:3;width:100%;margin-left:0;overflow-x:auto;scrollbar-width:none}.cab nav::-webkit-scrollbar{display:none}.cab nav .sub{display:none!important}.ctrl{margin-left:auto}}

/* eyebrow con hexágono (el omatidio del pilar); sin mayúsculas forzadas porque entotecno va en minúscula */
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-text);font-weight:600;font-size:.82rem;letter-spacing:.03em;color:var(--muted);margin-bottom:.75rem}
.hex{width:12px;height:13px;background:var(--acento);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);flex:none}

/* hero: la foto entera, sin recortes */
.hero{padding-block:clamp(2.5rem,6vw,5rem)}
.hero .wrap{display:grid;gap:2rem;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}
.hero figure,.panel figure{margin:0}.hero figure img,.panel figure img{width:100%;height:auto;border-radius:var(--radio);box-shadow:var(--shadow)}
.hero figcaption,.pie-foto{font-family:var(--f-mono);font-size:.75rem;color:var(--muted);margin-top:.4rem}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}}

/* botones */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-text);font-weight:600;font-size:.95rem;text-decoration:none;padding:.7rem 1.15rem;border-radius:var(--radio);border:1px solid var(--acento);background:var(--acento);color:var(--surface);cursor:pointer;line-height:1.2}
.btn.sec{background:transparent;color:var(--ink);border-color:var(--line)}.btn.sec:hover{background:var(--raised)}
.btn:hover{filter:brightness(1.08)}.btn.polen{background:var(--polen);border-color:var(--polen);color:var(--on-polen)}
.btn[disabled]{opacity:.6;cursor:not-allowed}
.acciones{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}

/* tarjetas alineadas: misma estructura interna, botones al pie */
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radio);padding:1.25rem;display:flex;flex-direction:column;gap:.5rem}
.card>*{margin:0}.card .acciones{margin-top:auto;padding-top:.5rem}.card.tono{border-left:4px solid var(--acento)}
.card ul{padding-left:1.1rem}
.kpi{display:grid;grid-template-rows:auto auto auto;gap:.2rem}.kpi span{font-size:.78rem;letter-spacing:.03em;color:var(--muted);font-weight:600}
.kpi b{font-family:var(--f-display);font-weight:600;font-size:2rem;line-height:1}.kpi small{color:var(--muted)}

/* etiquetas y avisos */
.tag{display:inline-block;font-family:var(--f-mono);font-size:.72rem;line-height:1.35;padding:.2rem .55rem;border-radius:999px;border:1px solid var(--hairline);color:var(--muted);background:var(--raised);vertical-align:middle}
.tag.ejemplo{border-color:var(--polen);color:var(--polen-ink);background:transparent}
.tag.pos{color:var(--pos);border-color:var(--pos)}.tag.neg{color:var(--neg);border-color:var(--neg)}
.aviso{border:1px dashed var(--line);border-radius:var(--radio);padding:.9rem 1rem;font-size:.92rem;color:var(--muted);background:var(--surface)}
.aviso.ia{border-color:var(--insights)}
.descargo{border-left:3px solid var(--neg);background:var(--surface);padding:.75rem 1rem;font-size:.9rem;color:var(--muted);border-radius:0 var(--radio) var(--radio) 0;margin:1rem 0}
.descargo b{color:var(--ink)}

/* tablas */
.tabla{width:100%;overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:.95rem}
th,td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--hairline);vertical-align:top}th{font-weight:600;font-size:.82rem;letter-spacing:.03em;color:var(--muted)}
td.num,th.num{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.tabla-precios td:not(:first-child){font-family:var(--f-mono);white-space:nowrap}

/* precios en tarjetas */
.precios{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:stretch}
.precio{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radio);padding:1.25rem;display:flex;flex-direction:column;gap:.5rem}
.precio.destacado{border-color:var(--acento);box-shadow:var(--shadow)}
.precio .cifra{font-family:var(--f-display);font-weight:600;font-size:1.9rem;line-height:1}.precio .cifra small{font-size:.9rem;font-weight:500;color:var(--muted);font-family:var(--f-text)}
.precio ul{margin:0;padding-left:1.1rem;font-size:.92rem;color:var(--muted)}.precio .acciones{margin-top:auto}

/* pasos */
.pasos{counter-reset:p;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));padding:0;margin:0;list-style:none}
.pasos li{counter-increment:p;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radio);padding:1rem}
.pasos li::before{content:counter(p);display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--acento);color:var(--surface);font-weight:700;margin-bottom:.6rem}

/* galerías: encuadre original, en columnas */
.galeria{columns:4 220px;column-gap:.75rem}.galeria figure{margin:0 0 .75rem;break-inside:avoid}
.galeria img{width:100%;height:auto;border-radius:var(--radio)}
.marca-agua{position:relative;overflow:hidden;border-radius:var(--radio)}.marca-agua::after{content:"entotecno · muestra";position:absolute;inset:auto 0 0 0;padding:.4rem .6rem;background:var(--velo);color:#fff;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em}

/* estrellas */
.estrellas{--n:0;display:inline-block;font-size:1.1rem;letter-spacing:.1em;line-height:1;position:relative;color:var(--hairline)}
.estrellas::before{content:"★★★★★"}.estrellas::after{content:"★★★★★";position:absolute;left:0;top:0;color:var(--polen-ink);width:calc(var(--n)/5*100%);overflow:hidden;white-space:nowrap}

/* home: paneles por pilar */
.panel{display:grid;align-items:center;border-top:1px solid var(--hairline)}
.panel .wrap{display:grid;gap:2rem;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;padding-block:clamp(2.5rem,5vw,4rem)}
.panel:nth-child(even) .wrap{direction:rtl}.panel:nth-child(even) .wrap>*{direction:ltr}
.panel figure img{transition:filter .9s ease,transform .9s ease}
.panel.enfocar figure img{filter:blur(14px);transform:scale(1.02)}.panel.enfocar.in figure img{filter:blur(0);transform:none}
.panel ul{padding-left:1.1rem;color:var(--muted);margin:.5rem 0 0}
@media (prefers-reduced-motion:reduce){.panel figure img{transition:none}.panel.enfocar figure img{filter:none;transform:none}html{scroll-behavior:auto}}
@media (max-width:860px){.panel .wrap{grid-template-columns:1fr;direction:ltr}}

/* portada home */
.portada{padding-block:clamp(3rem,8vw,6rem)}.portada .ojo{width:72px;height:72px;margin-bottom:1.5rem}
.portada h1{font-size:clamp(2.4rem,5.5vw,4.4rem);max-width:16ch}.portada .lema{font-size:1.35rem}
.puertas{display:grid;gap:.75rem;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:2rem}
.puertas a{text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radio);padding:1rem;display:grid;gap:.4rem;align-content:start}
.puertas a:hover{border-color:var(--acento)}.puertas b{font-family:var(--f-display);font-weight:600;font-size:1.1rem}.puertas small{color:var(--muted)}
@media (max-width:1100px){.puertas{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:560px){.puertas{grid-template-columns:1fr}}
.pilar-foto{--acento:var(--foto)}.pilar-ciencia{--acento:var(--ciencia)}.pilar-insights{--acento:var(--insights)}.pilar-biocontrol{--acento:var(--agro)}.pilar-digitalizacion{--acento:var(--colecciones)}

/* índice fijo */
.indice{position:fixed;left:12px;top:50%;transform:translateY(-50%);display:grid;gap:.35rem;z-index:40}
.indice a{width:10px;height:11px;background:var(--hairline);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);text-decoration:none;position:relative}
.indice a:hover,.indice a.activo{background:var(--acento)}
.indice a span{position:absolute;left:18px;top:-4px;font:.75rem var(--f-mono);color:var(--muted);white-space:nowrap;opacity:0;pointer-events:none}.indice a:hover span,.indice a:focus span{opacity:1}
@media (max-width:1400px){.indice{display:none}}

/* formularios (de ejemplo: no envían nada) */
form.ejemplo{display:grid;gap:.75rem;max-width:560px}
form.ejemplo label{display:grid;gap:.25rem;font-size:.9rem;color:var(--muted)}
form.ejemplo input,form.ejemplo select,form.ejemplo textarea,.campo{font:inherit;padding:.6rem .7rem;border:1px solid var(--line);border-radius:var(--radio);background:var(--surface);color:var(--ink);width:100%}
form.ejemplo .ok{color:var(--pos);font-size:.92rem}
.opciones{display:flex;flex-wrap:wrap;gap:.5rem}.opciones label{border:1px solid var(--line);border-radius:999px;padding:.35rem .8rem;cursor:pointer;font-size:.9rem;background:var(--surface)}
.opciones input{position:absolute;opacity:0;pointer-events:none}.opciones label:has(input:checked){background:var(--acento);color:var(--surface);border-color:var(--acento)}

/* barras y mapa de calor */
.barra{height:8px;background:var(--raised);border-radius:999px;overflow:hidden}.barra i{display:block;height:100%;background:var(--acento);width:var(--w,0)}
.fila-nota{display:grid;grid-template-columns:minmax(0,1fr) 3rem;gap:.75rem;align-items:center;padding:.4rem 0;border-bottom:1px solid var(--hairline)}
.mapa-calor{display:grid;grid-template-columns:auto repeat(24,minmax(0,1fr));gap:2px}.mapa-calor i{aspect-ratio:1;background:var(--pos);opacity:var(--o,0);border-radius:2px}
.mapa-calor i.plaga{background:var(--neg)}.mapa-calor i.solape{background:var(--polen-ink)}

/* pie */
footer{border-top:1px solid var(--hairline);background:var(--surface);padding-block:3rem;font-size:.92rem;color:var(--muted)}
footer .wrap{display:grid;gap:2rem;grid-template-columns:2fr 1fr 1fr 1fr}
footer h4{font-size:.8rem;letter-spacing:.04em;color:var(--muted);font-family:var(--f-text)}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.35rem}footer a{color:var(--ink);text-decoration:none}footer a:hover{text-decoration:underline}
.redes{display:flex;gap:.75rem;margin-top:1rem}.redes img{width:26px;height:26px}
.solo-claro{display:var(--muestra-claro)}.solo-oscuro{display:var(--muestra-oscuro)}
.legalillo{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--hairline);font-size:.8rem}
@media (max-width:860px){footer .wrap{grid-template-columns:1fr 1fr}}@media (max-width:560px){footer .wrap{grid-template-columns:1fr}}

.panel h2 a{color:inherit;text-decoration:none}.panel h2 a:hover{color:var(--acento)}.panel>.wrap>a{display:block}.instagram:empty{display:none}.cab .ctrl{flex-wrap:wrap}
.opciones label{position:relative;overflow:hidden}.opciones input{width:1px;height:1px;left:0;top:0}
@media (max-width:1400px){.cab nav a{padding:.45rem .5rem;font-size:.86rem}.cab .wrap{gap:.5rem}}
[hidden]{display:none!important}