/* =====================================================================
   css/presupuesto.css — páginas de presupuesto (es/presupuesto, en/quote,
   fr/devis). Desde 2026-10 sustituye al <style> inline de las tres, que era
   el mismo copiado tres veces. Lo carga solo esa página; va sellado con ?v=
   por _nav_breakpoint.py, igual que styles.css y main.js.
   ===================================================================== */

/* ---- Bloque intro a ancho completo ---- */
.quote-intro__head { max-width: 820px; }
.quote-intro__head p { margin-bottom: 0; }
.quote-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
    margin: 28px 0 20px; padding: 22px 0;
    border-top: 1px solid #DCDCDE; border-bottom: 1px solid #DCDCDE; }
.quote-fact strong { display: block; font-size: 13px; text-transform: uppercase;
    letter-spacing: .5px; color: #58585A; margin-bottom: 6px; }
.quote-fact span, .quote-fact a { font-size: 15px; line-height: 1.5; }
.quote-fact a { color: #F13D29; text-decoration: none; }
.quote-fact__phone { font-size: 22px; font-weight: 700; }
p.quote-intro__note { font-size: 13px; color: #58585A; margin: 0; }
.quote-intro__note a { color: #F13D29; }
.quote-form-block { margin-top: 48px; }

/* ---- Formulario: base ---- */
.contact-form { display: grid; gap: 16px; max-width: none; margin: 0; }
.contact-form label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; }
.contact-form input, .contact-form textarea, .contact-form select {
    width: 100%; padding: 12px 14px; border: 1px solid #DCDCDE; border-radius: 6px;
    font-family: inherit; font-size: 15px; background: #fff;
}
.contact-form textarea { min-height: 110px; resize: vertical; }
.contact-form .form-row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.contact-form .form-row-3 { display: grid; gap: 16px; grid-template-columns: 1fr 1fr 1fr; }
.contact-form .form-row-4 { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); }
.contact-form [hidden] { display: none !important; }
.contact-form .form-note { font-size: 13px; color: #58585A; margin: -6px 0 0; }
/* Ese -6px es para las notas que van DESPUÉS de una .form-row-*, donde el gap de
   16px de la rejilla ya separa de sobra. Cuando la nota cuelga de su propio
   campo, el margen negativo la pegaría al borde del input. */
.contact-form input + .form-note,
.contact-form select + .form-note,
.contact-form textarea + .form-note { margin-top: 6px; }
.form-actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.contact-form .form-consent { font-size: 13px; color: #58585A; }
/* El botón rojo grande es SOLO el de enviar: la tabla tiene sus propios botones. */
.contact-form button[type="submit"] { padding: 14px 28px; background: #F13D29; color: #fff; border: none;
    border-radius: 6px; font-weight: 600; font-size: 16px; cursor: pointer; transition: background .2s; }
.contact-form button[type="submit"]:hover { background: #C21300; }
.contact-form button[type="submit"]:disabled { background: #999; cursor: progress; }
.file-hp { position: absolute; left: -9999px; opacity: 0; }
.form-status { padding: 14px 18px; border-radius: 6px; font-size: 14px; display: none; }
.form-status.show { display: block; }
.form-status.success { background: #E8F5E9; color: #1B5E20; border: 1px solid #81C784; }
.form-status.error { background: #FFEBEE; color: #B71C1C; border: 1px solid #E57373; }
/* La demo en localhost enseña lo que se mandaría. */
.form-status.local { white-space: pre-wrap; font-family: Consolas, monospace; font-size: 12px;
    max-height: 60vh; overflow: auto; }
.contact-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 16px; }

/* ---- Pasos numerados ---- */
.quote-step { display: grid; gap: 14px; }
.quote-step + .quote-step { padding-top: 8px; }
.contact-form .field-legend { margin: 0; font-size: 17px; font-weight: 700; color: #26272C; }
.quote-step__n { display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; margin-right: 8px; border-radius: 50%;
    background: #F13D29; color: #fff; font-size: 14px; font-weight: 700; vertical-align: 1px; }
.quote-step__lead { margin: -6px 0 0; font-size: 14px; color: #58585A; }

/* ---- 1. Archivos: una sola zona que clasifica por extensión ---- */
.dropzone { position: relative; border: 2px dashed #DCDCDE; border-radius: 10px; background: #F5F7F8;
    transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone.is-over, .dropzone:focus-within { border-color: #F13D29; background: #FFF8F6; }
/* El <input type=file> ocupa toda la zona pero no se ve: así funciona igual
   arrastrar encima que hacer clic. */
.dropzone__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.contact-form .dropzone__label { display: grid; gap: 4px; margin: 0; padding: 26px 20px; text-align: center;
    font-weight: 400; cursor: pointer; pointer-events: none; }
.dropzone__label strong { font-size: 16px; color: #26272C; }
.dropzone__label span { font-size: 14px; color: #58585A; }
.dropzone__label span u { color: #F13D29; }
.dropzone__label small { font-size: 12px; color: #58585A; }
.file-meta { font-size: 13px; color: #58585A; }
.file-meta.over { color: #C21300; font-weight: 600; }
.file-groups { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.file-groups:empty { display: none; }
.file-group { border: 1px solid #DCDCDE; border-radius: 8px; padding: 10px 12px; background: #fff; }
.file-group--plano { border-left: 4px solid #F13D29; }
.file-group--cad { border-left: 4px solid #26272C; }
.file-group--lista { border-left: 4px solid #8A8A8C; }
.file-group--comprimido { border-left: 4px solid #B0B0B3; }
.file-group__title { margin: 0 0 6px; font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; color: #58585A; }
.file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.file-list-item { display: flex; justify-content: space-between; gap: 12px; padding: 5px 8px;
    background: #F5F7F8; border-radius: 4px; font-size: 13px; word-break: break-all; }
/* Sin la viñeta roja de .content-text ul li: cada archivo ya va en su caja. */
.content-text .file-list .file-list-item { margin: 0; padding: 5px 8px; line-height: 1.45; }
.content-text .file-list .file-list-item::before { content: none; }
.contact-form .file-rm { background: transparent; color: #C21300; border: none; padding: 0;
    font-size: 13px; cursor: pointer; font-weight: 600; flex: 0 0 auto; }

/* ---- 2. Tabla de referencias ---- */
.refs-table-wrap { border: 1px solid #DCDCDE; border-radius: 8px; overflow-x: auto; background: #fff; }
.refs-table-wrap:focus-visible { outline: 2px solid #F13D29; outline-offset: 2px; }
.refs-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.refs-table thead th { background: #26272C; color: #fff; font-weight: 600; font-size: 13px; text-align: left;
    padding: 9px 10px; white-space: nowrap; }
.refs-table td { padding: 6px 8px; border-top: 1px solid #ECECEE; vertical-align: middle; }
.refs-table .refs-col-n { width: 36px; color: #8A8A8C; font-size: 12px; text-align: right; }
.contact-form .refs-table input { padding: 8px 10px; font-size: 14px; }
.contact-form .refs-table .refs-ref { min-width: 150px; }
.contact-form .refs-table .refs-qty { width: 90px; }
.contact-form .refs-table .refs-esp { width: 110px; }
.contact-form .refs-table input.is-invalid,
.contact-form .refs-panel .is-invalid { border-color: #C21300; background: #FFF5F5; box-shadow: 0 0 0 1px #C21300; }
.refs-files { white-space: nowrap; }
/* Vista de la pieza (js/visor-piezas.js): delante de las marcas de formato.
   Pulsarla la abre en grande; mientras se calcula, un hueco que late. */
.contact-form .refs-vista { display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 46px; margin: 0 6px 0 0; padding: 3px; vertical-align: middle;
    border: 1px solid #DCDCDE; border-radius: 6px; background: #fff; cursor: zoom-in; }
.contact-form .refs-vista:hover, .contact-form .refs-vista:focus-visible { border-color: #F13D29; }
.contact-form .refs-vista:focus-visible { outline: 2px solid #F13D29; outline-offset: 1px; }
.refs-vista img { display: block; max-width: 100%; max-height: 100%; }
.contact-form .refs-vista.is-cargando { cursor: default; border-color: #ECECEE;
    background: linear-gradient(90deg, #F5F7F8 25%, #E8E9EC 50%, #F5F7F8 75%); background-size: 200% 100%;
    animation: refsVistaLate 1.3s ease-in-out infinite; }
@keyframes refsVistaLate { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .contact-form .refs-vista.is-cargando { animation: none; } }

/* La vista en grande: fuera del formulario (va colgada del body). */
.visor-dialog { width: min(92vw, 960px); max-height: 92vh; margin: auto; padding: 0; border: none; border-radius: 10px;
    background: #fff; color: #26272C; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }
.visor-dialog::backdrop { background: rgba(38, 39, 44, .6); }
.visor-dialog__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 10px 10px 16px; border-bottom: 1px solid #ECECEE; }
.visor-dialog__t { margin: 0; font-size: 16px; font-weight: 700; word-break: break-all; }
.visor-dialog__cerrar { flex: 0 0 auto; background: none; border: none; border-radius: 6px; padding: 2px 10px;
    font-size: 26px; line-height: 1; color: #58585A; cursor: pointer; }
.visor-dialog__cerrar:hover, .visor-dialog__cerrar:focus-visible { background: #F5F7F8; color: #26272C; }
.visor-dialog__img { display: block; width: 100%; height: min(70vh, 640px); padding: 16px; box-sizing: border-box;
    object-fit: contain; }
.visor-dialog__pie { margin: 0; padding: 8px 16px 12px; border-top: 1px solid #ECECEE; font-size: 13px; color: #58585A; }
.chip { display: inline-block; margin: 1px 3px 1px 0; padding: 2px 7px; border-radius: 10px; font-size: 11px;
    font-weight: 700; letter-spacing: .3px; background: #ECECEE; color: #26272C; }
.chip--plano { background: #FDE3DF; color: #A11A08; }
.chip--cad { background: #26272C; color: #fff; }
.chip--zip { outline: 1px dashed #8A8A8C; }
.chip--vacio { background: transparent; color: #8A8A8C; font-weight: 400; }
.refs-det-cell { white-space: nowrap; }
.contact-form .refs-det, .contact-form .refs-del, .contact-form .btn-sec, .contact-form .btn-link {
    font-family: inherit; cursor: pointer; }
.contact-form .refs-det { background: #fff; border: 1px solid #DCDCDE; border-radius: 6px; padding: 6px 10px;
    font-size: 13px; font-weight: 600; color: #26272C; }
.contact-form .refs-det[aria-expanded="true"] { border-color: #F13D29; color: #F13D29; }
.refs-det__sum { display: block; max-width: 220px; margin-top: 3px; font-size: 11px; color: #58585A;
    white-space: normal; }
.refs-det__sum:empty { display: none; }
.contact-form .refs-del { background: transparent; border: none; color: #8A8A8C; font-size: 22px; line-height: 1;
    padding: 2px 8px; border-radius: 4px; }
.contact-form .refs-del:hover { color: #C21300; background: #FFEBEE; }
.refs-detrow td { background: #F5F7F8; padding: 10px 12px 14px; }
.refs-panel { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); }
.refs-panel label { font-size: 13px; }
.contact-form .refs-panel select, .contact-form .refs-panel input { padding: 8px 10px; font-size: 14px; }
.refs-panel .refs-ov-otro { margin-top: 6px; }
.refs-panel__notas { grid-column: 1 / -1; }
.refs-empty { margin: 0; padding: 18px; text-align: center; font-size: 14px; color: #58585A; }
.refs-tabla { display: grid; gap: 12px; }
.refs-tools { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.contact-form .btn-sec { background: #fff; border: 1px solid #F13D29; color: #F13D29; border-radius: 6px;
    padding: 8px 14px; font-size: 14px; font-weight: 600; transition: background .15s, color .15s; }
.contact-form .btn-sec:hover { background: #F13D29; color: #fff; }
.contact-form .btn-link { background: none; border: none; padding: 0; color: #F13D29; font-size: 14px;
    font-weight: 600; text-decoration: underline; }
.refs-status { font-size: 13px; color: #1B5E20; min-height: 1em; }
.refs-status:empty { display: none; }
/* Revisión de archivos debajo de la tabla: solo informa, no bloquea nada. */
.refs-casado { border: 1px solid #F0DDB0; border-left: 4px solid #D99A00; border-radius: 8px;
    background: #FFFBF0; padding: 10px 14px; font-size: 13px; line-height: 1.45; color: #26272C; }
.refs-casado.is-ok { border-color: #CFE5D0; border-left-color: #2E7D32; background: #F4FAF4; }
p.refs-casado__t { margin: 0 0 4px; font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; color: #58585A; }
.refs-casado ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
/* La viñeta roja de .content-text diría «error»: aquí, ámbar (solo informa). */
.content-text .refs-casado ul li { margin: 0; padding-left: 16px; line-height: 1.45; }
.content-text .refs-casado ul li::before { top: 6px; width: 7px; height: 7px; background-color: #D99A00; }
p.refs-casado__ok { margin: 0; color: #1B5E20; font-weight: 600; }

/* ---- 2b. ¿Cómo prefieres indicarlas? Escribirlas / Pegarlas / En un archivo ---- */
p.refs-modo__label { margin: 0 0 -6px; font-size: 14px; font-weight: 600; color: #26272C; }
.refs-modo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px;
    background: #F5F7F8; border-radius: 10px; }
.contact-form .refs-modo label { position: relative; margin: 0; padding: 12px 14px; border-radius: 8px;
    cursor: pointer; text-align: center; font-size: 15px; font-weight: 600; color: #26272C;
    user-select: none; transition: background .15s, color .15s; }
.contact-form .refs-modo label:hover { background: #ECECEE; }
.refs-modo input { position: absolute; opacity: 0; pointer-events: none; }
/* .is-on lo pone el JS; :has() es el respaldo si el JS tarda. */
.contact-form .refs-modo label.is-on,
.contact-form .refs-modo label:has(input:checked) { background: #F13D29; color: #fff; }
.refs-modo label:has(input:focus-visible) { outline: 2px solid #F13D29; outline-offset: 2px; }
.refs-modo__t svg { width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; }
.refs-modo small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; opacity: .85; }
.refs-archivo { padding: 14px 16px; border: 1px solid #81C784; border-radius: 8px; background: #E8F5E9;
    color: #1B5E20; font-size: 14px; line-height: 1.55; }
.refs-archivo p { margin: 0; }

/* Promo del 1 % (paso 2). base = la invitación, ok = ya la tiene (hay alguna
   fila con cantidad), no = «Ya van en un archivo». Lo cambia presupuesto.js. */
p.refs-promo { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 14px;
    border: 1px dashed #43A047; border-radius: 8px; background: #F1F8F1; color: #1B5E20;
    font-size: 14px; line-height: 1.5; }
.refs-promo__icon { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; }
p.refs-promo[data-estado="ok"] { border-style: solid; background: #E8F5E9; }
p.refs-promo[data-estado="no"] { border: 1px solid #DCDCDE; background: #F5F7F8; color: #58585A; }

/* Pegarlas desde Excel: el tutorial a la izquierda, los pasos y el recuadro a la derecha. */
.refs-pegar { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px;
    align-items: start; padding: 16px; border: 1px solid #DCDCDE; border-radius: 10px; background: #F5F7F8; }
.refs-pegar__pasos { display: grid; gap: 10px; }
.refs-pasos { margin: 0; padding-left: 22px; list-style: decimal outside; font-size: 14px; line-height: 1.55;
    color: #26272C; }
.refs-pasos li { display: list-item; margin-bottom: 6px; }
.refs-pasos li::marker { color: #F13D29; font-weight: 700; }
.refs-pasos small { color: #58585A; }
.refs-pasos kbd, .pd-key { font-family: Arial, sans-serif; }
.refs-pasos kbd { display: inline-block; padding: 1px 6px; border: 1px solid #C8C8CC; border-bottom-width: 2px;
    border-radius: 4px; background: #fff; font-size: 12px; font-weight: 700; line-height: 1.4; color: #26272C; }
.contact-form .refs-pegar textarea { min-height: 130px; font-family: Consolas, monospace; font-size: 13px; }
/* Relleno, como el de la animación: es el botón que el tutorial enseña a pulsar. */
.contact-form .refs-pegar #refsPasteApply { justify-self: start; background: #F13D29; color: #fff; }
.contact-form .refs-pegar #refsPasteApply:hover { background: #C21300; border-color: #C21300; }

/* ---- El tutorial animado (lo pinta _form_lotes.py: demo_pegado) ----
   No es un vídeo: es HTML + CSS, nítido a cualquier tamaño y traducido. Todo el
   dibujo se mide en cqw (1 % del ancho de la pantalla) para que escale entero,
   y todas las piezas comparten un ciclo de 12 s:
     0-22 %  Excel: clic en A1 y arrastre hasta E4 (con Material y Acabado)
    24-36 %  Ctrl + C (hormigas en la selección)
    40-44 %  pasa al formulario
    46-58 %  clic en el recuadro y Ctrl + V
    62-66 %  clic en «Añadir a la tabla»
    66-94 %  aparecen las filas y el aviso «✓ 3 …»; luego vuelve a empezar */
.paste-demo { position: relative; margin: 0; }
.pd-screen { position: relative; width: 100%; aspect-ratio: 440 / 270; overflow: hidden; cursor: pointer;
    border: 1px solid #DCDCDE; border-radius: 8px; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
    container-type: inline-size; font-family: Calibri, Arial, sans-serif; color: #26272C; }
.pd-excel, .pd-form { position: absolute; inset: 0; }
.pd-excel { animation: pd-excel 12s infinite; }
.pd-form { opacity: 0; animation: pd-form 12s infinite; }
@keyframes pd-excel { 0%, 38% { opacity: 1; } 42%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes pd-form { 0%, 40% { opacity: 0; } 44%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }

.pd-xbar { position: absolute; left: 0; top: 0; right: 0; height: 8cqw; display: flex; align-items: center;
    gap: 1.6cqw; padding-left: 3cqw; background: #217346; color: #fff; font-size: 2.8cqw; }
.pd-xlogo { display: inline-flex; align-items: center; justify-content: center; width: 4.4cqw; height: 4.4cqw;
    border-radius: .6cqw; background: #fff; color: #217346; font-weight: 700; font-size: 2.8cqw; }
.pd-xgrid { position: absolute; left: 4cqw; top: 11.5cqw; width: 92cqw; display: grid;
    grid-template-columns: 5cqw 16cqw 13cqw 13.5cqw 16.5cqw 28cqw; grid-auto-rows: 6.5cqw; font-size: 2.5cqw;
    border-top: 1px solid #E1DFDD; border-left: 1px solid #E1DFDD; }
.pd-c { display: flex; align-items: center; padding: 0 1cqw; overflow: hidden; white-space: nowrap;
    border-right: 1px solid #E1DFDD; border-bottom: 1px solid #E1DFDD; }
.pd-hd { justify-content: center; padding: 0; background: #F3F2F1; color: #605E5C; }
.pd-b { font-weight: 700; }
.pd-r { justify-content: flex-end; }
/* La selección va de A1 a E4: 5 columnas (16+13+13,5+16,5+28 = 87) x 4 filas de
   6,5, empezando una fila por debajo de la cabecera de letras (11,5 + 6,5 = 18)
   y una columna a la derecha de la de números de fila (4 + 5 = 9). */
.pd-sel, .pd-ants { position: absolute; left: 9cqw; top: 18cqw; width: 87cqw; height: 26cqw;
    box-sizing: border-box; pointer-events: none; }
.pd-sel { border: .5cqw solid #217346; background: rgba(33, 115, 70, .10); opacity: 0; animation: pd-sel 12s infinite; }
.pd-ants { border: .5cqw dashed #217346; opacity: 0; animation: pd-ants 12s infinite; }
@keyframes pd-sel {
    0%, 7% { width: 0; height: 0; opacity: 0; }
    8% { width: 16cqw; height: 6.5cqw; opacity: 1; }
    22%, 40% { width: 87cqw; height: 26cqw; opacity: 1; }
    42%, 100% { width: 87cqw; height: 26cqw; opacity: 0; }
}
@keyframes pd-ants {
    0%, 25% { opacity: 0; } 26%, 29% { opacity: 1; } 31% { opacity: .3; } 33% { opacity: 1; }
    35% { opacity: .3; } 37%, 40% { opacity: 1; } 42%, 100% { opacity: 0; }
}
.pd-key { position: absolute; padding: 1cqw 2cqw; border-radius: 1cqw; background: #26272C; color: #fff;
    font-size: 3.2cqw; font-weight: 700; line-height: 1; white-space: nowrap; opacity: 0;
    box-shadow: 0 .6cqw 0 #000; }
.pd-key--c { left: 50cqw; top: 48.5cqw; animation: pd-key-c 12s infinite; }
.pd-key--v { left: 74cqw; top: 14.5cqw; animation: pd-key-v 12s infinite; }
@keyframes pd-key-c {
    0%, 23% { opacity: 0; transform: translateX(-50%) scale(.6); }
    25% { opacity: 1; transform: translateX(-50%) scale(1.1); }
    27%, 35% { opacity: 1; transform: translateX(-50%) scale(1); }
    38%, 100% { opacity: 0; transform: translateX(-50%) scale(1); }
}
@keyframes pd-key-v {
    0%, 48% { opacity: 0; transform: scale(.6); }
    50% { opacity: 1; transform: scale(1.1); }
    52%, 57% { opacity: 1; transform: scale(1); }
    60%, 100% { opacity: 0; transform: scale(1); }
}
.pd-lab { position: absolute; left: 5cqw; top: 3.5cqw; font: 700 2.8cqw/1.2 Arial, sans-serif; }
.pd-box { position: absolute; left: 5cqw; top: 8.5cqw; width: 90cqw; height: 17cqw; box-sizing: border-box;
    padding: 1.2cqw 1.6cqw; border: .3cqw solid #DCDCDE; border-radius: 1cqw; background: #fff;
    animation: pd-box 12s infinite; }
@keyframes pd-box { 0%, 46% { border-color: #DCDCDE; } 47%, 62% { border-color: #F13D29; } 64%, 100% { border-color: #DCDCDE; } }
.pd-pasted { display: block; font: 2.1cqw/1.5 Consolas, monospace; white-space: pre; opacity: 0;
    animation: pd-pasted 12s infinite; }
@keyframes pd-pasted { 0%, 51% { opacity: 0; } 53%, 94% { opacity: 1; } 96%, 100% { opacity: 0; } }
.pd-btn { position: absolute; left: 5cqw; top: 28cqw; padding: 1.3cqw 2.6cqw; border-radius: 1cqw;
    background: #F13D29; color: #fff; font: 700 2.6cqw/1 Arial, sans-serif; animation: pd-btn 12s infinite; }
@keyframes pd-btn {
    0%, 62% { transform: scale(1); background: #F13D29; }
    64% { transform: scale(.93); background: #C21300; }
    66%, 100% { transform: scale(1); background: #F13D29; }
}
.pd-ok { position: absolute; left: 40cqw; top: 28.3cqw; padding: 1.1cqw 2cqw; border-radius: 1cqw;
    background: #E8F5E9; color: #1B5E20; font: 700 2.5cqw/1 Arial, sans-serif; opacity: 0;
    animation: pd-ok 12s infinite; }
@keyframes pd-ok { 0%, 75% { opacity: 0; } 77%, 93% { opacity: 1; } 96%, 100% { opacity: 0; } }
.pd-tabla { position: absolute; left: 5cqw; top: 37.5cqw; width: 90cqw; font: 2.4cqw/1 Arial, sans-serif; }
.pd-tr { display: grid; grid-template-columns: 6% 20% 15% 16% 43%; align-items: center; height: 5cqw;
    border-bottom: 1px solid #ECECEE; }
.pd-tr span { padding: 0 1.2cqw; overflow: hidden; white-space: nowrap; }
/* Lo que la tabla real enseña debajo de «Detalles»: material · acabado. */
.pd-tr .pd-det { font-size: 1.9cqw; color: #58585A; }
.pd-th { border-radius: .8cqw .8cqw 0 0; background: #26272C; color: #fff; font-weight: 700; }
.pd-tr1, .pd-tr2, .pd-tr3 { opacity: 0; }
.pd-tr1 { animation: pd-tr1 12s infinite; }
.pd-tr2 { animation: pd-tr2 12s infinite; }
.pd-tr3 { animation: pd-tr3 12s infinite; }
@keyframes pd-tr1 { 0%, 66% { opacity: 0; transform: translateY(-1cqw); } 68% { opacity: 1; transform: none; background: #FFF1D6; } 74%, 94% { opacity: 1; background: transparent; } 96%, 100% { opacity: 0; } }
@keyframes pd-tr2 { 0%, 68% { opacity: 0; transform: translateY(-1cqw); } 70% { opacity: 1; transform: none; background: #FFF1D6; } 76%, 94% { opacity: 1; background: transparent; } 96%, 100% { opacity: 0; } }
@keyframes pd-tr3 { 0%, 70% { opacity: 0; transform: translateY(-1cqw); } 72% { opacity: 1; transform: none; background: #FFF1D6; } 78%, 94% { opacity: 1; background: transparent; } 96%, 100% { opacity: 0; } }
/* El puntero: su punta está en la esquina de arriba a la izquierda del SVG. */
.pd-cursor { position: absolute; left: 0; top: 0; width: 3.4cqw; height: 5.1cqw; opacity: 0; pointer-events: none;
    filter: drop-shadow(0 .3cqw .4cqw rgba(0, 0, 0, .3)); animation: pd-cursor 12s infinite; }
@keyframes pd-cursor {
    0% { opacity: 0; transform: translate(70cqw, 48cqw); }
    3% { opacity: 1; transform: translate(70cqw, 48cqw); }
    7% { transform: translate(11cqw, 19.5cqw); }
    8% { transform: translate(11cqw, 19.5cqw) scale(.85); }
    9% { transform: translate(11cqw, 19.5cqw) scale(1); }
    22% { transform: translate(93cqw, 42.5cqw) scale(1); }
    36% { opacity: 1; transform: translate(93cqw, 42.5cqw) scale(1); }
    40% { opacity: 0; transform: translate(93cqw, 42.5cqw) scale(1); }
    43% { opacity: 0; transform: translate(62cqw, 40cqw) scale(1); }
    45% { opacity: 1; transform: translate(62cqw, 40cqw) scale(1); }
    47% { transform: translate(30cqw, 16cqw) scale(1); }
    48% { transform: translate(30cqw, 16cqw) scale(.85); }
    49% { transform: translate(30cqw, 16cqw) scale(1); }
    51%, 58% { transform: translate(70cqw, 22.5cqw) scale(1); }
    62% { transform: translate(17cqw, 30cqw) scale(1); }
    64% { transform: translate(17cqw, 30cqw) scale(.85); }
    65% { transform: translate(17cqw, 30cqw) scale(1); }
    76% { opacity: 1; transform: translate(17cqw, 30cqw) scale(1); }
    80%, 100% { opacity: 0; transform: translate(17cqw, 30cqw) scale(1); }
}
.paste-demo.is-paused .pd-screen,
.paste-demo.is-paused .pd-screen * { animation-play-state: paused; }
.contact-form .pd-play { position: absolute; right: 8px; bottom: 8px; padding: 4px 10px; border: 0;
    border-radius: 12px; background: rgba(38, 39, 44, .78); color: #fff; font-size: 12px; font-weight: 600;
    cursor: pointer; }
.contact-form .pd-play:focus-visible { outline: 2px solid #F13D29; outline-offset: 2px; }
/* Si el sistema pide reducir el movimiento (Windows con las animaciones
   apagadas, muy típico por escritorio remoto) NO arranca sola: se ve el
   fotograma final quieto y el botón dice «▶ Ver animación». Solo se mueve si el
   cliente lo pide (el JS pone .is-playing). Los pasos escritos están siempre. */
@media (prefers-reduced-motion: reduce) {
    .paste-demo:not(.is-playing) .pd-screen,
    .paste-demo:not(.is-playing) .pd-screen * { animation: none !important; }
    .paste-demo:not(.is-playing) .pd-excel,
    .paste-demo:not(.is-playing) .pd-cursor,
    .paste-demo:not(.is-playing) .pd-key { display: none; }
    .paste-demo:not(.is-playing) .pd-form,
    .paste-demo:not(.is-playing) .pd-pasted,
    .paste-demo:not(.is-playing) .pd-tr1,
    .paste-demo:not(.is-playing) .pd-tr2,
    .paste-demo:not(.is-playing) .pd-tr3,
    .paste-demo:not(.is-playing) .pd-ok { opacity: 1; }
}
@supports not (width: 1cqw) {
    .pd-screen, .contact-form .pd-play { display: none; }
}

/* ---- Pantallas sucesivas: barra de pasos, pantallas y Atrás / Siguiente ----
   Una pantalla a la vista (las demás con [hidden]); la barra de arriba se pinta
   de rojo hasta el paso actual. Lo maneja presupuesto.js (6b). */
.quote-progreso { display: grid; gap: 8px; scroll-margin-top: 120px; }
.quote-pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; padding: 0;
    list-style: none; }
.quote-pasos li { margin: 0; padding: 0; }
.contact-form .quote-pasos button { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0;
    padding: 10px 0 0; border: 0; border-top: 4px solid #DCDCDE; border-radius: 0; background: none;
    color: #8A8A8C; font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1.25;
    text-align: left; cursor: pointer; }
.contact-form .quote-pasos button:disabled { cursor: default; }
.quote-pasos__n { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%; background: #DCDCDE; color: #fff; font-size: 13px;
    font-weight: 700; }
.contact-form .quote-pasos .is-actual button,
.contact-form .quote-pasos .is-hecho button { border-top-color: #F13D29; color: #26272C; }
.quote-pasos .is-actual .quote-pasos__n { background: #F13D29; }
/* Paso hecho: un check en vez del número (y se puede volver a él). */
.quote-pasos .is-hecho .quote-pasos__n { background: #26272C; font-size: 0; }
.quote-pasos .is-hecho .quote-pasos__n::after { content: "\2713"; font-size: 13px; }
.contact-form .quote-pasos .is-hecho button:hover .quote-pasos__t { text-decoration: underline; }
.quote-progreso__de { margin: 0; font-size: 13px; color: #58585A; }
.quote-pantalla { display: grid; gap: 16px; }
/* El foco va al título de la pantalla al cambiar (lectores de pantalla); sin marco. */
.quote-pantalla .field-legend:focus { outline: none; }
.quote-nav { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.contact-form .quote-nav__sig { margin-left: auto; padding: 14px 28px; border: 0; border-radius: 6px;
    background: #F13D29; color: #fff; font-family: inherit; font-weight: 600; font-size: 16px;
    cursor: pointer; transition: background .2s; }
.contact-form .quote-nav__sig:hover { background: #C21300; }
.contact-form .quote-nav .quote-nav__atras { padding: 13px 22px; font-size: 15px; }
.quote-final { margin-left: auto; }
/* Turnstile + Enviar hasta la última pantalla: fuera de la vista, NUNCA con
   display:none (Turnstile no debe pintarse dentro de uno), e inerte. */
.quote-final.is-fuera { position: absolute; left: -10000px; top: 0; width: 400px; overflow: hidden; }
.refs-promo--final { margin-top: 4px; }

/* ---- 3. ¿Qué necesitas? ---- */
.quote-scope { display: grid; gap: 12px; }
.choice-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
.contact-form .choice { position: relative; display: block; margin: 0; padding: 14px 16px; cursor: pointer;
    border: 1px solid #DCDCDE; border-radius: 8px; background: #fff; font-weight: 600;
    font-size: 15px; line-height: 1.35; user-select: none;
    transition: border-color .15s, background .15s; }
.contact-form .choice:hover { border-color: #F13D29; }
.choice__title { display: block; }
.choice__help { display: block; font-weight: 400; font-size: 12px; color: #58585A; margin-top: 4px; }
.contact-form .choice:not(.choice--check) > input { position: absolute; opacity: 0; pointer-events: none; }
.contact-form .choice:has(input:checked) { border-color: #F13D29; background: #FFF8F6; }
.contact-form .choice:has(input:focus-visible) { outline: 2px solid #F13D29; outline-offset: 2px; }
/* Los procesos SÍ muestran la casilla nativa: es lo único que le dice al
   cliente "puedes marcar varios". Todo .choice va prefijado con .contact-form:
   si no, ".contact-form label" (display:block) le gana, el gap no existe y la
   casilla queda pegada al texto. */
.contact-form .choice--check { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    font-weight: 500; font-size: 14px; }
.contact-form .choice--check input { position: static; opacity: 1; width: auto; margin: 0; padding: 0;
    flex: 0 0 auto; accent-color: #F13D29; }
.choice-list { display: grid; gap: 8px; grid-template-columns: repeat(4, 1fr); }
.choice-list--2 { grid-template-columns: repeat(2, 1fr); }
.quote-detail { border: 1px solid #DCDCDE; border-radius: 8px; background: #F5F7F8; }
.quote-detail > summary { padding: 12px 16px; cursor: pointer; font-weight: 600;
    font-size: 14px; color: #26272C; list-style: none; }
.quote-detail > summary::-webkit-details-marker { display: none; }
.quote-detail > summary::before { content: "\25B8\00a0"; color: #F13D29; }
.quote-detail[open] > summary::before { content: "\25BE\00a0"; }
.quote-detail__body { display: grid; gap: 12px; padding: 0 16px 16px; }
.quote-detail .field-legend { margin: 0; font-weight: 600; font-size: 14px; }
.quote-detail summary small { font-weight: 400; color: #58585A; }

/* ---- 4. Especificaciones (opcional) ---- */
.quote-specs .quote-detail__body { gap: 14px; }
.spec-cert { display: flex; align-items: flex-end; }
.contact-form .spec-cert label { display: flex; gap: 8px; align-items: flex-start; font-weight: 400;
    margin: 0 0 12px; }
.contact-form .spec-cert input { width: auto; margin-top: 3px; }

/* ---- Dirección de envío ---- */
.contact-form .quote-envio { display: grid; gap: 16px; }
.contact-form .quote-envio .field-legend { margin: 0 0 -10px; }
.contact-form .ship-pickup { font-size: 14px; color: #26272C; }
/* El enlace de Maps no se oculta: se apaga. */
.contact-form .ship-map a { color: #F13D29; }
.contact-form .ship-map a.is-off { color: #8A8A8C; pointer-events: none; text-decoration: none; cursor: default; }
.contact-form .ship-pickup label { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; margin: 0; }
.contact-form .ship-pickup input { width: auto; margin-top: 3px; }

/* ---- Pantallas medianas y móvil ---- */
@media (max-width: 1024px) {
    .quote-facts { grid-template-columns: repeat(2, 1fr); }
    .contact-form .form-row-4 { grid-template-columns: repeat(2, 1fr); }
    .choice-list { grid-template-columns: repeat(2, 1fr); }
    .refs-panel { grid-template-columns: repeat(2, 1fr); }
    .refs-pegar { grid-template-columns: 1fr; }
    .paste-demo { max-width: 560px; }
}
@media (max-width: 700px) {
    .quote-facts { grid-template-columns: 1fr; }
    .contact-form .form-row,
    .contact-form .form-row-3,
    .contact-form .form-row-4 { grid-template-columns: 1fr; }
    .choice-grid { grid-template-columns: 1fr; }
    .choice-list, .choice-list--2 { grid-template-columns: 1fr; }
    .refs-modo { grid-template-columns: 1fr; }
    .contact-form .refs-modo label { text-align: left; }
    .refs-pegar { padding: 12px; }
}
/* Por debajo de 640 px la tabla pasa a tarjetas: una por referencia, con la
   etiqueta de cada celda delante (data-label). */
@media (max-width: 640px) {
    .refs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .refs-table, .refs-table tbody, .refs-table tr, .refs-table td { display: block; width: 100%; }
    .refs-table tr.refs-row { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px;
        padding: 12px 40px 12px 12px; border-top: 1px solid #DCDCDE; }
    .refs-table tr.refs-row:first-child { border-top: 0; }
    .refs-table td { padding: 0; border: 0; }
    .refs-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px;
        font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #58585A; margin-bottom: 3px; }
    .refs-table .refs-col-n { display: none; }
    .refs-table td:nth-child(2) { grid-column: 1 / -1; }
    .refs-table .refs-files { grid-column: 1 / -1; white-space: normal; }
    /* En la tarjeta, la vista de la pieza a lo ancho, encima de las marcas. */
    .contact-form .refs-table .refs-vista { display: flex; width: 100%; height: 130px; margin: 0 0 6px; padding: 6px; }
    .contact-form .refs-table .refs-ref, .contact-form .refs-table .refs-qty,
    .contact-form .refs-table .refs-esp { width: 100%; min-width: 0; }
    .refs-det-cell { grid-column: 1 / -1; }
    .refs-del-cell { position: absolute; top: 8px; right: 4px; width: auto !important; }
    .refs-detrow td { padding: 10px 12px; }
    .refs-panel { grid-template-columns: 1fr; }
    /* En el móvil la barra de pasos solo rotula el actual; el resto, su número. */
    .quote-pasos li:not(.is-actual) .quote-pasos__t { display: none; }
    .contact-form .quote-nav__sig { flex: 1 1 auto; }
    .quote-final { width: 100%; }
}