/* ============================================================
   Krumlab: estilos compartidos landing (software + branding)
   Paleta y tipografías originales de la marca. Hero oscuro,
   cuerpo claro. Las animaciones las orquesta js/site.js (GSAP).
   ============================================================ */

@font-face{font-family:'Futuru';src:url('../fonts/futuru/Futuru-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Futuru';src:url('../fonts/futuru/Futuru-Extrabold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Futuru';src:url('../fonts/futuru/Futuru-Semibold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Syne';src:url('../fonts/syne/Syne-VariableFont_wght.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* --green-darker se usa para texto pequeño sobre blanco, verde claro y gris
     claro. En #5e8553 se quedaba en 4,24:1 y no llegaba al mínimo de 4,5:1;
     con #527447 pasa en los tres fondos (5,32 / 4,97 / 4,87). */
  --green:#9dde8b;--green-dark:#7eb26f;--green-darker:#527447;--green-light:#f0faee;
  --black:#212121;--black-soft:#2e2e2e;--gray:#6b6b6b;--gray-light:#f5f5f3;--gray-mid:#e8e8e6;--white:#fff;
  --ink:#101010;--ink-2:#161616;--ink-line:#242424;
  --fd:'Futuru',sans-serif;--fb:'Syne',sans-serif;
}

html{scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--white);color:var(--black);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}

::selection{background:var(--green);color:var(--black)}
/* Doble anillo: el verde solo se distingue sobre el hero oscuro, y sobre el
   cuerpo blanco quedaba casi invisible. El halo oscuro exterior lo hace
   visible sobre cualquiera de los dos fondos. */
a:focus-visible,button:focus-visible{outline:2px solid var(--black);outline-offset:2px;border-radius:4px;box-shadow:0 0 0 5px rgba(157,222,139,.55)}
.sec-dark a:focus-visible,.sec-dark button:focus-visible,
nav:not(.scrolled) a:focus-visible,nav:not(.scrolled) button:focus-visible,
.casos-hero a:focus-visible,.hero a:focus-visible,.hero button:focus-visible{outline-color:var(--green);box-shadow:0 0 0 5px rgba(0,0,0,.55)}

/* Ocultar lo animable solo cuando hay JS; sin JS todo es visible */
html.js [data-rv]{opacity:0}
html.js .hero h1{opacity:0}
html.js.reduced [data-rv],html.js.reduced .hero h1{opacity:1 !important;transform:none !important}

/* ── NAV ─────────────────────────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:1.1rem 5%;background:transparent;border-bottom:1px solid transparent;transition:background .35s,border-color .35s,padding .35s}
nav .nav-logo{display:flex;align-items:center;line-height:0;position:relative;z-index:2}
nav .nav-logo svg{height:24px;width:auto}
nav .nav-logo path{transition:fill .35s}
.nav-logo-full{display:block}
.nav-logo-icon{display:none}
/* Tres zonas: logo a la izquierda, enlaces centrados en la pantalla y las
   acciones a la derecha. Los enlaces van en posición absoluta para quedar
   centrados de verdad respecto a la ventana, no respecto al hueco que sobra. */
.nav-links{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:1.75rem}
.nav-acciones{display:flex;align-items:center;gap:1rem;margin-left:auto}
.nav-link{font-size:.85rem;font-weight:500;color:#a8a8a8;text-decoration:none;transition:color .25s;position:relative}
.nav-link::after{content:'';position:absolute;left:0;bottom:-5px;width:0;height:2px;background:var(--green);transition:width .25s}
.nav-link:hover{color:var(--white)}
.nav-link:hover::after{width:100%}
.nav-link.active{color:var(--white);font-weight:700}
.nav-link.active::after{width:100%}
.nav-ingresar{font-size:.82rem;font-weight:600;color:var(--white);text-decoration:none;border:1.5px solid rgba(255,255,255,.4);border-radius:100px;padding:.4rem 1.15rem;transition:all .25s}
.nav-ingresar:hover{background:var(--green);border-color:var(--green);color:var(--black)}
.lang-switch{display:flex;border:1.5px solid #3a3a3a;border-radius:100px;overflow:hidden;transition:border-color .35s}
.lang-btn{padding:.32rem .85rem;font-family:var(--fb);font-size:.75rem;font-weight:600;letter-spacing:.05em;cursor:pointer;border:none;background:transparent;color:#8a8a8a;transition:all .25s}
.lang-btn.active{background:var(--white);color:var(--black)}
.lang-btn .flag{display:none}
.lang-btn .code{display:inline}

/* Nav al hacer scroll: fondo claro */
nav.scrolled{background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom-color:var(--gray-mid);padding:.85rem 5%}
nav.scrolled .nav-link{color:var(--gray)}
nav.scrolled .nav-link:hover,nav.scrolled .nav-link.active{color:var(--black)}
nav.scrolled .nav-ingresar{color:var(--black);border-color:var(--black)}
nav.scrolled .nav-ingresar:hover{background:var(--black);border-color:var(--black);color:var(--white)}
nav.scrolled .lang-switch{border-color:var(--gray-mid)}
nav.scrolled .lang-btn.active{background:var(--black);color:var(--white)}
/* Logo: blanco sobre el hero, tinta al hacer scroll (la K acento queda verde) */
nav:not(.scrolled) .nav-logo path:not(.k-accent){fill:#fff}

/* Paginas que arrancan sobre fondo claro, sin hero oscuro debajo de la nav.
   Sin esto la nav nace pintada para el hero: el boton de Ingresar en blanco y
   el logo tambien, o sea invisibles. Va despues de la regla de arriba para
   ganarle el empate de especificidad y corregirla. Y lleva :not(.menu-open)
   porque el panel movil es oscuro siempre: fiarlo al orden dejaba las barras
   del boton en negro sobre negro y los enlaces del panel a 3.57 de contraste. */
.fondo-claro nav:not(.menu-open) .nav-link{color:var(--gray)}
.fondo-claro nav:not(.menu-open) .nav-link:hover,.fondo-claro nav:not(.menu-open) .nav-link.active{color:var(--black)}
.fondo-claro nav:not(.menu-open) .nav-ingresar{color:var(--black);border-color:var(--gray-mid)}
.fondo-claro nav:not(.menu-open) .nav-ingresar:hover{background:var(--black);border-color:var(--black);color:var(--white)}
.fondo-claro nav:not(.menu-open) .lang-switch{border-color:var(--gray-mid)}
.fondo-claro nav:not(.menu-open) .lang-btn{color:var(--gray)}
.fondo-claro nav:not(.menu-open) .lang-btn.active{background:var(--black);color:var(--white)}
.fondo-claro nav:not(.menu-open) .nav-logo path:not(.k-accent){fill:var(--black)}
.fondo-claro nav:not(.menu-open) .nav-toggle-bars span{background:var(--black)}

/* ── NAV MÓVIL ───────────────────────────────────────────── */
/* Texto solo para lectores de pantalla: el botón necesita nombre
   accesible y el icono son dos barras sin significado. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Oculto en escritorio; el media query de abajo lo enciende */
.nav-toggle{display:none;position:relative;z-index:2;width:44px;height:44px;padding:0;border:none;background:transparent;cursor:pointer;align-items:center;justify-content:center}
.nav-toggle-bars{position:relative;display:block;width:22px;height:14px}
.nav-toggle-bars span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:var(--white);transition:transform .3s,background-color .35s}
.nav-toggle-bars span:nth-child(1){top:0}
.nav-toggle-bars span:nth-child(2){bottom:0}
/* Sobre la barra blanca del scroll las barras tienen que oscurecerse... */
nav.scrolled .nav-toggle-bars span{background:var(--black)}
/* ...pero con el panel abierto el fondo vuelve a ser oscuro, gane o no .scrolled */
nav.menu-open .nav-toggle-bars span{background:var(--white)}
nav.menu-open .nav-toggle-bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
nav.menu-open .nav-toggle-bars span:nth-child(2){transform:translateY(-6px) rotate(-45deg)}
/* Mismo motivo: el logo se pinta oscuro al hacer scroll y sobre el panel desaparecería */
nav.menu-open .nav-logo path:not(.k-accent){fill:#fff}

/* Un elemento con backdrop-filter se vuelve bloque contenedor de sus
   descendientes position:fixed. Con .scrolled activo, el inset:0 del panel
   dejaba de medirse contra la pantalla y se recortaba a la altura de la
   barra: el menú funcionaba arriba del todo y se rompía tras hacer scroll.
   Mientras el panel está abierto la barra no necesita ni fondo ni blur. */
nav.menu-open{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent}

/* Bloqueo de scroll compartido: lo usan el panel del menú y los modales */
body.sin-scroll{overflow:hidden}

/* ── HERO OSCURO ─────────────────────────────────────────── */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:9rem 5% 7.5rem;position:relative;overflow:hidden;background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%)}
.hero-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 90% 75% at 50% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 90% 75% at 50% 40%,#000 30%,transparent 75%)}
.orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(110px);will-change:transform}
.orb-a{width:520px;height:520px;background:rgba(157,222,139,.17);top:-140px;left:-100px}
.orb-b{width:440px;height:440px;background:rgba(126,178,111,.12);bottom:-120px;right:-80px}

.hero-tag{display:inline-block;font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#9a9a9a;background:rgba(255,255,255,.04);border:1px solid #2e2e2e;padding:.45rem 1.1rem .45rem .9rem;border-radius:100px;margin-bottom:2.25rem;white-space:nowrap;line-height:1;position:relative;z-index:2}
.hero-tag-inner{display:inline-flex;align-items:center;gap:.55rem}
.hero-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;flex-shrink:0;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(157,222,139,.5)}50%{box-shadow:0 0 0 7px rgba(157,222,139,0)}}

.hero h1{font-family:var(--fd);font-weight:800;line-height:1.06;letter-spacing:-.03em;margin-bottom:1.75rem;max-width:1000px;position:relative;z-index:2;color:var(--white)}
.hero h1 .h1-line{display:block;font-size:clamp(2.7rem,6.5vw,5.8rem)}
.hero h1 .accent{display:block;color:var(--green);font-size:clamp(2rem,4.6vw,4.1rem)}
.hero-sub{font-size:1.02rem;color:#9a9a9a;max-width:560px;margin:0 auto 2.75rem;font-weight:300;line-height:1.85;position:relative;z-index:2}
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-bottom:3.25rem;position:relative;z-index:2}
.hero-badges{display:flex;gap:2rem;flex-wrap:wrap;justify-content:center;position:relative;z-index:2}
.hero-badge{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:#8a8a8a;font-weight:400}
.hero-badge svg{width:14px;height:14px;stroke:var(--green);stroke-width:2.5;fill:none;flex-shrink:0}

/* Marquee inferior del hero */
.hero-marq{position:absolute;left:0;right:0;bottom:0;border-top:1px solid var(--ink-line);padding:1.1rem 0;overflow:hidden;z-index:2;background:rgba(16,16,16,.55);backdrop-filter:blur(4px)}
.marq-track{display:flex;gap:3.5rem;width:max-content;animation:marq 34s linear infinite;will-change:transform}
.hero-marq:hover .marq-track{animation-play-state:paused}
.marq-item{display:inline-flex;align-items:center;gap:3.5rem;font-family:var(--fd);font-size:.75rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#4e4e4e;white-space:nowrap}
.marq-item i{width:6px;height:6px;border-radius:50%;background:var(--green-darker);display:inline-block;flex-shrink:0}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── BOTONES ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:1rem 2.2rem;font-family:var(--fb);font-size:.93rem;font-weight:600;border-radius:100px;text-decoration:none;cursor:pointer;border:none;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s,color .2s}
.btn:active{transform:scale(.97)}
.btn-green{background:var(--green);color:var(--black)}
.btn-green:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(157,222,139,.28)}
.btn-ghost{background:transparent;color:var(--white);border:1.5px solid #3a3a3a}
.btn-ghost:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px)}
.btn-dark{background:var(--black);color:var(--white)}
.btn-dark:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(33,33,33,.22)}
.btn-outline{background:var(--white);color:var(--black);border:1.5px solid var(--gray-mid)}
.btn-outline:hover{border-color:var(--black);transform:translateY(-2px)}

/* ── SECCIONES BASE ──────────────────────────────────────── */
section{padding:6.5rem 5%;position:relative}
.wrap{max-width:1200px;margin:0 auto}
.slabel{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--green-darker);margin-bottom:1.1rem;display:flex;align-items:center;gap:.6rem}
.slabel::before{content:'';width:22px;height:2px;background:var(--green);display:inline-block}
.stitle{font-family:var(--fd);font-size:clamp(1.9rem,3.6vw,3.1rem);font-weight:700;line-height:1.22;letter-spacing:-.02em;margin-bottom:1.1rem}
.ssub{font-size:1rem;color:var(--gray);font-weight:300;line-height:1.8;margin-bottom:3rem;max-width:560px}

