/* ============================================================
   MAGRANIT — hoja de estilos única del sitio
   1. Base del sistema de diseño (tokens y componentes)
   2. Capa de marca Magranit (colores, tipografía, estados)
   3. Extras del export + estados :hover
   ============================================================ */

/* ---------- 1. BASE DEL SISTEMA DE DISEÑO ---------- */

/* Modernist — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */

:root {
    --color-bg: #f3f2f2;
    --color-surface: #eae9e9;
    --color-text: #201e1d;
    --color-accent: #ec3013;
    --color-accent-2: #e15b47;
    --color-divider: color-mix(in srgb, #201e1d 40%, transparent);
    /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
    --color-neutral-100: #f8f4f4;
    --color-neutral-200: #eae7e7;
    --color-neutral-300: #d7d3d3;
    --color-neutral-400: #bab6b6;
    --color-neutral-500: #9b9797;
    --color-neutral-600: #7d7979;
    --color-neutral-700: #605d5d;
    --color-neutral-800: #444141;
    --color-neutral-900: #2d2b2b;
    --color-accent-100: #fff2ef;
    --color-accent-200: #ffe0d9;
    --color-accent-300: #ffc4b8;
    --color-accent-400: #ff9783;
    --color-accent-500: #ff563c;
    --color-accent-600: #dd2b0f;
    --color-accent-700: #ae1800;
    --color-accent-800: #7c1405;
    --color-accent-900: #4d170e;
    --color-accent-2-100: #fff2ef;
    --color-accent-2-200: #ffe0da;
    --color-accent-2-300: #ffc4b9;
    --color-accent-2-400: #ff9784;
    --color-accent-2-500: #ef6853;
    --color-accent-2-600: #c94b39;
    --color-accent-2-700: #9e3526;
    --color-accent-2-800: #71261b;
    --color-accent-2-900: #471d16;
    --font-heading: "Archivo", system-ui, sans-serif;
    --font-heading-weight: 800;
    --font-body: "Archivo", system-ui, sans-serif;
    --space-1: 4.0px;
    --space-2: 8.0px;
    --space-3: 12.0px;
    --space-4: 16.0px;
    --space-6: 24.0px;
    --space-8: 32.0px;
    --radius-sm: 0px;
    --radius-md: 0px;
    --radius-lg: 0px;
    /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
    --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
    --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
    --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

body.magranit-site {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
}

body.magranit-site h1,body.magranit-site h2,body.magranit-site h3,body.magranit-site h4 {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
}

.magranit-site .grayscale {
    filter: grayscale(1) contrast(1.08);
}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

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

body.magranit-site {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;
}

body.magranit-site h1,body.magranit-site h2,body.magranit-site h3,body.magranit-site h4,body.magranit-site h5,body.magranit-site h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: 0 0 var(--space-2);
}

body.magranit-site h1 {
    font-size: 42px;
}

body.magranit-site h2 {
    font-size: 32px;
}

body.magranit-site h3 {
    font-size: 25px;
}

body.magranit-site h4 {
    font-size: 20px;
}

body.magranit-site h5 {
    font-size: 16px;
}

body.magranit-site h6 {
    font-size: 13px;
}

body.magranit-site h6 {
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.magranit-site p {
    margin: 0 0 var(--space-3);
}

body.magranit-site a {
    color: var(--color-accent);
    text-underline-offset: 3px;
}

body.magranit-site img {
    display: block;
    max-width: 100%;
}

body.magranit-site figure {
    margin: 0;
}

body.magranit-site figcaption {
    font-size: 11px;
    margin-top: var(--space-1);
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.magranit-site .text-muted {
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

::selection {
    background: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* — rules — */

.magranit-site .hr {
    height: 2px;
    border: 0;
    margin: var(--space-4) 0;
    background: var(--color-divider);
}

/* — buttons — */

.magranit-site .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 14px;
    line-height: 1.2;
    color: var(--color-text);
    /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
    background: transparent;
    border: 1px solid transparent;
    padding: var(--space-2) calc(var(--space-3) * 1.2);
    border-radius: var(--radius-md);
}

.magranit-site .btn svg {
    display: block;
}

.magranit-site .btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.magranit-site .btn-primary {
    background: var(--color-accent);
    color: var(--color-bg);
}

.magranit-site .btn-primary:hover {
    background: var(--color-accent-600);
}

.magranit-site .btn-primary:active {
    background: var(--color-accent-700);
}

.magranit-site .btn-secondary {
    border-color: var(--color-divider);
}

.magranit-site .btn-secondary:hover {
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
}

.magranit-site .btn-secondary:active {
    background: color-mix(in srgb, var(--color-text) 14%, transparent);
}

.magranit-site .btn-ghost {
    color: var(--color-accent);
    padding-inline: var(--space-1);
}

.magranit-site .btn-ghost:hover {
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.magranit-site .btn-ghost:active {
    background: color-mix(in srgb, var(--color-accent) 18%, transparent);
}

.magranit-site .btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
}

.magranit-site .btn-block {
    width: 100%;
    margin-top: var(--space-2);
    justify-content: flex-start;
    text-align: left;
}

/* — forms — */

.magranit-site .field > label {
    display: block;
    font-size: 12px;
    margin-bottom: 5px;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.magranit-site .input {
    width: 100%;
    min-height: 36px;
    padding: 6px 10px;
    font: inherit;
    font-size: 14px;
    color: var(--color-text);
    caret-color: var(--color-accent);
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
}

.magranit-site .input:hover {
    border-color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.magranit-site .input:focus-visible {
    border-color: var(--color-accent);
    outline-offset: 0;
}

textarea.input {
    min-height: 90px;
    resize: vertical;
}

.magranit-site .radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
}

.magranit-site .radio input, .magranit-site .seg-opt input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.magranit-site .radio .dot {
    width: 16px;
    height: 16px;
    flex: none;
    border-radius: 50%;
    border: 1.5px solid var(--color-divider);
}

.magranit-site .radio:hover .dot {
    border-color: var(--color-accent);
}

.magranit-site .radio input:checked + .dot {
    border-color: var(--color-accent);
    background: var(--color-accent);
    box-shadow: inset 0 0 0 4px var(--color-bg);
}

.magranit-site .radio input:focus-visible + .dot {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.magranit-site .seg {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
}

.magranit-site .seg-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    font-size: 13px;
    cursor: pointer;
}

.magranit-site .seg-opt + .seg-opt {
    border-left: 1px solid var(--color-divider);
}

.magranit-site .seg-opt:has(input:checked) {
    background: var(--color-accent);
    color: var(--color-bg);
}

.magranit-site .seg-opt:not(:has(input:checked)):hover {
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
}

.magranit-site .seg-opt:has(input:focus-visible) {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

/* — cards — */

.magranit-site .card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.magranit-site .card-kicker {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.magranit-site .card-title {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 17px;
    line-height: 1.2;
}

.magranit-site .card-body {
    margin: 0;
    font-size: 13px;
    opacity: 0.8;
    flex: 1;
}

.magranit-site .card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: color-mix(in srgb, var(--color-text) 50%, transparent);
}

.magranit-site .elev-sm {
    box-shadow: var(--shadow-sm);
}

.magranit-site .elev-md {
    box-shadow: var(--shadow-md);
}

.magranit-site .elev-lg {
    box-shadow: var(--shadow-lg);
}

/* — tags — */

.magranit-site .tag {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    letter-spacing: 0.02em;
    padding: 3px 10px;
    border-radius: calc(var(--radius-md) * 0.75);
}

.magranit-site .tag-accent {
    background: var(--color-accent-100);
    color: var(--color-accent-800);
}

.magranit-site .tag-accent-2 {
    background: var(--color-accent-2-100);
    color: var(--color-accent-2-800);
}

.magranit-site .tag-neutral {
    background: var(--color-neutral-100);
    color: var(--color-neutral-800);
}

.magranit-site .tag-outline {
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
}

/* — navigation — */

.magranit-site .nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 2px solid var(--color-divider);
}

.magranit-site .nav-brand {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 18px;
    margin-right: auto;
}

.magranit-site .nav a {
    color: inherit;
    text-decoration: none;
    font-size: 14px;
}

.magranit-site .nav a:hover, .magranit-site .nav a[aria-current="page"] {
    color: var(--color-accent);
}

/* — tables — */

.magranit-site .table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.magranit-site .table th {
    text-align: left;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
    padding: var(--space-2);
    border-bottom: 2px solid var(--color-divider);
}

.magranit-site .table td {
    padding: var(--space-2);
    border-bottom: 1px solid var(--color-divider);
}

.magranit-site .table tbody tr:hover {
    background: color-mix(in srgb, var(--color-text) 4%, transparent);
}

/* — dialog — */

.magranit-site .dialog-backdrop {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--space-4);
    background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}

.magranit-site .dialog {
    width: min(440px, 100%);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.magranit-site .dialog-title {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: 20px;
}

.magranit-site .dialog-body {
    font-size: 14px;
    opacity: 0.85;
}

.magranit-site .dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

/* ---------- 2. CAPA DE MARCA MAGRANIT ---------- */

/* MAGRANIT — capa de marca sobre el sistema Modernist.
   Solo lo que no puede ir inline: tokens, estados, media queries y keyframes. */

:root {
    /* Paleta construida sobre los colores reales del logo */
    --color-bg: #f4f2ee;
    --color-surface: #eae6df;
    --color-text: #211f1d;
    --color-accent: #a81e2e;
    --color-accent-600: #8e1725;
    --color-accent-700: #74121d;
    --color-accent-100: #f8eeef;
    --color-accent-800: #5d0f18;
    --color-divider: rgba(33,31,29,.22);
    --mg-blue: #1b5aa0;
    --mg-gold: #e0a80c;
    --mg-grey: #7a7a7a;
    --mg-ink: #1c1a19;
    --mg-body: #4a4642;
    --font-heading: "Playfair Display",Georgia,serif;
    --font-heading-weight: 600;
    --font-body: "Archivo",system-ui,sans-serif;
    --radius-md: 3px;
    --radius-sm: 3px;
    --radius-lg: 3px;
    /* Escala tipográfica única — h1 › h2 › h3 › h4 */
    --mg-h1: clamp(40px,5.6vw,80px);
    --mg-h2: clamp(30px,3.9vw,52px);
    --mg-h3: clamp(22px,2.1vw,28px);
    --mg-h4: clamp(16px,1.35vw,19px);
}

body.magranit-site {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -.02em;
}

body.magranit-site h1 {
    font-size: var(--mg-h1);
    line-height: 1.02;
    letter-spacing: -.028em;
}

body.magranit-site h2 {
    font-size: var(--mg-h2);
    line-height: 1.06;
    letter-spacing: -.024em;
}

body.magranit-site h3 {
    font-size: var(--mg-h3);
    line-height: 1.18;
}

body.magranit-site h4 {
    font-size: var(--mg-h4);
    line-height: 1.22;
}

body.magranit-site a {
    color: var(--color-accent);
    text-underline-offset: 3px;
}

body.magranit-site a:hover {
    color: var(--color-accent-600);
}

body.magranit-site img {
    display: block;
    max-width: 100%;
}

/* — navegación — */

.mg-navlink[aria-current="page"] {
    color: var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
}

.mg-navlink:hover {
    color: var(--color-accent);
}

/* — estados que no pueden ir inline — */

.mg-filter {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-divider);
}

.mg-filter:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.mg-filter[aria-current="true"] {
    background: var(--color-accent);
    color: #f4f2ee;
    border-color: var(--color-accent);
}

.mg-tile img,.mg-tile .mg-ph {
    transition: transform .7s cubic-bezier(.22,1,.36,1),filter .5s;
}

.mg-tile:hover img,.mg-tile:hover .mg-ph {
    transform: scale(1.05);
}

.mg-tile:hover .mg-glass {
    background: rgba(24,21,20,.4);
    transform: translateY(-3px);
    border-color: rgba(255,255,255,.3);
}

.mg-tile:hover .mg-proj-go {
    opacity: 1;
    transform: none;
}

.mg-card .mg-swatch {
    transition: transform .8s cubic-bezier(.22,1,.36,1);
}

.mg-card:hover .mg-swatch {
    transform: scale(1.06);
}

.mg-card:hover .mg-svc-rule {
    width: 60px;
}

.mg-row:hover .mg-row-bar {
    width: 100%;
}

.mg-svc:hover .mg-svc-rule {
    width: 64px;
}

.mg-svc:hover .mg-svc-arrow {
    transform: translateX(6px);
}

.mg-step:hover .mg-step-num {
    background: var(--color-accent);
    color: #f7f5f1;
    border-color: var(--color-accent);
}

.mg-lead::first-letter {
    float: left;
    font-family: "Playfair Display",Georgia,serif;
    font-weight: 500;
    font-size: 4.4em;
    line-height: .8;
    color: #a81e2e;
    margin: 6px 12px 0 0;
}

/* — movimiento — */

@keyframes mgFade {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

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

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

.mg-track {
    animation: mgMarquee 38s linear infinite;
}

.mg-marquee:hover .mg-track {
    animation-play-state: paused;
}

@media (prefers-reduced-motion:reduce) {
    .mg-track {
        animation: none;
    }
}

/* Logos del carrusel de marcas — altura visual uniforme.
   width:auto respeta el ratio de cada PNG, así Laminam sale ancho y
   Neolith angosto, pero todos ocupan el mismo alto y se ven del mismo porte. */

.mg-brand {
    display: block;
    flex: none;
    height: 36px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: .7;
    transition: opacity .35s;
}

.mg-brand:hover {
    opacity: 1;
}

@media (max-width:560px) {
    .mg-brand {
        height: 30px;
    }
}

/* — responsive — */

@media (max-width:1000px) {
    .mg-desk {
        display: none !important;
    }

    .mg-burger {
        display: inline-flex !important;
    }
}

@media (min-width:1001px) {
    .mg-panel {
        display: none !important;
    }
}

@media (max-width:820px) {
    .mg-split {
        grid-template-columns: 1fr !important;
    }

    .mg-split-media {
        min-height: 58vw !important;
    }

    .mg-2c {
        grid-template-columns: 1fr !important;
    }

    .mg-utility {
        display: none !important;
    }

    .mg-band {
        grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    }

    .mg-band>*:nth-child(3) {
        grid-column: 1/-1;
    }
}

@media (max-width:820px) {
    .mg-3up {
        grid-template-columns: minmax(0,1fr) !important;
    }
}

@media (max-width:640px) {
    .mg-form-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width:560px) {
    .mg-band {
        grid-template-columns: minmax(0,1fr) !important;
    }

    .mg-band>* {
        height: clamp(200px,52vw,300px) !important;
    }
}

/* ============================================================
   MAGRANIT — extras del export estático
   ============================================================ */

/* Huecos de imagen pendientes de la sesión de fotos.
   Sustituir el div por <img> o por el widget Imagen de Elementor. */

.mg-imghole {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    text-align: center;
    background: repeating-linear-gradient(45deg,rgba(33,31,29,.045) 0 10px,transparent 10px 20px),
    var(--color-surface);
    border: 1px dashed var(--color-divider);
}

.mg-imghole span {
    font: 500 12px/1.5 var(--font-body);
    letter-spacing: .02em;
    color: var(--mg-grey);
    max-width: 30ch;
}

/* Panel de menú móvil (lo abre js/magranit.js) */

.mg-panel[hidden] {
    display: none !important;
}

/* Foco visible de teclado en todo el sitio */

a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,label:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ---- estados :hover extraídos del diseño ---- */

.mgh-1:hover {
    color: #f4f2ee !important;
}

.mgh-2:hover {
    color: #f4f2ee !important;
}

.mgh-3:hover {
    color: #f4f2ee !important;
}

.mgh-4:hover {
    color: #f4f2ee !important;
}

.mgh-5:hover {
    color: #f4f2ee !important;
}

.mgh-6:hover {
    color: #f4f2ee !important;
}

.mgh-7:hover {
    color: #f4f2ee !important;
}

.mgh-8:hover {
    color: #f4f2ee !important;
}

.mgh-9:hover {
    color: #f4f2ee !important;
}

.mgh-10:hover {
    color: #f4f2ee !important;
}

.mgh-11:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(168,30,46,.42) !important;
    filter: saturate(1.15) brightness(1.08) !important;
}

.mgh-12:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(24,119,242,.42) !important;
    filter: saturate(1.15) brightness(1.08) !important;
}

.mgh-13:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(37,211,102,.42) !important;
    filter: saturate(1.15) brightness(1.08) !important;
}

.mgh-14:hover {
    color: #f4f2ee !important;
}

.mgh-15:hover {
    color: #f4f2ee !important;
}

.mgh-16:hover {
    color: #f4f2ee !important;
}

.mgh-17:hover {
    background: var(--color-accent-600) !important;
}

.mgh-18:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 16px 38px rgba(45,43,43,.14) !important;
}

.mgh-19:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 16px 38px rgba(45,43,43,.14) !important;
}

