/* =====================================================================
   EL CARRIL DE LA PORTADA

   Cada banda tenía su propio ancho máximo: 1.320 px las tarjetas de
   servicio, 1.300 el panel de ventajas y la galería, 1.400 el pie y el
   héroe medieval, 1.500 el arsenal. Medido a 1.440 px, el contenido de
   una banda arrancaba en 60, el de la siguiente en 70, el del héroe en
   116 y el del arsenal en 56: cuatro márgenes distintos, uno debajo de
   otro, que es el descuadre que señala el cliente cuando dice que los
   carteles y las galerías no están centrados.

   Ahora hay un solo carril, el mismo del sistema: la página deja de
   crecer en --m-ancho-pagina (1.320 px) contando sus dos canales, así
   que el contenido mide como mucho 1.320 - 2 x --m-canal y todas las
   bandas arrancan y terminan en la misma vertical. Por debajo, el ancho
   lo manda el 100 % y el canal de la sección, igual que antes.
   ===================================================================== */
:root {
    --m-carril: calc(var(--m-ancho-pagina) - 2 * var(--m-canal));
}

/* =====================================================================
   portada.css — la portada de Metalco, las dos marcas

   Se apoya en sistema.css: los colores, la escala tipográfica, la escala
   de espacio y los componentes con prefijo m- salen de allí y aquí no se
   vuelven a declarar. Lo que queda en este archivo es lo propio de la
   portada: el héroe de cada marca, las tarjetas de servicio, la cota de
   malla, los carteles de taberna, las galerías y los pies.

   Orden del archivo:
     1. Reset heredado y contenedores maestros
     2. Cabecera, conmutador de marca, menú y enlace de salto
     3. Marca CNC: héroe, servicios, ventajas, galería, reseñas, contacto
     4. Marca medieval: héroe, arsenal, eventos, forja, reseñas, contacto
     5. Las tres media queries —1140, 960 y 640—, al final

   Ni un !important. Las media queries van al final porque es el único
   sitio donde ganan sin necesitar uno.
   ===================================================================== */

/* =========================================
   ICONOS
   =========================================
   Los iconos eran emojis: a todo color sobre una paleta de negro, oro y
   azul, y con un dibujo distinto en cada sistema operativo. Ahora son
   <use> contra el sprite que va al final de Metalco.html.

   Miden 1em a propósito: cada contenedor ya traía su font-size —2,4rem
   en las tarjetas de ventaja, 1,2rem en la lista de contacto, 4rem en el
   acuse de la cotización— y así esas reglas siguen mandando el tamaño
   sin tocarlas. El trazo es currentColor, o sea que el color también
   sigue saliendo de donde ya salía. */
.m-icono {
    /* 1em para heredar el tamaño de cada contenedor, con suelo de 16 px:
       por debajo de eso el trazo de 2 unidades se empasta y un dibujo con
       cruces deja de leerse. Medido en pantalla: el pie de la galería
       dejaba el engranaje en 12 px y el lugar de un evento en 11,6. */
    width: max(1em, 1rem);
    height: max(1em, 1rem);
    flex-shrink: 0;
    vertical-align: -0.14em;
}

/* Tres rótulos son más pequeños que el icono que llevan al lado. Las
   espadas cruzadas y el engranaje son los dos dibujos más apretados del
   juego y necesitan 20 px para que se distingan las piezas. */
.hero-btn-b .m-icono,
.review-form-submit .m-icono,
.pg-caption-tag .m-icono {
    width: 1.25rem;
    height: 1.25rem;
}

/* El sprite no se pinta: solo guarda los <symbol> que citan los <use>. */
.m-iconos-fuente {
    display: none;
}

/* =========================================
   ESTILOS GLOBALES (RESET Y CONTROLES)
   ========================================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    max-width: 100%;
}

/* La portada declaraba Inter y Outfit 84 veces sin cargar ninguna de las
   dos: caía al sans del sistema. Ahora las fuentes llegan de fuentes.css
   y la familia sale del token, que es Inter apretado en CNC y Cinzel en
   medieval. */
body {
    font-family: var(--m-cuerpo);
}

/* --- Contenedores Maestros --- */
.seccion-maestra {
    min-height: 100vh;
    display: none;
    /* Oculto por defecto */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    max-width: 100%;
}

.seccion-maestra.activa {
    display: block;
    /* Solo el activo tiene display block */
    opacity: 1;
}

/* ── Ámbito de marca ────────────────────────────────────────────────
   Las dos marcas viven en el mismo documento, una en cada sección
   maestra, y <html> lleva además data-marca para el sistema de diseño.
   Por eso cada selector de marca se acota con :where(.seccion-maestra):
   cae solo sobre la sección y :where() no suma especificidad, así que el
   resto de la hoja gana y pierde exactamente igual que antes.
   ─────────────────────────────────────────────────────────────────── */

/* =====================================================================
   CABECERA — la misma para las dos marcas

   Vuelve la barra del sitio original, la que el cliente señala como la
   buena: fondo liso, logotipo largo a 75 px de alto, navegación en
   versalitas, la pastilla de sesión y el conmutador de 250x56 con los
   dos logotipos y la insignia de intercambio en medio. Lo que se
   conserva del rediseño es lo que no se ve: dos <button> de verdad en el
   conmutador, aria-pressed, el panel desplegable con inert y la escala
   fluida, que aquí sustituye a los tres saltos fijos del original.

   Un cambio de contrato que conviene tener anotado: el contenido de esta
   barra ya no se alinea con el carril de la página. Con el logotipo a 75
   px —464 px de ancho— y el conmutador a 250, la fila necesita unos
   1.500 px y el carril se detiene en 1.208, así que dentro de él no cabe
   a ningún ancho. La barra original tampoco lo intentaba: iba de canto a
   canto con 24 px de aire. Se recupera eso, y el precio es que el
   logotipo ya no arranca en la misma vertical que el titular del héroe.

   Las dos marcas comparten estructura y se diferencian por el color de
   la luz. Aquí no sale de --m-acento sino de los tokens --m-barra-*: la
   barra industrial es de papel aunque su página sea marino, y necesita
   el azul cerrado que se lee sobre blanco. La medieval es la plancha
   del taller con el oro de la fragua.
   ===================================================================== */
.cabecera {
    position: sticky;
    top: 0;
    z-index: var(--m-capa-cabecera);
    display: flex;
    align-items: center;
    gap: var(--m-esp-2xs);
    min-height: 4rem;
    /* De canto a canto, como la original. Ver la nota de arriba. */
    padding-inline: clamp(0.75rem, 0.35rem + 1.2vw, 1.5rem);
    background: var(--m-barra-fondo);
    /* El filete de 4 px es la firma de la barra original. Sustituye al
       corte incandescente que llevaba el rediseño: hacen el mismo
       trabajo —separar la barra de la página— y este es el que el
       cliente reconoce. */
    border-block-end: 4px solid var(--m-barra-azul-claro);
    box-shadow: 0 4px 10px rgb(0 0 0 / 0.1);
}

/* En medieval la barra no es el papel sino la plancha: un punto por
   encima del fondo de página, con la sombra más honda que pedía el
   original. */
:root[data-marca='medieval'] .cabecera {
    box-shadow: 0 6px 15px rgb(0 0 0 / 0.4);
}

.cabecera__marca {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border-radius: var(--m-radio-sm);
}

/* 75 px de alto —los del original— a partir de 1.860 px de ventana, y 50
   a 1.024, que es el otro peldaño que tenía. Entre medias interpola en
   vez de dar el salto. La pendiente se midió contra la fila más larga,
   la medieval con sus siete secciones: con la del original —75 px ya a
   1.600— la barra se salía 13 px del canto a ese ancho, porque cada
   milímetro de alto del logotipo cuesta seis de ancho.

   Por debajo de 640 manda el ancho y no el alto, que es lo que lo hace
   encoger de verdad: ver el tramo estrecho al final del archivo. */
.cabecera__marca img {
    display: block;
    height: clamp(3.125rem, 4.05vw + 0.35rem, 4.6875rem);
    width: auto;
    max-width: min(46vw, 30rem);
    object-fit: contain;
}

/* El hueco entre enlaces llega a los 30 px de la barra original en
   pantalla ancha y se aprieta hasta 12 antes de que la barra se pliegue
   en panel, a 1.279. */
.cabecera__nav {
    display: flex;
    align-items: center;
    gap: clamp(0.6rem, 1.6vw - 0.5rem, 1.875rem);
    margin-inline-start: auto;
}

.cabecera__nav a {
    position: relative;
    /* 44 px de alto útil sin engordar la cabecera: el enlace mide lo que
       mide el texto, pero su caja de clic llega al alto mínimo cómodo. */
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding-block: 0.4rem;
    font-family: var(--m-cuerpo);
    font-size: clamp(0.8rem, 0.7rem + 0.2vw, 0.95rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    /* La original iba en #333 sobre blanco. Aquí es la tinta de la barra,
       que en CNC es esa misma y en medieval el papel de la forja. */
    color: var(--m-barra-tinta);
    white-space: nowrap;
    transition: color var(--m-rapido) var(--m-entrada);
}

/* El subrayado crece desde la izquierda como el paso de la máquina. */
.cabecera__nav a::after {
    content: '';
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    height: 2px;
    width: 0;
    background: var(--m-barra-azul);
    transition: width var(--m-medio) var(--m-salida);
}

.cabecera__nav a:hover,
.cabecera__nav a:focus-visible {
    color: var(--m-barra-azul);
}

.cabecera__nav a:hover::after,
.cabecera__nav a:focus-visible::after {
    width: 100%;
}

/* Quien empujaba este grupo hasta el canto derecho era el `margin-inline-start:
   auto` de la navegación. Por debajo de 1.280 px la navegación pasa a panel y
   se pinta con display: none, así que sale del reparto flexible y su margen
   automático deja de existir: el conmutador y la hamburguesa se quedaban
   pegados al logotipo con 286 px de vacío a la derecha —medido a 768—. El
   margen automático va aquí, que es el elemento que de verdad tiene que
   quedarse en el canto, y así vale con la barra abierta y con ella plegada. */
/* El anillo de foco de sistema.css va en --m-acento-claro, que sobre el
   papel de la barra da 1,8:1: quien navega con teclado no ve dónde está.
   Dentro de la cabecera manda el azul de la barra, que da 5,0:1. */
.cabecera :focus-visible {
    outline-color: var(--m-barra-azul);
}

.cabecera__acciones {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    margin-inline-start: auto;
}

/* =====================================================================
   PASTILLA DE SESIÓN

   La barra original llevaba «Iniciar Sesión» a la derecha, azul rellena
   en CNC y perfilada en oro en medieval. Aquí lleva a /admin, que es la
   única puerta de entrada que tiene el sitio: detrás está Cloudflare
   Access, o sea la pantalla de acceso de verdad. No hay cuentas de
   visitante —las cotizaciones se mandan sin registrarse—, así que este
   botón es de la casa: los dos correos de administración.
   ===================================================================== */
/* Desde que abre un diálogo en vez de navegar, es un <button>. Un botón trae
   su propia tipografía del sistema y su propio relleno, así que hay que
   apagarlos: sin esto el rótulo salía en Arial de 13 px dentro de la
   pastilla. `appearance: none` quita además el fondo gris de Safari. */
.cabecera__sesion {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding-block: 0;
    padding-inline: clamp(0.75rem, 0.2rem + 0.9vw, 1.25rem);
    border: var(--m-hilo) solid transparent;
    border-radius: var(--m-radio-sm);
    background: var(--m-barra-azul);
    color: var(--m-barra-fondo);
    font-family: var(--m-cuerpo);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background var(--m-rapido) var(--m-entrada),
        color var(--m-rapido) var(--m-entrada);
}

/* =====================================================================
   ATAJO AL PANEL

   Aparece sólo cuando el correo de la cuenta figura entre los
   administradores, y no autoriza nada: lleva a Cloudflare Access, que
   pedirá identidad igual. Va perfilado y no relleno para que no compita
   con la pastilla de sesión, que es la acción principal de la barra.
   ===================================================================== */
.cabecera__panel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding-inline: clamp(0.6rem, 0.15rem + 0.7vw, 1rem);
    border: var(--m-hilo) solid var(--m-barra-azul);
    border-radius: var(--m-radio-sm);
    background: transparent;
    color: var(--m-barra-tinta);
    font-family: var(--m-cuerpo);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background var(--m-rapido) var(--m-entrada),
        color var(--m-rapido) var(--m-entrada);
}

.cabecera__panel:hover,
.cabecera__panel:focus-visible {
    background: var(--m-barra-azul);
    color: var(--m-barra-fondo);
}

/* `hidden` lo pone el JavaScript cuando no hay sesión de administrador. Un
   display: inline-flex más específico se lo comería, así que se declara
   aquí, después de la regla que lo enseña. */
.cabecera__panel[hidden] {
    display: none;
}

/* Al pasar el puntero cierra, no abre: aclarar el azul sobre blanco
   bajaría el contraste del rótulo por debajo del mínimo. */
.cabecera__sesion:hover,
.cabecera__sesion:focus-visible {
    background: color-mix(in srgb, var(--m-barra-azul) 82%, #000000);
    color: var(--m-barra-fondo);
}

/* En medieval la original iba perfilada, no rellena: el oro macizo al
   lado del conmutador dorado eran dos manchas del mismo color. */
:root[data-marca='medieval'] .cabecera__sesion {
    background: transparent;
    border-color: var(--m-acento);
    color: var(--m-acento);
    font-weight: 600;
    letter-spacing: 0.05em;
}

:root[data-marca='medieval'] .cabecera__sesion:hover,
:root[data-marca='medieval'] .cabecera__sesion:focus-visible {
    background: var(--m-acento);
    color: var(--m-negro-0);
}

/* El corte entre secciones respira: pegado al borde de la sección
   anterior parece un borde y no un corte. */
.seccion-maestra > .m-corte {
    margin-block: 0;
}

/* =====================================================================
   CONMUTADOR DE MARCA

   El del sitio original, con sus medidas: 250x56, la pastilla que se
   desliza media anchura, los dos logotipos redondos de 40 px y la
   insignia de intercambio flotando en la costura. El inactivo va
   apagado —opacidad 0,55 y algo de gris— para que el color diga cuál
   manda sin depender solo de la pastilla.

   Lo que no vuelve es el <div> con onclick: son dos <button> con su
   nombre escrito en texto para lector de pantalla y aria-pressed
   diciendo cuál está puesto. Se ve igual y se puede usar con el
   teclado, que es lo que aquel no permitía.

   Las medidas fijas del original pasan a escala fluida: 250 px de ancho
   a partir de 1.920 y 140 en el móvil más estrecho, sin los tres saltos
   con !important que tenía.
   ===================================================================== */
.conmutador {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: none;
    width: clamp(8.75rem, 6rem + 8vw, 15.625rem);
    height: clamp(2.75rem, 1.6rem + 1.6vw, 3.5rem);
    padding: 4px;
    border: var(--m-hilo) solid color-mix(in srgb, var(--m-barra-azul) 28%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--m-barra-fondo) 55%, transparent);
    box-shadow: 0 4px 15px rgb(0 0 0 / 0.1);
    isolation: isolate;
}

:root[data-marca='medieval'] .conmutador {
    background: color-mix(in srgb, var(--m-barra-fondo) 70%, transparent);
    box-shadow: 0 8px 32px rgb(0 0 0 / 0.4);
}

/* La pastilla se mueve con transform, no con left: no releva la
   maquetación y el navegador la anima en el compositor. La curva es la
   del original, con el rebote al final. */
.conmutador__pastilla {
    position: absolute;
    z-index: -1;
    inset-block: 4px;
    inset-inline-start: 4px;
    width: calc(50% - 4px);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--m-barra-azul-claro) 0%, var(--m-barra-azul) 100%);
    box-shadow:
        0 0 14px color-mix(in srgb, var(--m-barra-azul) 55%, transparent),
        0 4px 12px rgb(0 0 0 / 0.2);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

:root[data-marca='medieval'] .conmutador__pastilla {
    transform: translateX(100%);
}

.conmutador__op {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 2.75rem;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

/* El logotipo de cada marca dentro de su opción. Va con alt vacío a
   propósito: el nombre de la marca lo lleva el propio botón en texto
   para lector de pantalla, y un alt que repitiera «CNC» haría que se
   leyera dos veces. */
.conmutador__logo {
    width: clamp(1.75rem, 1.1rem + 1.4vw, 2.5rem);
    height: clamp(1.75rem, 1.1rem + 1.4vw, 2.5rem);
    flex: none;
    border-radius: 50%;
    object-fit: contain;
    opacity: 0.55;
    filter: grayscale(40%);
    transition:
        transform var(--m-medio) var(--m-salida),
        filter var(--m-rapido) var(--m-entrada),
        opacity var(--m-rapido) var(--m-entrada);
}

.conmutador__op[aria-pressed='true'] .conmutador__logo {
    opacity: 1;
    filter: none;
    transform: scale(1.08);
}

.conmutador__op:hover .conmutador__logo,
.conmutador__op:focus-visible .conmutador__logo {
    opacity: 0.85;
}

/* ── La insignia de intercambio ──────────────────────────────────────
   Flota en la costura entre las dos mitades y dice, sin una palabra,
   que el control cambia una cosa por la otra. Es decorativa: no recibe
   el puntero, no está en el árbol de accesibilidad y quien navega con
   teclado llega a los dos botones que tiene debajo.

   El vidrio blanco del original se ve sobre la barra negra de la forja,
   pero la barra industrial es de papel y allí el vidrio blanco
   desaparece: blanco sobre blanco. Por eso en esa marca la insignia se
   pinta maciza y las flechas van del azul de la barra. Ojo: lo que
   manda aquí es el color de la BARRA, no el de la página —la página
   industrial es marino y la barra sigue siendo blanca—. El pulso lo
   apaga solo el bloque de menos movimiento de sistema.css.
   ─────────────────────────────────────────────────────────────────── */
.conmutador__insignia {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    /* El centrado va aquí y no solo en los fotogramas: con menos
       movimiento la animación dura 0,01 ms y el elemento vuelve a su
       estado sin animar, que sin esto sería medio radio descolocado. */
    transform: translate(-50%, -50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    pointer-events: none;
    background: rgb(255 255 255 / 0.18);
    border: 1.5px solid rgb(255 255 255 / 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow:
        0 4px 14px rgb(0 0 0 / 0.3),
        0 0 0 3px color-mix(in srgb, var(--m-acento) 28%, transparent),
        inset 0 1px 0 rgb(255 255 255 / 0.3);
    animation: insigniaPulso 2s ease-in-out infinite;
}

:root[data-marca='cnc'] .conmutador__insignia {
    background: var(--m-barra-fondo);
    border-color: color-mix(in srgb, var(--m-barra-azul) 45%, transparent);
    box-shadow:
        0 4px 14px rgb(13 27 42 / 0.18),
        0 0 0 3px color-mix(in srgb, var(--m-barra-azul) 22%, transparent);
}

/* El trazo va por `color` y no solo por `stroke`.

   Los símbolos del pliego llevan stroke="currentColor" escrito en el
   propio <symbol>, y ese atributo gana a un stroke heredado del <svg>
   que los usa: el clon del símbolo lo trae puesto. Con solo `stroke` las
   flechas se pintaban del color de texto de la marca —#eaf3fb— sobre la
   barra blanca de CNC: 1,1:1, un disco vacío. Fijando `color` se resuelve
   currentColor y las flechas salen del color que toca. */
.conmutador__insignia svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #ffffff;
    stroke: #ffffff;
    fill: none;
    filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.4));
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

:root[data-marca='cnc'] .conmutador__insignia svg {
    color: var(--m-barra-azul);
    stroke: var(--m-barra-azul);
    filter: none;
}

/* Las flechas se dan la vuelta al pasar a medieval: el mismo gesto que
   hace la pastilla, contado por el icono. */
:root[data-marca='medieval'] .conmutador__insignia svg {
    transform: rotate(180deg);
}

@keyframes insigniaPulso {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.08);
    }
}

/* Lo que lee el lector de pantalla cuando la marca cambia. No ocupa
   sitio en pantalla pero sí en el árbol de accesibilidad. */
.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* =====================================================================
   MENÚ DESPLEGABLE

   Debajo de 1.140 px la navegación no cabe al lado del logotipo, así que
   pasa a panel desplegable. El foco lo gestiona portada.js: mientras el
   panel está cerrado lleva `inert`, así que el tabulador no entra en
   enlaces invisibles, y al abrirlo el foco salta al primer enlace.
   ===================================================================== */
