/* AUTOLUMENS - catalogo. Paleta tomada del brochure. */
:root{
  --negro:#0B0B0C; --negro-2:#141416;
  --gris-prod:#E7E7E9;           /* fondo de foto, igual al brochure */
  --gris-pill:#A6A6A6;           /* gris del badge, muestreado del PDF */
  --texto:#101012; --texto-2:#5A5A62; --linea:#D8D8DC;
  --oro:#CCA86C;                 /* dorado del logo */
  --oro-badge:#F0B000;           /* badge cocullos / F28 */
  --rojo:#F80808;                /* badge A18 / F25 */
  --azul:#0810F8;                /* badge D5S */
  --wa:#25D366;                  /* verde WhatsApp */
  --papel:#F4F4F6;
  --max:1280px; --r:14px;
  --gutter:1.25rem;              /* margen lateral, crece con el ancho */
  --tap:44px;                    /* minimo tactil accesible */
  --barra:60px;                  /* alto del header */
  --sombra:0 1px 2px rgba(0,0,0,.06), 0 8px 24px -12px rgba(0,0,0,.18);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--papel); color:var(--texto);
  font-family:Archivo,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:clamp(15px,.9rem + .2vw,17px); line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-wrap:break-word;
}
body.sin-scroll{overflow:hidden}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
.wrap{width:min(100% - var(--gutter)*2, var(--max)); margin-inline:auto}

/* Skip link: sin el hack de -9999px, que ensancha el documento. */
.salta{position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap}
.salta:focus{position:fixed; top:.75rem; left:.75rem; z-index:99;
  width:auto; height:auto; clip-path:none; background:#fff; color:var(--texto);
  padding:.85rem 1.15rem; border-radius:10px; box-shadow:0 6px 24px rgba(0,0,0,.3);
  font-weight:700}
:focus-visible{outline:3px solid var(--oro); outline-offset:2px}

