/* Tipografías autohospedadas: el sitio no depende de Google Fonts. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('fuentes/archivo-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('fuentes/archivo-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url('fuentes/archivo-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url('fuentes/archivo-latin-900-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fuentes/ibm-plex-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fuentes/ibm-plex-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fuentes/ibm-plex-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fuentes/ibm-plex-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fuentes/ibm-plex-mono-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fuentes/ibm-plex-mono-latin-600-normal.woff2') format('woff2')}

/* ============================================================
   COMERCIALIZADORA EL TERMINAL
   Sistema de diseño — plano técnico sobre azul profundo
   ============================================================ */

:root{
  /* Color — escalera de superficies.
     Cinco niveles con separación real entre uno y otro. Antes había cinco
     azules a dos o tres puntos de distancia y por eso nada se distinguía. */
  --fondo-0:       #03040F;   /* fondo de página        */
  --fondo-1:       #080A28;   /* secciones alternas     */
  --fondo-2:       #0E1049;   /* tarjetas y fichas      */
  --fondo-3:       #1A1F6E;   /* elevado, hover         */
  --fondo-4:       #272B78;   /* bordes y separadores   */

  --negro:         var(--fondo-0);
  --azul-fondo:    var(--fondo-1);
  --azul-sup:      #0E1049;   /* azul oficial del logo */
  --azul-sup-2:    var(--fondo-3);
  --azul-linea:    var(--fondo-4);
  --azul-elec:     #7C87FF;
  --naranja:       #F17201;   /* naranja oficial del logo */
  --naranja-claro: #FFA83D;
  --naranja-oscuro:#C25C01;
  --gris-marca:    #565A59;   /* gris de la tubería del logo */
  --blanco:        #F3F4FB;
  --gris-azul:     #9BA2C4;

  /* Degradados. Tres, con un trabajo cada uno. */
  --grad-marca:  linear-gradient(135deg, var(--naranja), var(--naranja-claro));
  --grad-noche:  linear-gradient(165deg, var(--fondo-0), #131A5C 55%, var(--fondo-2));

  /* Color de la línea en la que está el usuario. Cada categoría lo pisa
     con el suyo; fuera de las pestañas vale el azul eléctrico de marca. */
  --linea:         var(--azul-elec);
  --linea-tenue:   color-mix(in srgb, var(--linea) 18%, transparent);

  /* Tipografía */
  --display: 'Archivo', system-ui, sans-serif;
  --texto:   'IBM Plex Sans', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Métrica */
  --ancho: 1240px;
  --radio: 4px;
  --borde: 1px solid var(--azul-linea);
  --sombra: 0 18px 50px -20px rgba(0,0,0,.85);
  --cabecera-alto: 120px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background-color:var(--fondo-0);
  color:var(--blanco);
  font-family:var(--texto);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}

:focus-visible{
  outline:2px solid var(--naranja);
  outline-offset:3px;
  border-radius:2px;
}

/* --- Retícula de plano: fondo global --- */
.plano{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(124,135,255,.048) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,135,255,.048) 1px, transparent 1px);
  background-size:30px 30px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 85%);
}
.halo{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(56% 44% at 16% -8%, rgba(124,135,255,.22), transparent 70%),
    radial-gradient(44% 36% at 88%  2%, rgba(241,114,1,.13),   transparent 70%),
    radial-gradient(72% 48% at 52% 106%, rgba(26,31,110,.42),  transparent 72%);
}

.envoltura{position:relative; z-index:1}
.contenedor{width:100%; max-width:var(--ancho); margin:0 auto; padding:0 28px}

/* --- Rótulos mono (etiquetas técnicas) --- */
.rotulo{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--linea);
  display:flex; align-items:center; gap:10px;
}
.rotulo::before{content:''; width:26px; height:1px; background:var(--naranja); flex:none}

/* --- Títulos --- */
.titulo{
  font-family:var(--display); font-weight:800;
  font-size:clamp(30px,4.4vw,50px); line-height:1.05;
  letter-spacing:-.025em; margin:14px 0 0;
}
.titulo em{font-style:normal; color:var(--naranja)}
.entradilla{color:var(--gris-azul); max-width:62ch; margin:16px 0 0; font-size:17px}

/* ============================================================
   BARRA SUPERIOR + CABECERA
   ============================================================ */

.cabecera{
  position:sticky; top:0; z-index:60;
  background:rgba(4,5,26,.88); backdrop-filter:blur(14px);
  border-bottom:var(--borde);
}
.cabecera .contenedor{display:flex; align-items:center; gap:24px; height:74px}