.cabecera__hamburguesa {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: var(--m-hilo) solid color-mix(in srgb, var(--m-barra-azul) 30%, transparent);
    border-radius: var(--m-radio-sm);
    background: transparent;
    cursor: pointer;
}

.cabecera__hamburguesa span {
    display: block;
    width: 1.25rem;
    height: 2px;
    margin-inline: auto;
    border-radius: 2px;
    background: var(--m-barra-azul);
    transition: transform var(--m-medio) var(--m-salida), opacity var(--m-rapido) linear;
}

.cabecera__hamburguesa[aria-expanded='true'] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.cabecera__hamburguesa[aria-expanded='true'] span:nth-child(2) {
    opacity: 0;
}

.cabecera__hamburguesa[aria-expanded='true'] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* =====================================================================
   ENLACE DE SALTO

   Primer elemento tabulable del documento. Fuera de la pantalla hasta
   que recibe el foco; entonces baja y se ve.
   ===================================================================== */
.saltar {
    position: absolute;
    z-index: calc(var(--m-capa-cabecera) + 1);
    inset-inline-start: var(--m-canal);
    inset-block-start: -4rem;
    padding: var(--m-esp-2xs) var(--m-esp-sm);
    border-radius: 0 0 var(--m-radio-sm) var(--m-radio-sm);
    background: var(--m-acento);
    color: var(--m-negro-0);
    font-family: var(--m-cuerpo);
    font-size: var(--m-txt-sm);
    font-weight: 700;
    text-decoration: none;
    transition: inset-block-start var(--m-rapido) var(--m-salida);
}

/* :focus a secas y no :focus-visible. Un enlace de salto tiene que
   aparecer en cuanto recibe el foco, venga de donde venga; es la
   convención que ya usan las otras páginas del sitio. */
.saltar:focus {
    inset-block-start: 0;
}

/* =====================================================================
   TARJETAS DE SERVICIO — las tres que giran

   Vuelve la tarjeta del sitio original: tres pegadas en una fila, con dos
   milímetros de junta celeste entre ellas, la fotografía sola en reposo y
   el texto por detrás. Al pasar el puntero da media vuelta.

   Lo que allí no había y aquí sí:

     · Gira también con el teclado. El botón de la cara trasera es
       tabulable; al recibir el foco, :focus-within voltea la tarjeta y el
       botón queda a la vista. Sin esto, Tab llevaba a un botón invisible.
     · Vuelve en pantalla táctil. El giro por :hover se queda pegado en el
       primer toque —no hay «salir» de un elemento con el dedo—, así que
       el hover va dentro de @media (hover: hover) y el toque lo gobierna
       una clase que pone portada.js.
     · Con «menos movimiento» no da la vuelta: cruza de una cara a otra
       con una disolvencia. Es el mismo cambio de estado sin el giro.
     · Al imprimir salen las dos caras, una debajo de otra. Antes se
       imprimía la foto y el texto se perdía.

   La altura no está fijada: las dos caras comparten celda de rejilla, así
   que la tarjeta mide lo que mida la más alta de las dos. Eso es lo que
   permite que el widget de accesibilidad suba la letra al 140 % sin que
   el texto se salga por abajo.
   ===================================================================== */
/* La fila va de canto a canto del panel, no acotada al carril. Es lo que
   hacía el original: tres fotografías a sangre ocupando la banda entera.
   El panel que la contiene pierde su canal lateral para que no quede un
   marco de fondo alrededor —ver .secondary-panel-a—. */
.servicios {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* La junta mecánica: dos píxeles de celeste entre tarjeta y tarjeta.
       Es el fondo de la rejilla asomando por el hueco, no un borde: con
       bordes la junta central salía del doble de gruesa que las de los
       cantos. */
    gap: 2px;
    background: color-mix(in srgb, var(--m-acento) 28%, transparent);
    /* Solo la junta de arriba y la de abajo: a los lados la fila muere en
       el canto de la pantalla y un borde ahí se ve como un recorte. */
    border-block: 2px solid color-mix(in srgb, var(--m-acento) 28%, transparent);
}

.servicio {
    /* La profundidad del giro. 2.000 px es la del original: cuanto más
       alto, más plano el volteo; por debajo de 1.000 la cara que entra
       parece abalanzarse. */
    perspective: 2000px;
    min-height: clamp(21rem, 34vw, 29rem);
    cursor: pointer;
}

/* El elemento que gira. No lleva overflow: un overflow distinto de
   visible obliga al navegador a aplanar el contexto 3D y el volteo se
   queda en un encogimiento raro. El recorte va en cada cara. */
.servicio__giro {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Las dos caras ocupan la misma celda. De ahí sale que la tarjeta mida lo
   que la cara más alta y que no haga falta ninguna altura fija —que es
   justo el problema que se resolvió al quitar los !important—. */
.servicio__cara {
    grid-area: 1 / 1;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ── La cara de delante: la fotografía ───────────────────────────── */
.servicio__cara--frente {
    justify-content: flex-end;
    /* El relleno tiene que ser mayor que los 25 px a los que va el marco
       interior, o el rótulo lo cruza. Con --m-esp-md se quedaba en 24 px
       en el extremo bajo, y con la letra al 140 % del widget de
       accesibilidad «CORTE PLASMA INDUSTRIAL» se salía por la derecha
       pasando por encima de la línea. */
    padding: clamp(2rem, 1.4rem + 1.1vw, 2.75rem);
    background: var(--m-negro-1);
}

.servicio__foto {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Contrato de --foco, descrito en catalogo.css. */
    object-position: var(--foco, 50% 50%);
    filter: saturate(0.9) contrast(1.05);
    transition: transform 1.4s var(--m-salida);
}

/* El velo. Cuatro paradas: arriba deja ver la fotografía casi limpia y
   abajo es prácticamente opaco, que es donde cae el rótulo. Se queda
   oscuro pase lo que pase con la marca: debajo hay una fotografía de
   taller y el rótulo va encima en blanco. */
.servicio__cara--frente::before {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(180deg,
        rgb(3 6 10 / 0.15) 0%,
        rgb(3 6 10 / 0.45) 45%,
        rgb(3 6 10 / 0.82) 78%,
        rgb(3 6 10 / 0.94) 100%);
    transition: opacity var(--m-lento) var(--m-salida);
}

/* El marco interior a 25 px, del original: la única línea recta sobre una
   fotografía llena de chispas. */
.servicio__cara--frente::after {
    content: '';
    position: absolute;
    z-index: 2;
    inset: 25px;
    border: var(--m-hilo) solid color-mix(in srgb, var(--m-acento) 30%, transparent);
    pointer-events: none;
}

.servicio__titulo {
    position: relative;
    z-index: 3;
    margin: 0;
    font-family: var(--m-titular);
    font-size: var(--m-txt-lg);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* Literal y no var(--m-texto): el rótulo cae sobre el velo de la
       fotografía, no sobre el fondo de la marca. */
    color: #ffffff;
    text-shadow: 0 4px 15px rgb(0 0 0 / 0.8);
    text-wrap: balance;
}

/* Zoom lento: 1,4 s de recorrido para un 6 % de escala. */
.servicio:hover .servicio__foto,
.servicio:focus-within .servicio__foto {
    transform: scale(1.06);
}

/* ── La cara de detrás: lo que hace ese servicio ──────────────────── */
.servicio__cara--dorso {
    justify-content: center;
    align-items: center;
    gap: var(--m-esp-sm);
    padding: var(--m-esp-lg) var(--m-esp-md);
    text-align: center;
    /* Con la letra al 140 % del widget de accesibilidad, el texto de esta
       cara puede pasarse de largo. Que se pueda desplazar dentro es
       preferible a que se salga por debajo. */
    overflow-y: auto;
    background: linear-gradient(135deg, var(--m-banda-3) 0%, var(--m-banda-1) 100%);
    transform: rotateY(180deg);
}

.servicio__filete {
    flex: none;
    width: 60px;
    height: 3px;
    background: var(--m-acento);
    box-shadow: 0 0 10px color-mix(in srgb, var(--m-acento) 60%, transparent);
}

.servicio__texto {
    margin: 0;
    max-width: 34ch;
    font-family: var(--m-cuerpo);
    font-size: var(--m-txt-sm);
    line-height: 1.7;
    color: #cfe0f2;
    text-wrap: pretty;
}

.servicio .card-btn {
    flex: none;
    border-color: var(--m-acento);
    color: #ffffff;
}

.servicio .card-btn:hover,
.servicio .card-btn:focus-visible {
    box-shadow: 0 0 20px color-mix(in srgb, var(--m-acento) 55%, transparent);
}

/* ── Cuándo gira ──────────────────────────────────────────────────── */

/* El puntero, solo donde hay puntero de verdad. En una pantalla táctil
   :hover se activa al tocar y no se desactiva nunca: la tarjeta se
   quedaba del revés hasta recargar. */
@media (hover: hover) {
    .servicio:hover .servicio__giro {
        transform: rotateY(180deg);
    }
}

/* El teclado y el toque. El foco entra por el botón de la cara trasera,
   así que la tarjeta gira justo cuando ese botón lo necesita. */
.servicio:focus-within .servicio__giro,
.servicio--vuelta .servicio__giro {
    transform: rotateY(180deg);
}

.servicio:focus-within .servicio__cara--frente::after {
    border-color: color-mix(in srgb, var(--m-acento) 70%, transparent);
}

/* Con menos movimiento no hay giro: las dos caras se cruzan en el sitio.
   El estado final es el mismo, y es lo que pide el ajuste. */
@media (prefers-reduced-motion: reduce) {
    .servicio__giro {
        transform: none !important;
    }

    .servicio__cara {
        -webkit-backface-visibility: visible;
        backface-visibility: visible;
    }

    /* Se apaga con opacidad, NUNCA con visibility: hidden. Un elemento
       con visibility: hidden sale del orden de tabulación y del árbol de
       accesibilidad, así que el botón de la cara trasera dejaba de ser
       alcanzable —y como es el foco lo que gira la tarjeta, no había
       forma de llegar a él: quien pide menos movimiento se quedaba sin
       las tres fichas—. Con opacidad el botón sigue siendo tabulable, y
       al recibir el foco :focus-within lo enciende.

       pointer-events sí se apaga: con la cara encima e invisible, el
       puntero pinchaba en ella en vez de en la foto. */
    .servicio__cara--dorso {
        transform: none;
        opacity: 0;
        pointer-events: none;
    }

    .servicio:hover .servicio__cara--dorso,
    .servicio:focus-within .servicio__cara--dorso,
    .servicio--vuelta .servicio__cara--dorso {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Al imprimir no hay puntero ni foco: si la tarjeta se quedara de cara,
   el papel saldría con tres fotografías y ni una palabra. */
@media print {
    .servicio {
        perspective: none;
        break-inside: avoid;
    }

    .servicio__giro {
        display: block;
        transform: none !important;
    }

    .servicio__cara {
        -webkit-backface-visibility: visible;
        backface-visibility: visible;
        transform: none;
        overflow: visible;
        /* Gana al bloque de menos movimiento, que apaga el dorso con
           opacidad: en papel no hay puntero que lo encienda y la hoja
           salía con tres fotos y ni una palabra. */
        opacity: 1;
        pointer-events: auto;
    }

    /* En papel el navegador no imprime fondos salvo que el usuario lo
       pida, así que el degradado marino desaparece y el texto claro se
       queda en 3,2:1 sobre blanco. En impresión el dorso va al revés:
       tinta oscura sobre el papel. */
    .servicio__cara--dorso {
        background: none;
        color: #0d1b2a;
    }

    .servicio__texto {
        color: #26364a;
    }

    .servicio .card-btn {
        border-color: #0d1b2a;
        color: #0d1b2a;
    }
}

/* =========================================
   MARCA CNC — ARCO DE PLASMA
   ========================================= */
/* Las dos marcas conviven en el mismo documento, así que estas dos reglas
   tienen que caer sobre la sección y no sobre <html>, que también lleva
   data-marca para el sistema de diseño. :where() no suma especificidad:
   el resto de la hoja sigue ganando y perdiendo igual que antes. */
[data-marca="cnc"]:where(.seccion-maestra) {
    /* El fondo de la marca industrial. Cada banda pinta el suyo encima
       —su peldaño del ritmo de --m-banda-*—, así que esto solo asoma
       donde una banda no declara fondo propio. */
    background-color: var(--m-negro-1);
    color: var(--m-texto);
}

[data-marca="cnc"]:where(.seccion-maestra) .header-a {
    padding: 60px 20px;
    text-align: center;
    background-color: var(--m-negro-0);
    border-bottom: 1px solid var(--m-negro-4);
}

[data-marca="cnc"]:where(.seccion-maestra) .titulo-a {
    font-size: 2.8rem;
    margin-bottom: 15px;
    color: var(--m-acento);
    font-weight: 700;
}

[data-marca="cnc"]:where(.seccion-maestra) .contenido-a {
    max-width: 900px;
    margin: 0 auto;
    padding: 50px 20px;
}

[data-marca="cnc"]:where(.seccion-maestra) .parrafo-a {
    font-size: 1.15rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

[data-marca="cnc"]:where(.seccion-maestra) .boton-a {
    background-color: var(--m-acento);
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

[data-marca="cnc"]:where(.seccion-maestra) .boton-a:hover {
    background-color: var(--m-acento-hondo);
}

/* =====================================================================
   HÉROE — MARCA CNC

   Se conserva lo que da carácter: el degradado azul de arco, la
   cuadrícula CAD que corre despacio y el orbe de luz. Cambia el
   gobierno del texto. El titular pasa a la escala fluida del sistema
   (var(--m-txt-3xl)) en vez de su propio clamp, y con el tracking de
   la marca: -0.02em, porque Inter a 5 rem con el espaciado por defecto
   se lee suelta. La ficha del servicio, que era un par de cajas con
   borde, pasa a .m-placa: etiqueta pequeña arriba, dato debajo, la
   forma que tiene una placa grabada de máquina.

   Los datos son los que ya estaban. No se ha inventado ninguno.
   ===================================================================== */
.hero-panel-a {
    position: relative;
    width: 100%;
    min-height: min(88vh, 46rem);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* El fondo del hero llegaba a #112960: azul saturado a media pantalla,
       que es lo que pedía bajar el encargo —menos brillo, menos degradado—.
       Ahora es grafito con la vena azul del arco, y quien pone el carácter
       industrial es la rejilla, no la saturación. */
    /* El héroe es la banda alta: el azul se abre del borde superior
       izquierdo al derecho, como en el original. */
    background: linear-gradient(160deg, var(--m-banda-3) 0%, var(--m-banda-2) 52%, var(--m-banda-1) 100%);
    box-shadow: inset 0 -4px 30px rgb(0 0 0 / 0.5);
}

/* Cuadrícula CAD del fondo, con el barrido de las dos guías. */
/* La rejilla del hero: es la referencia de alineación de un plano, así
   que se ve un punto más y se está quieta. Desplazándose en bucle competía
   con el titular y no decía nada. */
.hero-a-grid-bg {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgb(0 200 255 / 0.13) 1px, transparent 1px),
        linear-gradient(90deg, rgb(0 200 255 / 0.13) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: 1;
    overflow: hidden;
}

/* Las dos guías CAD que recorren la rejilla y se cruzan formando una mira.
   Estaban en el sitio original, el rediseño las quitó y el cliente las pidió
   de vuelta: son la referencia de un plano moviéndose sobre la cuadrícula.

   Van a distinto compás a propósito —12 s la horizontal, 14 s la vertical—
   para que el cruce caiga en un sitio distinto cada vez en lugar de repetir
   el mismo punto en bucle. Se animan `top` y `left` como en el original;
   podrían ir con transform, pero cada guía es un pseudoelemento de 1 px sin
   nada alrededor, así que lo que se releva es su propia caja y nada más.

   Con movimiento reducido —o con el interruptor del widget de accesibilidad—
   las dos se quedan quietas cruzadas en el centro, que es lo que hace el
   bloque de sistema.css. */
.hero-a-grid-bg::before,
.hero-a-grid-bg::after {
    content: '';
    position: absolute;
    opacity: 0.6;
    pointer-events: none;
}

/* Un translate en porcentaje se mide contra el propio elemento, y estas
   guías miden un píxel de alto o de ancho: el 70 % de un píxel no mueve
   nada. Declarando el panel como contenedor de consulta, las unidades
   cqh y cqw de los fotogramas se miden contra el panel, que es la
   referencia que hace falta. */
.hero-a-grid-bg {
    container-type: size;
}

/* Las dos guías se mueven con translate y no con top/left.

   Animar `top` obliga al navegador a recalcular la maquetación en cada
   fotograma: son 60 recálculos de estilo y 60 de disposición por segundo,
   para siempre, por dos líneas de un píxel. Medido con
   Performance.getMetrics sobre la portada quieta: 175 recálculos en 3
   segundos. Con translate la animación vive en el compositor y no toca
   la maquetación ni una vez.

   El recorrido es el mismo: la horizontal va del 15 % al 85 % del alto,
   y como parte de top: 15% el desplazamiento es del 70 % de la altura
   del panel; la vertical, del 10 % al 90 % del ancho. */
.hero-a-grid-bg::after {
    left: 0;
    top: 15%;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--m-guia), transparent);
    box-shadow: 0 0 10px var(--m-guia-halo);
    will-change: transform;
    animation: guiaHorizontal 12s ease-in-out infinite alternate;
}

.hero-a-grid-bg::before {
    top: 0;
    left: 10%;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, transparent, var(--m-guia-clara), transparent);
    box-shadow: 0 0 10px var(--m-guia-halo);
    animation: guiaVertical 14s ease-in-out infinite alternate;
}

@keyframes guiaHorizontal {
    0%   { transform: translateY(0); }
    100% { transform: translateY(70cqh); }
}

@keyframes guiaVertical {
    0%   { transform: translateX(0); }
    100% { transform: translateX(80cqw); }
}

/* La luz de fondo del hero. Era un círculo de 34 rem que se salía de la
   caja por la derecha y latía en bucle: mucho brillo para una portada
   industrial. Ahora es un foco quieto y más tenue, dentro del panel. */
.hero-a-glow-orb {
    position: absolute;
    width: min(28rem, 60vw);
    aspect-ratio: 1;
    right: 2%;
    top: -8%;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(0 120 255 / 0.10) 0%, transparent 70%);
    pointer-events: none;
}

/* Dos columnas cuando hay sitio, una cuando no. El reparto es 1fr para
   el texto y 1,05fr para la placa: la placa es más ancha que alta y con
   1fr exacto el titular se rompía en cuatro líneas a 1100 px. */
.hero-a-layout {
    position: relative;
    z-index: var(--m-capa-contenido);
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    align-items: center;
    /* Era var(--m-esp-xl) con un salto a --m-esp-lg en una media query
       de 1280. El escalón de 25 px desaparece y la media query queda
       libre para lo que de verdad la necesita: la cabecera. */
    gap: clamp(var(--m-esp-lg), -11.8rem + 18vw, var(--m-esp-xl));
    width: 100%;
    max-width: var(--m-ancho-pagina);
    padding-block: var(--m-esp-xl);
    padding-inline: var(--m-canal);
}

.hero-a-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--m-esp-sm);
    min-width: 0;
}

.hero-a-title {
    margin: 0;
    /* La escala de titular de página (--m-txt-3xl) da 83 px a 1440 y el
       titular vive en media columna: se partía en cuatro versos. Con la
       de sección entra en dos y sigue mandando en la pantalla. */
    font-size: var(--m-txt-2xl);
}

/* El segundo verso del titular con el color del arco. El degradado va
   sobre el texto, no sobre una caja: -webkit-background-clip.

   Usa los tokens de acento y no los del arco a secas para que el verso
   siga el color de cada marca sin volver a escribirlo aquí: en la
   industrial va del celeste al azul de arco, en la forja del oro claro
   al oro viejo. */
.hero-a-title span {
    background: linear-gradient(90deg, var(--m-acento-claro), var(--m-acento));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-a-sub {
    margin: 0;
}

/* La etiqueta de la placa hereda --m-humo-tenue de sistema.css, que es
   el color de los metadatos: 4,27:1 sobre el fondo de la placa, por
   debajo del 4,5:1 que pide el criterio 1.4.3. Aquí no es un metadato
   —«Espesor máx», «Tolerancia» son la mitad del dato— así que sube al
   humo normal, 7,7:1. El token de sistema.css no se toca: allí el uso
   es otro. */
.hero-a-plasma-container .m-placa__etiqueta {
    color: var(--m-humo);
}

/* ── LA PLACA DE PLASMA ────────────────────────────────────────────
   El recorte irregular se conserva: es una placa cortada, no una
   tarjeta. Lo que cambia es el interior, que ahora respira con la
   escala de espacio del sistema.
   ────────────────────────────────────────────────────────────────── */
.hero-a-plasma-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    perspective: 1200px;
}

