/* ================================================================
   COTIZADOR MODULAR COLOMBIA — cotizador.css
   Estilos propios del cotizador (prefijo cz-) + impresión del documento.
   Reutiliza los tokens de styles.css (--primary, --accent, --gray-*, --radius,
   --shadow*, --transition). NO redefine ninguno de esos tokens.
   Ver ESPEC-COTIZADOR.md §8 (diseño) y el resto de la espec donde describe
   componentes (pasos, tarjetas, niveles, documento, impresión, implantación).
   ================================================================ */

/* ----------------------------------------------------------------
   0.0 Navbar — ajuste SOLO para esta página (no toca styles.css ni las
   demás páginas). Causa raíz: el navbar es transparent siempre (styles.css
   linea ~82); el logo usa un drop-shadow grande (blur 20px) pensado para
   quedar sobre el hero oscuro, y se supone que se reduce con la clase
   ".navbar.past-hero" al hacer scroll — pero ningún script de ninguna
   página agrega esa clase (queda huérfana en todo el sitio). En las demás
   páginas casi no se nota porque su hero es alto; el hero del cotizador es
   más corto, así que ese logo sobredimensionado con sombra grande queda
   flotando (con su sombra difuminada de "mancha gris") sobre el contenido
   blanco al hacer scroll. Aquí se deja el logo permanentemente en un
   tamaño y sombra contenidos (el mismo espíritu de ".past-hero", pero sin
   depender de una clase que nunca llega).
   ---------------------------------------------------------------- */
body.cz-pagina .nav-logo-img {
    height: 55px;
    top: 2px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

@media (max-width: 768px) {
    body.cz-pagina .nav-logo-img {
        height: 46px;
        top: 2px;
    }
}

/* ----------------------------------------------------------------
   0. Base y utilidades
   ---------------------------------------------------------------- */
.cz-app,
.cz-hero,
.cz-barra,
.cz-doc {
    font-family: 'Open Sans', sans-serif;
    color: var(--text);
}

.cz-app :focus-visible,
.cz-hero :focus-visible,
.cz-barra :focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.cz-app button,
.cz-app input,
.cz-app select,
.cz-app textarea {
    font-family: inherit;
    font-size: 1rem;
}

.cz-app .btn {
    min-height: 44px;
}

/* El atributo/propiedad IDL "hidden" debe ganar SIEMPRE, sin importar qué otra
   regla de este archivo le dé display a ese mismo elemento (ej. .cz-detalle,
   .cz-carga-error): si no, un componente "hidden" por JS se ve como una caja
   vacía en pantalla. */
.cz-app [hidden],
.cz-barra[hidden] {
    display: none !important;
}

/* styles.css define .btn-outline pensado para fondos oscuros (texto blanco,
   borde blanco translúcido: se usa sobre el hero con foto). Casi todo el
   cotizador vive sobre fondo blanco (pasos, documento, barra móvil), así que
   aquí se corrige a un outline oscuro legible — si no, el texto queda blanco
   sobre blanco e invisible (botón "← Atrás", "Descargar plano", etc.). */
.cz-app .btn-outline,
.cz-barra .btn-outline {
    color: var(--primary);
    border-color: var(--gray-200);
}

.cz-app .btn-outline:hover,
.cz-app .btn-outline:focus-visible,
.cz-barra .btn-outline:hover,
.cz-barra .btn-outline:focus-visible {
    background: var(--gray-100);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
}

.cz-btn-whatsapp {
    background: #25d366;
    color: #fff;
    text-decoration: none;
}

.cz-btn-whatsapp:hover,
.cz-btn-whatsapp:focus-visible {
    background: #1da851;
    transform: translateY(-2px);
}

/* ----------------------------------------------------------------
   1. Hero
   ---------------------------------------------------------------- */
.cz-hero {
    position: relative;
    min-height: 42vh;
    display: flex;
    align-items: center;
    padding: 132px 0 56px;
    color: var(--white);
    overflow: hidden;
}

.cz-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(rgba(10, 10, 10, .74), rgba(10, 10, 10, .84)),
        url('imagenes/casa-en-metal-prefabricada-176-m2.webp') center/cover no-repeat;
}

.cz-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.cz-hero-inner h1 {
    font-size: clamp(1.7rem, 4.6vw, 2.9rem);
    line-height: 1.18;
    margin-bottom: 16px;
}

.cz-hero-inner h1 span {
    color: var(--accent-light);
}

.cz-hero-sub {
    font-size: clamp(.95rem, 1.6vw, 1.15rem);
    color: rgba(255, 255, 255, .88);
    max-width: 60ch;
    margin: 0 auto 24px;
}

.cz-hero-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    list-style: none;
}

.cz-hero-badges li {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .28);
    color: var(--white);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .02em;
    padding: 8px 16px;
    border-radius: 50px;
    backdrop-filter: blur(2px);
}

@media (max-width: 480px) {
    .cz-hero {
        padding: 116px 0 44px;
        min-height: auto;
    }
}

