/* ==========================================================================
   Facturación MDM · página "en preparación" (estática, sin JavaScript).
   Colores de la marca MDM; modo oscuro automático; sin movimiento si el equipo pide reducirlo.
   ========================================================================== */

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fuentes/poppins-400.woff2") format("woff2");
}

@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fuentes/poppins-600.woff2") format("woff2");
}

:root {
    --fondo: #e9ecf5;
    --texto: #10184a;
    --texto-suave: #4f5781;
    --indigo: #273583;
    --indigo-oscuro: #1b2566;
    --piso: #d3d8ea;
    --piso-linea: #b9c0da;
    --acero: #8e96b9;
    --acero-oscuro: #5b6286;
    --acero-brillo: #c9cee3;
    --casco: #10184a;
    --guante: #a8742a;
    --bota: #10184a;
    --cable: #10184a;
    --metal: #e5a00d;
    --chispa: #ffc24a;
    --arco: #f4f7ff;
    --humo: #9aa2ca;
}

@media (prefers-color-scheme: dark) {
    :root {
        --fondo: #0a0f2c;
        --texto: #e6e9f7;
        --texto-suave: #9aa2ca;
        --indigo: #3e51b8;
        --indigo-oscuro: #2c3a8f;
        --piso: #10184a;
        --piso-linea: #232c5c;
        --acero: #4a5590;
        --acero-oscuro: #323d75;
        --acero-brillo: #6a76b3;
        --casco: #1d2659;
        --guante: #9a6a26;
        --bota: #1d2659;
        --cable: #2c3670;
        --humo: #5b6286;
    }
}

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

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    background: var(--fondo);
    color: var(--texto);
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Diagramación: el texto arriba a la izquierda; el taller abajo, con el piso de lado a lado ---------- */
.pagina {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    min-height: 100vh;
    min-height: 100dvh;
}

.contenido {
    width: 100%;
    max-width: 76rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 2rem;
}

.marca__logo {
    display: block;
    width: 9.5rem;
    height: auto;
}

.mensaje {
    margin-top: clamp(2.5rem, 8vh, 6rem);
}

