/* =========================================================================
   Pisos Home
   Paleta tomada del sitio actual: monocromo (el logo es blanco sobre negro)
   con #FF2A13 como unico acento. Un solo color fuerte sobre base neutra hace
   que el ojo vaya directo a los precios y a los botones de accion.
   ========================================================================= */

:root {
    --negro:        #111111;
    --negro-suave:  #1d1d1d;
    --blanco:       #ffffff;
    --acento:       #ff2a13;
    --acento-oscuro:#d81f0b;
    --texto:        #2b2b2b;
    --texto-suave:  #6b6b6b;
    --borde:        #e4e4e4;
    --fondo:        #f6f6f5;
    --verde:        #1d9d55;

    --ancho: 1200px;
    --radio: 10px;
    --sombra: 0 1px 3px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.05);
    --sombra-alta: 0 4px 12px rgba(0,0,0,.10), 0 16px 40px rgba(0,0,0,.10);
    --transicion: .18s ease;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--texto);
    background: var(--blanco);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: 'Roboto Condensed', 'Roboto', sans-serif;
    font-weight: 900;
    line-height: 1.1;
    color: var(--negro);
    margin: 0 0 .5em;
    letter-spacing: -.01em;
}

h1 { font-size: clamp(2rem, 5vw, 3.4rem); text-transform: uppercase; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); text-transform: uppercase; }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1rem; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

.contenedor {
    width: 100%;
    max-width: var(--ancho);
    margin-inline: auto;
    padding-inline: 20px;
}

.saltar {
    position: absolute; left: -9999px;
    background: var(--acento); color: #fff; padding: 10px 16px; z-index: 999;
}
.saltar:focus { left: 8px; top: 8px; }