/* ----------------------------------------------------------------
   2. App: indicador de pasos, layout de columnas, resumen y barra
   ---------------------------------------------------------------- */
.cz-app {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 16px 80px;
}

.cz-carga-error {
    max-width: 520px;
    margin: 40px auto;
    text-align: center;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 36px 24px;
    display: grid;
    gap: 18px;
    justify-items: center;
}

.cz-indicador {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 28px;
}

.cz-indicador-paso {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: .74rem;
    letter-spacing: .02em;
    color: var(--text-muted);
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 50px;
    padding: 7px 15px;
    white-space: nowrap;
}

.cz-indicador-activo {
    background: var(--primary);
    color: var(--accent-light);
    border-color: var(--primary);
}

.cz-indicador-completado {
    background: var(--white);
    color: var(--accent-dark);
    border-color: var(--accent);
}

.cz-indicador-completado::before {
    content: "✓ ";
}

.cz-layout {
    display: block;
}

.cz-pasos {
    min-width: 0;
}

.cz-paso {
    background: var(--white);
}

.cz-paso > h2 {
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    color: var(--primary);
    margin-bottom: 20px;
}

.cz-paso > h2:focus {
    outline: none;
}

.cz-resumen {
    display: none;
}

.cz-resumen-vacio {
    color: var(--text-muted);
    font-size: .92rem;
    text-align: center;
    padding: 8px 0;
}

.cz-resumen-foto {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    margin-bottom: 12px;
}

.cz-resumen h4 {
    font-size: 1.05rem;
    color: var(--primary);
    margin-bottom: 4px;
}

.cz-resumen p {
    font-size: .88rem;
    color: var(--text-light);
    margin-bottom: 4px;
}

.cz-resumen-total {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--accent-dark);
    margin: 8px 0 14px !important;
}

.cz-resumen .btn {
    width: 100%;
    justify-content: center;
}

.cz-barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    box-shadow: var(--shadow-xl);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}

.cz-barra[hidden] {
    display: none;
}

.cz-barra-nombre {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: .84rem;
    color: var(--primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.cz-barra-total {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: .96rem;
    color: var(--accent-dark);
    white-space: nowrap;
}

.cz-barra .btn {
    flex-shrink: 0;
    padding: 10px 18px;
    font-size: .74rem;
}

@media (min-width: 1024px) {
    .cz-layout {
        display: grid;
        grid-template-columns: 1fr 340px;
        gap: 40px;
        align-items: start;
    }

    .cz-resumen {
        display: block;
        position: sticky;
        top: 96px;
        background: var(--white);
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
        padding: 22px;
    }

    .cz-barra {
        display: none !important;
    }
}

/* ----------------------------------------------------------------
   3. Paso 1 — pestañas, rejilla de tarjetas, detalle
   ---------------------------------------------------------------- */
.cz-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    margin-bottom: 22px;
    scrollbar-width: thin;
}

.cz-tab {
    flex-shrink: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: .82rem;
    color: var(--text);
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 50px;
    padding: 10px 20px;
    cursor: pointer;
    transition: var(--transition);
    min-height: 42px;
}

.cz-tab:hover {
    border-color: var(--accent);
    color: var(--accent-dark);
}

.cz-tab-activo {
    background: var(--primary);
    color: var(--accent-light);
    border-color: var(--primary);
}

.cz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 20px;
}

.cz-tarjeta {
    display: flex;
    flex-direction: column;
    text-align: left;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: var(--transition);
    padding: 0;
}

.cz-tarjeta:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--gray-200);
}

.cz-tarjeta-activa {
    border: 2px solid var(--accent);
    box-shadow: var(--shadow-gold);
}

.cz-tarjeta-visual {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--gray-100);
    overflow: hidden;
}

.cz-tarjeta-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.cz-tarjeta:hover .cz-tarjeta-visual img {
    transform: scale(1.05);
}

.cz-tarjeta-area {
    position: absolute;
    left: 10px;
    bottom: 10px;
    background: rgba(10, 10, 10, .78);
    color: var(--white);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: .74rem;
    padding: 4px 10px;
    border-radius: 50px;
}

.cz-tarjeta-tag {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: .68rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent-dark);
    padding: 10px 14px 0;
}

.cz-tarjeta-nombre {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--primary);
    padding: 4px 14px 0;
    line-height: 1.3;
}

.cz-tarjeta-precio {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: .9rem;
    color: var(--accent-dark);
    padding: 8px 14px 14px;
    margin-top: auto;
}

.cz-tarjeta-medida {
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    padding: 34px 18px;
    background: var(--gray-50);
    border: 2px dashed var(--gray-200);
    min-height: 220px;
}

.cz-tarjeta-medida:hover {
    border-color: var(--accent);
    background: var(--white);
}

.cz-tarjeta-medida .cz-tarjeta-nombre {
    padding: 0;
}