.sec-dark{background:var(--ink)}
.sec-dark .slabel{color:var(--green)}
.sec-dark .stitle{color:var(--white)}
.sec-dark .ssub{color:#8a8a8a}

.card{background:var(--white);border:1.5px solid var(--gray-mid);border-radius:14px;transition:transform .25s,box-shadow .25s,border-color .25s}
.card:hover{border-color:var(--green-dark);transform:translateY(-3px);box-shadow:0 18px 40px rgba(33,33,33,.07)}

/* ── FOOTER ──────────────────────────────────────────────── */
footer{background:var(--ink);color:#555;padding:3.5rem 5% 2.5rem;border-top:1px solid var(--ink-line)}
.foot-top{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;max-width:1200px;margin:0 auto 2.25rem}
.foot-logo svg{height:22px;width:auto}
.foot-logo path:not(.k-accent){fill:#fff}
.foot-links{display:flex;gap:1.75rem;flex-wrap:wrap}
.foot-links a{color:#8a8a8a;text-decoration:none;font-size:.82rem;transition:color .25s}
.foot-links a:hover{color:var(--green)}
.foot-bottom{max-width:1200px;margin:0 auto;padding-top:1.5rem;border-top:1px solid var(--ink-line);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.75rem;font-weight:300}
.foot-bottom a{color:var(--green);text-decoration:none}

/* ── MODAL ───────────────────────────────────────────────── */
/* Compartido entre la landing de software y /casos. Estuvo inline en
   index.html hasta que /casos lo necesitó también. */
/* visibility:hidden además de opacity: ni opacity:0 ni pointer-events sacan el
   elemento del árbol de accesibilidad ni del orden de tabulación. Sin esto, los
   cinco modales cerrados dejaban 10 controles enfocables invisibles después del
   pie de página y un lector de pantalla leía los cinco casos enteros de nuevo. */
.modal-overlay{position:fixed;inset:0;background:rgba(10,10,10,.65);z-index:500;display:flex;align-items:center;justify-content:center;padding:1.5rem;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility 0s linear .25s;backdrop-filter:blur(6px)}
/* visibility sin transición al abrir y retrasada al cerrar. Con "visibility .25s"
   el valor seguía siendo hidden justo después de añadir .open, así que el
   focus() de openModal no prendía y el modal se abría sin foco dentro. */
.modal-overlay.open{opacity:1;visibility:visible;pointer-events:all;transition:opacity .25s,visibility 0s}
/* max-height + scroll también en el modal corto: sin esto, al ampliar el texto
   al 200% el contenido se salía por arriba y por abajo sin forma de alcanzarlo,
   porque body.sin-scroll impide desplazar el documento. */
.modal{background:var(--white);border-radius:18px;max-width:580px;width:100%;max-height:88vh;overflow-y:auto;overscroll-behavior:contain;padding:2.75rem;position:relative;transform:translateY(18px) scale(.98);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.modal-overlay.open .modal{transform:none}
.modal-close{position:absolute;top:1.25rem;right:1.25rem;background:var(--gray-light);border:none;font-size:1.05rem;cursor:pointer;color:var(--gray);line-height:1;width:34px;height:34px;border-radius:50%;transition:background .2s,color .2s;z-index:3}
.modal-close:hover{background:var(--black);color:var(--white)}
.modal-sector{font-size:.65rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--green-darker);margin-bottom:.5rem}
.modal-title{font-family:var(--fd);font-size:1.6rem;font-weight:800;margin-bottom:.25rem;letter-spacing:-.02em}
.modal-client{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--green-darker);margin-bottom:1.5rem}
.modal-desc{font-size:.9rem;color:var(--gray);font-weight:300;line-height:1.8}
.modal-cta{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.75rem;padding:.85rem 1.6rem;background:var(--black);color:var(--white);font-size:.85rem;font-weight:600;border-radius:100px;text-decoration:none;transition:transform .2s,box-shadow .2s}
.modal-cta:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(33,33,33,.2)}

/* Variante larga: el caso completo se lee desplazándose dentro del modal.
   Quien hace scroll es .modal-scroll, no la tarjeta: así el botón de cerrar
   queda anclado fuera del área desplazable. Con sticky dentro del scroll, el
   texto pasaba por debajo del botón y en móvil le comía el final de cada línea. */
.modal.modal-caso{max-width:820px;padding:0;max-height:88vh;overflow:hidden}
.modal-caso .modal-scroll{max-height:88vh;overflow-y:auto;overscroll-behavior:contain;border-radius:18px}
.modal-caso .modal-close{background:rgba(255,255,255,.92);backdrop-filter:blur(6px);box-shadow:0 2px 10px rgba(0,0,0,.12);color:var(--black)}
.modal-portada{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top center;background:var(--gray-light);border-radius:18px 18px 0 0}
.modal-cuerpo{padding:2.25rem 2.75rem 2.75rem}
.modal-bloque{margin-top:2rem}
.modal-bloque h3{font-family:var(--fd);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gray);margin-bottom:.7rem}
.modal-bloque p{font-size:.92rem;color:var(--gray);font-weight:300;line-height:1.85}
.modal-figura{margin-top:1.25rem}
.modal-figura img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--gray-mid);background:var(--gray-light)}
.modal-figura figcaption{margin-top:.6rem;font-size:.75rem;color:var(--gray);font-weight:300}
/* Dos capturas en pareja. Van en una tira que se desplaza sola: con width:auto
   la imagen se dibujaba a su ancho natural, desbordaba la columna y arrastraba
   el modal entero en horizontal, dejando los textos corridos a la izquierda.
   El scroll queda contenido aquí y el resto del caso no se mueve. */
