:root {
    --negro: #111111;
    --negro-suave: #1b1b1b;
    --blanco: #ffffff;
    --fondo-claro: #f7f4ef;
    --texto: #1d1d1d;
    --texto-suave: #6c6963;
    --dorado: #b59658;
    --borde: #ded9d0;
}

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--texto);
}

a {
    color: inherit;
    text-decoration: none;
}

/* =========================
   PÁGINA PÚBLICA
========================= */

.pagina-publica {
    background: var(--fondo-claro);
}

.encabezado-publico {
    position: sticky;
    top: 0;
    z-index: 10;
    width: 100%;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--borde);
}

.contenedor {
    width: min(1180px, 92%);
    min-height: 78px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.nombre-marca {
    color: var(--dorado);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 5px;
    white-space: nowrap;
}

.menu-publico {
    display: flex;
    align-items: center;
    gap: 28px;
}

.menu-publico a {
    position: relative;
    padding: 8px 0;
    color: var(--texto);
    font-size: 14px;
}

.menu-publico a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background: var(--dorado);
    transition: width 0.25s ease;
}

.menu-publico a:hover::after {
    width: 100%;
}

.portada-publica {
    min-height: calc(100vh - 78px);
    display: grid;
    place-items: center;
    padding: 70px 24px;
    background:
        linear-gradient(
            rgba(247, 244, 239, 0.88),
            rgba(247, 244, 239, 0.96)
        );
}

.contenido-portada {
    width: min(760px, 100%);
    text-align: center;
}

.subtitulo {
    margin-bottom: 18px;
    color: var(--dorado);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.contenido-portada h1 {
    margin-bottom: 22px;
    color: var(--negro);
    font-size: clamp(42px, 7vw, 82px);
    line-height: 1.02;
}

.descripcion-portada {
    width: min(580px, 100%);
    margin: 0 auto 34px;
    color: var(--texto-suave);
    font-size: 17px;
    line-height: 1.7;
}

.boton-principal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 25px;
    border: none;
    border-radius: 7px;
    background: var(--negro);
    color: var(--blanco);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.boton-principal:hover {
    transform: translateY(-2px);
    background: var(--dorado);
}

.pie-publico {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 5%;
    background: var(--negro);
    color: #d8d8d8;
    font-size: 13px;
}

/* =========================
   PÁGINA ADMINISTRATIVA
========================= */

.pagina-admin {
    display: grid;
    place-items: center;
    padding: 28px;
    background:
        radial-gradient(
            circle at top,
            #28251f 0%,
            var(--negro) 55%
        );
}

.contenedor-login {
    width: min(470px, 100%);
}

.tarjeta-login {
    padding: 48px 42px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    background: var(--blanco);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.tarjeta-login .nombre-marca {
    margin-bottom: 20px;
    text-align: center;
}

.tarjeta-login h1 {
    margin-bottom: 14px;
    color: var(--negro);
    font-size: 34px;
    text-align: center;
}

.descripcion-login {
    margin-bottom: 32px;
    color: var(--texto-suave);
    line-height: 1.6;
    text-align: center;
}

.formulario-login {
    display: grid;
    gap: 20px;
}

.campo-formulario {
    display: grid;
    gap: 8px;
}

.campo-formulario label {
    font-size: 13px;
    font-weight: 700;
}

.campo-formulario input {
    width: 100%;
    height: 48px;
    padding: 0 15px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: #fbfaf8;
    color: var(--texto);
    font-size: 15px;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.campo-formulario input:focus {
    border-color: var(--dorado);
    box-shadow: 0 0 0 3px rgba(181, 150, 88, 0.14);
}

.formulario-login .boton-principal {
    width: 100%;
    margin-top: 6px;
}

.volver-catalogo {
    display: block;
    margin-top: 24px;
    color: var(--texto-suave);
    font-size: 13px;
    text-align: center;
}

.volver-catalogo:hover {
    color: var(--dorado);
}

/* =========================
   ADAPTACIÓN A CELULAR
========================= */

@media (max-width: 760px) {
    .contenedor {
        min-height: auto;
        padding: 20px 0;
        flex-direction: column;
    }

    .menu-publico {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 14px 20px;
    }

    .portada-publica {
        min-height: 72vh;
    }

    .pie-publico {
        flex-direction: column;
        text-align: center;
    }

    .tarjeta-login {
        padding: 38px 25px;
    }
}

/* =========================================
   PANTALLA DE CARGA ADMINISTRATIVA
========================================= */

.pagina-cargando-admin {
    --carga-verde-profundo: #061812;
    --carga-verde: #0c2c21;
    --carga-verde-claro: #174c39;
    --carga-dorado: #c8a45c;
    --carga-dorado-claro: #efd99b;
    --carga-carbon: #0c100e;
    --carga-texto: #f8f3e8;
    --carga-texto-suave: #aab8b0;

    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: grid;
    place-items: center;
    padding: 30px;
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(31, 94, 70, 0.35),
            transparent 34%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(200, 164, 92, 0.09),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            var(--carga-verde-profundo) 0%,
            var(--carga-carbon) 56%,
            #111412 100%
        );
    color: var(--carga-texto);
}

.pagina-cargando-admin::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.12;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );
    background-size: 48px 48px;
    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 75%
        );
}

.ambiente-carga {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.orbe-carga {
    position: absolute;
    border-radius: 50%;
    filter: blur(18px);
    opacity: 0.35;
}

.orbe-uno {
    top: -180px;
    right: -120px;
    width: 430px;
    height: 430px;
    background: rgba(27, 91, 67, 0.55);
    animation: flotar-orbe 9s ease-in-out infinite;
}

.orbe-dos {
    bottom: -190px;
    left: -120px;
    width: 380px;
    height: 380px;
    background: rgba(175, 132, 54, 0.17);
    animation:
        flotar-orbe 11s ease-in-out infinite reverse;
}

.linea-ambiental {
    position: absolute;
    width: 1px;
    height: 55vh;
    background:
        linear-gradient(
            transparent,
            rgba(214, 179, 103, 0.3),
            transparent
        );
    transform: rotate(32deg);
}

.linea-uno {
    top: -80px;
    left: 24%;
}

.linea-dos {
    right: 19%;
    bottom: -70px;
}

.contenedor-carga {
    position: relative;
    z-index: 2;
    width: min(540px, 100%);
}

.panel-carga {
    position: relative;
    overflow: hidden;
    padding: 48px 48px 38px;
    border: 1px solid rgba(220, 185, 108, 0.24);
    border-radius: 30px;
    background:
        linear-gradient(
            145deg,
            rgba(22, 45, 36, 0.88),
            rgba(12, 18, 15, 0.92)
        );
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(22px);
    text-align: center;
}

.panel-carga::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18%;
    width: 64%;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--carga-dorado-claro),
            transparent
        );
    opacity: 0.75;
}

.panel-carga::after {
    content: "";
    position: absolute;
    inset: -80%;
    pointer-events: none;
    background:
        linear-gradient(
            115deg,
            transparent 43%,
            rgba(255, 244, 204, 0.07) 49%,
            transparent 55%
        );
    transform: translateX(-35%);
    animation: reflejo-panel 4.5s ease-in-out infinite;
}

.marca-carga {
    position: relative;
    z-index: 2;
    color: var(--carga-dorado);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 7px;
}

.escena-diamante {
    position: relative;
    z-index: 2;
    width: 210px;
    height: 190px;
    margin: 20px auto 10px;
    display: grid;
    place-items: center;
}

.halo-diamante {
    position: absolute;
    width: 155px;
    height: 155px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(236, 203, 125, 0.28),
            rgba(200, 164, 92, 0.06) 50%,
            transparent 72%
        );
    filter: blur(3px);
    animation: respirar-halo 2.4s ease-in-out infinite;
}

.diamante-svg {
    position: relative;
    z-index: 2;
    width: 180px;
    height: auto;
    overflow: visible;
    filter:
        drop-shadow(
            0 16px 26px rgba(0, 0, 0, 0.4)
        );
    animation: flotar-diamante 2.7s ease-in-out infinite;
}

.destello {
    position: absolute;
    z-index: 3;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff5c8;
    box-shadow:
        0 0 8px #fff0b0,
        0 0 18px rgba(225, 186, 97, 0.9);
}