.mensaje__titulo {
    max-width: 18ch;
    margin: 0;
    font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.mensaje__texto {
    margin: 1rem 0 0;
    color: var(--texto-suave);
    font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
}

/* La escena recorta el piso, que en el dibujo sigue de largo hacia los costados. */
.escena {
    margin: 0;
    overflow: hidden;
}

.taller {
    display: block;
    width: min(100%, 40rem);
    height: auto;
    margin-left: auto;
    margin-right: max(0px, calc((100% - 76rem) / 2 + 1rem));
    overflow: visible;
}

@media (min-width: 72rem) {
    .contenido {
        padding: 2.5rem 2.5rem 0;
    }

    .marca__logo {
        width: 11rem;
    }

    /* Con pantalla ancha el soldador sube y queda a la derecha del texto. */
    .escena {
        margin-top: -14rem;
    }

    .taller {
        margin-right: max(1.5rem, calc((100% - 76rem) / 2 + 2.5rem));
    }
}

/* ---------- Dibujo ---------- */
.piso {
    fill: var(--piso);
}

.piso__linea {
    stroke: var(--piso-linea);
    stroke-width: 2;
}

.piso-luz__centro {
    stop-color: var(--metal);
    stop-opacity: 0.45;
}

.piso-luz__borde {
    stop-color: var(--metal);
    stop-opacity: 0;
}

.banco {
    fill: var(--acero-oscuro);
}

.pieza {
    fill: var(--acero);
}

.pieza__brillo {
    stroke: var(--acero-brillo);
    stroke-width: 1.5;
    stroke-linecap: round;
}

.cordon {
    fill: none;
    stroke: #ffb347;
    stroke-width: 4;
    stroke-linecap: round;
}

.cable {
    fill: none;
    stroke: var(--cable);
    stroke-width: 3;
    stroke-linecap: round;
}

.ropa {
    fill: var(--indigo);
}

.ropa--atras {
    fill: var(--indigo-oscuro);
}

.ropa__costura,
.casco__vincha {
    fill: none;
    stroke: var(--indigo-oscuro);
    stroke-width: 2;
    stroke-linecap: round;
}

.ropa__bolsillo {
    fill: none;
    stroke: var(--indigo-oscuro);
    stroke-width: 1.5;
}

.casco__vincha {
    stroke: var(--acero-oscuro);
}

.cuello {
    fill: var(--indigo-oscuro);
}

.casco__cuerpo {
    fill: var(--casco);
}

.casco__visor {
    fill: var(--metal);
}

.guante {
    fill: var(--guante);
}

.bota {
    fill: var(--bota);
}

.pinza {
    stroke: var(--acero-oscuro);
    stroke-width: 4;
    stroke-linecap: round;
}

.pinza__mango {
    stroke: var(--cable);
    stroke-width: 7;
    stroke-linecap: round;
}

.luz__centro {
    stop-color: #ffffff;
    stop-opacity: 0.95;
}

.luz__medio {
    stop-color: var(--chispa);
    stop-opacity: 0.35;
}

.luz__borde {
    stop-color: var(--metal);
    stop-opacity: 0;
}

.arco {
    fill: var(--arco);
}

.chispa {
    fill: var(--chispa);
}

.humo {
    fill: var(--humo);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

/* Cada chispa sale para su lado: --dx avance horizontal, --sube altura del salto, --cae dónde termina. */
.chispa:nth-child(1)  { --dx: 46px;  --sube: -38px; --cae: 18px;  --t: 0.9s;  --d: -0.10s; }
.chispa:nth-child(2)  { --dx: -34px; --sube: -30px; --cae: 22px;  --t: 1.1s;  --d: -0.45s; }
.chispa:nth-child(3)  { --dx: 62px;  --sube: -22px; --cae: 30px;  --t: 1.0s;  --d: -0.70s; }
.chispa:nth-child(4)  { --dx: 18px;  --sube: -52px; --cae: 14px;  --t: 1.2s;  --d: -0.20s; }
.chispa:nth-child(5)  { --dx: -52px; --sube: -18px; --cae: 26px;  --t: 0.95s; --d: -0.85s; }
.chispa:nth-child(6)  { --dx: 34px;  --sube: -60px; --cae: 8px;   --t: 1.3s;  --d: -0.55s; }
.chispa:nth-child(7)  { --dx: 78px;  --sube: -14px; --cae: 40px;  --t: 1.05s; --d: -0.30s; }
.chispa:nth-child(8)  { --dx: -18px; --sube: -46px; --cae: 20px;  --t: 1.15s; --d: -0.95s; }
.chispa:nth-child(9)  { --dx: 54px;  --sube: -44px; --cae: 24px;  --t: 1.25s; --d: -0.05s; }
.chispa:nth-child(10) { --dx: -62px; --sube: -26px; --cae: 34px;  --t: 1.0s;  --d: -0.60s; }
.chispa:nth-child(11) { --dx: 26px;  --sube: -30px; --cae: 36px;  --t: 0.85s; --d: -0.40s; }
.chispa:nth-child(12) { --dx: 70px;  --sube: -34px; --cae: 12px;  --t: 1.15s; --d: -0.75s; }
.chispa:nth-child(13) { --dx: -40px; --sube: -54px; --cae: 16px;  --t: 1.3s;  --d: -0.15s; }
.chispa:nth-child(14) { --dx: 8px;   --sube: -24px; --cae: 30px;  --t: 0.9s;  --d: -0.50s; }

/* Quieto (reducir movimiento): la escena queda congelada con las chispas a mitad de camino. */
.chispa {
    transform: translate(calc(var(--dx) * 0.6), calc(var(--sube) * 0.8));
}

.casco,
.avance {
    transform-box: view-box;
}

.casco {
    transform-origin: 284px 196px;
}

/* ---------- Movimiento: un ciclo de 7 s, suelda y levanta el casco para mirar el cordón ---------- */
@media (prefers-reduced-motion: no-preference) {
    .trabajo {
        animation: trabajo 7s linear infinite;
    }

    .avance {
        animation: avance 7s ease-in-out infinite;
    }

    .casco {
        animation: casco 7s ease-in-out infinite;
    }

    .cordon {
        animation: cordon 7s linear infinite;
    }

    .arco {
        animation: chisporroteo 0.32s steps(2, jump-none) infinite;
    }

    .luz {
        animation: chisporroteo 0.45s steps(3, jump-none) infinite;
    }

    .chispa {
        animation: chispa var(--t) var(--d) infinite;
    }

    .humo {
        animation: humo 2.4s ease-out infinite;
    }

    .humo--2 {
        animation-delay: -1.2s;
    }

    .casco__visor {
        animation: visor 7s linear infinite;
    }
}

@keyframes trabajo {
    0%, 70% { opacity: 1; }
    72%, 97% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes avance {
    0% { transform: translateX(0); }
    70% { transform: translateX(14px); }
    100% { transform: translateX(0); }
}

@keyframes casco {
    0%, 72% { transform: rotate(0deg); }
    79%, 90% { transform: rotate(-24deg); }
    97%, 100% { transform: rotate(0deg); }
}

@keyframes cordon {
    0%, 70% { stroke: #ffd27a; }
    86% { stroke: #e0662b; }
    100% { stroke: var(--acero-oscuro); }
}

@keyframes chisporroteo {
    0% { opacity: 1; }
    50% { opacity: 0.55; }
    100% { opacity: 0.9; }
}

@keyframes chispa {
    0% {
        opacity: 1;
        transform: translate(0, 0);
        animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1);
    }

    40% {
        transform: translate(calc(var(--dx) * 0.55), var(--sube));
        animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.5);
    }

    100% {
        opacity: 0;
        transform: translate(var(--dx), var(--cae));
    }
}

/* El vidrio del casco brilla con el arco y se oscurece en la pausa. */
@keyframes visor {
    0%, 70% { opacity: 1; }
    74%, 97% { opacity: 0.35; }
    100% { opacity: 1; }
}

@keyframes humo {
    0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
    30% { opacity: 0.28; }
    100% { opacity: 0; transform: translate(-10px, -60px) scale(1.8); }
}