/* =====================================================
   01. CONFIGURACIÓN GENERAL
===================================================== */
:root {
    --color-acento: #f0a500;
    --color-borde: #333;
    --color-oscuro: #111;
    --color-atenuado: #aaa;
    --color-panel: #1b1b1b;
    --color-panel-intenso: #151515;
    --color-blanco: #fff;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-width: 0;
    overflow-x: clip;
    overflow-wrap: break-word;
    background: var(--color-oscuro);
    color: var(--color-blanco);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
}

img,
video,
canvas,
svg,
iframe {
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

a {
    color: inherit;
}

.sr-solo {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =====================================================
   02. ENCABEZADO, LOGOTIPOS Y NAVEGACIÓN
===================================================== */
.encabezado-sitio {
    position: relative; 
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: clamp(0.75rem, 2vw, 2rem);
    padding: clamp(1rem, 2vw, 1.25rem) clamp(1rem, 5vw, 4rem);
    background: var(--color-panel-intenso);
    border-bottom: 1px solid var(--color-borde);
}

.logo,
.logo a {
    display: flex;
    min-width: 0;
    align-items: center;
}

.logo {
    flex: 0 1 auto;
}

.logo a img {
    display: block;
    width: clamp(9.375rem, 20vw, 16.5625rem);
    max-width: 100%;
    height: auto;
}

.logo .logo-soldador {
    display: block;
    width: clamp(5.625rem, 11vw, 9.375rem);
    max-width: 100%;
    height: auto;
    padding-left: clamp(0.375rem, 1vw, 0.625rem);
}

.navegacion-principal {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: clamp(0rem, 0.35vw, 0.3125rem);
}

.navegacion-principal > a,
.navegacion-desplegable-boton {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem clamp(0.55rem, 1vw, 0.875rem);
    background: transparent;
    color: var(--color-blanco);
    font-size: clamp(0.9375rem, 1.25vw, 1.0625rem);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s;
}

.navegacion-principal > a:hover,
.navegacion-principal > a.activo,
.navegacion-desplegable-boton:hover,
.navegacion-desplegable-boton.activo,
.navegacion-desplegable.abierto .navegacion-desplegable-boton {
    color: var(--color-acento);
}

/* MENÚ DESPLEGABLE DE SERVICIOS. */
.navegacion-desplegable {
    position: relative;
    display: flex;
    align-self: stretch;
}

.navegacion-desplegable-boton {
    gap: 0.45rem;
    background: transparent;
    border: 0;
}

.navegacion-desplegable-boton i {
    font-size: 0.72em;
    transition: transform 0.25s ease;
}

.navegacion-desplegable.abierto .navegacion-desplegable-boton i {
    transform: rotate(180deg);
}

.navegacion-submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 20;
    display: grid;
    width: max-content;
    min-width: 16.5rem;
    padding: 0.5rem;
    background: #202020;
    border: 1px solid #3a3a3a;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 0.5rem);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}

.navegacion-submenu a {
    padding: 0.72rem 0.9rem;
    border-left: 0.1875rem solid transparent;
    color: #e4e4e4;
    font-size: 0.9375rem;
    line-height: 1.25;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.navegacion-submenu a:hover,
.navegacion-submenu a:focus-visible,
.navegacion-submenu a.activo {
    background: #2b2b2b;
    border-left-color: var(--color-acento);
    color: var(--color-acento);
    outline-offset: -2px;
}

.navegacion-desplegable.abierto .navegacion-submenu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

@media (min-width: 1121px) and (hover: hover) and (pointer: fine) {
    .navegacion-desplegable:hover .navegacion-submenu {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
        pointer-events: auto;
    }
}

.boton-menu {
    display: none;
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    color: var(--color-blanco);
    font-size: 1.75rem;
    cursor: pointer;
}

/* =====================================================
   03. BOTONES DE DESPLAZAMIENTO
===================================================== */
.botones-scroll {
    position: fixed;
    right: clamp(0.75rem, 2vw, 1.5625rem);
    bottom: clamp(1rem, 3vw, 1.875rem);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.botones-scroll a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.8125rem;
    height: 2.8125rem;
    background: var(--color-borde);
    border-radius: 50%;
    color: var(--color-blanco);
    font-size: 1.125rem;
    text-decoration: none;
    transition: background-color 0.3s, transform 0.3s;
}

.botones-scroll a:hover {
    background: #555;
    transform: scale(1.1);
}

/* =====================================================
   04. ESTRUCTURA GENERAL DE LAS PÁGINAS
===================================================== */
#contenido {
    min-height: min(43.75rem, 100svh);
}

.pagina {
    width: 100%;
    max-width: 81.25rem;
    margin: auto;
    padding: clamp(3.75rem, 6vw, 5rem) clamp(1rem, 5vw, 4rem);
}

.pagina h1 {
    margin-bottom: clamp(1rem, 2vw, 1.5625rem);
    font-size: clamp(2.25rem, 4.5vw, 3rem);
    line-height: 1.15;
}

.pagina h2 {
    margin-bottom: 1.25rem;
    font-size: clamp(1.75rem, 3vw, 2rem);
    line-height: 1.2;
}

.pagina h3 {
    margin-bottom: 0.625rem;
}

.seccion-introduccion {
    margin-bottom: clamp(2.5rem, 5vw, 3.75rem);
    text-align: center;
}

.seccion-introduccion h2 {
    margin: 0.625rem 0 0.9375rem;
    font-size: clamp(2rem, 4vw, 2.625rem);
    line-height: 1.15;
}

.seccion-introduccion h3 {
    margin: 0.625rem 0 0.9375rem;
    font-size: 1.25rem;
}

.seccion-introduccion p {
    max-width: 65ch;
    margin-inline: auto;
    color: var(--color-atenuado);
    font-size: clamp(1rem, 1.6vw, 1.125rem);
}

.seccion-etiqueta,
.seccion-etiqueta-grande {
    display: inline-block;
    color: var(--color-acento);
    font-weight: 700;
    letter-spacing: 0.125rem;
}

.seccion-etiqueta {
    font-size: 0.8125rem;
}

.seccion-etiqueta-grande {
    font-size: 1rem;
}

/* =====================================================
   05. BOTONES Y TARJETAS GENERALES
===================================================== */
.boton {
    display: inline-block;
    max-width: 100%;
    margin-right: 0.625rem;
    padding: 0.875rem clamp(1.1rem, 2vw, 1.5625rem);
    background: var(--color-acento);
    border: 0;
    color: var(--color-oscuro);
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.boton:hover {
    background: var(--color-blanco);
}

.tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.625rem), 1fr));
    gap: clamp(1rem, 2vw, 1.5625rem);
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.tarjeta {
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 1.875rem);
    background: var(--color-panel);
    border: 1px solid var(--color-borde);
    transition: border-color 0.3s, transform 0.3s;
}

.tarjeta:hover {
    border-color: var(--color-acento);
    transform: translateY(-0.3125rem);
}

.tarjeta h3 {
    margin-bottom: 0.9375rem;
    font-size: 1.375rem;
}

.tarjeta p {
    color: #bbb;
}

/* =====================================================
   06. SERVICIOS Y VENTA DE MATERIALES
===================================================== */
.servicio-enlace {
    margin-top: auto;
    padding-top: 1.25rem;
    color: var(--color-acento);
    font-weight: 700;
    text-decoration: none;
}

.servicio-enlace:hover {
    color: var(--color-blanco);
}

/* PÁGINA VENTA DE MATERIALES: AVISO DE PRÓXIMO LANZAMIENTO. */
.venta-proximamente {
    position: relative;
    display: grid;
    min-height: clamp(25rem, 55vw, 36rem);
    place-items: center;
    padding: clamp(2.5rem, 7vw, 5.5rem) clamp(1.25rem, 6vw, 4rem);
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 15%, rgba(240, 165, 0, 0.14), transparent 42%),
        linear-gradient(145deg, #1d1d1d, #141414);
    border: 1px solid #3b3b3b;
    isolation: isolate;
    text-align: center;
}