.cz-tarjeta-icono {
    color: var(--accent-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cz-detalle {
    margin-top: 24px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 24px;
    display: grid;
    gap: 24px;
    scroll-margin-top: 96px;
}

@media (min-width: 768px) {
    .cz-detalle {
        grid-template-columns: minmax(0, 42%) 1fr;
        padding: 28px;
    }
}

.cz-detalle-galeria {
    display: grid;
    gap: 10px;
    align-content: start;
}

.cz-detalle-foto {
    display: block;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.cz-detalle-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cz-detalle-mini {
    width: 96px;
    height: 72px;
    padding: 0;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: var(--gray-50);
}

.cz-detalle-mini:hover {
    border-color: var(--accent);
}

.cz-detalle-mini img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cz-detalle-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: var(--gray-50);
    border: 1px dashed var(--gray-200);
    border-radius: var(--radius);
    color: var(--accent-dark);
}

.cz-detalle-info h3 {
    font-size: 1.3rem;
    color: var(--primary);
    margin-bottom: 10px;
}

.cz-detalle-info > p {
    color: var(--text-light);
    margin-bottom: 14px;
}

.cz-detalle-espacios {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 14px;
    font-size: .88rem;
}

.cz-detalle-espacios td {
    padding: 6px 0;
    border-bottom: 1px dashed var(--gray-200);
    color: var(--text-light);
}

.cz-detalle-espacios td:last-child {
    text-align: right;
    font-weight: 600;
    color: var(--primary);
}

.cz-detalle-cta {
    margin-top: 6px;
}

@media (max-width: 480px) {
    .cz-detalle-cta {
        width: 100%;
        justify-content: center;
    }
}

/* Chips reutilizables (detalle y documento) */
.cz-doc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 14px;
}

.cz-chip {
    background: var(--gray-100);
    color: var(--text);
    font-size: .78rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 50px;
    border: 1px solid var(--gray-200);
}

.cz-aviso {
    background: #fdf6e9;
    border: 1px solid var(--accent-light);
    color: var(--accent-dark);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: .86rem;
    margin: 10px 0;
}

.cz-aviso:empty {
    display: none;
}

/* Lightbox de la foto grande */
.cz-lightbox {
    border: none;
    padding: 0;
    background: transparent;
    max-width: 92vw;
    max-height: 92vh;
}

.cz-lightbox::backdrop {
    background: rgba(10, 10, 10, .86);
}

.cz-lightbox img {
    display: block;
    max-width: 92vw;
    max-height: 88vh;
    border-radius: 8px;
}

.cz-lightbox-cerrar {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: var(--primary-dark);
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow);
}

.cz-lightbox-cerrar:hover {
    background: var(--accent-light);
}

/* ----------------------------------------------------------------
   4. Campos de formulario reutilizables
   ---------------------------------------------------------------- */
.cz-campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
    min-width: 0;
}

.cz-campo-ancho {
    grid-column: 1 / -1;
}

.cz-campo label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: .84rem;
    color: var(--primary);
}

.cz-campo input,
.cz-campo select,
.cz-campo textarea {
    padding: 12px 14px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--text);
    min-height: 44px;
    transition: var(--transition);
    width: 100%;
}

.cz-campo textarea {
    min-height: 96px;
    resize: vertical;
}

.cz-campo input:hover,
.cz-campo select:hover,
.cz-campo textarea:hover {
    border-color: var(--gray-200);
}

.cz-campo input:focus,
.cz-campo select:focus,
.cz-campo textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(201, 165, 92, .25);
    outline: none;
}

.cz-campo input:disabled {
    background: var(--gray-50);
    color: var(--text-muted);
    cursor: not-allowed;
}

.cz-campo input[aria-invalid="true"],
.cz-campo select[aria-invalid="true"],
.cz-campo textarea[aria-invalid="true"] {
    border-color: #c0392b;
}

.cz-campo-error {
    color: #c0392b;
    font-size: .8rem;
    font-weight: 600;
    min-height: 1.1em;
}

.cz-campo-error:empty {
    display: none;
}

.cz-campo-ayuda {
    color: var(--text-muted);
    font-size: .8rem;
}

.cz-contador {
    align-self: flex-end;
    color: var(--text-muted);
    font-size: .76rem;
}

.cz-campo-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .9rem;
    color: var(--text-light);
    line-height: 1.5;
    cursor: pointer;
    margin-bottom: 18px;
}

.cz-campo-checkbox input {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--accent-dark);
    cursor: pointer;
}

.cz-campo-checkbox a {
    color: var(--accent-dark);
    text-decoration: underline;
}

.cz-habeas {
    padding: 14px 16px;
    background: var(--gray-50);
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
}

.cz-fieldset {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 22px;
    margin-bottom: 22px;
    display: grid;
    gap: 0 20px;
}

.cz-fieldset legend {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--primary);
    padding: 0 8px;
}

@media (min-width: 640px) {
    .cz-fieldset {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .cz-fieldset > legend {
        grid-column: 1 / -1;
    }
}

#czForm {
    display: block;
}

.cz-paso-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--gray-200);
}