.marca{display:flex; align-items:center; gap:13px; flex:none}
.marca__simbolo{width:46px; height:46px; flex:none}
.marca__texto{display:flex; flex-direction:column; line-height:1.05}
.marca__nombre{font-family:var(--display); font-weight:900; font-size:17px; letter-spacing:-.02em; text-transform:uppercase}
.marca__nombre i{font-style:normal; color:var(--naranja)}
.marca__linea{font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; color:var(--gris-azul); text-transform:uppercase}
.marca__logo-img{height:44px; width:auto}
@media (max-width:620px){ .marca__logo-img{height:34px} .cabecera .contenedor{gap:12px} }
.marca--imagen .marca__texto{
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.pie .marca--imagen .marca__logo-img{height:52px}

.pie__logo{height:118px; width:auto; margin-bottom:4px}
@media (max-width:620px){ .pie__logo{height:150px} }

/* Logo vertical: pie y tarjeta de contacto */
.logo-vertical{display:block; width:230px; max-width:60%; height:auto; margin-bottom:22px}
.logo-contacto{width:190px; margin:0 auto 24px}

/* Isotipo como insignia */
.insignia{width:30px; height:30px; opacity:.9; flex:none}
.insignia--grande{width:52px; height:52px; margin:0 auto 18px; opacity:.75}

/* El isotipo parte la regla graduada por la mitad, como el sello de un plano. */
.regla{position:relative}
.regla::after{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:74px; height:30px; background:var(--fondo-0);
  background-image:var(--filigrana);
  background-size:24px auto; background-position:center; background-repeat:no-repeat;
  opacity:.85;
}
.modal__marca{display:flex; align-items:center; gap:12px; margin-bottom:4px}

/* Sello grande del isotipo en el hero */
.hero__sello{
  /* Aquí va el isotipo, no la marca de la bomba: a la derecha la tapa el panel
     del índice y a la izquierda queda cortada detrás de los botones. */
  position:absolute; right:-90px; bottom:-70px; width:520px; height:520px; z-index:-1;
  background:var(--filigrana) center/contain no-repeat; opacity:.055; pointer-events:none;
}
@media (max-width:1080px){ .hero__sello{width:340px;height:340px;right:-80px;bottom:-60px} }

/* Marca de agua del isotipo en las cabeceras de sección */
.filigrana::after{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  right:-30px; top:50%; transform:translateY(-50%);
  width:420px; height:260px; opacity:.13;
  background:var(--marca-agua, var(--filigrana)) center/contain no-repeat;
}
.hero.filigrana::after{width:620px; height:620px; right:-160px; opacity:.04}
@media (max-width:900px){ .filigrana::after{display:none} }

/* El menú tiene su propia barra a todo el ancho. Repartidos en partes
   iguales respiran; apretados en la esquina derecha se veían amontonados. */
.barra-nav{
  border-top:1px solid rgba(39,43,120,.55);
  background:linear-gradient(180deg, rgba(3,4,15,.55), rgba(3,4,15,.2));
}
.nav{display:flex; width:100%; gap:0}
.nav__item, .plancha, .indice__fila, .pie__nav a{text-decoration:none}
.nav__item{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  background:none; border:0; padding:0 8px; height:46px;
  font-family:var(--texto); font-size:14px; font-weight:500; color:var(--gris-azul);
  position:relative; transition:color .2s, background .2s; white-space:nowrap;
}
.nav__punto{
  width:6px; height:6px; border-radius:50%; background:var(--linea);
  opacity:.55; transition:opacity .2s, transform .2s; flex:none;
}
.nav__item:hover{color:var(--blanco); background:rgba(124,135,255,.07)}
.nav__item:hover .nav__punto{opacity:1; transform:scale(1.25)}
.nav__item[aria-current="page"]{color:var(--blanco)}
.nav__item[aria-current="page"] .nav__punto{opacity:1}
.nav__item[aria-current="page"]::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--linea);
}

.acciones-cab{display:flex; align-items:center; gap:8px; flex:none; margin-left:auto}
.cab__wa{padding:10px 16px; font-size:13.5px; white-space:nowrap}
@media (max-width:1180px){ .cab__wa-txt{display:none} .cab__wa{padding:11px 13px} }
/* En móvil ya está el botón flotante de WhatsApp: en la cabecera sobra y desborda. */
@media (max-width:760px){ .acciones-cab .cab__wa{display:none} }
.icono-btn{
  width:40px; height:40px; display:grid; place-items:center;
  background:transparent; border:var(--borde); border-radius:var(--radio); color:var(--gris-azul);
  transition:.2s;
}
.icono-btn:hover{color:var(--blanco); border-color:var(--azul-elec)}
.menu-btn{display:none}

