/* Proveedora de Pinturas — hoja de estilo
   Paleta tomada del PDF de marca: #8A004E morado, #E87A18 naranja */

:root {
  --morado: #8A004E;
  --morado-osc: #6B003C;
  --morado-prof: #4A0029;
  --morado-cl: #F7E9F0;
  --naranja: #E87A18;
  --naranja-osc: #C4620C;
  --naranja-cl: #FDF1E3;

  --tinta: #1C1518;
  --tinta-media: #56484E;
  --tinta-suave: #877A80;
  --linea: #E9E1E5;
  --fondo: #FAF7F8;
  --papel: #FFFFFF;
  --verde-wa: #25D366;

  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --texto: "Barlow", -apple-system, "Segoe UI", sans-serif;

  --ancho: 1180px;

  /* esquinas generosas */
  --r-xl: 28px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --r-pill: 999px;

  /* sombras en capas, para dar profundidad real */
  --s-1: 0 1px 2px rgba(28,21,24,.05), 0 2px 8px rgba(28,21,24,.04);
  --s-2: 0 2px 4px rgba(28,21,24,.05), 0 8px 24px rgba(28,21,24,.07);
  --s-3: 0 4px 8px rgba(28,21,24,.06), 0 16px 40px rgba(28,21,24,.11);
  --s-4: 0 8px 16px rgba(28,21,24,.08), 0 28px 64px rgba(28,21,24,.16);
  --s-morado: 0 8px 28px rgba(138,0,78,.28);
  --s-naranja: 0 8px 28px rgba(232,122,24,.32);

  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--morado); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--naranja-osc); }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; border-radius: 4px; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 1.25rem; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 6.4vw, 4.3rem); text-transform: uppercase; letter-spacing: -.005em; }
h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); text-transform: uppercase; }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1rem; max-width: 68ch; }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--morado); color: #fff; padding: .8rem 1.3rem;
  border-radius: 0 0 var(--r-md) 0;
}
.saltar:focus { left: 0; top: 0; color: #fff; }

/* ---------------------------------------------------- encabezado */

.sitio-cabecera {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(233,225,229,.9);
}
.cabecera-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: .8rem 1.25rem;
  max-width: var(--ancho); margin: 0 auto;
}
.marca { display: flex; align-items: center; flex-shrink: 0; }
.marca img { height: 46px; width: auto; }

.menu-boton {
  display: none; background: var(--papel); border: 1.5px solid var(--linea);
  border-radius: var(--r-md); padding: .5rem .8rem; cursor: pointer;
  font-family: var(--display); font-size: 1rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--tinta); box-shadow: var(--s-1);
}

.menu { display: flex; align-items: center; gap: .25rem; }
.menu a {
  font-family: var(--display); font-size: 1.12rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .045em;
  color: var(--tinta); text-decoration: none;
  padding: .5rem .85rem; border-radius: var(--r-pill);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.menu a:hover { background: var(--morado-cl); color: var(--morado); }
.menu a[aria-current="page"] { color: var(--morado); background: var(--morado-cl); }
.menu .tel {
  margin-left: .5rem; background: var(--morado); color: #fff;
  padding: .55rem 1.2rem; box-shadow: var(--s-morado);
}
.menu .tel:hover { background: var(--morado-osc); color: #fff; transform: translateY(-1px); }

@media (max-width: 940px) {
  .menu-boton { display: block; }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: .15rem;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--linea);
    padding: .6rem 1.25rem 1.1rem; box-shadow: var(--s-2);
  }
  .menu.abierto { display: flex; }
  .menu a { padding: .8rem 1rem; border-radius: var(--r-md); }
  .menu .tel { margin: .5rem 0 0; text-align: center; }
}

/* ---------------------------------------------------- portada */

.portada {
  position: relative; overflow: hidden;
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.5rem, 8vw, 6rem);
  background:
    radial-gradient(120% 90% at 8% 0%, #A50C60 0%, transparent 55%),
    radial-gradient(100% 110% at 100% 100%, #C4620C 0%, transparent 48%),
    linear-gradient(145deg, var(--morado) 0%, var(--morado-osc) 52%, var(--morado-prof) 100%);
  color: #fff;
}
.portada::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--portada-imagen);
  background-size: cover; background-position: center;
  opacity: .16; mix-blend-mode: luminosity;
}
.portada .contenedor { position: relative; z-index: 2; }

