@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/barlow-500.woff2) format('woff2')}@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/barlow-600.woff2) format('woff2')}@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/barlow-700.woff2) format('woff2')}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400.woff2) format('woff2')}@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500.woff2) format('woff2')}
/* EvoRog — acero sobre negro.
 *
 * El material está fotografiado sobre pizarra oscura y sobre azul de quirófano,
 * y esas fotos mandan: una web clara las apagaría. Fondo casi negro, un azul
 * frío de acero para lo que hay que mirar, y mucho aire. Nada de adornos que
 * compitan con el producto, que es lo único que aquí tiene que brillar.
 */

:root{
  --negro:#07090c;
  --negro-2:#0c1015;
  --panel:#11161d;
  --panel-alto:#161d26;
  --linea:rgba(150,190,230,.13);
  --linea-viva:rgba(150,190,230,.28);

  --tinta:#eef3f8;
  --suave:#b6c3d1;
  --tenue:#7f8b99;

  --acero:#5b9fd8;          /* el azul de las fotos de producto */
  --acero-claro:#8fc4f0;
  --acero-hondo:#22497a;
  --brillo:rgba(91,159,216,.35);

  --ok:#4ec08a;
  --aviso:#e8a33d;

  --titular:"Barlow Condensed","Oswald","Helvetica Neue",Arial,sans-serif;
  --texto:"Inter","Helvetica Neue",Arial,sans-serif;
  --r:3px;
  --ancho:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--negro);color:var(--suave);
  font:400 16.5px/1.75 var(--texto);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--titular);color:var(--tinta);font-weight:600;
  line-height:1.03;letter-spacing:-.01em;margin:0}
p{margin:0 0 1.1em}
.contenedor{width:min(var(--ancho),calc(100% - 48px));margin-inline:auto}

/* ---------- cabecera ---------- */
.barra{position:fixed;inset:0 0 auto;z-index:60;
  background:linear-gradient(180deg,rgba(7,9,12,.94),rgba(7,9,12,.74) 70%,transparent);
  backdrop-filter:blur(10px);transition:background .3s,box-shadow .3s}
.barra.pegada{background:rgba(7,9,12,.97);box-shadow:0 1px 0 var(--linea)}
.barra .contenedor{display:flex;align-items:center;gap:30px;height:74px}
.marca{font-family:var(--titular);font-size:27px;font-weight:700;letter-spacing:.14em;
  color:var(--tinta);text-transform:uppercase}
.marca span{color:var(--acero)}
.menu{display:flex;gap:28px;margin-left:auto;align-items:center}
.menu a{font-size:12.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--suave);
  padding:7px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.menu a:hover,.menu a.actual{color:var(--tinta);border-bottom-color:var(--acero)}
.idiomas{display:flex;gap:9px;align-items:center;font-size:12px;letter-spacing:.1em}
.idiomas a{color:var(--tenue)}
.idiomas a.actual{color:var(--acero)}
.abrir-menu{display:none;background:none;border:0;color:var(--tinta);font-size:25px;
  cursor:pointer;line-height:1;padding:6px}

/* ---------- portada ---------- */
.portada{position:relative;min-height:min(94vh,860px);display:flex;align-items:center;
  padding:150px 0 110px;overflow:hidden}
.portada .fondo{position:absolute;inset:0;z-index:0}
.portada .fondo img{width:100%;height:100%;object-fit:cover;object-position:72% 50%;
  opacity:.88;filter:saturate(.92) contrast(1.08)}
/* El degradado tapa solo el lado del texto. Antes cubría toda la foto al 50 %
   de opacidad y el producto no se veía: una portada a oscuras no es elegante,
   es una portada a oscuras. */
.portada .fondo::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,var(--negro) 20%,rgba(7,9,12,.86) 40%,rgba(7,9,12,.28) 66%,transparent 92%),
    linear-gradient(0deg,var(--negro) 2%,transparent 30%)}
.portada .contenedor{position:relative;z-index:1}
.sobretitulo{font-family:var(--titular);font-size:13px;letter-spacing:.42em;
  text-transform:uppercase;color:var(--acero);margin:0 0 22px;display:flex;
  align-items:center;gap:15px}
.sobretitulo::before{content:"";width:46px;height:1px;background:var(--acero);opacity:.8}
.portada h1{font-size:clamp(46px,7.4vw,98px);letter-spacing:-.022em;max-width:15ch;
  text-wrap:balance}
