/* ══════════════════════════════════════════════════════════════════════
   ESECE · Estilos comunes de las herramientas interactivas
   Reglas idénticas en las 4 páginas de esta familia. Se carga antes del
   <style> de cada página, así que cualquier ajuste propio sigue teniendo
   prioridad escribiéndolo allí.
   ══════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background-color:#0d1613;scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:'Outfit','Outfit Fallback',sans-serif;background:var(--crema);color:var(--tinta)}
a{text-decoration:none;color:inherit}
.nav{position:fixed;top:0;left:0;right:0;z-index:999;display:flex;align-items:center;justify-content:space-between;padding:1rem 5vw;background:rgba(245,240,232,0.97);backdrop-filter:blur(16px);box-shadow:0 1px 0 rgba(0,0,0,0.08)}
.nav-logo{font-family:'Playfair Display','Playfair Fallback',serif;font-size:1.6rem;font-weight:700;color:var(--tinta)}
.nav-logo span{color:var(--oro)}
.nav-links{display:flex;gap:1.75rem;list-style:none;align-items:center}
.nav-links a{font-size:0.78rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--gris)}
.nav-cta{background:var(--oro)!important;color:var(--blanco)!important;padding:0.55rem 1.25rem!important}
.nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:11px 9px;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.nav-burger span{display:block;width:26px;height:1.5px;background:var(--tinta)}
.breadcrumb{background:var(--calido);padding:0.75rem 5vw;font-size:0.78rem;color:var(--gris);border-bottom:1px solid rgba(0,0,0,0.07)}
.breadcrumb a{color:var(--gris)}
.breadcrumb span{margin:0 0.4rem}
.tool-hero{background:linear-gradient(160deg,#1a3a2e 0%,#1c3040 50%,#16252e 100%);padding:6.5rem 5vw 3.5rem;color:var(--blanco);text-align:center}
.tool-hero h1 em{font-style:italic;color:var(--oro2)}
.tool-body{padding:3rem 5vw 5rem;background:var(--crema)}
.flogo span{color:var(--oro)}
.flegal{display:flex;gap:1.5rem}
.flegal a{color:rgba(255,255,255,0.6)}
.wa{position:fixed;bottom:1.5rem;right:1.5rem;width:52px;height:52px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:900;box-shadow:0 4px 16px rgba(0,0,0,0.25)}
.wa svg{width:26px;height:26px;fill:#fff}
.rev,.rev-left,.rev-scale{opacity:1!important;transform:none!important}