/* Comercial de Construcción Bloquera Llanitos — hoja de estilos única.
   Colores institucionales muestreados del catálogo v2.0 (valores aproximados, por confirmar con archivo de marca).
   Todos los colores se definen como variables en :root. */

@font-face {
  font-family: "Oswald";
  src: url("../fonts/oswald-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: only light;
  /* Identidad */
  --verde-oscuro: #4B7A43;   /* encabezados, botones, barras (verde suave) */
  --verde-sombra: #365A30;   /* estados hover y foco */
  --verde-lima: #B9D694;     /* acentos y franjas, suave (texto oscuro encima, nunca blanco) */
  --carbon: #383435;         /* pie de página */
  --tinta: #2F3034;          /* texto principal (gris del logotipo) */
  --blanco: #FFFFFF;
  --papel: #F4F6F0;          /* fondos de apoyo */
  --linea: #D6DCCE;
  /* Muestras de producto (no son colores de marca) */
  --m-gris: #BEBABA;
  --m-rojo: #982D1D;
  --m-marshall: #A47819;
  --m-ocre: #A47819;
  --m-cafe: #90633C;
  --m-negro: #000000;
  --m-chocolate: #442A13;
  /* Tipografía y medidas */
  --f-titulo: "Oswald", "Arial Narrow", Arial, sans-serif;
  --f-texto: "Montserrat", system-ui, "Segoe UI", Arial, sans-serif;
  --ancho: 1160px;
  --lateral: clamp(16px, 4vw, 32px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--blanco);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--verde-oscuro); text-underline-offset: 3px; }
a:hover { color: var(--verde-sombra); }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; box-shadow: 0 0 0 6px var(--verde-lima); }

h1, h2, h3, h4 {
  font-family: var(--f-titulo);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .005em;
  margin: 0 0 .6em;
  color: var(--tinta);
}
h1 { font-size: clamp(2.2rem, 5.2vw, 3.7rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1em; max-width: 72ch; }
ul, ol { padding-left: 1.25em; margin: 0 0 1em; }
li { margin-bottom: .35em; max-width: 72ch; }

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--lateral); }
.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.saltar {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--verde-lima); color: var(--tinta); font-weight: 700;
  padding: .7rem 1rem; text-decoration: none;
}
.saltar:focus { top: 8px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .7rem 1.35rem;
  font-family: var(--f-texto); font-weight: 700; font-size: 1rem; line-height: 1.2;
  text-decoration: none; border: 2px solid transparent; border-radius: 2px;
  cursor: pointer;
}
.btn svg { width: 1.25em; height: 1.25em; flex: none; }
.btn--lima { background: var(--verde-lima); color: var(--tinta); border-color: var(--verde-lima); }
.btn--lima:hover { background: var(--blanco); color: var(--tinta); border-color: var(--blanco); }
.btn--verde { background: var(--verde-oscuro); color: var(--blanco); border-color: var(--verde-oscuro); }
.btn--verde:hover { background: var(--verde-sombra); color: var(--blanco); border-color: var(--verde-sombra); }
.btn--borde { background: transparent; color: var(--verde-oscuro); border-color: var(--verde-oscuro); }
.btn--borde:hover { background: var(--verde-oscuro); color: var(--blanco); }
.btn--borde-claro { background: transparent; color: var(--blanco); border-color: var(--blanco); }
.btn--borde-claro:hover { background: var(--blanco); color: var(--verde-oscuro); }
.btn--sm { min-height: 42px; padding: .5rem 1rem; font-size: .95rem; }