.destello::before,
.destello::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #fff6cf;
    transform: translate(-50%, -50%);
}

.destello::before {
    width: 24px;
    height: 1px;
}

.destello::after {
    width: 1px;
    height: 24px;
}

.destello-uno {
    top: 36px;
    right: 31px;
    animation: parpadear-destello 2s ease-in-out infinite;
}

.destello-dos {
    bottom: 44px;
    left: 28px;
    transform: scale(0.65);
    animation:
        parpadear-destello 2.5s ease-in-out
        0.7s infinite;
}

.destello-tres {
    top: 75px;
    left: 19px;
    transform: scale(0.42);
    animation:
        parpadear-destello 2.2s ease-in-out
        1.1s infinite;
}

.sello-carga {
    position: relative;
    z-index: 2;
    margin-bottom: 10px;
    color: var(--carga-dorado);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
}

.panel-carga h1 {
    position: relative;
    z-index: 2;
    margin-bottom: 11px;
    color: var(--carga-texto);
    font-size: clamp(30px, 5vw, 42px);
    line-height: 1.08;
}

.mensaje-carga {
    position: relative;
    z-index: 2;
    min-height: 24px;
    margin-bottom: 30px;
    color: var(--carga-texto-suave);
    font-size: 14px;
    letter-spacing: 0.2px;
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.15s ease,
        transform 0.15s ease;
}

.mensaje-carga.cambiando {
    opacity: 0;
    transform: translateY(4px);
}

.progreso-carga {
    position: relative;
    z-index: 2;
}

.pista-carga {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.45);
}

.pista-carga::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.12),
            transparent
        );
    animation: brillo-pista 1.8s linear infinite;
}

.barra-carga {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #8c6427,
            var(--carga-dorado),
            var(--carga-dorado-claro)
        );
    box-shadow:
        0 0 14px rgba(216, 176, 91, 0.5);
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

.informacion-carga {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 11px;
    color: #8e9b94;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.informacion-carga strong {
    color: var(--carga-dorado-claro);
    font-variant-numeric: tabular-nums;
}

.pie-carga {
    position: relative;
    z-index: 2;
    margin-top: 30px;
    color: #74817a;
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.sin-javascript {
    position: fixed;
    z-index: 20;
    right: 20px;
    bottom: 20px;
    padding: 18px;
    border: 1px solid rgba(200, 164, 92, 0.4);
    border-radius: 14px;
    background: #101713;
    color: var(--carga-texto);
}

.sin-javascript a {
    display: inline-block;
    margin-top: 8px;
    color: var(--carga-dorado-claro);
}

.pagina-cargando-admin.carga-finalizada
.panel-carga {
    animation:
        salida-panel 0.48s ease forwards;
}

@keyframes flotar-diamante {
    0%,
    100% {
        transform: translateY(0) rotate(-0.5deg);
    }

    50% {
        transform: translateY(-9px) rotate(0.5deg);
    }
}

@keyframes respirar-halo {
    0%,
    100% {
        opacity: 0.55;
        transform: scale(0.92);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes parpadear-destello {
    0%,
    100% {
        opacity: 0.18;
    }

    45% {
        opacity: 1;
    }

    65% {
        opacity: 0.38;
    }
}

@keyframes reflejo-panel {
    0%,
    25% {
        transform: translateX(-35%);
    }

    70%,
    100% {
        transform: translateX(35%);
    }
}

@keyframes brillo-pista {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }
}

@keyframes flotar-orbe {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(20px, -22px, 0);
    }
}

@keyframes salida-panel {
    to {
        opacity: 0;
        transform: translateY(-10px) scale(0.975);
        filter: blur(3px);
    }
}

@media (max-width: 600px) {
    .pagina-cargando-admin {
        padding: 18px;
    }

    .panel-carga {
        padding: 38px 24px 30px;
        border-radius: 24px;
    }

    .escena-diamante {
        width: 180px;
        height: 170px;
    }

    .diamante-svg {
        width: 155px;
    }

    .marca-carga {
        letter-spacing: 5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pagina-cargando-admin *,
    .pagina-cargando-admin *::before,
    .pagina-cargando-admin *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================
   CATÁLOGO PÚBLICO
========================================= */

.seccion-catalogo {
    padding: 95px 0;
    background: var(--fondo-claro);
}

.contenedor-catalogo {
    width: min(1180px, 92%);
    margin: 0 auto;
}

.cabecera-catalogo {
    max-width: 680px;
    margin-bottom: 42px;
}

.etiqueta-catalogo {
    margin-bottom: 12px;
    color: var(--dorado);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.cabecera-catalogo h2 {
    margin-bottom: 14px;
    color: var(--negro);
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.08;
}

.descripcion-catalogo {
    color: var(--texto-suave);
    font-size: 16px;
    line-height: 1.7;
}


/* Categorías */

.lista-categorias-publicas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 38px;
}

.enlace-categoria-publica {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;
    padding: 0 17px;

    border: 1px solid var(--borde);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.7);
    color: var(--texto-suave);

    font-size: 13px;
    font-weight: 700;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.enlace-categoria-publica:hover {
    transform: translateY(-2px);

    border-color: var(--dorado);
    background: var(--blanco);
    color: var(--dorado);
}


/* Rejilla de productos */

.rejilla-productos-publicos {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(250px, 1fr));
    gap: 26px;
}

.tarjeta-producto-publico {
    overflow: hidden;

    border: 1px solid var(--borde);
    border-radius: 18px;

    background: var(--blanco);

    box-shadow:
        0 16px 42px rgba(20, 18, 14, 0.07);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.tarjeta-producto-publico:hover {
    transform: translateY(-6px);

    border-color: rgba(181, 150, 88, 0.55);

    box-shadow:
        0 24px 55px rgba(20, 18, 14, 0.12);
}


/* Imagen */

.imagen-producto-publico {
    position: relative;

    width: 100%;
    aspect-ratio: 1 / 1;

    display: grid;
    place-items: center;

    overflow: hidden;
    padding: 22px;

    background:
        linear-gradient(
            145deg,
            #f9f7f2,
            #efebe3
        );
}

.imagen-producto-publico img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
    object-position: center;

    transition: transform 0.35s ease;
}

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

.sin-imagen-producto {
    color: var(--texto-suave);
    font-size: 13px;
}


/* Estado */

.estado-producto-publico {
    position: absolute;
    top: 15px;
    right: 15px;

    display: inline-flex;
    align-items: center;

    min-height: 28px;
    padding: 0 11px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.estado-producto-publico.disponible {
    background: rgba(43, 112, 76, 0.12);
    color: #276d4b;
}

.estado-producto-publico.agotado {
    background: rgba(173, 67, 67, 0.11);
    color: #a54444;
}


/* Información */

.informacion-producto-publico {
    padding: 22px;
}

.categoria-tarjeta-publica {
    display: block;
    margin-bottom: 9px;

    color: var(--dorado);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.informacion-producto-publico h3 {
    margin-bottom: 10px;

    color: var(--negro);

    font-size: 19px;
    line-height: 1.25;
}

.descripcion-producto-publico {
    min-height: 43px;
    margin-bottom: 17px;

    color: var(--texto-suave);

    font-size: 13px;
    line-height: 1.6;
}

.precio-producto-publico {
    display: block;

    color: var(--negro);

    font-size: 20px;
    font-weight: 800;
}


/* Catálogo vacío */

.catalogo-vacio-publico {
    padding: 60px 25px;

    border: 1px dashed var(--borde);
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.5);

    text-align: center;
}

.catalogo-vacio-publico strong {
    display: block;
    margin-bottom: 9px;

    color: var(--negro);
    font-size: 18px;
}

.catalogo-vacio-publico p {
    color: var(--texto-suave);
    font-size: 14px;
}


/* Responsive */

@media (max-width: 760px) {
    .seccion-catalogo {
        padding: 70px 0;
    }

    .lista-categorias-publicas {
        flex-wrap: nowrap;
        overflow-x: auto;

        padding-bottom: 8px;

        scrollbar-width: thin;
    }

    .enlace-categoria-publica {
        flex-shrink: 0;
    }

    .rejilla-productos-publicos {
        grid-template-columns:
            repeat(auto-fit, minmax(220px, 1fr));
        gap: 18px;
    }
}

@media (max-width: 480px) {
    .rejilla-productos-publicos {
        grid-template-columns: 1fr;
    }

    .imagen-producto-publico {
        max-height: 370px;
    }
}

/* =========================================
   ROYAL BOND PÚBLICO
   TEMA CLARO Y OSCURO
========================================= */

html[data-tema-publico="claro"] {
    color-scheme: light;

    --pub-fondo: #f3efe6;
    --pub-fondo-secundario: #e8e1d5;
    --pub-panel: rgba(255, 253, 248, 0.76);
    --pub-panel-solido: #fffdf8;

    --pub-texto: #132019;
    --pub-texto-suave: #69746d;

    --pub-verde: #0b3a2a;
    --pub-verde-claro: #176148;

    --pub-dorado: #b9914e;
    --pub-dorado-claro: #d7b872;

    --pub-borde: rgba(11, 58, 42, 0.14);
    --pub-sombra: rgba(20, 35, 27, 0.12);
}


html[data-tema-publico="oscuro"] {
    color-scheme: dark;

    --pub-fondo: #06110d;
    --pub-fondo-secundario: #0a1d15;
    --pub-panel: rgba(12, 34, 25, 0.74);
    --pub-panel-solido: #0d241a;

    --pub-texto: #f5f0e5;
    --pub-texto-suave: #a6b4ac;

    --pub-verde: #174b37;
    --pub-verde-claro: #247456;

    --pub-dorado: #c7a35d;
    --pub-dorado-claro: #ecd28d;

    --pub-borde: rgba(213, 182, 112, 0.17);
    --pub-sombra: rgba(0, 0, 0, 0.42);
}


/* Transición entre temas */

.pagina-publica,
.encabezado-publico,
.tarjeta-producto-publico,
.enlace-categoria-publica,
.boton-tema-publico,
.pie-publico {
    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


/* Fondo principal */

.pagina-publica {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(190, 151, 78, 0.1),
            transparent 26%
        ),
        radial-gradient(
            circle at 10% 40%,
            rgba(20, 96, 68, 0.12),
            transparent 28%
        ),
        var(--pub-fondo);

    color: var(--pub-texto);
}


/* =========================================
   ENCABEZADO
========================================= */

.encabezado-publico {
    position: sticky;
    top: 0;
    z-index: 100;

    border-bottom: 1px solid var(--pub-borde);

    background: var(--pub-panel);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    box-shadow:
        0 10px 35px var(--pub-sombra);
}

.pagina-publica .encabezado-contenido-publico {
    width: min(1240px, 92%);
    min-height: 82px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}


/* Marca */

.marca-publica {
    display: flex;
    align-items: center;
    gap: 13px;

    flex-shrink: 0;
}

.simbolo-marca-publica {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(199, 163, 93, 0.45);
    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(199, 163, 93, 0.16),
            rgba(20, 87, 62, 0.08)
        );

    color: var(--pub-dorado-claro);

    font-size: 25px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 10px 24px rgba(0, 0, 0, 0.12);
}

.texto-marca-publica {
    display: grid;
    gap: 3px;
}

.texto-marca-publica strong {
    color: var(--pub-texto);

    font-size: 13px;
    letter-spacing: 4px;
}

.texto-marca-publica small {
    color: var(--pub-dorado);

    font-size: 7px;
    font-weight: 700;
    letter-spacing: 2.5px;
}


/* Menú */

.menu-publico {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
}

.menu-publico a {
    position: relative;

    padding: 10px 0;

    color: var(--pub-texto-suave);

    font-size: 12px;
    font-weight: 600;

    transition: color 0.2s ease;
}

.menu-publico a::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: 3px;

    width: 0;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--pub-dorado-claro),
            transparent
        );

    transform: translateX(-50%);

    transition: width 0.25s ease;
}