.venta-proximamente::before,
.venta-proximamente::after {
    position: absolute;
    z-index: -1;
    width: min(28rem, 65vw);
    height: 0.35rem;
    background: var(--color-acento);
    content: "";
    opacity: 0.3;
    transform: rotate(-28deg);
}

.venta-proximamente::before {
    top: 12%;
    left: -10%;
}

.venta-proximamente::after {
    right: -12%;
    bottom: 14%;
}

.venta-proximamente-contenido {
    width: min(100%, 48rem);
}

.venta-proximamente-icono {
    display: grid;
    width: clamp(5rem, 10vw, 7rem);
    aspect-ratio: 1;
    place-items: center;
    margin: 0 auto 1.5rem;
    background: rgba(240, 165, 0, 0.08);
    border: 0.125rem solid var(--color-acento);
    border-radius: 50%;
    color: var(--color-acento);
    font-size: clamp(2rem, 5vw, 3.25rem);
}

.venta-proximamente h2 {
    margin: 0.5rem 0 1.25rem;
    font-size: clamp(2.3rem, 6vw, 4.5rem);
    line-height: 1.05;
}

.venta-proximamente p {
    max-width: 42rem;
    margin-inline: auto;
    color: #d0d0d0;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
}

.venta-proximamente .venta-proximamente-secundario {
    margin-top: 0.85rem;
    color: #9f9f9f;
    font-size: clamp(0.9rem, 1.5vw, 1rem);
}

/* PÁGINA SERVICIOS INDUSTRIALES: FILAS ALTERNADAS. */
.servicios-listado {
    display: grid;
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

.servicio-fila {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(19rem, 0.92fr);
    min-height: clamp(17.5rem, 27vw, 22rem);
    overflow: hidden;
    background: var(--color-panel);
    border: 1px solid var(--color-borde);
    isolation: isolate;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.servicio-fila::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(54% - 0.0625rem);
    z-index: 1;
    width: 0.125rem;
    background: linear-gradient(180deg, transparent, var(--color-acento), transparent);
    content: "";
    opacity: 0.65;
    pointer-events: none;
}

.servicio-fila:nth-child(even) {
    grid-template-columns: minmax(19rem, 0.92fr) minmax(0, 1.08fr);
}

.servicio-fila:nth-child(even)::after {
    right: calc(54% - 0.0625rem);
    left: auto;
}

.servicio-fila:nth-child(even) .servicio-fila-imagen {
    order: 2;
}

.servicio-fila:nth-child(even) .servicio-fila-contenido {
    order: 1;
}

.servicio-fila-imagen {
    position: relative;
    min-width: 0;
    min-height: 100%;
    overflow: hidden;
    background: var(--color-panel-intenso);
}

.servicio-fila-imagen::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 55%, rgba(17, 17, 17, 0.25));
    content: "";
    pointer-events: none;
}

.servicio-fila:nth-child(even) .servicio-fila-imagen::after {
    background: linear-gradient(270deg, transparent 55%, rgba(17, 17, 17, 0.25));
}

.servicio-fila-imagen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--posicion-imagen, 50% 50%);
    filter: saturate(0.88) contrast(1.04);
    transition: filter 0.45s ease, transform 0.55s ease;
}

.servicio-fila-contenido {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(2rem, 4vw, 3.5rem);
}

.servicio-fila-numero {
    position: absolute;
    top: clamp(0.75rem, 2vw, 1.25rem);
    right: clamp(1rem, 2.5vw, 1.75rem);
    color: rgba(255, 255, 255, 0.09);
    font-size: clamp(3.5rem, 7vw, 6rem);
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.servicio-fila-etiqueta {
    position: relative;
    z-index: 1;
    margin-bottom: 0.65rem;
    color: var(--color-acento);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.115rem;
}

.servicio-fila-contenido h2 {
    position: relative;
    z-index: 1;
    margin-bottom: 0.8rem;
    font-size: clamp(1.75rem, 3.4vw, 2.65rem);
}

.servicio-fila-contenido p {
    position: relative;
    z-index: 1;
    max-width: 41rem;
    color: #c4c4c4;
    font-size: clamp(0.95rem, 1.35vw, 1.05rem);
}

.servicio-fila-enlace {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 1.4rem;
    padding: 0.7rem 0;
    border-bottom: 2px solid var(--color-acento);
    color: var(--color-acento);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.25s, gap 0.25s;
}

.servicio-fila-enlace:focus-visible {
    outline: 2px solid var(--color-blanco);
    outline-offset: 0.35rem;
}

@media (hover: hover) and (pointer: fine) {
    .servicio-fila:hover {
        border-color: var(--color-acento);
        box-shadow: 0 1.25rem 2.75rem rgba(0, 0, 0, 0.28);
    }

    .servicio-fila:hover .servicio-fila-imagen img {
        filter: saturate(1.02) contrast(1.06);
        transform: scale(1.045);
    }

    .servicio-fila-enlace:hover {
        gap: 0.95rem;
        color: var(--color-blanco);
    }
}

/* =====================================================
   07. PÁGINA NOSOTROS
===================================================== */
.nosotros-contenedor {
    display: flex;
    justify-content: center;
}


.nosotros-imagen-contenedor {
    display: flex;
    justify-content: center;
    margin: 1.25rem 0;
}

.nosotros-logo {
    width: 29.0625rem;
    max-width: 100%;
    height: auto;
}

.nosotros-titulo {
    margin: 0.625rem 0;
    color: var(--color-acento);
    font-size: clamp(2rem, 4vw, 2.8125rem);
    line-height: 1.15;
    text-align: center;
}

.nosotros-fondo {
    display: block;
    width: 100%;
    height: auto;
    margin: 1.25rem 0 2.5rem;
    border: 0.25rem solid #8f3e01;
}

.nosotros-imagen,
.mision-imagen,
.vision-imagen {
    max-width: 100%;
    height: auto;
    margin-top: 0.625rem;
}

.nosotros-imagen {
    width: 25.3125rem;
    margin-bottom: 1.875rem;
    border: 0.10rem solid #8f3e01;
}

.mision-imagen {
    width: 16.5625rem;
    margin-bottom: 1.25rem;
}

.vision-imagen {
    width: 14.0625rem;
    margin-bottom: 1.25rem;
}

.nosotros-parrafo {
    margin-bottom: 0.625rem;
    color: var(--color-blanco);
    font-size: 1.125rem;
    text-align: justify;
}

.seccion-llamada-accion p.nosotros-parrafo {
    color: #d1d1d1;
}

/* =====================================================
   08. FORMULARIO DE CONTACTO
===================================================== */
.contacto-imagen-contenedor,
.formulario-contenedor {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contacto-imagen {
    width: 17.5rem;
    max-width: 100%;
    height: auto;
}

.contacto-imagen-secundaria {
    width: 8.375rem;
    max-width: 100%;
    height: auto;
    margin: 0.625rem 0 0.9375rem;
}

.formulario-encabezado {
    text-align: center;
}

.formulario-texto {
    margin-bottom: 0.625rem;
    font-size: 1.125rem;
    text-align: center;
}

.seccion-llamada-accion p.formulario-texto {
    color: #d1d1d1;
}

.formulario-contacto {
    width: 100%;
    max-width: 43.75rem;
    margin-top: 2.5rem;
    padding: 0.625rem;
}

.contacto-formulario-seccion .seccion-llamada-accion {
    margin-top: 0;
}

.formulario-grupo {
    margin-bottom: 1.25rem;
}

.formulario-contacto label {
    display: block;
    margin-bottom: 0.4375rem;
}

.formulario-contacto input,
.formulario-contacto textarea,
.formulario-contacto select {
    width: 100%;
    padding: 0.8125rem;
    background: #1c1c1c;
    border: 1px solid #444;
    color: var(--color-blanco);
    font-family: inherit;
}

.formulario-contacto textarea {
    min-height: 9.375rem;
    resize: vertical;
}

.formulario-trampa {
    display: none;
}

/* =====================================================
   08B. CONFIRMACIÓN DE ENVÍO DEL FORMULARIO
===================================================== */
.confirmacion-envio {
    position: relative;
    display: grid;
    min-height: 100vh;
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
    place-items: center;
    padding: clamp(1.25rem, 5vw, 3.5rem);
    background:
        radial-gradient(circle at 50% 0%, rgba(240, 165, 0, 0.16), transparent 35rem),
        var(--color-oscuro);
}

.confirmacion-envio::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 3rem 3rem;
    content: "";
    -webkit-mask-image: linear-gradient(to bottom, black, transparent 75%);
    mask-image: linear-gradient(to bottom, black, transparent 75%);
    pointer-events: none;
}

.confirmacion-envio-contenido {
    position: relative;
    z-index: 1;
    width: min(100%, 46rem);
    text-align: center;
}

.confirmacion-envio-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    gap: clamp(0.25rem, 1vw, 0.75rem);
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
    text-decoration: none;
}