/* --- Botones --- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px; border-radius:var(--radio); border:1px solid transparent;
  font-family:var(--texto); font-weight:600; font-size:14px; letter-spacing:.01em;
  transition:transform .18s, background .2s, border-color .2s, color .2s;
}
.btn:active{transform:translateY(1px)}
.btn--naranja{background:var(--grad-marca); color:#1A0C00; box-shadow:0 10px 30px -12px rgba(241,114,1,.75)}
.btn--naranja:hover{background:#FF8A2B}
.btn--linea{border-color:var(--azul-linea); color:var(--blanco); background:rgba(14,16,73,.5)}
.btn--linea:hover{border-color:var(--azul-elec); background:rgba(124,135,255,.12)}
.btn--peq{padding:10px 15px; font-size:13px}
.btn--ancho{width:100%; justify-content:center}

/* ============================================================
   REGLA GRADUADA  (elemento firma)
   ============================================================ */
.regla{
  height:26px; position:relative; border-top:1px solid var(--azul-linea);
  background-color:var(--negro);
  background-image:
    repeating-linear-gradient(90deg, rgba(241,114,1,.9) 0 1px, transparent 1px 140px),
    repeating-linear-gradient(90deg, var(--azul-linea) 0 1px, transparent 1px 14px);
  background-size:100% 16px, 100% 8px;
  background-repeat:no-repeat;
  background-position:0 0, 0 0;
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; padding:96px 0 84px; overflow:hidden}
.hero__fondo{
  position:absolute; inset:0; z-index:-1;
  background-size:cover; background-position:center;
  opacity:.46; filter:saturate(1.12) contrast(1.06);
}
.hero__velo{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, var(--negro) 22%, rgba(9,11,50,.9) 55%, rgba(9,11,50,.45) 100%);
}
.hero__rejilla{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center}

.hero h1{
  font-family:var(--display); font-weight:900;
  font-size:clamp(38px,6.1vw,74px); line-height:.98; letter-spacing:-.035em;
  margin:18px 0 0; text-transform:uppercase;
}
.hero h1 em{font-style:normal; color:var(--naranja); display:block}
.hero__cota{display:block; margin:22px 0 0; width:100%; max-width:420px; height:26px}
/* Sin esto el SVG impone su ancho intrínseco de 420 px y estira la retícula
   por fuera de la pantalla en móvil. */
.hero__rejilla > *{min-width:0}
.hero__cota path, .hero__cota line{stroke:var(--azul-elec); stroke-width:1.4; fill:none}
.hero__cota text{fill:var(--gris-azul); font-family:var(--mono); font-size:10px; letter-spacing:.16em}
.hero p{color:var(--gris-azul); font-size:17.5px; max-width:56ch; margin:24px 0 0}
.hero__acciones{display:flex; gap:12px; margin-top:34px; flex-wrap:wrap}

/* Panel lateral del hero: índice del catálogo */
.indice{
  border:var(--borde); border-radius:var(--radio);
  background:linear-gradient(180deg, rgba(14,16,73,.92), rgba(9,11,50,.92));
  box-shadow:var(--sombra); overflow:hidden;
}
.indice__cab{
  padding:15px 20px; border-bottom:var(--borde);
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--gris-azul); text-transform:uppercase;
}
.indice__fila{
  width:100%; display:flex; align-items:center; gap:14px; padding:14px 20px;
  background:none; border:0; border-bottom:1px solid rgba(39,43,120,.5); text-align:left;
  transition:background .18s, padding-left .18s;
}
.indice__fila:last-child{border-bottom:0}
.indice__fila:hover{background:rgba(124,135,255,.1); padding-left:26px}
.indice__cod{font-family:var(--mono); font-size:11px; color:var(--linea); width:34px; flex:none}
.indice__nom{font-size:14px; font-weight:500; flex:1}
.indice__num{font-family:var(--mono); font-size:11px; color:var(--gris-azul)}

/* --- Tira de confianza --- */
.tira{border-top:var(--borde); border-bottom:var(--borde); background:rgba(9,11,50,.7)}
.tira .contenedor{display:flex; gap:38px; flex-wrap:wrap; justify-content:space-between; padding-top:22px; padding-bottom:22px}
.tira__item{display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--gris-azul)}
.tira__item b{color:var(--blanco); font-weight:600}
.tira__ico{color:var(--naranja); flex:none}

