/*
 * Tema "relieve" (neumórfico) dark + amarillo del sitio público.
 *
 * Se carga sin capa (@layer) después de Tailwind, así que gana a las
 * utilidades sin tocar cada vista: las clases de superficie que ya usan
 * las vistas (bg-gray-800, bg-gray-900, bg-yellow-400…) pasan a ser
 * superficies en relieve (raised) o hundidas (inset). Las vistas siguen
 * escribiendo Tailwind normal; el relieve sale de aquí.
 *
 * Solo se usa en layouts/app (meta-tags). El panel Filament no lo carga.
 */

:root {
    --neo-bg: #1A1D27;
    --neo-surface: #1F232D;
    --neo-well: #14171F;
    --neo-dark: #0E0F13;
    --neo-light: #282C37;
    --neo-yellow: #FFD645;
    --neo-yellow-deep: #E8BF2E;
    --neo-glow: rgba(255, 214, 69, 0.35);
    --neo-text-muted: #A6ABB8;
    --neo-raised: 8px 8px 18px var(--neo-dark), -6px -6px 14px var(--neo-light);
    --neo-raised-sm: 4px 4px 10px var(--neo-dark), -3px -3px 8px var(--neo-light);
    --neo-inset: inset 5px 5px 12px var(--neo-dark), inset -4px -4px 10px var(--neo-light);
    --neo-inset-sm: inset 3px 3px 7px var(--neo-dark), inset -2px -2px 6px var(--neo-light);
    --neo-yellow-raised: 6px 6px 14px var(--neo-dark), -4px -4px 12px var(--neo-light), 0 0 22px var(--neo-glow);
}

/* ---------- base ---------- */

body {
    background-color: var(--neo-bg);
    color: #FFFFFF;
    font-family: "Carmen Sans", "Outfit", "Montserrat", sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    letter-spacing: -0.01em;
}

/* Escala tipográfica un punto por encima de Tailwind: solo el texto, no el espaciado. */
.text-xs { font-size: .8125rem; line-height: 1.2rem; }
.text-sm { font-size: .9375rem; line-height: 1.4rem; }
.text-base { font-size: 1.0625rem; line-height: 1.6rem; }
.text-lg { font-size: 1.1875rem; line-height: 1.75rem; }
.text-xl { font-size: 1.3125rem; line-height: 1.8rem; }
.text-2xl { font-size: 1.625rem; line-height: 2.1rem; }
.text-3xl { font-size: 2rem; line-height: 2.4rem; }
p, li, label, td { font-size: 1.0625rem; }

::selection {
    background: var(--neo-yellow);
    color: #151618;
}

/* ---------- superficies en relieve ---------- */

.bg-gray-800,
.bg-white,
.bg-gray-50,
.bg-gray-100,
.bg-gradient-to-r {
    background-color: var(--neo-surface);
    background-image: none;
    box-shadow: var(--neo-raised);
    color: inherit;
}

/* ---------- superficies hundidas ---------- */

.bg-gray-900,
.bg-gray-900\/50,
.bg-gray-800\/50,
.bg-gray-700,
.bg-gray-700\/50,
.bg-black,
.bg-yellow-400\/10,
.bg-yellow-400\/15,
.bg-yellow-400\/20,
.bg-yellow-900\/30,
.bg-yellow-900\/40,
.bg-yellow-900\/50,
.bg-blue-900\/30,
.bg-red-800\/20 {
    background-color: var(--neo-well);
    background-image: none;
    box-shadow: var(--neo-inset-sm);
}

.bg-gray-800 .bg-gray-800 {
    background-color: var(--neo-well);
    box-shadow: var(--neo-inset-sm);
}

/* Avisos: pozo hundido con un filo de color a la izquierda. */
.bg-red-600,
.bg-red-500 {
    background-color: var(--neo-well);
    box-shadow: var(--neo-inset-sm), inset 4px 0 0 #EF4444;
    color: #FCA5A5;
}

.bg-green-600,
.bg-green-500 {
    background-color: var(--neo-well);
    box-shadow: var(--neo-inset-sm), inset 4px 0 0 #22C55E;
    color: #86EFAC;
}

.bg-yellow-900\/30,
.bg-yellow-900\/40,
.bg-yellow-900\/50,
.bg-yellow-400\/10 {
    box-shadow: var(--neo-inset-sm), inset 4px 0 0 var(--neo-yellow);
}

.bg-blue-900\/30 {
    box-shadow: var(--neo-inset-sm), inset 4px 0 0 #60A5FA;
}