.confirmacion-envio-logo-mcv {
    display: block;
    width: clamp(10rem, 32vw, 15rem);
    height: auto;
}

.confirmacion-envio-logo-soldador {
    display: block;
    width: clamp(5rem, 15vw, 7.5rem);
    height: auto;
}

.confirmacion-envio-tarjeta {
    padding: clamp(2rem, 6vw, 4rem);
    overflow: hidden;
    background: rgba(27, 27, 27, 0.96);
    border: 1px solid var(--color-borde);
    border-top: 0.25rem solid var(--color-acento);
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.38);
}

.confirmacion-envio-icono {
    display: grid;
    width: clamp(4.5rem, 12vw, 5.75rem);
    aspect-ratio: 1;
    margin: 0 auto clamp(1.25rem, 3vw, 1.75rem);
    place-items: center;
    background: rgba(240, 165, 0, 0.1);
    border: 2px solid var(--color-acento);
    border-radius: 50%;
    color: var(--color-acento);
    font-size: clamp(2rem, 6vw, 2.75rem);
    font-weight: 700;
    line-height: 1;
}

.confirmacion-envio-etiqueta {
    display: block;
    margin-bottom: 0.65rem;
    color: var(--color-acento);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14rem;
}

.confirmacion-envio-tarjeta h1 {
    margin-bottom: 1rem;
    font-size: clamp(2rem, 6vw, 3.25rem);
    line-height: 1.08;
}

.confirmacion-envio-mensaje {
    max-width: 38rem;
    margin: 0 auto;
    color: #d1d1d1;
    font-size: clamp(1rem, 2.2vw, 1.125rem);
}

.confirmacion-envio-redireccion {
    margin: 1.5rem 0 1rem;
    color: var(--color-atenuado);
    font-size: 0.9375rem;
}

.confirmacion-envio-progreso {
    width: min(100%, 22rem);
    height: 0.25rem;
    margin: 0 auto 1.75rem;
    overflow: hidden;
    background: #343434;
}

.confirmacion-envio-progreso::after {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-acento);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    animation: confirmacion-cuenta-regresiva 3s linear forwards;
}

.confirmacion-envio-tarjeta .boton {
    margin-right: 0;
}

.confirmacion-envio-marca {
    margin-top: 1.25rem;
    color: #777;
    font-size: 0.8125rem;
    letter-spacing: 0.08rem;
}

@keyframes confirmacion-cuenta-regresiva {
    to {
        transform: scaleX(1);
    }
}

/* =====================================================
   09. LLAMADOS A LA ACCIÓN
===================================================== */
.seccion-llamada-accion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    margin-top: clamp(3.75rem, 8vw, 6.25rem);
    padding: clamp(1.75rem, 5vw, 3.75rem);
    background: var(--color-panel);
    border: 1px solid var(--color-borde);
}

.seccion-llamada-accion > * {
    min-width: 0;
    max-width: 100%;
}

.seccion-llamada-accion h2 {
    margin: 0.625rem 0;
    font-size: clamp(1.75rem, 3.5vw, 2.1875rem);
    line-height: 1.2;
}

.seccion-llamada-accion p {
    color: var(--color-atenuado);
}

/* =====================================================
   10. TARJETAS DE ARRIENDO DE MAQUINARIA
===================================================== */
.maquinas-cuadricula {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(1.25rem, 3vw, 1.875rem);
}

/* Las dos tarjetas superiores ocupan la mitad del contenedor. */
.maquinas-cuadricula > .maquina-tarjeta {
    grid-column: span 2;
}

/* La tercera tarjeta ocupa el centro de la segunda fila. */
.maquinas-cuadricula > .maquina-tarjeta.maquina-tarjeta--centrada {
    grid-column: 2 / span 2;
}

.maquina-tarjeta {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: var(--color-panel);
    border: 1px solid var(--color-borde);
    cursor: pointer;
    transition: border-color 0.3s, transform 0.3s;
}

.maquina-tarjeta:hover {
    border-color: var(--color-acento);
    transform: translateY(-0.3125rem);
}

.maquina-imagen {
    width: 100%;
    height: clamp(13rem, 28vw, 18.75rem);
    overflow: hidden;
    background: #252525;
}

.maquina-imagen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.maquina-tarjeta:hover .maquina-imagen img {
    transform: scale(1.04);
}

.maquina-contenido {
    padding: clamp(1.25rem, 3vw, 2.1875rem);
}

.maquina-contenido h2 {
    margin: 0.5rem 0 0.9375rem;
    color: var(--color-acento);
    font-size: clamp(1.6rem, 3vw, 1.875rem);
    line-height: 1.2;
}

.maquina-contenido p {
    margin-bottom: 1.875rem;
    color: #f5f5f5;
}

.maquina-tarjeta-boton {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
    -webkit-appearance: none;
}

.maquina-tarjeta-boton:focus-visible {
    outline: 3px solid var(--color-acento);
    outline-offset: -4px;
}

/* =====================================================
   11. GALERÍA DE MAQUINARIA
===================================================== */
body.galeria-abierta {
    overflow: hidden;
}

.maquina-galeria[hidden] {
    display: none;
}

.maquina-galeria {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.625rem, 2vw, 1.5rem);
}

.maquina-galeria-fondo {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(0.25rem);
}

.maquina-galeria-dialogo {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(65.625rem, 100%);
    max-height: calc(100vh - 3rem);
    max-height: calc(100dvh - 3rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-panel-intenso);
    border: 1px solid #444;
    box-shadow: 0 1.5rem 4.375rem rgba(0, 0, 0, 0.65);
}

.maquina-galeria-encabezado {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.75rem, 2vw, 1.25rem);
    padding: clamp(0.9375rem, 2vw, 1.25rem) clamp(0.9375rem, 2.5vw, 1.5rem);
    border-bottom: 1px solid var(--color-borde);
}

.maquina-galeria-encabezado h2 {
    margin: 0.25rem 0 0;
    font-size: clamp(1.375rem, 3vw, 1.75rem);
}

.maquina-galeria-cerrar {
    flex: 0 0 2.875rem;
    width: 2.875rem;
    height: 2.875rem;
    background: #222;
    border: 1px solid #444;
    color: var(--color-blanco);
    font-size: 2.125rem;
    line-height: 1;
    cursor: pointer;
}

.maquina-galeria-cerrar:hover,
.maquina-galeria-cerrar:focus-visible {
    border-color: var(--color-acento);
    color: var(--color-acento);
}