.mgh-20:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 16px 38px rgba(45,43,43,.14) !important;
}

.mgh-21:hover {
    border-color: var(--color-accent) !important;
}

.mgh-22:hover {
    border-color: var(--color-accent) !important;
}

.mgh-23:hover {
    border-color: var(--color-accent) !important;
}

.mgh-24:hover {
    transform: translateY(-7px) !important;
    box-shadow: 0 18px 42px rgba(45,43,43,.18) !important;
    border-color: rgba(168,30,46,.4) !important;
}

.mgh-25:hover {
    transform: translateY(-7px) !important;
    box-shadow: 0 18px 42px rgba(45,43,43,.18) !important;
    border-color: rgba(168,30,46,.4) !important;
}

.mgh-26:hover {
    transform: translateY(-7px) !important;
    box-shadow: 0 18px 42px rgba(45,43,43,.18) !important;
    border-color: rgba(168,30,46,.4) !important;
}

.mgh-27:hover {
    transform: translateY(-7px) !important;
    box-shadow: 0 18px 42px rgba(45,43,43,.18) !important;
    border-color: rgba(168,30,46,.4) !important;
}

.mgh-28:hover {
    opacity: 1 !important;
}

.mgh-29:hover {
    opacity: 1 !important;
}

.mgh-30:hover {
    opacity: 1 !important;
}

