/* ============================================================
   D&G Suministros y Asesorías — capa de identidad
   ------------------------------------------------------------
   Hoja NUEVA y aparte de estilos.css a propósito: estilos.css
   sostiene el catálogo y la curaduría, que ya están en producción
   y funcionando. La identidad se construye al lado y se enchufa
   cuando esté aprobada, en vez de reescribir lo que ya sirve.
   ============================================================ */

/* ---------- Fichas de color ----------
   El granate #A6353B es el corporativo real: es el color de los
   títulos del brochure y del marco del logo. No se cambia, se le
   construye un sistema alrededor.
   El vino profundo y el ascua salen del Instagram de la empresa,
   que es fotografía de ambiente cálida y oscura, no fondo blanco. */
:root{
  --vino:#5E1D22;
  --vino-hondo:#3B1114;
  --granate:#A6353B;
  --granate-vivo:#C04A50;
  --ascua:#D9A441;          /* latón cálido: el metal de las fotos */

  --grafito:#332D2E;        /* el gris del monograma, tibiado */
  --humo:#786E6F;
  --tenue:#A79D9D;

  --hueso:#F8F5F2;          /* fondo de página */
  --papel:#FFFFFF;
  --acero:#EAE4DF;          /* teselas detrás de las fotos de producto */
  --linea:#E0D8D3;

  --sombra:0 1px 2px rgba(51,45,46,.06), 0 8px 24px -12px rgba(51,45,46,.18);
  --sombra-alta:0 2px 4px rgba(51,45,46,.08), 0 20px 44px -18px rgba(51,45,46,.28);

  --ancho:1180px;
  --radio:10px;

  --display:"Petrona", Georgia, "Times New Roman", serif;
  --texto:"Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* El sitio se compromete con un solo mundo visual: papel cálido con bandas
   de vino, siempre igual. No sigue el modo oscuro del teléfono.
   Es a propósito: esto es un folleto de marca, y un folleto no cambia de
   color según quién lo abra. Las fotos de producto vienen recortadas sobre
   fondo claro, así que en oscuro quedaban flotando en manchas grises, y el
   granate pierde fuerza sobre negro.
   `color-scheme: light` evita además que el navegador oscurezca por su
   cuenta barras de desplazamiento y controles de formulario. */
:root{color-scheme:light}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;
  background:var(--hueso);
  color:var(--grafito);
  font:400 16.5px/1.6 var(--texto);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
[hidden]{display:none!important}

h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.08;
  text-wrap:balance;margin:0;letter-spacing:-.012em}
h1{font-size:clamp(34px,5.6vw,62px)}
h2{font-size:clamp(27px,3.6vw,42px)}
h3{font-size:clamp(19px,1.6vw,23px);line-height:1.2}
p{margin:0}

:focus-visible{outline:2.5px solid var(--ascua);outline-offset:3px;border-radius:4px}

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

/* La cabecera es sticky: sin esto, un enlace del menú deja el título de la
   sección escondido debajo de ella. */
section[id]{scroll-margin-top:86px}

/* Rótulo en versalitas espaciadas: el mismo gesto tipográfico que
   "SUMINISTROS Y ASESORÍAS" en el logo. Es la única cita literal
   de la marca vieja que hereda la nueva. */
.rotulo{
  font:600 11.5px/1 var(--texto);
  letter-spacing:.19em;text-transform:uppercase;
  color:var(--granate);
  display:flex;align-items:center;gap:10px;
}
.rotulo::before{content:"";width:24px;height:1.5px;background:currentColor;flex:none}
.rotulo.sobre-vino{color:var(--ascua)}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 22px;border-radius:var(--radio);border:1.5px solid transparent;
  font:600 15px/1 var(--texto);letter-spacing:.005em;
  text-decoration:none;cursor:pointer;
  transition:background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.btn:active{transform:translateY(1px)}