/* ============================================================
   SECCIONES
   ============================================================ */
.bloque{padding:88px 0}
.bloque--ajustado{padding:64px 0}

/* Los dos mensajes que el dueño quiere repetidos: haga la lista, se la envío. */
.dos-puntos{
  display:grid; gap:16px; margin:26px auto 30px; max-width:78ch; text-align:left;
}
.dos-puntos p{
  margin:0; color:var(--gris-azul); line-height:1.6; font-size:15px;
  display:flex; gap:14px; align-items:flex-start;
}
.dos-puntos p > span:last-child{min-width:0}
.dos-puntos b{color:var(--blanco); font-weight:600}
.dos-puntos__num{
  flex:none; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; margin-top:1px;
  background:var(--grad-marca); color:#1A0C00;
  font-family:var(--mono); font-size:12px; font-weight:700;
}

/* Franja de obra entre pedidos especiales y las ventajas */
.franja{position:relative; isolation:isolate; overflow:clip; padding:96px 0}
.franja__foto{
  position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center 62%;
  filter:saturate(1.15) contrast(1.05);
}
.franja__tinte{position:absolute; inset:0; z-index:-1; background:var(--azul-sup); mix-blend-mode:color; opacity:.55}
.franja__velo{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(3,4,15,.94) 0%, rgba(3,4,15,.82) 42%, rgba(3,4,15,.45) 100%),
             linear-gradient(180deg, var(--fondo-0), transparent 22%, transparent 78%, var(--fondo-0));
}
.franja__caja{max-width:62ch}
.franja h2{
  font-family:var(--display); font-weight:800; letter-spacing:-.02em; line-height:1.08;
  font-size:clamp(26px,3.4vw,42px); margin:14px 0 0; text-wrap:balance;
}
.franja h2 em{font-style:normal; color:var(--naranja)}
/* En móvil el texto ocupa todo el ancho, así que el velo lateral no sirve:
   toca oscurecer parejo o la letra queda encima de la parte clara de la foto. */
@media (max-width:900px){
  .franja__velo{
    background:linear-gradient(180deg, rgba(3,4,15,.88), rgba(3,4,15,.82)),
               linear-gradient(180deg, var(--fondo-0), transparent 18%, transparent 82%, var(--fondo-0));
  }
}
@media (max-width:760px){ .franja{padding:66px 0} }

/* Preguntas frecuentes */
.faq__lista{margin-top:26px; display:grid; gap:10px}
.faq__item{
  border:var(--borde); border-radius:var(--radio);
  background:linear-gradient(150deg, rgba(26,31,110,.5), rgba(14,16,73,.42));
}
.faq__item summary{
  cursor:pointer; padding:18px 22px; font-weight:600; color:var(--blanco);
  list-style:none; display:flex; align-items:center; gap:12px;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::before{
  content:'+'; font-family:var(--mono); color:var(--naranja);
  font-size:19px; line-height:1; flex:none;
}
.faq__item[open] summary::before{content:'−'}
.faq__item summary:hover{color:var(--naranja)}
.faq__r{padding:0 22px 20px 50px; color:var(--gris-azul); line-height:1.65}


/* Banda de pedidos especiales: aquí la frase manda, por eso va en display grande. */
.tarjeta.promesa{
  border-left:3px solid var(--naranja);
  display:flex; align-items:center; gap:46px;
  background:linear-gradient(120deg, rgba(241,114,1,.10), rgba(26,31,110,.55) 42%, rgba(14,16,73,.5));
}
.promesa__logo{width:176px; height:auto; flex:none; opacity:.95}
.promesa__texto{min-width:0}
.promesa__frase{
  font-family:var(--display); font-weight:800; letter-spacing:-.02em; line-height:1.06;
  font-size:clamp(27px,3.7vw,46px); margin:14px 0 0; text-wrap:balance;
}
.promesa__frase em{font-style:normal; color:var(--naranja)}
@media (max-width:900px){ .promesa{gap:0} .promesa__logo{display:none} }

/* Alterna la superficie entre secciones: es lo que le da relieve a la página
   sin agregar un solo color nuevo. */
.bloque--alterno{
  background:var(--fondo-1);
  border-top:1px solid rgba(39,43,120,.5);
  border-bottom:1px solid rgba(39,43,120,.5);
}
.bloque__cab{margin-bottom:44px; max-width:760px}

/* Planchas de categoría */
.planchas{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px}
.plancha{
  position:relative; text-align:left; padding:26px 24px 24px; min-height:186px;
  border:var(--borde); border-radius:var(--radio); background:rgba(14,16,73,.55);
  display:flex; flex-direction:column; overflow:hidden;
  transition:border-color .22s, background .22s, transform .22s;
}
.plancha::after{
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .25s;
  background:radial-gradient(circle at 85% 0%, var(--linea-tenue), transparent 62%);
}
.plancha:hover{border-color:var(--linea); transform:translateY(-4px); background:rgba(26,31,110,.72)}

/* Filete superior con el color de la línea: dice de un vistazo dónde está uno. */
.plancha::before{
  content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--linea); opacity:.85;
}
.plancha:hover::after{opacity:1}
.plancha__cod{font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--linea)}
.plancha__nom{font-family:var(--display); font-weight:700; font-size:21px; letter-spacing:-.01em; margin:12px 0 8px; line-height:1.15}
.plancha__txt{font-size:13.5px; color:var(--gris-azul); line-height:1.55}
.plancha__pie{margin-top:auto; padding-top:16px; display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:11px; color:var(--gris-azul)}
.plancha__flecha{color:var(--azul-elec); transition:transform .22s}
.plancha:hover .plancha__flecha{transform:translateX(5px)}