.menu-publico a:hover {
    color: var(--pub-dorado-claro);
}

.menu-publico a:hover::after {
    width: 100%;
}


/* Botón tema */

.boton-tema-publico {
    width: 43px;
    height: 43px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border: 1px solid var(--pub-borde);
    border-radius: 13px;

    background: var(--pub-panel);
    color: var(--pub-dorado-claro);

    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.boton-tema-publico:hover {
    transform: translateY(-2px) rotate(5deg);

    border-color: var(--pub-dorado);

    background:
        linear-gradient(
            145deg,
            rgba(199, 163, 93, 0.15),
            rgba(19, 73, 53, 0.1)
        );
}

.icono-tema-publico {
    font-size: 0;
}

.icono-tema-publico::before {
    font-size: 19px;
}

html[data-tema-publico="claro"]
.icono-tema-publico::before {
    content: "☾";
}

html[data-tema-publico="oscuro"]
.icono-tema-publico::before {
    content: "☼";
}


/* =========================================
   PORTADA FUTURISTA
========================================= */

.portada-publica {
    position: relative;

    min-height: calc(100vh - 82px);

    display: grid;
    place-items: center;

    overflow: hidden;
    padding: 90px 24px;

    background:
        linear-gradient(
            rgba(5, 20, 14, 0.74),
            rgba(5, 19, 14, 0.9)
        ),
        radial-gradient(
            circle at center,
            #174c38,
            #06110d 72%
        );
}

.portada-publica::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.16;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.06) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 78%
        );
}

.portada-publica::after {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    border: 1px solid rgba(211, 177, 101, 0.17);
    border-radius: 50%;

    box-shadow:
        0 0 100px rgba(196, 157, 81, 0.11),
        inset 0 0 100px rgba(22, 90, 64, 0.14);
}

.contenido-portada {
    position: relative;
    z-index: 2;

    width: min(850px, 100%);

    text-align: center;
}

.subtitulo {
    color: var(--pub-dorado-claro);

    font-size: 11px;
    letter-spacing: 5px;
}

.contenido-portada h1 {
    margin-bottom: 25px;

    color: #fffaf0;

    font-size: clamp(48px, 8vw, 92px);
    font-weight: 700;
    line-height: 0.98;

    text-shadow:
        0 20px 55px rgba(0, 0, 0, 0.4);
}

.descripcion-portada {
    color: #afbeb6;

    font-size: 16px;
}

.boton-principal {
    min-height: 51px;

    padding: 0 27px;

    border: 1px solid rgba(225, 195, 126, 0.45);
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #b88d43,
            #d4b36e
        );

    color: #0b1711;

    box-shadow:
        0 16px 35px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.boton-principal:hover {
    transform: translateY(-3px);

    background:
        linear-gradient(
            135deg,
            #c69b50,
            #e2c581
        );

    box-shadow:
        0 22px 45px rgba(0, 0, 0, 0.32);
}


/* =========================================
   CATÁLOGO
========================================= */

.seccion-catalogo {
    position: relative;

    padding: 105px 0;

    background: transparent;
}

.cabecera-catalogo h2 {
    color: var(--pub-texto);

    font-size: clamp(36px, 5vw, 57px);
}

.etiqueta-catalogo {
    color: var(--pub-dorado);
}

.descripcion-catalogo {
    color: var(--pub-texto-suave);
}


/* Categorías */

.enlace-categoria-publica {
    border: 1px solid var(--pub-borde);

    background: var(--pub-panel);
    color: var(--pub-texto-suave);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.enlace-categoria-publica:hover {
    border-color: var(--pub-dorado);

    background:
        linear-gradient(
            145deg,
            rgba(198, 162, 91, 0.17),
            rgba(20, 91, 65, 0.1)
        );

    color: var(--pub-dorado-claro);
}


/* Tarjetas */

.tarjeta-producto-publico {
    position: relative;

    border: 1px solid var(--pub-borde);
    border-radius: 21px;

    background: var(--pub-panel);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    box-shadow:
        0 20px 55px var(--pub-sombra),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.tarjeta-producto-publico::before {
    content: "";

    position: absolute;
    z-index: 2;
    top: 0;
    left: 18%;

    width: 64%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--pub-dorado-claro),
            transparent
        );

    opacity: 0.55;
}

.tarjeta-producto-publico:hover {
    transform: translateY(-8px);

    border-color: rgba(200, 165, 94, 0.52);

    box-shadow:
        0 30px 70px var(--pub-sombra),
        0 0 35px rgba(191, 151, 75, 0.08);
}


/* Imagen */