/* ---------- Header ---------- */
.top{position:sticky; top:0; z-index:50; background:var(--negro); border-bottom:1px solid #26262A}
.top__in{display:flex; align-items:center; gap:1rem; min-height:var(--barra)}
.logo{display:flex; align-items:center; min-height:var(--tap); padding-right:.25rem}
.logo img{height:clamp(26px,5.5vw,34px); width:auto}
.nav{margin-left:auto; display:flex; gap:.15rem; flex-wrap:wrap}
.nav a{
  display:flex; align-items:center; color:#C9C9CF;
  font-size:clamp(.72rem,.62rem + .3vw,.82rem); font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; padding:.6rem .7rem; min-height:var(--tap); border-radius:999px;
  transition:color .18s ease, background-color .18s ease;
}
.nav a:hover{color:#fff; background:#26262B}
.nav a[aria-current="page"]{color:var(--negro); background:var(--oro)}
.burger{display:none; margin-left:auto; background:none; border:0; color:#fff;
  width:var(--tap); height:var(--tap); align-items:center; justify-content:center;
  cursor:pointer; border-radius:10px}
.burger:hover{background:#26262B}

/* ---------- Hero ---------- */
.hero{position:relative; background:var(--negro); overflow:hidden}
.hero picture{display:block}
.hero__img{width:100%; height:clamp(190px, 34vw + 60px, 470px); object-fit:cover; opacity:.85}
/* Hero claro (foto de estudio sobre fondo blanco): sin atenuar, porque el
   opacity sobre negro lo dejaria grisaceo. La pastilla baja al piso para no
   taparle el frente al auto, que es justo lo que vende la pagina. */
.hero--claro{background:#EFEFF1}
.hero--claro .hero__img{opacity:1}
/* Pastilla al pie: en las fotos propias el auto ocupa el centro. */
.hero--abajo .hero__body{justify-content:flex-end; padding-bottom:clamp(1rem,3vw,1.75rem)}
/* Portada: el faro ocupa el centro-derecha y el fondo de la izquierda es oscuro,
   asi que la pastilla va ahi en vez de taparlo. */
.hero--izq .hero__body{align-items:flex-start; justify-content:center; text-align:left;
  padding-inline:clamp(1rem,4vw,3rem)}
.hero__body{position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.75rem; text-align:center;
  padding:1rem var(--gutter)}
/* Pastilla dorada metalica: el gris del brochure se ve apagado sobre foto nocturna. */
.pill{
  display:inline-block; max-width:100%;
  background:linear-gradient(145deg,#F3D79A 0%,#E8BC63 32%,var(--oro-badge) 62%,#C28C18 100%);
  color:#14100A; border:1px solid rgba(255,255,255,.35);
  font-weight:800; letter-spacing:-.015em; line-height:1.06;
  font-size:clamp(1.05rem,.85rem + 2.8vw,3.4rem); padding:.36em .62em; border-radius:999px;
  text-wrap:balance;
  box-shadow:0 12px 34px -10px rgba(212,160,23,.55),
             inset 0 1px 0 rgba(255,255,255,.55),
             inset 0 -1px 0 rgba(0,0,0,.18);
}

/* ---------- Home ---------- */
.intro{padding:0 0 .5rem; max-width:52ch}
/* La pastilla del catalogo vive aca, no sobre la foto del hero. Va fuera de
   .intro para que el limite de 52ch no la parta en dos lineas. */
.pill--intro{font-size:clamp(1.05rem,.8rem + 1.6vw,2.2rem);
  margin:clamp(2rem,5vw,3rem) 0 1.1rem}
.intro h2{font-size:clamp(1.45rem,1.1rem + 2vw,2.6rem); font-weight:800;
  letter-spacing:-.02em; margin:0 0 .6rem; line-height:1.12; text-wrap:balance}
.intro p{color:var(--texto-2); margin:0}
.cats{display:grid; gap:clamp(.75rem,2vw,1.25rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
  padding:clamp(1.25rem,4vw,2rem) 0 1rem}
.cat{position:relative; display:block; border-radius:var(--r); overflow:hidden;
  aspect-ratio:4/3; background:var(--negro-2); box-shadow:var(--sombra)}
.cat img{width:100%; height:100%; object-fit:cover; opacity:.8;
  transition:transform .5s cubic-bezier(.2,.8,.3,1), opacity .3s ease}
.cat:hover img{transform:scale(1.05); opacity:.95}
/* Va despues de .cat img a proposito: misma especificidad, gana por orden. */
.cat--claro img{opacity:1}
.cat--claro .cat__t{background:linear-gradient(transparent, rgba(0,0,0,.82) 58%)}
.cat__t{position:absolute; left:0; right:0; bottom:0; padding:clamp(.9rem,3vw,1.4rem);
  background:linear-gradient(transparent, rgba(0,0,0,.85)); color:#fff}
.cat__t b{display:block; font-size:clamp(1.05rem,.9rem + .7vw,1.4rem); font-weight:800; letter-spacing:-.01em}
.cat__t span{color:var(--oro); font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase}

/* ---------- Familia ---------- */
.fam{padding:clamp(2rem,5vw,3rem) 0 1rem; border-top:1px solid var(--linea)}
.fam:first-of-type{border-top:0}
/* Grid con areas para controlar el orden en cada tamano: en escritorio la caja
   va a la derecha; en celular queda entre el titulo y las especificaciones. */
.fam__head{display:grid; align-items:start;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"titulo aside" "specs aside";
  gap:clamp(.75rem,2vw,1rem) clamp(1.5rem,4vw,2.5rem);
  margin-bottom:clamp(1.25rem,4vw,2rem)}
.fam__linea{grid-area:titulo; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap}
.fam__head .fam__datos{grid-area:specs}
/* Variante de camaras: descripcion en texto normal, no pastilla. */
.variante{margin:0 0 .55rem; font-size:clamp(.95rem,.85rem + .4vw,1.1rem);
  font-weight:600; color:var(--texto-2); letter-spacing:.01em}
.fam__head .fam__aside{grid-area:aside; align-self:center}
.fam__t h2{margin:0; font-size:clamp(1.3rem,1rem + 1.6vw,2.1rem); font-weight:800;
  letter-spacing:-.02em; line-height:1.12; text-wrap:balance}
/* Conector: circulo chico junto al nombre, como en el brochure. */
.conector{flex:none; width:clamp(46px,9vw,64px); aspect-ratio:1; border-radius:50%;
  background:var(--gris-prod); border:3px solid var(--oro-badge); padding:4px;
  display:grid; place-items:center; overflow:hidden}
.conector img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply}
/* Modelo (A18 / F25 / F28 / D5S): pegado a la caja, como en el brochure. */
.fam__aside{flex:0 0 auto; display:flex; align-items:center; gap:clamp(.5rem,1.5vw,.9rem);
  margin-left:auto}
.modelo{display:inline-block; padding:.24em .62em; border-radius:999px; white-space:nowrap;
  font-weight:800; font-size:clamp(1.15rem,.85rem + 1.5vw,2.1rem); line-height:1.1; color:#fff}
.a-rojo .modelo{background:var(--rojo)} .a-azul .modelo{background:var(--azul)}
.a-dorado .modelo{background:var(--oro-badge); color:var(--negro)}
.a-gris .modelo{background:var(--gris-pill); color:var(--texto)}
.specs{margin:.4rem 0 0; padding:0; list-style:none; display:grid; gap:.3rem;
  font-size:clamp(.85rem,.8rem + .2vw,.92rem); color:var(--texto-2)}
.specs li{position:relative; padding-left:1.05rem}
.specs li::before{content:""; position:absolute; left:0; top:.62em; width:5px; height:5px;
  border-radius:50%; background:var(--oro)}
/* La foto del empaque va suelta, sin marco ni fondo: no es una referencia mas
   del catalogo. Sin esto parecia una tarjeta de producto. */
.fam__caja{flex:0 0 auto; width:clamp(150px,24vw,290px)}
/* Sin esto la foto se queda en los 190px del atributo width. */
.fam__caja img{width:100%; height:auto}

/* ---------- Productos ---------- */
/* Columnas fijas por tramo: tope de 4 en escritorio. Con auto-fill llegaba a 5 y
   cada referencia quedaba mas chica. */
.grid{display:grid; gap:clamp(.6rem,2vw,1rem);
  grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:560px){ .grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:900px){ .grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
/* Familias de 1 o 2 productos: tarjetas grandes para que las etiquetas de la
   foto (18.5 mm, 22 mm, TIPO ORIGINAL) se lean en cualquier pantalla. */
.grid--pocos{grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){ .grid--pocos{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:900px){ .grid--pocos{grid-template-columns:repeat(2,minmax(0,1fr))} }
.card{background:#fff; border:1px solid var(--linea); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--sombra);
  transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease}
.card:hover{transform:translateY(-3px); box-shadow:0 2px 4px rgba(0,0,0,.07), 0 18px 36px -16px rgba(0,0,0,.28)}
/* La foto va absoluta: dentro de un grid, height:100% se resuelve contra un area
   que depende del contenido, y el aspect-ratio del contenedor se ignora. Asi las
   tarjetas con foto y las de placeholder miden exactamente lo mismo. */
/* 4:5 en vez de cuadrado: los productos son verticales (bombillos), asi que una
   caja mas alta los muestra mas grandes con el mismo ancho de tarjeta. */
.card__ph{position:relative; background:var(--gris-prod); aspect-ratio:4/5}
.card__ph > img{position:absolute; inset:.45rem; width:calc(100% - .9rem);
  height:calc(100% - .9rem); object-fit:contain; mix-blend-mode:multiply}
/* Con socket: el producto ocupa el 66% izquierdo y el circulo se sienta a su
   derecha, centrado en vertical. Igual que la grilla del brochure. */
.card__ph--socket > img{left:.45rem; width:calc(66% - .9rem)}
/* Foto completa: la imagen es la foto entera, no un recorte del producto. Sin
   multiply (oscureceria el fondo de estudio) y a ras de la caja. */
.card__ph--foto{background:#fff}
.card__ph--foto > img{inset:0; width:100%; height:100%; object-fit:cover;
  mix-blend-mode:normal}
.grid--pocos .card__ph--foto{aspect-ratio:1}
.grid--pocos .card__ph--foto > img{object-fit:contain; inset:.5rem;
  width:calc(100% - 1rem); height:calc(100% - 1rem)}
.socket{position:absolute; right:3%; top:50%; transform:translateY(-50%);
  width:31%; max-width:92px; aspect-ratio:1;
  border-radius:50%; background:#fff; padding:5px;
  border:3px solid var(--rojo);
  box-shadow:0 2px 10px rgba(0,0,0,.22)}
/* El aro toma el color de la familia: F28 y cocullos dorados, A18 y F25 rojos. */
.a-azul .socket{border-color:var(--azul)}
.a-dorado .socket{border-color:var(--oro-badge)}
.a-gris .socket{border-color:var(--gris-pill)}
.socket img{width:100%; height:100%; object-fit:contain; mix-blend-mode:normal; border-radius:50%}
.vacio{position:absolute; inset:0; display:grid; place-items:center; align-content:center;
  gap:.5rem; color:var(--texto-2); text-align:center; padding:.75rem}
.vacio span{font-size:max(12px, .74rem); font-weight:700;
  letter-spacing:.05em; text-transform:uppercase}
/* Texto de la tarjeta centrado en los dos ejes. min-height + justify-content
   centran verticalmente aunque unas tarjetas lleven nota y otras no. */
.card__ft{margin-top:auto; padding:.85rem .75rem; display:flex; flex-direction:column;
  gap:.35rem; align-items:center; justify-content:center; text-align:center;
  min-height:3.75rem}
.tag{font-size:max(12px, .68rem); font-weight:800; letter-spacing:.08em;
  color:var(--texto-2); text-transform:uppercase}
.ref{display:inline-block; margin:0; padding:.42em .9em; border-radius:999px;
  font-weight:800; font-size:clamp(.76rem,.7rem + .25vw,.86rem); line-height:1.3; color:#fff}
.a-rojo .ref{background:var(--rojo)} .a-azul .ref{background:var(--azul)}
.a-dorado .ref{background:var(--oro-badge); color:var(--negro)}
/* Gris claro con letra negra, como en el PDF: negro sobre #A6A6A6 da 8.7:1 de
   contraste, mientras que el blanco sobre el gris viejo apenas llegaba a 4.9:1. */
.a-gris .ref{background:var(--gris-pill); color:var(--texto)}
.nota{font-size:max(12px, .78rem); color:var(--texto-2); line-height:1.45}

/* ---------- Footer ---------- */
.pie{background:var(--negro); color:#C9C9CF; margin-top:clamp(2.5rem,7vw,4rem);
  padding:clamp(2.5rem,7vw,3.5rem) 0 2rem}
.pie__in{display:grid; gap:clamp(1.75rem,5vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.pie img{height:clamp(32px,7vw,40px); width:auto; margin-bottom:1rem}
.pie h3{color:#fff; font-size:.78rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; margin:0 0 .9rem}
.sede{margin-bottom:1.25rem}
.sede b{display:block; color:var(--oro); font-size:.9rem; letter-spacing:.04em; margin-bottom:.35rem}
.tel{display:inline-flex; align-items:center; gap:.6rem; min-height:var(--tap);
  padding:.35rem .7rem .35rem .55rem; margin-left:-.55rem; border-radius:10px;
  font-size:clamp(1rem,.95rem + .3vw,1.1rem); font-weight:600; color:#fff;
  font-variant-numeric:tabular-nums; transition:background-color .18s ease, color .18s ease}
.tel:hover{background:#1F1F23}
.ico-wa{flex:none; color:var(--wa)}
.pie small{display:block; margin-top:clamp(1.75rem,5vw,2.5rem); padding-top:1.5rem;
  border-top:1px solid #26262A; color:#75757E; font-size:.8rem}
.pie__nota{font-size:.85rem; color:#9A9AA4; margin-top:.4rem}
.pie__links{display:grid}
.pie__links a{display:flex; align-items:center; min-height:var(--tap);
  padding:.25rem .6rem; margin-left:-.6rem; border-radius:8px;
  font-size:.9rem; color:#C9C9CF; transition:color .18s ease, background-color .18s ease}
.pie__links a:hover{color:var(--oro); background:#1F1F23}

/* ---------- Tablet ---------- */
@media (min-width:601px) and (max-width:900px){
  :root{--gutter:1.75rem}
}
@media (min-width:901px){
  :root{--gutter:1.75rem; --barra:68px}
}
@media (min-width:1100px){
  :root{--gutter:2rem}
}

/* ---------- Movil: menu desplegable ---------- */
@media (max-width:900px){
  .burger{display:flex}
  .nav{
    position:fixed; left:0; right:0; top:var(--barra); bottom:0;
    background:var(--negro-2); flex-direction:column; flex-wrap:nowrap; gap:0;
    padding:.75rem var(--gutter) 2rem; overflow-y:auto;
    display:none;
  }
  .nav[data-open="true"]{display:flex}
  .nav a{
    width:100%; padding:.95rem .75rem; border-radius:10px;
    font-size:1rem; letter-spacing:.04em; border-bottom:1px solid #232327;
  }
  .nav a:last-child{border-bottom:0}
}

/* ---------- Movil chico ---------- */
@media (max-width:600px){
  :root{--gutter:.9rem}

  /* Hero: mas foto del carro, sin la linea "Brochure 2026" y con la pastilla
     mas chica para que no tape el auto. */
  /* La caja toma exactamente la proporcion de la imagen movil (900x700 = 9/7),
     asi cover no recorta nada y el auto se ve entero. */
  .hero__img{height:auto; aspect-ratio:9/7; max-height:66svh; opacity:.92}
  .hero__body{justify-content:flex-end; padding-bottom:clamp(1.25rem,5vw,2rem)}
  .pill{font-size:clamp(1rem,.7rem + 2.2vw,1.45rem); padding:.4em .78em}

  /* Una sola columna: titulo, luego caja + modelo, luego especificaciones.
     La caja va centrada y grande, con el modelo (A18/F25/F28) debajo. */
  .fam__head{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"titulo" "aside" "specs"; gap:1rem}
  /* Titulo de familia centrado. En columna a proposito: con el circulo del
     conector al lado se centraba el conjunto y el texto quedaba corrido 29px. */
  .fam__linea{flex-direction:column; align-items:center; justify-content:center;
    text-align:center; gap:.6rem}
  .fam__head .fam__aside{margin-left:0; align-self:start; width:100%;
    flex-direction:column; align-items:center; gap:.85rem}
  .fam__caja{width:min(72vw,300px)}
  .socket{width:31%; max-width:58px; padding:3px}
  .card__ph > img{inset:.35rem; width:calc(100% - .7rem); height:calc(100% - .7rem)}
  .card__ph--socket > img{left:.35rem; width:calc(66% - .7rem)}

  /* Footer centrado en celular */
  .pie{text-align:center}
  .pie__in{justify-items:center}
  .pie img{margin-inline:auto}
  .sede b{text-align:center}
  .tel{margin-left:0}
  .pie__links{justify-items:center}
  .pie__links a{margin-left:0; justify-content:center}
}
@media (max-width:360px){
  :root{--gutter:.7rem}
}

/* ---------- Telefono acostado: hero mas bajo ---------- */
@media (max-height:520px) and (orientation:landscape){
  .hero__img{height:min(78svh,300px)}
  .nav{padding-bottom:3rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .cat:hover img, .card:hover{transform:none}
}