.modal-figura.duo{display:block}
/* align-items:center y no el stretch por defecto: en una tira con una captura
   apaisada y otra de móvil, el stretch estiraba la apaisada hasta el alto de
   la otra y la deformaba. */
.duo-tira{display:flex;align-items:center;gap:.9rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:.6rem;scrollbar-width:thin}
/* Limitar por ancho Y alto: fijar solo el ancho estiraba las capturas de móvil,
   que a 540px de ancho se iban por encima de los 1100px de alto. Con las dos
   cotas y las medidas en auto, el navegador escala respetando la proporción. */
.duo-tira img{flex:0 0 auto;width:auto;height:auto;max-width:min(84%,540px);max-height:430px;scroll-snap-align:center}
.duo-tira::-webkit-scrollbar{height:6px}
.duo-tira::-webkit-scrollbar-thumb{background:var(--gray-mid);border-radius:3px}
.duo-tira::-webkit-scrollbar-track{background:transparent}

/* Video incrustado: relación 16/9 sin que salte la maquetación al cargar */
.modal-video{position:relative;width:100%;aspect-ratio:16/9;margin-top:1.25rem;border-radius:12px;overflow:hidden;background:var(--ink);border:1px solid var(--gray-mid)}
.modal-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Dos botones seguidos: el segundo no compite con el principal */
.modal-cta.secundario{background:transparent;color:var(--black);border:1.5px solid var(--gray-mid);margin-left:.6rem}
.modal-cta.secundario:hover{border-color:var(--black);box-shadow:none}
/* Marcas: cada logo va centrado y pequeño sobre el color de su marca, con aire
   de sobra alrededor. Sin recuadro ni borde: varios logos juntos, cada uno en
   su caja, se veían recortados y sucios. */