.portada h1 em{font-style:normal;color:var(--acero-claro)}
.portada .entrada{margin:30px 0 40px;max-width:52ch;font-size:19px;color:var(--suave)}
.botonera{display:flex;gap:14px;flex-wrap:wrap}

.boton{display:inline-flex;align-items:center;gap:11px;padding:15px 30px;
  font-family:var(--titular);font-size:14.5px;letter-spacing:.17em;text-transform:uppercase;
  border:1px solid var(--acero);color:var(--negro);background:var(--acero);
  border-radius:var(--r);cursor:pointer;transition:background .2s,box-shadow .2s,transform .12s}
.boton:hover{background:var(--acero-claro);border-color:var(--acero-claro);
  box-shadow:0 0 30px var(--brillo)}
.boton:active{transform:translateY(1px)}
.boton.hueco{background:transparent;color:var(--tinta);border-color:var(--linea-viva)}
.boton.hueco:hover{border-color:var(--acero);color:var(--acero-claro);box-shadow:none;
  background:rgba(91,159,216,.07)}

/* ---------- secciones ---------- */
.seccion{padding:clamp(72px,9vw,128px) 0}
.seccion.alterna{background:var(--negro-2)}
.rotulo{font-family:var(--titular);font-size:12.5px;letter-spacing:.38em;
  text-transform:uppercase;color:var(--acero);margin:0 0 16px}
.seccion h2{font-size:clamp(32px,4.3vw,54px);max-width:18ch;margin-bottom:26px;text-wrap:balance}
.entradilla{max-width:60ch;font-size:18px}

/* tres razones */
.razones{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  margin-top:8px}
.razon{border:1px solid var(--linea);border-radius:var(--r);padding:32px 28px;
  background:linear-gradient(170deg,var(--panel) 0%,rgba(17,22,29,.35) 100%);
  transition:border-color .25s,transform .25s}
.razon:hover{border-color:var(--linea-viva);transform:translateY(-3px)}
.razon .num{font-family:var(--titular);font-size:13px;letter-spacing:.3em;color:var(--acero);
  display:block;margin-bottom:16px}
.razon h3{font-size:23px;margin-bottom:11px}
.razon p{margin:0;font-size:15.5px;color:var(--tenue)}

/* bloque de foto + texto */
.bloque{display:grid;gap:clamp(36px,5vw,76px);align-items:center;
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.bloque + .bloque{margin-top:clamp(70px,8vw,120px)}
.bloque.invertido .media{order:2}
.bloque .media{position:relative;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--linea-viva);box-shadow:0 22px 60px rgba(0,0,0,.55)}
/* Un velo finísimo por dentro: las fotos de producto están tiradas sobre fondo
   claro y sin esto quedaban como recortes pegados encima del negro. */
.bloque .media::after,.producto .foto::after{content:"";position:absolute;inset:0;
  pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),
  inset 0 -70px 90px -60px rgba(7,9,12,.85)}
.bloque .media img{width:100%;aspect-ratio:3/2;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.bloque .media:hover img{transform:scale(1.04)}
.bloque ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:11px}
.bloque li{padding-left:26px;position:relative;font-size:16px}
.bloque li::before{content:"";position:absolute;left:0;top:11px;width:13px;height:1px;
  background:var(--acero)}

/* destacado del machacador */
.destacado{position:relative;background:#04060a;overflow:hidden}
.destacado .contenedor{position:relative;z-index:1}
.destacado .rejilla{display:grid;gap:22px;grid-template-columns:1.25fr 1fr 1fr;margin-top:46px}
.destacado figure{margin:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--linea)}
.destacado figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.destacado figure:first-child img{aspect-ratio:auto;min-height:100%}

/* ---------- tienda ---------- */
.rejilla-productos{display:grid;gap:26px;
  grid-template-columns:repeat(auto-fill,minmax(272px,1fr));margin-top:52px}
.producto{display:flex;flex-direction:column;border:1px solid var(--linea);
  border-radius:var(--r);overflow:hidden;background:var(--panel);
  transition:border-color .25s,transform .25s,box-shadow .25s}
.producto:hover{border-color:var(--linea-viva);transform:translateY(-4px);
  box-shadow:0 18px 44px rgba(0,0,0,.5)}