.imagen-producto-publico {
    background:
        radial-gradient(
            circle at center,
            rgba(201, 166, 94, 0.13),
            transparent 52%
        ),
        linear-gradient(
            145deg,
            var(--pub-fondo-secundario),
            var(--pub-panel-solido)
        );
}

.imagen-producto-publico img {
    filter:
        drop-shadow(
            0 22px 20px rgba(0, 0, 0, 0.18)
        );
}


/* Información */

.informacion-producto-publico {
    border-top: 1px solid var(--pub-borde);
}

.categoria-tarjeta-publica {
    color: var(--pub-dorado);
}

.informacion-producto-publico h3 {
    color: var(--pub-texto);
}

.descripcion-producto-publico {
    color: var(--pub-texto-suave);
}

.precio-producto-publico {
    color: var(--pub-dorado-claro);
}


/* Estados */

.estado-producto-publico.disponible {
    border: 1px solid rgba(68, 160, 112, 0.3);

    background: rgba(39, 117, 80, 0.18);
    color: #75c99e;

    backdrop-filter: blur(10px);
}

.estado-producto-publico.agotado {
    border: 1px solid rgba(191, 87, 87, 0.3);

    background: rgba(151, 50, 50, 0.16);
    color: #e99a9a;

    backdrop-filter: blur(10px);
}


/* Catálogo vacío */

.catalogo-vacio-publico {
    border-color: var(--pub-borde);

    background: var(--pub-panel);

    backdrop-filter: blur(15px);
}

.catalogo-vacio-publico strong {
    color: var(--pub-texto);
}

.catalogo-vacio-publico p {
    color: var(--pub-texto-suave);
}


/* =========================================
   PIE DE PÁGINA
========================================= */

.pie-publico {
    border-top: 1px solid var(--pub-borde);

    background:
        linear-gradient(
            145deg,
            #06110d,
            #0b2017
        );

    color: #9cacA3;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {
    .pagina-publica .encabezado-contenido-publico {
        flex-wrap: wrap;

        padding: 15px 0;
    }

    .menu-publico {
        order: 3;

        width: 100%;

        justify-content: flex-start;

        overflow-x: auto;
        padding-bottom: 4px;

        scrollbar-width: thin;
    }

    .menu-publico a {
        flex-shrink: 0;
    }
}


@media (max-width: 520px) {
    .texto-marca-publica small {
        display: none;
    }

    .texto-marca-publica strong {
        letter-spacing: 2.5px;
    }

    .portada-publica::after {
        width: 330px;
        height: 330px;
    }

    .contenido-portada h1 {
        font-size: 48px;
    }

    .seccion-catalogo {
        padding: 75px 0;
    }
}

/* =========================================
   DIAMANTE HOLOGRÁFICO DE LA PORTADA
========================================= */

.portada-publica::after {
    display: none;
}

.escena-diamante-publica {
    position: absolute;
    z-index: 1;

    top: 50%;
    left: 50%;

    width: min(620px, 80vw);
    height: min(620px, 80vw);

    display: grid;
    place-items: center;

    pointer-events: none;

    transform:
        translate(-50%, -50%)
        perspective(1100px)
        rotateX(7deg);
}

.halo-diamante-publico {
    position: absolute;

    width: 78%;
    height: 78%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(218, 179, 91, 0.19),
            rgba(29, 112, 79, 0.08) 46%,
            transparent 71%
        );

    filter: blur(12px);

    animation:
        respirar-diamante-publico
        4s ease-in-out infinite;
}

.diamante-publico-svg {
    width: 72%;
    height: auto;

    overflow: visible;

    opacity: 0.28;

    filter:
        drop-shadow(
            0 35px 35px rgba(0, 0, 0, 0.45)
        );

    transform-style: preserve-3d;

    animation:
        flotar-diamante-publico
        7s ease-in-out infinite;
}

.caras-diamante-publico {
    transform-origin: center;
}

.lineas-diamante-publico {
    filter:
        drop-shadow(
            0 0 7px rgba(239, 207, 132, 0.7)
        );
}

.destello-diamante-publico {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #fff2bd;

    box-shadow:
        0 0 8px #fff1b8,
        0 0 20px rgba(221, 181, 89, 0.9);
}

.destello-diamante-publico::before,
.destello-diamante-publico::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    background: #fff4ca;

    transform: translate(-50%, -50%);
}

.destello-diamante-publico::before {
    width: 30px;
    height: 1px;
}

.destello-diamante-publico::after {
    width: 1px;
    height: 30px;
}

.destello-publico-uno {
    top: 28%;
    right: 25%;

    animation:
        brillo-diamante-publico
        2.8s ease-in-out infinite;
}

.destello-publico-dos {
    bottom: 28%;
    left: 26%;

    transform: scale(0.65);

    animation:
        brillo-diamante-publico
        3.4s ease-in-out 0.7s infinite;
}

.destello-publico-tres {
    top: 42%;
    left: 20%;

    transform: scale(0.42);

    animation:
        brillo-diamante-publico
        2.6s ease-in-out 1.1s infinite;
}

.contenido-portada {
    position: relative;
    z-index: 3;
}

@keyframes flotar-diamante-publico {
    0%,
    100% {
        transform:
            translateY(5px)
            rotateY(-8deg)
            rotateZ(-1deg)
            scale(0.97);
    }

    50% {
        transform:
            translateY(-14px)
            rotateY(8deg)
            rotateZ(1deg)
            scale(1.03);
    }
}

