/* Tipografías alojadas en nuestro servidor (Fontsource 5.3.0, licencia OFL). Generado por bajar-fuentes.mjs */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600 700;font-display:swap;src:url(/assets/fuentes/montserrat-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fuentes/dm-sans-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Libre Caslon Text";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fuentes/libre-caslon-text-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Heebo";font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fuentes/heebo-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Heebo";font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fuentes/heebo-hebrew-wght-normal.woff2) format("woff2");unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fuentes/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fuentes/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fuentes/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fuentes/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fuentes/ibm-plex-sans-arabic-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fuentes/ibm-plex-sans-arabic-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fuentes/ibm-plex-sans-arabic-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}


:root{--sea:#0C161E;--panel:#13212B;--paper:#E8E6E0;--soft:#C9CED2;--muted:#95A1AB;--blue:#7C98CF;--maxw:1180px;
  --head:Montserrat,"Helvetica Neue",Arial,sans-serif;--text:"DM Sans",Arial,sans-serif}
*{box-sizing:border-box}
html{background:var(--sea);color:var(--paper);-webkit-text-size-adjust:100%}
html.lock{overflow:hidden}
body{margin:0;font-family:var(--text);font-size:17px;line-height:1.6;background:var(--sea);overflow-x:hidden}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.wrap{position:relative;z-index:2;max-width:1080px;margin:0 auto;padding:0 24px}
@media (max-width:899px){.wrap{padding:0 20px}}
.head{text-align:center;max-width:760px;margin:0 auto 52px}
.head h2{margin-left:auto;margin-right:auto}
.head .lead{margin:0 auto}

/* Lienzo de la presentación del logo (se muestra solo al cargar) */
#intro{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60;display:none}
/* Título solo para buscadores y lectores de pantalla (no se ve) */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Encabezado */
header.top{position:fixed;top:0;left:0;right:0;z-index:40;transition:background .4s}
.scrolled header.top{background:rgba(12,22,30,.96)}
header.top .in{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:76px;display:flex;align-items:center;justify-content:space-between}
#hdrLogo{display:block;line-height:0}
.js #hdrLogo{opacity:0}
.logoIn #hdrLogo{opacity:1}
#hdrImg:not([src]){display:none}   /* sin JavaScript no hay dibujo del logo: no mostrar la imagen rota */
#hdrLogo{text-decoration:none}
#hdrLogo b{display:block;font:700 18px/1.2 var(--head);letter-spacing:.06em;color:var(--paper)}   /* nombre en texto, solo si no hay JavaScript */
header nav{display:flex;gap:28px;transition:opacity .8s .6s}
.js header nav{opacity:0}
.ready header nav{opacity:1}
header nav a{text-decoration:none;font:600 14px var(--head);color:var(--soft)}
header nav a:hover{color:var(--paper)}
@media (max-width:599px){header nav{gap:14px}header nav a{font-size:14px}header nav .opt{display:none}}

/* Portada */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:120px 0 26vh}
.hero-bg{position:absolute;inset:0;z-index:0;transition:opacity 1.8s ease;
  background:
    radial-gradient(110% 70% at 84% 6%,rgba(140,166,200,.20),transparent 62%),
    radial-gradient(80% 60% at 6% 96%,rgba(46,78,98,.30),transparent 70%),
    linear-gradient(180deg,#132330 0%,#0F1C26 55%,var(--sea) 100%)}
.js .hero-bg{opacity:0}
.ready .hero-bg{opacity:1}
.hero h1{font:700 clamp(42px,6.3vw,92px)/.98 var(--head);text-transform:uppercase;letter-spacing:-.015em;margin:0;max-width:12ch}
.hero .sub{max-width:46ch;margin:30px 0 0;color:var(--soft);font-size:clamp(17px,1.35vw,20px)}
.actions{margin-top:36px;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 22px;background:var(--paper);color:var(--sea);text-decoration:none;font:700 16px var(--head);border-radius:2px}
.lnk{font:600 16px var(--head);text-underline-offset:5px;text-decoration-thickness:1px}
.js .rise{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.ready .rise{opacity:1;transform:none}
.ready .d1{transition-delay:.5s}.ready .d2{transition-delay:.75s}

/* Secciones */
section.blk{padding:clamp(80px,12vh,130px) 0}
h2{font:700 clamp(28px,3.2vw,44px)/1.06 var(--head);text-transform:uppercase;letter-spacing:.005em;margin:0 0 18px;max-width:24ch}
.lead{color:var(--soft);max-width:54ch;margin:0 0 40px}

/* Productos: dos tarjetas gemelas (misma foto, mismo alto, el enlace siempre abajo) */
.prods{display:grid;grid-template-columns:repeat(2,minmax(0,320px));justify-content:center;gap:clamp(40px,7vw,96px);margin:0 auto}
@media (max-width:760px){.prods{grid-template-columns:minmax(0,400px)}}
.prod{display:flex;flex-direction:column;background:#1D2F3B;text-decoration:none;border:1px solid rgba(232,230,224,.12);transition:border-color .3s}   /* tarjeta un tono más clara que el fondo, para que se despegue */
.prod:hover{border-color:rgba(232,230,224,.28)}
.prod .ph{overflow:hidden;aspect-ratio:4/3;background:#1B2B37}
.prod img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.9) saturate(.85) contrast(1.04);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.prod:hover img{transform:scale(1.04)}
.prod .tx{display:flex;flex-direction:column;flex:1;padding:24px 26px 26px;text-align:center}
.prod h3{font:700 21px/1.15 var(--head);text-transform:uppercase;letter-spacing:.02em;margin:0 0 10px}
.prod p{margin:0;color:var(--soft);font-size:16px}
.prod .go{margin-top:auto;padding-top:20px;font:600 15px var(--head);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media (prefers-reduced-motion:reduce){.prod img{transition:none}.prod:hover img{transform:none}}

/* Frases del comercio: más compactas, foto chica, de un lado y del otro */
.story{padding-top:clamp(40px,6vh,70px)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;max-width:1000px;margin:0 auto clamp(70px,12vh,120px)}
.pair:last-child{margin-bottom:0}
.pair .words{justify-self:end;text-align:end}
.pair.R .words{justify-self:start;text-align:start}
.pair .film{width:100%;max-width:400px;justify-self:end}
.pair.R .film{order:-1}
.pair .words .note{margin-inline-start:auto}
.pair.R .words .note{margin-inline-start:0}
.film{position:relative;overflow:hidden;background:#16242F;aspect-ratio:4/3}
.film img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.88) saturate(.85)}
.js .film{clip-path:inset(12% 8% 12% 8%);transition:clip-path 1.2s cubic-bezier(.65,0,.35,1)}
.js .film img{transform:scale(1.12);transition:transform 1.8s cubic-bezier(.16,1,.3,1)}
.js .pair.in .film{clip-path:inset(0 0 0 0)}
/* foto que se muestra entera, tal como la recortó Fernando (sin recorte extra) */
.film.natural{aspect-ratio:auto}.film.natural img{height:auto}
.js .pair.in .film img{transform:none}
.words{margin:0;font:700 clamp(30px,3.1vw,50px)/1.03 var(--head);letter-spacing:-.02em}
.words .ln{display:block;overflow:hidden;padding-bottom:.08em}
.words .ln>span{display:block}
.js .words .ln>span{transform:translateY(105%);transition:transform 1s cubic-bezier(.16,1,.3,1);transition-delay:calc(.2s + var(--i,0) * .09s)}
.js .pair.in .words .ln>span{transform:none}
.words .note{display:block;color:var(--soft);font:400 clamp(16px,1.2vw,18px)/1.45 var(--text);letter-spacing:0;margin-top:16px;max-width:34ch}
.js .words .note{opacity:0;transition:opacity .8s .7s}
.js .pair.in .words .note{opacity:1}
@media (max-width:760px){.pair,.pair.R{grid-template-columns:1fr;gap:18px;margin-bottom:72px}.pair .film,.pair.R .film{order:-1;max-width:420px;justify-self:start}.pair .words{justify-self:start;text-align:start}.pair .words .note{margin-inline-start:0}}

/* Quiénes somos (texto de la web original) */
.orig{max-width:720px;margin:0 auto}
.orig p{margin:0 0 18px;color:var(--soft)}
.orig p.first{font:600 clamp(21px,1.9vw,27px)/1.35 var(--head);color:var(--paper);margin-bottom:26px}
.about{display:grid;grid-template-columns:minmax(160px,220px) 1fr;gap:30px 40px;max-width:720px;margin:64px auto 0}
.about dt{font:700 18px/1.25 var(--head);text-transform:uppercase}
.about dd{margin:0;max-width:58ch;color:var(--soft)}
@media (max-width:700px){.about{grid-template-columns:1fr;gap:8px}.about dd{margin-bottom:26px}}

/* Contacto: foto chica + ficha con los datos, todo centrado */
.ceo{display:grid;grid-template-columns:clamp(120px,12vw,150px) minmax(0,400px);justify-content:center;align-items:center;gap:clamp(24px,3vw,40px);background:var(--panel);max-width:680px;margin:0 auto;padding:clamp(20px,2.5vw,28px)}
.ceo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:#1B2B37}
.ceo .who{margin:0 0 18px;font:700 24px/1.15 var(--head)}
.ceo .who span{display:block;margin-top:6px;font:400 15px var(--text);color:var(--muted)}
.ceo .who .langs{margin-top:4px;font-size:15px}
.ceo .lines{margin:0 0 22px;display:grid;gap:12px}
.ceo .lines div{display:grid;gap:12px;align-items:baseline;padding-top:12px;border-top:1px solid rgba(232,230,224,.12)}
.ceo dt{font-size:14px;color:var(--muted)}
.ceo dd{margin:0;font:600 17px var(--head);overflow-wrap:anywhere}
.ceo dd a{text-decoration:none}.ceo dd a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:640px){.ceo{grid-template-columns:1fr;justify-items:center;text-align:start}.ceo img{max-width:140px}.ceo .card{width:100%}}


/* ---------- PIE DE PÁGINA: una franja simple (empresa y dirección | nuestras webs) y debajo el © ---------- */
footer{border-top:1px solid rgba(232,230,224,.10);color:var(--muted);font-size:15px}
footer .row{display:flex;justify-content:space-between;align-items:center;gap:16px 40px;flex-wrap:wrap;padding-block:28px 18px}
footer .co strong{display:block;color:var(--soft);font:600 15px var(--head)}
footer .co .what{margin:6px 0 0;max-width:60ch}
footer nav{display:flex;gap:24px;flex-wrap:wrap}
footer a{color:var(--soft);text-decoration:none}
footer a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:4px}
footer .base{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:0 24px;font-size:14px}

/* Zona de toque de 44 px como mínimo para enlaces chicos (celular), sin cambiar cómo se ven: el área tocable se agranda con un ::after invisible */
#hdrLogo,header nav a,.lnk,footer a,.ceo dd a{position:relative}
#hdrLogo::after,header nav a::after,.lnk::after,footer a::after,.ceo dd a::after{content:"";position:absolute;inset:-14px -6px}
.ceo dd a::after{inset:-12px -6px}   /* filas de la ficha más juntas: que no se pisen email y teléfono */
@media (max-width:1023px),(pointer:coarse){#lang{min-height:44px}}


@media (prefers-reduced-motion:reduce){
  .rise{transition:none}
  .film{clip-path:none!important;transition:none}.film img{transform:none!important;transition:none}
  .words .ln>span{transform:none!important;transition:none}.words .note{opacity:1!important;transition:none}
}
/* ---------- IDIOMAS: selector, derecha a izquierda (hebreo y árabe) y tipografías por idioma ---------- */
header .right{display:flex;align-items:center;gap:22px}
#lang{background:transparent;color:var(--soft);border:1px solid rgba(232,230,224,.25);border-radius:2px;padding:5px 8px;font:600 13px var(--head);cursor:pointer}
#lang option{background:var(--panel);color:var(--paper)}
html:lang(he){--head:Heebo,Arial,sans-serif;--text:Heebo,Arial,sans-serif}
html:lang(ar){--head:"IBM Plex Sans Arabic",Tahoma,sans-serif;--text:"IBM Plex Sans Arabic",Tahoma,sans-serif}
html:lang(ar) body{line-height:1.8}
html:lang(ar) *{letter-spacing:0!important}                 /* en árabe el espaciado rompe la unión de las letras */
html:lang(ar) .hero h1,html:lang(he) .hero h1{line-height:1.2}
html:lang(de) :is(h1,h2,h3,.words){-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}   /* alemán: palabras largas (ROHSTOFFEXPORTEUR) se cortan con guion en el celular */
html:lang(ar) .words .ln,html:lang(he) .words .ln{padding-bottom:.22em}
#hdrLogo{direction:ltr}
/* hebreo y árabe: la barra de desplazamiento queda a la DERECHA (como en apple.com/ae-ar).
   <html> lleva dir="rtl" (lo correcto para Google y lectores de pantalla), pero su sentido en CSS se fuerza a ltr: el lado de la
   barra lo decide html (body solo hereda). El sentido de derecha a izquierda lo llevan el encabezado, el contenido y el pie
   (dir que pone el script). No usar el selector :dir() sobre html ni body.
   OJO: todo elemento nuevo fuera de header, main y footer (aviso de cookies, menú, ventana) debe llevar su propio dir.
   En la web final (páginas /he/ y /ar/ fijas) el dir="rtl" de header, main y footer va escrito en el HTML, no puesto por JavaScript. */
html{direction:ltr}
html.rtl .ceo dd,html.rtl footer .co{unicode-bidi:plaintext;text-align:right}   /* mail, teléfono y dirección se leen bien dentro del texto de derecha a izquierda */
.ceo .lines div{grid-template-columns:minmax(64px,max-content) minmax(0,1fr)}   /* la etiqueta (Email, Teléfono) toma el ancho que necesite en cada idioma */
@media (max-width:440px){.ceo .lines div{grid-template-columns:minmax(0,1fr);gap:2px}}   /* celular chico: la etiqueta (Email) arriba y el dato abajo, para que el mail no se corte */
@media (max-width:599px){header .right{gap:12px}#lang{padding:4px 6px;font-size:12px}header.top .in{padding:0 16px}header nav a{white-space:nowrap}}   /* celular sin JavaScript: menú corto (Productos y Contacto) */
/* Celular: el menú completo va en un botón desplegable (tres rayitas) al lado del selector de idioma.
   Sin JavaScript el botón no aparece y queda el menú corto de arriba. */
.menuBtn{display:none}
@media (max-width:599px){
  .js .menuBtn{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 11px;background:transparent;border:1px solid rgba(232,230,224,.25);border-radius:2px;cursor:pointer;order:2}
  .menuBtn span{display:block;height:2px;background:var(--paper);transition:transform .2s cubic-bezier(.2,.7,.2,1),opacity .15s}
  .open .menuBtn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .open .menuBtn span:nth-child(2){opacity:0}
  .open .menuBtn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .js #lang{order:1}
  .js header nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:4px 16px 12px;background:var(--sea);border-bottom:1px solid rgba(232,230,224,.12);
    visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility 0s .18s}
  .js header.open nav{visibility:visible;opacity:1;transform:none;transition:opacity .18s ease,transform .18s ease}
  .js header nav a,.js header nav .opt{display:block;font-size:17px;padding:12px 0;border-top:1px solid rgba(232,230,224,.08)}
  .js header nav a:first-child{border-top:0}
  .js header nav a::after{inset:0}
  header.top.open{background:var(--sea)}
}
@media (prefers-reduced-motion:reduce){.menuBtn span,.js header nav,.js header.open nav{transition:none}}
/* ---------- Agregados de la web final ---------- */
.i0{--i:0}.i1{--i:1}   /* antes style="--i:N" en línea (la política de seguridad no permite estilos en línea) */
footer .langs{display:flex;gap:6px 22px;flex-wrap:wrap}
footer .langs a[aria-current]{color:var(--paper)}
.nf{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:12px}   /* página 404 */
.nf h1{font:700 clamp(32px,5vw,56px)/1.05 var(--head);text-transform:uppercase;margin:0}
.nf p{margin:0}