.producto .foto{position:relative;background:#0a0e13;overflow:hidden;display:block}
.producto .foto img{width:100%;aspect-ratio:4/3;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.producto:hover .foto img{transform:scale(1.05)}
.producto .cuerpo{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;gap:9px}
.producto h3{font-size:21px;line-height:1.16}
.producto .precio{font-family:var(--titular);font-size:27px;color:var(--tinta);
  margin-top:auto;padding-top:12px}
.producto .precio small{font-family:var(--texto);font-size:12px;color:var(--tenue);
  margin-left:7px;letter-spacing:.02em}
.etiqueta{position:absolute;top:13px;left:13px;padding:5px 11px;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;border-radius:var(--r);
  background:rgba(7,9,12,.84);border:1px solid var(--linea-viva);color:var(--suave)}
.etiqueta.no{color:var(--aviso);border-color:rgba(232,163,61,.45)}

/* ---------- ficha ---------- */
.ficha{display:grid;gap:clamp(34px,5vw,70px);grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  align-items:start;padding-top:128px}
.ficha .galeria{display:grid;gap:13px}
.ficha .galeria .grande{border:1px solid var(--linea);border-radius:var(--r);overflow:hidden}
.ficha .galeria .grande img{width:100%;aspect-ratio:4/3;object-fit:cover}
.ficha h1{font-size:clamp(30px,4vw,46px);margin-bottom:14px;text-wrap:balance}
.ficha .precio-grande{font-family:var(--titular);font-size:42px;color:var(--tinta);margin:6px 0 4px}
.ficha .precio-grande small{font-family:var(--texto);font-size:13.5px;color:var(--tenue);
  margin-left:10px}
.ficha .neto{font-size:13.5px;color:var(--tenue);margin:0 0 24px}
.ficha .descripcion{font-size:17px;color:var(--suave);margin:22px 0}
.ficha .datos{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:7px;font-size:14.5px}
.ficha .datos span{color:var(--tenue);display:inline-block;min-width:112px}

/* formulario de compra */
.comprar{border:1px solid var(--linea);border-radius:var(--r);padding:24px;
  background:var(--panel);display:grid;gap:13px;max-width:440px}
.comprar label{display:block;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tenue);margin-bottom:7px}
.comprar input[type=text],.comprar input[type=email]{width:100%;padding:13px 15px;
  background:#070a0e;border:1px solid var(--linea);border-radius:var(--r);
  color:var(--tinta);font:inherit;font-size:15.5px;transition:border-color .2s}
.comprar input:focus{outline:none;border-color:var(--acero);
  box-shadow:0 0 0 3px rgba(91,159,216,.14)}
.comprar .boton{width:100%;justify-content:center}
.comprar .nota{font-size:12.5px;color:var(--tenue);line-height:1.6;margin:0}
.trampa{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.agotado{border:1px dashed var(--linea-viva);border-radius:var(--r);padding:22px;
  color:var(--aviso);font-size:15px}

/* ---------- casos ---------- */
.casos{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  margin-top:50px}
.caso{border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;background:var(--panel);
  transition:border-color .25s,transform .25s}
.caso:hover{border-color:var(--linea-viva);transform:translateY(-3px)}
.caso img{width:100%;aspect-ratio:16/9;object-fit:cover}
.caso .cuerpo{padding:24px}
.caso h3{font-size:22px;margin-bottom:11px}
.caso p{margin:0;font-size:15px;color:var(--tenue)}

/* ---------- contacto y pie ---------- */
.contacto{text-align:center}
.contacto h2{margin-inline:auto}
.correo-grande{font-family:var(--titular);font-size:clamp(28px,4.6vw,52px);color:var(--acero);
  letter-spacing:-.01em;display:inline-block;margin-top:14px;
  border-bottom:1px solid transparent;transition:border-color .2s}
.correo-grande:hover{border-bottom-color:var(--acero)}

.pie{border-top:1px solid var(--linea);padding:46px 0 38px;background:var(--negro-2)}
.pie .contenedor{display:flex;flex-wrap:wrap;gap:18px 36px;align-items:center;
  justify-content:space-between;font-size:13px;color:var(--tenue)}
.pie a{color:var(--tenue)}
.pie a:hover{color:var(--acero)}
.pie nav{display:flex;gap:20px;flex-wrap:wrap}

/* ---------- apariciones ----------
   Ojo al `.js`: solo se esconde si hay JavaScript que vaya a volver a
   enseñarlo. Sin esa condición, un guion que no carga —o que falla— deja la
   web entera en blanco, con el contenido ahí pero invisible. Es el fallo más
   tonto y más caro de todos. */
@media(prefers-reduced-motion:no-preference){
  html.js .aparece{opacity:0;transform:translateY(22px);
    transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1)}
  html.js .aparece.visible{opacity:1;transform:none}
}

/* ---------- pantallas pequeñas ---------- */
@media(max-width:900px){
  .destacado .rejilla{grid-template-columns:1fr 1fr}
  .bloque.invertido .media{order:0}
}
@media(max-width:760px){
  .contenedor{width:calc(100% - 34px)}
  .abrir-menu{display:block;margin-left:auto}
  .menu{position:fixed;inset:74px 0 auto;flex-direction:column;align-items:flex-start;
    gap:0;background:rgba(7,9,12,.985);border-bottom:1px solid var(--linea);
    padding:10px 24px 22px;margin:0;display:none}
  .menu.abierto{display:flex}
  .menu a{width:100%;padding:15px 0;border-bottom:1px solid var(--linea)}
  .idiomas{margin-top:14px}
  .portada{min-height:auto;padding:120px 0 84px}
  .portada h1{font-size:clamp(38px,10vw,58px)}
  .destacado .rejilla{grid-template-columns:1fr}
  .ficha{padding-top:104px}
  .pie .contenedor{flex-direction:column;align-items:flex-start}
}

/* ---------- los textos legales ---------------------------------------------
   Esta tienda no tenía ninguno: ni aviso legal, ni política de privacidad, ni
   información sobre el derecho de desistimiento, vendiendo. Se añadieron el
   11-10-2026 con el texto compartido de comun/textos_legales.py. */
.contenedor.estrecho{max-width:780px}
.legal-texto{font-size:1.02rem;line-height:1.7;margin-top:clamp(26px,3vw,40px)}
.legal-texto h2{font-size:clamp(1.2rem,2vw,1.5rem);margin:1.9em 0 .55em;line-height:1.25}
.legal-texto h2:first-child{margin-top:0}
.legal-texto p{margin:0 0 1.05em;max-width:72ch}
.legal-texto ul{margin:0 0 1.2em;padding-left:0;list-style:none;max-width:72ch}
.legal-texto li{position:relative;padding-left:24px;margin-bottom:.5em}
.legal-texto li::before{content:"";position:absolute;left:3px;top:.82em;width:9px;height:2px;
  background:currentColor;opacity:.5}
.pie nav.legal{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:10px;font-size:.86rem;
  opacity:.75}

/* ---------- aviso de cookies -----------------------------------------------
   Lo dibuja sitio.js; aquí solo está su aspecto. Usa las variables de color de
   cada web, con un respaldo por si alguna no las tiene: así se ve de la casa
   en las veinticinco y no hay que escribir veinticinco hojas. */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:120;
  padding:clamp(14px,2vw,20px) clamp(16px,5vw,46px);
  background:var(--noche,#15181c);color:var(--cookies-letra,#e8eaed);
  box-shadow:0 -12px 40px -22px rgba(0,0,0,.7);
  font-size:14.5px;line-height:1.5;
  display:flex;gap:clamp(12px,2vw,28px);align-items:center;flex-wrap:wrap;
  justify-content:center;
  transform:translateY(100%);transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.cookies.dentro{transform:none}
@media(prefers-reduced-motion:reduce){.cookies{transition:none}}
.cookies p{margin:0;max-width:62ch;flex:1 1 320px}
.cookies a{color:var(--cookies-enlace,#cfd6de);text-underline-offset:3px}
.cookies-botones{display:flex;gap:10px;flex:0 0 auto;flex-wrap:wrap}
.cookies button{font:inherit;font-size:14px;font-weight:650;cursor:pointer;
  padding:10px 20px;border-radius:3px;border:1px solid transparent;
  transition:background .2s,border-color .2s,color .2s}
.cookies .si{background:var(--cookies-boton,#f2f4f6);color:var(--noche,#15181c)}
.cookies .si:hover{background:#fff}
.cookies .no{background:none;border-color:rgba(255,255,255,.35);
  color:var(--cookies-letra,#e8eaed)}
.cookies .no:hover{border-color:rgba(255,255,255,.7)}
@media(max-width:620px){.cookies{font-size:14px}.cookies-botones{width:100%}
  .cookies button{flex:1}}