/* ---------- Cabecera ---------- */
.cabecera { background: var(--blanco); border-bottom: 4px solid var(--verde-lima); position: relative; z-index: 20; }
.cabecera__fila { display: flex; align-items: center; gap: 1.25rem; padding-block: .8rem; }
.marca { display: block; flex: none; }
.marca img { height: 62px; width: auto; }
.nav-principal { margin-left: auto; }
.nav-principal ul { list-style: none; display: flex; gap: .25rem; margin: 0; padding: 0; }
.nav-principal li { margin: 0; }
.nav-principal a {
  display: block; padding: .6rem .85rem; font-weight: 600; font-size: .95rem;
  color: var(--tinta); text-decoration: none; border-bottom: 3px solid transparent;
}
.nav-principal a:hover { color: var(--verde-oscuro); border-bottom-color: var(--verde-lima); }
.nav-principal a[aria-current="page"] { color: var(--verde-oscuro); border-bottom-color: var(--verde-oscuro); }
.cabecera__acciones { display: flex; gap: .5rem; flex: none; }

.menu-movil { display: none; margin-left: auto; position: relative; }
.menu-movil summary {
  list-style: none; cursor: pointer; font-weight: 700; padding: .6rem 1rem;
  border: 2px solid var(--verde-oscuro); color: var(--verde-oscuro); border-radius: 2px;
}
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil[open] summary { background: var(--verde-oscuro); color: var(--blanco); }
.menu-movil__panel {
  position: absolute; right: 0; top: calc(100% + 10px); width: min(88vw, 340px);
  background: var(--blanco); border: 2px solid var(--verde-oscuro); padding: 1rem; z-index: 30;
  max-height: 75vh; overflow-y: auto;
}
.menu-movil__panel h2 { font-size: 1.05rem; margin: 1rem 0 .4rem; color: var(--verde-oscuro); }
.menu-movil__panel ul { list-style: none; padding: 0; margin: 0; }
.menu-movil__panel li { margin: 0; }
.menu-movil__panel a { display: block; padding: .55rem 0; text-decoration: none; color: var(--tinta); font-weight: 600; border-bottom: 1px solid var(--linea); }