/* Franja de marcas */
.marcas{border-top:var(--borde); border-bottom:var(--borde); background:rgba(4,5,26,.6); padding:26px 0}
.marcas__cab{font-family:var(--mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gris-azul); margin-bottom:18px}
.marcas__lista{display:flex; flex-wrap:wrap; gap:10px 28px; align-items:center}
.marcas__lista span{
  font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:.02em;
  color:var(--gris-azul); opacity:.75; transition:color .2s, opacity .2s;
}
.marcas__lista span:hover{color:var(--blanco); opacity:1}

/* Entrega */
.entrega{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.entrega__tarjeta{border:var(--borde); border-radius:var(--radio); background:rgba(14,16,73,.5); padding:30px 28px; position:relative; overflow:hidden}
.entrega__tarjeta--destacada{border-color:var(--naranja)}
.entrega__tarjeta--destacada::before{content:''; position:absolute; inset:0; background:radial-gradient(circle at 90% 0%, rgba(241,114,1,.14), transparent 62%)}
.entrega__ico{color:var(--naranja); margin-bottom:16px}
.entrega h3{font-family:var(--display); font-size:20px; font-weight:700; margin:0 0 10px; position:relative}
.entrega p{margin:0; font-size:14.5px; color:var(--gris-azul); line-height:1.6; position:relative}
.entrega .marca-cond{display:inline-block; margin-top:14px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--naranja); border:1px solid var(--naranja); border-radius:2px; padding:4px 9px; position:relative}
@media (max-width:760px){.entrega{grid-template-columns:1fr}}

/* Mapa */
.mapa{border:var(--borde); border-radius:var(--radio); overflow:hidden; margin-top:18px; background:var(--azul-fondo)}
.mapa iframe{display:block; width:100%; height:300px; border:0; filter:grayscale(.35) invert(.92) hue-rotate(185deg) contrast(.9)}

/* Ventajas */
.ventajas{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--azul-linea); border:var(--borde); border-radius:var(--radio); overflow:hidden}
.ventaja{background:linear-gradient(170deg, var(--fondo-2), var(--fondo-1)); padding:30px 26px}
.ventaja__ico{color:var(--naranja); margin-bottom:16px}
.ventaja h3{font-family:var(--display); font-size:17px; font-weight:700; margin:0 0 8px}
.ventaja p{margin:0; font-size:14px; color:var(--gris-azul); line-height:1.6}

/* ============================================================
   CATÁLOGO
   ============================================================ */
.cat-cab{position:relative; padding:64px 0 34px; overflow:hidden; border-bottom:var(--borde)}
.cat-cab__fondo{position:absolute; inset:0; z-index:-1; background-size:cover; background-position:center; opacity:.5; filter:saturate(1.15) contrast(1.05)}
.cat-cab__velo{position:absolute; inset:0; z-index:-1; background:var(--grad-noche)}

.barra-cat{display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding:24px 0 30px}

/* ============================================================
   ZONA DE PRODUCTOS CON FOTO DE AMBIENTE
   La foto ya no vive en la cabecera: es el ambiente donde flotan las fichas.
   `overflow:clip` recorta sin volverse contenedor de scroll, que es lo que
   permite que la foto de adentro siga siendo sticky.
   ============================================================ */