.plasma-plate {
    position: relative;
    width: 100%;
    max-width: 32rem;
    padding: clamp(var(--m-esp-md), -6.13rem + 9.81vw, var(--m-esp-lg));
    /* La placa es la pieza de acero de la portada: acero azulado con el
       borde de corte encendido por encima. En el original era gris carbón
       sobre negro; aquí toma el tono de la marca para que no parezca una
       pieza prestada de otra página. */
    background: linear-gradient(135deg, #10233f 0%, #06101f 100%);
    border: var(--m-hilo) solid var(--m-negro-4);
    clip-path: polygon(0% 5%, 5% 0%, 95% 0%, 100% 5%,
            100% 90%, 95% 100%, 80% 100%, 75% 95%,
            25% 95%, 20% 100%, 5% 100%, 0% 95%);
    box-shadow: 0 30px 60px rgb(0 0 0 / 0.6),
        inset 0 0 40px rgb(0 0 0 / 0.8);
    transition: transform var(--m-lento) var(--m-salida);
    transform-style: preserve-3d;
}

.plasma-cut-edge {
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    background: linear-gradient(135deg, #0099ff, #00d2ff, #0099ff) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    opacity: 0.3;
    /* El desenfoque y el halo se quedan fijos y lo único que late es la
       opacidad. Animar `filter` obliga a repintar la capa entera en cada
       fotograma; animar la opacidad la compone el navegador sin volver a
       pintar nada. El latido se ve igual. */
    filter: blur(2px) drop-shadow(0 0 8px #0099ff);
    will-change: opacity;
    animation: edgePulse 4s infinite alternate;
}

@keyframes edgePulse {
    from { opacity: 0.2; }
    to { opacity: 0.55; }
}

.plasma-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--m-esp-sm);
    opacity: 1;
    transition: opacity var(--m-medio) var(--m-entrada), transform var(--m-medio) var(--m-entrada);
}

.plasma-content.changing {
    opacity: 0;
    transform: scale(0.97) translateY(8px);
}

.plasma-header {
    display: flex;
    align-items: center;
    gap: var(--m-esp-sm);
}

.plasma-icon {
    font-size: 2rem;
    line-height: 1;
    color: var(--m-acento);
    filter: drop-shadow(0 0 15px color-mix(in srgb, var(--m-acento) 50%, transparent));
}

.plasma-title {
    font-family: var(--m-titular);
    font-size: var(--m-txt-md);
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--m-tinta);
    margin: 0;
}

.plasma-description {
    font-family: var(--m-cuerpo);
    font-size: var(--m-txt-sm);
    line-height: 1.65;
    color: var(--m-humo);
    margin: 0;
}

/* El reloj de la rotación y su freno, en una fila. */
.plasma-pie {
    display: flex;
    align-items: center;
    gap: var(--m-esp-2xs);
    margin-block-start: var(--m-esp-sm);
}

.plasma-pie[hidden] {
    display: none;
}

/* Pausado: el icono pasa a triángulo de reanudar. */
.plasma-timer-track {
    flex: 1 1 auto;
    width: 100%;
    height: 3px;
    position: relative;
    border-radius: 2px;
    overflow: hidden;
    background: rgb(255 255 255 / 0.05);
}

/* La barra ocupa todo el ancho y lo que se anima es su escala, no su
   ancho: así la mueve el compositor y no la maquetación. El origen a la
   izquierda para que crezca desde ahí, como crecía antes. */
.plasma-timer-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
    background: var(--m-arco);
    box-shadow: 0 0 10px var(--m-arco);
}

.plasma-tech-corner {
    position: absolute;
    width: 15px;
    height: 15px;
    border-color: color-mix(in srgb, var(--m-acento) 40%, transparent);
    border-style: solid;
    pointer-events: none;
}

.plasma-tech-corner.tl { top: 15px; left: 15px; border-width: 2px 0 0 2px; }
.plasma-tech-corner.tr { top: 15px; right: 15px; border-width: 2px 2px 0 0; }
.plasma-tech-corner.bl { bottom: 15px; left: 15px; border-width: 0 0 2px 2px; }
.plasma-tech-corner.br { bottom: 15px; right: 15px; border-width: 0 2px 2px 0; }

/* ── SEGUNDO PANEL GRANDE (TALL) A ── */
.secondary-panel-a {
    width: 100%;
    background: var(--m-banda-6);
    position: relative;
    padding-block: var(--m-esp-xl);
    /* Sin canal lateral: las tarjetas llegan al canto de la pantalla. */
    padding-inline: 0;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

/* Side Trims */
/* Las dos rayas del panel llevaban z-index: 1 y las tarjetas no declaran
   ninguno: con las tarjetas pegadas y más anchas, las rayas les cruzaban
   por encima. Bajan a la capa de fondo, que es donde debe estar un
   adorno de canto. */
.panel-a-side-trim {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, transparent, rgba(0, 153, 255, 0.2), transparent);
    z-index: 0;
}

.panel-a-side-trim.left {
    left: 10px;
}

.panel-a-side-trim.right {
    right: 10px;
}

/* =========================================
   MARCA MEDIEVAL — ORO DE FRAGUA
   ========================================= */
[data-marca="medieval"]:where(.seccion-maestra) {
    background-color: #1a1a1a;
    color: #f5f5f5;
}

/* =========================================
   SECCIÓN NUESTRO ARSENAL (Panel de 3 tarjetas)
   ========================================= */
.arsenal-section {
    background-color: #0f0f0f;
    /* Gris carbón mate oscuro sólido */
    width: 100%;
    padding-block: var(--m-esp-xl);
    padding-inline: var(--m-canal);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 10;
}

.arsenal-header {
    text-align: center;
    margin-bottom: 45px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.arsenal-title {
    font-family: var(--m-titular);
    font-size: var(--m-txt-2xl);
    color: #f0f0f0;
    /* Blanco/gris claro */
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0;
    margin-bottom: 12px;
}

/* La orla del arsenal: la misma pieza que en el resto de la marca. */
.arsenal-header .m-orla {
    width: min(20rem, 70%);
}

.arsenal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--m-col, 15rem), 100%), 1fr));
    gap: var(--m-esp-lg);
    justify-content: center;
    width: 100%;
    max-width: var(--m-carril);
    /* Ancho máximo ajustado */
}

/* En pantallas más pequeñas (tablets/móviles), pasa a 2 o 1 columna */


/* Los cuatro banderines eran <div> con un addEventListener('click') y
   ninguna otra manera de llegar a la tienda filtrada: ni foco, ni
   anuncio, ni Intro. Ahora son <button>, así que hay que apagar la hoja
   del navegador —borde, tipografía, alineación— que un div no traía. */
.arsenal-card {
    background-color: transparent;
    /* Sin fondo ni color */
    border: 0;
    font: inherit;
    color: inherit;
    appearance: none;
    position: relative;
    padding: 30px 20px 40px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-align: center;
    border-radius: 0;
    clip-path: none;
    /* No usamos clip-path, solo el contorno SVG */
    box-shadow: none;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    overflow: visible;
}

.flag-svg-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}

.flag-path {
    fill: transparent;
    /* Solo líneas de contorno */
    stroke: #ffb300;
    stroke-width: 2px;
    transition: stroke 0.4s ease, filter 0.4s ease;
}

.arsenal-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.arsenal-card-title {
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
    color: #e8e8e8;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: color 0.4s ease, text-shadow 0.4s ease;
}

/* ── EL EFECTO HOVER MASIVO ── */
.arsenal-card:hover {
    transform: scale(1.10) translateY(-15px);
    z-index: 20;
}

.arsenal-card:hover .flag-path {
    stroke: #ffcc33;
    /* Luz dorada un poco al hover en las líneas */
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8)) drop-shadow(0 0 4px rgba(255, 215, 0, 0.5));
}

.arsenal-card:hover .arsenal-card-title {
    color: #ffffff;
    text-shadow: 0 0 15px rgba(255, 179, 0, 0.3);
}

/* =========================================
   SECCIÓN GALERÍA ANIMADA (SCROLLING CAROUSEL)
   ========================================= */
.galeria-animada {
    background-color: #0c0c0c;
    width: 100%;
    padding-block: var(--m-esp-xl);
    overflow: hidden;
    /* Oculta lo que sale de los bordes */
    position: relative;
}

/* Degradados oscuros a los lados para efecto de profundidad (Opcional, pero lucen bien) */
.galeria-animada::before,
.galeria-animada::after {
    content: "";
    position: absolute;
    top: 0;
    width: 15vw;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}

.galeria-animada::before {
    left: 0;
    background: linear-gradient(to right, #0c0c0c 0%, transparent 100%);
}

.galeria-animada::after {
    right: -5vw;  /* Desplazado más a la derecha */
    background: linear-gradient(to left, #0c0c0c 0%, transparent 100%);
}

.galeria-track {
    display: flex;
    gap: 20px;
    width: max-content;
    /* La animación mueve de 0% al 50% para que sea infinita si clonamos */
    animation: scroll-izquierda 25s linear infinite;
}

/* Pausar animación cuando se hace hover sobre el contenedor (track completo) */
.galeria-track:hover {
    animation-play-state: paused;
}

/* Quien pide menos movimiento no ve el carrusel moverse. La franja seguía
   desplazándose sola 25 segundos por vuelta, que es justo lo que marea a
   quien activa esa preferencia por vértigo o migraña. Sin animación, la tira
   se recorre a mano: por eso pasa a poder desplazarse, o los eventos que
   quedan fuera del borde no habría forma de verlos. */
@media (prefers-reduced-motion: reduce) {
    .galeria-track {
        animation: none;
    }

    .galeria-animada {
        overflow-x: auto;
    }
}

@keyframes scroll-izquierda {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-50% - 10px));
    }

    /* Mueve la mitad del contenido (original) */
}

.cuadro-animado {
    width: 320px;
    height: 420px;
    background: #141414;
    border: 1px solid #333;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px 20px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    background-size: cover;
    /* El encuadre sale del centro mientras la ficha no diga otra cosa;
       cuando trae punto focal, public.js escribe --foco y el recorte
       respeta ese punto. Mismo contrato que las <img> con object-position. */
    background-position: var(--foco, 50% 50%);
}

.cuadro-animado::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 20%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.2) 100%);
    z-index: 1;
}

.cuadro-animado:hover {
    transform: scale(1.1) translateY(-10px);
    z-index: 10;
    border-color: #ffb300;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 30px rgba(255, 179, 0, 0.2);
}

.cuadro-content {
    position: relative;
    z-index: 2;
}

.cuadro-fecha-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #ffb300;
    color: #000;
    padding: 6px 12px;
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: 0.9rem;
    border-radius: 4px;
    z-index: 3;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    text-transform: uppercase;
}

.cuadro-title {
    color: #ffb300;
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    line-height: 1.2;
    transition: color 0.3s;
}

.cuadro-lugar {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
    opacity: 0.9;
}

.cuadro-desc {
    color: #ccc;
    font-size: 0.8rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cuadro-animado:hover .cuadro-title {
    color: #fff;
    text-shadow: 0 0 15px rgba(255, 179, 0, 0.6);
}

/* =========================================
   SECCIÓN HISTORIA DE LA FORJA
   ========================================= */
.historia-section {
    background-color: #0a0a0a;
    width: 100%;
    padding-block: var(--m-esp-xl);
    padding-inline: var(--m-canal);
    position: relative;
    display: flex;
    justify-content: center;
}

/* La cartela de las referencias históricas.

   Es la puerta a la página de referencias, que es la que el cliente dio
   por buena, así que se viste con su misma mano: la trama de grabado en
   diagonal al 5 % del oro y las cuatro escuadras de una lámina antigua.
   Todo con degradados —ni una imagen nueva— y sin tocar el ritmo: el
   marco interior que ya había pasa de un rectángulo continuo a cuatro
   ángulos, que es lo que hace una cartela grabada. */
.historia-container {
    max-width: 900px;
    width: 100%;
    text-align: center;
    /* 40 px de canal interior en un teléfono de 320 se comen un séptimo
       de la pantalla. Fluido: 24 px allí, los 40 de siempre en cuanto
       hay sitio. */
    padding: 60px clamp(var(--m-esp-md), 1rem + 2vw, 2.5rem);
    border: 1px solid color-mix(in srgb, var(--m-oro) 20%, #333);
    background:
        repeating-linear-gradient(135deg,
            transparent 0 6px,
            color-mix(in srgb, var(--m-oro) 5%, transparent) 6px 7px),
        linear-gradient(165deg, #17141060, transparent 55%),
        #111;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9), inset 0 0 60px rgba(0, 0, 0, 0.8);
    position: relative;
}

/* Las cuatro escuadras. Ocho degradados de un píxel, colocados por su
   esquina: cada uno pinta un brazo del ángulo. */
.historia-container::before {
    content: '';
    position: absolute;
    inset: 12px;
    pointer-events: none;
    opacity: 0.45;
    background:
        linear-gradient(90deg, var(--m-oro) 0 100%) 0 0 / 2.2rem 1px no-repeat,
        linear-gradient(180deg, var(--m-oro) 0 100%) 0 0 / 1px 2.2rem no-repeat,
        linear-gradient(90deg, var(--m-oro) 0 100%) 100% 0 / 2.2rem 1px no-repeat,
        linear-gradient(180deg, var(--m-oro) 0 100%) 100% 0 / 1px 2.2rem no-repeat,
        linear-gradient(90deg, var(--m-oro) 0 100%) 0 100% / 2.2rem 1px no-repeat,
        linear-gradient(180deg, var(--m-oro) 0 100%) 0 100% / 1px 2.2rem no-repeat,
        linear-gradient(90deg, var(--m-oro) 0 100%) 100% 100% / 2.2rem 1px no-repeat,
        linear-gradient(180deg, var(--m-oro) 0 100%) 100% 100% / 1px 2.2rem no-repeat;
}

/* «REFERENCIAS» en versales y con 0,1 em de tracking mide 274 px a la
   escala de sección: más que la caja de 198 que le queda a 320 px. Como
   es una palabra sola no se puede partir, así que el que cede es el
   cuerpo. Medido: era el único desbordamiento lateral que quedaba en la
   marca medieval por debajo de 336 px. */
.historia-title {
    font-family: var(--m-titular);
    font-size: min(var(--m-txt-2xl), 8.2vw);
    color: #ffb300;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
    margin-bottom: 20px;
}

.historia-container .m-orla {
    width: min(17rem, 60%);
    margin-block-end: var(--m-esp-lg);
}

.historia-text {
    color: #d4d4d4;
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 25px;
    letter-spacing: 0.03em;
}

.historia-btn {
    margin-top: 20px;
    background: transparent;
    color: #ffb300;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid #ffb300;
    padding: 14px 28px;
    cursor: pointer;
    font-family: 'Cinzel', serif;
    transition: all 0.3s ease;
}

.historia-btn:hover {
    background: #ffb300;
    color: #0a0a0a;
    box-shadow: 0 0 20px rgba(255, 179, 0, 0.4);
    transform: translateY(-2px);
}

/* Hero Panel Secundario B con Fondo Interactivo (Cota de Malla CSS Puro) */
[data-marca="medieval"]:where(.seccion-maestra) .hero-panel-b {
    width: 100%;
    /* Era `height: 65vh` con tope de 800: un alto fijo con `overflow:
       hidden` encima, así que la cartela se recortaba en cuanto el texto
       pedía más de lo que medía la ventana. En un teléfono de 844 px de
       alto, 65vh son 548 y la cartela mide 554: se comía seis píxeles por
       abajo. Ahora el 65vh es el mínimo y no el máximo —la sección puede
       crecer si el contenido lo pide— y el aspecto es el mismo mientras
       quepa. */
    min-height: clamp(500px, 65vh, 800px);
    background-color: #050505;
    /* Fondo más oscuro y profundo para las sombras de los anillos */
    border-bottom: 2px solid #333333;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    /* Corta el movimiento parallax */
    box-shadow: inset 0 -4px 15px rgba(0, 0, 0, 0.8);
    cursor: crosshair;
}

/* Capa de textura de anillos entrelazados (patrón continuo con CSS) */
[data-marca="medieval"]:where(.seccion-maestra) .chainmail-bg {
    position: absolute;
    top: -5%;
    left: -5%;
    /* Margen extra para el movimiento */
    width: 110%;
    height: 110%;
    /* Más grande para que al moverse no se vea el borde */
    background-color: #1a1a1a;
    /* Increíble patrón CSS simulando anillos de metal superpuestos 
       Escalable ajustando background-size */
    background-image:
        radial-gradient(circle at 50% 50%, transparent 40%, rgba(200, 200, 200, 0.6) 42%, rgba(255, 255, 255, 0.9) 46%, transparent 48%),
        radial-gradient(circle at 100% 100%, transparent 40%, rgba(180, 180, 180, 0.5) 42%, rgba(240, 240, 240, 0.8) 46%, transparent 48%),
        radial-gradient(circle at 0% 100%, transparent 40%, rgba(180, 180, 180, 0.5) 42%, rgba(240, 240, 240, 0.8) 46%, transparent 48%),
        radial-gradient(circle at 100% 0%, transparent 40%, rgba(180, 180, 180, 0.5) 42%, rgba(240, 240, 240, 0.8) 46%, transparent 48%),
        radial-gradient(circle at 0% 0%, transparent 40%, rgba(180, 180, 180, 0.5) 42%, rgba(240, 240, 240, 0.8) 46%, transparent 48%);
    background-size: 40px 40px;
    /* Tamaño de los eslabones */
    opacity: 0.7;
    /* Suavizamos el efecto, dejándolo algo sombrío */
    z-index: 1;
    /* Sombra general metálica sobre la malla entera para efecto 3D global */
    box-shadow: inset 0 0 100px 30px rgba(0, 0, 0, 0.9);
    will-change: transform;
    /* Optimización GPU para Parallax */
    transition: transform 0.1s ease-out;
    /* Suavidad en la interpolación JS */
}

/* Capa 2 de cota de malla (desfasada para crear entrelazado 3D denso) */
[data-marca="medieval"]:where(.seccion-maestra) .chainmail-layer-2 {
    background-position: 20px 20px;
    /* Desfasado exactamente a la mitad */
    opacity: 0.4;
    /* Anillos que van "por debajo" */
    z-index: 0;
    transition: transform 0.15s ease-out;
    /* Velocidad ligeramente diferente al mover el mouse da ilusión parallax */
}

/* Degradado por encima de la malla para viñeta realista */
[data-marca="medieval"]:where(.seccion-maestra) .chainmail-vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, transparent 30%, rgba(0, 0, 0, 0.8) 100%);
    z-index: 3;
    pointer-events: none;
}

/* El panel de la galería de la forja.

   Medía 95vh con un mínimo de 850 px, y su contenido —título, seis
   carteles y un botón— ocupaba unos 450 px: quedaban 400 px de negro
   entre los carteles y el botón «Ver más». El alto lo pone el contenido
   y el ritmo lo pone el relleno, como en el resto de la página. */
[data-marca="medieval"]:where(.seccion-maestra) .hero-panel-b.hero-taller {
    height: auto;
    min-height: 0;
    /* El `max-height: 800px` de la regla base seguía en pie: la sección
       quedaba clavada en 800 px mientras su contenido medía 874 a 1.440 px,
       972 a 390 y 1.489 a 768. Como la base también lleva `overflow:
       hidden` y el contenido va centrado en la caja, lo que sobraba se
       cortaba por arriba y por abajo a partes iguales: a 1.440 se comía los
       18 px altos del titular «Galería de la Forja», y a 768 dejaba fuera
       el titular entero y el botón «Ver más» —325 px por encima del canto
       superior y 263 por debajo del inferior—.

       Con el tope levantado el alto lo pone el contenido, no hay
       desbordamiento vertical que cortar y el `overflow: hidden` heredado
       vuelve a hacer solo lo suyo: recortar el parallax de la malla. */
    max-height: none;
    padding-block: var(--m-esp-xl);
    background-color: #050505;
    overflow-x: hidden;
}

/* =========================================
   NUEVO PANEL — DEBAJO DE LA GALERÍA
   ========================================= */
.new-panel-below {
    width: 100%;
    /* Tenía min-height: 80vh. Una sección de contenido que mide lo que
       mide la ventana deja medio panel vacío en cuanto la pantalla es
       alta; el alto lo pone el contenido y el ritmo, el padding. */
    background-color: #070707;
    background-image:
        /* Textura de piedra antigua */
        repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(255, 255, 255, 0.015) 60px, rgba(255, 255, 255, 0.015) 61px),
        repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(255, 255, 255, 0.01) 80px, rgba(255, 255, 255, 0.01) 81px),
        /* Viñeta central */
        radial-gradient(ellipse at 50% 0%, rgba(139, 90, 20, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 100%, rgba(0, 0, 0, 0.8) 0%, transparent 70%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-block: var(--m-esp-xl);
    padding-inline: var(--m-canal);
    position: relative;
    overflow: hidden;
}

/* Línea decorativa dorada bajo el título del nuevo panel */
.new-panel-below::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #8a6914 20%, #d4af37 50%, #8a6914 80%, transparent 100%);
}