/* Visible para lectores de pantalla, oculto en pantalla. */
.visualmente-oculto {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- barra */

.barra-superior {
    background: var(--negro);
    color: rgba(255,255,255,.72);
    font-size: .82rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.barra-superior__interior {
    display: flex; align-items: center; gap: 10px;
    min-height: 38px; flex-wrap: wrap;
}
.barra-superior__destacado { color: #fff; font-weight: 500; }
.barra-superior__separador { opacity: .4; }
.barra-superior__wsp {
    margin-left: auto; color: var(--acento); font-weight: 700;
}
.barra-superior__wsp:hover { color: #fff; }

/* ------------------------------------------------------------- cabecera */

.cabecera {
    background: var(--negro);
    position: sticky; top: 0; z-index: 100;
}
.cabecera__interior {
    display: flex; align-items: center; gap: 28px;
    min-height: 82px;
}
.cabecera__logo img { width: 104px; height: auto; }

.navegacion {
    display: flex; align-items: center; gap: 26px;
    margin-left: auto;
}
.navegacion__enlace {
    color: rgba(255,255,255,.8);
    font-size: .93rem; font-weight: 500;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: color var(--transicion), border-color var(--transicion);
    white-space: nowrap;
}
.navegacion__enlace:hover { color: #fff; }
.navegacion__enlace.es-activo { color: #fff; border-bottom-color: var(--acento); }

.menu-movil__control { display: none; }
.menu-movil__boton { display: none; }

/* -------------------------------------------------------------- botones */

.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 26px;
    font-family: 'Roboto', sans-serif;
    font-size: .95rem; font-weight: 700;
    border: 2px solid transparent; border-radius: var(--radio);
    cursor: pointer; text-align: center;
    transition: all var(--transicion);
}
.boton--acento { background: var(--acento); color: #fff; }
.boton--acento:hover { background: var(--acento-oscuro); transform: translateY(-1px); }
.boton--negro { background: var(--negro); color: #fff; }
.boton--negro:hover { background: var(--negro-suave); transform: translateY(-1px); }
.boton--linea { background: transparent; color: var(--negro); border-color: var(--borde); }
.boton--linea:hover { border-color: var(--negro); }
.boton--blanco { background: #fff; color: var(--negro); }
.boton--blanco:hover { background: #f0f0f0; }
.boton--compacto { padding: 9px 18px; font-size: .88rem; }
.boton--ancho { width: 100%; }

/* ----------------------------------------------------------------- hero */

/*
 * Hero y carrusel de portada.
 *
 * Las laminas se apilan en la misma celda de un grid en vez de posicionarse en
 * absoluto: asi la altura de la seccion la fija sola la lamina mas alta y no
 * hay que adivinar un alto fijo que despues se rompe en cada tamano de pantalla.
 */

.hero {
    position: relative;
    background: var(--negro);
    color: #fff;
    overflow: hidden;
}

.hero__laminas { display: grid; }

.hero__lamina {
    grid-area: 1 / 1;
    position: relative;
    display: flex; align-items: center;
    opacity: 0; visibility: hidden;
    /* La visibilidad se apaga recien cuando termina el fundido y se enciende al
       instante. Va junto al opacity porque un elemento a opacidad cero sigue
       siendo enfocable con el tabulador, y visibility:hidden lo saca del paso. */
    transition: opacity .5s ease, visibility 0s .5s;
}
.hero__lamina.es-activa {
    opacity: 1; visibility: visible;
    transition: opacity .5s ease, visibility 0s 0s;
    /* La que entra siempre por encima de la que sale. Sin esto, al pasar de la
       ultima lamina a la primera manda el orden del HTML y la que se esta
       apagando queda tapando a la que aparece durante todo el fundido. */
    z-index: 2;
}

.hero__fondo {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
}
/* La foto institucional es vertical y el piso esta abajo del todo: centrada, el
   recorte de una franja apaisada deja a la vista solo la muralla. */
.hero__fondo--bajo { object-position: center 78%; }

/* Respaldo mientras el producto no tenga foto de ambiente: la foto del tablon
   ampliada a pantalla completa se lee como una muralla de madera. Desenfocada
   se entiende de inmediato como fondo, y el tono, que es lo unico que tiene que
   aportar, se mantiene. La escala tapa el borde translucido que deja el blur. */
.hero__fondo--textura { filter: blur(5px); transform: scale(1.06); }

/* Velo oscuro cargado a la izquierda, que es donde va el texto. El lado derecho
   queda casi limpio para que se siga viendo el tono real del piso, que es lo
   unico que la foto tiene que comunicar. */
.hero__lamina::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(100deg,
        rgba(17,17,17,.94) 0%,
        rgba(17,17,17,.80) 42%,
        rgba(17,17,17,.34) 100%);
}

.hero__grilla {
    position: relative; z-index: 1;   /* sobre el velo */
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
}

.hero__interior {
    padding-block: clamp(60px, 9vw, 120px);
    max-width: 680px;
}
/* Espacio extra abajo para que los puntos no se monten sobre los botones. */
.hero--carrusel .hero__interior { padding-bottom: clamp(78px, 10vw, 132px); }

.hero h1, .hero__titulo { color: #fff; margin-bottom: .35em; }
.hero__titulo {
    font-family: 'Roboto Condensed', 'Roboto', sans-serif;
    font-weight: 900; line-height: 1.05; letter-spacing: -.01em;
    text-transform: uppercase;
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    margin: 0 0 .25em;
}
.hero__titulo-linea {
    display: block;
    font-size: .34em; font-weight: 700;
    letter-spacing: .12em; line-height: 1.3;
    color: rgba(255,255,255,.72);
    margin-bottom: .5em;
}
.hero__bajada {
    font-size: clamp(1rem, 1.6vw, 1.18rem);
    color: rgba(255,255,255,.86);
    margin-bottom: 1.8rem;
}
.hero__acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__sello {
    display: inline-block;
    background: var(--acento); color: #fff;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    font-size: .78rem; padding: 5px 12px; border-radius: 4px;
    margin-bottom: 1.1rem;
}

/* ------------------------------------------------ hero: lamina de oferta */

.hero__precio {
    display: flex; align-items: baseline; flex-wrap: wrap;
    gap: 4px 10px; margin: 0 0 1.1rem;
}
.hero__precio-antes {
    font-size: 1rem; color: rgba(255,255,255,.62);
    text-decoration: line-through;
}
/* El precio va sobre una placa clara y no suelto sobre la foto: el rojo de la
   marca sobre un fondo fotografico oscuro queda justo en el limite de contraste
   legible, y este es el dato que nadie se puede perder. */
.hero__precio-valor {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 900; line-height: 1;
    font-size: clamp(2rem, 4.6vw, 3rem);
    color: var(--acento);
    background: rgba(255,255,255,.94);
    padding: 4px 14px; border-radius: 5px;
}
.hero__precio-unidad {
    font-weight: 700; font-size: 1rem; color: rgba(255,255,255,.82);
}

/* La muestra del tablon, enmarcada en blanco como una foto de catalogo impreso:
   el marco funciona igual sobre un ambiente claro que sobre uno oscuro. */
.hero__muestra {
    position: relative;
    width: clamp(170px, 20vw, 240px);
    border: 9px solid #fff;
    background: #fff;
    box-shadow: 0 18px 44px rgba(0,0,0,.38);
}
.hero__muestra img {
    width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
}
.hero__muestra-sello {
    position: absolute; top: -15px; left: -9px;
    background: var(--acento); color: #fff;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 900; font-size: 1.05rem; letter-spacing: .02em;
    padding: 3px 12px; border-radius: 4px;
}

/* -------------------------------------------------- hero: controles */

.hero__flecha {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 3;
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(17,17,17,.42); color: #fff;
    border: 1px solid rgba(255,255,255,.34);
    cursor: pointer;
    transition: background var(--transicion), border-color var(--transicion);
}
.hero__flecha:hover { background: var(--acento); border-color: var(--acento); }
.hero__flecha--atras { left: 16px; }
.hero__flecha--adelante { right: 16px; }

.hero__puntos {
    position: absolute; z-index: 3;
    left: 0; right: 0; bottom: 20px;
    display: flex; justify-content: center; gap: 9px;
}
.hero__punto {
    width: 34px; height: 4px; padding: 0; border: 0; border-radius: 2px;
    background: rgba(255,255,255,.35); cursor: pointer;
    transition: background var(--transicion);
}
.hero__punto:hover { background: rgba(255,255,255,.7); }
.hero__punto[aria-current="true"] { background: var(--acento); }

.hero__flecha:focus-visible, .hero__punto:focus-visible {
    outline: 2px solid #fff; outline-offset: 3px;
}

/* -------------------------------------------------------------- ventajas */

.ventajas { background: var(--fondo); border-bottom: 1px solid var(--borde); }
.ventajas__grilla {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px; padding-block: 26px;
}
.ventaja { display: flex; gap: 12px; align-items: flex-start; padding: 10px 14px; }
.ventaja__icono { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.ventaja h3 { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: .96rem; margin: 0 0 2px; text-transform: none; }
.ventaja p { font-size: .85rem; color: var(--texto-suave); margin: 0; line-height: 1.45; }

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

.seccion { padding-block: clamp(48px, 7vw, 84px); }
.seccion--fondo { background: var(--fondo); }

.seccion__encabezado {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; margin-bottom: 34px; flex-wrap: wrap;
}
.seccion__encabezado h2 { margin: 0; }
.seccion__bajada { color: var(--texto-suave); margin: 6px 0 0; max-width: 58ch; }
.seccion__titulo-grupo { min-width: 0; }

.etiqueta-seccion {
    display: block;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: .8rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--acento);
    margin-bottom: 6px;
}

/* ------------------------------------------------------- tarjeta producto */

.grilla-productos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 24px;
}

.producto {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: box-shadow var(--transicion), transform var(--transicion);
}
.producto:hover { box-shadow: var(--sombra-alta); transform: translateY(-3px); }

.producto__imagen {
    position: relative; display: block;
    aspect-ratio: 4 / 3; background: var(--fondo);
    overflow: hidden;
}
.producto__imagen img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s ease;
}
.producto:hover .producto__imagen img { transform: scale(1.05); }

/* Marcador para productos cuya fotografia real todavia no llega. */
.sin-imagen {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: repeating-linear-gradient(45deg, #efefee 0 12px, #e7e7e6 12px 24px);
    color: var(--texto-suave);
    font-family: 'Roboto Condensed', sans-serif;
    font-size: .84rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
}

.sello {
    position: absolute; top: 10px; left: 10px;
    background: var(--acento); color: #fff;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 900; font-size: .84rem; letter-spacing: .03em;
    padding: 4px 10px; border-radius: 4px;
}
.sello--agotado { background: var(--texto-suave); }

.producto__cuerpo { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.producto__sku { font-size: .72rem; color: var(--texto-suave); letter-spacing: .05em; text-transform: uppercase; }
.producto__nombre {
    font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 1.02rem;
    text-transform: none; margin: 3px 0 10px; line-height: 1.3;
}
.producto__nombre a:hover { color: var(--acento); }

.precio { margin-top: auto; }
.precio__antes {
    font-size: .86rem; color: var(--texto-suave);
    text-decoration: line-through; margin-right: 6px;
}
.precio__valor {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.65rem; font-weight: 900; color: var(--negro);
    line-height: 1;
}
.precio__unidad { font-size: .9rem; font-weight: 700; color: var(--texto-suave); }
.precio--oferta .precio__valor { color: var(--acento); }
.precio__caja {
    font-size: .84rem; color: var(--texto-suave); margin-top: 4px;
}
.precio__caja strong { color: var(--texto); font-weight: 700; }

.producto__acciones { display: flex; gap: 8px; margin-top: 14px; }
.producto__acciones .boton { flex: 1; padding: 10px 12px; font-size: .86rem; }

/* ------------------------------------------------------------ categorias */

.grilla-categorias {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px;
}
.categoria-tarjeta {
    position: relative; border-radius: var(--radio); overflow: hidden;
    min-height: 260px; display: flex; align-items: flex-end;
    background: var(--negro);
}
.categoria-tarjeta img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: .62; transition: transform .5s ease, opacity var(--transicion);
}
.categoria-tarjeta:hover img { transform: scale(1.06); opacity: .5; }
.categoria-tarjeta__texto { position: relative; padding: 24px; color: #fff; }
.categoria-tarjeta__texto h3 {
    color: #fff; font-size: 1.5rem; text-transform: uppercase; margin-bottom: 4px;
}
.categoria-tarjeta__texto p { font-size: .9rem; color: rgba(255,255,255,.82); margin: 0 0 12px; }
.categoria-tarjeta__desde {
    font-family: 'Roboto Condensed', sans-serif; font-weight: 700;
    color: var(--acento); font-size: 1rem;
}

/* ------------------------------------------------------------- migas */

.migas { background: var(--fondo); border-bottom: 1px solid var(--borde); font-size: .84rem; }
.migas nav { padding-block: 12px; color: var(--texto-suave); }
.migas a:hover { color: var(--acento); }
.migas span[aria-current] { color: var(--texto); font-weight: 500; }

/* ------------------------------------------------------- ficha producto */

.ficha { padding-block: clamp(32px, 5vw, 56px); }
.ficha__grilla {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px); align-items: start;
}
.ficha__galeria {
    /* La columna derecha (precio + calculadora) es mas alta que la foto.
       Con sticky la imagen acompana el scroll en vez de dejar un hueco vacio
       debajo. Sticky tambien crea contexto de posicionamiento, asi que el
       sello de descuento sigue anclado sin necesidad de position:relative. */
    position: sticky; top: 100px;
    border-radius: var(--radio); overflow: hidden;
    border: 1px solid var(--borde); background: var(--fondo);
}
.ficha__galeria img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

.ficha h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: .2em; }
.ficha__sku { font-size: .8rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .06em; }
.ficha__resumen { color: var(--texto-suave); font-size: 1.02rem; }

.ficha__precio {
    background: var(--fondo); border: 1px solid var(--borde);
    border-radius: var(--radio); padding: 20px; margin: 22px 0;
}
.ficha__precio-fila { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ficha__precio .precio__valor { font-size: 2.5rem; }
.ficha__precio-caja {
    margin-top: 8px; padding-top: 12px; border-top: 1px dashed var(--borde);
    font-size: .94rem; color: var(--texto-suave);
}
.ficha__ahorro {
    display: inline-block; background: rgba(29,157,85,.1); color: var(--verde);
    font-weight: 700; font-size: .86rem; padding: 3px 10px; border-radius: 4px;
}

.tabla-tecnica { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: .92rem; }
.tabla-tecnica th, .tabla-tecnica td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.tabla-tecnica th { color: var(--texto-suave); font-weight: 500; width: 45%; }
.tabla-tecnica td { font-weight: 500; }
.tabla-tecnica tr:last-child th, .tabla-tecnica tr:last-child td { border-bottom: none; }

/* ------------------------------------------------- bloques tecnicos */

/*
 * Seccion de detalle tecnico: ocupa el ancho completo, debajo de la ficha.
 * Antes colgaba de la columna derecha y dejaba media pagina en blanco.
 */
.detalle {
    background: var(--fondo);
    border-top: 1px solid var(--borde);
    padding-block: clamp(40px, 6vw, 68px);
}
/*
 * Ocupa el ancho completo del contenedor, el mismo que la grilla de tarjetas
 * tecnicas que va justo debajo, para que ambos bloques queden alineados.
 */
/*
 * La etiqueta y el titulo siguen centrados; solo el parrafo va justificado y a
 * todo el ancho del contenedor, el mismo que ocupa la grilla de tarjetas
 * tecnicas de abajo.
 */
.detalle__intro { margin-bottom: clamp(30px, 4vw, 46px); text-align: center; }
.detalle__intro h2 { margin-bottom: .4em; }
.detalle__intro p {
    color: var(--texto-suave); font-size: 1.03rem; margin: 0;
    text-align: justify;
    /* A este ancho las lineas son largas y el justificado abre huecos entre
       palabras. La particion silabica los reparte y evita los "rios" de
       espacio en blanco; funciona porque el <html> declara lang="es-CL". */
    hyphens: auto;
}

.tecnica {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(246px, 1fr));
    gap: 20px;
    align-items: start;
}
.tecnica__bloque {
    background: #fff; border: 1px solid var(--borde);
    border-radius: var(--radio); padding: 22px;
    height: 100%;
}
.tecnica__bloque h3 { font-size: 1.05rem; text-transform: none; margin-bottom: 4px; }
.tecnica__nota { font-size: .85rem; color: var(--texto-suave); margin-bottom: 12px; }
.tecnica__bloque .tabla-tecnica { margin-top: 0; font-size: .88rem; }
.tecnica__bloque .tabla-tecnica th { width: 46%; padding: 7px 0; }
.tecnica__bloque .tabla-tecnica td { padding: 7px 0; }

.capas {
    list-style: none; counter-reset: capa; padding: 0; margin: 0;
}
.capas li {
    counter-increment: capa; position: relative;
    padding: 8px 0 8px 34px; font-size: .92rem;
    border-bottom: 1px solid var(--borde);
}
.capas li:last-child { border-bottom: none; }
.capas li::before {
    content: counter(capa);
    position: absolute; left: 0; top: 8px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--negro); color: #fff;
    font-size: .74rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

.lista-check { list-style: none; padding: 0; margin: 0; }
.lista-check li {
    position: relative; padding: 7px 0 7px 26px; font-size: .92rem;
}
.lista-check li::before {
    content: '✓'; position: absolute; left: 0; top: 7px;
    color: var(--verde); font-weight: 700;
}

/* -------------------------------------------------------- calculadora */

.calculadora {
    background: var(--negro); color: #fff;
    border-radius: var(--radio); padding: 22px;
}
.calculadora h3 {
    color: #fff; font-size: 1.15rem; margin-bottom: 4px;
    display: flex; align-items: center; gap: 8px;
}
.calculadora__bajada { font-size: .86rem; color: rgba(255,255,255,.62); margin-bottom: 16px; }
.calculadora__campos { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.campo { flex: 1; min-width: 120px; }
.campo label {
    display: block; font-size: .78rem; text-transform: uppercase;
    letter-spacing: .06em; color: rgba(255,255,255,.6); margin-bottom: 5px;
}
.campo input, .campo select {
    width: 100%; padding: 11px 12px;
    border: 1px solid rgba(255,255,255,.18); border-radius: 7px;
    background: rgba(255,255,255,.06); color: #fff;
    font-family: inherit; font-size: 1rem;
}
.campo input:focus, .campo select:focus {
    outline: none; border-color: var(--acento); background: rgba(255,255,255,.1);
}
.campo select option { background: var(--negro); color: #fff; }

.calculadora__resultado {
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.12);
    display: none;
}
.calculadora__resultado.es-visible { display: block; }
.calculadora__linea {
    display: flex; justify-content: space-between; gap: 12px;
    font-size: .9rem; color: rgba(255,255,255,.72); padding: 3px 0;
}
.calculadora__linea strong { color: #fff; font-weight: 700; }
.calculadora__total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12);
}
.calculadora__total span { font-size: .9rem; color: rgba(255,255,255,.72); }
.calculadora__total strong {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.9rem; font-weight: 900; color: var(--acento); line-height: 1;
}
.calculadora__nota { font-size: .78rem; color: rgba(255,255,255,.45); margin: 12px 0 0; }

/* ------------------------------------------------------------ ordenar */

.barra-orden {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 26px;
    padding-bottom: 16px; border-bottom: 1px solid var(--borde);
}
.barra-orden__conteo { font-size: .9rem; color: var(--texto-suave); }
.barra-orden select {
    padding: 9px 12px; border: 1px solid var(--borde); border-radius: 7px;
    font-family: inherit; font-size: .9rem; background: #fff; color: var(--texto);
}

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

/*
 * Contacto, en clave minimalista: todo sobre blanco y separado por lineas
 * finas, sin bloques de color. Un panel oscuro aqui pesaba mas que el propio
 * contenido y era lo primero que veia el ojo, cuando lo importante son los
 * datos y el formulario.
 */

.contacto__intro {
    max-width: 60ch; margin: 0 auto clamp(26px, 4vw, 40px); text-align: center;
}
.contacto__intro h1 { margin-bottom: .3em; }
.contacto__intro p { color: var(--texto-suave); font-size: 1.02rem; margin: 0; }

/*
 * Banner de la pagina de contacto.
 *
 * Oculto por defecto y encendido solo desde 901px: asi la imagen ni siquiera se
 * descarga en celular, donde la pagina se queda con lo que importa (formulario
 * y datos). Un display:none sobre un <img> no evitaria la descarga.
 */
.contacto__banner { display: none; }

@media (min-width: 901px) {
    .contacto__banner {
        display: block;
        aspect-ratio: 4 / 1;
        margin-bottom: clamp(30px, 4vw, 44px);
        border-radius: var(--radio);
        background-image: url('../images/instalacion/instalacion-piso-vinilico-medicion-tablones.jpg');
        background-size: cover;
        /* Encuadre hacia el centro-alto: ahi estan las manos marcando el
           tablon, que es lo que se quiere mostrar. */
        background-position: center 42%;
        background-repeat: no-repeat;
    }
}

.contacto {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(30px, 5vw, 64px); align-items: start;
}

.canal {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 18px 0; border-bottom: 1px solid var(--borde);
}
.canal:first-child { padding-top: 0; }
.canal__icono {
    flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
    background: var(--fondo); color: var(--texto-suave);
    display: flex; align-items: center; justify-content: center;
}
.canal--wsp .canal__icono { background: #25d366; color: #fff; }
.canal__texto { min-width: 0; }
.canal__tipo {
    display: block; font-size: .74rem; text-transform: uppercase;
    letter-spacing: .09em; color: var(--texto-suave); margin-bottom: 3px;
}
.canal__valor {
    display: block;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.28rem; font-weight: 900; color: var(--negro);
    line-height: 1.2; word-break: break-word;
}
.canal__valor:hover { color: var(--acento); }
.canal__nota { display: block; font-size: .85rem; color: var(--texto-suave); margin-top: 3px; }

.bodega { padding-top: 22px; }
.bodega__direccion {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.28rem; font-weight: 900; color: var(--negro);
    line-height: 1.3; margin: 3px 0 16px;
}
.bodega__aviso {
    font-size: .87rem; line-height: 1.55; color: var(--texto-suave);
    margin: 16px 0;
}

.horarios { width: 100%; border-collapse: collapse; font-size: .91rem; }
.horarios th, .horarios td {
    padding: 9px 0; border-bottom: 1px solid var(--borde);
    text-align: left; font-weight: 400;
}
.horarios th { color: var(--texto-suave); }
.horarios td { color: var(--texto); font-weight: 700; text-align: right; }
.horarios tr:first-child th, .horarios tr:first-child td { border-top: 1px solid var(--borde); }
.horarios tr.es-cerrado th, .horarios tr.es-cerrado td {
    color: #a8a8a8; font-weight: 400;
}

.contacto__formulario {
    background: var(--fondo);
    border-radius: var(--radio); padding: clamp(22px, 3vw, 32px);
}
.contacto__formulario h2 { font-size: 1.35rem; margin-bottom: 4px; }
.formulario__bajada { color: var(--texto-suave); font-size: .92rem; margin-bottom: 20px; }

.campo-form { margin-bottom: 16px; }
.campo-form label {
    display: block; font-size: .82rem; font-weight: 700; margin-bottom: 5px;
}
.campo-form input, .campo-form textarea {
    width: 100%; padding: 11px 13px;
    border: 1px solid var(--borde); border-radius: 8px;
    font: inherit; font-size: .97rem; color: var(--texto); background: #fff;
}
.campo-form input:focus, .campo-form textarea:focus {
    outline: none; border-color: var(--acento);
    box-shadow: 0 0 0 3px rgba(255,42,19,.1);
}
.campo-form textarea { resize: vertical; min-height: 120px; }
.campo-form .error { display: block; color: #c0341d; font-size: .83rem; margin-top: 4px; }

/* Campo marcado al validar en vivo. El borde rojo ubica el problema de un
   vistazo, que es lo que reemplaza al resumen de errores de arriba: ese
   empujaba el formulario hacia abajo cada vez que aparecia. */
.campo-form input.tiene-error,
.campo-form textarea.tiene-error {
    border-color: #c0341d;
    background: #fffaf9;
}
.campo-form input.tiene-error:focus,
.campo-form textarea.tiene-error:focus {
    border-color: #c0341d;
    box-shadow: 0 0 0 3px rgba(192,52,29,.12);
}

.campo-form-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* La trampa tiene que ser invisible pero seguir siendo un campo real del
   formulario: por eso se saca de la pantalla en vez de usar display:none,
   que algunos robots detectan y saltan. */
.trampa {
    position: absolute; left: -9999px; top: -9999px;
    width: 1px; height: 1px; overflow: hidden;
}

.mensaje-ok {
    background: #eaf7ef; border: 1px solid #bfe5cd; color: #16653c;
    border-radius: var(--radio); padding: 16px 18px; margin-bottom: 20px;
}
.mensaje-ok strong { display: block; margin-bottom: 4px; }
.mensaje-ok p { margin: 0; font-size: .9rem; }

/* Mismo bloque que .mensaje-ok pero en rojo: cuando el formulario vuelve con
   errores, el visitante aterriza arriba del formulario y necesita entender de
   una sola mirada que falta completar algo. */
.mensaje-error {
    background: #fdecea; border: 1px solid #f3c1b9; color: #8e2415;
    border-radius: var(--radio); padding: 16px 18px; margin-bottom: 20px;
}
.mensaje-error strong { display: block; margin-bottom: 6px; }
.mensaje-error ul { margin: 0; padding-left: 18px; font-size: .9rem; }
.mensaje-error li { margin-top: 2px; }
.mensaje-error:focus { outline: 2px solid #c0341d; outline-offset: 3px; }

.formulario__legal {
    font-size: .8rem; color: var(--texto-suave);
    margin: 14px 0 0; line-height: 1.5;
}

/* --------------------------------------------------------- nosotros */

.nosotros__grilla {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(26px, 4vw, 52px); align-items: start;
    margin-bottom: clamp(38px, 5vw, 62px);
}
.nosotros__foto {
    margin: 0; border-radius: var(--radio); overflow: hidden;
    position: sticky; top: 100px;
}
.nosotros__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.nosotros__texto h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-top: 0; }
.nosotros__texto h2 + p { margin-top: 0; }
.nosotros__texto h2:not(:first-child) { margin-top: 1.6em; }
.nosotros__texto p { color: var(--texto-suave); line-height: 1.7; }

.nosotros__pilares {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 20px; margin-bottom: clamp(38px, 5vw, 62px);
}
.nosotros__pilar {
    background: #fff; border: 1px solid var(--borde);
    border-radius: var(--radio); padding: 22px;
}
.nosotros__numero {
    display: block;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 2.4rem; font-weight: 900; line-height: 1;
    color: var(--acento); margin-bottom: 10px;
}
.nosotros__numero small { font-size: 1.1rem; font-weight: 700; }
.nosotros__pilar h3 { font-size: 1rem; text-transform: none; margin-bottom: 4px; }
.nosotros__pilar p { font-size: .89rem; color: var(--texto-suave); line-height: 1.5; margin: 0; }

.nosotros__bodega {
    background: var(--fondo); border-radius: var(--radio);
    padding: clamp(24px, 4vw, 40px);
}
.nosotros__bodega h2 { margin-bottom: .4em; }
.nosotros__bodega p { color: var(--texto-suave); max-width: 62ch; }

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

.grilla-articulos {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 26px;
}

.articulo-tarjeta {
    background: #fff; border: 1px solid var(--borde);
    border-radius: var(--radio); overflow: hidden;
    display: flex; flex-direction: column;
    transition: box-shadow var(--transicion), transform var(--transicion);
}
.articulo-tarjeta:hover { box-shadow: var(--sombra-alta); transform: translateY(-3px); }

.articulo-tarjeta__imagen {
    position: relative; display: block;
    aspect-ratio: 16 / 9; background: var(--fondo); overflow: hidden;
}
.articulo-tarjeta__imagen img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s ease;
}
.articulo-tarjeta:hover .articulo-tarjeta__imagen img { transform: scale(1.04); }

.articulo-tarjeta__cuerpo { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.articulo-tarjeta__meta {
    font-size: .76rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--texto-suave);
}
.articulo-tarjeta__titulo {
    font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 1.08rem;
    text-transform: none; line-height: 1.35; margin: 6px 0 8px;
}
.articulo-tarjeta__titulo a:hover { color: var(--acento); }
.articulo-tarjeta__resumen {
    font-size: .91rem; color: var(--texto-suave); line-height: 1.55; margin: 0 0 14px;
}
.articulo-tarjeta__enlace {
    margin-top: auto; font-size: .89rem; font-weight: 700; color: var(--acento);
}
.articulo-tarjeta__enlace:hover { color: var(--acento-oscuro); }

/* ------------------------------------------------- articulo y paginas */

.articulo__cabecera { max-width: 74ch; margin: 0 auto clamp(22px, 3vw, 32px); text-align: center; }
.articulo__cabecera h1 { font-size: clamp(1.7rem, 3.8vw, 2.8rem); margin-bottom: .3em; }
.articulo__meta { font-size: .88rem; color: var(--texto-suave); margin: 0; }
a.etiqueta-seccion:hover { color: var(--acento-oscuro); }

.articulo__portada {
    margin: 0 0 clamp(26px, 4vw, 40px);
    border-radius: var(--radio); overflow: hidden;
}
.articulo__portada img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/*
 * Cuerpo del articulo. El ancho se limita a unos 72 caracteres porque es el
 * largo de linea donde el ojo salta de una a otra sin perderse; a todo el ancho
 * del contenedor un texto largo se vuelve incomodo de seguir.
 */
.articulo__cuerpo {
    max-width: 72ch; margin-inline: auto;
    font-size: 1.06rem; line-height: 1.75;
}
.articulo__cuerpo p { margin: 0 0 1.15em; text-align: justify; hyphens: auto; }
.articulo__cuerpo h3 {
    font-size: clamp(1.25rem, 2.2vw, 1.55rem);
    text-transform: none; margin: 1.8em 0 .6em;
}
.articulo__cuerpo h4 { font-size: 1.12rem; text-transform: none; margin: 1.5em 0 .5em; }
.articulo__cuerpo ul { list-style: none; padding: 0; margin: 0 0 1.4em; }
.articulo__cuerpo ul li {
    position: relative; padding: 10px 0 10px 26px;
    border-bottom: 1px solid var(--borde);
}
.articulo__cuerpo ul li:last-child { border-bottom: none; }
.articulo__cuerpo ul li::before {
    content: ''; position: absolute; left: 0; top: 19px;
    width: 7px; height: 7px; border-radius: 50%; background: var(--acento);
}
.articulo__cuerpo strong { color: var(--negro); font-weight: 700; }

/* Los enlaces del cuerpo tienen que verse.
   La regla global deja los <a> en color heredado y sin subrayado, que es lo
   correcto en la navegacion y en las tarjetas, pero dentro de un articulo un
   enlace invisible es un enlace que nadie sigue: los articulos existen en
   buena parte para llevar al catalogo y a la calculadora. */
.articulo__cuerpo a {
    color: var(--acento); font-weight: 600;
    text-decoration: underline; text-underline-offset: 3px;
}
.articulo__cuerpo a:hover { color: var(--acento-oscuro); }

/* Listas numeradas. La lista con vinetas de arriba pierde el orden, y en una
   guia de instalacion el orden ES el contenido. */
.articulo__cuerpo ol { padding-left: 1.35em; margin: 0 0 1.4em; }
.articulo__cuerpo ol li { padding: 7px 0; }

/* Fotos intercaladas en el texto. */
.articulo__cuerpo figure { margin: 1.9em 0; }
.articulo__cuerpo figure img {
    display: block; width: 100%; height: auto;
    border-radius: var(--radio);
}
.articulo__cuerpo figcaption {
    margin-top: 8px; font-size: .89rem;
    color: var(--texto-suave); text-align: center;
}

/* Recuadro para el dato que no se puede pasar por alto.
   Un piso flotante sin junta de dilatacion se abomba, y esa advertencia se
   diluye si va como un parrafo mas entre los otros veinte. */
.articulo__cuerpo .aviso {
    margin: 1.9em 0; padding: 18px 20px;
    background: var(--fondo);
    border-left: 4px solid var(--acento);
    border-radius: 0 var(--radio) var(--radio) 0;
}
.articulo__cuerpo .aviso p { text-align: left; }
.articulo__cuerpo .aviso p:last-child { margin-bottom: 0; }

/* Los documentos legales llevan numeracion propia (A.-, B.-) y parrafos mas
   densos: no necesitan el realce de los articulos. */
.articulo__cuerpo--legal { font-size: 1rem; line-height: 1.7; }
.articulo__cuerpo--legal h3 {
    font-size: 1.12rem; margin: 2em 0 .5em;
    padding-bottom: 6px; border-bottom: 2px solid var(--borde);
}

.articulo__cierre {
    max-width: 72ch; margin: clamp(34px, 5vw, 52px) auto 0;
    padding: 24px; background: var(--fondo);
    border-radius: var(--radio); text-align: center;
}
.articulo__cierre h2 { font-size: 1.35rem; margin-bottom: .4em; }
.articulo__cierre p { color: var(--texto-suave); margin: 0 0 16px; }
.articulo__cierre-acciones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------- cta */

.cta-franja {
    background: var(--acento); color: #fff;
    padding-block: clamp(40px, 6vw, 64px);
}
.cta-franja h2 { color: #fff; }
.cta-franja p { color: rgba(255,255,255,.9); max-width: 56ch; margin-inline: auto; }
.cta-franja__interior { text-align: center; }
.cta-franja__acciones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

/* ---------------------------------------------------------------- pie */

.pie { background: var(--negro); color: rgba(255,255,255,.66); font-size: .9rem; }
.pie__interior {
    display: grid; grid-template-columns: 2fr 1fr 1fr;
    gap: 40px; padding-block: 52px;
}
.pie__marca img { width: 110px; margin-bottom: 14px; }
.pie__marca p { max-width: 42ch; line-height: 1.6; }
.pie__columna { display: flex; flex-direction: column; gap: 9px; }
.pie__columna h3 {
    color: #fff; font-size: .84rem; letter-spacing: .12em;
    text-transform: uppercase; margin-bottom: 6px;
}
.pie__columna a:hover { color: var(--acento); }
.pie__nota { color: rgba(255,255,255,.4); font-size: .84rem; margin: 4px 0 0; }
.pie__legal {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-block: 18px; font-size: .82rem; color: rgba(255,255,255,.4);
}
.pie__legal p { margin: 0; }
.pie__legal-interior {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
}
.pie__legal-enlaces { display: flex; gap: 18px; flex-wrap: wrap; }
.pie__legal-enlaces a:hover { color: var(--acento); }

/* ------------------------------------------------------- wsp flotante */

.wsp-flotante {
    position: fixed; right: 20px; bottom: 20px; z-index: 200;
    width: 54px; height: 54px; border-radius: 50%;
    background: #25d366; color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.22);
    transition: transform var(--transicion);
}
.wsp-flotante:hover { transform: scale(1.08); }

/* --------------------------------------------------------------- movil */

@media (max-width: 900px) {
    /* La muestra del tablon sale de la lamina: a este ancho le roba el espacio
       al texto y deja el titulo partido en cuatro lineas. El tono del piso lo
       sigue mostrando la foto de fondo, y el tablon se ve completo en la ficha. */
    .hero__grilla { grid-template-columns: 1fr; }
    .hero__muestra { display: none; }
    /* Sin la muestra el texto ocupa todo el ancho y las flechas le caen encima.
       Se cambia de lamina deslizando o con los puntos, que se quedan porque son
       los que avisan cuantas laminas hay. */
    .hero__flecha { display: none; }
    /* En vertical el texto ya no ocupa solo la izquierda, asi que el velo se
       reparte de arriba abajo en vez de en diagonal. */
    .hero__lamina::after {
        background: linear-gradient(180deg,
            rgba(17,17,17,.80) 0%,
            rgba(17,17,17,.68) 58%,
            rgba(17,17,17,.86) 100%);
    }

    .ficha__grilla { grid-template-columns: 1fr; }
    /* El formulario primero: quien entra a Contacto desde el celular viene a
       escribir, no a leer el horario. */
    .contacto { grid-template-columns: 1fr; }
    .contacto__formulario { order: -1; }
    .nosotros__grilla { grid-template-columns: 1fr; }
    .nosotros__foto { position: static; }
    /* En una sola columna la foto va arriba del todo: fijarla no aporta nada
       y taparia el contenido al hacer scroll. */
    .ficha__galeria { position: static; }
    .pie__interior { grid-template-columns: 1fr 1fr; }
    .pie__marca { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    .menu-movil__boton {
        display: flex; flex-direction: column; justify-content: center; gap: 5px;
        margin-left: auto; width: 42px; height: 42px; cursor: pointer; padding: 9px;
    }
    .menu-movil__boton span {
        display: block; height: 2px; width: 100%; background: #fff; border-radius: 2px;
        transition: transform var(--transicion), opacity var(--transicion);
    }
    .navegacion {
        display: none;
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--negro-suave);
        padding: 8px 20px 18px;
        border-top: 1px solid rgba(255,255,255,.08);
    }
    .menu-movil__control:checked ~ .navegacion { display: flex; }
    .navegacion__enlace {
        padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.07);
    }
    .navegacion__enlace.es-activo { border-bottom-color: var(--acento); }
    .navegacion .boton { margin-top: 12px; }

    .barra-superior__interior { justify-content: center; font-size: .76rem; }
    .barra-superior__wsp { margin-left: 0; }
    .barra-superior__separador, .barra-superior__interior span:nth-child(3) { display: none; }

    .hero__acciones .boton { flex: 1 1 100%; }

    .grilla-productos { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; }
    .producto__cuerpo { padding: 12px 13px 14px; }
    .precio__valor { font-size: 1.35rem; }
    .producto__acciones { flex-direction: column; }

    .pie__interior { grid-template-columns: 1fr; gap: 28px; padding-block: 38px; }
    .seccion__encabezado { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
    .producto:hover { transform: none; }
}