.btn-lleno{background:var(--granate);color:#fff}
.btn-lleno:hover{background:#8E2B31}
.btn-ascua{background:var(--ascua);color:var(--vino-hondo)}
.btn-ascua:hover{background:#EBB755}
.btn-linea{border-color:var(--linea);color:var(--grafito);background:transparent}
.btn-linea:hover{border-color:var(--granate);color:var(--granate)}
.btn-claro{border-color:rgba(255,255,255,.34);color:#fff;background:transparent}
.btn-claro:hover{border-color:#fff;background:rgba(255,255,255,.09)}

/* ---------- Superficies ---------- */
.banda-vino{
  background:var(--vino);color:#F4E8E4;
  background-image:radial-gradient(120% 90% at 82% 8%, #7A2830 0%, var(--vino) 46%, var(--vino-hondo) 100%);
}
.banda-vino h1,.banda-vino h2,.banda-vino h3{color:#FFF6F3}

/* ---------- Hueco pendiente ----------
   Un espacio que todavía no tiene material. Se ve a propósito:
   es más honesto que rellenar con una foto de banco de imágenes
   que después nadie se acuerda de cambiar. */
.hueco{
  border:1.5px dashed var(--tenue);border-radius:var(--radio);
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(167,157,157,.09) 11px 22px);
  display:flex;flex-direction:column;justify-content:center;gap:7px;
  padding:26px;min-height:190px;color:var(--humo);
}
.hueco b{
  display:block;font:600 10.5px/1 var(--texto);letter-spacing:.17em;
  text-transform:uppercase;color:var(--tenue);
}
.hueco span{font-size:14.5px;line-height:1.45;max-width:34ch}
.hueco em{font-style:normal;font-size:12.5px;color:var(--tenue);line-height:1.45}
.hueco.sobre-vino{
  border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.72);
  background:repeating-linear-gradient(135deg, transparent 0 11px, rgba(255,255,255,.055) 11px 22px);
}
.hueco.sobre-vino b,.hueco.sobre-vino em{color:rgba(255,255,255,.5)}

/* ============================================================
   Piezas de la página de marca
   ============================================================ */

/* ---------- Cabecera ---------- */
.tope{
  position:sticky;top:0;z-index:50;
  background:var(--hueso);
  border-bottom:1px solid var(--linea);
}
.tope .contenedor{display:flex;align-items:center;gap:26px;min-height:70px}
.sello{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.sello img{width:auto;height:38px;flex:none}
.sello .bajo{
  font:600 8.5px/1.5 var(--texto);letter-spacing:.15em;
  text-transform:uppercase;color:var(--humo);
  padding-left:12px;border-left:1px solid var(--linea);
}
/* El monograma es gris oscuro sobre transparente: sobre el vino se pierde,
   así que en las bandas oscuras se aclara con un filtro en vez de mantener
   dos archivos distintos del mismo logo. */
.banda-vino .sello img,.pie .sello img{filter:brightness(0) invert(1) opacity(.92)}
.menu{display:flex;gap:26px;margin-left:auto;align-items:center}
.menu a{
  text-decoration:none;font:500 14.5px/1 var(--texto);color:var(--humo);
  padding:6px 0;border-bottom:2px solid transparent;transition:color .16s, border-color .16s;
}
.menu a:hover{color:var(--granate);border-bottom-color:var(--granate)}
.menu .btn{margin-left:6px;padding:10px 17px;font-size:14px}
.menu .btn:hover{border-bottom-color:transparent}

/* ---------- Portada ---------- */
.portada{padding:clamp(52px,7vw,92px) 0 clamp(56px,7vw,96px)}
.portada .contenedor{
  display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,5vw,64px);align-items:center;
}
.portada h1{margin:20px 0 0}
.portada .entrada{
  margin-top:20px;font-size:clamp(16.5px,1.5vw,18.5px);line-height:1.62;
  color:rgba(255,246,243,.82);max-width:46ch;
}
.portada .acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.portada .sede{
  margin:34px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.17);
  display:flex;flex-wrap:wrap;gap:26px;
}
.portada .sede div{display:flex;flex-direction:column;gap:4px}
.portada .sede dt{font:600 10.5px/1 var(--texto);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ascua);margin:0}
.portada .sede dd{margin:0;font-size:15px;color:rgba(255,246,243,.9)}

/* ---------- Tira de cifras ---------- */
.cifras{border-bottom:1px solid var(--linea);background:var(--papel)}
.cifras .contenedor{display:grid;grid-template-columns:repeat(4,1fr)}
.cifras div{padding:26px 0;border-left:1px solid var(--linea)}
.cifras div:first-child{border-left:0}
.cifras div+div{padding-left:26px}
.cifras b{
  display:block;font:600 clamp(28px,3vw,38px)/1 var(--display);
  color:var(--granate);font-variant-numeric:tabular-nums;
}
.cifras span{display:block;margin-top:7px;font-size:13.5px;color:var(--humo);line-height:1.35}

/* ---------- Marcas ---------- */
.marcas{padding:clamp(46px,5vw,68px) 0;background:var(--papel);border-bottom:1px solid var(--linea)}
.marcas .encabeza{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:baseline;margin-bottom:28px}
.marcas .encabeza p{color:var(--humo);font-size:15.5px;max-width:52ch}
/* Cada marca lleva su propio borde en vez del truco de "gap de 1 px sobre
   fondo gris": con ocho marcas y un número de columnas que cambia con el
   ancho, las celdas sobrantes de la última fila se veían como una plancha
   gris vacía. Así, lo que sobra es simplemente página. */
.lista-marcas{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;
}
.lista-marcas div{
  background:var(--papel);padding:18px 19px;
  border:1px solid var(--linea);border-radius:8px;
}
.lista-marcas b{display:block;font:600 17px/1.15 var(--display);color:var(--grafito)}
.lista-marcas span{display:block;margin-top:5px;font-size:12.5px;color:var(--humo);line-height:1.35}

/* ---------- Líneas ---------- */
.lineas{padding:clamp(56px,6vw,84px) 0}
.lineas .encabeza{max-width:60ch;margin-bottom:34px}
.lineas .encabeza h2{margin:16px 0 12px}
.lineas .encabeza p{color:var(--humo);font-size:16.5px}
/* 320 px de mínimo da tres columnas en escritorio, y nueve líneas llenan
   exactamente tres filas. Con cuatro columnas quedaba una tarjeta sola. */
.rejilla-lineas{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.linea{
  display:flex;flex-direction:column;text-decoration:none;
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.linea:hover{border-color:var(--granate);box-shadow:var(--sombra-alta);transform:translateY(-2px)}
/* La foto va en posición absoluta a propósito: las fotos de producto tienen
   proporciones muy distintas (una licuadora es vertical, un azafate es
   apaisado) y en flujo normal la más alta estiraba la tesela y descuadraba
   toda la fila. Fuera del flujo, la tesela siempre mide 4:3. */
.linea .tesela{background:var(--acero);aspect-ratio:4/3;position:relative}
.linea .tesela img{
  position:absolute;inset:18px;
  width:calc(100% - 36px);height:calc(100% - 36px);
  object-fit:contain;mix-blend-mode:multiply;
}
.linea .cuerpo{padding:17px 19px 19px;display:flex;flex-direction:column;gap:7px;flex:1}
.linea .num{
  font:600 10.5px/1 var(--texto);letter-spacing:.17em;color:var(--granate);
  font-variant-numeric:tabular-nums;
}
.linea h3{color:var(--grafito)}
.linea .sub{font-size:13.5px;color:var(--humo);line-height:1.45;flex:1}
.linea .cuenta{
  margin-top:4px;padding-top:12px;border-top:1px solid var(--linea);
  font:500 13px/1 var(--texto);color:var(--humo);
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.linea .cuenta b{color:var(--grafito);font-weight:600;font-variant-numeric:tabular-nums}
.linea .flecha{color:var(--granate);font-size:15px;transition:transform .18s ease}
.linea:hover .flecha{transform:translateX(3px)}

/* ---------- Asesoría ---------- */
.asesoria{padding:clamp(56px,6vw,84px) 0}
.asesoria .contenedor{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px,5vw,66px)}
.asesoria h2{margin:16px 0 16px}
.asesoria .entrada{font-size:17px;line-height:1.62;color:rgba(255,246,243,.82);max-width:44ch}
.pasos{margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--radio);overflow:hidden}
.pasos li{
  list-style:none;padding:22px 24px;background:rgba(94,29,34,.55);
  display:grid;grid-template-columns:auto 1fr;gap:5px 17px;align-items:baseline;
}
.pasos .cifra{
  font:600 13px/1 var(--display);color:var(--ascua);font-variant-numeric:tabular-nums;
  grid-row:span 2;padding-top:3px;
}
.pasos b{font:600 17px/1.2 var(--display);color:#FFF6F3}
.pasos p{font-size:14.5px;line-height:1.55;color:rgba(255,246,243,.74)}

/* ---------- El local ---------- */
.local{padding:clamp(56px,6vw,84px) 0;background:var(--papel);
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.local .encabeza{max-width:58ch;margin-bottom:30px}
.local .encabeza h2{margin:16px 0 12px}
.local .encabeza p{color:var(--humo);font-size:16.5px}
.huecos-local{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:16px}
.huecos-local .hueco:first-child{min-height:290px}

/* ---------- Contacto ---------- */
.contacto{padding:clamp(56px,6vw,86px) 0}
.contacto .contenedor{display:grid;grid-template-columns:1fr .85fr;
  gap:clamp(32px,5vw,60px);align-items:start}
.contacto h2{margin:16px 0 14px}
.contacto .entrada{color:rgba(255,246,243,.82);font-size:16.5px;max-width:44ch}
.vias{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.via{
  display:flex;align-items:center;gap:14px;text-decoration:none;
  padding:16px 18px;border:1px solid rgba(255,255,255,.2);border-radius:var(--radio);
  background:rgba(255,255,255,.05);transition:background .16s, border-color .16s;
}
.via:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
.via .ico{
  width:38px;height:38px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:rgba(217,164,65,.16);color:var(--ascua);font-size:17px;
}
.via .txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.via .txt b{font:600 10.5px/1 var(--texto);letter-spacing:.16em;
  text-transform:uppercase;color:var(--ascua)}
.via .txt span{font-size:15.5px;color:#FFF6F3;overflow-wrap:anywhere}

/* ---------- Pie ---------- */
.pie{padding:34px 0;background:var(--vino-hondo);color:rgba(255,246,243,.6);font-size:13.5px}
.pie .contenedor{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}
.pie .sello img{height:64px}
.pie .sello{gap:0}
.pie a{color:rgba(255,246,243,.82)}
.pie .der{margin-left:auto}

/* ============================================================
   Móvil
   ============================================================ */
@media (max-width:900px){
  .portada .contenedor,
  .asesoria .contenedor,
  .contacto .contenedor{grid-template-columns:1fr}
  .cifras .contenedor{grid-template-columns:repeat(2,1fr)}
  .cifras div:nth-child(odd){border-left:0;padding-left:0}
  .huecos-local{grid-template-columns:1fr 1fr}
  .huecos-local .hueco:first-child{grid-column:1/-1}
  .menu a:not(.btn){display:none}
}
@media (max-width:600px){
  body{font-size:16px}
  .contenedor{padding:0 17px}
  .tope .contenedor{min-height:62px;gap:12px}
  /* Solo la altura: el monograma es apaisado (624 x 327) y fijarle también
     el ancho lo aplastaba a un cuadrado. */
  .sello img{height:30px}
  .pie .sello img{height:52px}
  .sello .bajo{font-size:8px;padding-left:10px}
  .menu .btn{padding:9px 14px;font-size:13.5px}
  .portada{padding:38px 0 44px}
  .portada .sede{gap:18px}
  .cifras div{padding:20px 0}
  .cifras div+div{padding-left:18px}
  .cifras div:nth-child(odd){padding-left:0}
  .rejilla-lineas{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:13px}
  .linea .cuerpo{padding:14px 15px 16px}
  .linea .sub{display:none}
  .huecos-local{grid-template-columns:1fr}
  .pie .der{margin-left:0}
}