.new-panel-title {
    font-family: var(--m-titular);
    color: #d4af37;
    font-size: var(--m-txt-2xl);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 12px;
}

.new-panel-subtitle {
    font-family: 'Cinzel', serif;
    color: #a8894a;
    font-size: 1rem;
    text-align: center;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 60px;
}

/* =====================================================================
   LA MANO MEDIEVAL: TRAMA DE GRABADO Y ESCUADRAS DE CARTELA

   El encargo pide ornamento, textura gótica y grabado en bordes y
   encabezados, con la página de referencias históricas como patrón. Allí
   el gesto es uno solo y se repite: una trama de buril a 135 grados al
   5 % del oro sobre el fondo del panel, y las cuatro escuadras de una
   cartela antigua dibujadas con ocho degradados de un píxel colocados por
   su esquina. Ni una imagen nueva, ni una petición más, y con `opacity`
   por debajo del medio para que se note el material y no el adorno.

   Aquí se aplica a los paneles de la forja que seguían siendo cajas lisas
   con un filete: el héroe, el arsenal, el formulario de reseñas, la nota
   media y el panel de contacto.
   ===================================================================== */
[data-marca="medieval"]:where(.seccion-maestra) .hero-panel-b-content:not(.content-vacio),
.arsenal-section,
.review-form-panel,
.reviews-big-rating,
.events-panel {
    background-image:
        repeating-linear-gradient(135deg,
            transparent 0 5px,
            color-mix(in srgb, var(--m-oro) 5%, transparent) 5px 6px);
}

/* Las escuadras. Van en el pseudoelemento que cada panel tenía libre, así
   que la lista se parte en dos: los que usan ::before y los que usan
   ::after. El dibujo es el mismo en los dos casos. */
[data-marca="medieval"]:where(.seccion-maestra) .hero-panel-b-content:not(.content-vacio)::before,
.arsenal-section::before,
.review-form-panel::after,
.reviews-big-rating::after,
.events-panel::before {
    content: '';
    position: absolute;
    inset: var(--m-esp-2xs);
    pointer-events: none;
    opacity: 0.45;
    background:
        linear-gradient(90deg, var(--m-oro) 0 100%) 0 0 / 1.6rem 1px no-repeat,
        linear-gradient(180deg, var(--m-oro) 0 100%) 0 0 / 1px 1.6rem no-repeat,
        linear-gradient(90deg, var(--m-oro) 0 100%) 100% 0 / 1.6rem 1px no-repeat,
        linear-gradient(180deg, var(--m-oro) 0 100%) 100% 0 / 1px 1.6rem no-repeat,
        linear-gradient(90deg, var(--m-oro) 0 100%) 0 100% / 1.6rem 1px no-repeat,
        linear-gradient(180deg, var(--m-oro) 0 100%) 0 100% / 1px 1.6rem no-repeat,
        linear-gradient(90deg, var(--m-oro) 0 100%) 100% 100% / 1.6rem 1px no-repeat,
        linear-gradient(180deg, var(--m-oro) 0 100%) 100% 100% / 1px 1.6rem no-repeat;
}

/* La banda del arsenal es ancha: sus escuadras se quedan en el carril del
   contenido en vez de irse a los cantos de la pantalla, donde no se leen
   como esquinas de nada. */
.arsenal-section::before {
    inset-block: var(--m-esp-sm);
    inset-inline: max(var(--m-canal), calc((100% - var(--m-carril)) / 2));
}

/* En papel, la trama y las escuadras solo ensucian: mismo criterio que en
   referencias_historicas.html. */
@media print {

    [data-marca="medieval"]:where(.seccion-maestra) .hero-panel-b-content:not(.content-vacio)::before,
    .arsenal-section::before,
    .review-form-panel::after,
    .reviews-big-rating::after,
    .events-panel::before {
        display: none;
    }
}

/* =====================================================================
   LOS TITULARES DE LA FORJA, GRABADOS

   Llevaban halo: `0 0 25px` de oro al 30 % detrás de la letra, más una
   sombra de caída de 8 px. Un halo es luz emitida —un rótulo de neón—, y
   lo que hace una letra incisa en metal es lo contrario: una sombra oscura
   justo debajo y un filo de luz justo encima, los dos de un píxel. Es el
   mismo grabado de `.seccion__titulo` en la página de referencias.
   ===================================================================== */
.arsenal-title,
.historia-title,
.new-panel-title,
.forge-gallery-title {
    text-shadow:
        0 1px 0 rgb(0 0 0 / 0.75),
        0 -1px 0 color-mix(in srgb, var(--m-oro-claro) 22%, transparent);
}

/* =====================================================================
   La orla — el separador grabado de la marca medieval

   Es el <symbol> #orn-orla del sprite, puesto con <use>. Se pinta con
   currentColor, así que hereda el oro de la sección, y el hierro se apaga
   hacia las puntas con el degradado #orn-hierro. Sustituye a los tres
   separadores que había —dos rectángulos con degradado y una línea con un
   ✦ encima tapando el hueco con un recuadro del color del fondo—.

   Va con `display: block` y `margin-inline: auto`: centrado por la caja y
   no por el contenedor, para que no dependa de que el padre sea flex.
   ===================================================================== */
.m-orla {
    display: block;
    width: min(25rem, 80%);
    height: auto;
    margin-inline: auto;
    margin-block-end: var(--m-esp-xl);
    /* El dibujo va relleno y perfilado con currentColor: basta con decir
       aquí de qué color es el hierro. */
    color: var(--m-oro);
    fill: currentColor;
    stroke: currentColor;
    overflow: visible;
}

/* En pantalla ancha la orla no necesita crecer con la caja: a partir de
   cierto tamaño una filigrana de una unidad de trazo se ve como un
   garabato estirado. */
.m-orla--corta {
    width: min(17rem, 60%);
}

/* ─── TICKER ANIMADO DE RESEÑAS ─── */
.reviews-ticker-wrapper {
    width: 100%;
    overflow: hidden;
    padding: 10px 0 44px;
    display: flex;
    justify-content: center;
    /* Default: centrado */
    align-items: flex-start;
}

/* Cuando hay suficientes reseñas para hacer scroll: activar máscara + animación */
.reviews-ticker-wrapper.is-scrolling {
    justify-content: flex-start;
    mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

.reviews-ticker-track {
    display: flex;
    gap: 22px;
    /* Sin animación por defecto */
}

/* Activar scroll solo cuando el wrapper tiene .is-scrolling */
.reviews-ticker-wrapper.is-scrolling .reviews-ticker-track {
    width: max-content;
    animation: ticker-scroll 38s linear infinite;
}

.reviews-ticker-wrapper.is-scrolling .reviews-ticker-track:hover {
    animation-play-state: paused;
}

/* Fade-in de entrada para cada tarjeta nueva */
@keyframes card-fade-in {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.96);
    }

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

.review-card.entering {
    animation: card-fade-in 0.5s ease forwards;
}

@keyframes ticker-scroll {
    0% {
        transform: translateX(0);
    }

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

/* ─── GRID DE UBICACIÓN Y EVENTOS ─── */
.location-events-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: var(--m-esp-md);
    width: 100%;
    max-width: var(--m-carril);
    margin: 0 auto;
}

/* Contenedor del Mapa */
.map-frame-container {
    position: relative;
    background: #0a0a0a;
    border: 2px solid #3a2e12;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8), inset 0 0 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.map-frame-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(212, 175, 55, 0.2);
    pointer-events: none;
    z-index: 2;
}

.map-frame-container iframe {
    width: 100%;
    height: 450px;
    border: none;
    filter: grayscale(0.3) contrast(1.1) sepia(0.2);
    border-radius: 4px;
}