.zona-productos{position:relative; isolation:isolate; overflow:clip; padding-bottom:60px}
.zona-productos .fichas{gap:26px}
.zona-fondo{position:absolute; inset:0; z-index:-1}
.zona-fondo__pantalla{
  position:sticky; top:0; height:100vh; overflow:hidden; isolation:isolate;
}
.zona-fondo__foto{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:.7; filter:saturate(1.2) contrast(1.08) brightness(1.02);
}
/* Duotono: lleva cualquier foto al azul del logo y le devuelve el acento
   naranja. Es lo que hace que diez fotos de origen distinto se vean de la
   misma familia. */
.zona-fondo__tinte{
  position:absolute; inset:0; background:var(--azul-sup);
  mix-blend-mode:color; opacity:.55;
}
.zona-fondo__brasa{
  position:absolute; inset:0; mix-blend-mode:screen; opacity:.10;
  background:radial-gradient(70% 55% at 82% 12%, var(--naranja), transparent 70%);
}
.zona-fondo__velo{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(3,4,15,.92) 0%, rgba(3,4,15,.46) 11%,
                    rgba(3,4,15,.34) 50%, rgba(3,4,15,.60) 90%, var(--fondo-0) 100%);
}
/* Las fichas dejan de ser azul macizo: se ve la foto entre una y otra. */
.zona-productos .ficha{
  background:rgba(14,16,73,.87);
  -webkit-backdrop-filter:blur(11px) saturate(1.2);
  backdrop-filter:blur(11px) saturate(1.2);
  box-shadow:0 22px 44px -26px rgba(0,0,0,.9);
}
.zona-productos .ficha:hover{background:rgba(20,24,92,.93)}
.zona-productos .barra-cat{
  padding:26px 0 30px; position:relative;
}
.zona-productos .chip{
  background:rgba(3,4,15,.72);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.zona-productos .chip[aria-pressed="true"]{background:var(--linea)}
.zona-productos .buscador{
  background:rgba(3,4,15,.75);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.zona-productos .vacio{
  background:rgba(3,4,15,.62);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
@media (prefers-reduced-motion: reduce){
  .zona-fondo__pantalla{position:absolute; height:100%}
  .aparece{opacity:1 !important; transform:none !important}
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}
.fichas-chips{display:flex; gap:8px; flex-wrap:wrap; flex:1}
.chip{
  padding:8px 15px; border-radius:100px; border:var(--borde); background:transparent;
  font-size:13px; color:var(--gris-azul); transition:.2s;
}
.chip:hover{color:var(--blanco); border-color:var(--linea)}
.chip[aria-pressed="true"]{background:var(--linea); border-color:var(--linea); color:#06081F; font-weight:600}

.buscador{position:relative; flex:none; width:250px}
.buscador input{
  width:100%; padding:10px 14px 10px 38px; border-radius:var(--radio);
  border:var(--borde); background:rgba(9,11,50,.8); color:var(--blanco);
  font-family:var(--texto); font-size:13.5px;
}
.buscador input::placeholder{color:#767DA8}
.buscador input:focus{border-color:var(--azul-elec); outline:none}
.buscador svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--gris-azul)}

.fichas{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:18px; padding-bottom:20px}

/* Ficha técnica de producto */
.ficha{
  position:relative; text-align:left; padding:0; overflow:hidden;
  border:var(--borde); border-radius:var(--radio); background:var(--azul-sup);
  display:flex; flex-direction:column;
  transition:border-color .22s, transform .22s, box-shadow .22s;
}
.ficha:hover{border-color:var(--linea); transform:translateY(-5px); box-shadow:var(--sombra), 0 0 0 1px var(--linea-tenue)}
.ficha__foto{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--azul-fondo); border-bottom:var(--borde)}
.ficha__foto img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.ficha:hover .ficha__foto img{transform:scale(1.05)}
.ficha__ref{
  position:absolute; top:10px; left:10px; z-index:2; display:inline-block;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  background:rgba(4,5,26,.93); border:1px solid var(--azul-linea);
  padding:4px 8px; border-radius:2px; color:var(--blanco);
}
.ficha__cuerpo{padding:18px 18px 20px; display:flex; flex-direction:column; flex:1}
.ficha__sub{font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--naranja); text-transform:uppercase}
.ficha__nom{font-family:var(--display); font-weight:700; font-size:17px; line-height:1.22; margin:9px 0 8px; letter-spacing:-.01em}
.ficha__txt{font-size:13px; color:var(--gris-azul); line-height:1.55; margin:0 0 16px; flex:1}
.ficha__medidas{display:flex; flex-wrap:wrap; gap:5px; margin-bottom:16px}
.medida{font-family:var(--mono); font-size:10.5px; padding:3px 7px; border:1px solid var(--azul-linea); border-radius:2px; color:var(--gris-azul)}
.ficha__acciones{display:flex; gap:8px}
.ficha__acciones .btn{flex:1; justify-content:center}

/* Marcas de escuadra en las esquinas */
.esquinas::before, .esquinas::after{
  content:''; position:absolute; width:13px; height:13px; z-index:3; pointer-events:none;
  border-color:var(--naranja); opacity:0; transition:opacity .25s;
}
.esquinas::before{top:7px; right:7px; border-top:1.5px solid; border-right:1.5px solid}
.esquinas::after{bottom:7px; left:7px; border-bottom:1.5px solid; border-left:1.5px solid}
.ficha:hover .esquinas::before, .ficha:hover .esquinas::after{opacity:1}

.vacio{
  grid-column:1/-1; text-align:center; padding:70px 20px; border:1px dashed var(--azul-linea); border-radius:var(--radio);
}
.vacio h3{font-family:var(--display); font-size:19px; margin:0 0 8px}
.vacio p{color:var(--gris-azul); font-size:14px; margin:0 0 20px}

/* ============================================================
   MODAL DE DETALLE
   ============================================================ */
.modal{position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:22px}
.modal[open]{display:flex}
.modal__fondo{position:absolute; inset:0; background:rgba(2,3,14,.86); backdrop-filter:blur(5px)}
.modal__caja{
  position:relative; width:100%; max-width:880px; max-height:88vh; overflow:auto;
  background:var(--azul-fondo); border:var(--borde); border-radius:var(--radio); box-shadow:var(--sombra);
  display:grid; grid-template-columns:1fr 1fr;
}
.modal__foto{background:var(--negro); border-right:var(--borde)}
.modal__foto img{width:100%; height:100%; object-fit:cover; min-height:280px}
.modal__info{padding:34px 32px}
.modal__cerrar{position:absolute; top:12px; right:12px; z-index:5; background:rgba(4,5,26,.9)}
.modal h2{font-family:var(--display); font-weight:800; font-size:27px; line-height:1.1; margin:10px 0 12px; letter-spacing:-.02em}
.modal__desc{color:var(--gris-azul); font-size:15px; margin:0 0 24px}
.modal__dato{margin-bottom:20px}
.modal__dato h4{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--azul-elec); margin:0 0 10px}
.modal__lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.modal__lista li{font-size:14px; color:var(--gris-azul); padding-left:18px; position:relative}
.modal__lista li::before{content:''; position:absolute; left:0; top:9px; width:7px; height:1.5px; background:var(--naranja)}