/* ---------- Portada ---------- */
.portada {
  position: relative;
  background-color: var(--verde-oscuro);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.10' stroke-width='2'%3E%3Cpath d='M0 1H120M0 41H120M1 1V41M61 41V81'/%3E%3C/g%3E%3C/svg%3E");
  color: var(--blanco);
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(4rem, 9vw, 7rem);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - clamp(28px, 5vw, 64px)), 0 100%);
  margin-bottom: -1px;
}
.portada::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px;
  background: var(--verde-lima); transform-origin: left bottom;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.portada__rejilla { display: grid; gap: 2.5rem; align-items: center; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.portada h1 { color: var(--blanco); max-width: 16ch; margin-bottom: .45em; }
.portada__texto { font-size: 1.125rem; max-width: 52ch; margin-bottom: 1.6rem; }
.portada__botones { display: flex; flex-wrap: wrap; gap: .75rem; }
.cotiza {
  background: var(--blanco); color: var(--tinta);
  padding: 1.6rem 1.6rem 1.5rem; border-top: 8px solid var(--verde-lima);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}
.cotiza h2 { font-size: 1.7rem; margin-bottom: .8rem; color: var(--verde-oscuro); }
.cotiza ol { list-style: none; counter-reset: paso; padding: 0; margin: 0 0 1.2rem; }
.cotiza li { counter-increment: paso; display: flex; gap: .85rem; align-items: baseline; margin-bottom: .7rem; font-weight: 600; }
.cotiza li::before {
  content: counter(paso); flex: none; width: 2rem; height: 2rem; display: grid; place-items: center;
  background: var(--verde-oscuro); color: var(--blanco); font-family: var(--f-titulo); font-size: 1.1rem; border-radius: 50%;
}
.cotiza__tel { display: grid; gap: .5rem; }

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.seccion--papel { background: var(--papel); }
.seccion__titulo { margin-bottom: 1.5rem; padding-left: 1rem; border-left: 6px solid var(--verde-oscuro); }
.seccion__intro { margin-bottom: 2rem; }
.seccion__titulo--aparte { margin-top: 2.5rem; }
.botones-fila { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; max-width: none; }

.lineas-rejilla { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.linea-card {
  position: relative; height: 100%; margin: 0; max-width: none;
  background: var(--blanco); border: 1px solid var(--linea); border-top: 6px solid var(--verde-oscuro);
  padding: 1.25rem 1.25rem 1.4rem;
}
.linea-card__foto { margin: -1.25rem -1.25rem 1.1rem; background: var(--blanco); border-bottom: 1px solid var(--linea); aspect-ratio: 3 / 2; overflow: hidden; }
.linea-card__foto img { width: 100%; height: 100%; object-fit: contain; }
.linea-card__foto--patron {
  background-color: var(--verde-oscuro);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.14' stroke-width='2'%3E%3Cpath d='M0 1H120M0 41H120M1 1V41M61 41V81'/%3E%3C/g%3E%3C/svg%3E");
}
.linea-card h3 { margin-bottom: .45rem; color: var(--verde-oscuro); }
.linea-card p { margin: 0; font-size: .95rem; }
.linea-card a { text-decoration: none; color: inherit; }
.linea-card a::after { content: ""; position: absolute; inset: 0; }
.linea-card:hover { border-top-color: var(--verde-lima); background: var(--papel); }
.linea-card:focus-within { outline: 3px solid var(--tinta); outline-offset: 2px; }
.linea-card a:focus-visible { outline: none; box-shadow: none; }

.dos-columnas { display: grid; gap: 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aviso-tecnico { border-left: 8px solid var(--verde-lima); background: var(--papel); padding: 1.25rem 1.5rem; }
.aviso-tecnico h2, .aviso-tecnico h3 { margin-bottom: .4rem; }
.aviso-tecnico p:last-child { margin-bottom: 0; }

.directorio { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dir-bloque { border: 1px solid var(--linea); border-top: 6px solid var(--verde-oscuro); padding: 1.4rem; background: var(--blanco); }
.dir-bloque h2, .dir-bloque h3 { color: var(--verde-oscuro); }
.dir-bloque address { font-style: normal; margin-bottom: 1rem; }
.dir-bloque .botones { display: flex; flex-wrap: wrap; gap: .5rem; }
.dir-sub { font-family: var(--f-titulo); font-size: 1.2rem; color: var(--tinta); margin: 0 0 .5rem; }

/* ---------- Páginas de producto ---------- */
.banda {
  background: var(--verde-oscuro); color: var(--blanco);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.09' stroke-width='2'%3E%3Cpath d='M0 1H120M0 41H120M1 1V41M61 41V81'/%3E%3C/g%3E%3C/svg%3E");
  padding-block: clamp(1.8rem, 4vw, 3rem);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), 0 100%);
  position: relative;
}
.banda__rejilla { display: block; }
.banda--foto .banda__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2rem; align-items: center; }
.banda--foto { padding-bottom: clamp(2.8rem, 5vw, 3.6rem); }
.banda__foto { margin: 0; background: var(--blanco); border-top: 6px solid var(--verde-lima); padding: .5rem; }
.banda__foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.banda h1 { color: var(--blanco); font-size: clamp(2rem, 4.6vw, 3.2rem); margin-bottom: .15em; }
.banda p { margin: 0; font-size: 1.1rem; }
.banda__rastro { margin-bottom: .5rem; font-size: .95rem; }
.banda__rastro a { color: var(--blanco); }
.banda__rastro a:hover { color: var(--verde-lima); }

.pagina { display: grid; gap: 2.5rem; grid-template-columns: 250px minmax(0, 1fr); padding-block: 2.5rem 4rem; align-items: start; }
.lateral { position: sticky; top: 16px; }
.lateral h2 { font-size: 1.15rem; color: var(--verde-oscuro); margin-bottom: .6rem; }
.lateral ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--linea); }
.lateral li { margin: 0; border-bottom: 1px solid var(--linea); }
.lateral a { display: block; padding: .6rem .7rem; text-decoration: none; color: var(--tinta); font-weight: 600; font-size: .92rem; border-left: 5px solid transparent; }
.lateral a:hover { background: var(--papel); border-left-color: var(--verde-lima); }
.lateral a[aria-current="page"] { background: var(--papel); border-left-color: var(--verde-oscuro); color: var(--verde-oscuro); }
.lateral-movil { display: none; margin-bottom: 1.5rem; }
.lateral-movil summary { cursor: pointer; font-weight: 700; padding: .7rem 1rem; border: 2px solid var(--verde-oscuro); color: var(--verde-oscuro); list-style: none; }
.lateral-movil summary::-webkit-details-marker { display: none; }
.lateral-movil[open] summary { background: var(--verde-oscuro); color: var(--blanco); }
.lateral-movil ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--linea); border-top: 0; }
.lateral-movil li { margin: 0; border-bottom: 1px solid var(--linea); }
.lateral-movil a { display: block; padding: .7rem 1rem; text-decoration: none; color: var(--tinta); font-weight: 600; }