/* Sección de Eventos */
.events-panel {
    background: linear-gradient(145deg, #110f0a, #070707);
    border: 1px solid #3a2e12;
    border-radius: 8px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

/* Marca de agua del panel: eran dos espadas de la fuente de emojis, o
   sea que cada sistema operativo dibujaba una cosa distinta y algunos
   la pintaban a color. Es el mismo trazo que #i-espadas, pero como un
   ::after no puede citar un <symbol>, va de máscara: el color sigue
   estando en el CSS y el dibujo es el mismo en todas partes. */
.events-panel::after {
    content: '';
    position: absolute;
    bottom: 10px;
    right: 15px;
    width: 2rem;
    height: 2rem;
    background-color: #3e3318;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.4 3.4 15.6 15.6%22/%3E%3Cpath d=%22M15.6 15.6 19.4 19.4%22/%3E%3Cpath d=%22M13.4 17.8 17.8 13.4%22/%3E%3Ccircle cx=%2220.4%22 cy=%2220.4%22 r=%221.2%22/%3E%3Cpath d=%22M20.6 3.4 8.4 15.6%22/%3E%3Cpath d=%22M8.4 15.6 4.6 19.4%22/%3E%3Cpath d=%22M10.6 17.8 6.2 13.4%22/%3E%3Ccircle cx=%223.6%22 cy=%2220.4%22 r=%221.2%22/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.4 3.4 15.6 15.6%22/%3E%3Cpath d=%22M15.6 15.6 19.4 19.4%22/%3E%3Cpath d=%22M13.4 17.8 17.8 13.4%22/%3E%3Ccircle cx=%2220.4%22 cy=%2220.4%22 r=%221.2%22/%3E%3Cpath d=%22M20.6 3.4 8.4 15.6%22/%3E%3Cpath d=%22M8.4 15.6 4.6 19.4%22/%3E%3Cpath d=%22M10.6 17.8 6.2 13.4%22/%3E%3Ccircle cx=%223.6%22 cy=%2220.4%22 r=%221.2%22/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.3;
}

.events-title {
    font-family: 'Cinzel', serif;
    color: #d4af37;
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 15px;
    text-align: center;
    border-bottom: 1px solid #3e3318;
    padding-bottom: 10px;
}

.events-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-height: 380px;
    overflow-y: auto;
    padding-right: 10px;
}

/* Scrollbar medieval */
.events-list::-webkit-scrollbar {
    width: 6px;
}

.events-list::-webkit-scrollbar-track {
    background: #0a0a0a;
}

.events-list::-webkit-scrollbar-thumb {
    background: #3e3318;
    border-radius: 3px;
}

.events-list::-webkit-scrollbar-thumb:hover {
    background: #8a6914;
}

.event-item {
    background: rgba(212, 175, 55, 0.03);
    border-left: 3px solid #8a6914;
    padding: 15px;
    transition: all 0.3s ease;
    cursor: default;
}

.event-item:hover {
    background: rgba(212, 175, 55, 0.08);
    border-left-color: #d4af37;
    transform: translateX(5px);
}

.event-date {
    font-family: 'Cinzel', serif;
    color: #d4af37;
    font-size: 0.8rem;
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

.event-name {
    color: #c8b888;
    font-size: 1rem;
    font-family: 'Cinzel', serif;
    display: block;
    margin-bottom: 3px;
}

.event-desc {
    color: #a8894a;
    font-family: 'Georgia', serif;
    font-size: 0.85rem;
    font-style: italic;
}


/* ─── FOOTER GLOBAL ─── */
.global-footer {
    background: #050505;
    border-top: 2px solid #3a2e12;
    padding-block: var(--m-esp-xl) var(--m-esp-md);
    padding-inline: var(--m-canal);
    color: #a8894a;
    font-family: 'Cinzel', serif;
    position: relative;
    margin-top: 40px;
}

.global-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(212, 175, 55, 0.2);
}

.footer-grid {
    max-width: var(--m-carril);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr;
    gap: 50px;
    margin-bottom: 40px;
}

.footer-logo {
    font-size: 1.8rem;
    color: #d4af37;
    margin-bottom: 15px;
    letter-spacing: 0.1em;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

.footer-motto {
    font-family: 'Georgia', serif;
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #6a5530;
    max-width: 350px;
}

.footer-title {
    color: #d4af37;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 25px;
    border-bottom: 1px solid #3a2e12;
    display: inline-block;
    padding-bottom: 5px;
}

.footer-links,
.footer-social {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a,
.footer-social a {
    color: #a8894a;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-links a:hover,
.footer-social a:hover {
    color: #d4af37;
    transform: translateX(5px);
}

.social-icon {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

.footer-bottom {
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: #4a3a1a;
    max-width: var(--m-carril);
    margin: 0 auto;
}

.creator-info span {
    color: #6a5530;
}

.legal-mini-links {
    display: flex;
    gap: 20px;
}

.legal-mini-links a {
    color: #4a3a1a;
    text-decoration: none;
}

.legal-mini-links a:hover {
    color: #a8894a;
}


.review-card {
    flex-shrink: 0;
    width: 300px;
    background: linear-gradient(145deg, #100e07, #0b0a05);
    border: 1px solid #3a2e12;
    border-radius: 6px;
    padding: 22px 20px 18px;
    position: relative;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), inset 0 0 25px rgba(0, 0, 0, 0.4);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.review-card:hover {
    border-color: #8a6914;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.8), 0 0 12px rgba(212, 175, 55, 0.1);
}

.review-card::before {
    content: '\275D';
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 1.8rem;
    color: #8a6914;
    opacity: 0.45;
    line-height: 1;
}

.review-card-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 10px;
}

.review-card-stars .star {
    color: #d4af37;
    font-size: 0.9rem;
}

.review-card-stars .star.empty {
    color: #2a2010;
}

.review-card-text {
    font-family: 'Georgia', serif;
    color: #c0aa78;
    font-size: 0.85rem;
    line-height: 1.65;
    margin-bottom: 14px;
    font-style: italic;
}

.review-card-author {
    font-family: 'Cinzel', serif;
    color: #b89a5c;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-top: 1px solid #2a2010;
    padding-top: 9px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.review-card-author::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5a4820, #2a1f08);
    border: 1px solid #6a5030;
    flex-shrink: 0;
}

/* ─── ZONA INFERIOR ─── */
.reviews-lower {
    width: 100%;
    max-width: var(--m-carril);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--m-esp-md);
    margin-top: 4px;
}

/* ─── FORMULARIO ─── */
.review-form-panel {
    background: linear-gradient(160deg, #0e0c07, #090807);
    border: 1px solid #3a2e12;
    border-radius: 8px;
    padding: 34px 30px;
    position: relative;
}

.review-form-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(90deg, transparent, #8a6914 30%, #d4af37 50%, #8a6914 70%, transparent);
}

.review-form-title {
    font-family: 'Cinzel', serif;
    color: #d4af37;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 5px;
}

/* Los tres oros apagados de este formulario —#5a4820, #7a6030 y #8a7040—
   daban 2,2:1, 3,3:1 y 4,2:1 sobre el negro de la forja: por debajo del
   mínimo legible. Suben a #b89a5c (7,4:1) y #a8894a (6,0:1), que siguen
   siendo oro viejo y no oro nuevo. */
.review-form-desc {
    color: #b89a5c;
    font-family: 'Georgia', serif;
    font-size: 0.8rem;
    font-style: italic;
    margin-bottom: 22px;
}

.review-form-group {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.review-form-label {
    font-family: 'Cinzel', serif;
    color: #b89a5c;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.review-form-input,
.review-form-textarea {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #2a2010;
    border-radius: 4px;
    color: #c0aa78;
    font-family: 'Georgia', serif;
    font-size: 0.86rem;
    padding: 9px 13px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    resize: none;
}

.review-form-input:focus,
.review-form-textarea:focus {
    border-color: #8a6914;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.1);
}

.review-form-textarea {
    min-height: 95px;
}

.star-rating-input {
    display: flex;
    gap: 5px;
    margin-bottom: 16px;
}

/* Cinco botones de 22×24 px que se anunciaban los cinco igual. El
   nombre lo pone el HTML («3 de 5 estrellas») y el estado aria-pressed;
   aquí va el área de 44×44 que necesita un dedo. */
.star-rating-input .star-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.5rem;
    /* La estrella vacía iba en #2a2010: 1,3:1 sobre el negro de la forja,
       o sea invisible. No se veía cuántas estrellas había hasta pulsar.
       En #6b5b34 se ve (2,9:1 contra el fondo) y sigue distinguiéndose de
       la llena (3,2:1 entre las dos), que además crece un 15 %. */
    color: #6b5b34;
    cursor: pointer;
    transition: color 0.15s, transform 0.1s;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
}

.star-rating-input .star-btn.active {
    color: #d4af37;
    transform: scale(1.15);
}

.review-form-submit {
    /* Flex desde que el botón lleva icono y rótulo en vez de una cadena. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #e0c870;
    background: linear-gradient(to bottom, #2a2010, #110f08);
    border: 1px solid #8a6914;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.25s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.review-form-submit:hover {
    background: linear-gradient(to bottom, #3a3018, #1e1a0c);
    border-color: #d4af37;
    color: #fff8d0;
    box-shadow: 0 4px 18px rgba(212, 175, 55, 0.2);
}

.review-form-msg {
    margin-top: 10px;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    color: #8a6914;
    letter-spacing: 0.1em;
    text-align: center;
    min-height: 18px;
}

/* ─── PANEL DERECHO: la calificación ───
   Debajo de esta caja colgaba la «Voz del Herrero», con diez proverbios
   inventados. Al quitarla, la columna derecha se quedaba con una caja
   corta al lado de un formulario alto: medio panel vacío. La caja pasa a
   ocupar la columna entera y su contenido se centra, así que las dos
   mitades del bloque miden lo mismo. */
.reviews-stats-panel {
    display: flex;
    flex-direction: column;
}

.reviews-big-rating {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(160deg, #0e0c07, #090807);
    border: 1px solid #3a2e12;
    border-radius: 8px;
    padding: 28px;
    text-align: center;
    position: relative;
}

.reviews-big-rating::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(90deg, transparent, #8a6914 30%, #d4af37 50%, #8a6914 70%, transparent);
}

.rating-number {
    font-family: 'Cinzel', serif;
    font-size: 3.8rem;
    color: #d4af37;
    line-height: 1;
}

/* Sin reseñas la nota es una raya: a 3,8 rem, sola en mitad de la caja,
   se lee como un error de carga y no como «todavía no hay nota». */
.rating-number:not(.tiene-nota) {
    font-size: var(--m-txt-lg);
    opacity: 0.55;
    text-shadow: none;
}

.rating-stars-display {
    display: flex;
    justify-content: center;
    gap: 4px;
    font-size: 1.3rem;
    color: #d4af37;
    margin: 8px 0;
}

.rating-count {
    font-family: 'Cinzel', serif;
    color: #b89a5c;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.rating-espera {
    margin: var(--m-esp-sm) auto 0;
    max-width: 30ch;
    font-family: var(--m-cuerpo);
    font-size: var(--m-txt-sm);
    line-height: 1.55;
    color: var(--m-humo-tenue);
}

.rating-espera[hidden] {
    display: none;
}

.rating-bars {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: left;
}

.rating-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    color: #b89a5c;
}

.rating-bar-row .bar-track {
    flex: 1;
    height: 5px;
    background: #1a1508;
    border-radius: 3px;
    overflow: hidden;
}

.rating-bar-row .bar-fill {
    height: 100%;
    background: linear-gradient(to right, #8a6914, #d4af37);
    border-radius: 3px;
}

.featured-review {
    background: linear-gradient(160deg, #0e0c07, #090807);
    border: 1px solid #3a2e12;
    border-radius: 8px;
    padding: 26px;
    position: relative;
    flex: 1;
    overflow: hidden;
}

.featured-review::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(90deg, transparent, #8a6914 30%, #d4af37 50%, #8a6914 70%, transparent);
}

.featured-review-label {
    font-family: 'Cinzel', serif;
    color: #b89a5c;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 12px;
}

.featured-review-content {
    transition: opacity 0.5s ease;
}

.featured-review-content.fading {
    opacity: 0;
}

.featured-text {
    font-family: 'Georgia', serif;
    color: #c0aa78;
    font-size: 0.9rem;
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 12px;
}

.featured-author {
    font-family: 'Cinzel', serif;
    color: #b89a5c;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Modificador para la caja central del panel final (Sin restricciones de tamaño) */
[data-marca="medieval"]:where(.seccion-maestra) .hero-panel-b-content.content-vacio {
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
}

/* =========================================
   COMPONENTE: LETRERO DE TABERNA COLGANTE
   ========================================= */
.forge-gallery-title {
    font-family: var(--m-titular);
    color: #d4af37;
    font-size: var(--m-txt-2xl);
    margin: 20px 0 40px 0;
    z-index: 10;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-align: center;
}

.forge-gallery-btn {
    margin-top: auto;
    margin-bottom: 20px;
    padding: 15px 40px;
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #e0e0e0;
    background: linear-gradient(to bottom, #4a3b2c, #1f1812);
    border: 2px solid #8b6914;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
}

.forge-gallery-btn:hover {
    color: #fff;
    background: linear-gradient(to bottom, #5a4b3c, #2f2822);
    border-color: #d4af37;
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.3), inset 0 0 10px rgba(0, 0, 0, 0.5);
    transform: translateY(-2px);
}

/* =====================================================================
   El soporte de la forja y sus seis carteles

   Cómo estaba y por qué se rehízo (medido sobre el DOM a 1.440 px, no a
   ojo): los carteles se colocaban en posiciones absolutas por porcentaje
   —7, 21, 35, 50, 65, 79, 93 %— pero solo se usaban seis de las siete, y
   las seis eran las de la derecha. Resultado medido: 202,4 px de margen a
   la izquierda y 0,8 px a la derecha. El bloque entero estaba desplazado
   201,6 px, y el último cartel llegaba pegado al canto de la pantalla.
   Los huecos entre carteles tampoco eran iguales: 1,6 / 16 / 16 / 1,6 /
   1,6 px, porque los porcentajes no repartían por igual (14, 15, 15, 14,
   14). Y cada cartel colgaba de una cadena de distinto número de eslabones
   —13, 6, 11, 3, 9 y 5—, así que los seis tableros quedaban a seis alturas
   distintas.

   Ahora la fila es una rejilla de seis columnas iguales con el mismo canal
   a los dos lados: el reparto lo hace el motor de maquetación y no puede
   descuadrarse. Las cadenas llevan todas los mismos eslabones, de modo que
   los tableros arrancan y terminan a la misma altura.

   Otro cambio: 100vw pasó a 100 %. 100vw incluye el ancho de la barra de
   desplazamiento, así que en un navegador con barra clásica el soporte
   sobresalía por los dos lados y abría scroll horizontal en la página.
   ===================================================================== */
.tavern-frame-wrapper {
    /* Medidas del conjunto, en un solo sitio. */
    --barra-alto: 26px;
    --anclaje-ancho: 18px;
    --anclaje-alto: 56px;
    --anclaje-retranqueo: 6px;
    --cartel-ancho: clamp(11rem, -1rem + 15vw, 12.5rem);
    /* Aire entre el canto de la pantalla y el primer cartel. La barra sí
       llega al canto —es la viga de la que cuelgan—, los carteles no.

       El primer cartel arrancaba en 45,5 px y el último terminaba en
       1.394,5 mientras el arsenal de arriba y las reseñas de abajo iban de
       116 a 1.324: la fila de carteles se salía por los dos lados del
       carril de la página. Ahora entra en él —sigue centrada y sigue
       simétrica, pero además alinea con las bandas vecinas— y por debajo
       manda el canal de siempre, que en un teléfono es lo que hace que el
       cartel no toque el canto. */
    --canal-carteles: max(clamp(0.75rem, 3vw, 2.5rem), calc((100% - var(--m-carril)) / 2));

    position: relative;
    width: 100%;
    display: grid;
    /* `1fr` es `minmax(auto, 1fr)`: la pista nunca baja del contenido mínimo
       de lo que lleva dentro, así que la columna de «Espadas y ARMAMENTOS»
       se quedaba con 189,7 px y la de «PROCESOS de fabricación» con 186,7,
       mientras las otras cuatro medían 184,4. Tres anchos distintos en una
       fila de seis carteles iguales, y los huecos entre ellos tampoco
       salían iguales: es el descuadre que señala el cliente.

       Con `minmax(0, 1fr)` la pista puede encoger por debajo del contenido,
       de modo que las seis miden exactamente lo mismo y el texto largo se
       parte en dos líneas en vez de ensanchar su cartel. */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: start;
    justify-items: center;
    column-gap: var(--m-esp-sm);
    /* Solo hay que despejar el hierro: la cadena y el tablero van en el
       flujo del cartel, así que el alto lo pone el contenido. Antes eran
       480 px fijos y sobraban unos 400 px de negro bajo los carteles. */
    padding-block: calc(var(--barra-alto) + 0.25rem) var(--m-esp-md);
    padding-inline: var(--canal-carteles);
    overflow: visible;
}

/* La barra de hierro, de canto a canto del panel.

   Va con `inset-inline: 0` en vez de `left: 50%` + `translateX(-50%)` sobre
   100vw: así ocupa exactamente el ancho disponible, sin depender de que el
   contenedor esté centrado ni de si el navegador reserva o no espacio para
   la barra de desplazamiento. */
.iron-bar {
    position: absolute;
    top: 0;
    /* La caja de relleno del contenedor incluye su propio relleno, así que
       inset-inline: 0 ya es de canto a canto: la viga llega a los dos
       extremos aunque los carteles queden dentro del canal. */
    inset-inline: 0;
    height: var(--barra-alto);

    /* Hierro templado: el hilo de luz alto insinúa el cilindro. */
    background-color: #1c1c1c;
    background-image:
        linear-gradient(to bottom,
            #5a5040 0%,
            #2a2520 18%,
            #111 50%,
            #222 80%,
            #0a0a0a 100%);
    /* Los dos filos van como sombra interior y no como borde: un borde
       encoge la caja de relleno y desplaza medio píxel el eje contra el
       que se centran los anclajes. Se ve igual y el eje sale exacto. */
    box-shadow:
        inset 0 1.5px 0 var(--m-oro-hondo),
        inset 0 -2px 0 #000,
        inset 0 3px 3px rgba(255, 220, 100, 0.1),
        0 8px 20px rgba(0, 0, 0, 0.85);
    z-index: 5;
}

/* Los dos anclajes: remates de lanza en las puntas de la barra.

   El defecto que señaló el cliente —«un anclaje a distinta altura o
   distinto largo que el otro»— tenía dos causas medibles. Una: el remate
   se colocaba con `top: -18px` sobre una barra de 26 px, así que su eje
   quedaba 2 px por encima del eje de la barra; no era que uno estuviera
   más alto que el otro, sino que los dos colgaban torcidos respecto al
   hierro del que salen. Dos: la sombra iba desplazada 2 px a la derecha y
   4 px abajo, de modo que la del remate izquierdo caía sobre la barra y la
   del derecho se salía del panel; con la misma pieza a los dos lados, el
   ojo leía dos piezas distintas.

   Ahora el eje se calcula: el remate se centra en el eje de la barra con
   `top: 50%` + `translateY(-50%)`, y la sombra es vertical y simétrica. */
.iron-sphere {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--anclaje-ancho);
    height: var(--anclaje-alto);

    background: linear-gradient(to bottom,
            #9a8050 0%,
            #6a5828 25%,
            #3a3020 60%,
            #1a1408 100%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.8),
        inset 0 1px 3px rgba(255, 220, 100, 0.2);
    z-index: 6;
}

/* El mismo retranqueo a los dos lados, escrito una sola vez. */
.iron-sphere.left {
    inset-inline-start: var(--anclaje-retranqueo);
}

.iron-sphere.right {
    inset-inline-end: var(--anclaje-retranqueo);
}

/* =========================================
   SISTEMA DE MÚLTIPLES CARTELES COLGANTES
   ========================================= */

/* Cada cartel es una celda de la rejilla, no una posición absoluta.

   Sigue colgando desde arriba —el eje de giro del péndulo es el punto
   donde la cadena toca el hierro—, pero su sitio horizontal lo decide la
   columna. Así no hay porcentajes que cuadrar a mano y la fila queda
   centrada por construcción. */
.hanging-sign-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: top center;
    transition: box-shadow 0.3s ease-out;
    cursor: pointer;
    /* Siempre por debajo del hierro, que va en la capa 5. */
    z-index: 2;
    width: 100%;
    max-width: var(--cartel-ancho);
    will-change: transform;
}

/* Elevación de z-index al interactuar */
.hanging-sign-container.is-hovered {
    z-index: 3;
    /* Durante hover también DEBAJO del fierro */
}

/* Aquí estaban .pos-1 a .pos-7, siete posiciones absolutas por porcentaje
   de las que el HTML solo usaba seis: las seis de la derecha. De ahí los
   202 px de margen izquierdo contra 0,8 px de margen derecho que medía el
   bloque. Las reparte la rejilla; las clases pos-N salieron del HTML. */

/* Estilos para eslabones de cadena generados por JS (Proporciones refinadas) */
.chain-segment {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: top center;
    width: 100%;
    will-change: transform;
}

.link-front {
    width: 14px;
    height: 20px;
    border: 3.5px solid #3a3a3a;
    border-top-color: #6a6050;
    border-radius: 6px;
    margin-bottom: -6px;
    z-index: 2;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9), 1px 1px 4px rgba(0, 0, 0, 0.8);
    background: transparent;
}

.link-side {
    width: 7px;
    height: 16px;
    background: linear-gradient(to right, #111, #5a5040, #111);
    border-radius: 3px;
    margin-bottom: -6px;
    z-index: 1;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

/* Argolla terminal — siempre el mismo remate al final de la cadena antes del cuadro */
.chain-terminal {
    width: 22px;
    height: 14px;
    border: 4px solid #7a6838;
    border-radius: 50%;
    margin-bottom: 0;
    z-index: 3;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8), 0 2px 5px rgba(0, 0, 0, 0.7);
    background: transparent;
    flex-shrink: 0;
}

/* El tablero pequeño colgante (TEXTURAS MEDIEVALES DETALLADAS).

   Es un <button>: era la única entrada a la galería filtrada de su
   categoría y solo la abría el ratón. Por eso hay que apagar aquí la
   hoja del navegador —padding y tipografía heredada— que un div no
   traía. */
.item-board {
    width: 100%;
    height: clamp(15rem, -35rem + 62.5vw, 21.25rem);
    margin-top: -5px;
    padding: 0;
    cursor: pointer;
    appearance: none;
    /* Textura de tablones de madera vieja con remaches de hierro */
    background-color: #2c1e16;
    background-image:
        /* Remaches (4 esquinas) */
        radial-gradient(circle at 15px 15px, #111 4px, transparent 5px),
        radial-gradient(circle at calc(100% - 15px) 15px, #111 4px, transparent 5px),
        radial-gradient(circle at 15px calc(100% - 15px), #111 4px, transparent 5px),
        radial-gradient(circle at calc(100% - 15px) calc(100% - 15px), #111 4px, transparent 5px),
        /* Vetas de madera vertical */
        repeating-linear-gradient(to right, transparent, transparent 20px, rgba(0, 0, 0, 0.1) 21px, rgba(0, 0, 0, 0.2) 22px),
        /* Oscurecimiento general */
        linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7));

    /* Marco de hierro forjado superpuesto */
    border: 14px solid #1a1511;
    border-image: linear-gradient(to bottom right, #4a4a4a, #111, #222) 1;
    box-shadow:
        0 25px 35px rgba(0, 0, 0, 0.9),
        /* Sombra de caída profunda */
        inset 0 0 40px rgba(0, 0, 0, 0.95),
        /* Viñeta interior muy oscura */
        inset 0 0 0 2px rgba(255, 179, 0, 0.4),
        /* Hilo de oro gastado interior */
        0 0 0 4px #050505;
    /* Borde exterior negro macizo */

    display: flex;
    justify-content: center;
    align-items: center;
    color: #d4af37;
    /* Oro pálido viejo para el texto */
    font-family: 'Cinzel', serif;
    font-size: clamp(0.95rem, -0.25rem + 1.5vw, 1.1rem);
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
    transition: box-shadow 0.3s ease-out, filter 0.3s;
}

/* Interacción de iluminación en JS hover */
.hanging-sign-container.is-hovered .item-board {
    box-shadow:
        0 40px 50px rgba(0, 0, 0, 0.95),
        inset 0 0 20px rgba(0, 0, 0, 0.8),
        inset 0 0 0 2px #ffb300,
        0 0 0 4px #000,
        0 0 25px rgba(255, 179, 0, 0.3);
    /* Resplandor mágico/dragón */
    filter: brightness(1.2);
}

/* SE ELIMINÓ EL @keyframes pendulum-swing CSS PARA USAR JS */

/* Contenido interno centrado del panel hero B (Panel central oscuro y dorado) */
[data-marca="medieval"]:where(.seccion-maestra) .hero-panel-b-content {
    text-align: center;
    padding: 50px 80px;
    /* Un poco más de aire por la ampliación */
    z-index: 2;
    background-color: #0a0a0a;
    /* Fondo oscuro sólido */
    border: 1px solid #ffb300;
    /* Borde de línea fina dorada */
    border-radius: var(--m-radio-sm);
    /* El 96 % de ancho dejaba la cartela del héroe en 28,8 px del canto
       mientras el arsenal de debajo arrancaba en 56 y el pie en 72. Va al
       carril de la página, como todas las demás bandas. */
    width: 100%;
    max-width: var(--m-carril);
    min-height: 450px;
    /* Mucho más largo, abarca la mayoría del hero-panel */
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.9);
    /* Sombra pesada para separarlo del fondo */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 28px;
    /* Espacio uniforme entre children */
}

/* Título principal del hero B */
[data-marca="medieval"]:where(.seccion-maestra) .hero-titulo-b {
    font-family: var(--m-titular);
    /* Tipografía medieval elegante */
    font-size: var(--m-txt-3xl);
    /* Fluido y responsivo */
    font-weight: 700;
    color: #ffb300;
    /* Dorado puro */
    letter-spacing: 0.06em;
    text-shadow:
        0 0 20px rgba(255, 179, 0, 0.5),
        0 2px 6px rgba(0, 0, 0, 0.8);
    margin: 0;
    line-height: 1.15;
}

/* Subtítulo del hero B */
[data-marca="medieval"]:where(.seccion-maestra) .hero-subtitulo-b {
    font-size: var(--m-txt-md);
    color: #d4d4d4;
    /* Gris claro, casi blanco */
    line-height: 1.7;
    max-width: 680px;
    margin: 0;
    font-style: italic;
    letter-spacing: 0.02em;
}

/* Botón "Forjar Pedido Personalizado" */
[data-marca="medieval"]:where(.seccion-maestra) .hero-btn-b {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #b8860b 0%, #ffb300 50%, #e6a500 100%);
    color: #0a0a0a;
    /* Texto oscuro sobre dorado */
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 2px solid #ffcc44;
    border-radius: 8px;
    padding: 16px 40px;
    cursor: pointer;
    margin-top: 10px;
    box-shadow:
        0 4px 20px rgba(255, 179, 0, 0.35),
        0 2px 5px rgba(0, 0, 0, 0.6);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.3s ease,
        color 0.3s ease;
}

[data-marca="medieval"]:where(.seccion-maestra) .hero-btn-b:hover {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    color: #ffb300;
    /* Texto dorado cuando es oscuro */
    border-color: #ffb300;
    transform: translateY(-3px) scale(1.03);
    box-shadow:
        0 8px 30px rgba(255, 179, 0, 0.55),
        0 4px 10px rgba(0, 0, 0, 0.8);
}

[data-marca="medieval"]:where(.seccion-maestra) .hero-btn-b:active {
    transform: translateY(0px) scale(0.98);
    box-shadow: 0 2px 10px rgba(255, 179, 0, 0.3);
}

[data-marca="medieval"]:where(.seccion-maestra) .header-b {
    padding: 60px 20px;
    text-align: center;
    background-color: #121212;
    border-bottom: 1px solid #333333;
}

[data-marca="medieval"]:where(.seccion-maestra) .titulo-b {
    font-size: 2.8rem;
    margin-bottom: 15px;
    color: #ffb300;
    /* Acento amarillo/dorado */
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 300;
}

[data-marca="medieval"]:where(.seccion-maestra) .contenido-b {
    max-width: 900px;
    margin: 0 auto;
    padding: 50px 20px;
}

[data-marca="medieval"]:where(.seccion-maestra) .parrafo-b {
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 25px;
    color: #cccccc;
}

[data-marca="medieval"]:where(.seccion-maestra) .boton-b {
    background-color: transparent;
    color: #ffb300;
    border: 2px solid #ffb300;
    padding: 12px 24px;
    font-size: 1rem;
    border-radius: 0;
    /* Bordes cuadrados para contrastar diseño */
    cursor: pointer;
    transition: all 0.3s ease;
}

[data-marca="medieval"]:where(.seccion-maestra) .boton-b:hover {
    background-color: #ffb300;
    color: #121212;
}

/* =========================================
   TRANSICIÓN DE VIDEO
   ========================================= */
.video-transicion-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    display: none;
    opacity: 0;
    background-color: #000;
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
}

.video-transicion-container.visible {
    display: block;
    pointer-events: auto;
}

.video-transicion {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.video-transicion.activo {
    display: block;
}

/* Clase crítica para evitar parpadeo al cargar Marca B desde la tienda */
body.theme-b-vortex [data-marca="cnc"]:where(.seccion-maestra) {
    display: none;
}

body.theme-b-vortex [data-marca="medieval"]:where(.seccion-maestra) {
    display: block;
    opacity: 1;
}

/* =========================================
   EXPANDED FORGE GALLERY (TAB B)
   ========================================= */
.forge-expanded-gallery {
    position: fixed;
    /* acts like another tab/page */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #1a1a1a 0%, #000000 100%);
    z-index: 9999;
    display: none;
    /* hidden by default */
    flex-direction: column;
    overflow-y: auto;
    opacity: 0;
    transition: opacity 0.5s ease;
    padding: var(--m-esp-md) var(--m-canal);
    box-sizing: border-box;
}

.theme-b-vortex .forge-expanded-gallery.active,
[data-marca="medieval"]:where(.seccion-maestra) .forge-expanded-gallery.active {
    display: flex;
    opacity: 1;
}

.forge-expanded-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    border-bottom: 2px solid #d4af37;
    padding-bottom: 20px;
    flex-shrink: 0;
}

.forge-return-btn {
    background: transparent;
    border: 1px solid #c7a15a;
    color: #c7a15a;
    padding: 10px 20px;
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.forge-return-btn:hover {
    background: rgba(199, 161, 90, 0.2);
    box-shadow: 0 0 15px rgba(199, 161, 90, 0.4);
}

.forge-expanded-title {
    font-family: var(--m-titular);
    font-size: var(--m-txt-xl);
    color: #d4af37;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    margin: 0;
    text-align: center;
}

.forge-filter-nav {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 50px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.forge-filter-btn {
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    border: 2px solid rgba(199, 161, 90, 0.4);
    /* subtle gold line */
    color: #b0b0b0;
    padding: 12px 25px;
    font-family: var(--m-cuerpo);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
}

.forge-filter-btn:hover,
.forge-filter-btn.active {
    color: #ffffff;
    border-color: #d4af37;
    /* Bright gold border */
    background: linear-gradient(145deg, #4d3a0e, #2b1f02);
    /* dark gold background */
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.6), inset 0 0 10px rgba(0, 0, 0, 0.8);
    /* gold glow */
}

/* The true grid */
.forge-expanded-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--m-col, 18rem), 100%), 1fr));
    gap: var(--m-esp-lg);
    /* Big distance between photos as requested */
    padding-bottom: 60px;
}

/* The square cards */
.forge-expanded-card {
    aspect-ratio: 1 / 1;
    /* Strictly square */
    position: relative;
    background: #111;
    /* Medieval frame styling */
    border: 10px solid #2b2b2b;
    border-top-color: #3b3b3b;
    border-left-color: #3b3b3b;
    border-bottom-color: #1a1a1a;
    border-right-color: #1a1a1a;
    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.8),
        /* shadow on the wall */
        inset 0 0 40px 10px rgba(0, 0, 0, 0.9);
    /* deep shadow over the image to blend it */
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.4s ease;
    filter: brightness(0.85) contrast(1.1);
    /* Slightly dark ambient */
    cursor: pointer;
}

.forge-expanded-card::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid rgba(199, 161, 90, 0.4);
    /* Subtle gold rim */
    pointer-events: none;
    z-index: 2;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9);
}

.forge-expanded-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--foco, 50% 50%);
    transition: transform 0.8s ease;
    z-index: 1;
}

.forge-expanded-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle, transparent 40%, rgba(0, 0, 0, 0.6) 100%);
    pointer-events: none;
    z-index: 2;
}

.forge-expanded-card:hover {
    transform: translateY(-8px) scale(1.02);
    filter: brightness(1.1) contrast(1.2);
    /* Light up on hover */
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.9),
        0 0 25px rgba(199, 161, 90, 0.4),
        /* gold glow */
        inset 0 0 10px 5px rgba(0, 0, 0, 0.7);
    z-index: 10;
}

.forge-expanded-card:hover img {
    transform: scale(1.1);
}

.forge-card-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
    color: #d4af37;
    font-family: 'Cinzel Decorative', serif;
    font-size: 1.3rem;
    text-align: center;
    z-index: 3;
    transform: translateY(100%);
    transition: transform 0.4s ease;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}