/* ---------- amarillo en relieve (botones, badges) ---------- */

.bg-yellow-400,
.bg-yellow-500,
.bg-yellow {
    background: linear-gradient(145deg, #FFE07A, var(--neo-yellow-deep));
    color: #151618;
    box-shadow: var(--neo-yellow-raised);
    border: 0;
}

a.bg-yellow-400,
a.bg-yellow-500,
button.bg-yellow-400,
button.bg-yellow-500 {
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.hover\:bg-yellow-500:hover,
.hover\:bg-yellow-600:hover {
    background: linear-gradient(145deg, #FFE68F, var(--neo-yellow));
    box-shadow: 8px 8px 18px var(--neo-dark), -6px -6px 14px var(--neo-light), 0 0 30px var(--neo-glow);
    transform: translateY(-1px);
}

button.bg-yellow-400:active,
button.bg-yellow-500:active,
a.bg-yellow-400:active,
a.bg-yellow-500:active {
    transform: translateY(1px);
    box-shadow: inset 4px 4px 10px rgba(0, 0, 0, .35), 0 0 16px var(--neo-glow);
}

button.bg-yellow-400:disabled,
button.bg-yellow-500:disabled {
    box-shadow: var(--neo-raised-sm);
    filter: grayscale(.6);
    transform: none;
}

/* ---------- botones neutros en relieve ---------- */

.bg-gray-600,
.bg-gray-400,
button.bg-gray-700,
button.bg-gray-800 {
    background: linear-gradient(145deg, #282C37, #1B1F28);
    color: #E5E7EB;
    box-shadow: var(--neo-raised-sm);
    transition: transform .15s ease, box-shadow .15s ease;
}

.hover\:bg-gray-600:hover,
.hover\:bg-gray-700:hover,
.hover\:bg-gray-500:hover {
    background: linear-gradient(145deg, #2E323E, #1F232D);
    color: #FFF;
}

button.bg-gray-700:active,
button.bg-gray-800:active,
.bg-gray-600:active {
    box-shadow: var(--neo-inset-sm);
    transform: translateY(1px);
}

button.bg-gray-700:disabled,
button.bg-gray-800:disabled {
    box-shadow: var(--neo-inset-sm);
    color: #4B5563;
}

/* ---------- sin bordes duros: el volumen lo da la sombra ---------- */

.border-gray-700,
.border-gray-600,
.border-gray-700\/60,
.border-gray-200,
.border-yellow-400\/30,
.border-yellow-400\/40,
.border-yellow-500\/50,
.border-yellow-500\/60,
.border-blue-500\/50,
.hover\:border-yellow-400\/50:hover {
    border-color: transparent;
}

.divide-gray-700 > :not(:last-child),
.divide-gray-700\/60 > :not(:last-child),
.border-t.border-gray-700,
.border-b.border-gray-700,
.border-t.border-gray-700\/60 {
    border-color: rgba(255, 255, 255, .05);
}

.shadow,
.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-2xl {
    box-shadow: var(--neo-raised);
}

/* ---------- iconografía: iconos en cápsulas ---------- */

.neo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .9rem;
    background: linear-gradient(145deg, #282C37, #1B1F28);
    box-shadow: var(--neo-raised-sm);
    color: var(--neo-yellow);
    flex-shrink: 0;
}

.neo-icon.neo-icon-sm {
    width: 2rem;
    height: 2rem;
    border-radius: .7rem;
    font-size: .8rem;
}

.neo-icon.neo-icon-lg {
    width: 4rem;
    height: 4rem;
    border-radius: 1.4rem;
    font-size: 1.6rem;
}

.neo-icon.neo-icon-yellow {
    background: linear-gradient(145deg, #FFE07A, var(--neo-yellow-deep));
    color: #151618;
    box-shadow: var(--neo-yellow-raised);
}

.neo-dot {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background: var(--neo-yellow);
    box-shadow: 0 0 10px var(--neo-glow);
}

/* ---------- navegación: plana y mínima, sin relieve ---------- */

/* Sin display: lo deciden hidden/md:flex de la vista, para que en móvil no aparezca. */
.neo-nav {
    gap: 1.75rem;
    align-items: center;
}

.neo-nav a {
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--neo-text-muted);
    transition: color .15s ease;
}

.neo-nav a:hover {
    color: #FFF;
}

.neo-nav a.is-active {
    color: var(--neo-yellow);
}

.neo-logo {
    display: inline-flex;
}

/* ---------- formularios: campos hundidos ---------- */

input:not([type=radio]):not([type=checkbox]):not(.fi-input),
select:not(.fi-select-input),
textarea:not(.fi-textarea) {
    background-color: var(--neo-well);
    color: #FFF;
    border: 0;
    border-radius: .85rem;
    box-shadow: var(--neo-inset-sm);
    padding: .65rem .9rem;
    outline: none;
}

input:not([type=radio]):not([type=checkbox]):not(.fi-input):focus,
select:not(.fi-select-input):focus,
textarea:not(.fi-textarea):focus {
    box-shadow: var(--neo-inset-sm), 0 0 0 2px var(--neo-glow);
}

.fi-input-wrp {
    background-color: var(--neo-well);
    border-radius: .85rem;
    box-shadow: var(--neo-inset-sm);
    --tw-ring-color: transparent;
    --tw-ring-shadow: 0 0 #0000;
    border: 0;
}

.fi-input-wrp:focus-within {
    box-shadow: var(--neo-inset-sm), 0 0 0 2px var(--neo-glow);
}

.fi-input,
.fi-select-input,
.fi-textarea {
    background: transparent;
    color: #FFF;
    box-shadow: none;
}

.fi-input::placeholder {
    color: #6B7280;
}

.fi-fo-field-wrp-error-message {
    color: var(--neo-yellow) !important;
}

/* ---------- modales Filament (confirmación de correo) ---------- */

.fi-modal-window {
    background-color: var(--neo-surface);
    color: #F3F4F6;
    box-shadow: var(--neo-raised);
    border: 0;
    border-radius: 1.25rem;
}

.fi-modal-window .fi-btn {
    border-radius: .9rem;
    box-shadow: var(--neo-raised-sm);
    --tw-ring-shadow: 0 0 #0000;
}

.fi-modal-window .fi-btn.fi-color-primary,
.fi-modal-window .fi-btn.fi-color-warning {
    background: linear-gradient(145deg, #FFE07A, var(--neo-yellow-deep));
    color: #151618;
    box-shadow: var(--neo-yellow-raised);
}

/* ---------- slider ---------- */

.banner-slide {
    padding: 0 .75rem;
}

/* Slider: una imagen por slide, entera. */
.mobile-slide {
    padding: .75rem .5rem;
}

.mobile-slide a {
    display: block;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: var(--neo-raised);
}

.mobile-slide img {
    width: 100%;
    height: auto;
    display: block;
}

.slick-dots li button:before {
    color: #6B7280;
    opacity: .6;
}

.slick-dots li.slick-active button:before {
    color: var(--neo-yellow);
    opacity: 1;
    text-shadow: 0 0 8px var(--neo-glow);
}

/* ---------- entrada: aparecer desde abajo (IntersectionObserver en el layout) ---------- */

.neo-rise {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--rise-delay, 0ms);
}

.neo-rise.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .neo-rise {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---------- utilidades ---------- */

.text-yellow-400,
.color-yellow {
    color: var(--neo-yellow);
}

.neo-glow-text {
    text-shadow: 0 0 14px var(--neo-glow);
}

/* ---------- menú móvil ---------- */

.neo-mobile-menu {
    background: var(--neo-bg);
    transition: transform .3s ease;
}

.neo-mobile-menu.-translate-x-full {
    transform: translateX(-100%);
}

.neo-mobile-menu.translate-x-0 {
    transform: none;
}

.neo-mobile-link {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .8rem 1rem;
    border-radius: 1rem;
    font-size: 1.05rem;
    font-weight: 500;
    color: #E5E7EB;
    background: var(--neo-surface);
    box-shadow: var(--neo-raised-sm);
    transition: transform .15s ease, color .15s ease;
}

.neo-mobile-link:active {
    box-shadow: var(--neo-inset-sm);
    transform: translateY(1px);
}

.neo-mobile-link.is-active {
    color: var(--neo-yellow);
}

.neo-mobile-link.is-active .neo-icon {
    background: linear-gradient(145deg, #FFE07A, var(--neo-yellow-deep));
    color: #151618;
    box-shadow: var(--neo-yellow-raised);
}

/* ---------- pie: plano, solo una línea fina ---------- */

.neo-footer {
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.neo-footer a {
    font-size: .9rem;
    color: var(--neo-text-muted);
    transition: color .15s ease;
}

.neo-footer a:hover {
    color: #FFF;
}