:root{
  /* paleta de marca ESMEBRA: negro, rojo, blanco.
     Los grises son escalas neutras del negro (lineas y texto secundario),
     no colores propios: hacen falta para jerarquia y legibilidad. */
  --tinta:#111111;           /* negro */
  --blanco:#ffffff;          /* blanco */
  --rojo:#e40a29;            /* rojo del logo */
  --rojo-osc:#c40823;        /* rojo hover */
  --gris:#6d6d6d; --gris-2:#9a9a9a;
  --claro:#f4f4f4; --claro-2:#ececec; --linea:#e2e2e2;
  --acento:var(--rojo);      /* el acento de la marca es el rojo */
  /* Tipografia. Archivo para titulares: grotesca de rotulo, encaja con
     el negro/rojo de la marca. Inter Tight para el texto: mas cenida
     que Inter, densidad de catalogo tecnico.
     --serif se mantiene como ALIAS: ya NO es una serif. */
  --titulo:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:var(--titulo);
  --sans:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--tinta);background:var(--blanco);
  line-height:1.55;font-size:16px}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.contenedor{max-width:1220px;margin:0 auto;padding:0 24px}
main{min-height:60vh}

/* --- barras superiores --- */
.barra-superior{background:#000;color:#cfcfcf;font-size:.76rem;border-bottom:1px solid #222}
.barra-superior .contenedor{display:flex;justify-content:space-between;align-items:center;height:36px}
.barra-superior a{color:#cfcfcf;margin-right:18px}
.barra-superior a:hover{color:#fff}
.barra-superior .mini span{color:#cfcfcf;margin-right:18px}
.mini{display:flex}
.idiomas{display:flex;gap:14px}
.idioma{font-weight:700;letter-spacing:.06em}

.cabecera{border-bottom:1px solid #000;position:sticky;top:0;
  background:var(--tinta);z-index:20}
.cabecera .contenedor{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:center;gap:11px;flex:none}
.logo-img{height:44px;width:auto;max-width:none;object-fit:contain;display:block}
.rombo{width:20px;height:20px;background:var(--blanco);transform:rotate(45deg);position:relative;flex:none}
.rombo::after{content:"";position:absolute;inset:-5px auto auto -5px;width:10px;height:10px;background:var(--rojo)}
.marca{font-weight:800;letter-spacing:.16em;font-size:1.12rem;color:var(--blanco)}
.sl{font-size:.62rem;color:var(--gris-2);align-self:flex-end;padding-bottom:4px;letter-spacing:.1em}
.principal{display:flex;gap:32px;font-size:.9rem;font-weight:600}
.principal a{padding:8px 0;border-bottom:2px solid transparent;color:var(--blanco)}
.principal a:hover,.principal .activo{border-color:var(--rojo);color:#fff}

/* --- hero portada --- */
.hero{background:var(--claro);border-bottom:1px solid var(--linea)}
.hero .contenedor{padding:66px 24px 60px}
.eyebrow{margin:0 0 10px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acento);font-weight:800}
.hero h1{margin:0;font-family:var(--titulo);font-weight:700;font-size:3rem;letter-spacing:-.025em;line-height:1.08}
.hero .sub{margin:14px 0 0;color:var(--gris);font-size:1.05rem;max-width:46ch}

/* --- buscador global (portada) --- */
.busqueda-global{position:relative;margin:26px 0 0;max-width:440px}
#q-global{width:100%;padding:11px 15px;border:1px solid var(--linea);
  background:var(--blanco);font:inherit;font-size:.92rem;border-radius:4px}
#q-global:focus{outline:2px solid var(--acento);outline-offset:-1px}
.q-res{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;
  background:var(--blanco);border:1px solid var(--linea);border-radius:4px;
  box-shadow:0 12px 30px rgba(0,0,0,.12);overflow:hidden}
.q-res a{display:flex;align-items:baseline;gap:12px;padding:10px 15px;
  border-bottom:1px solid var(--claro-2)}
.q-res a:last-child{border-bottom:0}
.q-res a:hover,.q-res a.activo{background:var(--claro)}
.q-res .q-ref{font-size:.72rem;font-weight:700;letter-spacing:.06em;
  color:var(--gris);flex:none;min-width:74px}
.q-res .q-nom{font-size:.9rem;color:var(--tinta);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

.bloque{padding:52px 24px 30px}
.titulo-seccion{font-family:var(--titulo);font-weight:700;font-size:1.5rem;letter-spacing:-.015em;margin:0 0 26px}
.subnivel{font-family:var(--serif);font-weight:600;font-size:1.25rem;margin:44px 0 20px;
  padding-bottom:10px;border-bottom:2px solid var(--tinta);color:var(--tinta)}
.intro{padding:34px 0 6px}
.intro .eyebrow{color:var(--acento)}
.intro h1{margin:.12em 0 .1em;font-family:var(--titulo);font-weight:700;font-size:2.2rem;letter-spacing:-.025em}
.intro .sub{margin:0;color:var(--gris);font-size:.92rem}

/* --- migas --- */
.migas{font-size:.78rem;color:var(--gris);padding:20px 0 0;display:flex;flex-wrap:wrap;gap:2px;align-items:center}
.migas a:hover{color:var(--tinta)}
.migas .sep{margin:0 8px;color:var(--gris-2)}
.migas .actual{color:var(--tinta);font-weight:600}

/* --- rejilla familias / subfamilias --- */
.rejilla-familias{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
.tarjeta-familia{border:1px solid var(--linea);background:var(--blanco);
  display:flex;flex-direction:column;transition:box-shadow .2s ease,transform .2s ease}
.tarjeta-familia:hover{box-shadow:0 14px 34px rgba(0,0,0,.09);transform:translateY(-2px)}
.tarjeta-familia .foto{aspect-ratio:4/3;background:var(--blanco);display:grid;place-items:center;
  padding:22px}
/* la imagen se ve SIEMPRE completa: se ajusta al ancho y al alto disponibles */
.tarjeta-familia .foto img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.tarjeta-familia .cuerpo{padding:20px 22px 24px;border-top:1px solid var(--linea)}
.tarjeta-familia h2{margin:0;font-family:var(--titulo);font-weight:700;font-size:1.3rem;letter-spacing:-.015em;color:var(--tinta)}
.tarjeta-familia .meta{margin:6px 0 14px;color:var(--gris);font-size:.84rem}
.tarjeta-familia .flecha{font-size:.82rem;font-weight:700;letter-spacing:.04em;color:var(--rojo)}
.tarjeta-familia .flecha.proximamente{color:var(--gris-2)}
.proximamente-caja{border:1px dashed var(--linea);border-radius:8px;
  padding:40px 28px;text-align:center;color:var(--gris);background:var(--claro)}
.proximamente-caja .et{font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gris-2);margin:0 0 8px}

/* --- filtros --- */
.filtros{display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center;
  padding:22px 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);margin:22px 0 6px}
#buscar{flex:1 1 240px;min-width:200px;padding:10px 13px;border:1px solid var(--linea);
  font:inherit;font-size:.9rem;border-radius:3px;background:var(--blanco)}
#buscar:focus{outline:2px solid var(--acento);outline-offset:-1px}
.grupo{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.et{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--gris);margin-right:2px}
.chip{border:1px solid var(--linea);background:var(--blanco);font:inherit;font-size:.8rem;
  padding:6px 14px;cursor:pointer;border-radius:999px;color:var(--tinta)}
.chip:hover{border-color:var(--tinta)}
.chip.activo{background:var(--tinta);color:var(--blanco);border-color:var(--tinta)}
.chip:focus-visible{outline:2px solid var(--acento);outline-offset:2px}

/* --- rejilla de productos --- */
.rejilla{list-style:none;padding:0;margin:26px 0 70px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:30px 24px}
.tarjeta[hidden]{display:none}
.tarjeta a{display:block}
/* clave: la foto se ve COMPLETA y encogida (contain), nunca recortada */
.tarjeta .foto{aspect-ratio:1;background:var(--blanco);border:1px solid var(--linea);
  display:grid;place-items:center;padding:16px;margin-bottom:12px}
.tarjeta .foto img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.sin-foto{color:var(--gris-2);font-size:.72rem;text-align:center;letter-spacing:.06em;
  text-transform:uppercase;padding:20px}
.sin-foto.grande{aspect-ratio:1;display:grid;place-items:center;width:100%}
.ref{margin:0;font-size:.7rem;letter-spacing:.09em;color:var(--gris);font-weight:700}
.tarjeta h3{margin:3px 0 6px;font-size:.94rem;font-weight:600;line-height:1.32}
.acabado{margin:0;font-size:.78rem;color:var(--gris);display:flex;align-items:center;gap:7px}
.punto{width:11px;height:11px;border-radius:50%;background:var(--c);
  border:1px solid rgba(0,0,0,.2);flex:none}
.aviso{color:var(--rojo);font-weight:700;margin-left:4px;cursor:help}

/* --- ficha producto --- */
.ficha{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;padding:14px 24px 80px}
.visuales .principal-foto{background:var(--blanco);border:1px solid var(--linea);
  padding:34px;display:grid;place-items:center;min-height:360px}
.visuales .principal-foto img{max-width:100%;max-height:440px;width:auto;height:auto;
  object-fit:contain}
.planos{margin-top:22px;border-top:1px solid var(--linea);padding-top:18px}
.planos .et{display:block;margin-bottom:12px}
.planos img{margin:0 auto 14px;max-height:200px;width:auto}
.datos h1{margin:.14em 0;font-family:var(--titulo);font-weight:700;font-size:1.75rem;letter-spacing:-.025em}
.ref.grande{font-size:.8rem;color:var(--gris);font-weight:700;letter-spacing:.08em}
.categoria{margin:0 0 24px;color:var(--gris);font-size:.92rem;font-style:italic}
.atributos{display:grid;grid-template-columns:auto 1fr;gap:9px 22px;margin:0 0 30px;
  padding:18px 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);font-size:.9rem}
.atributos dt{color:var(--gris);text-transform:uppercase;font-size:.7rem;letter-spacing:.1em;padding-top:3px}
.atributos dd{margin:0;display:flex;align-items:center;gap:8px}
.datos h2{font-size:.72rem;text-transform:uppercase;letter-spacing:.13em;color:var(--gris);margin:28px 0 11px}
.lista-tecnica{margin:0;padding-left:20px;font-size:.92rem}
.lista-tecnica li{margin-bottom:5px}
.recambios{list-style:none;margin:0;padding:0;font-size:.9rem}
.recambios li{display:flex;justify-content:space-between;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--linea)}
.recambios code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86rem}
.usos{color:var(--gris);font-size:.74rem}
.aviso-caja{margin-top:28px;padding:13px 15px;background:#fbf3f3;border-left:3px solid var(--rojo);font-size:.85rem}
.volver{margin-top:34px}
.volver a{color:var(--acento);font-weight:600;font-size:.88rem}

/* --- pie --- */
.pie{border-top:1px solid var(--linea);margin-top:20px;padding:34px 0;font-size:.8rem;color:var(--gris)}
.pie .contenedor{}
.nota{margin:0 0 6px}
.legal{margin:0}

@media (max-width:900px){
  .hero h1{font-size:2.3rem}
  .ficha{grid-template-columns:1fr;gap:34px}
}
@media (max-width:640px){
  .cabecera .contenedor{height:58px}
  /* en movil dejamos solo el logo: los enlaces del nav no caben y son
     placeholders. La navegacion real esta en el hero y las migas. */
  .principal{display:none}
  .logo{margin:0 auto}
  .logo-img{height:38px}
  .marca{font-size:1rem;letter-spacing:.12em}
  .barra-superior .contenedor{height:32px}
  .barra-superior{font-size:.72rem}
  .barra-superior .mini a:nth-child(2),
  .barra-superior .mini span:nth-child(2){display:none}
  .barra-superior a{margin-right:0}
  .hero .contenedor{padding:40px 20px 36px}
  .hero h1{font-size:2rem}
  .intro h1{font-size:1.7rem}
  .contenedor{padding:0 14px}
  /* dos columnas siempre: las fichas se ven sin tener que alejar el zoom */
  .rejilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;margin:20px 0 50px}
  .rejilla-familias{grid-template-columns:1fr;gap:16px}
  /* la foto ocupa menos alto y con mas aire para que el producto se lea */
  .tarjeta .foto{aspect-ratio:4/3;padding:8px;margin-bottom:8px}
  .tarjeta h3{font-size:.86rem}
  .tarjeta .ref{font-size:.66rem}
  /* las fotos de las dos secciones van a ancho completo: les fijamos una
     altura contenida y forzamos que la imagen no la supere, para que no
     se vean enormes ni haya que alejar el zoom */
  .tarjeta-familia .foto{aspect-ratio:auto;height:150px;padding:12px;overflow:hidden}
  .tarjeta-familia .foto img{max-height:126px}
}
/* movil en horizontal: pantalla ancha pero MUY baja. Las media queries por
   ancho no lo cubren (el ancho supera 640px), asi que aqui limitamos por la
   ALTURA del viewport para que las fotos no ocupen toda la pantalla. */