.forge-expanded-card:hover .forge-card-caption {
    transform: translateY(0);
}

/* Show/Hide Logic for Filter */
.forge-expanded-card.hidden {
    display: none;
}

/* ── WHY CHOOSE US — PANEL INDUSTRIAL ── */
.why-choose-us {
    width: 100%;
    background: var(--m-banda-5);
    position: relative;
    overflow: hidden;
    padding-block: var(--m-esp-xl);
    padding-inline: var(--m-canal);
}

/* El fondo del panel era una pantalla de televisor: 300 líneas de barrido
   horizontales encima de un halo azul de 900 x 600 px centrado arriba. El
   encargo pide lo contrario —menos brillo, menos degradado, más rejilla—,
   así que queda la misma cuadrícula de 56 px del héroe, que es la
   referencia de alineación de un plano, y nada más. Sin halo: el panel se
   apoya en su color plano. */
.why-choose-us::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgb(0 200 255 / 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgb(0 200 255 / 0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    pointer-events: none;
    z-index: 1;
}

.why-inner {
    position: relative;
    z-index: 2;
    max-width: var(--m-carril);
    margin: 0 auto;
}

/* Header */
.why-header {
    text-align: center;
    margin-bottom: 80px;
}

.why-title {
    font-family: var(--m-titular);
    font-size: var(--m-txt-2xl);
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 18px;
}

.why-title span {
    /* Color plano: el degradado recortado sobre el texto era brillo por
       brillo, y en pantallas de gama baja se veía sucio en los remates. */
    color: var(--m-acento);
}

.why-subtitle {
    font-family: var(--m-cuerpo);
    font-size: 1.05rem;
    color: #7aa8c8;
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Accent line under header */
/* El subrayado de sección: filete recto, sin degradado ni halo. En el
   taller una línea es una cota, no un neón. */
.why-header-line {
    width: 4.5rem;
    height: 2px;
    background: var(--m-arco);
    margin: 24px auto 0;
}

/* La fila .why-stats-row —cuatro cifras de vitrina— salió de la portada
   por no tener fuente (PENDIENTES-CLIENTE.md, bloque B). Sus reglas se
   fueron con ella. */

/* ── LAS SEIS VENTAJAS ──
   Son seis tarjetas, y seis solo cae en filas completas con una, dos, tres
   o seis columnas. auto-fill daba cuatro a 1.440 px: cuatro arriba y dos
   abajo, con medio bloque vacío a la derecha. El tope de tres columnas
   deja dos filas de tres en escritorio, tres de dos en tableta y seis en
   teléfono: nunca una fila coja.

   El ancho mínimo de columna sigue mandando por debajo, así que el paso a
   dos y a una columna lo decide el sitio disponible, no un corte fijo. */
.why-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--m-col, 19rem), 100%), 1fr));
    gap: var(--m-esp-md);
    /* El tope era 3 x 22 rem = 1.112 px dentro de un carril de 1.300: las
       tarjetas empezaban 94 px más adentro que la barra de llamada, que la
       galería y que el pie, y las bandas no alineaban entre sí. Ahora todas
       las bandas de la marca industrial arrancan y terminan en el mismo
       carril; el reparto en tres columnas lo sigue haciendo el mínimo de
       columna, no un ancho máximo distinto por bloque. */
    max-width: 100%;
    margin-inline: auto;
}

/* Las seis ventajas entran escalonadas, no de golpe: la rejilla se lee de
   izquierda a derecha y de arriba abajo, y el retardo sigue ese orden. Solo
   corre mientras la banda está a la vista —lo enciende el observador de
   portada.js— y con «menos movimiento» aparecen ya puestas. */
.why-choose-us.en-pantalla .why-card {
    animation: whyEntra 0.6s var(--m-salida) backwards;
}

.why-choose-us.en-pantalla .why-card:nth-child(1) { animation-delay: 0.05s; }
.why-choose-us.en-pantalla .why-card:nth-child(2) { animation-delay: 0.13s; }
.why-choose-us.en-pantalla .why-card:nth-child(3) { animation-delay: 0.21s; }
.why-choose-us.en-pantalla .why-card:nth-child(4) { animation-delay: 0.29s; }
.why-choose-us.en-pantalla .why-card:nth-child(5) { animation-delay: 0.37s; }
.why-choose-us.en-pantalla .why-card:nth-child(6) { animation-delay: 0.45s; }

@keyframes whyEntra {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .why-choose-us.en-pantalla .why-card {
        animation: none;
    }
}

.why-card {
    background: rgb(7 14 28 / 0.6);
    border: var(--m-hilo) solid rgb(0 191 255 / 0.15);
    padding: 40px 36px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.35s, transform 0.35s;
    cursor: default;
}

.why-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 0;
    background: linear-gradient(to bottom, #0099ff, transparent);
    transition: height 0.45s ease;
}

.why-card:hover::before {
    height: 100%;
}

.why-card:hover {
    border-color: rgba(0, 153, 255, 0.35);
    transform: translateY(-4px);
}

/* Top-right corner accent */
.why-card::after {
    content: '';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 18px;
    height: 18px;
    border-top: 2px solid rgba(0, 153, 255, 0.3);
    border-right: 2px solid rgba(0, 153, 255, 0.3);
    transition: border-color 0.3s;
}

.why-card:hover::after {
    border-color: rgba(0, 153, 255, 0.7);
}

.why-card-icon {
    font-size: 2.4rem;
    margin-bottom: 22px;
    display: block;
    filter: drop-shadow(0 0 12px rgba(0, 153, 255, 0.4));
}

.why-card-title {
    font-family: var(--m-titular);
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
}

.why-card-desc {
    font-family: var(--m-cuerpo);
    font-size: 0.9rem;
    color: #6a96b8;
    line-height: 1.75;
}

/* Bottom divider on each card */
.why-card-line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0, 153, 255, 0.15), transparent);
}

/* ── BOTTOM CTA BAR ── */
.why-cta-bar {
    margin-top: 70px;
    border: 1px solid rgba(0, 191, 255, 0.3);
    background: #091525;
    padding: 40px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    position: relative;
    /* Sombra de caída, sin halo azul por dentro. */
    box-shadow: 0 10px 40px rgb(0 0 0 / 0.6);
    border-radius: 4px;
    overflow: hidden;
}

/* Esquinas técnicas industriales */
.why-cta-bar::before,
.why-cta-bar::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid #00bfff;
    pointer-events: none;
    opacity: 0.5;
}

.why-cta-bar::before {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
}

.why-cta-bar::after {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
}

/* Aquí había una trama diagonal a 45 grados sobre el fondo de la barra.
   Tres tramas distintas —barrido, diagonal y halo— en la misma pantalla no
   son textura, son ruido. La barra se queda con su filete y sus escuadras. */

.why-cta-left {
    position: relative;
    z-index: 1;
    flex: 1;
}

.why-cta-right {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    flex-shrink: 0;
}

.why-cta-text {
    font-family: var(--m-titular);
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.why-cta-text span {
    color: #00bfff;
}

.why-cta-sub {
    font-family: var(--m-cuerpo);
    font-size: 1rem;
    color: #8ab4d8;
    margin-top: 8px;
    max-width: 500px;
}

.why-cta-btn {
    background: rgba(0, 191, 255, 0.1);
    color: #fff;
    border: 1px solid #00bfff;
    padding: 16px 40px;
    font-family: var(--m-titular);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    /* Ni en reposo ni al pasar por encima: el botón se distingue por su
       filete y su fondo. Con él se va el destello que lo cruzaba de lado a
       lado —un ::before de 100 % de ancho animado en 0,5 s— y el halo de
       30 px del hover. */
    transition: background-color 0.3s ease, border-color 0.3s ease;
    position: relative;
    border-radius: 4px;
}

.why-cta-btn:hover,
.why-cta-btn:focus-visible {
    background: rgba(0, 191, 255, 0.22);
    border-color: var(--m-acento-claro);
}


/* ══════════════════════════════════════════
   GALERÍA DE PROYECTOS — PLASMA CUT STYLE
   ══════════════════════════════════════════ */
.projects-gallery {
    width: 100%;
    background: var(--m-banda-6);
    position: relative;
    padding-block: var(--m-esp-xl);
    padding-inline: var(--m-canal);
    overflow: hidden;
}

/* Las cuatro escuadras del apartado. Iban a 24 px del canto de la
   pantalla, o sea 92 px por fuera del carril en el que están el titular y
   la rejilla de fotos: marcaban una caja que no era la del contenido.
   Ahora abren justo donde abre el contenido. */
.projects-gallery .pg-corner {
    position: absolute;
    width: 40px;
    height: 40px;
    border-color: rgba(0, 153, 255, 0.35);
    border-style: solid;
    pointer-events: none;
}

.projects-gallery .pg-corner.tl,
.projects-gallery .pg-corner.tr {
    top: 24px;
}

.projects-gallery .pg-corner.bl,
.projects-gallery .pg-corner.br {
    bottom: 24px;
}

.projects-gallery .pg-corner.tl,
.projects-gallery .pg-corner.bl {
    left: max(var(--m-canal), calc((100% - var(--m-carril)) / 2));
}

.projects-gallery .pg-corner.tr,
.projects-gallery .pg-corner.br {
    right: max(var(--m-canal), calc((100% - var(--m-carril)) / 2));
}

.projects-gallery .pg-corner.tl {
    border-width: 2px 0 0 2px;
}

.projects-gallery .pg-corner.tr {
    border-width: 2px 2px 0 0;
}

.projects-gallery .pg-corner.bl {
    border-width: 0 0 2px 2px;
}

.projects-gallery .pg-corner.br {
    border-width: 0 2px 2px 0;
}

/* ══════════════════════════════════════════
   PANEL CAMPAÑA — PREMIOS MEJORES PROYECTOS
   ══════════════════════════════════════════ */
.campaign-panel {
    width: 100%;
    background: linear-gradient(100deg, var(--m-banda-2) 0%, var(--m-banda-1) 55%, var(--m-banda-3) 100%);
    padding-block: var(--m-esp-md);
    padding-inline: var(--m-canal);
    position: relative;
    overflow: hidden;
}

/* El halo elíptico de la esquina se fue con los demás. Queda el filete
   vertical del canto izquierdo, que es lo que marca el bloque; plano y de
   2 px, en vez de un degradado de cuatro paradas. */
.campaign-panel::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: var(--m-arco);
    opacity: 0.55;
}

.cp-inner {
    max-width: var(--m-carril);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    position: relative;
    z-index: 2;
}

/* Left: badge + text */
.cp-left {
    display: flex;
    align-items: center;
    gap: 28px;
}

/* Trophy badge */
.cp-badge {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(0, 100, 200, 0.25), rgba(0, 180, 255, 0.1));
    border: 2px solid rgba(0, 153, 255, 0.4);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    position: relative;
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}

/* El anillo del emblema latía en bucle —2,5 s, sin fin y sin decir nada—.
   Ahora es un segundo filete quieto, que es lo que hace una placa
   remachada. */
.cp-badge::before {
    content: '';
    position: absolute;
    inset: -6px;
    border: 1px solid rgba(0, 200, 255, 0.28);
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}

/* Text block */
.cp-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cp-eyebrow {
    font-family: var(--m-cuerpo);
    font-size: 0.65rem;
    /* La banda de campaña es el peldaño más alto del ritmo de azules, y
       sobre él este antetítulo daba 3,0:1 con el opacity encima. Sube a
       un celeste claro y se le quita la opacidad, que era lo que lo
       apagaba de verdad. */
    color: #9dc4e8;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.cp-heading {
    font-family: var(--m-titular);
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.cp-heading span {
    /* Color plano: el degradado recortado sobre el texto era brillo por
       brillo, y en pantallas de gama baja se veía sucio en los remates. */
    color: var(--m-acento);
}

.cp-desc {
    font-family: var(--m-cuerpo);
    font-size: 0.88rem;
    /* 4,0:1 sobre la banda de campaña, y es texto corrido. */
    color: #b8d6f0;
    line-height: 1.55;
    max-width: 580px;
}

/* Right: Instagram button */
.cp-right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.cp-ig-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 32px;
    /* El botón llevaba el degradado de la marca Instagram —morado, rojo y
       naranja— y era, de largo, lo más brillante de una portada industrial
       de negro y azul. Quien lo identifica es el icono, que se queda; el
       botón vuelve a la paleta del taller. */
    background: rgb(0 191 255 / 0.10);
    color: var(--m-acento-claro);
    border: 1px solid rgb(0 191 255 / 0.55);
    cursor: pointer;
    font-family: var(--m-titular);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
    transition: background-color 0.3s, border-color 0.3s;
    position: relative;
}

.cp-ig-btn:hover,
.cp-ig-btn:focus-visible {
    background: rgb(0 191 255 / 0.2);
    border-color: var(--m-acento-claro);
}

.cp-ig-btn-icon {
    position: relative;
    z-index: 1;
    font-size: 1.3rem;
    line-height: 1;
}

.cp-ig-btn-label {
    position: relative;
    z-index: 1;
}

.cp-ig-note {
    font-family: var(--m-cuerpo);
    font-size: 0.68rem;
    /* Iba en #4a6a88: 2,4:1 sobre la banda, el texto peor leído de toda
       la portada. Y es el que dice cómo se participa. */
    color: #9dc4e8;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


.pg-inner {
    max-width: var(--m-carril);
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Section header */
.pg-header {
    text-align: center;
    margin-bottom: 70px;
}

.pg-title {
    font-family: var(--m-titular);
    font-size: var(--m-txt-2xl);
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 16px;
}

.pg-title span {
    /* Color plano: el degradado recortado sobre el texto era brillo por
       brillo, y en pantallas de gama baja se veía sucio en los remates. */
    color: var(--m-acento);
}

.pg-subtitle {
    font-family: var(--m-cuerpo);
    font-size: 1rem;
    color: #6a96b8;
    max-width: 600px;
    margin: 0 auto;
}

/* El subrayado de sección: filete recto, sin degradado ni halo. En el
   taller una línea es una cota, no un neón. */
.pg-header-line {
    width: 4.5rem;
    height: 2px;
    background: var(--m-arco);
    margin: 22px auto 0;
}

/* ── MOSAIC GRID ── */
/* La rejilla de proyectos es flex y no grid, y la razón es la última fila.

   Medido a 1.440 px con cinco piezas: la rejilla ocupaba de 70 a 1.370, y
   las piezas iban de 182 a 1.257 —tres columnas de 352 px centradas—, pero
   la segunda fila solo tenía dos y se alineaba a la izquierda, dejando un
   hueco de 352 px a la derecha. El bloque leía torcido. CSS grid no sabe
   centrar una última fila incompleta; flex-wrap sí, porque cada fila es
   una línea con su propio reparto.

   Las piezas conservan su ancho: la base de 17 rem crece hasta el tope de
   22 rem, y ahí para. Con una sola foto —que es lo que hay hoy en varias
   secciones— sale centrada y a su tamaño, no estirada a todo el ancho. */
/* Era una fila flexible con `flex: 1 1` y las piezas se estiraban para
   rellenar el hueco que sobraba: en una fila de tres cada foto medía 427 px
   y en la fila de abajo, con dos, medían 640. Dos anchos distintos para la
   misma clase de pieza, y ninguno alineado con la banda de al lado.

   Ahora es una rejilla: las columnas miden todas lo mismo las haya que
   haya, así que las dos filas de tres quedan en cuadro. Con auto-fit —y no
   auto-fill— la pista vacía se colapsa, de modo que con una sola foto
   publicada la columna ocupa el carril entero y la pieza se centra en él
   en vez de quedarse arrinconada a la izquierda. */
.pg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--m-col, 24rem), 100%), 1fr));
    gap: var(--m-esp-sm);
    justify-items: center;
    align-items: stretch;
}

.pg-grid[hidden] {
    display: none;
}

.pg-item {
    width: 100%;
    max-width: 24rem;
}

/* La rejilla era un mosaico de 3×2 con la primera foto ocupando dos
   filas: solo cuadraba con exactamente cinco imágenes, y la API devuelve
   las que haya —hoy una sola en las secciones de CNC—. Ahora todas las
   piezas miden lo mismo y las columnas las calcula auto-fill, así que
   compone igual con una que con cinco. */

/* The plasma-cut shaped frame wrapper */
.pg-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #0a1018;
    cursor: pointer;
}

/* El chaflán de las piezas.

   Había cinco recortes distintos, uno por posición: la primera foto perdía
   una muesca en el borde de abajo, la tercera cortaba solo dos esquinas, la
   cuarta las dos contrarias… Con seis piezas en cuadro, seis siluetas
   distintas es justo lo que impide leer la rejilla como rejilla, y es el
   descuadre que señaló el cliente en las galerías.

   Ahora es un solo chaflán, el mismo para todas y simétrico en los dos
   ejes: cuatro esquinas cortadas a 14 px. Se mide en píxeles y no en
   porcentaje porque un porcentaje sobre una caja de 4:3 corta más ancho que
   alto, y el corte se ve torcido. */
.pg-item {
    clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px,
            100% calc(100% - 14px), calc(100% - 14px) 100%,
            14px 100%, 0 calc(100% - 14px), 0 14px);
}

/* The photo itself */
/* ── Fotos que se enseñan enteras ───────────────────────────────────
   El panel marca cada foto de galería como «rellena el hueco» o «foto
   completa». La primera recorta, que es lo que hacía el sitio siempre; la
   segunda entra dentro con su proporción intacta y deja fondo alrededor.

   Va con la clase puesta desde JavaScript y no con una variable, porque
   además de object-fit hay que apagar el zoom del hover: agrandar una foto
   que ya se ve entera vuelve a recortarla. */
.pg-item img.m-foto--completa,
.forge-expanded-card img.m-foto--completa {
    object-fit: contain;
    object-position: center;
    padding: 0.5rem;
}

.pg-item:hover img.m-foto--completa,
.forge-expanded-card:hover img.m-foto--completa {
    transform: none;
}

.pg-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--foco, 50% 50%);
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        filter 0.5s ease;
    filter: brightness(0.75) contrast(1.1) saturate(0.85);
}

/* Plasma-glow border overlay (pseudo-element) */
.pg-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid rgba(0, 153, 255, 0.25);
    z-index: 3;
    pointer-events: none;
    transition: border-color 0.4s, box-shadow 0.4s;
}

/* Gradient overlay at the bottom for caption */
.pg-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55%;
    background: linear-gradient(to top, rgba(0, 5, 15, 0.92) 0%,
            rgba(0, 5, 15, 0.5) 50%,
            transparent 100%);
    z-index: 2;
    pointer-events: none;
}

/* Caption */
.pg-item .pg-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 22px 20px;
    z-index: 5;
    transform: translateY(6px);
    transition: transform 0.4s ease;
}

.pg-item .pg-caption-title {
    font-family: var(--m-titular);
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.pg-item .pg-caption-tag {
    font-family: var(--m-cuerpo);
    font-size: 0.75rem;
    color: #5ab4ff;
    opacity: 0;
    transition: opacity 0.4s 0.05s;
}

/* Hover states */
.pg-item:hover img {
    transform: scale(1.07);
    filter: brightness(0.95) contrast(1.15) saturate(1);
}

.pg-item:hover::before {
    border-color: rgba(0, 200, 255, 0.6);
    box-shadow: inset 0 0 20px rgba(0, 153, 255, 0.12),
        0 0 20px rgba(0, 153, 255, 0.25);
}

.pg-item:hover .pg-caption {
    transform: translateY(0);
}

.pg-item:hover .pg-caption-tag {
    opacity: 1;
}

/* ── CTA BUTTON ── */
.pg-cta-row {
    display: flex;
    justify-content: center;
    margin-top: 56px;
}

.pg-btn-ver-mas {
    position: relative;
    background: transparent;
    border: 2px solid rgba(0, 153, 255, 0.5);
    color: #fff;
    font-family: var(--m-titular);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 16px 56px;
    cursor: pointer;
    transition: border-color 0.35s, box-shadow 0.35s, color 0.3s;
    /* Plasma cut corners */
    clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
    overflow: hidden;
}

.pg-btn-ver-mas::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 153, 255, 0.12) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.pg-btn-ver-mas:hover::before {
    transform: translateX(100%);
}