.maquina-galeria-visor {
    display: grid;
    min-height: 0;
    grid-template-columns: clamp(2.8125rem, 6vw, 4rem) minmax(0, 1fr) clamp(2.8125rem, 6vw, 4rem);
    align-items: center;
    background: #0d0d0d;
}

.maquina-galeria-figura {
    min-width: 0;
    margin: 0;
    text-align: center;
}

.maquina-galeria-figura img {
    display: block;
    width: 100%;
    height: min(56vh, 40.625rem);
    height: min(56dvh, 40.625rem);
    min-height: 12rem;
    background: #0d0d0d;
    object-fit: contain;
}

.maquina-galeria-figura img[hidden] {
    display: none;
}

.maquina-galeria-figura figcaption {
    min-height: 1.5625rem;
    padding: 0.3125rem 0.9375rem;
    color: whitesmoke;
}

.maquina-galeria-vacia {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: min(24.6875rem, 50vh);
    min-height: min(24.6875rem, 50dvh);
    gap: 1rem;
    padding: 1.875rem;
    color: #888;
}

.maquina-galeria-vacia[hidden] {
    display: none;
}

.maquina-galeria-vacia i {
    color: var(--color-acento);
    font-size: 3.375rem;
}

.maquina-galeria-flecha {
    width: 2.875rem;
    height: 4rem;
    margin: auto;
    background: rgba(25, 25, 25, 0.85);
    border: 1px solid #444;
    color: var(--color-blanco);
    font-size: 1.875rem;
    cursor: pointer;
}

.maquina-galeria-flecha:hover:not(:disabled),
.maquina-galeria-flecha:focus-visible:not(:disabled) {
    border-color: var(--color-acento);
    color: var(--color-acento);
}

.maquina-galeria-flecha:disabled {
    opacity: 0.25;
    cursor: default;
}

.maquina-galeria-pie {
    flex: 0 0 auto;
    padding: 0.875rem clamp(0.9375rem, 2.5vw, 1.5rem) 1.125rem;
    border-top: 1px solid var(--color-borde);
    color: var(--color-atenuado);
    text-align: center;
}

.maquina-galeria-miniaturas {
    display: flex;
    justify-content: center;
    gap: 0.625rem;
    margin-top: 0.75rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.maquina-galeria-miniatura {
    flex: 0 0 5.25rem;
    width: 5.25rem;
    height: 3.625rem;
    overflow: hidden;
    padding: 0;
    background: #222;
    border: 2px solid transparent;
    cursor: pointer;
}

.maquina-galeria-miniatura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.maquina-galeria-miniatura.activo {
    border-color: var(--color-acento);
}

/* =====================================================
   12. CARRUSEL DESTACADO DE LA PÁGINA DE INICIO
===================================================== */
.oferta-muestra {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
    align-items: start;
    gap: clamp(1.5rem, 4vw, 3.5rem);
}

.oferta-carrusel-columna {
    position: sticky;
    top: 7.25rem;
    min-width: 0;
}

.oferta-tarjetas {
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
    margin-top: 0;
}

.oferta-tarjeta {
    position: relative;
    display: flex;
    min-height: 12rem;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    padding-right: clamp(3.5rem, 7vw, 5rem);
}

.oferta-tarjeta::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0.25rem;
    background: var(--color-acento);
    content: "";
    opacity: 0;
    transform: scaleY(0.45);
    transition: opacity 0.3s, transform 0.3s;
}

.oferta-tarjeta.vinculo-activo {
    background: #202020;
    border-color: var(--color-acento);
    box-shadow: 0 0.875rem 2.5rem rgba(0, 0, 0, 0.28);
}

.oferta-tarjeta.vinculo-activo::before {
    opacity: 1;
    transform: scaleY(1);
}

.oferta-tarjeta-numero {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    color: #555;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.08rem;
    transition: color 0.3s;
}

.oferta-tarjeta.vinculo-activo .oferta-tarjeta-numero {
    color: var(--color-acento);
}

.oferta-tarjeta .servicio-enlace {
    margin-top: auto;
}

.inicio-carrusel {
    width: 100%;
    margin-top: 0;
}

.inicio-carrusel-ventana {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #0d0d0d;
    border: 1px solid var(--color-borde);
    border-radius: 1rem;
    box-shadow: 0 1.25rem 3.75rem rgba(0, 0, 0, 0.35);
    touch-action: pan-y;
}

.inicio-diapositiva {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.65s ease, visibility 0.65s ease;
}

.inicio-diapositiva.activo {
    z-index: 1;
    opacity: 1;
    visibility: visible;
}

.inicio-diapositiva img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.inicio-diapositiva::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.84) 0%, rgba(0, 0, 0, 0.42) 55%, rgba(0, 0, 0, 0.12) 100%);
    content: "";
}

.inicio-diapositiva-contenido {
    position: absolute;
    right: clamp(3rem, 6vw, 4.5rem);
    bottom: clamp(2rem, 4vw, 3.5rem);
    left: clamp(3rem, 6vw, 4.5rem);
    z-index: 2;
    width: auto;
}

.inicio-diapositiva-contenido span {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--color-acento);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.125rem;
    text-transform: uppercase;
}

.inicio-diapositiva-contenido h2 {
    margin-bottom: 0.75rem;
    font-size: clamp(1.65rem, 3.2vw, 2.5rem);
    line-height: 1.1;
}

.inicio-diapositiva-contenido p {
    color: #e0e0e0;
    font-size: clamp(1rem, 1.8vw, 1.125rem);
}