@keyframes respirar-diamante-publico {
    0%,
    100% {
        opacity: 0.45;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

@keyframes brillo-diamante-publico {
    0%,
    100% {
        opacity: 0.15;
    }

    45% {
        opacity: 1;
    }

    70% {
        opacity: 0.35;
    }
}

@media (max-width: 650px) {
    .escena-diamante-publica {
        width: 480px;
        height: 480px;
    }

    .diamante-publico-svg {
        width: 74%;
        opacity: 0.22;
    }
}

@media (prefers-reduced-motion: reduce) {
    .diamante-publico-svg,
    .halo-diamante-publico,
    .destello-diamante-publico {
        animation: none;
    }
}

/* =========================================
   AJUSTE FINAL DE LA PORTADA PÚBLICA
   Composición centrada y limpia
========================================= */

.portada-publica {
    position: relative;
    min-height: calc(100vh - 82px);

    display: grid;
    grid-template-columns: 1fr;
    place-items: center;

    overflow: hidden;
    padding: 90px 24px;

    background:
        linear-gradient(
            rgba(5, 20, 14, 0.74),
            rgba(5, 19, 14, 0.9)
        ),
        radial-gradient(
            circle at center,
            #174c38,
            #06110d 72%
        );
}

.escena-diamante-publica {
    position: absolute;
    z-index: 1;

    top: 50%;
    left: 50%;

    width: min(680px, 90vw);
    height: min(680px, 90vw);

    display: grid;
    place-items: center;

    pointer-events: none;

    transform:
        translate(-50%, -50%)
        perspective(1100px)
        rotateX(7deg);
}

.halo-diamante-publico {
    width: 78%;
    height: 78%;
}

.diamante-publico-svg {
    position: relative;
    z-index: 2;

    width: min(430px, 64vw);
    height: auto;

    opacity: 0.28;
}

.contenido-portada {
    position: relative;
    z-index: 4;

    width: min(850px, 100%);

    text-align: center;
}

.contenido-portada h1 {
    max-width: 850px;
    margin-right: auto;
    margin-left: auto;
}

.descripcion-portada {
    width: min(580px, 100%);
    margin: 0 auto 34px;

    text-align: center;
}

.red-joyeria-publica,
.joya-flotante-publica {
    display: none !important;
}

@media (max-width: 650px) {
    .portada-publica {
        min-height: 78vh;
        padding: 75px 20px;
    }

    .escena-diamante-publica {
        width: 480px;
        height: 480px;
    }

    .diamante-publico-svg {
        width: 310px;
        opacity: 0.22;
    }

    .contenido-portada h1 {
        font-size: 48px;
    }
}

/* =========================================
   NÚCLEO CYBERPUNK DE JOYERÍA
========================================= */

.escena-diamante-publica {
    position: absolute;
    z-index: 1;

    top: 50%;
    left: 50%;

    width: min(1120px, 96vw);
    height: 680px;

    display: block;

    pointer-events: none;

    transform: translate(-50%, -50%);
}


/* Halo central */

.escena-diamante-publica
.halo-diamante-publico {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(220, 181, 91, 0.18),
            rgba(24, 106, 76, 0.1) 45%,
            transparent 72%
        );

    filter: blur(18px);

    transform: translate(-50%, -50%);

    animation:
        respirar-nucleo-cyber
        4.5s ease-in-out infinite;
}


/* =========================================
   DIAMANTE NÚCLEO
========================================= */

.escena-diamante-publica
.diamante-publico-svg {
    position: absolute;
    z-index: 3;

    top: 50%;
    left: 50%;

    width: 310px;
    height: auto;

    opacity: 0.32;

    filter:
        drop-shadow(
            0 28px 30px rgba(0, 0, 0, 0.42)
        )
        drop-shadow(
            0 0 25px rgba(213, 175, 91, 0.13)
        );

    transform:
        translate(-50%, -50%)
        perspective(900px)
        rotateX(5deg);

    animation:
        flotar-nucleo-cyber
        6.5s ease-in-out infinite;
}


/* =========================================
   LÍNEAS DORADAS
========================================= */

.red-nucleo-joyas {
    position: absolute;
    z-index: 1;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: visible;
}

.hilo-cyber {
    fill: none;

    stroke: url(#linea-cyber-dorada);
    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-dasharray: 7 13;
    stroke-dashoffset: 0;

    opacity: 0.65;

    filter: url(#resplandor-linea-cyber);

    animation:
        flujo-linea-cyber
        8s linear infinite;
}

.hilo-cadena {
    animation-delay: -2s;
}

.hilo-manilla {
    animation-delay: -4s;
}

.hilo-aretes {
    animation-delay: -6s;
}

.nodo-cyber {
    fill: #efd184;

    filter:
        drop-shadow(
            0 0 8px rgba(237, 198, 111, 0.95)
        );

    animation:
        pulso-nodo-cyber
        2.7s ease-in-out infinite;
}


/* =========================================
   CUADROS DE JOYAS
========================================= */

.cuadro-joya {
    position: absolute;
    z-index: 4;

    width: 142px;
    height: 142px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border:
        1px solid
        rgba(216, 179, 92, 0.28);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(12, 48, 35, 0.7),
            rgba(4, 20, 14, 0.74)
        );

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 30px rgba(206, 168, 84, 0.07);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    transform-style: preserve-3d;

    animation:
        flotar-cuadro-cyber
        6s ease-in-out infinite;
}


/* Línea iluminada superior */

.cuadro-joya::before {
    content: "";

    position: absolute;
    z-index: 5;

    top: 0;
    left: 20%;

    width: 60%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(239, 207, 134, 0.95),
            transparent
        );

    opacity: 0.65;
}


/* Reflejo móvil */

.cuadro-joya::after {
    content: "";

    position: absolute;
    z-index: 4;

    inset: -80%;

    pointer-events: none;

    background:
        linear-gradient(
            115deg,
            transparent 44%,
            rgba(244, 218, 152, 0.09) 49%,
            transparent 54%
        );

    transform: translateX(-30%);

    animation:
        barrido-cuadro-cyber
        6s ease-in-out infinite;
}


/* Imágenes */

.cuadro-joya img {
    position: relative;
    z-index: 3;

    width: 108px;
    height: 108px;

    display: block;

    object-fit: contain;
    object-position: center;

    opacity: 0.84;

    filter:
        saturate(0.88)
        brightness(0.92)
        drop-shadow(
            0 0 10px rgba(222, 181, 84, 0.3)
        );

    transition:
        opacity 0.25s ease,
        filter 0.25s ease,
        transform 0.25s ease;
}


/* Nombre pequeño */

.cuadro-joya > span {
    position: absolute;
    z-index: 6;

    left: 13px;
    bottom: 9px;

    color: rgba(235, 210, 153, 0.7);

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 1.6px;
    text-transform: uppercase;
}


/* =========================================
   POSICIONES
========================================= */

.cuadro-anillo {
    top: 55px;
    left: 70px;

    animation-delay: -1s;
}

.cuadro-cadena {
    top: 45px;
    right: 70px;

    animation-delay: -2.5s;
}

.cuadro-manilla {
    left: 60px;
    bottom: 45px;

    animation-delay: -4s;
}

.cuadro-aretes {
    right: 60px;
    bottom: 45px;

    animation-delay: -5.2s;
}


/* =========================================
   EFECTO GLITCH DISCRETO
========================================= */

.ruido-cyber {
    position: absolute;
    z-index: 2;

    inset: 0;

    pointer-events: none;

    opacity: 0.12;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 3px,
            rgba(255, 255, 255, 0.05) 4px
        );

    mix-blend-mode: screen;

    animation:
        interferencia-cyber
        6.5s steps(1, end) infinite;
}


/* Pequeño desplazamiento puntual */

.cuadro-joya:nth-of-type(2) {
    animation-delay: -1.5s;
}

.cuadro-joya:nth-of-type(3) {
    animation-delay: -3s;
}

.cuadro-joya:nth-of-type(4) {
    animation-delay: -4.5s;
}


/* =========================================
   DESTELLOS DEL NÚCLEO
========================================= */

.escena-diamante-publica
.destello-diamante-publico {
    z-index: 5;
}

.escena-diamante-publica
.destello-publico-uno {
    top: 31%;
    right: 42%;
}

.escena-diamante-publica
.destello-publico-dos {
    bottom: 30%;
    left: 43%;
}

.escena-diamante-publica
.destello-publico-tres {
    top: 46%;
    left: 38%;
}


/* Texto siempre por delante */

.contenido-portada {
    position: relative;
    z-index: 10;

    width: min(850px, 100%);

    text-align: center;
}


/* =========================================
   ANIMACIONES
========================================= */

@keyframes flujo-linea-cyber {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -210;
    }
}

@keyframes pulso-nodo-cyber {
    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.35);
    }
}