/* ============================================================
   CONTACTO
   ============================================================ */
.contacto{display:grid; grid-template-columns:1fr 1fr; gap:18px}
/* El correo es una palabra larga sin espacios: sin esto impone el ancho mínimo
   de la tarjeta y desborda la pantalla en móvil. */
.contacto > *{min-width:0}
.datos-lista{overflow-wrap:anywhere}
.tarjeta{border:var(--borde); border-radius:var(--radio); background:linear-gradient(160deg, rgba(26,31,110,.62), rgba(14,16,73,.5)); padding:32px}
.datos-lista{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:20px}
.datos-lista li{display:flex; gap:15px; align-items:flex-start}
.datos-lista .ico{color:var(--naranja); flex:none; margin-top:3px}
.datos-lista strong{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gris-azul); font-weight:500; margin-bottom:3px}
.datos-lista span{font-size:15px}

.campo{margin-bottom:15px}
.campo label{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gris-azul); margin-bottom:7px}
.campo input, .campo textarea, .campo select{
  width:100%; padding:11px 13px; border-radius:var(--radio); border:var(--borde);
  background:rgba(4,5,26,.7); color:var(--blanco); font-family:var(--texto); font-size:14px;
}
.campo textarea{resize:vertical; min-height:92px}
.campo input:focus, .campo textarea:focus, .campo select:focus{border-color:var(--azul-elec); outline:none}
.nota{font-size:12px; color:var(--gris-azul); margin:12px 0 0; text-align:center}

/* ============================================================
   PIE
   ============================================================ */