.contenido h2 { margin-top: 2.6rem; padding-left: .9rem; border-left: 6px solid var(--verde-oscuro); }
.contenido h2:first-child { margin-top: 0; }
.contenido h3 { margin-top: 2rem; color: var(--verde-oscuro); }

/* Producto con foto */
.producto { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 1.4rem; align-items: start; margin: 1.2rem 0 2rem; }
.producto .tabla-bloque { margin: 0; }
.producto__foto { margin: 0; background: var(--blanco); border: 1px solid var(--linea); border-top: 5px solid var(--verde-lima); }
.producto__foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }

/* Tablas técnicas */
.tabla-bloque { margin: 1.2rem 0 2rem; }
.tabla-scroll { overflow-x: auto; border: 1px solid var(--linea); }
.tabla-scroll:focus-visible { outline-offset: 0; }
.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 460px; }
.tabla caption { text-align: left; font-family: var(--f-titulo); font-weight: 600; font-size: 1.25rem; color: var(--tinta); padding: 0 0 .5rem; caption-side: top; }
.tabla thead th { background: var(--verde-oscuro); color: var(--blanco); font-weight: 700; text-align: left; padding: .7rem .85rem; vertical-align: bottom; border: 1px solid var(--verde-sombra); }
.tabla tbody th, .tabla tbody td { padding: .6rem .85rem; border: 1px solid var(--linea); vertical-align: top; text-align: left; }
.tabla tbody th { font-weight: 700; background: var(--papel); }
.tabla tbody tr:nth-child(even) td { background: #FAFBF7; }
.tabla td.num, .tabla th.num { font-variant-numeric: tabular-nums; }
.tabla--claros td { text-align: center; font-variant-numeric: tabular-nums; }
.tabla--claros thead th { text-align: center; }
.tabla--claros thead th:first-child, .tabla--claros thead th:nth-child(2) { text-align: left; }
.tabla--claros tbody th[scope="rowgroup"] { background: var(--verde-lima); color: var(--tinta); text-align: center; }
.tabla--claros tbody th[scope="row"] { background: var(--papel); }
.tabla-nota { font-size: .88rem; margin: .6rem 0 0; color: var(--tinta); max-width: none; }

.nota { border-left: 6px solid var(--verde-lima); background: var(--papel); padding: .9rem 1.2rem; margin: 1.2rem 0; font-size: .95rem; }
.nota p:last-child { margin-bottom: 0; }
.lista-detalles { columns: 2; column-gap: 2rem; list-style: none; padding: 0; }
.lista-detalles li { break-inside: avoid; padding: .45rem 0 .45rem 1.1rem; border-bottom: 1px solid var(--linea); position: relative; margin: 0; max-width: none; }
.lista-detalles li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 8px; height: 8px; background: var(--verde-oscuro); transform: skewX(-25deg); }
.datos-def { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.5rem; margin: 1rem 0 1.5rem; }
.datos-def dt { font-weight: 700; }
.datos-def dd { margin: 0; }