@keyframes respirar-nucleo-cyber {
    0%,
    100% {
        opacity: 0.45;

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

    50% {
        opacity: 1;

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

@keyframes flotar-nucleo-cyber {
    0%,
    100% {
        transform:
            translate(-50%, -50%)
            translateY(5px)
            rotateY(-6deg);
    }

    50% {
        transform:
            translate(-50%, -50%)
            translateY(-12px)
            rotateY(6deg);
    }
}

@keyframes flotar-cuadro-cyber {
    0%,
    100% {
        translate: 0 4px;
    }

    50% {
        translate: 0 -10px;
    }
}

@keyframes barrido-cuadro-cyber {
    0%,
    22% {
        transform: translateX(-30%);
    }

    70%,
    100% {
        transform: translateX(30%);
    }
}

@keyframes interferencia-cyber {
    0%,
    92%,
    100% {
        transform: translate(0);
        opacity: 0.1;
    }

    93% {
        transform: translateX(3px);
        opacity: 0.22;
    }

    94% {
        transform: translateX(-2px);
        opacity: 0.16;
    }

    95% {
        transform: translateY(2px);
        opacity: 0.21;
    }
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 950px) {
    .escena-diamante-publica {
        width: 850px;
        height: 620px;
    }

    .cuadro-joya {
        width: 112px;
        height: 112px;

        border-radius: 20px;

        opacity: 0.75;
    }

    .cuadro-joya img {
        width: 84px;
        height: 84px;
    }

    .cuadro-anillo,
    .cuadro-manilla {
        left: 70px;
    }

    .cuadro-cadena,
    .cuadro-aretes {
        right: 70px;
    }

    .escena-diamante-publica
    .diamante-publico-svg {
        width: 270px;
    }
}


/* =========================================
   CELULAR
========================================= */

@media (max-width: 650px) {
    .escena-diamante-publica {
        width: 610px;
        height: 500px;
    }

    .escena-diamante-publica
    .diamante-publico-svg {
        width: 230px;
        opacity: 0.2;
    }

    .cuadro-joya {
        width: 88px;
        height: 88px;

        border-radius: 17px;

        opacity: 0.52;
    }

    .cuadro-joya img {
        width: 68px;
        height: 68px;
    }

    .cuadro-joya > span {
        display: none;
    }

    .cuadro-anillo {
        top: 55px;
        left: 90px;
    }

    .cuadro-cadena {
        top: 55px;
        right: 90px;
    }

    .cuadro-manilla {
        left: 100px;
        bottom: 45px;
    }

    .cuadro-aretes {
        right: 100px;
        bottom: 45px;
    }

    .hilo-cyber {
        opacity: 0.35;
    }
}


/* Menos movimiento cuando el dispositivo lo solicita */

@media (prefers-reduced-motion: reduce) {
    .hilo-cyber,
    .nodo-cyber,
    .cuadro-joya,
    .cuadro-joya::after,
    .ruido-cyber,
    .escena-diamante-publica
    .diamante-publico-svg,
    .escena-diamante-publica
    .halo-diamante-publico {
        animation: none;
    }
}

/* =========================================
   MÁS ESPACIO ENTRE EL NÚCLEO Y LAS JOYAS
========================================= */

.escena-diamante-publica {
    width: min(1380px, 98vw);
    height: 760px;
}

.escena-diamante-publica
.diamante-publico-svg {
    width: 335px;
}

.escena-diamante-publica
.halo-diamante-publico {
    width: 500px;
    height: 500px;
}


/* Recuadros más alejados del centro */

.cuadro-anillo {
    top: 40px;
    left: 18px;
}

.cuadro-cadena {
    top: 40px;
    right: 18px;
}

.cuadro-manilla {
    left: 18px;
    bottom: 38px;
}

.cuadro-aretes {
    right: 18px;
    bottom: 38px;
}


/* Recuadros ligeramente más grandes */

.cuadro-joya {
    width: 154px;
    height: 154px;
}

.cuadro-joya img {
    width: 120px;
    height: 120px;
}


/* Mantener la proporción en pantallas medianas */

@media (max-width: 1100px) {
    .escena-diamante-publica {
        width: 980px;
        height: 650px;
    }

    .cuadro-anillo,
    .cuadro-manilla {
        left: 45px;
    }

    .cuadro-cadena,
    .cuadro-aretes {
        right: 45px;
    }
}

/* =========================================
   NÚCLEO CENTRAL MÁS IMPONENTE
========================================= */

.escena-diamante-publica {
    width: min(1420px, 99vw);
    height: 780px;
}


/* Diamante principal */

.escena-diamante-publica
.diamante-publico-svg {
    width: 470px;

    opacity: 0.48;

    filter:
        drop-shadow(
            0 35px 38px rgba(0, 0, 0, 0.48)
        )
        drop-shadow(
            0 0 35px rgba(220, 181, 90, 0.22)
        )
        drop-shadow(
            0 0 70px rgba(36, 119, 86, 0.15)
        );
}


/* Halo detrás del núcleo */

.escena-diamante-publica
.halo-diamante-publico {
    width: 620px;
    height: 620px;

    background:
        radial-gradient(
            circle,
            rgba(224, 185, 92, 0.23),
            rgba(27, 112, 80, 0.13) 42%,
            transparent 72%
        );

    filter: blur(24px);
}


/* Solo quedan los hilos */

.nodo-cyber {
    display: none !important;
}


/* Hilos más limpios */

.hilo-cyber {
    stroke-width: 1.7;
    stroke-dasharray: 8 13;

    opacity: 0.72;

    animation-duration: 10s;
}


/* Mantener el texto por encima */

.contenido-portada {
    position: relative;
    z-index: 10;
}

/* =========================================
   MOVIMIENTO SUAVE DE RECUADROS CONECTADOS
========================================= */

/* Los cuadros conservan el movimiento flotante,
   pero con menos recorrido para que los hilos
   sigan pareciendo conectados. */

.cuadro-joya {
    z-index: 4;

    animation:
        flotar-cuadro-conectado
        6s ease-in-out infinite !important;

    will-change: translate;
}

.cuadro-anillo {
    animation-delay: -1s !important;
}

.cuadro-cadena {
    animation-delay: -2.5s !important;
}

.cuadro-manilla {
    animation-delay: -4s !important;
}

.cuadro-aretes {
    animation-delay: -5.2s !important;
}


/* Los hilos pasan por debajo de los cuadros.
   Así pueden entrar unos píxeles dentro sin
   atravesar visualmente las imágenes. */

.red-nucleo-joyas {
    z-index: 2;
}

.hilo-cyber {
    vector-effect: non-scaling-stroke;
}


/* Flotación breve y controlada */

@keyframes flotar-cuadro-conectado {
    0%,
    100% {
        translate: 0 3px;
    }

    50% {
        translate: 0 -6px;
    }
}


/* En dispositivos con movimiento reducido,
   los cuadros permanecen quietos. */

@media (prefers-reduced-motion: reduce) {
    .cuadro-joya {
        animation: none !important;
        translate: none;
    }
}


/* =========================================
   RECUADROS CLICABLES DEL NÚCLEO
========================================= */

.cuadro-joya {
    pointer-events: auto;
    cursor: pointer;
    outline: none;
}

.cuadro-joya:focus-visible {
    border-color: rgba(239, 207, 134, 0.9);

    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 3px rgba(226, 189, 104, 0.18),
        0 0 38px rgba(206, 168, 84, 0.2);
}

.cuadro-joya:hover img,
.cuadro-joya:focus-visible img {
    opacity: 1;

    filter:
        saturate(1)
        brightness(1.04)
        drop-shadow(
            0 0 14px rgba(222, 181, 84, 0.48)
        );
}

/* =========================================
   DETALLE PÚBLICO DEL PRODUCTO
========================================= */

.pagina-detalle-producto {
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(190, 151, 78, 0.11),
            transparent 28%
        ),
        radial-gradient(
            circle at 12% 68%,
            rgba(20, 96, 68, 0.12),
            transparent 30%
        ),
        var(--pub-fondo);
}

.detalle-producto-publico {
    min-height: calc(100vh - 82px);
    padding: 72px 0 100px;
}

.contenedor-detalle-producto {
    width: min(1180px, 92%);
    margin: 0 auto;
}

.volver-detalle-producto {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 27px;

    color: var(--pub-texto-suave);

    font-size: 13px;
    font-weight: 700;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.volver-detalle-producto:hover {
    color: var(--pub-dorado-claro);
    transform: translateX(-4px);
}

.ficha-producto-publico {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(360px, 0.95fr);

    overflow: hidden;

    border: 1px solid var(--pub-borde);
    border-radius: 30px;

    background: var(--pub-panel);

    box-shadow:
        0 32px 90px var(--pub-sombra),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.ficha-producto-publico::before {
    content: "";

    position: absolute;
    z-index: 3;

    top: 0;
    left: 22%;

    width: 56%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--pub-dorado-claro),
            transparent
        );

    opacity: 0.65;
}


/* Imagen */

.galeria-detalle-producto {
    position: relative;

    min-height: 620px;

    display: grid;
    place-items: center;

    overflow: hidden;
    padding: 54px;

    border-right: 1px solid var(--pub-borde);

    background:
        radial-gradient(
            circle at center,
            rgba(211, 176, 98, 0.17),
            transparent 47%
        ),
        linear-gradient(
            145deg,
            var(--pub-fondo-secundario),
            var(--pub-panel-solido)
        );
}

.galeria-detalle-producto::before {
    content: "";

    position: absolute;
    inset: 8%;

    border: 1px solid rgba(204, 169, 93, 0.13);
    border-radius: 50%;

    box-shadow:
        0 0 75px rgba(201, 162, 84, 0.09),
        inset 0 0 75px rgba(26, 100, 72, 0.08);
}

.brillo-fondo-detalle {
    position: absolute;

    width: 58%;
    aspect-ratio: 1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(225, 193, 120, 0.2),
            rgba(28, 108, 78, 0.07) 46%,
            transparent 72%
        );

    filter: blur(20px);

    animation:
        respirar-fondo-detalle
        5s ease-in-out infinite;
}

.imagen-detalle-producto {
    position: relative;
    z-index: 2;

    width: min(480px, 92%);
    max-height: 500px;

    display: block;

    object-fit: contain;
    object-position: center;

    filter:
        drop-shadow(
            0 30px 30px rgba(0, 0, 0, 0.25)
        )
        drop-shadow(
            0 0 22px rgba(208, 169, 82, 0.12)
        );

    animation:
        flotar-imagen-detalle
        6s ease-in-out infinite;
}

.sin-imagen-detalle-producto {
    position: relative;
    z-index: 2;

    color: var(--pub-texto-suave);
    font-size: 14px;
}

.estado-detalle-producto {
    z-index: 4;
    top: 24px;
    right: 24px;
}


/* Información */

.informacion-detalle-producto {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 62px 58px;
}

.categoria-detalle-producto {
    margin-bottom: 15px;

    color: var(--pub-dorado);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 3px;
    text-transform: uppercase;
}

.informacion-detalle-producto h1 {
    margin-bottom: 18px;

    color: var(--pub-texto);

    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.03;
}

.precio-detalle-producto {
    color: var(--pub-dorado-claro);

    font-size: clamp(27px, 3vw, 38px);
    font-weight: 800;
}

.separador-detalle-producto {
    width: 82px;
    height: 1px;

    margin: 28px 0;

    background:
        linear-gradient(
            90deg,
            var(--pub-dorado-claro),
            transparent
        );
}

.descripcion-detalle-producto {
    margin-bottom: 28px;

    color: var(--pub-texto-suave);

    font-size: 15px;
    line-height: 1.8;
}

.datos-detalle-producto {
    display: grid;
    gap: 13px;

    margin-bottom: 34px;
}

.datos-detalle-producto > div {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 18px;

    padding-bottom: 12px;

    border-bottom: 1px solid var(--pub-borde);
}

.datos-detalle-producto dt {
    color: var(--pub-texto-suave);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1px;
    text-transform: uppercase;
}

.datos-detalle-producto dd {
    color: var(--pub-texto);

    font-size: 13px;
    font-weight: 700;

    text-align: right;
}

.texto-estado-detalle {
    color: var(--pub-dorado-claro) !important;
}

.acciones-detalle-producto {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;
}

.boton-secundario-detalle {
    min-height: 51px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 22px;

    border: 1px solid var(--pub-borde);
    border-radius: 12px;

    background: var(--pub-panel);
    color: var(--pub-texto);

    font-size: 13px;
    font-weight: 700;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.boton-secundario-detalle:hover {
    transform: translateY(-2px);

    border-color: var(--pub-dorado);
    color: var(--pub-dorado-claro);
}

.nota-detalle-producto {
    margin-top: 20px;

    color: var(--pub-texto-suave);

    font-size: 11px;
    line-height: 1.6;
}


/* Movimiento */

@keyframes flotar-imagen-detalle {
    0%,
    100% {
        transform: translateY(5px) rotate(-0.4deg);
    }

    50% {
        transform: translateY(-10px) rotate(0.4deg);
    }
}

@keyframes respirar-fondo-detalle {
    0%,
    100% {
        opacity: 0.5;
        transform: scale(0.93);
    }

    50% {
        opacity: 1;
        transform: scale(1.07);
    }
}


/* Responsive */

@media (max-width: 900px) {
    .detalle-producto-publico {
        padding-top: 50px;
    }

    .ficha-producto-publico {
        grid-template-columns: 1fr;
    }

    .galeria-detalle-producto {
        min-height: 500px;

        border-right: none;
        border-bottom: 1px solid var(--pub-borde);
    }

    .informacion-detalle-producto {
        padding: 48px 42px 54px;
    }
}

@media (max-width: 560px) {
    .detalle-producto-publico {
        padding: 35px 0 70px;
    }

    .ficha-producto-publico {
        border-radius: 22px;
    }

    .galeria-detalle-producto {
        min-height: 380px;
        padding: 34px 24px;
    }

    .imagen-detalle-producto {
        width: min(310px, 92%);
        max-height: 320px;
    }

    .informacion-detalle-producto {
        padding: 38px 26px 42px;
    }

    .informacion-detalle-producto h1 {
        font-size: 38px;
    }

    .acciones-detalle-producto {
        align-items: stretch;
        flex-direction: column;
    }

    .acciones-detalle-producto .boton-principal,
    .boton-secundario-detalle {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .imagen-detalle-producto,
    .brillo-fondo-detalle {
        animation: none;
    }
}

/* =========================================
   TARJETAS DEL CATÁLOGO CLICABLES
   Ajuste final compatible con inicio.html
========================================= */

.rejilla-productos-publicos > .tarjeta-producto-publico {
    min-width: 0;
}

.tarjeta-producto-publico {
    display: block;
    width: 100%;

    color: inherit;
    text-decoration: none;

    cursor: pointer;
    outline: none;

    isolation: isolate;
}

.tarjeta-producto-publico:visited {
    color: inherit;
}

.tarjeta-producto-publico:focus-visible {
    transform: translateY(-8px);

    border-color: rgba(200, 165, 94, 0.78);

    box-shadow:
        0 30px 70px var(--pub-sombra),
        0 0 0 3px rgba(199, 163, 93, 0.18),
        0 0 36px rgba(191, 151, 75, 0.14);
}

.tarjeta-producto-publico:hover
.imagen-producto-publico img,
.tarjeta-producto-publico:focus-visible
.imagen-producto-publico img {
    transform: scale(1.04);
}

.tarjeta-producto-publico:hover
.informacion-producto-publico h3,
.tarjeta-producto-publico:focus-visible
.informacion-producto-publico h3 {
    color: var(--pub-dorado-claro);
}

.tarjeta-producto-publico
.informacion-producto-publico h3 {
    transition: color 0.22s ease;
}


/* Asegura que el enlace completo responda al clic */

.tarjeta-producto-publico::before,
.tarjeta-producto-publico::after,
.tarjeta-producto-publico * {
    pointer-events: none;
}


/* El estado sigue viéndose por encima de la imagen */

.estado-producto-publico {
    z-index: 4;
}


/* Adaptación táctil */

@media (hover: none) {
    .tarjeta-producto-publico:active {
        transform: scale(0.985);

        border-color: rgba(200, 165, 94, 0.62);
    }
}


/* Movimiento reducido */

@media (prefers-reduced-motion: reduce) {
    .tarjeta-producto-publico,
    .tarjeta-producto-publico
    .imagen-producto-publico img,
    .tarjeta-producto-publico
    .informacion-producto-publico h3 {
        transition: none;
    }
}

/* =========================================
   ASISTENTE FLOTANTE ROYAL BOND
========================================= */

.asistente-royal-bond {
    position: fixed;
    z-index: 180;

    right: 26px;
    bottom: 26px;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    font-family: Arial, Helvetica, sans-serif;
}

.asistente-royal-bond[open] {
    z-index: 200;
}


/* Quitar la flecha predeterminada de details */

.boton-asistente-royal-bond {
    min-height: 58px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    padding: 0 20px 0 11px;

    border: 1px solid rgba(222, 188, 108, 0.48);
    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            rgba(13, 57, 41, 0.97),
            rgba(5, 30, 21, 0.98)
        );

    color: #f7f0de;

    cursor: pointer;
    list-style: none;
    outline: none;

    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 30px rgba(199, 163, 93, 0.1);

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease;
}

.boton-asistente-royal-bond::-webkit-details-marker {
    display: none;
}

.boton-asistente-royal-bond::marker {
    display: none;
    content: "";
}

.boton-asistente-royal-bond:hover {
    transform: translateY(-3px);

    border-color: rgba(235, 205, 137, 0.78);

    background:
        linear-gradient(
            135deg,
            rgba(20, 79, 57, 0.98),
            rgba(7, 38, 27, 0.99)
        );

    box-shadow:
        0 23px 58px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 36px rgba(199, 163, 93, 0.16);
}

.boton-asistente-royal-bond:focus-visible {
    border-color: var(--pub-dorado-claro);

    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.34),
        0 0 0 4px rgba(199, 163, 93, 0.2),
        0 0 35px rgba(199, 163, 93, 0.2);
}


/* Ícono del botón */

.icono-asistente-royal-bond {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;
    flex-shrink: 0;

    border: 1px solid rgba(235, 205, 137, 0.45);
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(255, 237, 186, 0.34),
            rgba(195, 151, 65, 0.15) 44%,
            rgba(5, 34, 24, 0.2) 72%
        );

    color: #efd38f;

    font-size: 23px;
    line-height: 1;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 18px rgba(214, 177, 95, 0.15);

    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease;
}