.inicio-carrusel-flecha {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background: rgba(17, 17, 17, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    color: var(--color-blanco);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}

.inicio-carrusel-flecha:hover,
.inicio-carrusel-flecha:focus-visible {
    background: var(--color-acento);
    border-color: var(--color-acento);
    color: var(--color-oscuro);
}

.inicio-carrusel-anterior {
    left: clamp(0.75rem, 2vw, 1.5rem);
}

.inicio-carrusel-siguiente {
    right: clamp(0.75rem, 2vw, 1.5rem);
}

.inicio-carrusel-indicadores {
    display: flex;
    justify-content: center;
    gap: 0.625rem;
    margin-top: 1.125rem;
}

.inicio-carrusel-indicadores button {
    width: 0.75rem;
    height: 0.75rem;
    padding: 0;
    background: #555;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.25s, transform 0.25s;
}

.inicio-carrusel-indicadores button.activo {
    background: var(--color-acento);
    transform: scale(1.2);
}

.inicio-carrusel-indicadores button:focus-visible {
    outline: 2px solid var(--color-blanco);
    outline-offset: 0.25rem;
}

/* =====================================================
   13. GALERÍAS COMPACTAS DE SERVICIOS
===================================================== */
.galeria-servicio {
    width: min(100%, 52rem);
    margin-inline: auto;
}

.galeria-servicio-encabezado {
    margin-bottom: clamp(1.25rem, 4vw, 2rem);
    text-align: center;
}

.galeria-servicio-encabezado h2 {
    margin: 0.5rem 0;
}

.galeria-servicio-encabezado p {
    color: var(--color-atenuado);
}

.galeria-servicio-visor {
    position: relative;
    overflow: hidden;
    background: #0d0d0d;
    border: 1px solid var(--color-borde);
    border-radius: 1rem;
    box-shadow: 0 1.25rem 3.5rem rgba(0, 0, 0, 0.34);
    touch-action: pan-y;
}

.galeria-servicio-visor:focus-visible {
    outline: 3px solid var(--color-acento);
    outline-offset: 0.25rem;
}

.galeria-servicio-principal {
    margin: 0;
}

.galeria-servicio-imagen {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    background: #0d0d0d;
    object-fit: cover;
    transition: filter 0.35s ease, transform 0.35s ease;
}

.galeria-servicio-descripcion {
    min-height: 3.25rem;
    padding: 0.75rem 4.25rem;
    background: var(--color-panel-intenso);
    color: var(--color-blanco);
    font-size: clamp(0.9375rem, 2vw, 1.0625rem);
    font-weight: 700;
    text-align: center;
}

.galeria-servicio-flecha {
    position: absolute;
    top: calc(50% - 1.625rem);
    z-index: 2;
    display: grid;
    width: 2.875rem;
    height: 2.875rem;
    padding: 0;
    background: rgba(17, 17, 17, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 50%;
    color: var(--color-blanco);
    cursor: pointer;
    place-items: center;
    transform: translateY(-50%);
    transition: background-color 0.25s, border-color 0.25s, transform 0.25s;
    -webkit-tap-highlight-color: transparent;
}

.galeria-servicio-flecha:focus-visible {
    outline: 3px solid var(--color-blanco);
    outline-offset: 0.1875rem;
}

.galeria-servicio-flecha--anterior {
    left: clamp(0.625rem, 2vw, 1.125rem);
}

.galeria-servicio-flecha--siguiente {
    right: clamp(0.625rem, 2vw, 1.125rem);
}

.galeria-servicio-informacion {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.galeria-servicio-contador {
    flex: 0 0 auto;
    min-width: 3.25rem;
    color: var(--color-atenuado);
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.galeria-servicio-miniaturas {
    display: grid;
    min-width: 0;
    flex: 1;
    grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
    gap: clamp(0.4rem, 1vw, 0.75rem);
}

.galeria-servicio-miniatura {
    aspect-ratio: 4 / 3;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    background: #222;
    border: 2px solid transparent;
    border-radius: 0.375rem;
    cursor: pointer;
    opacity: 0.62;
    transition: border-color 0.25s, opacity 0.25s, transform 0.25s;
}

.galeria-servicio-miniatura img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.galeria-servicio-miniatura.activo {
    border-color: var(--color-acento);
    opacity: 1;
}

.galeria-servicio-miniatura:focus-visible {
    outline: 2px solid var(--color-blanco);
    outline-offset: 0.1875rem;
}

/* Los efectos hover se aplican solo en equipos que realmente tienen cursor. */
@media (hover: hover) and (pointer: fine) {
    .galeria-servicio-visor:hover .galeria-servicio-imagen {
        filter: saturate(1.08) contrast(1.04);
        transform: scale(1.018);
    }

    .galeria-servicio-flecha:hover {
        background: var(--color-acento);
        border-color: var(--color-acento);
        color: var(--color-oscuro);
        transform: translateY(-50%) scale(1.06);
    }

    .galeria-servicio-miniatura:hover {
        border-color: var(--color-acento);
        opacity: 1;
        transform: translateY(-0.1875rem);
    }
}

.servicio-detalle {
    width: min(100%, 52rem);
    margin: clamp(2.25rem, 6vw, 4rem) auto 0;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: linear-gradient(135deg, #1d1d1d, #151515);
    border: 1px solid var(--color-borde);
    border-left: 0.25rem solid var(--color-acento);
}

.servicio-detalle h3 {
    margin: 0.625rem 0 0.875rem;
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    line-height: 1.25;
}

.servicio-detalle p {
    max-width: 48rem;
    margin: 0;
    color: var(--color-atenuado);
}

/* =====================================================
   14. PORTAFOLIO INTERACTIVO
===================================================== */
.pagina-portafolio {
    max-width: 92rem;
}

.portafolio-destacado {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(18rem, 0.75fr);
    min-width: 0;
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
    overflow: hidden;
    background: var(--color-panel);
    border: 1px solid var(--color-borde);
    border-radius: 1rem;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.32);
    scroll-margin-top: 7.5rem;
}

.portafolio-destacado-visual {
    position: relative;
    min-width: 0;
    min-height: clamp(24rem, 42vw, 34rem);
    overflow: hidden;
    background: #080808;
    isolation: isolate;
}

.portafolio-destacado-visual::before {
    position: absolute;
    inset: -2rem;
    z-index: 0;
    background-image: var(--fondo-destacado, none);
    background-position: var(--encuadre-destacado, 50% 50%);
    background-size: cover;
    content: "";
    filter: blur(1.5rem) brightness(0.42) saturate(0.9);
    opacity: 0.9;
    pointer-events: none;
    transform: scale(1.12);
    transition: filter 0.35s ease, opacity 0.2s ease, transform 0.35s ease;
}

.portafolio-destacado-imagen,
.portafolio-destacado-video {
    position: absolute;
    z-index: 1;
    display: block;
    opacity: 1;
    transition: opacity 0.18s ease, transform 0.35s ease;
}

.portafolio-destacado-imagen {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: var(--encuadre-destacado, 50% 50%);
}

.portafolio-destacado-video {
    top: 50%;
    left: 50%;
    width: auto;
    max-width: 100%;
    height: 100%;
    background: transparent;
    object-fit: contain;
    transform: translate(-50%, -50%);
}

.portafolio-destacado-video[hidden],
.portafolio-destacado-imagen[hidden] {
    display: none;
}

.portafolio-destacado-visual.en-cambio .portafolio-destacado-imagen,
.portafolio-destacado-visual.en-cambio .portafolio-destacado-video {
    opacity: 0.22;
}

.portafolio-destacado-visual.en-cambio .portafolio-destacado-imagen {
    transform: scale(0.985);
}

.portafolio-destacado-visual.en-cambio .portafolio-destacado-video {
    transform: translate(-50%, -50%) scale(0.985);
}

.portafolio-destacado-visual.en-cambio::before {
    filter: blur(1.75rem) brightness(0.3) saturate(0.8);
    opacity: 0.55;
    transform: scale(1.18);
}

.portafolio-destacado-tipo {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.8rem;
    background: rgba(12, 12, 12, 0.84);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    color: var(--color-blanco);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04rem;
    pointer-events: none;
}

.portafolio-destacado-tipo i {
    color: var(--color-acento);
}

.portafolio-destacado-informacion {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.75rem, 4vw, 3rem);
}

.portafolio-destacado-etiqueta {
    margin-bottom: 0.75rem;
    color: var(--color-acento);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.11rem;
    text-transform: uppercase;
}

.portafolio-destacado-informacion h2 {
    margin-bottom: 1rem;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.12;
}

.portafolio-destacado-ubicacion {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-bottom: 1.5rem;
    color: #c4c4c4;
}

.portafolio-destacado-ubicacion i {
    margin-top: 0.3rem;
    color: var(--color-acento);
}

.portafolio-destacado-descripcion {
    margin-bottom: 1.75rem;
    color: var(--color-atenuado);
}

.portafolio-destacado-enlace {
    align-self: flex-start;
    color: var(--color-acento);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.25s, transform 0.25s;
}

.portafolio-destacado-enlace:focus-visible {
    outline: 2px solid var(--color-blanco);
    outline-offset: 0.3rem;
}

.portafolio-barra {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.portafolio-filtros {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.portafolio-filtro {
    flex: 0 0 auto;
    padding: 0.65rem 1rem;
    background: #202020;
    border: 1px solid var(--color-borde);
    border-radius: 0.35rem;
    color: #d0d0d0;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.25s, border-color 0.25s, color 0.25s, transform 0.25s;
}

.portafolio-filtro.activo {
    background: var(--color-acento);
    border-color: var(--color-acento);
    color: var(--color-oscuro);
}

.portafolio-filtro:focus-visible {
    outline: 2px solid var(--color-blanco);
    outline-offset: 0.2rem;
}

.portafolio-resultado {
    flex: 0 0 auto;
    color: var(--color-atenuado);
    font-size: 0.9375rem;
}

.portafolio-collage {
    --separacion-portafolio: clamp(0.875rem, 1.5vw, 1.25rem);
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: var(--separacion-portafolio);
}

.portafolio-tarjeta {
    position: relative;
    flex: 0 1 calc((100% - var(--separacion-portafolio) - var(--separacion-portafolio)) / 3);
    min-width: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-panel);
    border: 1px solid var(--color-borde);
    border-radius: 0.875rem;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.2);
    isolation: isolate;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.portafolio-tarjeta[hidden] {
    display: none;
}

.portafolio-tarjeta > img {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--encuadre-tarjeta, 50% 50%);
    transition: filter 0.45s ease, transform 0.55s ease;
}

.portafolio-tarjeta-sombra {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.04) 25%, rgba(0, 0, 0, 0.92) 100%);
    transition: background 0.35s;
}

.portafolio-tarjeta-contenido {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    padding: clamp(1rem, 2.2vw, 1.5rem);
    pointer-events: none;
    transition: transform 0.35s ease;
}

.portafolio-tarjeta-contenido > span {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--color-acento);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
}