.cz-paso-acciones .btn {
    flex: 1 1 auto;
    justify-content: center;
}

@media (min-width: 480px) {
    .cz-paso-acciones .btn {
        flex: 0 1 auto;
    }
}

/* ----------------------------------------------------------------
   5. Paso 2 — a la medida, niveles, unidades, interiores, acabados, servicios
   ---------------------------------------------------------------- */
.cz-campos-medida {
    display: grid;
    gap: 0 20px;
    margin-bottom: 28px;
}

.cz-campos-medida h3 {
    grid-column: 1 / -1;
    font-size: 1.15rem;
    color: var(--primary);
    margin-bottom: 6px;
}

@media (min-width: 640px) {
    .cz-campos-medida {
        grid-template-columns: 1fr 1fr;
    }
}

.cz-area-viva {
    grid-column: 1 / -1;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--accent-dark);
    background: var(--gray-50);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin: -6px 0 14px;
}

.cz-niveles {
    margin-bottom: 28px;
}

.cz-niveles > h3 {
    font-size: 1.15rem;
    color: var(--primary);
    margin-bottom: 14px;
}

.cz-niveles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
}

.cz-nivel-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 22px 20px;
    cursor: pointer;
    transition: var(--transition);
}

.cz-nivel-card:hover {
    border-color: var(--accent-light);
    box-shadow: var(--shadow);
}

.cz-nivel-card input[type="radio"] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 20px;
    height: 20px;
    accent-color: var(--accent-dark);
    cursor: pointer;
}

.cz-nivel-activo {
    border-color: var(--accent);
    box-shadow: var(--shadow-gold);
}

.cz-nivel-recomendado {
    border-color: var(--accent-light);
}

.cz-nivel-cinta {
    position: absolute;
    top: -12px;
    left: 20px;
    background: var(--accent);
    color: var(--primary-dark);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 4px 12px;
    border-radius: 50px;
    box-shadow: var(--shadow);
}

.cz-nivel-nombre {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--primary);
    padding-right: 28px;
}

.cz-nivel-tarifa {
    font-size: .8rem;
    color: var(--text-muted);
}

.cz-nivel-valor {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--accent-dark);
    margin: 4px 0;
}

.cz-nivel-desc {
    color: var(--text-light);
    font-size: .88rem;
    margin-bottom: 6px;
}

.cz-nivel-incluye {
    list-style: none;
    display: grid;
    gap: 6px;
    font-size: .82rem;
    color: var(--text-light);
}

.cz-nivel-incluye li {
    position: relative;
    padding-left: 20px;
}

.cz-nivel-incluye li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #28a745;
    font-weight: 800;
}

/* ESPEC-PRECIOS-4-NIVELES.md §3.5: con 4 niveles (gris/blanca/full/premium) la grilla se ve en
   2x2 en movil, en vez de apilar una sola columna angosta. */
@media (max-width: 640px) {
    .cz-niveles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .cz-nivel-card {
        padding: 16px 14px;
    }

    .cz-nivel-card input[type="radio"] {
        top: 12px;
        right: 12px;
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 360px) {
    .cz-niveles-grid {
        grid-template-columns: 1fr;
    }
}

.cz-unidades {
    margin-top: 20px;
}

.cz-unidades > label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: .88rem;
    color: var(--primary);
    margin-bottom: 8px;
}

.cz-unidades-controles {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cz-unidad-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--gray-200);
    background: var(--white);
    color: var(--primary);
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.cz-unidad-btn:hover {
    background: var(--primary);
    color: var(--accent-light);
    border-color: var(--primary);
}

.cz-unidades-controles input {
    width: 64px;
    text-align: center;
    padding: 9px 6px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    min-height: 40px;
}

/* Interiores ilustrativos (ESPEC-FASE2D §4.1) */
.cz-interiores {
    margin-bottom: 28px;
}

.cz-interiores[hidden] {
    display: none;
}

.cz-interiores h4 {
    font-size: 1rem;
    color: var(--primary);
    margin-bottom: 12px;
}

.cz-interiores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 10px;
}

.cz-interior-foto {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
}

/* Acabados (ESPEC-FASE2D §4) */
.cz-acabados {
    margin-bottom: 28px;
}

.cz-acabados[hidden] {
    display: none;
}

.cz-acabados > h3 {
    font-size: 1.15rem;
    color: var(--primary);
    margin-bottom: 16px;
}

.cz-acabado-categoria {
    margin-bottom: 20px;
}

.cz-acabado-categoria h4 {
    font-size: .92rem;
    font-weight: 700;
    color: var(--accent-dark);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 10px;
}

.cz-acabado-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}

.cz-acabado-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
}

.cz-acabado-card:hover {
    border-color: var(--accent-light);
    box-shadow: var(--shadow);
}

.cz-acabado-card input[type="radio"] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    accent-color: var(--accent-dark);
    z-index: 1;
}

.cz-acabado-activo {
    border-color: var(--accent);
    box-shadow: var(--shadow-gold);
}