.mgh-31:hover {
    opacity: 1 !important;
}

.mgh-32:hover {
    opacity: 1 !important;
}

.mgh-33:hover {
    opacity: 1 !important;
}

.mgh-34:hover {
    opacity: 1 !important;
}

.mgh-35:hover {
    opacity: 1 !important;
}

.mgh-36:hover {
    opacity: 1 !important;
}

.mgh-37:hover {
    opacity: 1 !important;
}

.mgh-38:hover {
    opacity: 1 !important;
}

.mgh-39:hover {
    opacity: 1 !important;
}

.mgh-40:hover {
    opacity: 1 !important;
}

.mgh-41:hover {
    opacity: 1 !important;
}

.mgh-42:hover {
    opacity: 1 !important;
}

.mgh-43:hover {
    opacity: 1 !important;
}

.mgh-44:hover {
    opacity: 1 !important;
}

.mgh-45:hover {
    opacity: 1 !important;
}

.mgh-46:hover {
    border-color: var(--color-accent) !important;
}

.mgh-47:hover {
    background: #fff !important;
}

.mgh-48:hover {
    background: rgba(247,245,241,.12) !important;
}

.mgh-49:hover {
    color: var(--color-accent) !important;
}

.mgh-50:hover {
    color: var(--color-accent) !important;
}

