/* Ecotecnia: hoja común de todas las páginas (spec sitio-impeccable, F1).
   Variables de DESIGN.md y las piezas que antes se copiaban en cada página: fuentes, botones, tarjetas,
   menú, submenú, menú móvil y bandas. Lo propio de cada página sigue en su <style>, que carga después. */
:root{
  --slate-dark:#354552;--teal-deep:#2D6050;--teal-mid:#3D8C68;--teal:#47A684;--button-teal:#3A7A5E;
  --mint:#6DBFAA;--mint-pale:#D2EDE4;--gold:#F5C65D;--paper:#F5F5F3;--mist:#F0F4F1;--white:#FFFFFF;
  --line:#E2E8E4;--line-strong:#D4DDD8;--ink-body:#5A6E64;--ink-muted:#4D6359;--ink-faint:#5C706A;
  --ease-out:cubic-bezier(0.23,1,0.32,1);--ease-reveal:cubic-bezier(0.16,1,0.3,1);--ease-drawer:cubic-bezier(0.32,0.72,0,1);
  --shadow-nav:0 2px 20px rgba(53,69,82,0.10);--shadow-pill:0 4px 28px rgba(53,69,82,0.10);
  --shadow-dropdown:0 8px 32px rgba(53,69,82,0.12);--shadow-panel:0 24px 64px rgba(29,42,50,0.18);
  --shadow-card:0 1px 2px rgba(29,42,50,0.06),0 8px 24px rgba(29,42,50,0.06);
  --shadow-card-hover:0 2px 4px rgba(29,42,50,0.08),0 16px 40px rgba(29,42,50,0.10);
  --shadow-button:0 1px 2px rgba(29,42,50,0.12);
}
@font-face { font-family: 'Familiar Pro'; src: url('../fonts/Familiar_Pro-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Eurostile LT Std'; src: url('../fonts/EurostileLTStd.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Jost',sans-serif;background:#F5F5F3;color:#354552;-webkit-font-smoothing:antialiased}
.wordmark{font-family:'Familiar Pro',sans-serif;font-weight:700;font-size:1.2rem;letter-spacing:-0.02em;color:#354552;line-height:1}
.wordmark-sub{font-family:'Eurostile LT Std',sans-serif;font-weight:500;font-size:0.52rem;letter-spacing:0.22em;color:#6DBFAA;text-transform:uppercase;line-height:1}
.nav-link{font-family:'Eurostile LT Std',sans-serif;font-size:0.8rem;letter-spacing:0.08em;text-transform:uppercase;color:#354552;transition:color 0.2s;text-decoration:none}
.nav-link:hover,.nav-link.active{color:#47A684}
.btn-primary{display:inline-flex;align-items:center;gap:.5rem;background:#3A7A5E;color:white;font-family:'Eurostile LT Std',sans-serif;font-size:0.8rem;letter-spacing:0.06em;padding:.8rem 1.75rem;border-radius:2px;text-decoration:none;transition:background 0.2s;border:none;cursor:pointer}
.btn-primary:hover{background:#2D6050}
.btn-outline{display:inline-flex;align-items:center;gap:.5rem;border:2px solid currentColor;color:white;font-family:'Eurostile LT Std',sans-serif;font-size:0.8rem;letter-spacing:0.06em;padding:.78rem 1.75rem;border-radius:2px;text-decoration:none;transition:background 0.2s}
.btn-outline:hover{background:rgba(255,255,255,0.1)}
.btn-slate{display:inline-flex;align-items:center;gap:.5rem;background:white;color:#2D6050;font-family:'Eurostile LT Std',sans-serif;font-size:0.8rem;letter-spacing:0.06em;padding:.8rem 1.75rem;border-radius:2px;text-decoration:none;transition:background 0.2s}
.btn-slate:hover{background:#F0F4F2}
.card{background:white;border:1px solid #E2E8E4;border-radius:2px;transition:border-color 0.2s}
.card:hover{border-color:#47A684}
.line-accent{width:36px;height:4px;background:#47A684}
.diamond-bg{background-color:#2D6050;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpolygon points='32,4 60,32 32,60 4,32' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1'/%3E%3C/svg%3E")}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .65s cubic-bezier(0.16,1,0.3,1),transform .65s cubic-bezier(0.16,1,0.3,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
@media(max-width:767px){[style*="padding:0 4rem"]{padding-left:1rem!important;padding-right:1rem!important}[style*="padding:4rem;width:100%"]{padding:2rem 1rem 80px!important}[style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important}[style*="gap:4rem"]{gap:1.5rem!important}[style*="gap:3.5rem"]{gap:1.5rem!important}[style*="min-width:280px"]{min-width:0!important;flex-basis:100%!important}[style*="grid-template-columns:repeat(12,1fr)"]{grid-template-columns:1fr!important}[style*="grid-column:span"]{grid-column:1/-1!important}}
#main-nav{transform:translateY(-110%);opacity:0;transition:transform 0.8s cubic-bezier(0.22,1,0.36,1),opacity 0.8s cubic-bezier(0.22,1,0.36,1)}
#main-nav.nav-in{transform:translateY(0);opacity:1}
#nav-pill{pointer-events:all;background:rgba(245,245,243,0);backdrop-filter:blur(0px);-webkit-backdrop-filter:blur(0px);border:1px solid rgba(53,69,82,0);border-radius:999px;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:10px 10px 10px 22px;transition:background 0.6s cubic-bezier(0.32,0.72,0,1),border-color 0.6s cubic-bezier(0.32,0.72,0,1),box-shadow 0.6s cubic-bezier(0.32,0.72,0,1),backdrop-filter 0.6s cubic-bezier(0.32,0.72,0,1),-webkit-backdrop-filter 0.6s cubic-bezier(0.32,0.72,0,1)}
#nav-pill.scrolled{background:rgba(255,255,255,0.9);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-color:rgba(53,69,82,0.08);box-shadow:0 4px 28px rgba(53,69,82,0.10),inset 0 1px 0 rgba(255,255,255,0.6)}
#burger{background:none;border:none;cursor:pointer;padding:8px;display:flex;flex-direction:column;gap:5px;justify-content:center;align-items:center;width:36px;height:36px;border-radius:50%;transition:background 0.25s;flex-shrink:0}
#burger:hover{background:rgba(53,69,82,0.07)}
.b-line{display:block;width:18px;height:1.5px;background:#354552;border-radius:2px;transform-origin:center;transition:transform 0.45s cubic-bezier(0.32,0.72,0,1),opacity 0.3s}
.wordmark-accent{color:#f5c65d}
.scrolled-nav .wordmark-sub{color:#354552}
#burger.open .b-line:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
#burger.open .b-line:nth-child(2){opacity:0;transform:scaleX(0)}
#burger.open .b-line:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
#nav-overlay{position:fixed;inset:0;z-index:48;background:rgba(28,80,92,0.96);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);opacity:0;pointer-events:none;transition:opacity 0.5s cubic-bezier(0.32,0.72,0,1);display:flex;flex-direction:column;justify-content:center;padding:5rem 2.5rem 3rem}
#nav-overlay.open{opacity:1;pointer-events:all}
.ov-sub{font-family:'Eurostile LT Std',sans-serif;font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;color:rgba(255,255,255,0.3);margin-bottom:1.75rem}
.ov-link{font-family:'Familiar Pro',sans-serif;font-size:clamp(2rem,9vw,4.5rem);color:rgba(255,255,255,0.88);text-decoration:none;font-weight:700;display:block;padding:0.4rem 0;border-bottom:1px solid rgba(255,255,255,0.07);transform:translateY(32px);opacity:0;transition:transform 0.55s cubic-bezier(0.32,0.72,0,1),opacity 0.55s cubic-bezier(0.32,0.72,0,1),color 0.2s;line-height:1.15}
.ov-link:hover{color:#f5c65d}
#nav-overlay.open .ov-link{transform:translateY(0);opacity:1}
#nav-overlay.open .ov-link:nth-child(1){transition-delay:0.06s}
#nav-overlay.open .ov-link:nth-child(2){transition-delay:0.10s}
#nav-overlay.open .ov-link:nth-child(3){transition-delay:0.14s}
#nav-overlay.open .ov-link:nth-child(4){transition-delay:0.18s}
#nav-overlay.open .ov-link:nth-child(5){transition-delay:0.22s}
#nav-overlay.open .ov-link:nth-child(6){transition-delay:0.26s}
.ov-cta{margin-top:2rem;opacity:0;transform:translateY(20px);transition:opacity 0.55s 0.32s cubic-bezier(0.32,0.72,0,1),transform 0.55s 0.32s cubic-bezier(0.32,0.72,0,1);display:inline-flex}
#nav-overlay.open .ov-cta{opacity:1;transform:translateY(0)}
.nav-dd{position:relative;display:inline-flex;align-items:center}
.nav-dd-trigger{display:inline-flex;align-items:center}
.nav-dd-caret-btn{background:none;border:none;cursor:pointer;padding:2px 0 2px 5px;display:inline-flex;align-items:center;color:#354552}
.nav-dd-caret{width:11px;height:11px;transition:transform .3s cubic-bezier(0.22,1,0.36,1)}
.nav-dd:hover .nav-dd-caret,.nav-dd:focus-within .nav-dd-caret,.nav-dd[data-open="true"] .nav-dd-caret{transform:rotate(180deg)}
body.nav-hero #main-nav:not(.scrolled-nav) .nav-dd-caret-btn{color:rgba(255,255,255,0.8)}
nav.desktop-nav{display:flex;align-items:center;gap:2rem}
.nav-sep{display:inline-block;vertical-align:middle;width:1px;height:18px;flex-shrink:0;background:linear-gradient(to bottom,transparent,rgba(53,69,82,0.45),transparent)}
body.nav-hero #main-nav:not(.scrolled-nav) .nav-sep{background:linear-gradient(to bottom,transparent,rgba(255,255,255,0.55),transparent)}
.nav-dd-panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-8px);min-width:190px;padding:8px;background:rgba(255,255,255,0.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(53,69,82,0.08);border-radius:14px;box-shadow:0 8px 32px rgba(53,69,82,0.12),inset 0 1px 0 rgba(255,255,255,0.6);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s cubic-bezier(0.22,1,0.36,1),transform .28s cubic-bezier(0.22,1,0.36,1),visibility .28s}
.nav-dd-panel::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.nav-dd:hover .nav-dd-panel,.nav-dd:focus-within .nav-dd-panel,.nav-dd[data-open="true"] .nav-dd-panel{opacity:1;visibility:visible;pointer-events:all;transform:translateX(-50%) translateY(0)}
.nav-dd-item{display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:9px;font-family:'Eurostile LT Std',sans-serif;font-size:0.8rem;letter-spacing:0.08em;text-transform:uppercase;color:#354552;text-decoration:none;transition:background .18s,color .18s}
.nav-dd-item::before{content:"";width:5px;height:5px;border-radius:50%;background:#47A684;opacity:0;transition:opacity .18s}
.nav-dd-item:hover{background:rgba(71,166,132,0.10);color:#47A684}
.nav-dd-item:hover::before{opacity:1}
.ov-acc{transform:translateY(32px);opacity:0;transition:transform 0.55s cubic-bezier(0.32,0.72,0,1),opacity 0.55s cubic-bezier(0.32,0.72,0,1);transition-delay:0.10s}
#nav-overlay.open .ov-acc{transform:translateY(0);opacity:1}
.ov-acc-btn{font-family:'Familiar Pro',sans-serif;font-size:clamp(2rem,9vw,4.5rem);font-weight:700;color:rgba(255,255,255,0.88);background:none;border:none;border-bottom:1px solid rgba(255,255,255,0.07);padding:0.4rem 0;width:100%;display:flex;align-items:center;gap:0.4rem;cursor:pointer;text-align:left;line-height:1.15}
.ov-acc-btn:hover{color:#f5c65d}
.ov-acc-caret{width:0.6em;height:0.6em;flex-shrink:0;transition:transform 0.4s cubic-bezier(0.32,0.72,0,1)}
.ov-acc[data-open="true"] .ov-acc-caret{transform:rotate(180deg)}
.ov-acc-panel{overflow:hidden;max-height:0;transition:max-height 0.45s cubic-bezier(0.32,0.72,0,1)}
.ov-acc[data-open="true"] .ov-acc-panel{max-height:60vh}
.ov-sublink{display:block;font-family:'Familiar Pro',sans-serif;font-size:clamp(1.1rem,5vw,2rem);font-weight:700;color:rgba(255,255,255,0.62);text-decoration:none;padding:0.3rem 0 0.3rem 1.25rem;transition:color 0.2s}
.ov-sublink:hover{color:#f5c65d}
@media(prefers-reduced-motion:reduce){.nav-dd-caret,.nav-dd-panel,.ov-acc,.ov-acc-caret,.ov-acc-panel{transition:none}.nav-dd:hover .nav-dd-panel,.nav-dd:focus-within .nav-dd-panel,.nav-dd[data-open="true"] .nav-dd-panel{transform:translateX(-50%) translateY(0)}}
/* Base del sistema (DESIGN.md): sin el margen del navegador, foco y selección de la marca */
body{margin:0}
::selection{background:var(--mint-pale);color:var(--slate-dark)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
/* Relieve (DESIGN.md, Elevation & Depth): tarjetas y botón principal flotan con sombra de pizarra */
.card{box-shadow:var(--shadow-card);transition:border-color .2s ease,box-shadow .2s ease}
@media(hover:hover) and (pointer:fine){.card:hover{box-shadow:var(--shadow-card-hover)}}
.btn-primary{box-shadow:var(--shadow-button)}
/* Botones que responden al presionar (Emil Kowalski): 0.97 con curva de salida en 160 ms */
.btn-primary,.btn-outline,.btn-slate{transition:background-color .2s ease,transform 160ms var(--ease-out)}
.btn-primary:active,.btn-outline:active,.btn-slate:active{transform:scale(0.97)}
@media(prefers-reduced-motion:reduce){.btn-primary:active,.btn-outline:active,.btn-slate:active{transform:none}}
/* Menú móvil abierto: logotipo y X en blanco sobre el verde del menú (antes, pizarra sobre verde) */
#main-nav:has(#burger.open) #nav-pill{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
#main-nav:has(#burger.open) .wordmark{color:#fff}
#main-nav:has(#burger.open) .wordmark-sub{color:var(--mint-pale)}
#main-nav:has(#burger.open) .b-line{background:#fff}
.ov-sub{font-size:.72rem}
/* F2: áreas de toque de 44 px en los botones comunes; el menú fijo no tapa lo que recibe el foco */
.btn-primary,.btn-outline,.btn-slate{min-height:44px}
html{scroll-padding-top:96px}
/* Acordeón del menú móvil: abre sin animar la altura (solo la opacidad) */
.ov-acc-panel{transition:opacity .3s var(--ease-out);opacity:0}
.ov-acc[data-open="true"] .ov-acc-panel{opacity:1}
/* F3: el mismo pie en todas las páginas */
.pie{background:var(--white);border-top:1px solid var(--line);padding:4rem 0 2rem}
.pie-cont{max-width:1280px;margin:0 auto;padding:0 4rem}
@media(max-width:767px){.pie-cont{padding:0 1rem}}
.pie-arriba{display:flex;flex-wrap:wrap;gap:3rem 4rem;justify-content:space-between;margin-bottom:2.5rem}
.pie-marca{max-width:280px}
.pie-logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;margin-bottom:1.25rem}
.pie-logo .wordmark-sub{margin-top:4px}
.pie-lema{font-family:'Jost',sans-serif;color:var(--ink-muted);font-size:.875rem;line-height:1.7;margin:0 0 .5rem}
.pie-correo{display:inline-flex;align-items:center;min-height:44px;font-family:'Jost',sans-serif;color:var(--ink-muted);font-size:.875rem;text-decoration:none;transition:color .2s ease}
.pie-cols{display:flex;flex-wrap:wrap;gap:1.5rem 3.5rem}
.pie-titulo{font-family:'Jost',sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-dark);margin:0 0 .25rem}
.pie-lista{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.pie-lista a{display:inline-flex;align-items:center;min-height:44px;font-family:'Jost',sans-serif;color:var(--ink-muted);font-size:.9rem;text-decoration:none;transition:color .2s ease}
.pie-lista a[aria-current="page"]{color:var(--teal-deep);font-weight:600}
@media(hover:hover) and (pointer:fine){.pie-lista a:hover,.pie-correo:hover{color:var(--teal-deep)}}
.pie-abajo{border-top:1px solid var(--line);padding:1.25rem 0 4.5rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem}
.pie-abajo p{font-family:'Jost',sans-serif;color:var(--ink-faint);font-size:.8rem;margin:0}
.pie-firma{display:inline-flex;align-items:center;min-height:44px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink-faint);font-size:.8rem;letter-spacing:.08em;text-underline-offset:.2em}
/* F4: un solo acordeón en el sitio (preguntas de la portada y de la guía de BESS). Es <details>: abre sin script,
   name="…" deja una respuesta abierta a la vez y, abierta, el fondo es una capa que solo cambia de opacidad */
.faq-lista{border-top:1px solid var(--line)}
details.faq{position:relative;isolation:isolate;border-bottom:1px solid var(--line);interpolate-size:allow-keywords;transition:border-color .35s var(--ease-drawer)}
details.faq::before{content:"";position:absolute;inset:0 -.75rem;z-index:-1;border-radius:8px;background:rgba(71,166,132,0.05);opacity:0;pointer-events:none;transition:opacity .35s var(--ease-drawer)}
details.faq[open]{border-bottom-color:transparent}
details.faq[open]::before{opacity:1}
details.faq summary{display:grid;grid-template-columns:2.75rem 1fr 2rem;align-items:center;gap:.625rem;min-height:44px;padding:1.4rem 0;cursor:pointer;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:2px}
.faq-num{font-family:'Eurostile LT Std',sans-serif;font-size:.72rem;letter-spacing:.12em;color:var(--button-teal);line-height:1;user-select:none;transition:color .3s var(--ease-drawer)}
details.faq[open] .faq-num{color:var(--teal-deep)}
.faq-q{font-family:'Plus Jakarta Sans',sans-serif;font-size:.975rem;color:var(--slate-dark);line-height:1.35;transition:color .3s var(--ease-drawer)}
details.faq[open] .faq-q{color:var(--teal-deep)}
.faq-chevron{width:28px;height:28px;border-radius:50%;border:1px solid #D4E4DC;display:flex;align-items:center;justify-content:center;margin-left:auto;transition:transform .4s var(--ease-drawer),background-color .3s ease,border-color .3s ease}
.faq-chevron svg{transition:stroke .3s}
details.faq[open] .faq-chevron{background:var(--teal);border-color:var(--teal);transform:rotate(180deg)}
details.faq[open] .faq-chevron svg{stroke:white}
.faq-cuerpo{padding:0 0 1.375rem 3.375rem}
.faq-cuerpo p{font-family:'Jost',sans-serif;font-size:.9rem;color:var(--ink-muted);line-height:1.8;margin:0}
/* La altura se anima donde el navegador sabe animar el contenido de <details>; donde no, abre sin transición */
details.faq::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--ease-drawer),content-visibility .45s allow-discrete}
details.faq[open]::details-content{block-size:auto}
@media(max-width:768px){details.faq summary{grid-template-columns:2rem 1fr 2rem}.faq-cuerpo{padding:0 0 1.25rem 2.625rem}}
@media(prefers-reduced-motion:reduce){details.faq,details.faq::before,details.faq::details-content,.faq-num,.faq-q,.faq-chevron,.faq-chevron svg{transition:none}}