.portafolio-tarjeta-contenido h3 {
    margin-bottom: 0.35rem;
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.2;
}

.portafolio-tarjeta-contenido p {
    color: #d1d1d1;
    font-size: 0.875rem;
}

.portafolio-tarjeta-contenido p i {
    margin-right: 0.3rem;
    color: var(--color-acento);
}

.portafolio-tarjeta-video {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    background: rgba(17, 17, 17, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    color: var(--color-blanco);
    pointer-events: none;
    place-items: center;
    transform: translate(-50%, -50%);
    transition: background-color 0.3s, border-color 0.3s, color 0.3s, transform 0.3s;
}

.portafolio-tarjeta-accion {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.portafolio-tarjeta-accion:focus-visible {
    outline: 3px solid var(--color-acento);
    outline-offset: -4px;
}

.portafolio-tarjeta.activa {
    border-color: var(--color-acento);
    box-shadow: 0 0 0 1px var(--color-acento), 0 1rem 2.5rem rgba(0, 0, 0, 0.3);
}

.portafolio-vacio {
    margin-top: 1.5rem;
    padding: 2rem;
    background: var(--color-panel);
    border: 1px solid var(--color-borde);
    color: var(--color-atenuado);
    text-align: center;
}

.portafolio-llamada-accion {
    text-align: center;
}

/* Los efectos hover se activan solo cuando el equipo tiene un cursor real. */
@media (hover: hover) and (pointer: fine) {
    .portafolio-filtro:hover:not(.activo) {
        border-color: var(--color-acento);
        color: var(--color-blanco);
        transform: translateY(-0.125rem);
    }

    .portafolio-tarjeta:hover {
        border-color: var(--color-acento);
        box-shadow: 0 1.25rem 2.75rem rgba(0, 0, 0, 0.38);
        transform: translateY(-0.3rem);
    }

    .portafolio-tarjeta:hover > img {
        filter: saturate(1.1) contrast(1.05);
        transform: scale(1.065);
    }

    .portafolio-tarjeta:hover .portafolio-tarjeta-sombra {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 12%, rgba(0, 0, 0, 0.95) 100%);
    }

    .portafolio-tarjeta:hover .portafolio-tarjeta-contenido {
        transform: translateY(-0.25rem);
    }

    .portafolio-tarjeta:hover .portafolio-tarjeta-video {
        background: var(--color-acento);
        border-color: var(--color-acento);
        color: var(--color-oscuro);
        transform: translate(-50%, -50%) scale(1.09);
    }

    .portafolio-destacado-enlace:hover {
        color: var(--color-blanco);
        transform: translateX(0.25rem);
    }
}

/* =====================================================
   15. CONTACTO DESTACADO CON MAPA
===================================================== */
.contacto-destacado {
    width: 100%;
    padding: clamp(3.75rem, 7vw, 5.625rem) clamp(1rem, 5vw, 4rem);
    background: var(--color-oscuro);
    border-top: 1px solid #292929;
}

.contacto-destacado-contenido {
    display: grid;
    width: 100%;
    max-width: 81.25rem;
    margin: 0 auto;
    grid-template-columns: minmax(min(100%, 17.5rem), 0.75fr) minmax(0, 1.45fr);
    align-items: stretch;
    gap: clamp(1.5rem, 5vw, 3.75rem);
}

.contacto-destacado-informacion {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.1875rem 0;
}

.contacto-destacado-etiqueta {
    display: inline-block;
    margin-bottom: 0.625rem;
    color: var(--color-acento);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.125rem;
}

.contacto-destacado h2 {
    margin-bottom: 2rem;
    font-size: clamp(2rem, 4vw, 2.375rem);
    line-height: 1.15;
}

.contacto-dato {
    margin-bottom: 1.5625rem;
}

.contacto-dato h3 {
    margin-bottom: 0.3125rem;
    color: var(--color-blanco);
    font-size: 1.375rem;
}

.contacto-dato p,
.contacto-dato address {
    color: #bbb;
    font-size: 1.0625rem;
    font-style: normal;
    line-height: 1.65;
}

.contacto-dato a {
    color: #bbb;
    text-decoration: none;
    transition: color 0.3s;
}

.contacto-dato a:hover {
    color: var(--color-acento);
}

.contacto-destacado .boton {
    align-self: flex-start;
    margin-top: 0.75rem;
}

.contacto-destacado-mapa {
    min-height: clamp(22.5rem, 42vw, 31.25rem);
    overflow: hidden;
    background: var(--color-panel);
    border: 1px solid var(--color-borde);
}

.contacto-destacado-mapa iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: clamp(22.5rem, 42vw, 31.25rem);
    border: 0;
}

/* =====================================================
   16. CARRUSEL DE CLIENTES
===================================================== */
.clientes {
    width: 100%;
    overflow: hidden;
    padding: clamp(3.75rem, 7vw, 5.625rem) 0;
    background: var(--color-panel-intenso);
    border-top: 1px solid #292929;
    border-bottom: 1px solid #292929;
}

.clientes-encabezado {
    max-width: 56.25rem;
    margin: 0 auto 3.4375rem;
    padding: 0 5%;
    text-align: center;
}

.clientes-encabezado h2 {
    margin: 0.625rem 0 0.9375rem;
    font-size: clamp(2rem, 4vw, 2.375rem);
    line-height: 1.15;
}

.clientes-encabezado p {
    max-width: 40.625rem;
    margin: auto;
    color: #999;
    font-size: 1.0625rem;
}

.clientes-carrusel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.clientes-carrusel::before,
.clientes-carrusel::after {
    position: absolute;
    top: 0;
    z-index: 2;
    width: clamp(2rem, 10vw, 9.375rem);
    height: 100%;
    pointer-events: none;
    content: "";
}

.clientes-carrusel::before {
    left: 0;
    background: linear-gradient(to right, var(--color-panel-intenso), transparent);
}

.clientes-carrusel::after {
    right: 0;
    background: linear-gradient(to left, var(--color-panel-intenso), transparent);
}

.clientes-pista {
    display: flex;
    width: max-content;
    align-items: center;
    gap: clamp(2.5rem, 5vw, 4.375rem);
    animation: moverClientes 30s linear infinite;
}

.cliente-logo {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 11.25rem;
    height: 6.25rem;
    padding: 0.9375rem;
}

.cliente-logo img {
    --logo-escala: 1;
    --logo-escala-cursor: 1.08;
    width: 100%;
    max-width: 9.375rem;
    height: 100%;
    max-height: 4.375rem;
    opacity: 0.65;
    object-fit: contain;
    filter: grayscale(100%) brightness(0) invert(1);
    transform: scale(var(--logo-escala));
    transform-origin: center;
    transition: opacity 0.3s, transform 0.3s;
}

/* Compensa el espacio transparente incluido dentro de estos archivos. */
.cliente-logo img[src$="Iansa.webp"] {
    --logo-escala: 1.7;
    --logo-escala-cursor: 1.78;
}

.cliente-logo img[src$="Cartocor.webp"] {
    --logo-escala: 1.5;
    --logo-escala-cursor: 1.58;
}