.mgh-51:hover {
    border-color: var(--color-accent) !important;
}

.mgh-52:hover {
    background: var(--color-accent-600) !important;
}

.mgh-53:hover {
    background: var(--color-accent-600) !important;
}

.mgh-54:hover {
    color: var(--mg-gold) !important;
}

.mgh-55:hover {
    background: #fff !important;
}

.mgh-56:hover {
    background: rgba(247,245,241,.12) !important;
}

.mgh-57:hover {
    background: var(--color-accent-600) !important;
}

.mgh-58:hover {
    color: var(--color-accent) !important;
}

.mgh-59:hover {
    border-color: var(--color-accent) !important;
    color: var(--color-accent) !important;
}

.mgh-60:hover {
    border-color: var(--color-accent) !important;
    color: var(--color-accent) !important;
}

.mgh-61:hover {
    border-color: var(--color-accent) !important;
    color: var(--color-accent) !important;
}

.mgh-62:hover {
    background: #fff !important;
}

.mgh-63:hover {
    background: rgba(247,245,241,.12) !important;
}

.mgh-64:hover {
    background: var(--color-accent-600) !important;
}

.mgh-65:hover {
    color: var(--color-accent) !important;
}

.mgh-66:hover {
    opacity: 1 !important;
}

.mgh-67:hover {
    opacity: 1 !important;
}

