/* ============================================================
   Los Altillos — Construcción en seco en Colombia
   Archivo: assets/construccion-en-seco-colombia.css
   Prefijo: laco-  ·  Caja única de 1000px, sin glosario
   Depende de assets/main.css (variables, reset y componentes .la-*).
   ============================================================ */

/* ============================================================
   0 · GLOBALES QUE main.css NO TRAE
   ============================================================ */
html{scroll-padding-top:calc(var(--header-height) + 3rem)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .laco *{animation:none!important;transition:none!important}
}

/* ============================================================
   1 · ESQUELETO
   Una única caja: 1048px de borde a borde menos 24px de padding
   a cada lado = 1000px de contenido. Sin variantes de ancho:
   todas las secciones comparten exactamente el mismo eje.
   ============================================================ */
.laco{background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);overflow-x:clip}
.laco a{transition:color var(--transition-fast),border-color var(--transition-fast),background var(--transition-fast),transform var(--transition-base),box-shadow var(--transition-base)}
.laco a:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}

.laco-wrap{width:100%;max-width:1048px;margin-inline:auto;padding-inline:var(--container-pad-mobile)}
@media (min-width:768px){.laco-wrap{padding-inline:var(--container-pad-desktop)}}

.laco-section{position:relative;padding:6.5rem 0}
.laco-section--alt::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-100vw;right:-100vw;background:var(--color-bg-secondary)}
@media (max-width:767px){.laco-section{padding:4.5rem 0}}

/* ============================================================
   2 · HERO — tipográfico, centrado
   ============================================================ */
.laco-hero{position:relative;isolation:isolate;overflow:hidden;padding:calc(var(--header-height) + 6rem) 0 6rem;background:var(--color-bg-dark);color:#fff;text-align:center}
/* `.laco .laco-hero__image` y no la clase sola: una regla global de img
   con height:auto tiene más especificidad y dejaría la foto sin cubrir. */
.laco .laco-hero__image{position:absolute;inset:0;z-index:-2;width:100%;height:100%;min-height:100%;object-fit:cover;object-position:center}
.laco-hero__overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(1,43,96,.80) 0%,rgba(1,43,96,.58) 40%,rgba(1,43,96,.66) 68%,rgba(1,43,96,.88) 100%)}
.laco-breadcrumbs{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;margin-bottom:1.75rem;font-size:1.05rem;color:rgba(255,255,255,.66)}
.laco-breadcrumbs a{color:rgba(255,255,255,.78)}
.laco-breadcrumbs a:hover{color:#fff;text-decoration:underline}
.laco-breadcrumbs span[aria-current="page"]{color:rgba(255,255,255,.92);font-weight:600}
.laco-hero__flag{display:inline-block;margin-bottom:1.25rem;padding:.3rem .9rem;border-radius:100px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.2);font-size:.95rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.laco-hero__title{max-width:18ch;margin-inline:auto;font-family:var(--font-display);font-size:clamp(2.3rem,6vw,4.4rem);line-height:1.06;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.laco-hero__sub{max-width:60ch;margin:1.5rem auto 0;font-size:1.55rem;line-height:1.7;color:rgba(255,255,255,.82)}
.laco-hero__meta{display:flex;flex-wrap:wrap;justify-content:center;gap:.65rem;margin-top:2.5rem}
.laco-hero__meta li{padding:.5rem 1rem;border-radius:100px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-size:1.1rem;color:rgba(255,255,255,.85)}

/* ============================================================
   3 · TIPOGRAFÍA
   El texto corrido ocupa la caja completa, con cuerpo mayor y
   más interlínea para que 1000px sigan siendo legibles.
   ============================================================ */
.laco-head{max-width:46ch;margin:0 auto 3.5rem;text-align:center}
.laco-eyebrow{display:inline-block;margin-bottom:1rem;font-size:.98rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--color-accent)}
.laco-h2{font-family:var(--font-display);font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.14;letter-spacing:-.02em;text-wrap:balance}
.laco-head p{margin-top:1rem;font-size:1.4rem;line-height:1.7;color:var(--color-text-subtle)}
.laco-h3{font-family:var(--font-body);font-size:1.85rem;font-weight:600;line-height:1.3;color:var(--color-text);text-wrap:balance}

.laco-prose{font-size:1.7rem;line-height:1.95;color:var(--color-text-muted)}
.laco-prose p{margin-bottom:1.6rem}
.laco-prose p:last-child{margin-bottom:0}
.laco-prose strong{color:var(--color-text);font-weight:600}
.laco-prose em{font-style:normal;color:var(--color-text-subtle)}
@media (max-width:767px){.laco-prose{font-size:1.45rem;line-height:1.85}}

.laco-quote{margin:4rem 0;text-align:center}
.laco-quote q{display:block;max-width:24ch;margin-inline:auto;font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.26;letter-spacing:-.01em;color:var(--color-secondary);quotes:none}
.laco-quote q::before,.laco-quote q::after{content:none}

/* ============================================================
   4 · TARJETAS DE CATEGORÍA
   Son categorías: llevan imagen y forma de tarjeta.
   Solo la de steel framing es clicable — es la única que existe.
   ============================================================ */
.laco-cats{display:grid;gap:1.5rem}
/* En computadora: las tres categorías van una al lado de la otra, verticales */
@media (min-width:820px){.laco-cats{grid-template-columns:repeat(3,minmax(0,1fr))}}

.laco-cat{display:flex;flex-direction:column;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}

.laco-cat__media{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,var(--color-steel-light),var(--color-steel))}
.laco-cat__media img{width:100%;height:100%;object-fit:cover}

