/* ============================================================
   NAT MAC · natmac.css
   Transiciones entre páginas, revelado al hacer scroll y
   estados de los formularios. No cambia el diseño de las páginas.
   ============================================================ */

/* Transición entre páginas: el navegador conserva la página anterior en
   pantalla y hace un fundido corto hacia la nueva (Chrome 126+, Safari 18.2+).
   En otros navegadores simplemente navega, sin velo blanco. */
@view-transition{navigation:auto}
::view-transition-old(root){animation-duration:.16s}
::view-transition-new(root){animation-duration:.2s}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* Portada: el título, la línea y los subtítulos entran escalonados */
html.nm-js .nm-hero{opacity:0;transform:translateY(22px);animation:nmHero .75s cubic-bezier(.2,.65,.2,1) forwards;animation-delay:calc(.15s + var(--nm-i,0)*.12s)}
html.nm-js span.nm-hero{transform:scaleX(0);transform-origin:50% 50%;animation-name:nmRule}
@keyframes nmHero{to{opacity:1;transform:none}}
@keyframes nmRule{to{opacity:1;transform:none}}

/* Foto de portada: zoom lento de 8 s */
html.nm-js .hrx-box{isolation:isolate}
html.nm-js .hrx-box>.nm-bg{position:absolute;inset:0;z-index:-1;background:inherit;pointer-events:none;transform-origin:50% 50%;animation:nmZoom 8s ease-out both}
@keyframes nmZoom{from{transform:scale(1.08)}to{transform:none}}

/* Secciones: aparecen al hacer scroll */
html.nm-js .nm-rv{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.2,.65,.2,1),transform .75s cubic-bezier(.2,.65,.2,1)}
html.nm-js .nm-rv.in{opacity:1;transform:none}
html.nm-js .nm-rv.nm-keep,html.nm-js footer.nm-rv{opacity:1;transform:none;transition:none}

/* Tarjetas dentro de la sección: entran una tras otra */
html.nm-js .nm-rv .nm-st{opacity:0;transform:translateY(18px);transition:none}
html.nm-js .nm-rv.in .nm-st{opacity:1;transform:none;transition:opacity .6s cubic-bezier(.2,.65,.2,1),transform .6s cubic-bezier(.2,.65,.2,1);transition-delay:calc(.08s + var(--nm-i,0)*.07s)}

@media (prefers-reduced-motion: reduce){
  html.nm-js::before{animation:none;opacity:0}
  html.nm-js .nm-rv,html.nm-js .nm-rv .nm-st,html.nm-js .nm-hero,html.nm-js .hrx-box>.nm-bg{opacity:1;transform:none;transition:none;animation:none}
}

/* Botón flotante de WhatsApp oculto mientras el menú móvil está abierto */
html.nm-menu-open a[aria-label="WhatsApp"][style*="position:fixed"]{display:none!important}

/* Las dimensiones width/height agregadas solo reservan el espacio (evitan saltos); el tamaño lo sigue dando el CSS de cada página */
:where(img[data-nm-dim]){width:auto;height:auto}

/* Elementos de prototipo que no aplican en producción */
.hd-flags,.hd-flag[data-sim="Versión en inglés"],a.s-yt[href="#"]{display:none!important}