.cliente-logo:hover img {
    opacity: 1;
    transform: scale(var(--logo-escala-cursor));
}

.clientes-carrusel:hover .clientes-pista {
    animation-play-state: paused;
}

/* =====================================================
   17. PIE DE PÁGINA
===================================================== */
.pie-pagina {
    padding: clamp(2.5rem, 5vw, 3.75rem) clamp(1rem, 5vw, 4rem) 1.25rem;
    background: #0c0c0c;
    border-top: 1px solid var(--color-borde);
}

.pie-contenido {
    display: grid;
    max-width: 81.25rem;
    margin: auto;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.75rem), 1fr));
    gap: clamp(1.5rem, 4vw, 2.5rem);
}

.pie-pagina h3 {
    margin-bottom: 0.9375rem;
}

.pie-pagina p {
    margin-bottom: 0.3125rem;
    color: var(--color-atenuado);
}

.pie-pagina p a {
    color: var(--color-atenuado);
    text-decoration: none;
    transition: color 0.3s;
}

.pie-pagina p a:hover {
    color: var(--color-acento);
}

.pie-inferior {
    margin-top: 3.125rem;
    padding-top: 1.25rem;
    border-top: 1px solid #222;
    text-align: center;
}

.pie-mapa iframe {
    display: block;
    width: min(100%, 17.5rem);
    height: 10rem;
    margin: 0.625rem auto 0;
    border: 0;
    border-radius: 0.5rem;
}

.pie-pagina p .fa-whatsapp,
.pie-pagina p .fa-envelope,
.pie-pagina p .fa-instagram,
.pie-pagina p .fa-laptop {
    margin-right: 0.375rem;
    font-size: 1rem;
    vertical-align: middle;
}

.pie-pagina p .fa-whatsapp {
    color: #25d366;
}

.pie-pagina p .fa-envelope {
    color: var(--color-blanco);
}

.pie-pagina p .fa-instagram {
    color: #e1306c;
}

.pie-pagina p .fa-laptop {
    color: #3d4b8a;
}

.pie-titulo,
.pie-parrafo,
.pie-direccion {
    text-align: center;
}

/* =====================================================
   18. ANIMACIONES
===================================================== */
.aparicion-suave {
    animation: aparicionSuave 0.4s ease;
}

.js-activo .servicio-fila,
.js-activo .maquina-tarjeta {
    opacity: 0;
    transform: translateY(0.625rem);
}

.servicio-fila.visible,
.maquina-tarjeta.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s, transform 0.4s;
}