.muestras { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; list-style: none; padding: 0; margin: 1rem 0 .5rem; }
.muestras li { margin: 0; display: flex; align-items: center; gap: .6rem; font-weight: 600; max-width: none; }
.muestra { width: 2.6rem; height: 2.6rem; border: 1px solid var(--tinta); flex: none; }
.muestra--gris { background: var(--m-gris); }
.muestra--rojo { background: var(--m-rojo); }
.muestra--marshall { background: var(--m-marshall); }
.muestra--ocre { background: var(--m-ocre); }
.muestra--cafe { background: var(--m-cafe); }
.muestra--negro { background: var(--m-negro); }
.muestra--chocolate { background: var(--m-chocolate); }

.cta-final { margin-top: 3rem; background: var(--verde-oscuro); color: var(--blanco); padding: 1.8rem; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%); }
.cta-final h2 { color: var(--blanco); border: 0; padding: 0; margin: 0 0 .4rem; font-size: 1.7rem; }
.cta-final p { margin-bottom: 1.1rem; }
.cta-final .botones { display: flex; flex-wrap: wrap; gap: .6rem; }
.version-catalogo { font-size: .85rem; margin-top: 1.5rem; }

.pendiente { background: #FFE066; color: #000; padding: 0 .3em; font-weight: 700; }

/* ---------- Texto legal ---------- */
.legal { max-width: 820px; padding-block: 2.5rem 4rem; }
.legal h2 { font-size: 1.5rem; margin-top: 2rem; }
.legal h3 { font-size: 1.15rem; margin-top: 1.4rem; color: var(--verde-oscuro); }

/* ---------- Pie ---------- */
.pie { background: var(--carbon); color: var(--blanco); margin-top: 0; border-top: 8px solid var(--verde-lima); }
.pie a { color: var(--blanco); }
.pie a:hover { color: var(--verde-lima); }
.pie__rejilla { display: grid; gap: 2rem; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: 2.5rem 1.5rem; }
.pie h2 { color: var(--blanco); font-size: 1.25rem; margin-bottom: .5rem; }
.pie address { font-style: normal; font-size: .95rem; }
.pie p { font-size: .95rem; }
.pie__botones { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.pie__redes { list-style: none; padding: 0; margin: 0; display: flex; gap: 1.2rem; flex-wrap: wrap; }
.pie__redes li { margin: 0; }
.pie__legal { border-top: 1px solid #5B5758; padding-block: 1.2rem 2rem; font-size: .88rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; }
.pie__legal ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 0; padding: 0; }
.pie__legal li { margin: 0; }
.pie__legal p { margin: 0; max-width: none; }

/* Barra móvil de contacto */
.barra-movil { display: none; }

/* ---------- Adaptación ---------- */
@media (max-width: 1020px) {
  .lineas-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-principal { display: none; }
  .cabecera__acciones { display: none; }
  .menu-movil { display: block; }
  .pagina { grid-template-columns: minmax(0, 1fr); }
  .lateral { display: none; }
  .lateral-movil { display: block; }
}
@media (max-width: 820px) {
  .portada__rejilla, .dos-columnas, .directorio { grid-template-columns: minmax(0, 1fr); }
  .pie__rejilla { grid-template-columns: minmax(0, 1fr); }
  .lista-detalles { columns: 1; }
}
@media (max-width: 720px) {
  .producto { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .producto__foto { max-width: 260px; }
  .banda--foto .banda__rejilla { grid-template-columns: minmax(0, 1fr); }
  .banda__foto { display: none; }
  body { padding-bottom: 76px; }
  .marca img { height: 48px; }
  .barra-movil {
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--carbon); padding: .6rem var(--lateral) calc(.6rem + env(safe-area-inset-bottom, 0px));
    border-top: 4px solid var(--verde-lima);
  }
}
@media (max-width: 560px) {
  .lineas-rejilla { grid-template-columns: minmax(0, 1fr); }
  .datos-def { grid-template-columns: minmax(0, 1fr); }
  .datos-def dd { margin-bottom: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@media print {
  .cabecera__acciones, .menu-movil, .barra-movil, .lateral, .lateral-movil, .cta-final, .portada__botones { display: none !important; }
  .portada, .banda, .cta-final { clip-path: none; }
  body { padding-bottom: 0; }
}