.cz-acabado-foto {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    background: var(--gray-100);
}

.cz-acabado-nombre {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: .84rem;
    color: var(--primary);
    padding: 8px 10px 0;
}

.cz-acabado-desc {
    font-size: .76rem;
    color: var(--text-muted);
    padding: 2px 10px 0;
}

.cz-acabado-precio {
    font-size: .78rem;
    font-weight: 700;
    color: var(--accent-dark);
    padding: 6px 10px 10px;
    margin-top: auto;
}

/* Servicios técnicos */
.cz-servicios {
    margin-bottom: 12px;
}

.cz-servicios > h3 {
    font-size: 1.15rem;
    color: var(--primary);
    margin-bottom: 4px;
}

.cz-servicios-lista {
    display: grid;
    gap: 10px;
    margin: 14px 0;
}

.cz-servicio-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 14px;
    cursor: pointer;
}

.cz-servicio-item input {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--accent-dark);
}

.cz-servicio-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.cz-servicio-info strong {
    font-family: 'Montserrat', sans-serif;
    color: var(--primary);
    font-size: .92rem;
}

.cz-servicio-detalle {
    color: var(--text-muted);
    font-size: .8rem;
}

.cz-servicio-monto {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--accent-dark);
    white-space: nowrap;
    align-self: center;
}

.cz-servicios-subtotal {
    text-align: right;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--primary);
}

@media (max-width: 480px) {
    .cz-servicio-item {
        flex-wrap: wrap;
    }

    .cz-servicio-monto {
        margin-left: 32px;
    }
}

/* ----------------------------------------------------------------
   6. Generador: plano / vista 3D / ver en mi lote
   ---------------------------------------------------------------- */
.cz-gen {
    margin: 8px 0 28px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--white);
}

.cz-gen > h3 {
    font-size: 1.05rem;
    color: var(--primary);
    padding: 18px 20px 0;
}

.cz-gen-tabs {
    display: flex;
    gap: 4px;
    padding: 16px 20px 0;
    border-bottom: 1px solid var(--gray-200);
    overflow-x: auto;
}

.cz-gen-tab {
    flex-shrink: 0;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-muted);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: .86rem;
    padding: 10px 14px;
    cursor: pointer;
    transition: var(--transition);
}

.cz-gen-tab:hover {
    color: var(--primary);
}

.cz-gen-tab[aria-selected="true"] {
    color: var(--accent-dark);
    border-bottom-color: var(--accent);
}

.cz-gen-paneles {
    padding: 20px;
}

.cz-gen-panel[hidden] {
    display: none;
}

.cz-gen-plano-hoja {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 10px;
    margin-bottom: 16px;
    overflow-x: auto;
}

.cz-gen-plano-hoja svg {
    width: 100%;
    height: auto;
    display: block;
}

.cz-gen-nota,
.cz-gen-aviso,
.cz-gen-privacidad,
.cz-gen-guia {
    color: var(--text-muted);
    font-size: .8rem;
    font-style: italic;
    margin-top: 10px;
}

.cz-gen-error {
    color: #c0392b;
    font-size: .86rem;
    font-weight: 600;
}

.cz-gen-error:empty {
    display: none;
}

.cz-gen-etiqueta-volumetria {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--accent-dark);
    background: var(--gray-50);
    border: 1px solid var(--accent-light);
    border-radius: 50px;
    padding: 5px 14px;
    margin-top: 12px;
}

.cz-gen-cargando {
    text-align: center;
    color: var(--text-muted);
    padding: 40px 0;
}

.cz-gen-visor3d {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: linear-gradient(#cfe0e8, #9fae96);
    border-radius: var(--radius);
    overflow: hidden;
}

.cz-gen-visor3d canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    touch-action: none;
}

.cz-gen-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    border: 2px dashed var(--gray-200);
    border-radius: var(--radius);
    padding: 32px 20px;
    color: var(--text-muted);
    transition: var(--transition);
}

.cz-gen-dropzone-activa {
    border-color: var(--accent);
    background: #fdf6e9;
}

/* El <input type="file"> nativo no se encoge solo: su ancho intrínseco (botón +
   "Ningún archivo seleccionado") es más ancho que la zona de arrastre en
   móvil y se sale del recuadro (y de la pantalla) sin generar scroll — queda
   cortado e inalcanzable. Forzar su ancho hace que Chrome trunque el nombre
   del archivo con "…" en vez de desbordar. */
.cz-gen-dropzone input[type="file"] {
    width: 100%;
    max-width: 100%;
}

.cz-gen-boton-subir {
    background: var(--accent);
    color: var(--primary-dark);
    border: none;
    border-radius: 50px;
    padding: 12px 26px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    cursor: pointer;
}

.cz-gen-lote-visor {
    margin-top: 14px;
}

.cz-gen-implantar {
    position: relative;
    width: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--gray-100);
}