.boton-asistente-royal-bond:hover
.icono-asistente-royal-bond {
    transform: rotate(9deg) scale(1.04);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 24px rgba(214, 177, 95, 0.25);
}

.asistente-royal-bond[open]
.icono-asistente-royal-bond {
    transform: rotate(45deg);
}

.texto-boton-asistente {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.2px;
    white-space: nowrap;
}


/* =========================================
   PANEL DEL ASISTENTE
========================================= */

.panel-asistente-royal-bond {
    position: absolute;

    right: 0;
    bottom: calc(100% + 15px);

    width: min(355px, calc(100vw - 36px));

    overflow: hidden;

    border: 1px solid var(--pub-borde);
    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            var(--pub-panel-solido),
            var(--pub-panel)
        );

    color: var(--pub-texto);

    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 35px rgba(196, 157, 81, 0.09);

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);

    transform-origin: right bottom;

    animation:
        aparecer-panel-asistente
        0.25s ease both;
}

.panel-asistente-royal-bond::before {
    content: "";

    position: absolute;
    top: 0;
    left: 20%;

    width: 60%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--pub-dorado-claro),
            transparent
        );

    opacity: 0.75;
}


/* Encabezado del panel */

.cabecera-asistente-royal-bond {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 21px 21px 18px;

    border-bottom: 1px solid var(--pub-borde);

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(203, 164, 83, 0.13),
            transparent 44%
        );
}