.mgh-68:hover {
    opacity: 1 !important;
}

.mgh-69:hover {
    opacity: 1 !important;
}

.mgh-70:hover {
    opacity: 1 !important;
}

.mgh-71:hover {
    opacity: 1 !important;
}

.mgh-72:hover {
    opacity: 1 !important;
}

.mgh-73:hover {
    opacity: 1 !important;
}

.mgh-74:hover {
    opacity: 1 !important;
}

.mgh-75:hover {
    opacity: 1 !important;
}

.mgh-76:hover {
    opacity: 1 !important;
}

.mgh-77:hover {
    opacity: 1 !important;
}

.mgh-78:hover {
    opacity: 1 !important;
}

.mgh-79:hover {
    opacity: 1 !important;
}

.mgh-80:hover {
    opacity: 1 !important;
}

.mgh-81:hover {
    opacity: 1 !important;
}

.mgh-82:hover {
    opacity: 1 !important;
}

.mgh-83:hover {
    opacity: 1 !important;
}

.mgh-84:hover {
    background: #fff !important;
}

.mgh-85:hover {
    background: rgba(247,245,241,.12) !important;
}

.mgh-86:hover {
    background: var(--color-accent-600) !important;
}

.mgh-87:hover {
    color: var(--color-accent) !important;
}