@keyframes aparicionSuave {
    from {
        opacity: 0;
        transform: translateY(0.625rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes moverClientes {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* =====================================================
   19. ADAPTACIÓN A TABLETAS Y TELÉFONOS
===================================================== */
@media (max-width: 1120px) {
    .encabezado-sitio {
        padding: 1rem clamp(1rem, 5vw, 3.5rem);
    }

    .boton-menu {
        display: block;
    }

    .navegacion-principal {
        position: absolute;
        top: 100%;
        left: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-height: calc(100vh - 4.5rem);
        max-height: calc(100dvh - 4.5rem);
        gap: 0;
        padding: 0.625rem 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--color-panel-intenso);
        border-top: 1px solid var(--color-borde);
    }

    .navegacion-principal.activo {
        display: flex;
    }

    .navegacion-principal > a,
    .navegacion-desplegable-boton {
        width: 100%;
        justify-content: flex-start;
        padding: 0.875rem clamp(1rem, 4vw, 1.5625rem);
    }

    .navegacion-desplegable {
        display: block;
        width: 100%;
        align-self: auto;
    }

    .navegacion-desplegable-boton {
        justify-content: space-between;
    }

    .navegacion-submenu {
        position: static;
        display: none;
        width: 100%;
        min-width: 0;
        padding: 0.25rem 0 0.5rem;
        background: #101010;
        border: 0;
        border-top: 1px solid #2b2b2b;
        border-bottom: 1px solid #2b2b2b;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        transition: none;
    }

    .navegacion-desplegable.abierto .navegacion-submenu {
        display: grid;
        transform: none;
    }

    .navegacion-submenu a {
        padding: 0.72rem clamp(2rem, 8vw, 3rem);
    }
}

@media (max-width: 980px) {
    .oferta-muestra {
        grid-template-columns: 1fr;
        gap: clamp(2rem, 6vw, 3.5rem);
    }

    .oferta-carrusel-columna {
        position: static;
        width: min(100%, 45rem);
        margin-inline: auto;
    }

    .oferta-tarjetas {
        width: min(100%, 45rem);
        margin-inline: auto;
    }

    .portafolio-destacado {
        grid-template-columns: 1fr;
    }

    .portafolio-destacado-visual {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .portafolio-collage {
        --separacion-portafolio: clamp(0.75rem, 2vw, 1rem);
    }

    .portafolio-tarjeta {
        flex-basis: calc((100% - var(--separacion-portafolio)) / 2);
    }
}

@media (max-width: 800px) {
    .servicio-fila,
    .servicio-fila:nth-child(even) {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .servicio-fila::after,
    .servicio-fila:nth-child(even)::after {
        display: none;
    }

    .servicio-fila:nth-child(even) .servicio-fila-imagen,
    .servicio-fila:nth-child(even) .servicio-fila-contenido {
        order: initial;
    }

    .servicio-fila-imagen {
        min-height: clamp(13.5rem, 58vw, 22rem);
        aspect-ratio: 16 / 9;
        border-bottom: 0.125rem solid rgba(255, 174, 0, 0.72);
    }

    .servicio-fila-imagen::after,
    .servicio-fila:nth-child(even) .servicio-fila-imagen::after {
        background: linear-gradient(180deg, transparent 65%, rgba(17, 17, 17, 0.4));
    }

    .servicio-fila-contenido {
        min-height: 16rem;
        padding: clamp(1.5rem, 6vw, 2.25rem);
    }

    .maquinas-cuadricula {
        grid-template-columns: 1fr;
    }

    .maquinas-cuadricula > .maquina-tarjeta,
    .maquinas-cuadricula > .maquina-tarjeta.maquina-tarjeta--centrada {
        grid-column: 1;
    }

    .contacto-destacado {
        padding: clamp(3rem, 8vw, 4.375rem) 6%;
    }

    .contacto-destacado-contenido {
        grid-template-columns: 1fr;
        gap: clamp(1.25rem, 4vw, 1.5625rem);
    }

    .contacto-destacado-informacion {
        padding: 0;
    }

    .contacto-destacado h2 {
        font-size: clamp(1.875rem, 6vw, 2rem);
    }

    .contacto-destacado-mapa,
    .contacto-destacado-mapa iframe {
        min-height: min(22.5rem, 50svh);
    }
}

@media (max-width: 768px) {
    .logo a img {
        width: clamp(8.5rem, 38vw, 9.375rem);
    }

    .logo .logo-soldador {
        width: clamp(4.75rem, 22vw, 5.625rem);
    }
}

@media (max-width: 600px) {
    .confirmacion-envio {
        padding: 1rem;
    }

    .confirmacion-envio-tarjeta {
        padding: 2rem 1.25rem;
    }

    .confirmacion-envio-tarjeta .boton {
        width: 100%;
    }

    .pagina {
        padding: clamp(3rem, 10vw, 3.75rem) 6%;
    }

    .seccion-introduccion h2 {
        font-size: clamp(1.875rem, 8vw, 2rem);
    }

    .inicio-carrusel-ventana {
        height: auto;
        min-height: min(23rem, 92vw);
        border-radius: 0.75rem;
    }

    .inicio-diapositiva::after {
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.35) 70%, rgba(0, 0, 0, 0.12) 100%);
    }

    .inicio-diapositiva-contenido {
        right: 1.25rem;
        bottom: 2rem;
        left: 1.25rem;
        width: auto;
        padding-inline: 2.5rem;
        text-align: center;
    }

    .inicio-diapositiva-contenido p {
        font-size: 0.9375rem;
    }

    .inicio-carrusel-flecha {
        width: 2.5rem;
        height: 2.5rem;
    }

    .galeria-servicio-visor {
        border-radius: 0.75rem;
    }

    .galeria-servicio-descripcion {
        min-height: 3.75rem;
        padding: 0.75rem 3.25rem;
        font-size: 0.9375rem;
    }

    .galeria-servicio-flecha {
        top: calc(50% - 1.875rem);
        width: 2.5rem;
        height: 2.5rem;
    }

    .galeria-servicio-informacion {
        flex-direction: column;
        align-items: stretch;
        gap: 0.625rem;
    }

    .galeria-servicio-miniaturas {
        display: flex;
        padding: 0.1875rem 0.125rem 0.625rem;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        overscroll-behavior-inline: contain;
    }

    .galeria-servicio-miniatura {
        flex: 0 0 5.25rem;
        scroll-snap-align: center;
    }

    .servicio-detalle {
        padding: 1.5rem;
    }

    .portafolio-destacado {
        margin-bottom: 2.25rem;
        border-radius: 0.75rem;
        scroll-margin-top: 6rem;
    }

    .portafolio-destacado-visual {
        aspect-ratio: 4 / 3;
    }

    .portafolio-destacado-informacion {
        padding: 1.4rem;
    }

    .portafolio-destacado-informacion h2 {
        font-size: clamp(1.55rem, 7vw, 1.85rem);
    }

    .portafolio-destacado-ubicacion {
        margin-bottom: 1rem;
    }

    .portafolio-destacado-descripcion {
        margin-bottom: 1.25rem;
    }

    .portafolio-destacado-tipo {
        top: 0.75rem;
        left: 0.75rem;
    }

    .portafolio-barra {
        flex-direction: column;
        align-items: stretch;
        gap: 0.625rem;
    }

    .portafolio-filtros {
        width: 100%;
        flex-wrap: nowrap;
        padding: 0.125rem 0.125rem 0.6rem;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity;
        scrollbar-width: thin;
    }

    .portafolio-filtro {
        scroll-snap-align: start;
    }

    .portafolio-resultado {
        padding-left: 0.125rem;
    }

    .portafolio-collage {
        --separacion-portafolio: 0.875rem;
    }

    .portafolio-tarjeta,
    .portafolio-tarjeta--ancha,
    .portafolio-tarjeta--alta {
        flex-basis: 100%;
        min-height: 0;
        aspect-ratio: 4 / 3;
    }

    .portafolio-tarjeta-contenido {
        padding: 1rem;
    }

    .portafolio-tarjeta-contenido h3 {
        font-size: 1.15rem;
    }

    .portafolio-tarjeta-video {
        width: 3rem;
        height: 3rem;
    }

    .boton {
        width: 100%;
        margin-right: 0;
        margin-bottom: 0.625rem;
    }

    .clientes {
        padding: clamp(3rem, 10vw, 4.375rem) 0;
    }

    .clientes-encabezado h2 {
        font-size: clamp(1.75rem, 8vw, 1.875rem);
    }

    .clientes-encabezado p {
        font-size: 1rem;
    }

    .clientes-pista {
        gap: 2.5rem;
        animation-duration: 22s;
    }

    .cliente-logo {
        width: 8.75rem;
        height: 5rem;
    }

    .cliente-logo img {
        max-width: 7.5rem;
        max-height: 3.4375rem;
    }

    .seccion-llamada-accion {
        padding: clamp(1.5rem, 7vw, 2.1875rem) clamp(1rem, 5vw, 1.5625rem);
    }

    .nosotros-parrafo {
        text-align: left;
    }

    .contacto-destacado .boton {
        width: 100%;
        margin-right: 0;
    }

    .maquina-galeria {
        padding: 0.625rem;
    }

    .maquina-galeria-dialogo {
        max-height: calc(100vh - 1.25rem);
        max-height: calc(100dvh - 1.25rem);
    }

    .maquina-galeria-encabezado {
        padding: 0.9375rem;
    }

    .maquina-galeria-encabezado h2 {
        font-size: 1.375rem;
    }

    .maquina-galeria-visor {
        grid-template-columns: 2.8125rem minmax(0, 1fr) 2.8125rem;
    }

    .maquina-galeria-flecha {
        width: 2.375rem;
        height: 3.4375rem;
        font-size: 1.5rem;
    }

    .maquina-galeria-vacia {
        min-height: min(19.0625rem, 45vh);
        min-height: min(19.0625rem, 45dvh);
        padding: 1.25rem 0.625rem;
    }

    .maquina-galeria-figura img {
        height: min(48vh, 30rem);
        height: min(48dvh, 30rem);
        min-height: 10rem;
    }

    .maquina-galeria-pie {
        padding: 0.75rem 0.9375rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .aparicion-suave,
    .clientes-pista {
        animation: none;
    }

    .servicio-fila,
    .maquina-tarjeta {
        opacity: 1;
        transform: none;
    }

    .servicio-fila,
    .servicio-fila-imagen img,
    .servicio-fila-enlace {
        transition: none;
    }

    .navegacion-desplegable-boton,
    .navegacion-desplegable-boton i,
    .navegacion-submenu,
    .navegacion-submenu a {
        transition: none;
    }

    .inicio-diapositiva,
    .inicio-carrusel-flecha,
    .inicio-carrusel-indicadores button,
    .galeria-servicio-imagen,
    .galeria-servicio-flecha,
    .galeria-servicio-miniatura {
        transition: none;
    }

    .portafolio-destacado-imagen,
    .portafolio-destacado-video,
    .portafolio-destacado-enlace,
    .portafolio-filtro,
    .portafolio-tarjeta,
    .portafolio-tarjeta > img,
    .portafolio-tarjeta-contenido,
    .portafolio-tarjeta-video {
        transition: none;
    }

    .confirmacion-envio-progreso::after {
        animation: none;
        transform: scaleX(1);
    }
}

/* Acceso por teclado, estado del formulario y navegación sin JavaScript. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--color-acento);
    outline-offset: 4px;
}
.saltar-contenido {
    position: fixed;
    top: -5rem;
    left: 1rem;
    z-index: 3000;
    padding: .75rem 1rem;
    background: var(--color-acento);
    color: #111;
}
.saltar-contenido:focus { top: 1rem; }
.formulario-estado { min-height: 1.6em; margin-top: 1rem; color: #d1d1d1; }
.formulario-estado.error { color: #ffb8a8; }
.formulario-contacto button:disabled { opacity: .7; cursor: wait; }
.inicio-carrusel-pausa {
    display: block;
    margin: .75rem auto 0;
    padding: .4rem .8rem;
    border: 1px solid #555;
    border-radius: .35rem;
    background: var(--color-panel);
    color: #eee;
    cursor: pointer;
    font-size: .875rem;
}
.inicio-carrusel-pausa[hidden] { display: none; }
.clientes-carrusel:hover .clientes-pista, .clientes-carrusel:focus-within .clientes-pista { animation-play-state: paused; }
@media (max-width: 1120px) {
    html:not(.js-activo) .encabezado-sitio { flex-wrap: wrap; position: relative; }
    html:not(.js-activo) .boton-menu { display: none; }
    html:not(.js-activo) .navegacion-principal { position: static; display: flex; max-height: none; }
    html:not(.js-activo) .navegacion-submenu { display: grid; }
    html:not(.js-activo) .navegacion-desplegable-boton { display: none; }
    .formulario-contacto input, .formulario-contacto textarea { font-size: max(16px, 1rem); }
}
@media (prefers-reduced-motion: reduce) {
    .inicio-carrusel-pausa { display: none; }
}