/* Confirmación de envío de formularios */
.nm-ok{background:#fff;border:1px solid #E3E8EE;border-top:4px solid #C9342D;border-radius:16px;padding:32px 28px;text-align:center;box-shadow:0 18px 40px -22px rgba(19,44,70,.35);margin:8px 0;font-family:"Inter",system-ui,sans-serif}
.nm-ok-ic{width:56px;height:56px;border-radius:50%;background:#C9342D;color:#fff;font:700 28px/56px "Barlow Semi Condensed","Inter",sans-serif;margin:0 auto 14px}
.nm-ok h3{margin:0 0 8px;font:700 24px/1.15 "Barlow Semi Condensed","Inter",sans-serif;color:#1A1A1A}
.nm-ok p{margin:0 0 18px;color:#4a4f56;font-size:15px;line-height:1.55}
.nm-ok-wa{display:inline-flex;align-items:center;gap:8px;background:#25D366;color:#fff!important;text-decoration:none;font-weight:700;padding:12px 22px;border-radius:999px}
.nm-ok-wa:hover{filter:brightness(1.05)}
input.err,textarea.err,select.err{border-color:#C9342D!important;box-shadow:0 0 0 3px rgba(201,52,45,.12)!important}

/* Video: portada ligera, el reproductor de Vimeo se carga al hacer clic */
.nm-vf{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;background:#0e1a29;overflow:hidden;border-radius:inherit;display:block}
.nm-vf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.78;transition:transform .8s ease,opacity .3s}
.nm-vf:hover img{transform:scale(1.04);opacity:.9}
.nm-vf::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,rgba(0,0,0,.05),rgba(11,26,44,.55))}
.nm-vf-play{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:#C9342D;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(201,52,45,.4);z-index:1;transition:transform .25s}
.nm-vf-play svg{width:26px;height:26px;margin-left:4px}
.nm-vf:hover .nm-vf-play{transform:scale(1.06)}
.nm-vf-lbl{position:absolute;left:50%;top:calc(50% + 44px);transform:translateX(-50%);color:#fff;font:600 14px/1 "Inter",system-ui,sans-serif;letter-spacing:.01em;white-space:nowrap;padding:7px 14px;border-radius:999px;background:rgba(11,26,44,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:1}
.nm-vf:focus-visible{outline:3px solid #fff;outline-offset:-3px}
@media (max-width:720px){.nm-vf-play{width:50px;height:50px;margin:-25px 0 0 -25px}.nm-vf-play svg{width:22px;height:22px}.nm-vf-lbl{top:calc(50% + 36px);font-size:13px;padding:6px 12px}}

/* Puntos del carrusel: área táctil de 24 px sin cambiar el aspecto */
html .svp2-caro-dots{gap:2px}
html .svp2-caro-dots button{width:24px;height:24px;background:transparent;border-radius:50%;position:relative;padding:0}
html .svp2-caro-dots button::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#c3ccd6;transition:.18s}
html .svp2-caro-dots button.on{width:40px;background:transparent}
html .svp2-caro-dots button.on::before{width:26px;margin-left:-13px;border-radius:5px;background:#C9342D}
html .svp2-caro-dots button:focus-visible{outline:2px solid #1B3C5E;outline-offset:2px}

/* presentaciones: las medidas largas pasan al siguiente renglón en vez de cortarse */
.ac2m-pcard .ptx b,.ac2m-pcard .ptx .m1,.ac2m-pcard .ptx .m2,.ac2f-pres .ac2m-pcard .ptx .m1,.ac2f-pres .ac2m-pcard .ptx .m2,body .ac2-panel .ac2f-pres .ac2m-pcard .ptx .m2{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
/* ===== BUSCADOR v3 · mismo lenguaje que el megamenú y el catálogo ===== */
.search-layer{background:#fff!important;border-top:3px solid var(--red)!important;box-shadow:0 26px 54px rgba(0,0,0,.18)!important}
.search-layer .in{max-width:var(--wrap);margin:0 auto;padding:20px 24px 22px}
#searchForm{height:58px!important;border:1.5px solid var(--line-2)!important;border-radius:14px!important;background:#fff!important;padding:0 8px 0 18px!important;box-shadow:none!important;transition:border-color .16s,box-shadow .16s}
#searchForm:focus-within{border-color:var(--red)!important;box-shadow:0 0 0 4px var(--red-t)!important}
#searchForm>svg{width:22px;height:22px;color:var(--red);flex:none}
#searchInput{font:500 16.5px var(--ff)!important;color:var(--ink)!important}
#searchInput::placeholder{color:var(--gray-2)}
.s-close{background:#fff!important;color:var(--ink)!important;border:1.5px solid var(--line-2)!important;border-radius:999px!important;font:700 13px var(--ff)!important;padding:8px 14px!important;transition:border-color .15s,color .15s,background .15s}
.s-close:hover{border-color:var(--red)!important;color:var(--red)!important;background:var(--red-t)!important}
.s-close kbd{font:600 11px var(--ff);background:var(--surface);border:1px solid var(--line-2);border-radius:6px;padding:1px 6px;color:var(--gray)}
.search-layer .s-hints{display:none!important}
.s-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px}
.s-h h5,.s-res h5{display:inline-block;margin:0!important;font:700 15.5px var(--ffh)!important;letter-spacing:.01em!important;color:var(--ink)!important;padding-bottom:6px;border-bottom:2px solid var(--red);text-transform:none!important;position:static}
.s-res h5::after{display:none}
.s-h h5 i,.s-res h5 i{font:700 12px var(--ff);font-style:normal;color:var(--gray-2);margin-left:6px}
.s-h a{font:600 13px var(--ff);color:var(--red);text-decoration:none;white-space:nowrap}
.s-h a:hover{text-decoration:underline}
.s-home{margin-top:18px}
.s-fams{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.s-fam{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;min-height:74px;padding:12px 14px;border:1.5px solid rgba(255,255,255,.16);border-radius:14px;background:#16304C;box-shadow:0 8px 20px rgba(0,0,0,.16);text-decoration:none;transition:transform .18s,box-shadow .18s}
.s-fam img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.s-fam::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,48,73,.85) 0%,rgba(27,60,94,.56) 45%,rgba(35,75,114,.14) 79%,rgba(35,75,114,0) 100%);z-index:1;pointer-events:none}
.s-fam .t{position:relative;z-index:2;flex:1;min-width:0;padding-bottom:11px;font:700 16px/1.1 var(--ffh);letter-spacing:-.01em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.s-fam .t::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:30px;border-radius:2px;background:#fff;transform:scaleX(0);transform-origin:left;transition:transform .24s ease}
.s-fam:hover .t::after{transform:scaleX(1)}
.s-fam .n{position:relative;z-index:2;flex:none;padding:3px 9px;font:800 12.5px var(--ff);color:var(--navy);background:#fff;border-radius:10px}
.s-fam:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.24)}
.s-fam:hover::after{background:linear-gradient(90deg,rgba(120,17,16,.94) 0%,rgba(201,52,45,.82) 55%,rgba(201,52,45,.44) 100%)}
.s-fam:hover .n{color:var(--red)}
.s-freq{margin-top:20px}
.s-chips{display:flex;flex-wrap:wrap;gap:8px}
.s-chip{background:#fff!important;border:1px solid var(--line-2)!important;color:var(--ink)!important;font:500 13px var(--ff)!important;padding:7px 14px!important;border-radius:999px!important;cursor:pointer;transition:border-color .15s,color .15s,background .15s,transform .15s!important}
.s-chip:hover{border-color:var(--red)!important;color:var(--red)!important;background:var(--red-t)!important;transform:translateY(-1px)}
.s-foot{margin-top:18px;display:flex;align-items:center;gap:16px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap}
.s-foot .l{font:500 13px var(--ff);color:var(--gray);flex:1;min-width:0}
.s-foot .l b{color:var(--ink);font-weight:700}
.s-foot .l a{font-weight:700;color:var(--red);text-decoration:none;white-space:nowrap}
.s-foot .l a:hover{text-decoration:underline}
.s-foot .b{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px;background:var(--red);color:#fff;font:700 13.5px var(--ff);text-decoration:none;box-shadow:0 8px 18px rgba(201,52,45,.22);transition:background .15s,transform .15s}
.s-foot .b:hover{background:var(--red-d);transform:translateY(-1px)}
.s-foot .b svg{width:15px;height:15px}
.s-res{margin-top:18px!important;max-height:min(64vh,640px)!important;border-top:0!important;padding:0 2px 4px!important;scrollbar-width:thin;overflow-y:auto}
.s-res .s-h{margin-top:18px}.s-res .s-h:first-child{margin-top:0}
.s-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.s-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 6px 18px rgba(22,44,73,.08);text-decoration:none;text-align:left;cursor:pointer;font-family:var(--ff);padding:0;width:100%;transition:transform .2s,box-shadow .2s,border-color .2s}
.s-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(22,44,73,.16);border-color:var(--line-2)}
.s-card .wph{position:relative;aspect-ratio:1/.78;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.s-card .wph img{width:80%;height:80%;object-fit:contain;mix-blend-mode:multiply;transition:transform .25s}
.s-card.ph .wph img{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
.s-card:hover .wph img{transform:scale(1.06)}
.s-card .wph .ic{width:52px;height:52px;border-radius:50%;background:var(--navy);color:#fff;font:800 22px var(--ffh);display:flex;align-items:center;justify-content:center}
.s-card .wlbl{display:block;padding:11px 14px 13px;border-top:1px solid var(--line);background:#fff}
.s-card .wlbl .nm{display:block;font:600 15.5px/1.2 var(--ffh);letter-spacing:.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-card .wlbl .sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:600 12px/1.3 var(--ff);color:var(--red);margin-top:3px;min-height:2.6em}
.s-card .wlbl .eq{display:block;font:500 11.5px/1.3 var(--ff);color:var(--gray-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-card .wlbl::after{content:'';display:block;width:24px;height:3px;border-radius:2px;background:var(--red);margin-top:8px;transform:scaleX(0);transform-origin:left;transition:transform .22s}
.s-card:hover .wlbl::after{transform:scaleX(1)}
.s-card .tg.ac2-tag{position:absolute!important;top:10px!important;left:10px!important;right:auto!important;z-index:2!important;display:inline-block!important;font:800 11px var(--ff)!important;letter-spacing:.01em!important;text-transform:none!important;color:#fff!important;background:var(--red)!important;border:0!important;border-radius:8px!important;padding:6px 12px!important;margin:0!important;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 6px 14px rgba(16,31,47,.18)}
.s-card .tg.ac2-tag::before{display:none!important;content:none!important}
.s-links{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.s-lnk{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:left;cursor:pointer;font-family:var(--ff);transition:border-color .15s,background .15s,transform .15s}
.s-lnk:hover{border-color:var(--red);background:var(--red-t);transform:translateY(-1px)}
.s-lnk .ic{flex:none;width:36px;height:36px;border-radius:10px;background:var(--navy-t);color:var(--navy);display:flex;align-items:center;justify-content:center}
.s-lnk .ic svg{width:18px;height:18px}
.s-lnk .tx{flex:1;min-width:0}
.s-lnk .nm{display:block;font:700 14.5px/1.2 var(--ffh);color:var(--ink)}
.s-lnk .ds{display:block;font:500 12px var(--ff);color:var(--gray);margin-top:2px}
.s-lnk .ar{flex:none;color:var(--red);font:700 16px var(--ff)}
.s-none{padding:26px 10px!important;text-align:center;color:var(--gray)!important;font:500 14px var(--ff)!important}
.s-none b{display:block;font:700 18px var(--ffh);color:var(--ink);margin-bottom:4px}
.s-none a{color:var(--red);font-weight:700;text-decoration:none}
.s-none a:hover{text-decoration:underline}
.s-res .s-foot{margin-top:16px}
@media (max-width:1080px){.s-fams,.s-grid{grid-template-columns:repeat(3,1fr)}.s-links{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.search-layer .in{padding:14px 12px 16px}#searchForm{height:50px!important;padding:0 6px 0 14px!important}#searchInput{font-size:15px!important}.s-close .txt{display:none}.s-close{padding:7px 10px!important}.s-fams,.s-grid{grid-template-columns:repeat(2,1fr);gap:10px}.s-fam{min-height:64px;padding:10px 12px}.s-fam .t{font-size:15px}.s-links{grid-template-columns:1fr}.s-res{max-height:min(58vh,520px)!important}.s-card .wlbl{padding:9px 11px 11px}.s-card .wlbl .nm{font-size:14.5px}.s-foot .b{width:100%;justify-content:center}}

/* ===== Botón "Ver página completa" en las fichas (contorno rojo) ===== */
.ac2m-acts a.nm-full,a.btn.nm-full{background:#fff!important;color:var(--red)!important;border:1.5px solid var(--red)!important;box-shadow:none!important;font-weight:700!important;transition:background .15s,color .15s,transform .15s!important}
.ac2m-acts a.nm-full:hover,a.btn.nm-full:hover{background:var(--red)!important;color:#fff!important;transform:translateY(-1px)}
/* ===== MEGAMENÚ · tarjetas de familia originales; solo sombra al texto para que se lea ===== */
#megaProd .mg-tab .t{font-weight:800!important;text-shadow:0 1px 2px rgba(0,0,0,.75),0 0 10px rgba(0,0,0,.5)!important}
/* Nosotros: video sin borde claro alrededor */
.ns-video-wrap .vid-embed{border:0!important}
/* Encabezado: evita el temblor al compactarse (el navegador re-ajustaba el scroll al cambiar la altura) */
html,body{overflow-anchor:none}