/* Variante "diseño real recortado" (ESPEC-FASE2D §2): mismo contenedor que la
   volumetría 3D, fondo neutro más claro porque aquí siempre hay foto + recorte
   con canal alfa (sin degradado de marcador de posición). */
.cz-gen-implantar-recorte {
    background: var(--gray-50);
}

.cz-gen-implantar-foto,
.cz-gen-implantar-3d {
    display: block;
    width: 100%;
    height: auto;
}

.cz-gen-implantar-3d {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    touch-action: none;
    cursor: grab;
}

.cz-gen-implantar-3d:active {
    cursor: grabbing;
}

.cz-gen-implantar-controles {
    margin-top: 14px;
    display: grid;
    gap: 12px;
}

.cz-gen-slider {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    gap: 12px;
    font-size: .84rem;
    color: var(--text);
}

.cz-gen-slider input[type="range"] {
    width: 100%;
    accent-color: var(--accent-dark);
    min-height: 24px;
}

.cz-gen-fila-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cz-gen-fila-botones button {
    flex: 1 1 auto;
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--primary);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: .82rem;
    cursor: pointer;
    transition: var(--transition);
}

.cz-gen-fila-botones button:hover {
    border-color: var(--accent);
    color: var(--accent-dark);
}

@media (min-width: 640px) {
    .cz-gen-implantar-controles {
        grid-template-columns: 1fr 1fr;
    }

    .cz-gen-slider:nth-child(-n+3) {
        grid-column: 1 / -1;
    }
}

/* Panel "Hacerla fotorrealista con IA" (ESPEC-FASE2-RENDER-IA §9 / ESPEC-FASE2D §3) */
.cz-gen-ia {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--gray-200);
}

.cz-gen-ia > h4 {
    font-size: 1rem;
    color: var(--primary);
    margin-bottom: 10px;
}

.cz-gen-ia-privacidad {
    background: var(--gray-50);
    border-radius: var(--radius);
    padding: 12px 14px;
}

.cz-gen-ia-btn {
    margin-top: 12px;
    width: 100%;
    justify-content: center;
}

.cz-gen-ia-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none !important;
}

.cz-gen-ia-estado {
    margin-top: 12px;
    color: var(--accent-dark);
    font-weight: 600;
    font-size: .88rem;
}

.cz-gen-ia-estado:empty {
    display: none;
}

.cz-gen-ia-resultado {
    margin-top: 14px;
}

.cz-gen-ia-imagen {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: block;
}

@media (min-width: 480px) {
    .cz-gen-ia-btn {
        width: auto;
    }
}

/* ----------------------------------------------------------------
   7. Paso 4 — documento de cotización ("hoja carta")
   ---------------------------------------------------------------- */
.cz-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 14px;
}

.cz-acciones .btn {
    flex: 1 1 auto;
    justify-content: center;
}

@media (min-width: 640px) {
    .cz-acciones .btn {
        flex: 0 1 auto;
    }
}

.cz-estado-envio {
    text-align: center;
    color: var(--text-muted);
    font-size: .86rem;
    margin-bottom: 20px;
    min-height: 1.2em;
}

.cz-doc {
    max-width: 820px;
    margin: 0 auto;
    background: var(--white);
    border-radius: 4px;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.cz-doc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--primary);
    padding: 22px 28px;
}

.cz-doc-header img {
    height: 48px;
    width: auto;
}

.cz-doc-header-derecha {
    text-align: right;
    color: rgba(255, 255, 255, .78);
    font-size: .8rem;
    line-height: 1.5;
}

.cz-doc-titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .04em;
    color: var(--accent-light) !important;
    margin-bottom: 4px;
}

.cz-doc-cliente {
    padding: 24px 28px;
    border-bottom: 1px solid var(--gray-200);
}

.cz-doc-preparada {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .72rem;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 4px;
}

.cz-doc-cliente h3 {
    font-size: 1.4rem;
    color: var(--primary);
    margin-bottom: 10px;
}

.cz-doc-datos-cliente {
    list-style: none;
    display: grid;
    gap: 4px;
    color: var(--text-light);
    font-size: .9rem;
}

.cz-doc-proyecto {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 24px 28px;
    border-bottom: 1px solid var(--gray-200);
}

.cz-doc-foto {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    flex-shrink: 0;
}

.cz-doc-proyecto-info {
    flex: 1;
    min-width: 200px;
}

.cz-doc-proyecto-info h4 {
    font-size: 1.15rem;
    color: var(--primary);
    margin-bottom: 6px;
}

.cz-doc-proyecto-info p {
    color: var(--text-light);
    font-size: .9rem;
    margin-bottom: 4px;
}

.cz-doc-tabla {
    width: calc(100% - 56px);
    margin: 24px 28px;
    border-collapse: collapse;
    font-size: .9rem;
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.cz-doc-tabla th,
.cz-doc-tabla td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
}