.marca-lienzo{display:flex;align-items:center;justify-content:center;gap:clamp(2rem,7vw,5rem);padding:clamp(2rem,6vw,4rem);border:0;border-radius:12px}
/* La miniatura de tarjeta trae object-fit:cover para las capturas, y con la
   misma especificidad gana por ir después en la cascada: recortaba los logos.
   De ahí que el selector encadene las dos clases. */
.marca-lienzo img,
.caso-thumb.marca-lienzo img{width:auto;height:auto;max-width:min(44%,240px);max-height:120px;object-fit:contain;border:0;border-radius:0;background:none;transition:none}
/* Un solo logo puede permitirse algo más de tamaño que dos juntos */
.marca-lienzo.solo img,
.caso-thumb.marca-lienzo.solo img{max-width:min(62%,300px);max-height:150px}
/* Sin zoom al pasar por encima: un logo no se amplía como una fotografía */
.caso-card:hover .caso-thumb.marca-lienzo img{transform:none}
/* Las retículas vienen dibujadas en gris claro sobre transparente, así que
   sobre el color de la marca se pierden. Sobre fondo claro además hay que
   oscurecer el trazo, o el problema es el mismo al revés. */
.marca-lienzo.reticula-clara{background:#f4f4f2}
.marca-lienzo.reticula-clara img{filter:brightness(.42)}
.marca-lienzo.reticula-oscura{background:#2b2b2b}
.marca-lienzo.reticula-oscura img{filter:none}
/* Los grises claros de Ninjave y Weego se pierden sobre sus fondos de color */
.marca-lienzo.blanco img{filter:brightness(0) invert(1)}
.modal-portada.marca-lienzo{border-radius:18px 18px 0 0}
@media(max-width:600px){
  .marca-lienzo{gap:1.5rem;padding:1.75rem}
  .marca-lienzo img{max-height:84px}
  .marca-lienzo.solo img{max-height:100px}
}
.modal-metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-top:1.1rem}
.modal-metrica{background:var(--green-light);border:1px solid #dcefd6;border-radius:12px;padding:1.15rem 1.25rem}
.modal-metrica b{display:block;font-family:var(--fd);font-size:1.75rem;font-weight:800;color:var(--green-darker);letter-spacing:-.02em;line-height:1.1}
.modal-metrica span{display:block;margin-top:.3rem;font-size:.78rem;color:var(--gray);font-weight:300;line-height:1.45}
.modal-stack{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.1rem}
.modal-stack span{font-size:.72rem;font-weight:600;letter-spacing:.04em;color:var(--black);background:var(--gray-light);border:1px solid var(--gray-mid);border-radius:100px;padding:.34rem .78rem}
/* El contenido entra escalonado al desplazarse dentro del modal */
html.js .modal-caso [data-mv]{opacity:0;transform:translateY(20px)}
html.js .modal-caso [data-mv].visible{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)}
html.js.reduced .modal-caso [data-mv]{opacity:1 !important;transform:none !important}

/* ── RESPONSIVE ──────────────────────────────────────────── */

/* El menú colapsa antes que el resto del layout: con tres enlaces más
   "Ingresar" y el conmutador de idioma, la barra se queda sin aire
   bastante antes de llegar a tamaño móvil. */
@media(max-width:860px){
  .nav-toggle{display:flex}
  /* El conmutador de idioma se queda fuera del panel, a la izquierda de la
     hamburguesa, y cambia los códigos por banderas para ocupar menos. */
  .nav-acciones{gap:.55rem}
  .nav-acciones .nav-ingresar{display:none}
  .lang-btn .flag{display:inline;font-size:1.05rem;line-height:1}
  .lang-btn .code{display:none}
  .lang-btn{padding:.3rem .6rem}

  /* El panel tapa la pantalla completa, también por detrás de la barra;
     logo y botón quedan encima gracias al z-index de más arriba. */
  /* justify-content:center recorta por arriba cuando el contenido no cabe. En
     móvil apaisado el primer enlace quedaba fuera y sin forma de alcanzarlo,
     así que se desplaza y el centrado solo se aplica si sobra sitio. */
  .nav-links{
    position:fixed;inset:0;z-index:1;
    flex-direction:column;justify-content:safe center;gap:1.75rem;
    padding:5.5rem 5% 2.5rem;overflow-y:auto;overscroll-behavior:contain;
    background:var(--ink);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .32s ease,transform .32s ease,visibility 0s linear .32s
  }
  nav.menu-open .nav-links{opacity:1;visibility:visible;transform:none;transition:opacity .32s ease,transform .32s ease,visibility 0s}

  .nav-links .nav-link{font-family:var(--fd);font-size:1.75rem;font-weight:600;color:#c9c9c9}
  .nav-links .nav-link::after{bottom:-8px}
  .nav-links .nav-link.active{color:var(--white)}

  /* El fondo del panel es oscuro siempre. Sin esto, al abrirlo tras hacer
     scroll las reglas de nav.scrolled dejarían texto negro sobre negro. */
  nav.scrolled .nav-links .nav-link{color:#c9c9c9}
  nav.scrolled .nav-links .nav-link:hover,
  nav.scrolled .nav-links .nav-link.active{color:var(--white)}
}

@media(max-width:600px){
  .nav-logo-full{display:none}
  .nav-logo-icon{display:block}
  section{padding:4.5rem 5%}
  .hero{padding:7.5rem 5% 6.5rem}
  .hero-ctas{flex-direction:column;width:100%;max-width:340px;margin-left:auto;margin-right:auto}
  .hero-ctas .btn{justify-content:center}
  .hero-badges{gap:.85rem;flex-direction:column;align-items:center}
}

/* Sin animaciones para quien las pide reducidas */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marq-track{animation:none}
  .hero-tag .dot{animation:none}
  *{transition-duration:.01ms !important}
}