.pg-btn-ver-mas:hover,
.pg-btn-ver-mas:focus-visible {
    border-color: #0099ff;
    background: rgb(0 153 255 / 0.12);
    color: #7fe3ff;
}


/* ══════════════════════════════════════════
   RESEÑAS DE CLIENTES — INDUSTRIAL STYLE
   ══════════════════════════════════════════ */
.reviews-panel-cnc {
    width: 100%;
    background: var(--m-banda-4);
    position: relative;
    padding-block: var(--m-esp-xl);
    padding-inline: var(--m-canal);
    overflow: hidden;
}

.reviews-panel-cnc::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(0, 153, 255, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
}

.rp-inner {
    max-width: var(--m-carril);
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.rp-header {
    text-align: center;
    margin-bottom: 80px;
}

.rp-title {
    font-family: var(--m-titular);
    font-size: var(--m-txt-2xl);
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 20px;
}

.rp-title span {
    /* Color plano: el degradado recortado sobre el texto era brillo por
       brillo, y en pantallas de gama baja se veía sucio en los remates. */
    color: var(--m-acento);
}

/* El subrayado del apartado de reseñas: 4 px con halo de 15 px pasan a
   filete de 2 px, como el del resto del taller. */
.rp-divider {
    width: 4.5rem;
    height: 2px;
    background: var(--m-arco);
    margin: 0 auto;
}

.rp-stats-dashboard {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    background: rgb(6 17 28 / 0.7);
    border: 1px solid rgba(0, 191, 255, 0.2);
    padding: 30px;
    margin-top: 30px;
    margin-bottom: 40px;
    align-items: center;
}

.rp-stats-left {
    flex: 1;
    min-width: 200px;
    text-align: center;
    border-right: 1px solid rgba(0, 191, 255, 0.2);
    padding-right: 20px;
}

.rp-stats-avg {
    font-size: 4rem;
    font-weight: 800;
    color: #00bfff;
    line-height: 1;
    font-family: var(--m-titular);
}

.rp-stats-stars {
    color: #00bfff;
    font-size: 1.5rem;
    margin: 10px 0;
    letter-spacing: 2px;
}

.rp-stats-count {
    color: #8ab4d8;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.rp-stats-right {
    flex: 2;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rp-bar-row {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #a0c4e4;
    font-size: 0.9rem;
}

.rp-bar-track {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

/* La barra del reparto de estrellas es un dato: color plano, sin halo ni
   degradado. Una barra que brilla se lee peor que una que no. */
.rp-bar-fill {
    height: 100%;
    background: var(--m-arco);
    border-radius: 4px;
    transition: width 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.rp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
    gap: var(--m-esp-md);
}

/* La tarjeta pintaba su fondo con dos literales que no eran ninguno de
   los seis peldaños del ritmo de bandas, así que se quedaba fuera del
   sistema: al cambiar la escala de la marca no la seguía, y en alto
   contraste tampoco se aplanaba. Ahora usa los tokens. */
.rp-card {
    background: linear-gradient(145deg, var(--m-negro-2), var(--m-negro-1));
    border: 1px solid rgba(0, 153, 255, 0.15);
    padding: 40px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* "Welded" corner effect */
.rp-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 20px;
    height: 20px;
    border-top: 3px solid #0099ff;
    border-left: 3px solid #0099ff;
    opacity: 0;
    transition: opacity 0.3s;
}

.rp-card::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-bottom: 3px solid #0099ff;
    border-right: 3px solid #0099ff;
    opacity: 0;
    transition: opacity 0.3s;
}

.rp-card:hover {
    transform: translateY(-10px);
    border-color: rgba(0, 153, 255, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 153, 255, 0.1);
}

.rp-card:hover::before,
.rp-card:hover::after {
    opacity: 1;
}

.rp-user {
    display: flex;
    align-items: center;
    gap: 15px;
}

.rp-avatar {
    width: 50px;
    height: 50px;
    background: #101a24;
    border: 2px solid #0099ff;
    border-radius: 4px;
    /* Industrial square/rounded look */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--m-titular);
    font-weight: 700;
    color: #0099ff;
    font-size: 1.2rem;
    text-transform: uppercase;
}

.rp-info h4 {
    font-family: var(--m-titular);
    font-size: 1.1rem;
    color: #ffffff;
    margin-bottom: 4px;
}

.rp-info p {
    font-family: var(--m-cuerpo);
    font-size: 0.8rem;
    color: #0099ff77;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.rp-rating {
    display: flex;
    gap: 5px;
}

/* LED-style star display */
.rp-star {
    width: 12px;
    height: 12px;
    background: #0099ff;
    border-radius: 50%;
}

.rp-star.empty {
    background: #1a2a3a;
    box-shadow: none;
}

.rp-content {
    font-family: var(--m-cuerpo);
    font-size: 0.95rem;
    line-height: 1.7;
    color: #8ab4d8;
    font-style: italic;
}

.rp-footer {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 153, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rp-date {
    font-family: var(--m-cuerpo);
    font-size: 0.7rem;
    /* Iba en #0099ff44 —el azul al 27 %—: 1,4:1 sobre la tarjeta. Era el
       único dato que sitúa la reseña en el tiempo y no se veía. */
    color: #5fa8d8;
}

.rp-tag {
    background: rgba(0, 153, 255, 0.1);
    color: #0099ff;
    padding: 4px 10px;
    font-size: 0.65rem;
    font-family: var(--m-cuerpo);
    letter-spacing: 0.1em;
    border-radius: 2px;
}


/* ── ADD REVIEW BUTTON & FORM ── */
.rp-actions {
    margin-top: 50px;
    display: flex;
    justify-content: center;
}

.rp-btn-add {
    position: relative;
    background: transparent;
    border: 1px solid rgba(0, 153, 255, 0.4);
    color: #ffffff;
    font-family: var(--m-titular);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 14px 40px;
    cursor: pointer;
    transition: all 0.3s ease;
    clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}

.rp-btn-add:hover {
    background: rgba(0, 153, 255, 0.1);
    border-color: #0099ff;
    box-shadow: 0 0 15px rgba(0, 153, 255, 0.3);
    transform: translateY(-2px);
}

.rp-form-container {
    max-width: 600px;
    margin: 40px auto 0;
    background: rgb(6 17 28 / 0.8);
    border: 1px solid rgba(0, 153, 255, 0.2);
    padding: 40px;
    display: none;
    /* Hidden by default */
    animation: rpFadeIn 0.5s ease;
}

@keyframes rpFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.rp-form-header {
    margin-bottom: 25px;
    text-align: center;
}

.rp-form-header h3 {
    font-family: var(--m-titular);
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 1.2rem;
}

.rp-form-group {
    margin-bottom: 20px;
}

/* .rp-star-label era un <label> sin campo al que apuntar: rotula un
   grupo de cinco botones, no un control. Cambia la etiqueta, no el
   aspecto. */
/* Las tres etiquetas del formulario —qué va en cada campo— iban en el
   azul de arco al 70 %: 3,7:1 a 11 px. Sin el opacity y con el celeste
   claro pasan de 7:1 y siguen leyéndose como etiqueta, no como titular. */
.rp-form-group label,
.rp-star-label {
    display: block;
    font-family: var(--m-cuerpo);
    font-size: 0.7rem;
    color: #5fa8d8;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.rp-form-input {
    width: 100%;
    background: rgb(2 4 8 / 0.6);
    border: 1px solid rgba(0, 153, 255, 0.15);
    padding: 12px 15px;
    color: #ffffff;
    font-family: var(--m-cuerpo);
    font-size: 0.9rem;
    transition: border-color 0.3s;
}

.rp-form-input:focus {
    outline: none;
    border-color: #0099ff;
    background: rgb(2 4 8 / 0.8);
}

.rp-star-input {
    display: flex;
    gap: 10px;
    margin-top: 5px;
}

/* Eran cinco <span> sin role ni tabindex: el teclado no llegaba a
   ellos. Ahora son botones, y como tales hay que apagarles la hoja del
   navegador y darles el área táctil. */
.star-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 1.5rem;
    color: #1a2a3a;
    cursor: pointer;
    transition: color 0.2s, text-shadow 0.2s;
}


.star-item.active {
    color: #0099ff;
    text-shadow: 0 0 10px rgba(0, 153, 255, 0.8);
}

.rp-btn-submit {
    width: 100%;
    background: #0099ff;
    color: #ffffff;
    border: none;
    padding: 14px;
    font-family: var(--m-titular);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 0.3s, box-shadow 0.3s;
    margin-top: 10px;
}

.rp-btn-submit:hover {
    background: #00b4ff;
    box-shadow: 0 0 20px rgba(0, 153, 255, 0.4);
}

/* ══════════════════════════════════════════
   UBICACIÓN Y CONTACTO — INDUSTRIAL STYLE
   ══════════════════════════════════════════ */
.location-contact-cnc {
    width: 100%;
    background: var(--m-banda-5);
    position: relative;
    padding-block: var(--m-esp-xl);
    padding-inline: var(--m-canal);
    overflow: hidden;
}

.lc-inner {
    max-width: var(--m-carril);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--m-esp-lg);
    position: relative;
    z-index: 2;
}

/* Left: Info area */
.lc-info {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.lc-header {
    text-align: left;
}

.lc-title {
    font-family: var(--m-titular);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lc-title span {
    /* Color plano: el degradado recortado sobre el texto era brillo por
       brillo, y en pantallas de gama baja se veía sucio en los remates. */
    color: var(--m-acento);
}

.lc-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.lc-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.lc-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: rgba(0, 153, 255, 0.1);
    border: 1px solid rgba(0, 153, 255, 0.3);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0099ff;
    /* 24 px: por debajo, el trazo de 2 unidades empieza a empastarse. */
    font-size: 1.5rem;
    box-shadow: 0 0 10px rgba(0, 153, 255, 0.1);
}

.lc-details h4 {
    font-family: var(--m-titular);
    font-size: 1.1rem;
    color: #ffffff;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lc-details p {
    font-family: var(--m-cuerpo);
    font-size: 0.95rem;
    color: #8ab4d8;
    line-height: 1.6;
}

/* Right: Map area */
.lc-map {
    position: relative;
    background: var(--m-banda-5);
    border: 1px solid rgba(0, 153, 255, 0.2);
    padding: 10px;
    box-shadow: 0 0 30px rgb(0 0 0 / 0.5);
    min-height: 400px;
}

/* Map decorative tech frame */
.lc-map::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 1px solid rgba(0, 153, 255, 0.1);
    pointer-events: none;
}

.lc-map iframe {
    width: 100%;
    height: 100%;
    border: none;
    /* Se eliminó el filtro de escala de grises para mostrar el mapa a color */
    opacity: 0.9;
    transition: opacity 0.3s, filter 0.3s;
}

.lc-map:hover iframe {
    opacity: 1;
}

/* Tech label for the map */
.lc-map-label {
    position: absolute;
    bottom: 20px;
    left: 20px;
    /* Blanco sobre el azul de arco al 90 % daba 2,9:1 a 11 px. La chapa
       se cierra al azul hondo: mismo azul de marca, 8,5:1. */
    background: rgb(0 79 138 / 0.94);
    color: #ffffff;
    font-family: var(--m-cuerpo);
    font-size: 0.7rem;
    padding: 5px 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    z-index: 5;
    box-shadow: 0 5px 15px rgb(0 0 0 / 0.4);
}

/* Responsive */


/* ══════════════════════════════════════════
   FOOTER INDUSTRIAL — MAIN FOOTER CNC
   ══════════════════════════════════════════ */
.main-footer-cnc {
    background: var(--m-banda-pie);
    padding-block: var(--m-esp-xl) var(--m-esp-md);
    padding-inline: var(--m-canal);
    border-top: 4px solid var(--m-banda-3);
    position: relative;
}

.main-footer-cnc::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 153, 255, 0.4), transparent);
}

.footer-grid {
    max-width: var(--m-carril);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 60px;
    margin-bottom: 60px;
}

.footer-col h4 {
    font-family: var(--m-titular);
    color: #ffffff;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 25px;
    position: relative;
    display: inline-block;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 30px;
    height: 2px;
    background: #0099ff;
}

.footer-brand p {
    font-family: var(--m-cuerpo);
    color: #8ab4d8;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-top: 20px;
    max-width: 300px;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    color: #6a8fb4;
    text-decoration: none;
    font-family: var(--m-cuerpo);
    font-size: 0.9rem;
    transition: all 0.3s;
    display: inline-block;
}

.footer-links a:hover {
    color: #0099ff;
    transform: translateX(5px);
}

.footer-socials {
    display: flex;
    gap: 15px;
}

/* 44×44: eran 40×40, y los seis iconos del pie viven pegados unos a
   otros. */
.social-link {
    width: 2.75rem;
    height: 2.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 153, 255, 0.2);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.1rem;
    transition: all 0.3s;
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}

.social-link:hover {
    background: rgba(0, 153, 255, 0.2);
    border-color: #0099ff;
    color: #0099ff;
    box-shadow: 0 0 15px rgba(0, 153, 255, 0.3);
    transform: translateY(-3px);
}

.footer-bottom {
    max-width: var(--m-carril);
    margin: 0 auto;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.copyright {
    font-family: var(--m-cuerpo);
    font-size: 0.75rem;
    color: var(--m-humo-tenue);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.legal-links {
    display: flex;
    gap: 25px;
}

/* El texto legal mide 12 px y la caja pulsable medía 30 px de alto.
   El mínimo se pone en la caja, no en la letra. */
.legal-links a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--m-humo-tenue);
    text-decoration: none;
    font-family: var(--m-cuerpo);
    font-size: 0.75rem;
    transition: color 0.3s;
}

.legal-links a:hover {
    color: #8ab4d8;
}

/* Responsive */


/* =========================================
   RESPONSIVE DESIGN - GLOBAL & NAVIGATION
   ========================================= */


/* =========================================
   RESPONSIVE DESIGN - EMPRESA A (METALCO)
   ========================================= */


/* =========================================
   RESPONSIVE DESIGN - EMPRESA B (MEDIEVAL)
   ========================================= */


/* RESPONSIVE DESIGN FOR NEW ELEMENTS (EMPRESA B FOOTER & GALLERY MODAL) */

/* Estilos para Eventos interactivos */
/* El marcador de fotografía pendiente —un rectángulo con trama diagonal y
   borde discontinuo— vivía aquí. Se retiró el 2026-08-19: la regla del
   cliente es que un hueco sin foto se oculta, porque un rectángulo rayado
   con un pie debajo se lee como imagen rota, no como dato pendiente. */

.galeria-animada:hover .galeria-track {
    animation-play-state: paused;
}
.cuadro-animado {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.cuadro-animado:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4), inset 0 0 10px rgba(0, 0, 0, 0.8);
    border-color: #d4af37;
}
/* ============================================================ */
/* REVEAL ON SCROLL ANIMATIONS                                  */
/* ============================================================ */
/* Responsive adjustments for animations */


/* Responsive Admin Panels & Large Tavern Signs & Fluid Mobile Experience */


/* Smaller mobile adjustments */


/* =========================================
   CLASES QUE SUSTITUYEN A LOS style= EN LÍNEA
   (paso 1 del saneamiento: mismo resultado, otra procedencia)
   ========================================= */
.logo-enlace {
    display: inline-flex;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.2s;
}

.enlace-boton {
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.oculto {
    display: none;
}

.rp-divider-fino {
    width: 50px;
    height: 2px;
    margin-top: 10px;
}

.footer-grid-flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
}

.footer-grid-centrado {
    max-width: var(--m-carril);
    margin: 0 auto;
}

.footer-col-ancha {
    flex: 1;
    min-width: 300px;
    max-width: 500px;
}

/* Los dos logotipos del pie llevan width=256 y height=256 en el HTML —los
   atributos que reservan el hueco y evitan el salto de maquetación— y aquí
   solo se les fijaba el alto. La caja seguía midiendo 256 px de ancho, así
   que object-fit: contain encajaba el cuadrado dentro y lo centraba: el
   logotipo quedaba unos 88 px a la derecha del canto de su columna, sin
   alinear con el texto de debajo. Con width: auto la caja toma la
   proporción de la imagen y el logotipo arranca donde arranca el texto. */
.footer-logo-a,
.footer-logo-b {
    width: auto;
    object-fit: contain;
    margin-bottom: 20px;
}

.footer-logo-a {
    height: 80px;
    filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.5));
}

.footer-logo-b {
    height: 100px;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.8));
}

.footer-texto {
    color: #bbb;
    line-height: 1.6;
    margin-bottom: 25px;
}