.portada-rejilla {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 950px) {
  .portada-rejilla { grid-template-columns: 1.05fr .95fr; }
}

.portada h1 { color: #fff; }
.lema {
  display: inline-block;
  font-family: var(--display); font-size: .92rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .2em;
  color: #FFD9AE; margin-bottom: 1rem;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.2);
  padding: .34rem 1rem; border-radius: var(--r-pill);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.portada p.entrada-texto {
  font-size: 1.16rem; color: #F6E6EF; margin: 1.2rem 0 0; max-width: 36rem;
}

.sello {
  display: inline-flex; align-items: center; gap: .8rem; margin-top: 1.8rem;
  padding: .8rem 1.4rem; border-radius: var(--r-lg);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.sello b { font-family: var(--display); font-size: 2.5rem; line-height: 1; color: #fff; }
.sello span { font-size: .96rem; color: #F2DEE9; line-height: 1.3; max-width: 8rem; }

.botonera { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

.boton {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--display); font-size: 1.15rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  padding: .8rem 1.8rem; border-radius: var(--r-pill);
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.boton:hover { transform: translateY(-2px); }
.boton-naranja { background: var(--naranja); color: #fff; box-shadow: var(--s-naranja); }
.boton-naranja:hover { background: var(--naranja-osc); color: #fff; }
.boton-vidrio {
  background: rgba(255,255,255,.14); color: #fff;
  border-color: rgba(255,255,255,.35);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.boton-vidrio:hover { background: rgba(255,255,255,.24); color: #fff; }
.boton-morado { background: var(--morado); color: #fff; box-shadow: var(--s-morado); }
.boton-morado:hover { background: var(--morado-osc); color: #fff; }
.boton-wa { background: var(--verde-wa); color: #fff; box-shadow: 0 8px 28px rgba(37,211,102,.35); }
.boton-wa:hover { background: #1EB855; color: #fff; }

/* mosaico de producto flotando sobre la portada */
.mosaico {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
}
.mosaico-pieza {
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--r-lg);
  padding: 1rem .9rem .9rem;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 10px 40px rgba(0,0,0,.22);
  display: flex; flex-direction: column; gap: .55rem;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.mosaico-pieza:hover { transform: translateY(-5px); box-shadow: 0 18px 56px rgba(0,0,0,.3); }
.mosaico-pieza:nth-child(odd) { transform: translateY(-14px); }
.mosaico-pieza:nth-child(odd):hover { transform: translateY(-20px); }
.mosaico-pieza img { border-radius: var(--r-md); aspect-ratio: 1; object-fit: contain; background: #fff; }
.mosaico-pieza .n {
  font-family: var(--display); font-size: .95rem; font-weight: 600;
  color: var(--tinta); line-height: 1.15; text-transform: uppercase; letter-spacing: .02em;
}
.mosaico-pieza .m {
  font-family: var(--display); font-size: .74rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--morado);
}

/* ---------------------------------------------------- secciones */

.seccion { padding: clamp(3rem, 6.5vw, 5rem) 0; }
.seccion-gris { background: var(--fondo); }

.titulo-bloque { margin-bottom: 2.4rem; max-width: 46rem; }
.antetitulo {
  display: inline-block;
  font-family: var(--display); font-size: .82rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--naranja-osc); background: var(--naranja-cl);
  padding: .28rem .85rem; border-radius: var(--r-pill); margin-bottom: .8rem;
}
.titulo-bloque p { color: var(--tinta-media); margin-top: .8rem; }

.rejilla { display: grid; gap: 1.5rem; }
.rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.tarjeta {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--r-lg); padding: 1.7rem 1.6rem;
  display: flex; flex-direction: column; gap: .6rem;
  box-shadow: var(--s-1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.tarjeta:hover { transform: translateY(-3px); box-shadow: var(--s-3); }
.tarjeta .num {
  font-family: var(--display); font-size: 2.6rem; font-weight: 600;
  line-height: 1; margin-bottom: .1rem;
  background: linear-gradient(135deg, var(--morado), var(--naranja));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--morado);
}
.tarjeta p { color: var(--tinta-media); font-size: .97rem; margin: 0; }

/* tarjeta de categoría con imagen */
.categoria {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  border: 1px solid var(--linea); background: var(--papel);
  box-shadow: var(--s-2); text-decoration: none; color: inherit;
  display: flex; flex-direction: column; min-height: 300px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.categoria:hover { transform: translateY(-5px); box-shadow: var(--s-4); color: inherit; }
.categoria .imagen { position: absolute; inset: 0; }
.categoria .imagen img { width: 100%; height: 100%; object-fit: cover; }
.categoria .velo {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(28,10,20,.93) 0%, rgba(28,10,20,.6) 42%, rgba(28,10,20,.12) 100%);
}
.categoria .cuerpo {
  position: relative; z-index: 2; margin-top: auto;
  padding: 1.4rem 1.4rem 1.5rem; color: #fff;
  display: flex; flex-direction: column; gap: .45rem;
}
.categoria h3 { color: #fff; font-size: 1.45rem; text-transform: uppercase; }
.categoria p { color: rgba(255,255,255,.86); font-size: .93rem; margin: 0; }
.categoria .flecha {
  font-family: var(--display); font-size: .88rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: #FFCE94;
  margin-top: .3rem;
}
.categoria .cinta-color { position: absolute; top: 0; left: 0; right: 0; height: 5px; z-index: 3; }

/* ---------------------------------------------------- productos */

.filtros {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.2rem;
}
.filtro {
  font-family: var(--display); font-size: 1.02rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .05em;
  padding: .5rem 1.2rem; border: 1.5px solid var(--linea);
  border-radius: var(--r-pill); background: var(--papel); color: var(--tinta-media);
  cursor: pointer; text-decoration: none; box-shadow: var(--s-1);
  transition: all .2s var(--ease);
}
.filtro:hover { border-color: var(--morado); color: var(--morado); transform: translateY(-1px); }
.filtro[aria-pressed="true"] {
  background: var(--morado); border-color: var(--morado); color: #fff;
  box-shadow: var(--s-morado);
}

.productos { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

.producto {
  border: 1px solid var(--linea); border-radius: var(--r-lg);
  background: var(--papel); display: flex; flex-direction: column;
  overflow: hidden; box-shadow: var(--s-1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.producto:hover { transform: translateY(-4px); box-shadow: var(--s-3); }
.producto .cinta { height: 5px; }
.producto .interior { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.producto .linea-cat {
  font-family: var(--display); font-size: .76rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .13em; color: var(--tinta-suave);
}
.producto h3 { font-size: 1.26rem; }
.producto .marca-prod {
  font-family: var(--display); font-size: .86rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--morado);
}
.producto .desc { font-size: .95rem; color: var(--tinta-media); margin: 0; }
.producto .foto {
  aspect-ratio: 1; object-fit: contain; width: 100%;
  background: linear-gradient(160deg, #FCFAFB 0%, #F3EDF0 100%);
  border-bottom: 1px solid var(--linea); padding: .7rem;
}

.especificaciones { margin: .3rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .3rem; font-size: .89rem; }
.especificaciones li { display: flex; gap: .5rem; }
.especificaciones .et {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--tinta-suave); min-width: 7.6rem; flex-shrink: 0;
  font-size: .82rem; padding-top: .09rem;
}
.especificaciones .va { color: var(--tinta-media); }

.descargas { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: auto; padding-top: .9rem; }
.descargas a {
  font-family: var(--display); font-size: .84rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
  padding: .35rem .85rem; border: 1.5px solid var(--linea);
  border-radius: var(--r-pill); text-decoration: none; color: var(--tinta-media);
}
.descargas a:hover { border-color: var(--naranja); color: var(--naranja-osc); }

.marcador-destacado {
  display: inline-block; font-family: var(--display); font-size: .72rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  background: linear-gradient(135deg, var(--naranja), #F09B4A); color: #fff;
  padding: .18rem .65rem; border-radius: var(--r-pill); align-self: flex-start;
  box-shadow: 0 2px 8px rgba(232,122,24,.3);
}

.aviso-catalogo {
  background: var(--morado-cl); border: 1px solid rgba(138,0,78,.15);
  border-left: 4px solid var(--morado);
  padding: 1.2rem 1.4rem; margin-bottom: 2rem; border-radius: var(--r-md);
}
.aviso-catalogo p { margin: 0; color: var(--tinta-media); font-size: .97rem; }

/* ---------------------------------------------------- marcas */

.marcas { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); }
.marca-item {
  border: 1px solid var(--linea); border-radius: var(--r-lg);
  padding: 1.5rem 1.5rem; background: var(--papel); box-shadow: var(--s-1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.marca-item:hover { transform: translateY(-3px); box-shadow: var(--s-3); }
.marca-item h3 { color: var(--morado); margin-bottom: .35rem; }
.marca-item p { font-size: .95rem; color: var(--tinta-media); margin: 0; }
.iso {
  display: inline-block; font-family: var(--display); font-size: .74rem;
  font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  background: var(--morado-cl); color: var(--morado);
  padding: .16rem .65rem; border-radius: var(--r-pill); margin-top: .7rem;
}

/* ---------------------------------------------------- contacto */

.contacto-rejilla { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.datos-caja {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--r-lg); padding: .5rem 1.4rem; box-shadow: var(--s-1);
}
.dato { display: flex; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--linea); }
.dato:last-child { border-bottom: none; }
.dato .icono {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--morado-cl), #FBEFF5); color: var(--morado);
  display: grid; place-items: center; font-size: 1.2rem;
}
.dato .et {
  font-family: var(--display); font-size: .82rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; color: var(--tinta-suave);
}
.dato .va { font-size: 1.06rem; }
.dato .va a { text-decoration: none; }

.mapa {
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--linea);
  box-shadow: var(--s-1); margin-top: 1.4rem; background: var(--fondo);
}
.mapa iframe { display: block; width: 100%; height: 320px; border: 0; }

.formulario { display: flex; flex-direction: column; gap: 1.05rem; }
.campo { display: flex; flex-direction: column; gap: .35rem; }
.campo label {
  font-family: var(--display); font-size: .92rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-media);
}
.campo input, .campo textarea, .campo select {
  font-family: var(--texto); font-size: 1rem; padding: .8rem .95rem;
  border: 1.5px solid var(--linea); border-radius: var(--r-md);
  background: var(--papel); color: var(--tinta);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
  border-color: var(--morado); outline: none;
  box-shadow: 0 0 0 4px var(--morado-cl);
}
.campo textarea { resize: vertical; min-height: 7.5rem; }
.nota-form { font-size: .88rem; color: var(--tinta-suave); margin: 0; }

/* ---------------------------------------------------- blog */

.articulos { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.articulo {
  border: 1px solid var(--linea); border-radius: var(--r-lg);
  overflow: hidden; background: var(--papel); display: flex; flex-direction: column;
  box-shadow: var(--s-1); transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.articulo:hover { transform: translateY(-4px); box-shadow: var(--s-3); }
.articulo .cuerpo { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.articulo .fecha {
  font-family: var(--display); font-size: .8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .11em; color: var(--tinta-suave);
}
.articulo h3 a { color: var(--tinta); text-decoration: none; }
.articulo h3 a:hover { color: var(--morado); }
.articulo p { font-size: .95rem; color: var(--tinta-media); margin: 0; }
.articulo .leer { margin-top: auto; padding-top: .8rem; }
.articulo .leer a {
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; font-size: .92rem; text-decoration: none; color: var(--naranja-osc);
}

.entrada { max-width: 44rem; margin: 0 auto; }
.entrada h2 { font-size: 1.7rem; margin: 2rem 0 .8rem; }
.entrada h3 { margin: 1.5rem 0 .5rem; }
.entrada ul, .entrada ol { color: var(--tinta-media); padding-left: 1.3rem; }
.entrada li { margin-bottom: .4rem; }
.volver {
  display: inline-block; margin-bottom: 1.5rem; font-family: var(--display);
  text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
  text-decoration: none; font-size: .95rem;
}

/* ---------------------------------------------------- cta y pie */

.cta {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  background:
    radial-gradient(90% 120% at 12% 0%, #A50C60 0%, transparent 60%),
    linear-gradient(140deg, var(--morado) 0%, var(--morado-prof) 100%);
  color: #fff;
}
.cta .contenedor { position: relative; z-index: 2; }
.cta h2 { color: #fff; }
.cta p { color: #F2DCE8; margin: .9rem auto 0; max-width: 36rem; }
.cta .botonera { justify-content: center; }

.pie { background: #24101A; color: #D9CBD2; padding: 3.2rem 0 1.6rem; font-size: .95rem; }
.pie-rejilla { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pie h4 {
  font-family: var(--display); font-size: 1.05rem; text-transform: uppercase;
  letter-spacing: .1em; color: #fff; margin-bottom: .8rem;
}
.pie a { color: #E6D7DE; text-decoration: none; }
.pie a:hover { color: var(--naranja); }
.pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.pie .logo-pie { height: 46px; width: auto; margin-bottom: 1rem; }
.pie-legal {
  margin-top: 2.4rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-size: .87rem; color: #A9959F;
}

.pendiente {
  font-family: var(--display); font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  background: rgba(232,122,24,.16); color: var(--naranja-osc);
  padding: .16rem .6rem; border-radius: var(--r-pill);
}

/* ---------------------------------------------------- WhatsApp flotante */

.wa-flotante {
  position: fixed; right: 1.15rem; bottom: 1.15rem; z-index: 90;
  display: flex; align-items: center; gap: .6rem;
  background: var(--verde-wa); color: #fff;
  padding: .8rem 1.3rem .8rem 1rem; border-radius: var(--r-pill);
  text-decoration: none; font-family: var(--display); font-weight: 600;
  font-size: 1.05rem; text-transform: uppercase; letter-spacing: .05em;
  box-shadow: 0 6px 16px rgba(37,211,102,.32), 0 16px 44px rgba(0,0,0,.18);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.wa-flotante:hover {
  color: #fff; transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 24px rgba(37,211,102,.4), 0 22px 60px rgba(0,0,0,.22);
}
.wa-flotante svg { width: 26px; height: 26px; flex-shrink: 0; fill: currentColor; }
.wa-flotante .etiqueta { white-space: nowrap; }

@media (max-width: 620px) {
  .wa-flotante { padding: .85rem; right: .9rem; bottom: .9rem; }
  .wa-flotante .etiqueta { display: none; }
  .wa-flotante svg { width: 30px; height: 30px; }
}

/* pulso suave para que se note sin ser molesto */
@media (prefers-reduced-motion: no-preference) {
  .wa-flotante::after {
    content: ""; position: absolute; inset: 0; border-radius: var(--r-pill);
    box-shadow: 0 0 0 0 rgba(37,211,102,.55);
    animation: pulso-wa 3.2s var(--ease) infinite;
  }
  @keyframes pulso-wa {
    0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
    55%  { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
    100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
  }
}

/* imagen de cabecera dentro de un artículo */
.entrada-portada {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: var(--r-lg); margin: 0 0 1.8rem;
  box-shadow: var(--s-2);
}

/* ---------------------------------------------------- portada: galería */

.hero-galeria { display: flex; flex-direction: column; gap: 1rem; }
.hero-pieza {
  margin: 0; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 12px 44px rgba(0,0,0,.3);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.hero-pieza img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.hero-pieza:nth-child(1) { transform: translateX(-6%) scale(1.04); z-index: 3; }
.hero-pieza:nth-child(2) { transform: translateX(4%); z-index: 2; }
.hero-pieza:nth-child(3) { transform: translateX(-2%); z-index: 1; }
.hero-pieza:hover { transform: translateX(0) scale(1.06); box-shadow: 0 18px 60px rgba(0,0,0,.4); }

@media (max-width: 949px) {
  .hero-galeria { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
  .hero-pieza, .hero-pieza:hover { transform: none; }
  .hero-pieza:first-child { grid-column: 1 / -1; }
}

/* ---------------------------------------------------- barra de datos */

.barra-datos {
  background: var(--tinta); color: #fff;
  padding: 1.4rem 0;
}
.barra-rejilla {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  text-align: center;
}
.dato-barra { display: flex; flex-direction: column; gap: .1rem; }
.dato-barra .v {
  font-family: var(--display); font-size: 1.8rem; font-weight: 600;
  line-height: 1.1; color: var(--naranja);
}
.dato-barra .k {
  font-family: var(--display); font-size: .82rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; color: #C9B9C1;
}

/* ---------------------------------------------------- dos columnas */

.dos-columnas {
  display: grid; gap: clamp(1.8rem, 4vw, 3rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 900px) { .dos-columnas { grid-template-columns: .9fr 1.1fr; } }
.figura { margin: 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--s-3); }
.figura img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* ---------------------------------------------------- logos de marca */

.logos-marca {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1.2rem; margin-top: 2.2rem; padding-top: 2rem;
  border-top: 1px solid var(--linea);
}
.logo-marca {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--r-md); padding: 1rem 1.6rem;
  display: grid; place-items: center; min-width: 190px; min-height: 96px;
  box-shadow: var(--s-1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.logo-marca:hover { transform: translateY(-3px); box-shadow: var(--s-2); }
.logo-marca img { max-height: 58px; width: auto; object-fit: contain; }

/* ═══════════════════════════════════════════════ fondo fijo al hacer scroll
   El contenido pasa por encima mientras la imagen se queda quieta.
   Se desactiva en móvil: ahí background-attachment:fixed da saltos y en iOS
   directamente no funciona bien. También se desactiva si el visitante
   pidió movimiento reducido. */

.portada::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--portada-imagen);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  opacity: .2;
  mix-blend-mode: luminosity;
  pointer-events: none;
}

.banda-fija {
  position: relative;
  min-height: 340px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(3rem, 7vw, 5rem) 0;
  background-image: var(--banda-imagen);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #fff;
  overflow: hidden;
}
.banda-fija::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(74,0,41,.9) 0%, rgba(138,0,78,.78) 55%, rgba(28,10,20,.9) 100%);
}
.banda-fija .contenedor { position: relative; z-index: 2; }
.banda-fija h2 { color: #fff; }
.banda-fija p { color: #F2DCE8; margin: .9rem auto 0; max-width: 38rem; }
.banda-fija .botonera { justify-content: center; }

.cta {
  background-image: var(--cta-imagen);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(138,0,78,.94) 0%, rgba(74,0,41,.96) 100%);
}

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .portada::before,
  .banda-fija,
  .cta {
    background-attachment: scroll;
  }
}

/* iOS ignora background-attachment:fixed y lo renderiza mal;
   se le devuelve el comportamiento normal. */
@supports (-webkit-touch-callout: none) {
  .portada::before,
  .banda-fija,
  .cta {
    background-attachment: scroll;
  }
}

/* ═══════════════════════════════════════════════ carrusel de productos */

.carrusel { position: relative; }

.carrusel-pista {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  /* proximity y no mandatory: con mandatory el navegador re-alinea la pista
     cada vez que una imagen lazy cambia el layout, y el carrusel saltaba al
     final en cuanto se tocaba. */
  scroll-snap-type: x proximity;
  /* el desplazamiento suave lo pide el JS en cada llamada; dejarlo en CSS
     afecta tambien a la restauracion de posicion y a los saltos por ancla. */
  padding: .3rem .2rem 1rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carrusel-pista::-webkit-scrollbar { display: none; }

.carrusel-item {
  flex: 0 0 auto;
  width: 232px;
  scroll-snap-align: start;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--r-lg);
  padding: .95rem .9rem 1.05rem;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 10px 40px rgba(0,0,0,.24);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.carrusel-item:hover { transform: translateY(-4px); box-shadow: 0 18px 56px rgba(0,0,0,.32); }
.carrusel-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: var(--r-md);
  background: #fff;
}
.carrusel-item .m {
  font-family: var(--display); font-size: .74rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--morado);
}
.carrusel-item .n {
  font-family: var(--display); font-size: .97rem; font-weight: 600;
  line-height: 1.15; text-transform: uppercase; letter-spacing: .01em;
  color: var(--tinta);
}
.carrusel-item .l {
  font-family: var(--display); font-size: .7rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave);
  margin-top: auto;
}

.carrusel-mandos {
  display: flex; align-items: center; gap: .6rem;
  margin-top: .4rem;
}
.carrusel-nav {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.42);
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: #fff; font-size: 1.3rem; line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.carrusel-nav:hover { background: rgba(255,255,255,.3); transform: scale(1.06); }
.carrusel-nav:disabled { opacity: .3; cursor: default; transform: none; }

.carrusel-puntos { display: flex; gap: .4rem; margin-left: auto; }
.carrusel-punto {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(255,255,255,.38); cursor: pointer;
  transition: background .2s var(--ease), width .2s var(--ease);
}
.carrusel-punto[aria-current="true"] { background: var(--naranja); width: 22px; border-radius: 4px; }

@media (max-width: 949px) {
  .carrusel-item { width: 190px; }
}

/* Los hijos de un grid traen min-width:auto, así que la pista del carrusel
   estiraba la columna hasta el ancho de sus 13 tarjetas en vez de recortarse
   y permitir el desplazamiento. Con min-width:0 la columna respeta su fracción
   y la pista vuelve a desbordar hacia dentro, que es lo que hace el scroll. */
.portada-rejilla > * { min-width: 0; }
.carrusel { min-width: 0; max-width: 100%; }
.carrusel-pista { max-width: 100%; }