.pie{
  /* El botón flotante de WhatsApp queda fijo abajo a la derecha y tapaba la
     última línea del pie: se le deja el espacio. */
  border-top:var(--borde); background:var(--negro); padding:64px 0 96px; margin-top:20px;
  position:relative; overflow:hidden; isolation:isolate;
}
/* Foto de taller de fondo, igual en todas las pestañas. Mismo tratamiento que
   las demás: duotono al azul de la marca y velo encima para que el texto se lea. */
.pie__foto{
  position:absolute; inset:0; z-index:-3;
  background-size:cover; background-position:center 58%;
  opacity:.65; filter:saturate(1.15) contrast(1.05);
}
.pie__tinte{position:absolute; inset:0; z-index:-2; background:var(--azul-sup); mix-blend-mode:color; opacity:.6}
.pie__velo{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, var(--fondo-0) 0%, rgba(3,4,15,.70) 22%, rgba(3,4,15,.82) 76%, rgba(3,4,15,.94) 100%);
}
.pie .contenedor{position:relative; z-index:1}
@media (max-width:900px){
  .pie__velo{background:linear-gradient(180deg, var(--fondo-0) 0%, rgba(3,4,15,.82) 16%, rgba(3,4,15,.86) 74%, rgba(3,4,15,.95) 100%)}
}
.pie__rejilla{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:44px}
.pie__txt{color:var(--gris-azul); font-size:14px; max-width:42ch; margin:20px 0 0}
.pie h4{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--naranja); margin:0 0 18px}
.pie ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.pie ul button, .pie ul span{background:none; border:0; padding:0; font-size:14px; color:var(--gris-azul); text-align:left; transition:color .2s}
.pie ul button:hover{color:var(--blanco)}
.pie__base{
  margin-top:44px; padding-top:22px; border-top:1px solid rgba(39,43,120,.6);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; color:var(--gris-azul); letter-spacing:.05em;
}

/* Botón flotante WhatsApp */
.wa{
  position:fixed; right:20px; bottom:20px; z-index:70;
  display:flex; align-items:center; gap:10px; padding:13px 18px;
  background:#1FA855; color:#fff; border:0; border-radius:100px; font-weight:600; font-size:14px;
  box-shadow:0 14px 34px -10px rgba(31,168,85,.8); transition:transform .2s;
}
.wa:hover{transform:translateY(-3px)}

/* ============================================================
   MOVIMIENTO
   ============================================================ */
.aparece{opacity:0; transform:translateY(22px); transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1)}
.aparece.visible{opacity:1; transform:none}
@keyframes trazo{to{stroke-dashoffset:0}}
.hero__cota path, .hero__cota line{stroke-dasharray:600; stroke-dashoffset:600; animation:trazo 1.4s .35s cubic-bezier(.4,0,.2,1) forwards}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s !important; transition-duration:.001s !important}
  .aparece{opacity:1; transform:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hero__rejilla{grid-template-columns:1fr; gap:44px}
  .pie__rejilla{grid-template-columns:1fr 1fr; gap:34px}
}
@media (max-width:900px){
  :root{--cabecera-alto:74px}
  .cabecera .contenedor{height:74px}
  .menu-btn{display:grid}
  /* La barra desaparece: el menú pasa a ser cajón desplegable. */
  .barra-nav{border-top:0; background:none}
  .barra-nav .contenedor{padding:0}
  .nav{
    position:fixed; top:74px; left:0; right:0; z-index:59;
    flex-direction:column; gap:0; padding:10px 18px 22px;
    background:rgba(4,5,26,.98); border-bottom:var(--borde);
    transform:translateY(-115%); transition:transform .3s ease; visibility:hidden;
  }
  .nav.abierto{transform:translateY(0); visibility:visible}
  .nav__item{
    flex:none; height:auto; padding:14px 8px; font-size:15px; width:100%;
    justify-content:flex-start; gap:12px;
  }
  .nav__item[aria-current="page"]::after{left:8px; right:auto; width:22px; height:2px; bottom:8px}
  .contacto{grid-template-columns:1fr}
  .modal__caja{grid-template-columns:1fr}
  .modal__foto{border-right:0; border-bottom:var(--borde)}
  .modal__foto img{min-height:200px; max-height:260px}
  .buscador{width:100%}
}
@media (max-width:620px){
  .contenedor{padding:0 18px}
  .bloque{padding:60px 0}
  .hero{padding:62px 0 56px}
  .tira .contenedor{gap:18px}
  .pie__rejilla{grid-template-columns:1fr}
  .fichas{grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px}
  .modal__info{padding:26px 22px}
  .wa span{display:none}
  .wa{padding:15px; right:14px; bottom:14px}
}