.mgh-88:hover {
    background: #fff !important;
}

.mgh-89:hover {
    background: rgba(247,245,241,.12) !important;
}

.mgh-90:hover {
    background: var(--color-accent-600) !important;
}

.mgh-91:hover {
    color: var(--color-accent) !important;
}

.mgh-92:hover {
    color: var(--color-accent) !important;
}

.mgh-93:hover {
    color: var(--color-accent) !important;
}

.mgh-94:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(37,211,102,.42) !important;
}

.mgh-95:hover {
    border-color: var(--color-accent) !important;
}

.mgh-96:hover {
    background: var(--color-accent-600) !important;
}

.mgh-97:hover {
    background: var(--color-accent-600) !important;
}

/* Integración WordPress + Elementor */

body.magranit-site {
    overflow-x: hidden;
}

body.magranit-site .elementor-location-header,
body.magranit-site .elementor-location-footer,
body.magranit-site .elementor-section-wrap,
body.magranit-site .elementor-widget-wrap,
body.magranit-site .elementor-widget,
body.magranit-site .elementor-widget-container {
    min-width: 0;
}

body.magranit-site .elementor-widget-magranit-site-header,
body.magranit-site .elementor-widget-magranit-site-footer,
body.magranit-site [class*="elementor-widget-magranit-"] {
    margin: 0 !important;
}

body.magranit-site [class*="elementor-widget-magranit-"]>.elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
}

body.magranit-site .magranit-section {
    width: 100%;
    position: relative;
}

body.magranit-site .magranit-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}

body.magranit-menu-open {
    overflow: hidden;
}

.magranit-form-status {
    display: none;
    margin-top: 14px;
    padding: 13px 16px;
    border: 1px solid var(--color-divider);
    font: 500 13px/1.5 var(--font-body);
}

.magranit-form-status.is-visible {
    display: block;
}

.magranit-form-status.is-success {
    border-color: #238636;
    color: #176b29;
    background: #edf8ef;
}

.magranit-form-status.is-error {
    border-color: var(--color-accent);
    color: var(--color-accent-700);
    background: var(--color-accent-100);
}