@media (orientation:landscape) and (max-height:520px){
  .principal{display:none}
  .logo{margin:0 auto}
  .cabecera .contenedor{height:52px}
  .logo-img{height:34px}
  .hero .contenedor{padding:26px 20px 24px}
  .hero h1{font-size:1.8rem}
  /* secciones en dos columnas, con foto contenida en alto */
  .rejilla-familias{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .tarjeta-familia .foto{aspect-ratio:auto;height:130px;padding:12px;overflow:hidden}
  .tarjeta-familia .foto img{max-height:106px}
  /* rejilla de productos: mas columnas y foto baja */
  .rejilla{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px 14px}
  .tarjeta .foto{aspect-ratio:auto;height:130px;padding:10px;overflow:hidden;
    display:grid;place-items:center}
  .tarjeta .foto img{max-height:110px}
  /* ficha: foto principal contenida */
  .visuales .principal-foto{min-height:0;padding:18px}
  .visuales .principal-foto img{max-height:220px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ---- Fontanería (tabular) ---- */
.foto-texto{width:100%;height:100%;min-height:180px;display:flex;
  align-items:center;justify-content:center;
  background:linear-gradient(135deg,#232a38,#39445a);color:#fff}
.foto-texto span{font-size:1.4rem;font-weight:700;letter-spacing:.02em}
.sin-foto-grid .tarjeta-familia{min-height:0}
.sin-foto-grid .tarjeta-familia .cuerpo{padding:20px}
.lista-cat{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.tarjeta-cat{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:16px 18px;border:1px solid var(--linea);border-radius:8px;
  text-decoration:none;color:inherit;background:#fff;transition:border-color .15s,transform .15s}
.tarjeta-cat:hover{border-color:var(--acento);transform:translateX(2px)}
.tarjeta-cat h2{font-size:1rem;margin:0;font-weight:600}
.tarjeta-cat .meta{margin:2px 0 0;color:var(--gris-2);font-size:.85rem}
.tarjeta-cat .flecha{color:var(--acento);font-size:1.2rem;flex:0 0 auto}
.tarjeta-cat .mini{flex:0 0 64px;width:64px;height:64px;border-radius:6px;
  overflow:hidden;background:#f6f7f8;display:flex;align-items:center;justify-content:center}
.tarjeta-cat .mini img{width:100%;height:100%;object-fit:contain;padding:4px}
.tarjeta-cat .mini-sinfoto{width:100%;height:100%;background:#f0f1f3}
.cat-layout{display:grid;grid-template-columns:minmax(220px,320px) 1fr;
  gap:24px;align-items:start}
.cat-foto{background:#f6f7f8;border:1px solid var(--linea);border-radius:8px;
  padding:16px;display:flex;align-items:center;justify-content:center}
.cat-foto img{width:100%;height:auto;max-height:340px;object-fit:contain}
@media (max-width:720px){.cat-layout{grid-template-columns:1fr}}
.badge-revisar{display:inline-block;margin-left:8px;padding:1px 7px;
  font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#8a6d00;background:#fff4d6;border-radius:20px;vertical-align:middle}
.nota-revisar{margin:0 0 16px;padding:10px 14px;border-radius:6px;
  background:#fff8e6;border:1px solid #f0dca0;color:#7a6000;font-size:.85rem}
.tabla-wrap{overflow-x:auto;border:1px solid var(--linea);border-radius:8px}
.tabla-refs{width:100%;border-collapse:collapse;font-size:.9rem}
.tabla-refs thead th{background:#1f2430;color:#fff;text-align:left;
  padding:10px 14px;font-weight:600;font-size:.78rem;letter-spacing:.03em;
  text-transform:uppercase;white-space:nowrap}
.tabla-refs tbody td{padding:9px 14px;border-top:1px solid var(--linea)}
.tabla-refs tbody tr:nth-child(even){background:#fafafa}
.tabla-refs tbody tr:hover{background:#f0f4f8}
.tabla-refs td.ref{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:600;white-space:nowrap}
.tabla-refs td.num{text-align:right;color:var(--gris-2);white-space:nowrap}

/* ============================================================
   PORTADA REDISEÑADA (estilo editorial, tipo roca.es)
   Solo afecta a la home. El resto del sitio usa las clases
   clásicas (.hero, .tarjeta-familia) que siguen intactas.
   Pegar este bloque al final de site.css.
   ============================================================ */

/* --- hero a sangre con foto de fondo --- */
.hero-portada{
  position:relative;
  min-height:clamp(340px,52vh,520px);
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 100% at 50% 0%,#242424 0%,#141414 45%,#0a0a0a 100%);
  overflow:hidden;
}
/* línea de acento roja sutil en el borde inferior */
.hero-portada::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--rojo);opacity:.9;
}
/* velo ya no necesario sin foto, pero se mantiene neutro por compatibilidad */
.hero-portada__velo{position:absolute;inset:0;pointer-events:none}
.hero-portada__cuerpo{
  position:relative;z-index:2;
  width:100%;max-width:640px;padding:0 24px;text-align:center;color:#fff;
}
.hero-portada__kicker{
  margin:0 0 14px;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:800;color:#f4b4bd;
}
.hero-portada__titulo{
  margin:0 0 26px;font-family:var(--serif);font-weight:600;
  font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.08;letter-spacing:-.01em;color:#fff;
}
/* buscador protagonista dentro del hero */
.busqueda-hero{max-width:520px;margin-left:auto;margin-right:auto}
.busqueda-hero #q-global{
  width:100%;padding:15px 18px;font-size:1rem;border:none;border-radius:6px;
  background:#fff;color:var(--tinta);box-shadow:0 10px 34px rgba(0,0,0,.28);
}
.busqueda-hero #q-global:focus{outline:3px solid var(--acento);outline-offset:0}
.busqueda-hero .q-res{text-align:left}

/* --- secciones split 50/50 a sangre --- */
.secciones-split{
  display:grid;grid-template-columns:1fr 1fr;
  min-height:clamp(280px,40vh,420px);
}
.split-card{
  position:relative;display:flex;align-items:flex-end;overflow:hidden;
  background:var(--tinta);
  background-image:var(--split-img);
  background-size:cover;background-position:center;
  color:#fff;min-height:300px;
  transition:transform .5s ease;
}
.split-card__velo{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 25%,rgba(0,0,0,.78) 100%);
  transition:background .3s ease;
}
.split-card:hover{transform:scale(1.02)}
.split-card:hover .split-card__velo{
  background:linear-gradient(180deg,rgba(0,0,0,.15) 20%,rgba(0,0,0,.82) 100%);
}
.split-card__cuerpo{position:relative;z-index:2;padding:34px 38px}
.split-card__titulo{
  margin:0 0 8px;font-family:var(--serif);font-weight:600;
  font-size:clamp(1.6rem,2.6vw,2.1rem);color:#fff;
}
.split-card__meta{margin:0 0 16px;font-size:.95rem;color:#e2e2e2}
.split-card__flecha{
  display:inline-block;font-size:.85rem;font-weight:700;letter-spacing:.05em;color:#fff;
  border-bottom:2px solid var(--rojo);padding-bottom:3px;
}

/* --- responsive --- */
@media (max-width:720px){
  .secciones-split{grid-template-columns:1fr}
  .split-card{min-height:220px}
  .split-card__cuerpo{padding:26px 28px}
}
@media (max-width:640px){
  .hero-portada{min-height:clamp(300px,58vh,440px)}
  .busqueda-hero #q-global{padding:13px 15px;font-size:.95rem}
}
/* móvil horizontal: viewport muy bajo, limitamos altura del hero */
@media (orientation:landscape) and (max-height:520px){
  .hero-portada{min-height:auto;padding:40px 0}
  .secciones-split{min-height:auto}
  .split-card{min-height:180px}
}


/* ============================================================
   ARMONIZACIÓN DE PÁGINAS INTERIORES con la portada.
   Retoque ligero: solo color, tipografía, bordes y hover.
   NO cambia layout ni recorta fotos (siguen contain).
   Afecta a: griferia, familia, fontaneria, font_categoria,
   buscar, 404, producto. Todo vía clases ya existentes.
   ============================================================ */

/* --- hero interior: del gris plano a un negro coherente con la home --- */
.hero{
  background:radial-gradient(120% 100% at 50% 0%,#242424 0%,#141414 55%,#0d0d0d 100%);
  border-bottom:0;
  position:relative;
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--rojo);
}
.hero .contenedor{padding:48px 24px 44px}
.hero .eyebrow{color:#f4b4bd}
.hero h1{color:#fff}
.hero .sub{color:#cfcfcf}
/* el buscar.php mete el input dentro del hero: que se lea sobre negro */
.hero .busqueda-global #q{background:#fff;color:var(--tinta);border-color:transparent}

/* --- tarjetas de familia: mismo peso visual que las split, foto intacta --- */
.tarjeta-familia{
  border:1px solid var(--linea);border-radius:12px;overflow:hidden;
  transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease;
}
.tarjeta-familia:hover{
  box-shadow:0 18px 40px rgba(0,0,0,.12);transform:translateY(-3px);
  border-color:var(--claro-2);
}
.tarjeta-familia .cuerpo{padding:22px 24px 26px}
.tarjeta-familia .flecha{
  display:inline-block;border-bottom:2px solid var(--rojo);padding-bottom:2px;
}

/* --- títulos de sección: subrayado rojo corto, tono editorial --- */
.titulo-seccion{
  font-size:1.7rem;position:relative;padding-bottom:14px;margin-bottom:30px;
}
.titulo-seccion::after{
  content:"";position:absolute;left:0;bottom:0;width:46px;height:3px;background:var(--rojo);
}

/* --- ficha de producto: acento coherente en enlaces y volver --- */
.datos h1{font-size:1.9rem}
.volver a{border-bottom:2px solid var(--rojo);padding-bottom:2px}

/* --- tarjetas de categoría (fontanería tabular): hover con el rojo --- */
.tarjeta-cat{border-radius:12px}

/* --- responsive: el hero interior también respira menos en móvil --- */
@media (max-width:640px){
  .hero .contenedor{padding:34px 20px 30px}
  .titulo-seccion{font-size:1.4rem}
}

/* ============================================================
   PÁGINA DE CONTACTO
   ============================================================ */

/* La barra superior ahora lleva enlaces en vez de <span>. */
.barra-superior .mini a{color:#cfcfcf;margin-right:18px;text-decoration:none}
.barra-superior .mini a:hover{color:#fff}

.contacto-rejilla{
  display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start;
  margin-top:34px;
}

.lista-contacto{list-style:none;margin:0;padding:0}
.lista-contacto li{
  padding:16px 0;border-bottom:1px solid var(--linea);
  display:flex;flex-direction:column;gap:5px;
}
.lista-contacto li:first-child{padding-top:0}
.lista-contacto .etiqueta{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris);font-weight:800;
}
.lista-contacto a,.lista-contacto .valor{
  font-size:.98rem;color:var(--tinta);line-height:1.45;text-decoration:none;
}
.lista-contacto a{border-bottom:1px solid transparent;align-self:flex-start}
.lista-contacto a:hover{color:var(--rojo);border-color:var(--rojo)}

.contacto-nota{
  margin:26px 0 0;padding:20px 22px;background:var(--claro);
  border-left:3px solid var(--rojo);color:var(--gris);
  font-size:.9rem;line-height:1.6;
}

/* --- avisos (éxito / error) --- */
.aviso{padding:20px 24px;border-radius:6px;margin:0 0 26px;font-size:.93rem;line-height:1.6}
.aviso .aviso-titulo{
  margin:0 0 6px;font-weight:800;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;
}
.aviso p{margin:0}
.aviso ul{margin:8px 0 0;padding-left:20px}
.aviso li{margin:3px 0}
.aviso-ok{background:#f1f8f2;border:1px solid #cfe6d3;border-left:3px solid #2e7d3a;color:#245c2e}
.aviso-ok .aviso-titulo{color:#2e7d3a}
.aviso-error{background:#fdf1f3;border:1px solid #f3ccd3;border-left:3px solid var(--rojo);color:#8c1224}
.aviso-error .aviso-titulo{color:var(--rojo)}

/* --- formulario --- */
.formulario .campo{margin-bottom:20px;display:flex;flex-direction:column;gap:7px}
.formulario label{
  font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris);font-weight:800;
}
.formulario .req{color:var(--rojo)}
.formulario input[type=text],
.formulario input[type=email],
.formulario textarea{
  width:100%;box-sizing:border-box;
  padding:12px 14px;border:1px solid var(--linea);border-radius:4px;
  background:var(--blanco);font:inherit;font-size:.95rem;color:var(--tinta);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.formulario input:focus,.formulario textarea:focus{
  outline:none;border-color:var(--rojo);box-shadow:0 0 0 3px rgba(228,10,41,.10);
}
.formulario textarea{resize:vertical;min-height:150px;line-height:1.5}
.formulario .trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.boton{
  display:inline-block;padding:13px 30px;border:0;border-radius:4px;
  background:var(--rojo);color:#fff;font:inherit;font-size:.88rem;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  text-decoration:none;transition:background .18s ease,transform .18s ease;
}
.boton:hover{background:var(--rojo-osc);transform:translateY(-1px);color:#fff}
.boton:active{transform:translateY(0)}

.contacto-mapa{
  margin-top:44px;border-top:1px solid var(--linea);
  line-height:0;filter:grayscale(1);transition:filter .35s ease;
}
.contacto-mapa:hover{filter:grayscale(0)}


/* ============================================================
   PÁGINA DE EMPRESA
   ============================================================ */

/* --- hero a sangre con imagen de fondo --- */
.hero-empresa{
  position:relative;min-height:min(78vh,620px);
  display:flex;align-items:center;overflow:hidden;background:var(--tinta);
}
.hero-empresa-fondo{position:absolute;inset:0;z-index:0}
.hero-empresa-fondo img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  display:block;transform:scale(1.03);
}
/* velo oscuro con degradado: el texto se lee siempre, la foto respira */
.hero-empresa-velo{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,
    rgba(0,0,0,.86) 0%,
    rgba(0,0,0,.72) 32%,
    rgba(0,0,0,.34) 62%,
    rgba(0,0,0,.15) 100%);
}
.hero-empresa-texto{position:relative;z-index:2;padding-top:70px;padding-bottom:70px}
.hero-empresa h1{
  margin:0;font-family:var(--serif);font-weight:600;color:#fff;
  font-size:clamp(2.3rem,5.2vw,4rem);line-height:1.04;letter-spacing:-.015em;
}
.hero-empresa h1 span{display:block}
/* la segunda línea en rojo: firma de la marca */
.hero-empresa h1 .linea-2{color:var(--rojo)}
.hero-empresa-sub{
  margin:20px 0 0;color:#dcdcdc;font-size:1.05rem;
  max-width:34ch;line-height:1.6;
}
.boton-hero{margin-top:30px;padding:15px 34px;font-size:.9rem}

/* --- sobre nosotros: dos columnas, cabecera pegajosa --- */
.empresa-sobre{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}
.empresa-sobre-cabecera h2{
  margin:.2em 0 0;font-family:var(--serif);font-weight:600;
  font-size:1.9rem;line-height:1.2;letter-spacing:-.01em;
}
.empresa-sobre-texto p{margin:0 0 18px;color:var(--gris);font-size:1rem;line-height:1.75}
.empresa-sobre-texto p:last-child{margin-bottom:0}
/* el primer párrafo pesa más: entrada editorial */
.empresa-sobre-texto .destacado{
  color:var(--tinta);font-size:1.14rem;line-height:1.65;
  padding-left:20px;border-left:3px solid var(--rojo);
}

/* --- banda de cifras sobre negro --- */
.empresa-cifras{background:var(--tinta);color:#fff;padding:56px 0;margin-top:20px}
.cifras-rejilla{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;
}
.cifra{
  display:flex;flex-direction:column;gap:9px;padding:0 14px;
  border-right:1px solid #2a2a2a;
}
.cifra:last-child{border-right:0}
.cifra .numero{
  font-family:var(--serif);font-weight:600;font-size:2.5rem;
  line-height:1;color:#fff;letter-spacing:-.02em;
}
.cifra .numero small{font-size:.5em;color:var(--rojo);margin-left:2px;font-weight:700}
/* el ámbito es texto, no número: que no desentone de tamaño */
.cifra:last-child .numero{font-size:1.5rem;line-height:1.35;padding-top:8px}
.cifra .pie{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gris-2);font-weight:700;
}

/* --- galería --- */
.empresa-galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.empresa-galeria figure{
  margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:10px;
  background:var(--claro);
}
.empresa-galeria img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease;
}
.empresa-galeria figure:hover img{transform:scale(1.05)}

/* --- accesos al catálogo --- */
.empresa-secciones{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.seccion-tarjeta{
  display:block;padding:34px 32px;border:1px solid var(--linea);border-radius:12px;
  background:var(--blanco);text-decoration:none;
  transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease;
}
.seccion-tarjeta:hover{
  box-shadow:0 18px 40px rgba(0,0,0,.10);transform:translateY(-3px);
  border-color:var(--claro-2);
}
.seccion-tarjeta h3{
  margin:0;font-family:var(--serif);font-weight:600;
  font-size:1.5rem;color:var(--tinta);
}
.seccion-tarjeta p{margin:8px 0 18px;color:var(--gris);font-size:.92rem}
.seccion-tarjeta .flecha{
  display:inline-block;font-size:.82rem;font-weight:700;letter-spacing:.04em;
  color:var(--rojo);border-bottom:2px solid var(--rojo);padding-bottom:2px;
}

/* --- llamada final --- */
.empresa-cta{
  background:var(--claro);border-top:1px solid var(--linea);
  padding:64px 0;text-align:center;
}
.empresa-cta h2{
  margin:0;font-family:var(--serif);font-weight:600;font-size:2rem;
  letter-spacing:-.01em;
}
.empresa-cta p{margin:12px 0 0;color:var(--gris);font-size:1rem}
.empresa-cta-acciones{
  margin-top:28px;display:flex;gap:26px;
  align-items:center;justify-content:center;flex-wrap:wrap;
}
.enlace-tel{
  font-family:var(--serif);font-size:1.3rem;font-weight:600;
  color:var(--tinta);text-decoration:none;
  border-bottom:2px solid transparent;transition:border-color .18s ease;
}
.enlace-tel:hover{border-color:var(--rojo)}

/* --- responsive --- */
@media (max-width:900px){
  .contacto-rejilla{grid-template-columns:1fr;gap:44px}
  .empresa-sobre{grid-template-columns:1fr;gap:28px}
  .empresa-secciones{grid-template-columns:1fr}
  .cifras-rejilla{grid-template-columns:1fr 1fr;gap:34px 20px}
  .cifra:nth-child(2){border-right:0}
  .empresa-galeria{grid-template-columns:1fr 1fr}
  .empresa-galeria figure:last-child{grid-column:1/-1;aspect-ratio:16/7}
}
@media (max-width:640px){
  .barra-superior .contenedor{height:auto;padding-top:6px;padding-bottom:6px}
  .barra-superior .mini a{margin-right:12px}
  .contacto-mapa iframe{height:280px}
  .hero-empresa{min-height:auto}
  .hero-empresa-texto{padding-top:56px;padding-bottom:56px}
  .hero-empresa-velo{
    background:linear-gradient(180deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.62) 100%);
  }
  .hero-empresa-sub{max-width:none}
  .cifras-rejilla{grid-template-columns:1fr;gap:30px}
  .cifra{border-right:0;border-bottom:1px solid #2a2a2a;padding-bottom:24px}
  .cifra:last-child{border-bottom:0;padding-bottom:0}
  .empresa-galeria{grid-template-columns:1fr}
  .empresa-galeria figure:last-child{aspect-ratio:4/3}
  .empresa-cta-acciones{flex-direction:column;gap:18px}
}


/* ============================================================
   AFINADO TIPOGRAFICO  (Archivo + Inter Tight)
   ============================================================
   Archivo es grotesca de rotulo: pide MAS peso (700, no 600) y el
   tracking mas cerrado cuanto mayor es el cuerpo. Inter Tight ya
   viene cenida: el texto corrido no se toca. Las etiquetas en
   mayusculas piden lo contrario, tracking ABIERTO.               */

body{
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3{font-family:var(--titulo);font-weight:700;letter-spacing:-.015em}
h1{letter-spacing:-.028em}

.hero-empresa h1{font-weight:700;letter-spacing:-.03em;line-height:1.04}
.hero-portada__titulo{font-family:var(--titulo);font-weight:700;letter-spacing:-.03em}
.split-card__titulo{font-family:var(--titulo);font-weight:700;letter-spacing:-.02em}
.cifra .numero{font-family:var(--titulo);font-weight:700;letter-spacing:-.02em}
.enlace-tel{font-family:var(--titulo);font-weight:700;letter-spacing:-.015em}
.marca{font-family:var(--titulo);font-weight:700;letter-spacing:.1em}

/* Referencias: cifras de ancho fijo, asi las columnas alinean */
.q-res .q-ref,.ref{font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* Etiquetas pequenas: Inter Tight, mas legible a cuerpo bajo */
.eyebrow,.lista-contacto .etiqueta,.formulario label,.cifra .pie,.boton,
.barra-superior,.migas{font-family:var(--sans)}

/* Menu principal: Archivo. Pocas palabras y muy visibles. */
.principal a{font-family:var(--titulo);font-weight:600;letter-spacing:.01em}


/* ============================================================
   PORTADA: entradilla bajo el titular
   ============================================================ */
.hero-portada__lead{
  /* El hero esta centrado: un max-width sin auto-margin lo empujaria
     a la izquierda. El "auto" es lo que lo recentra. */
  margin:14px auto 0;
  font-size:1.05rem;line-height:1.6;
  color:#cfcfcf;
  max-width:52ch;text-wrap:balance;
}


/* ============================================================
   MENU MOVIL  (hamburguesa + panel deslizante)
   ============================================================
   El CSS antiguo hacia .principal{display:none} en movil y no ponia
   NADA en su lugar: por debajo de 640px la web se quedaba literalmente
   sin navegacion. Aqui se reintroduce.                              */

.hamburguesa{
  display:none;                       /* solo aparece en movil */
  width:44px;height:44px;padding:0;
  background:none;border:0;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  /* 44px es el minimo tactil recomendado: por debajo se falla el toque */
}
.hamburguesa__barra{
  display:block;width:24px;height:2px;background:#fff;
  transition:transform .28s ease,opacity .2s ease;
}
/* Al abrir, las tres barras se cruzan en una X */
.hamburguesa.activa .hamburguesa__barra:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburguesa.activa .hamburguesa__barra:nth-child(2){opacity:0}
.hamburguesa.activa .hamburguesa__barra:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.menu-movil{
  position:fixed;top:0;right:0;z-index:60;
  width:min(82vw,340px);height:100dvh;
  background:var(--tinta);
  padding:96px 30px 40px;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
  /* 100dvh y no 100vh: en movil la barra del navegador aparece y
     desaparece, y con vh el panel se corta por abajo. */
}
.menu-movil.abierto{transform:translateX(0)}

.menu-movil__nav{display:flex;flex-direction:column}
.menu-movil__nav > a{
  font-family:var(--titulo);font-weight:700;
  font-size:1.5rem;letter-spacing:-.02em;
  color:#fff;text-decoration:none;
  padding:15px 0;border-bottom:1px solid #262626;
  transition:color .18s ease;
}
.menu-movil__nav > a:hover{color:var(--rojo)}
/* Mismo criterio que en escritorio: el apartado actual va en rojo */
.menu-movil__nav > a.activo{color:var(--rojo)}
.menu-movil__sep{height:26px}

.menu-movil__secundario{
  font-size:.95rem !important;font-weight:600 !important;
  color:var(--gris-2) !important;border-bottom:0 !important;
  padding:7px 0 !important;
}
.menu-movil__secundario:hover{color:#fff !important}
.menu-movil__idioma{
  font-size:.85rem !important;letter-spacing:.12em !important;
  color:var(--gris-2) !important;border-bottom:0 !important;
  padding:14px 0 0 !important;
}

.menu-velo{
  position:fixed;inset:0;z-index:55;
  background:rgba(0,0,0,.6);
  opacity:0;transition:opacity .28s ease;
}
.menu-velo.abierto{opacity:1}

/* --- conmutacion escritorio / movil --- */
@media (max-width:900px){
  .principal{display:none}
  .hamburguesa{display:flex}
  /* El logo deja de ir centrado: ahora comparte fila con la hamburguesa */
  .logo{margin:0}
  .cabecera .contenedor{justify-content:space-between}
}

/* Por encima de 900px el menu movil no existe, pase lo que pase */
@media (min-width:901px){
  .menu-movil,.menu-velo{display:none !important}
}

/* --- barra superior en movil --- */
@media (max-width:640px){
  /* El CSS antiguo ocultaba "Atencion al cliente" (2o enlace).
     Lo recuperamos: cabe reduciendo el hueco entre enlaces. */
  .barra-superior .mini a:nth-child(2),
  .barra-superior .mini span:nth-child(2){display:inline}
  .barra-superior{font-size:.7rem}
  .barra-superior .contenedor{height:34px}
  .barra-superior .mini a{margin-right:14px}
  .barra-superior a{margin-right:0}
}

/* Moviles muy estrechos: ahi ya no cabe, pero "Recambios" sigue
   estando dentro de la hamburguesa, asi que se puede sacrificar. */
@media (max-width:380px){
  .barra-superior .mini a:first-child{display:none}
}

@media (prefers-reduced-motion:reduce){
  .menu-movil,.menu-velo,.hamburguesa__barra{transition:none}
}

/* --- filtro por acabado (familia + portada griferia) --- */
.filtro-acabados{display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  margin:0 0 18px;padding:0}
.filtro-et{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--gris);margin-right:4px}
.chip-acabado{display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--linea);background:var(--blanco);color:var(--tinta);
  font:inherit;font-size:.8rem;padding:6px 13px;border-radius:999px;
  cursor:pointer;text-decoration:none;line-height:1;transition:border-color .12s,background .12s}
.chip-acabado:hover{border-color:var(--tinta)}
.chip-acabado.activo{background:var(--tinta);color:var(--blanco);border-color:var(--tinta)}
.chip-acabado.activo .punto{border-color:rgba(255,255,255,.5)}
.chip-acabado:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.chip-acabado .chip-n{font-size:.68rem;color:var(--gris-2);font-weight:700;
  font-variant-numeric:tabular-nums}
.chip-acabado.activo .chip-n{color:rgba(255,255,255,.6)}
.grupo-acabado[hidden]{display:none}
.sin-resultados-acabado{color:var(--gris);font-size:.9rem;margin:10px 0 60px}
.punto.grande{width:16px;height:16px;vertical-align:-2px;margin-right:9px;display:inline-block}
.fam-tag{margin:0;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--gris-2)}

/* --- doble filtro (acabado + montaje): barras apiladas en vertical --- */
.filtros-catalogo{display:flex;flex-direction:column;gap:0;
  margin:0 0 24px;padding:0}
.filtros-catalogo .filtro-acabados{margin:0;padding:5px 0;border-bottom:none}
.filtros-catalogo .filtro-acabados:first-child{padding-top:0}
.filtros-catalogo .filtro-acabados:last-child{padding-bottom:0}
/* la etiqueta ACABADO/MONTAJE con ancho fijo para que los chips se alineen */
.filtros-catalogo .filtro-et{min-width:78px}

/* chip de filtro con 0 resultados en la combinación actual */
.chip-acabado.vacio{opacity:.4}
.chip-acabado.vacio .chip-n{color:var(--gris-2)}

/* ============================================================ */
/*  ZONA CLIENTE (profesional)                                  */
/* ============================================================ */

/* Iconos usuario/cesta en la cabecera */
.principal .icono-nav{display:inline-flex;align-items:center;justify-content:center;
  position:relative;color:var(--blanco);padding:6px;border-bottom:2px solid transparent}
.principal .icono-nav:hover{color:#fff;border-color:var(--rojo)}
.cesta-badge{position:absolute;top:-2px;right:-6px;background:var(--rojo);color:#fff;
  font-size:.62rem;font-weight:800;line-height:1;min-width:16px;height:16px;padding:0 4px;
  border-radius:9px;display:flex;align-items:center;justify-content:center}

/* --- Cards de login / activar / recuperar --- */
.cli-auth{padding:56px 24px 72px;display:flex;justify-content:center}
.cli-card{width:100%;max-width:420px;background:var(--blanco);border:1px solid var(--linea);
  border-radius:8px;padding:36px 32px 32px;box-shadow:0 2px 14px rgba(0,0,0,.04)}
.cli-card h1{font-family:var(--titulo);font-weight:700;font-size:1.6rem;margin:0 0 6px}
.cli-sub{color:var(--gris);margin:0 0 22px;font-size:.95rem}
.cli-form{display:flex;flex-direction:column;gap:16px}
.cli-form label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;font-weight:600}
.cli-form input{padding:11px 13px;border:1px solid var(--linea);border-radius:5px;
  font:inherit;font-size:.95rem}
.cli-form input:focus{outline:2px solid var(--acento);outline-offset:-1px}
.cli-link{margin:18px 0 0;text-align:center;font-size:.88rem}
.cli-link a{color:var(--rojo);font-weight:600}
.cli-link a:hover{text-decoration:underline}

.cli-alta{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--linea);
  color:var(--gris);font-size:.86rem;line-height:1.5;text-align:center}
.cli-alta a{color:var(--rojo);font-weight:600;white-space:nowrap}
.cli-alta a:hover{text-decoration:underline}

/* Botones */
.cli-btn{display:inline-block;background:var(--rojo);color:#fff;border:0;cursor:pointer;
  font:inherit;font-weight:700;font-size:.95rem;padding:12px 22px;border-radius:5px;text-align:center}
.cli-btn:hover{background:var(--rojo-osc)}
/* Un .cli-btn que además sea enlace dentro de .cli-link debe conservar su
   texto blanco: la regla ".cli-link a{color:rojo}" lo pisaba y quedaba
   rojo sobre rojo (invisible). */
.cli-link a.cli-btn,a.cli-btn{color:#fff}
.cli-link a.cli-btn:hover{text-decoration:none}
.cli-btn.secundario{background:var(--tinta)}
.cli-btn.secundario:hover{background:#000}
.cli-btn.grande{width:100%;padding:14px;font-size:1rem;margin-top:6px}
.cli-mini-btn{background:none;border:1px solid var(--linea);color:var(--gris);cursor:pointer;
  font:inherit;font-size:.78rem;padding:5px 10px;border-radius:4px}
.cli-mini-btn:hover{border-color:var(--rojo);color:var(--rojo)}

/* Alertas */
.cli-alerta{padding:11px 14px;border-radius:5px;font-size:.9rem;margin:0 0 18px}
.cli-alerta.error{background:#fdeaec;color:#a8071f;border:1px solid #f3c2c9}
.cli-alerta.ok{background:#eafaef;color:#0f6b2e;border:1px solid #bfe6ca}

/* --- Panel del cliente --- */
.cli-panel{padding:40px 24px 72px}
.cli-panel-head{display:flex;align-items:flex-end;justify-content:space-between;
  margin:0 0 30px;gap:20px;flex-wrap:wrap}
.cli-kicker{margin:0;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acento);font-weight:800}
.cli-panel-head h1{font-family:var(--titulo);font-weight:700;font-size:2.1rem;margin:4px 0 0;
  letter-spacing:-.02em}
.cli-salir{font-size:.85rem;font-weight:600;color:var(--gris);border:1px solid var(--linea);
  padding:8px 16px;border-radius:5px}
.cli-salir:hover{border-color:var(--rojo);color:var(--rojo)}

.cli-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cli-bloque{background:var(--blanco);border:1px solid var(--linea);border-radius:8px;padding:24px}
.cli-bloque h2{font-family:var(--titulo);font-weight:600;font-size:1.15rem;margin:0 0 16px}
.cli-bloque-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 16px}
.cli-bloque-head h2{margin:0}
.cli-bloque-head a{font-size:.85rem;color:var(--rojo);font-weight:600}
.cli-datos{grid-column:1 / -1}
.cli-datos dl{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin:0;font-size:.92rem}
.cli-datos dt{color:var(--gris);font-weight:600}
.cli-datos dd{margin:0}
.cli-vacio{color:var(--gris);font-size:.92rem;margin:0}

.cli-ofertas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.cli-oferta{border:1px solid var(--linea);border-left:3px solid var(--rojo);
  border-radius:5px;padding:14px 16px}
.cli-oferta-tit{margin:0;font-weight:700}
.cli-oferta-desc{margin:6px 0 0;font-size:.9rem;color:var(--gris)}
.cli-oferta-ref{display:inline-block;margin-top:8px;font-size:.82rem;font-weight:700;color:var(--rojo)}
.cli-oferta-fecha{margin:6px 0 0;font-size:.78rem;color:var(--gris-2)}

.cli-pedidos{list-style:none;margin:0;padding:0}
.cli-pedido-row a{display:flex;align-items:center;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--claro-2);font-size:.9rem}
.cli-pedido-row:last-child a{border-bottom:0}
.cli-pedido-cod{font-weight:700}
.cli-pedido-fecha{margin-left:auto;color:var(--gris-2);font-size:.82rem}

/* Estados */
.cli-pedido-est{display:inline-block;font-size:.72rem;font-weight:700;padding:3px 9px;
  border-radius:20px;text-transform:uppercase;letter-spacing:.03em}
.estado-pendiente{background:#fff4e0;color:#94620a}
.estado-en_proceso{background:#e5f0ff;color:#1257b8}
.estado-servido{background:#eafaef;color:#0f6b2e}
.estado-cancelado{background:#f1f1f1;color:#777}

/* --- Tablas del cliente --- */
.cli-tabla{width:100%;border-collapse:collapse;font-size:.92rem;margin:18px 0}
.cli-tabla th{text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--gris);border-bottom:2px solid var(--linea);padding:0 12px 8px}
.cli-tabla td{padding:12px;border-bottom:1px solid var(--claro-2)}
.cli-tabla .num{text-align:right}
.cli-tabla code{background:var(--claro);padding:2px 6px;border-radius:3px;font-size:.85rem}

/* --- Cesta --- */
.cli-cant{width:70px;padding:7px 9px;border:1px solid var(--linea);border-radius:4px;
  font:inherit;text-align:center}
.cli-cesta-acciones{display:flex;gap:12px;margin:8px 0 24px;flex-wrap:wrap}
.cli-obs{display:flex;flex-direction:column;gap:6px;font-size:.85rem;font-weight:600;margin:0 0 20px}
.cli-obs textarea{padding:11px 13px;border:1px solid var(--linea);border-radius:5px;font:inherit;
  font-size:.95rem;resize:vertical}
.cli-obs textarea:focus{outline:2px solid var(--acento);outline-offset:-1px}
.cli-ok-box{background:#eafaef;border:1px solid #bfe6ca;border-radius:8px;padding:26px}
.cli-ok-tit{font-weight:700;font-size:1.1rem;margin:0 0 6px;color:#0f6b2e}

.cli-obs-box{margin-top:22px;background:var(--claro);border-radius:6px;padding:18px 20px}
.cli-obs-box h2{font-family:var(--titulo);font-weight:600;font-size:1rem;margin:0 0 8px}
.cli-obs-box p{margin:0;font-size:.92rem}
.cli-pedido-detalle-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* --- Botón añadir en ficha de producto --- */
.ficha-pedido{display:flex;gap:10px;align-items:center;margin:18px 0 8px}
.ficha-cant{width:72px;padding:9px 10px;border:1px solid var(--linea);border-radius:5px;
  font:inherit;text-align:center}
.ficha-login-aviso{margin:18px 0 8px;font-size:.9rem}
.ficha-login-aviso a{color:var(--rojo);font-weight:600}
.ficha-login-aviso a:hover{text-decoration:underline}

/* Responsive */
@media (max-width:760px){
  .cli-grid{grid-template-columns:1fr}
  .cli-datos{grid-column:auto}
}

/* ============================================================ */
/*  AVISO DE COOKIES + MAPA BLOQUEADO + PÁGINA LEGAL            */
/* ============================================================ */

/* Barra inferior de cookies */
.cookie-barra{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--tinta);color:#f0f0f0;border-top:2px solid var(--rojo);
  box-shadow:0 -4px 20px rgba(0,0,0,.25)}
.cookie-barra__caja{display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:16px 24px;flex-wrap:wrap}
.cookie-barra__texto{margin:0;font-size:.88rem;line-height:1.5;flex:1 1 340px}
.cookie-barra__texto a{color:#fff;text-decoration:underline;font-weight:600}
.cookie-barra__botones{display:flex;gap:10px;flex:none}
.cookie-btn{cursor:pointer;font:inherit;font-weight:700;font-size:.85rem;
  padding:10px 20px;border-radius:5px;border:1px solid transparent;white-space:nowrap}
.cookie-btn--aceptar{background:var(--rojo);color:#fff}
.cookie-btn--aceptar:hover{background:var(--rojo-osc)}
.cookie-btn--rechazar{background:transparent;color:#f0f0f0;border-color:#555}
.cookie-btn--rechazar:hover{border-color:#fff;color:#fff}

@media (max-width:620px){
  .cookie-barra__caja{padding:14px 18px}
  .cookie-barra__botones{width:100%}
  .cookie-btn{flex:1}
}

/* Tapa del mapa mientras no hay consentimiento */
.contacto-mapa{position:relative}
.mapa-tapa{position:absolute;inset:0;background:var(--claro);line-height:1.5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:24px;border:1px solid var(--linea);z-index:2}
/* Cuando el JS marca la tapa como oculta, debe desaparecer de verdad. */
.mapa-tapa[hidden]{display:none !important}
.mapa-tapa__texto{margin:0;color:var(--gris);font-size:.95rem;max-width:36ch;line-height:1.5}
.mapa-tapa__enlace{display:inline-block;background:var(--rojo);color:#fff;line-height:1.4;
  font-weight:700;font-size:.9rem;padding:11px 22px;border-radius:5px}
.mapa-tapa__enlace:hover{background:var(--rojo-osc)}
/* El iframe del mapa, una vez cargado, ocupa toda la altura. */
.contacto-mapa iframe{display:block;width:100%;min-height:380px}

/* Página legal (cookies) */
.pagina-legal{padding:48px 24px 72px;max-width:820px}
.pagina-legal h1{font-family:var(--titulo);font-weight:700;font-size:2.1rem;
  margin:0 0 22px;letter-spacing:-.02em}
.pagina-legal h2{font-family:var(--titulo);font-weight:600;font-size:1.25rem;
  margin:34px 0 12px}
.pagina-legal p{margin:0 0 14px;line-height:1.6}
.pagina-legal a{color:var(--rojo);font-weight:600}
.pagina-legal a:hover{text-decoration:underline}
.cookie-tabla{width:100%;border-collapse:collapse;margin:16px 0 8px;font-size:.9rem}
.cookie-tabla th{text-align:left;background:var(--claro);padding:10px 12px;
  border:1px solid var(--linea);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--gris)}
.cookie-tabla td{padding:10px 12px;border:1px solid var(--linea);vertical-align:top}
.cookie-tabla code{background:var(--claro);padding:2px 6px;border-radius:3px;font-size:.85rem}
.cookie-fecha{color:var(--gris-2);font-size:.82rem;margin-top:28px}
.pie-sep{margin:0 8px;color:var(--gris-2)}

/* ============================================================ */
/*  BOTÓN AÑADIR AL PEDIDO EN TABLAS DE FONTANERÍA              */
/* ============================================================ */
.tabla-login-aviso{margin:0 0 12px;font-size:.88rem}
.tabla-login-aviso a{color:var(--rojo);font-weight:600}
.tabla-login-aviso a:hover{text-decoration:underline}

.tabla-refs .col-pedir{width:1%;white-space:nowrap;text-align:right}
.fila-pedido{display:inline-flex;gap:6px;align-items:center;justify-content:flex-end;margin:0}
.fila-cant{width:56px;padding:6px 8px;border:1px solid var(--linea);border-radius:4px;
  font:inherit;font-size:.88rem;text-align:center}
.fila-cant:focus{outline:2px solid var(--acento);outline-offset:-1px}
.fila-btn{background:var(--rojo);color:#fff;border:0;cursor:pointer;
  width:32px;height:32px;border-radius:4px;font-size:1.2rem;font-weight:700;
  line-height:1;display:inline-flex;align-items:center;justify-content:center}
.fila-btn:hover{background:var(--rojo-osc)}

@media (max-width:560px){
  .fila-cant{width:46px}
  .tabla-refs.con-pedido th,.tabla-refs.con-pedido td{padding-left:8px;padding-right:8px}
}

/* Enlace "cambiar contraseña" en el bloque de datos del panel */
.cli-datos-accion{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--claro-2)}
.cli-datos-accion a{color:var(--rojo);font-weight:600;font-size:.9rem}
.cli-datos-accion a:hover{text-decoration:underline}

/* --- Listas en páginas legales (garantía, condiciones de venta) --- */
.pagina-legal ol,
.pagina-legal ul{margin:0 0 18px;padding-left:1.35rem;line-height:1.6}
.pagina-legal li{margin:0 0 8px}
.pagina-legal ol{list-style:decimal}
.pagina-legal ul{list-style:disc}