.cz-doc-tabla th {
    background: var(--primary);
    color: var(--accent-light);
    font-family: 'Montserrat', sans-serif;
    font-size: .74rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cz-doc-tabla td:last-child,
.cz-doc-tabla th:last-child {
    text-align: right;
}

.cz-doc-tabla tr:last-child td {
    border-bottom: none;
}

.cz-doc-subtotal td {
    font-weight: 700;
    background: var(--gray-50);
    color: var(--primary);
}

.cz-doc-total td {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--accent-dark);
    background: var(--gray-50);
    border-top: 2px solid var(--accent);
}

.cz-doc-incluye {
    display: grid;
    gap: 24px;
    padding: 4px 28px 24px;
}

.cz-doc-incluye h5,
.cz-doc-pasos h5,
.cz-doc-diseno h5,
.cz-doc-acabados h5,
.cz-doc-comentarios h5 {
    font-family: 'Montserrat', sans-serif;
    font-size: .92rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 12px;
}

.cz-check-list {
    list-style: none;
    display: grid;
    gap: 8px;
    font-size: .88rem;
    color: var(--text-light);
}

.cz-check-list li {
    position: relative;
    padding-left: 22px;
}

.cz-check-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #28a745;
    font-weight: 800;
}

.cz-doc-incluye ul:not(.cz-check-list) {
    list-style: none;
    display: grid;
    gap: 8px;
    font-size: .84rem;
    color: var(--text-muted);
}

.cz-doc-incluye ul:not(.cz-check-list) li {
    position: relative;
    padding-left: 18px;
}

.cz-doc-incluye ul:not(.cz-check-list) li::before {
    content: "–";
    position: absolute;
    left: 0;
    color: var(--text-muted);
}

@media (min-width: 640px) {
    .cz-doc-incluye {
        grid-template-columns: 1fr 1fr;
    }
}

.cz-doc-acabados {
    padding: 4px 28px 24px;
}

.cz-doc-tabla-acabados {
    width: 100%;
    border-collapse: collapse;
    font-size: .86rem;
}

.cz-doc-tabla-acabados td {
    padding: 8px 6px;
    border-bottom: 1px solid var(--gray-200);
    color: var(--text-light);
    vertical-align: middle;
}

.cz-doc-acabado-mini {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.cz-doc-pago {
    padding: 18px 28px;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
    font-size: .86rem;
    color: var(--text-light);
}

.cz-doc-pago p + p {
    margin-top: 6px;
    font-weight: 600;
    color: var(--primary);
}

.cz-doc-pasos {
    padding: 24px 28px;
    border-bottom: 1px solid var(--gray-200);
}

.cz-doc-pasos ol {
    counter-reset: cz-paso-num;
    list-style: none;
    display: grid;
    gap: 14px;
}

.cz-doc-pasos li {
    position: relative;
    padding-left: 38px;
    color: var(--text-light);
    font-size: .9rem;
}

.cz-doc-pasos li::before {
    counter-increment: cz-paso-num;
    content: counter(cz-paso-num);
    position: absolute;
    left: 0;
    top: -2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--primary-dark);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: .82rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 640px) {
    .cz-doc-pasos ol {
        grid-template-columns: repeat(3, 1fr);
    }
}

.cz-doc-comentarios {
    padding: 20px 28px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    font-size: .88rem;
    color: var(--text-light);
    white-space: pre-wrap;
}

.cz-doc-diseno {
    padding: 24px 28px;
    border-bottom: 1px solid var(--gray-200);
}

.cz-doc-render,
.cz-doc-implantacion,
.cz-doc-render-ia {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 14px;
    display: block;
}

.cz-doc-render-ia-etiqueta {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--accent-dark);
    background: var(--gray-50);
    border: 1px solid var(--accent-light);
    border-radius: 50px;
    padding: 5px 14px;
    display: inline-block;
    margin-bottom: 10px;
}

.cz-doc-plano-hoja {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 10px;
    margin-bottom: 14px;
}

.cz-doc-plano-hoja svg {
    width: 100%;
    height: auto;
    display: block;
}

.cz-doc-tabla-espacios {
    width: 100%;
    border-collapse: collapse;
    font-size: .86rem;
    margin-bottom: 4px;
}

.cz-doc-tabla-espacios td {
    padding: 6px 4px;
    border-bottom: 1px dashed var(--gray-200);
    color: var(--text-light);
}

.cz-doc-tabla-espacios td:last-child {
    text-align: right;
    font-weight: 600;
    color: var(--primary);
}

.cz-doc-pie {
    padding: 20px 28px 26px;
    text-align: center;
    color: var(--text-muted);
    font-size: .82rem;
}

.cz-doc-legal {
    font-size: 8.5pt;
    color: var(--text-muted);
    margin-top: 10px;
    font-style: italic;
}