.simbolo-panel-asistente {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;
    flex-shrink: 0;

    border: 1px solid rgba(199, 163, 93, 0.42);
    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            rgba(199, 163, 93, 0.15),
            rgba(22, 91, 65, 0.1)
        );

    color: var(--pub-dorado-claro);

    font-size: 24px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.cabecera-asistente-royal-bond strong {
    display: block;
    margin-bottom: 4px;

    color: var(--pub-texto);

    font-size: 14px;
    line-height: 1.2;
}

.cabecera-asistente-royal-bond p {
    color: var(--pub-texto-suave);

    font-size: 11px;
    line-height: 1.5;
}


/* =========================================
   OPCIONES DEL ASISTENTE
========================================= */

.opciones-asistente-royal-bond {
    display: grid;
    gap: 10px;

    padding: 16px;
}

.opcion-asistente-royal-bond {
    display: flex;
    align-items: center;
    gap: 13px;

    min-height: 66px;
    padding: 12px 13px;

    border: 1px solid var(--pub-borde);
    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(199, 163, 93, 0.06),
            rgba(23, 97, 70, 0.045)
        );

    color: var(--pub-texto);

    outline: none;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.opcion-asistente-royal-bond:hover,
.opcion-asistente-royal-bond:focus-visible {
    transform: translateX(4px);

    border-color: rgba(199, 163, 93, 0.55);

    background:
        linear-gradient(
            145deg,
            rgba(199, 163, 93, 0.14),
            rgba(23, 97, 70, 0.09)
        );

    box-shadow:
        0 14px 28px var(--pub-sombra);
}

.opcion-asistente-royal-bond:focus-visible {
    box-shadow:
        0 0 0 3px rgba(199, 163, 93, 0.16),
        0 14px 28px var(--pub-sombra);
}

.icono-opcion-asistente {
    width: 39px;
    height: 39px;

    display: grid;
    place-items: center;
    flex-shrink: 0;

    border: 1px solid rgba(199, 163, 93, 0.34);
    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(199, 163, 93, 0.13),
            rgba(22, 91, 65, 0.08)
        );

    color: var(--pub-dorado-claro);

    font-size: 19px;
}

.opcion-asistente-royal-bond > span:last-child {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.opcion-asistente-royal-bond strong {
    color: var(--pub-texto);

    font-size: 12px;
    line-height: 1.3;
}

.opcion-asistente-royal-bond small {
    color: var(--pub-texto-suave);

    font-size: 10px;
    line-height: 1.4;
}


/* Opción WhatsApp */

.opcion-whatsapp-asistente {
    border-color: rgba(74, 169, 110, 0.28);

    background:
        linear-gradient(
            145deg,
            rgba(39, 117, 80, 0.13),
            rgba(25, 91, 62, 0.07)
        );
}

.opcion-whatsapp-asistente:hover,
.opcion-whatsapp-asistente:focus-visible {
    border-color: rgba(89, 193, 130, 0.52);

    background:
        linear-gradient(
            145deg,
            rgba(39, 117, 80, 0.2),
            rgba(25, 91, 62, 0.12)
        );
}

.opcion-whatsapp-asistente
.icono-opcion-asistente {
    border-color: rgba(89, 193, 130, 0.3);

    background:
        linear-gradient(
            145deg,
            rgba(39, 117, 80, 0.2),
            rgba(25, 91, 62, 0.1)
        );

    color: #7ad7a6;
}


/* Nota inferior */

.nota-asistente-royal-bond {
    padding: 0 20px 18px;

    color: var(--pub-texto-suave);

    font-size: 9px;
    line-height: 1.5;
    text-align: center;
}


/* =========================================
   ENLACE WHATSAPP DEL PIE
========================================= */

.enlace-whatsapp-pie {
    position: relative;

    color: #cdb57b;

    font-size: 12px;
    font-weight: 700;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.enlace-whatsapp-pie::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -4px;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d8bd80,
            transparent
        );

    opacity: 0;
    transform: scaleX(0.4);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.enlace-whatsapp-pie:hover {
    color: #efd99b;
    transform: translateY(-1px);
}

.enlace-whatsapp-pie:hover::after {
    opacity: 1;
    transform: scaleX(1);
}


/* =========================================
   ANIMACIÓN DEL ASISTENTE
========================================= */

@keyframes aparecer-panel-asistente {
    from {
        opacity: 0;

        transform:
            translateY(10px)
            scale(0.96);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================
   RESPONSIVE DEL ASISTENTE
========================================= */

@media (max-width: 600px) {
    .asistente-royal-bond {
        right: 16px;
        bottom: 16px;
    }

    .boton-asistente-royal-bond {
        min-height: 54px;
        padding: 0 17px 0 9px;
    }

    .icono-asistente-royal-bond {
        width: 37px;
        height: 37px;

        font-size: 21px;
    }

    .texto-boton-asistente {
        font-size: 12px;
    }

    .panel-asistente-royal-bond {
        width: min(
            340px,
            calc(100vw - 32px)
        );
    }

    .cabecera-asistente-royal-bond {
        padding: 18px 17px 16px;
    }

    .opciones-asistente-royal-bond {
        padding: 13px;
    }

    .opcion-asistente-royal-bond {
        min-height: 62px;
    }
}

@media (max-width: 390px) {
    .texto-boton-asistente {
        display: none;
    }

    .boton-asistente-royal-bond {
        width: 56px;
        height: 56px;
        padding: 0;

        border-radius: 50%;
    }

    .icono-asistente-royal-bond {
        width: 40px;
        height: 40px;
    }

    .panel-asistente-royal-bond {
        width: calc(100vw - 28px);
    }
}


/* =========================================
   MOVIMIENTO REDUCIDO
========================================= */

@media (prefers-reduced-motion: reduce) {
    .panel-asistente-royal-bond {
        animation: none;
    }

    .boton-asistente-royal-bond,
    .icono-asistente-royal-bond,
    .opcion-asistente-royal-bond,
    .enlace-whatsapp-pie {
        transition: none;
    }
}

/* =========================================
   ESPACIO PARA EL ASISTENTE EN EL PIE
========================================= */

.pie-publico {
    padding-right: 285px;
}

.pie-publico p:last-child {
    color: var(--pub-dorado-claro);
    font-weight: 700;
}

/* Celulares y pantallas pequeñas */

@media (max-width: 760px) {
    .pie-publico {
        padding-right: 5%;
        padding-bottom: 105px;
    }
}

/* =========================================
   OCULTAR ENCABEZADO AL BAJAR EN CELULAR
========================================= */

@media (max-width: 760px) {

    .encabezado-publico {
        transition:
            transform 0.28s ease,
            background 0.3s ease,
            box-shadow 0.3s ease;

        will-change: transform;
    }

    .encabezado-publico.encabezado-publico-oculto {
        transform: translateY(-100%);
        box-shadow: none;
    }

}

@media (min-width: 761px) {

    .encabezado-publico {
        transform: none !important;
    }

}