/* El cuerpo crece para que las tres tarjetas queden a la misma altura */
.laco-cat__body{display:flex;flex-direction:column;flex:1;padding:1.85rem}
.laco-cat__tag{align-self:flex-start;margin-bottom:.9rem;padding:.26rem .75rem;border-radius:100px;background:var(--color-bg-tertiary);font-size:.9rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-subtle)}
.laco-cat__body .laco-h3{font-size:1.7rem;margin-bottom:.85rem}
.laco-cat__body p{margin-bottom:.9rem;font-size:1.3rem;line-height:1.75;color:var(--color-text-muted)}
.laco-cat__body p:last-of-type{margin-bottom:0}
.laco-cat__body strong{color:var(--color-text);font-weight:600}

.laco-cat--eje{border-color:rgba(2,55,120,.28);box-shadow:var(--shadow-md)}
.laco-cat--eje .laco-cat__tag{background:rgba(2,55,120,.1);color:var(--color-secondary);border:1px solid rgba(2,55,120,.2)}
/* margin-top:auto ancla los botones abajo, aunque el texto sea más corto */
.laco-cat__links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:auto;padding-top:1.5rem}

/* ============================================================
   5 · TABLA DE MATERIALES
   ============================================================ */
.laco-tabla-wrap{overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-sm);-webkit-overflow-scrolling:touch}
.laco-tabla{width:100%;min-width:640px;border-collapse:collapse;font-size:1.3rem}
.laco-tabla caption{caption-side:bottom;padding:1rem 1.35rem;text-align:left;font-size:1.1rem;line-height:1.65;color:var(--color-text-subtle);border-top:1px solid var(--color-border)}
.laco-tabla th{background:var(--color-bg-secondary);padding:1.1rem 1.35rem;text-align:left;font-weight:600;color:var(--color-text);border-bottom:2px solid var(--color-border);vertical-align:top}
.laco-tabla td{padding:1.1rem 1.35rem;border-bottom:1px solid var(--color-border);color:var(--color-text-muted);vertical-align:top;line-height:1.7}
.laco-tabla tbody tr:last-child td{border-bottom:none}
.laco-tabla th[scope="row"]{color:var(--color-text);font-weight:600;background:#fff;border-bottom:1px solid var(--color-border)}
.laco-tabla .marca{display:block;margin-top:.35rem;font-size:1.1rem;color:var(--color-text-subtle)}
.laco-swipe{margin-top:.85rem;font-size:1.1rem;color:var(--color-text-subtle);text-align:center}
@media (min-width:768px){.laco-swipe{display:none}}

/* ============================================================
   6 · NORMATIVA
   ============================================================ */
.laco-norma{padding:2.25rem;background:#fff;border:1px solid var(--color-border);border-left:4px solid var(--color-secondary);border-radius:0 var(--radius-lg) var(--radius-lg) 0;box-shadow:var(--shadow-sm)}
.laco-norma + .laco-norma{margin-top:1.5rem}
.laco-norma__tag{display:inline-block;margin-bottom:.9rem;padding:.24rem .75rem;border-radius:100px;background:rgba(2,55,120,.09);border:1px solid rgba(2,55,120,.18);font-size:.9rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-secondary)}
.laco-norma p{margin-bottom:1rem;font-size:1.4rem;line-height:1.85;color:var(--color-text-muted)}
.laco-norma p:last-child{margin-bottom:0}
.laco-norma strong{color:var(--color-text);font-weight:600}

/* ============================================================
   7 · VENTAJAS
   ============================================================ */
.laco-ventajas{display:grid;gap:1.5rem}
@media (min-width:820px){.laco-ventajas{grid-template-columns:repeat(3,minmax(0,1fr))}}
.laco-ventaja{padding:2.25rem;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);text-align:center}
.laco-ventaja__cifra{font-family:var(--font-display);font-size:2.5rem;line-height:1.1;letter-spacing:-.02em;color:var(--color-secondary);margin-bottom:.8rem}
.laco-ventaja .laco-h3{font-size:1.55rem;margin-bottom:.8rem}
.laco-ventaja p{font-size:1.3rem;line-height:1.78;color:var(--color-text-muted)}