.footer-col-jefe {
    flex: 1;
    min-width: 300px;
    max-width: 450px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.tarjeta-jefe-a {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 25px;
    display: flex;
    gap: 20px;
    align-items: center;
    box-shadow: 0 4px 15px rgb(0 0 0 / 0.2);
}

.tarjeta-jefe-b {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(203, 178, 106, 0.2);
    border-radius: 12px;
    padding: 25px;
    display: flex;
    gap: 20px;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* Los retratos de las dos tarjetas de jefe. Siguen aquí porque el hueco
   está reservado en el HTML y basta con volver a poner el <img> el día que
   llegue la fotografía; hoy no hay ninguna, así que no hay nada que pintar.
   object-position lee el punto focal: un retrato recortado en redondo por
   el centro geométrico corta la frente o la barbilla. */
.retrato-jefe-a,
.retrato-jefe-b {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    object-fit: cover;
    object-position: var(--foco, 50% 50%);
}

.retrato-jefe-a {
    border: 2px solid var(--m-arco);
}

.retrato-jefe-b {
    border: 2px solid var(--m-oro);
}

.footer-col .jefe-titulo-a {
    margin: 0 0 8px 0;
    color: #fff;
    font-size: 1.15rem;
    letter-spacing: 0.5px;
}

.footer-col .jefe-titulo-b {
    margin: 0 0 8px 0;
    color: #cbb26a;
    font-size: 1.15rem;
    letter-spacing: 0.5px;
}

.jefe-texto {
    margin: 0;
    color: #aaa;
    font-size: 0.9rem;
    line-height: 1.5;
}

.jefe-nombre {
    color: #fff;
    font-weight: 800;
}

.copyright-columna {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.credito-linea {
    font-size: 0.75rem;
    color: #888;
    font-weight: normal;
}

.credito-enlace-a {
    color: #00bfff;
    text-decoration: none;
    font-weight: 800;
    transition: color 0.2s;
}

.credito-enlace-b {
    color: #ffaa00;
    text-decoration: none;
    font-weight: 800;
    transition: color 0.2s;
}

/* Iba al 55 % sobre un color ya tenue y se quedaba en 3:1 contra el pie;
   al 80 % seguía en 4,49:1, justo por debajo del mínimo. Sin opacidad da
   6,7:1, igual que los dos enlaces legales de al lado. Que sea el enlace
   de servicio se nota por dónde está y por lo que dice, no por estar
   medio borrado. */
.enlace-admin {
    opacity: 1;
}

.legal-links .enlace-admin-b {
    color: #cbb26a;
    text-decoration: none;
    opacity: 0.55;
}

.logo-wrap-izquierda {
    justify-content: flex-start;
    flex: 0.5;
}

.auth-area-b {
    width: auto;
    justify-content: flex-end;
    gap: 20px;
}

.contenido-b-sangria {
    padding-top: 40px;
}

.panel-eventos-columna {
    display: flex;
    flex-direction: column;
}

.regla-dorada {
    width: 50px;
    height: 3px;
    background: #cbb26a;
    margin-bottom: 30px;
}

.lista-contacto {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.item-contacto {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.icono-contacto {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(203, 178, 106, 0.1);
    border: 1px solid rgba(203, 178, 106, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #cbb26a;
    flex-shrink: 0;
}

.titulo-contacto {
    color: #cbb26a;
    font-size: 1.1rem;
    margin: 0 0 5px 0;
}

.texto-contacto {
    color: #ccc;
    margin: 0;
    font-size: 0.95rem;
}

.texto-contacto-alto {
    line-height: 1.5;
}

.footer-medieval {
    background: rgba(10, 10, 10, 0.95);
    /* El canal era el 5 % del ancho de la ventana: 38,4 px a 768, cuando
       las secciones de arriba abrían en 30,7. El pie es la última banda de
       la página y tiene que alinear con ellas, así que usa el mismo canal
       del sistema; el alto se queda como estaba. */
    padding-block: 60px;
    padding-inline: var(--m-canal);
    border-top: 1px solid #cbb26a44;
}

.footer-col .footer-titulo-b {
    color: #cbb26a;
    margin-bottom: 15px;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.socials-fila {
    display: flex;
    gap: 15px;
}

.social-link-medieval {
    color: #cbb26a;
    background: rgba(203, 178, 106, 0.1);
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(203, 178, 106, 0.2);
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-bottom-medieval {
    margin-top: 50px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 0.85rem;
    color: #888;
    max-width: var(--m-carril);
    margin-left: auto;
    margin-right: auto;
}

.legal-links-fila {
    display: flex;
    gap: 20px;
}

.legal-links .legal-enlace {
    color: #cbb26a;
    text-decoration: none;
    transition: 0.3s;
}

.espaciador-200 {
    width: 200px;
}

.rating-bar-row .bar-fill,
.rp-bar-fill {
    width: var(--relleno, 0%);
}

.conteo-num {
    width: 2em;
    text-align: right;
}

.rp-conteo {
    width: 30px;
    text-align: right;
}

/* ── Estados que antes eran atributos on* en el HTML ────────────────
   onmouseenter/onmouseleave escribían el mismo valor que estas reglas
   directamente en el atributo style. El resultado visual es idéntico;
   la diferencia es que ahora lo decide la hoja y no el documento.
   ─────────────────────────────────────────────────────────────────── */
.logo-enlace:hover {
    opacity: 0.75;
}

.credito-enlace-a:hover,
.credito-enlace-b:hover {
    color: #fff;
}


/* =====================================================================
   ADAPTACIÓN — TRES ANCHOS, AL FINAL DE LA HOJA

   Había once puntos de corte (1200, 1100, 1024, 992, 900, 800, 768, 650,
   600, 560 y 480) repartidos en veinticinco bloques a lo largo de todo
   el archivo, y como los bloques estaban a media hoja, las reglas de
   escritorio escritas más abajo les ganaban. De ahí salían las
   contradicciones y los 288 !important que las tapaban.

   Ahora son tres —1140, 960 y 640— en orden descendente y al final del
   archivo, que es el único sitio donde una media query gana sin pelear.
   No queda ni un !important en esta hoja.

   El corte de 1.280 que había aquí desapareció: solo encogía cuatro
   medidas —el ancho del cartel de taberna, su tablero y su letra, el
   aire del héroe y el relleno de la placa— y todas se expresan mejor
   con clamp(), que además borra el escalón que se veía al cruzar el
   punto. El hueco que dejó lo ocupa el corte de la cabecera, que sí
   necesitaba subir: a 960 llegaba tarde y la barra desbordaba.

   Seis contradicciones resueltas, y cómo:

   1. El pie a dos columnas. Una regla de @media 1100 escrita 2.800
      líneas por debajo de la de 900 devolvía las dos columnas justo en
      el ancho en que el autor pedía una. Ahora la columna única entra a
      960 y nada la deshace.
   2. La rejilla de galería que nunca llegaba a una columna: un
      `grid-template-columns: 1fr 1fr !important` a 600 ganaba al `1fr`
      de otro bloque de 600. Ya no hay bloque: .pg-grid es auto-fill y
      baja a una columna sola cuando la tarjeta no cabe.
   3. Los carteles de taberna a 180 px donde el cálculo era 145. Eran
      tres reglas peleando (768 → 180, 600 → 145, 600 otra vez → 180).
      Ahora es un clamp: 145 px en el móvil más estrecho y 180 en cuanto
      hay sitio, sin escalón.
   4. La tarjeta de servicio con `min-height: auto !important` a 600 y
      `min-height: 400px` a 1024 escrito después. Las tarjetas nuevas no
      declaran altura fija: la fija el contenido y un mínimo fluido.
   5. El revelado al hacer scroll: @media 600 lo anulaba con !important y
      @media 768, más abajo, lo volvía a poner. Ahora lo gobierna
      prefers-reduced-motion en sistema.css, que es quien debe.
   6. La navegación en dos comportamientos a la vez —barra deslizante a
      1024 y desplegable a 600—. Queda uno solo: desplegable bajo 1.140,
      que es donde deja de caber medido sobre el DOM.
   ===================================================================== */

/* ── El corte de la cabecera ──────────────────────────────────────────
   Por debajo de cierto ancho la navegación no cabe al lado del logotipo
   y se guarda en un panel desplegable. Dónde está ese ancho lo decide la
   barra más larga, que es la medieval: siete secciones, la pastilla de
   «Llave en mano», la de sesión y el conmutador.

   Con la barra del sitio original —logotipo de 75 px, o sea 464 de
   ancho, y conmutador de 250— ese punto se va muy arriba. Medido
   forzando la barra desplegada y comparando lo que pide con el hueco
   que hay, en pasos de 8 px: CNC entra con holgura desde 1.440 y
   medieval desde 1.520. A 1.280 le faltan 124 px a una y 177 a la otra.

   Así que el corte queda en 1.520. Entre 720 y 1.519 la barra enseña el
   logotipo y los controles, y las secciones viven en el panel. Es el
   precio de recuperar las medidas del original: un logotipo que ocupa
   casi un tercio de la barra deja fuera a la navegación mucho antes que
   uno de 44 px.

   El foco lo gobierna portada.js con `inert`: mientras el panel está
   cerrado, el tabulador no entra en él. portada.js no necesita este
   número —pregunta al CSS si el botón de menú se está pintando—, pero
   llave-en-mano.css sí: enseña el rótulo de la entrada destacada justo
   cuando la barra se pliega. Si uno se mueve, el otro también.
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 1519px) {
    .cabecera__hamburguesa {
        display: flex;
    }

    .cabecera__nav {
        position: absolute;
        inset-block-start: 100%;
        inset-inline: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--m-esp-2xs) var(--m-canal) var(--m-esp-sm);
        background: var(--m-barra-fondo);
        border-block-end: 2px solid color-mix(in srgb, var(--m-barra-azul) 45%, transparent);
        box-shadow: var(--m-sombra-media);
    }

    .cabecera__nav--abierta {
        display: flex;
    }

    /* Los enlaces del panel median 41 px de alto: por debajo de los 44
       que necesita un dedo. El mínimo es la altura, no el relleno, para
       que el texto no se despegue del subrayado. */
    .cabecera__nav a {
        display: flex;
        align-items: center;
        min-height: 2.75rem;
        padding-block: var(--m-esp-2xs);
        font-size: var(--m-txt-sm);
        border-block-end: var(--m-hilo) solid color-mix(in srgb, var(--m-barra-azul) 16%, transparent);
    }

    .cabecera__nav a:last-child {
        border-block-end: 0;
    }
}

/* ── La fila de tres tarjetas ────────────────────────────────────────
   Tres columnas es lo que pide el cliente, y con tres columnas cada
   tarjeta mide un tercio del carril: 396 px a 1.320 de carril, 240 a 800
   de ventana. Por debajo de 900 px el rótulo en versalitas ya no cabe en
   una línea y la fotografía se queda en una tira; ahí pasan a dos, y por
   debajo de 600 a una sola, que es como se ve un servicio en un teléfono.
   La junta de dos píxeles se conserva en los tres casos.
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
    .servicios {
        grid-template-columns: repeat(2, 1fr);
    }

    .servicio {
        min-height: clamp(17rem, 40vw, 24rem);
    }
}

@media (max-width: 599px) {
    .servicios {
        grid-template-columns: 1fr;
    }

    .servicio {
        min-height: clamp(15rem, 62vw, 22rem);
    }

    /* El marco interior a 25 px se come media tarjeta cuando la tarjeta
       mide 320 de ancho. */
    .servicio__cara--frente::after {
        inset: 14px;
    }
}

@media (max-width: 960px) {
    /* ── Héroe a una columna ── */
    .hero-a-layout {
        grid-template-columns: 1fr;
    }

    /* ── Dos columnas que dejan de caber ──
       `minmax(0, 1fr)` y no `1fr`: la pista tiene que poder encoger por
       debajo del contenido mínimo de los paneles, o a 320 px se salen por
       la derecha los dos píxeles que le sobran al formulario. */
    .lc-inner,
    .location-events-grid,
    .reviews-lower {
        grid-template-columns: minmax(0, 1fr);
    }

    .lc-header {
        text-align: center;
    }

    /* ── El pie a una columna: lo que pedía el autor ── */
    .footer-grid-flex {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--m-esp-md);
    }

    .footer-col-ancha,
    .footer-col-jefe {
        max-width: 100%;
        min-width: 0;
        width: 100%;
        justify-content: center;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: var(--m-esp-sm);
        text-align: center;
    }

    .footer-socials {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* ── Carteles de taberna en pantalla estrecha ──
       Seis columnas no caben: pasan a dos, que es lo único que reparte
       seis piezas en filas completas sin dejar huérfanas. La barra y las
       cadenas se retiran —una barra de la que cuelgan seis carteles en
       tres filas no significa nada— y quedan seis tableros iguales. */
    .tavern-frame-wrapper {
        /* Mismo motivo que en la fila de seis: `minmax(0, 1fr)` para que el
           cartel de texto más largo no se lleve unos píxeles de más. */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--m-esp-sm);
        min-height: 0;
        padding-block: var(--m-esp-lg) var(--m-esp-sm);
    }

    .tavern-frame-wrapper .hanging-sign-container {
        max-width: 100%;
    }

    .tavern-frame-wrapper .item-board {
        height: auto;
        aspect-ratio: 1;
        border-width: 8px;
        font-size: var(--m-txt-xs);
        letter-spacing: 0.08em;
        padding: var(--m-esp-2xs);
    }

    .iron-bar,
    .chain-segment .link-front,
    .chain-segment .link-side,
    .chain-terminal {
        display: none;
    }

    /* ── Galería expandida de la forja ── */
    .forge-expanded-header {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--m-esp-sm);
        text-align: center;
    }

    .espaciador-200 {
        display: none;
    }

    .forge-return-btn {
        position: static;
    }

    .forge-filter-nav {
        justify-content: center;
        gap: var(--m-esp-2xs);
    }

    .forge-filter-btn {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* ── La cabecera parte en dos filas ──────────────────────────────────
   El resto del tramo estrecho corta en 640, pero la barra no aguanta
   hasta ahí: entre 641 y 648 la fila medieval —siete secciones plegadas
   en el panel, más el conmutador, la pastilla de sesión y el botón de
   menú— se salía 3 px del canto. Así que la cabecera tiene su propio
   corte, 80 px antes.
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 719px) {
    /* La cabecera en el móvil, medida a 320 px. En una sola fila no
       entra: el logotipo más estrecho que sigue siendo legible mide 128,
       el conmutador 140, la pastilla de sesión 78 y el botón de menú 44,
       y eso ya son 390 en un canal de 304.

       La original resolvía lo mismo partiéndola en dos filas —logotipo
       centrado arriba, controles abajo— y eso es lo que se hace aquí,
       con rejilla en vez de con siete !important. Los 44 px de alto de
       los tres objetivos táctiles no se tocan. */
    .cabecera {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.5rem 0.625rem;
        padding: 0.625rem 0.75rem;
    }

    .cabecera__marca {
        grid-column: 1 / -1;
        justify-content: center;
    }

    .cabecera__marca img {
        width: clamp(9rem, 55vw, 15rem);
        height: auto;
    }

    /* El panel desplegable cuelga de la barra entera, no de una celda. */
    .cabecera__nav {
        padding-inline: var(--m-esp-sm);
    }

    .cabecera__acciones {
        grid-column: 1 / -1;
        justify-content: space-between;
        width: 100%;
        margin-inline-start: 0;
    }

    .cabecera__sesion {
        padding-inline: 0.625rem;
        font-size: 0.75rem;
    }

    /* «Administración» es un rótulo largo para una barra de teléfono, y la
       fila de acciones ya reparte sesión, panel y conmutador. Encoge igual
       que la pastilla de sesión y conserva los 44 px de alto. */
    .cabecera__panel {
        padding-inline: 0.5rem;
        font-size: 0.7rem;
    }

    /* El conmutador aprieta el padding, pero cada opción conserva sus
       44 px de alto. */
    .conmutador {
        padding: 2px;
    }

    .conmutador__pastilla {
        inset-block: 2px;
        inset-inline-start: 2px;
        width: calc(50% - 2px);
    }

    .conmutador__insignia {
        width: 1.75rem;
        height: 1.75rem;
    }

    .conmutador__insignia svg {
        width: 1rem;
        height: 1rem;
    }
}

@media (max-width: 640px) {
    /* La campaña de Instagram se salía por la derecha: el botón no
       encogía y la columna de texto no tenía permiso para hacerlo. */
    .cp-left {
        min-width: 0;
    }

    .cp-right {
        min-width: 0;
        max-width: 45%;
    }

    /* Por debajo de 640 el bloque se apila y el botón deja de competir por
       el ancho: ver la regla de .cp-inner en ese tramo. */

    .cp-ig-btn {
        padding: var(--m-esp-3xs) var(--m-esp-2xs);
        font-size: var(--m-txt-xs);
        gap: 6px;
        min-height: 2.75rem;
    }

    .cp-ig-note {
        font-size: 0.55rem;
        text-align: center;
    }

    /* El vídeo de transición a pantalla completa recortaba por los lados
       en vertical: mejor verlo entero sobre negro. */
    .video-transicion {
        object-fit: contain;
        background-color: #000;
    }

    /* Arsenal: dos banderines por fila, que es como se leen los cuatro
       de un vistazo en un teléfono. */
    .arsenal-grid {
        --m-col: 9.5rem;
        gap: var(--m-esp-sm);
    }

    .arsenal-card {
        min-height: 0;
        height: 7.5rem;
        padding: var(--m-esp-xs) var(--m-esp-2xs) var(--m-esp-sm);
    }

    .arsenal-card-title {
        font-size: var(--m-txt-sm);
        line-height: 1.25;
    }

    /* Ventajas: la tarjeta cuadrada pasa a fila de tabla, que cunde
       mucho más en 390 px. */
    .why-cards-grid {
        display: flex;
        flex-direction: column;
        gap: var(--m-esp-2xs);
    }

    .why-card {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 4px var(--m-esp-xs);
        padding: var(--m-esp-xs);
        text-align: left;
        border: var(--m-hilo) solid rgb(0 191 255 / 0.15);
        border-radius: var(--m-radio-sm);
        background: rgb(7 14 28 / 0.6);
    }

    .why-card-icon {
        grid-column: 1;
        grid-row: 1 / span 2;
        font-size: 1.8rem;
        margin: 0;
    }

    .why-card-line {
        display: none;
    }

    .why-card-title {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        font-size: var(--m-txt-base);
        text-align: left;
    }

    .why-card-desc {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
        max-width: 100%;
        font-size: var(--m-txt-xs);
        line-height: 1.35;
        text-align: left;
    }

    .why-cta-bar {
        flex-direction: column;
        text-align: center;
    }

    /* Campaña.

       Era una fila: emblema y titular a la izquierda, botón a la derecha y
       el párrafo escondido con display: none. En un teléfono de 390 px eso
       deja dos columnas de 150 px, ninguna centrada, y quien entra desde el
       móvil no llega a saber en qué consiste la campaña. Ahora se apila —
       emblema, titular, texto y botón, uno debajo de otro y centrados— que
       es lo que hace el resto de la portada en esta anchura. */
    .cp-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--m-esp-sm);
    }

    .cp-left {
        flex-direction: column;
        align-items: center;
        gap: var(--m-esp-2xs);
    }

    .cp-badge {
        font-size: 1.5rem;
        margin: 0;
    }

    .cp-text {
        align-items: center;
    }

    .cp-heading {
        font-size: var(--m-txt-md);
        line-height: 1.2;
        margin: 0;
    }

    .cp-eyebrow {
        font-size: var(--m-txt-xs);
        margin: 0;
    }

    .cp-right {
        align-items: center;
        flex-shrink: 0;
        max-width: 100%;
    }

    .pg-item .pg-caption {
        padding: var(--m-esp-2xs);
        transform: none;
    }

    /* Eventos medievales: cuadros más compactos en el carrusel. */
    .cuadro-animado {
        width: 11.9rem;
        height: 15.6rem;
        padding: var(--m-esp-xs) var(--m-esp-2xs);
    }

    .cuadro-title {
        font-size: var(--m-txt-base);
    }

    .cuadro-lugar,
    .cuadro-desc {
        font-size: var(--m-txt-xs);
    }

    /* La cota de malla deja de reaccionar al puntero: en táctil no hay
       puntero que seguir y el parallax solo cuesta batería. */
    [data-marca="medieval"]:where(.seccion-maestra) .chainmail-bg {
        transform: none;
        pointer-events: none;
        transition: none;
    }
}


/* =====================================================================
   El hueco vacío — cuando no hay nada que enseñar, se dice

   Tres sitios de la portada se rellenaban con contenido inventado cuando
   la base de datos venía vacía: cinco ferias escritas a mano en el
   carrusel de eventos, cinco «proyectos» que eran tres archivos repetidos
   en la galería industrial y diez piezas con nombre de fantasía en la
   galería de la forja. Los tres comparten ahora esta caja.

   Sigue la misma pauta que .estado en catalogo.css: la caja dice qué pasa
   y deja una salida, y cada marca la viste distinto —el taller con un
   filete recto, la forja con escuadras grabadas—.
   ===================================================================== */
.m-vacio {
  position: relative;
  max-width: 52ch;
  margin: var(--m-esp-lg) auto;
  padding: var(--m-esp-lg) var(--m-esp-md);
  border: 1px solid color-mix(in srgb, var(--m-acento) 22%, transparent);
  border-radius: var(--m-radio-md);
  background: color-mix(in srgb, var(--m-negro-2) 88%, transparent);
  color: var(--m-humo);
  font-family: var(--m-cuerpo);
  font-size: var(--m-txt-base);
  line-height: 1.6;
  text-align: center;
}

.m-vacio[hidden] {
  display: none;
}

.m-vacio p {
  margin: 0 auto;
  max-width: 46ch;
}

.m-vacio p + p {
  margin-block-start: var(--m-esp-2xs);
}

.m-vacio__titulo {
  font-family: var(--m-titular);
  font-size: var(--m-txt-md);
  color: var(--m-texto);
}

/* En el taller: sin esquinas redondeadas ni adorno. Un filete de acento a
   la izquierda y el texto alineado al canto, que es como se anota un
   plano. Menos brillo, más geometría. */
[data-marca="cnc"] .m-vacio {
  border-radius: 0;
  border-inline-start: 2px solid var(--m-arco);
  text-align: start;
}

[data-marca="cnc"] .m-vacio p {
  margin-inline: 0;
}

/* En la forja: la trama de grabado y las cuatro escuadras de una cartela
   antigua, dibujadas con degradados. Ni una imagen nueva. */
.m-vacio--medieval,
[data-marca="medieval"] .m-vacio {
  border-color: color-mix(in srgb, var(--m-oro) 24%, transparent);
  color: var(--m-papel);
  background:
    repeating-linear-gradient(135deg,
      transparent 0 5px,
      color-mix(in srgb, var(--m-oro) 6%, transparent) 5px 6px),
    color-mix(in srgb, var(--m-negro-2) 88%, transparent);
}

.m-vacio--medieval::before,
[data-marca="medieval"] .m-vacio::before {
  content: '';
  position: absolute;
  inset: var(--m-esp-2xs);
  pointer-events: none;
  opacity: 0.5;
  background:
    linear-gradient(90deg, var(--m-oro) 0 100%) 0 0 / 1.4rem 1px no-repeat,
    linear-gradient(180deg, var(--m-oro) 0 100%) 0 0 / 1px 1.4rem no-repeat,
    linear-gradient(90deg, var(--m-oro) 0 100%) 100% 0 / 1.4rem 1px no-repeat,
    linear-gradient(180deg, var(--m-oro) 0 100%) 100% 0 / 1px 1.4rem no-repeat,
    linear-gradient(90deg, var(--m-oro) 0 100%) 0 100% / 1.4rem 1px no-repeat,
    linear-gradient(180deg, var(--m-oro) 0 100%) 0 100% / 1px 1.4rem no-repeat,
    linear-gradient(90deg, var(--m-oro) 0 100%) 100% 100% / 1.4rem 1px no-repeat,
    linear-gradient(180deg, var(--m-oro) 0 100%) 100% 100% / 1px 1.4rem no-repeat;
}