@media (max-width: 600px) {
    .cz-doc-tabla {
        width: calc(100% - 32px);
        margin: 20px 16px;
        font-size: .82rem;
    }

    .cz-doc-tabla th,
    .cz-doc-tabla td {
        padding: 9px 8px;
    }

    /* A 5 columnas la tabla no cabe en un teléfono y "Valor" queda cortado fuera
       de pantalla (body tiene overflow-x:hidden en styles.css, así que ni
       siquiera queda alcanzable con scroll). Área/Tarifa/Unidades ya se leen
       arriba en el bloque "Proyecto"; en este ancho se ocultan de la tabla y
       queda Concepto | Valor, que es lo que el cliente necesita ver de un
       vistazo.
       OJO: no todas las filas tienen 5 celdas reales — las de subtotal/total/
       servicios usan <td colspan="4"> + <td> (2 celdas). Si solo se ocultaran
       columnas con display:none, el layout automático de <table> calcula el
       ancho de cada columna mirando TODAS las filas a la vez, y una fila de
       5 celdas reales (encabezado, fila del modelo) termina más angosta que
       una de colspan (quedaban ~57% vs 100% de ancho, dos tablas distintas
       visualmente). Por eso aquí la tabla completa pasa a un grid de 2
       columnas por fila (colspan dejar de importar, cada <tr> es su propia
       fila de grid): así toda fila —tenga 2 o 5 <td>/<th>— ocupa el mismo
       ancho total, y solo se ocultan las celdas 2ª/3ª/4ª de las filas que
       de verdad las tienen (:not(:last-child) sigue distinguiendo eso). */
    .cz-doc-tabla,
    .cz-doc-tabla thead,
    .cz-doc-tabla tbody {
        display: block;
        width: 100%;
    }

    .cz-doc-tabla tr {
        display: grid;
        grid-template-columns: 1fr auto;
        width: 100%;
    }

    /* Fila de una sola celda (colspan="5", el aviso "Un asesor te envía..."):
       que ocupe las dos columnas del grid en vez de quedar pegada a la izquierda. */
    .cz-doc-tabla td:only-child {
        grid-column: 1 / -1;
    }

    .cz-doc-tabla th:nth-child(2):not(:last-child),
    .cz-doc-tabla th:nth-child(3):not(:last-child),
    .cz-doc-tabla th:nth-child(4):not(:last-child),
    .cz-doc-tabla td:nth-child(2):not(:last-child),
    .cz-doc-tabla td:nth-child(3):not(:last-child),
    .cz-doc-tabla td:nth-child(4):not(:last-child) {
        display: none;
    }

    .cz-doc-header,
    .cz-doc-cliente,
    .cz-doc-proyecto,
    .cz-doc-incluye,
    .cz-doc-acabados,
    .cz-doc-pago,
    .cz-doc-pasos,
    .cz-doc-comentarios,
    .cz-doc-diseno,
    .cz-doc-pie {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ----------------------------------------------------------------
   8. Impresión / descarga en PDF (ESPEC-COTIZADOR.md §8)
   ---------------------------------------------------------------- */
@media print {
    @page {
        size: letter;
        margin: 12mm;
    }

    body * {
        visibility: hidden;
    }

    #czDoc,
    #czDoc * {
        visibility: visible;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    #czDoc {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        box-shadow: none;
        border-radius: 0;
    }

    .navbar,
    .cz-hero,
    .cz-indicador,
    .cz-acciones,
    .cz-estado-envio,
    .cz-barra,
    #cookieBanner {
        display: none !important;
    }

    .cz-doc-header,
    .cz-doc-cliente,
    .cz-doc-proyecto,
    .cz-doc-tabla,
    .cz-doc-tabla tr,
    .cz-doc-incluye,
    .cz-doc-acabados,
    .cz-doc-pago,
    .cz-doc-pasos li,
    .cz-doc-comentarios,
    .cz-doc-render,
    .cz-doc-implantacion,
    .cz-doc-render-ia,
    .cz-doc-plano-hoja,
    .cz-doc-pie {
        break-inside: avoid;
    }

    /* Un piso por hoja cuando hay más de un plano (11.7), sin dejar una
       primera página en blanco antes del primer plano. */
    .cz-doc-plano-hoja + .cz-doc-plano-hoja {
        break-before: page;
    }

    /* Verificado con una impresión real a PDF (Page.printToPDF): sin esto, un
       título como "Tu diseño preliminar" podía quedar solo al final de una
       hoja y su contenido (el primer plano) arrancaba recién en la
       siguiente, dejando media página en blanco. break-after:avoid mantiene
       el título pegado a lo que sigue. */
    .cz-doc h5 {
        break-after: avoid;
    }

    .cz-doc-tabla {
        box-shadow: none;
    }
}

/* ----------------------------------------------------------------
   9. Accesibilidad de movimiento
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .cz-app *,
    .cz-hero *,
    .cz-barra * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .cz-tarjeta:hover,
    .cz-detalle-foto:hover,
    .cz-tab:hover {
        transform: none !important;
    }
}

/* Revisión Opus (26-sep-2026): en el cotizador el contenido es blanco, así que la barra fija
   no puede ser transparente (el logo y los enlaces blancos quedaban encima del contenido). */
body.cz-pagina .navbar,
body.cz-pagina .navbar.scrolled {
    background: rgba(10, 10, 10, 0.96);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}