/* ============================================================
   8 · REGIONES
   ============================================================ */
.laco-regiones{display:grid;gap:1.5rem}
@media (min-width:760px){.laco-regiones{grid-template-columns:repeat(2,minmax(0,1fr))}}
.laco-region{padding:2rem;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.laco-region__clima{display:inline-block;margin-bottom:.9rem;padding:.24rem .75rem;border-radius:100px;font-size:.9rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.laco-region--frio .laco-region__clima{background:#E7EEF8;color:#1D4E89}
.laco-region--templado .laco-region__clima{background:#E4F1EA;color:#166534}
.laco-region--calido .laco-region__clima{background:#FBF0DC;color:#92400E}
.laco-region--humedo .laco-region__clima{background:#FBE7E9;color:var(--color-accent-dark)}
.laco-region .laco-h3{font-size:1.55rem;margin-bottom:.6rem}
.laco-region__ciudades{margin-bottom:.9rem;font-size:1.15rem;line-height:1.6;color:var(--color-text-subtle)}
.laco-region p{font-size:1.3rem;line-height:1.78;color:var(--color-text-muted)}

/* ============================================================
   9 · NOTA
   ============================================================ */
.laco-nota{margin-top:2.5rem;padding:1.6rem 1.9rem;background:var(--color-bg-tertiary);border-radius:var(--radius-lg);font-size:1.35rem;line-height:1.85;color:var(--color-text-muted)}
.laco-nota strong{color:var(--color-text);font-weight:600}

/* ============================================================
   10 · BOTONES Y CIERRE
   ============================================================ */
.laco-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;max-width:100%;padding:.9rem 1.6rem;font-size:1.25rem;font-weight:600;line-height:1.35;text-align:center;border-radius:var(--radius-sm);cursor:pointer;border:none;background:linear-gradient(135deg,var(--color-accent) 0%,var(--color-accent-dark) 100%);color:#fff;box-shadow:var(--shadow-md)}
.laco-btn:hover{color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.laco-btn--ghost{background:none;border:1px solid var(--color-border-dark);color:var(--color-secondary);box-shadow:none}
.laco-btn--ghost:hover{background:var(--color-bg-secondary);color:var(--color-secondary);box-shadow:none;transform:none}

.laco-cierre{position:relative;isolation:isolate;padding:6.5rem 0;color:#fff;text-align:center}
.laco-cierre::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-100vw;right:-100vw;background:var(--color-bg-dark)}
.laco-cierre .laco-h2{color:#fff}
.laco-cierre .laco-eyebrow{color:rgba(255,255,255,.62)}
.laco-cierre__texto{max-width:58ch;margin:1.25rem auto 0;font-size:1.45rem;line-height:1.78;color:rgba(255,255,255,.82)}
.laco-cierre__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:.9rem;margin-top:2.5rem}
.laco-cierre .laco-btn--ghost{border-color:rgba(255,255,255,.38);color:#fff}
.laco-cierre .laco-btn--ghost:hover{background:rgba(255,255,255,.12);color:#fff}

/* En pantallas chicas los botones ocupan el ancho y su texto envuelve */
@media (max-width:479px){
  .laco-cat__links,.laco-cierre__cta{flex-direction:column;align-items:stretch}
  .laco-btn{width:100%}
}

/* ============================================================
   11 · IMPRESIÓN
   ============================================================ */
@media print{
  .laco-hero,.laco-cierre{color:#000!important;padding:2rem 0}
  .laco-hero::before,.laco-cierre::before,.laco-section--alt::before{display:none!important}
  .laco-hero__title,.laco-hero__sub,.laco-breadcrumbs,.laco-cierre .laco-h2,.laco-cierre__texto{color:#000!important}
  .laco-section{padding:1.5rem 0}
  .laco-cat,.laco-ventaja,.laco-region,.laco-norma,.laco-tabla-wrap{box-shadow:none;break-inside:avoid}
  .laco-cierre__cta{display:none}
}