/* ══════════════════════════════════════════════════════════════════════════
   🎬 QUIROMANCIA SUPREMA — PIXAR 3D LAYER v16.0  "SOFT-BODY RENDER"
   ──────────────────────────────────────────────────────────────────────────
   Capa estética de render volumétrico estilo Pixar/DreamWorks.
   Se carga DIFERIDA y de ÚLTIMA: complementa (no reemplaza) pixar.css v9.
   Aporta: subsurface scattering falso, specular highlights, rim light,
   contact shadows, materiales arcilla/caramelo, squash & stretch,
   parallax de profundidad y micro-física en la interacción.
   ══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   1 · TOKENS DE MATERIAL Y LUZ
   ═══════════════════════════════════════════ */
:root {
    /* Dirección de luz principal (key light) — arriba-izquierda, cálida */
    --p3-key-x: -0.42;
    --p3-key-y: -0.78;

    /* Subsurface scattering: la luz "atraviesa" el material y sale cálida */
    --p3-sss-warm: rgba(255, 226, 176, 0.30);
    --p3-sss-deep: rgba(168, 92, 246, 0.22);
    --p3-sss-blood: rgba(255, 138, 128, 0.18);

    /* Specular: brillo del barniz */
    --p3-spec-hot: rgba(255, 255, 255, 0.92);
    --p3-spec-soft: rgba(255, 252, 240, 0.42);

    /* Rim light (contraluz frío que despega el objeto del fondo) */
    --p3-rim-cold: rgba(150, 200, 255, 0.55);
    --p3-rim-gold: rgba(244, 221, 154, 0.70);

    /* Oclusión ambiental y sombra de contacto */
    --p3-ao: rgba(10, 2, 24, 0.55);
    --p3-contact: 0 2px 3px -1px rgba(8, 1, 20, 0.70);

    /* Arcilla (clay) — superficie mate y mullida */
    --p3-clay: linear-gradient(168deg,
        rgba(72, 32, 128, 0.96) 0%,
        rgba(46, 16, 88, 0.97) 46%,
        rgba(26, 7, 51, 0.99) 100%);

    /* Caramelo (candy) — superficie glossy translúcida */
    --p3-candy: linear-gradient(165deg,
        rgba(167, 139, 250, 0.95) 0%,
        rgba(124, 58, 237, 0.95) 40%,
        rgba(76, 29, 149, 0.98) 100%);

    /* Oro fundido volumétrico */
    --p3-molten: linear-gradient(160deg,
        #fff6d8 0%, #f4dd9a 14%, #d4af37 38%,
        #a37a12 58%, #d4af37 78%, #fbf0cd 100%);

    /* Curvas de animación con física */
    --p3-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --p3-squash: cubic-bezier(0.22, 1.42, 0.36, 1);
    --p3-settle: cubic-bezier(0.16, 1, 0.30, 1);
    --p3-anticipate: cubic-bezier(0.68, -0.55, 0.27, 1.55);

    /* Elevaciones de render (multi-capa: AO + sombra media + sombra suave) */
    --p3-lift-1:
        0 1px 2px rgba(8, 1, 20, 0.55),
        0 4px 10px -2px rgba(8, 1, 20, 0.45),
        0 12px 28px -8px rgba(8, 1, 20, 0.40);
    --p3-lift-2:
        0 2px 3px rgba(8, 1, 20, 0.60),
        0 8px 20px -4px rgba(8, 1, 20, 0.52),
        0 24px 54px -14px rgba(8, 1, 20, 0.55);
    --p3-lift-3:
        0 3px 5px rgba(8, 1, 20, 0.65),
        0 14px 34px -6px rgba(8, 1, 20, 0.58),
        0 44px 90px -22px rgba(8, 1, 20, 0.68);
}

[data-theme="light"] {
    --p3-sss-warm: rgba(255, 236, 200, 0.55);
    --p3-sss-deep: rgba(139, 92, 246, 0.14);
    --p3-ao: rgba(90, 60, 130, 0.16);
    --p3-contact: 0 2px 3px -1px rgba(90, 60, 130, 0.24);
    --p3-clay: linear-gradient(168deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(250, 245, 255, 0.98) 52%,
        rgba(240, 232, 252, 0.99) 100%);
    --p3-candy: linear-gradient(165deg,
        rgba(196, 181, 253, 0.96) 0%,
        rgba(139, 92, 246, 0.96) 45%,
        rgba(109, 40, 217, 0.98) 100%);
    --p3-lift-1:
        0 1px 2px rgba(80, 50, 120, 0.10),
        0 4px 10px -2px rgba(80, 50, 120, 0.12),
        0 12px 28px -8px rgba(80, 50, 120, 0.14);
    --p3-lift-2:
        0 2px 3px rgba(80, 50, 120, 0.12),
        0 8px 20px -4px rgba(80, 50, 120, 0.16),
        0 24px 54px -14px rgba(80, 50, 120, 0.20);
    --p3-lift-3:
        0 3px 5px rgba(80, 50, 120, 0.14),
        0 14px 34px -6px rgba(80, 50, 120, 0.20),
        0 44px 90px -22px rgba(80, 50, 120, 0.26);
}

/* ═══════════════════════════════════════════
   2 · UTILIDADES DE RENDER (mixins vía clase)
   ═══════════════════════════════════════════ */

/* Escenario 3D: activa perspectiva real para hijos con transform */
.p3-stage {
    perspective: 1200px;
    perspective-origin: 50% 40%;
    transform-style: preserve-3d;
}

/* Superficie de arcilla mullida con SSS + specular + rim */
.p3-clay-surface {
    position: relative;
    background: var(--p3-clay);
    border-radius: 26px;
    box-shadow: var(--p3-lift-2), inset 0 1px 0 var(--p3-spec-soft);
    isolation: isolate;
}

/* Specular sheen: banda de luz en la parte superior */
.p3-clay-surface::before,
.p3-sheen::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(120% 70% at 22% -12%, var(--p3-spec-soft) 0%, transparent 58%),
        radial-gradient(80% 50% at 82% 108%, var(--p3-sss-warm) 0%, transparent 62%);
    mix-blend-mode: screen;
    opacity: 0.85;
    z-index: 1;
}

/* Rim light: contorno luminoso de 1px que despega del fondo */
.p3-clay-surface::after,
.p3-rim::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    padding: 1px;
    background: linear-gradient(150deg,
        var(--p3-rim-gold) 0%,
        rgba(255, 255, 255, 0.06) 32%,
        transparent 55%,
        var(--p3-rim-cold) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 2;
}

/* Sombra de contacto proyectada bajo el objeto (elipse blureada) */
.p3-contact-shadow {
    position: relative;
}
.p3-contact-shadow > .p3-shadow-plane,
.p3-contact-shadow::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -14px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, var(--p3-ao) 0%, transparent 72%);
    filter: blur(6px);
    pointer-events: none;
    z-index: -1;
    transition: all 0.45s var(--p3-settle);
}

/* ═══════════════════════════════════════════
   3 · TARJETAS — MATERIAL ARCILLA VOLUMÉTRICA
   ═══════════════════════════════════════════ */
body .stat-card,
body .guide-card,
body .note-card,
body .hand-demo-card,
body .atlas-panel,
body .atlas-card-line,
body .atlas-card-mount,
body .atlas-card-finger,
body .atlas-card-minor,
body .atlas-card-measures {
    position: relative;
    isolation: isolate;
    box-shadow: var(--p3-lift-1), inset 0 1px 0 var(--p3-spec-soft);
    transition:
        transform 0.5s var(--p3-settle),
        box-shadow 0.5s var(--p3-settle),
        filter 0.4s ease;
    will-change: transform;
}

/* Highlight especular superior (no intrusivo, blend screen) */
body .stat-card::before,
body .guide-card::before,
body .note-card::before,
body .hand-demo-card::before,
body .atlas-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(130% 62% at 18% -18%, var(--p3-spec-soft) 0%, transparent 56%),
        radial-gradient(90% 55% at 88% 112%, var(--p3-sss-deep) 0%, transparent 66%);
    mix-blend-mode: screen;
    opacity: 0.7;
    z-index: 0;
}

/* Hover: la tarjeta se "levanta" con squash&stretch e inclinación sutil */
body .stat-card:hover,
body .guide-card:hover,
body .note-card:hover,
body .hand-demo-card:hover {
    transform: translateY(-9px) scale(1.022) rotateX(3.2deg);
    box-shadow: var(--p3-lift-3), inset 0 1px 0 var(--p3-spec-hot);
    filter: saturate(1.12) brightness(1.04);
}

body .stat-card:hover::before,
body .guide-card:hover::before,
body .note-card:hover::before,
body .hand-demo-card:hover::before {
    opacity: 1;
}

/* ═══════════════════════════════════════════
   4 · BOTONES — CARAMELO CON FÍSICA
   ═══════════════════════════════════════════ */
body .btn-primary,
body .btn-secondary,
body .toggle-btn,
body .atlas-side-btn,
body .atlas-mode-btn,
body .atlas-tool,
body .btn-social-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transform-origin: 50% 85%;
    box-shadow: var(--p3-lift-1), inset 0 1px 0 var(--p3-spec-soft), inset 0 -2px 6px var(--p3-ao);
    transition:
        transform 0.42s var(--p3-spring),
        box-shadow 0.42s var(--p3-settle),
        filter 0.3s ease;
}

/* Barniz: brillo elíptico fijo en la mitad superior */
body .btn-primary::after,
body .btn-secondary::after,
body .atlas-side-btn::after,
body .atlas-mode-btn::after,
body .btn-social-card::after {
    content: '';
    position: absolute;
    left: 6%;
    right: 6%;
    top: 4%;
    height: 42%;
    border-radius: 999px / 60px;
    background: linear-gradient(180deg, var(--p3-spec-hot) 0%, rgba(255, 255, 255, 0.10) 70%, transparent 100%);
    opacity: 0.30;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 2;
    transition: opacity 0.35s ease, transform 0.5s var(--p3-spring);
}

body .btn-primary:hover,
body .btn-secondary:hover,
body .atlas-side-btn:hover,
body .atlas-mode-btn:hover,
body .atlas-tool:hover,
body .btn-social-card:hover {
    transform: translateY(-3px) scale(1.035);
    box-shadow: var(--p3-lift-2), inset 0 1px 0 var(--p3-spec-hot), inset 0 -3px 8px var(--p3-ao);
    filter: saturate(1.15) brightness(1.06);
}

body .btn-primary:hover::after,
body .btn-secondary:hover::after {
    opacity: 0.52;
    transform: translateY(-1px) scaleX(1.02);
}

/* Squash al presionar: se achata y se ensancha (física de goma) */
body .btn-primary:active,
body .btn-secondary:active,
body .toggle-btn:active,
body .atlas-side-btn:active,
body .atlas-mode-btn:active,
body .atlas-tool:active,
body .btn-social-card:active {
    transform: translateY(2px) scale(0.958, 0.918);
    box-shadow: var(--p3-contact), inset 0 3px 10px var(--p3-ao);
    transition-duration: 0.09s;
}

body .btn-primary:disabled,
body .btn-primary[disabled] {
    box-shadow: inset 0 2px 8px var(--p3-ao);
    filter: saturate(0.35) brightness(0.72);
    transform: none;
}

/* Botón héroe: material oro fundido con animación de flujo */
body .btn-start-reading,
body .btn-analyze {
    background-image: var(--p3-molten), var(--p3-candy);
    background-size: 260% 100%, 100% 100%;
    background-position: 0% 50%, 0 0;
    background-blend-mode: soft-light, normal;
    animation: p3MoltenFlow 9s linear infinite;
}
body .btn-analyze:disabled,
body .btn-analyze[disabled] {
    animation: none;
}

@keyframes p3MoltenFlow {
    0%   { background-position: 0% 50%, 0 0; }
    100% { background-position: 260% 50%, 0 0; }
}

/* ═══════════════════════════════════════════
   5 · FEATURE BADGES / CHIPS — GRAGEAS 3D
   ═══════════════════════════════════════════ */
body .feature-badge,
body .oracle-suggestion-chip,
body .atlas-layer {
    position: relative;
    box-shadow:
        var(--p3-contact),
        inset 0 1px 0 var(--p3-spec-soft),
        inset 0 -2px 5px var(--p3-ao);
    transition: transform 0.4s var(--p3-spring), box-shadow 0.4s var(--p3-settle);
}
body .feature-badge:hover,
body .oracle-suggestion-chip:hover,
body .atlas-layer:hover {
    transform: translateY(-2px) scale(1.06);
    box-shadow: var(--p3-lift-1), inset 0 1px 0 var(--p3-spec-hot);
}

/* Aparición con rebote escalonado */
body .portal-features .feature-badge {
    animation: p3PopIn 0.72s var(--p3-spring) both;
}
body .portal-features .feature-badge:nth-child(1) { animation-delay: 0.10s; }
body .portal-features .feature-badge:nth-child(2) { animation-delay: 0.20s; }
body .portal-features .feature-badge:nth-child(3) { animation-delay: 0.30s; }
body .portal-features .feature-badge:nth-child(4) { animation-delay: 0.40s; }

@keyframes p3PopIn {
    0%   { opacity: 0; transform: translateY(16px) scale(0.72, 1.18); }
    55%  { opacity: 1; transform: translateY(-4px) scale(1.08, 0.94); }
    78%  { transform: translateY(1px) scale(0.98, 1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1, 1); }
}

/* ═══════════════════════════════════════════
   6 · HÉROE PIXAR — PROFUNDIDAD Y LUZ VOLUMÉTRICA
   ═══════════════════════════════════════════ */
body .pixar-hero-figure {
    position: relative;
    perspective: 1400px;
    perspective-origin: 50% 42%;
}

/* Foco volumétrico detrás del render (god ray suave) */
body .pixar-hero-figure::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 38%;
    width: 118%;
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle at 42% 34%, var(--p3-sss-warm) 0%, transparent 46%),
        radial-gradient(circle at 62% 66%, var(--p3-sss-deep) 0%, transparent 58%);
    filter: blur(30px);
    opacity: 0.85;
    pointer-events: none;
    z-index: 0;
    animation: p3VolumetricBreath 11s ease-in-out infinite;
}

/* Sombra de contacto del héroe en el "suelo" */
body .pixar-hero-figure::after {
    content: '';
    position: absolute;
    left: 22%;
    right: 22%;
    bottom: 2%;
    height: 7%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, var(--p3-ao) 0%, transparent 74%);
    filter: blur(10px);
    pointer-events: none;
    z-index: 0;
    animation: p3ContactBreath 11s ease-in-out infinite;
}

body .pixar-hero-figure img {
    position: relative;
    z-index: 1;
    transform-style: preserve-3d;
    filter:
        drop-shadow(0 18px 26px rgba(8, 1, 20, 0.52))
        drop-shadow(0 3px 5px rgba(8, 1, 20, 0.40))
        saturate(1.06);
    animation: p3HeroFloat 11s ease-in-out infinite;
}

@keyframes p3HeroFloat {
    0%, 100% { transform: translateY(0) rotateZ(0deg) rotateY(0deg) scale(1); }
    28%      { transform: translateY(-11px) rotateZ(-1.1deg) rotateY(3deg) scale(1.008); }
    56%      { transform: translateY(-5px) rotateZ(0.6deg) rotateY(-2deg) scale(0.998); }
    80%      { transform: translateY(-9px) rotateZ(-0.4deg) rotateY(1.4deg) scale(1.004); }
}
@keyframes p3VolumetricBreath {
    0%, 100% { opacity: 0.70; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 0.98; transform: translate(-50%, -50%) scale(1.07); }
}
@keyframes p3ContactBreath {
    0%, 100% { opacity: 0.95; transform: scaleX(1); }
    28%      { opacity: 0.58; transform: scaleX(0.90); }
    56%      { opacity: 0.78; transform: scaleX(0.96); }
}

/* ═══════════════════════════════════════════
   7 · ATLAS — RENDER DE ESCENARIO CINEMATOGRÁFICO
   ═══════════════════════════════════════════ */
body .atlas-stage {
    perspective: 1500px;
    perspective-origin: 50% 40%;
    transform-style: preserve-3d;
}

/* Luz de estudio: key light cálida + fill light púrpura */
body .atlas-glow {
    background:
        radial-gradient(circle at 30% 24%, var(--p3-sss-warm) 0%, transparent 52%),
        radial-gradient(circle at 72% 70%, var(--p3-sss-deep) 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, var(--p3-sss-blood) 0%, transparent 74%);
    filter: blur(26px);
    animation: p3StudioLight 14s ease-in-out infinite;
}

@keyframes p3StudioLight {
    0%, 100% { opacity: 0.72; transform: scale(1) rotate(0deg); }
    33%      { opacity: 0.95; transform: scale(1.06) rotate(4deg); }
    66%      { opacity: 0.82; transform: scale(1.02) rotate(-3deg); }
}

/* El render de la mano flota con sombra de contacto e iluminación */
body .atlas-render {
    filter:
        drop-shadow(0 16px 24px rgba(8, 1, 20, 0.50))
        drop-shadow(0 2px 4px rgba(8, 1, 20, 0.38))
        saturate(1.08) contrast(1.03);
    animation: p3AtlasHover 13s ease-in-out infinite;
    transform-style: preserve-3d;
}

@keyframes p3AtlasHover {
    0%, 100% { transform: translateY(0) rotateY(0deg) rotateX(0deg); }
    30%      { transform: translateY(-8px) rotateY(2.4deg) rotateX(-1.2deg); }
    65%      { transform: translateY(-3px) rotateY(-1.8deg) rotateX(0.8deg); }
}

/* Líneas del Atlas: cuerda luminosa con núcleo blanco y halo */
body .atlas-line {
    filter:
        drop-shadow(0 0 2px rgba(255, 255, 255, 0.55))
        drop-shadow(0 0 7px currentColor)
        drop-shadow(0 1px 1px rgba(8, 1, 20, 0.65));
    transition: filter 0.35s var(--p3-settle), stroke-width 0.35s var(--p3-spring);
}
body .atlas-line.is-active,
body .atlas-hit:hover + .atlas-line,
body .atlas-line:hover {
    filter:
        drop-shadow(0 0 3px rgba(255, 255, 255, 0.92))
        drop-shadow(0 0 14px currentColor)
        drop-shadow(0 0 26px currentColor);
}

/* Montes: esferas de gelatina con specular puntual */
body .atlas-mount {
    filter:
        drop-shadow(0 2px 3px rgba(8, 1, 20, 0.55))
        drop-shadow(0 0 10px currentColor);
    transition: transform 0.45s var(--p3-spring), filter 0.35s ease, opacity 0.3s ease;
    transform-box: fill-box;
    transform-origin: center;
}
body .atlas-mount:hover,
body .atlas-mount.is-active {
    transform: scale(1.14);
    filter:
        drop-shadow(0 3px 5px rgba(8, 1, 20, 0.62))
        drop-shadow(0 0 20px currentColor)
        brightness(1.14);
}

/* Puntas de dedos: pequeñas perlas 3D */
body .atlas-finger {
    filter: drop-shadow(0 1px 2px rgba(8, 1, 20, 0.60)) drop-shadow(0 0 8px currentColor);
    transition: transform 0.4s var(--p3-spring), filter 0.3s ease;
    transform-box: fill-box;
    transform-origin: center;
}
body .atlas-finger:hover,
body .atlas-finger.is-active {
    transform: scale(1.22);
    filter: drop-shadow(0 0 16px currentColor) brightness(1.18);
}

/* Panel del Atlas: bandeja de arcilla con bisel */
body .atlas-panel {
    box-shadow:
        var(--p3-lift-2),
        inset 0 1px 0 var(--p3-spec-soft),
        inset 0 -1px 0 var(--p3-ao);
}

/* Métricas: chips de vidrio esmerilado con profundidad */
body .atlas-metric {
    box-shadow: var(--p3-contact), inset 0 1px 0 var(--p3-spec-soft);
    transition: transform 0.35s var(--p3-spring), box-shadow 0.35s ease;
}
body .atlas-metric:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--p3-lift-1), inset 0 1px 0 var(--p3-spec-hot);
}

/* ═══════════════════════════════════════════
   8 · ZONAS DE SUBIDA — BANDEJAS BLANDAS
   ═══════════════════════════════════════════ */
body .upload-zone {
    position: relative;
    isolation: isolate;
    box-shadow: var(--p3-lift-1), inset 0 2px 8px var(--p3-ao);
    transition:
        transform 0.45s var(--p3-spring),
        box-shadow 0.45s var(--p3-settle),
        border-color 0.35s ease;
}
body .upload-zone:hover {
    transform: translateY(-5px) scale(1.014);
    box-shadow: var(--p3-lift-2), inset 0 1px 0 var(--p3-spec-soft);
}
body .upload-zone:active {
    transform: translateY(1px) scale(0.986, 0.972);
    transition-duration: 0.1s;
}

/* Mano emoji con rebote de goma */
body .upload-hand-icon {
    display: inline-block;
    transform-origin: 50% 90%;
    filter: drop-shadow(0 6px 10px rgba(8, 1, 20, 0.45));
    animation: p3RubberWave 4.2s var(--p3-squash) infinite;
}
body .upload-zone:hover .upload-hand-icon {
    animation-duration: 1.5s;
}

@keyframes p3RubberWave {
    0%, 100% { transform: rotate(0deg) scale(1, 1); }
    12%      { transform: rotate(-11deg) scale(0.94, 1.08); }
    26%      { transform: rotate(9deg) scale(1.07, 0.94); }
    38%      { transform: rotate(-5deg) scale(0.98, 1.03); }
    50%      { transform: rotate(2deg) scale(1.01, 0.99); }
}

/* Previsualización con material fotográfico y bisel */
body .upload-preview:not(.hidden) {
    box-shadow: var(--p3-lift-2), inset 0 0 0 1px var(--p3-rim-gold);
    filter: saturate(1.05) contrast(1.02);
}

/* ═══════════════════════════════════════════
   9 · TIPOGRAFÍA CON RELIEVE (bevel + emboss)
   ═══════════════════════════════════════════ */
body .section-title,
body .disclaimer-title,
body .atlas-title {
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16),
        0 -1px 0 rgba(8, 1, 20, 0.45),
        0 3px 6px rgba(8, 1, 20, 0.42),
        0 0 22px rgba(212, 175, 55, 0.20);
    paint-order: stroke fill;
}

[data-theme="light"] body .section-title,
[data-theme="light"] body .disclaimer-title,
[data-theme="light"] body .atlas-title {
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85),
        0 2px 4px rgba(90, 60, 130, 0.22);
}

/* Emojis y iconos: pequeñas esculturas con sombra propia */
body .stat-card i,
body .guide-card i,
body .note-card i,
body .feature-badge i,
body .section-title i {
    filter: drop-shadow(0 2px 3px rgba(8, 1, 20, 0.48));
}

/* ═══════════════════════════════════════════
   10 · MANDALA DE CARGA — ANILLOS VOLUMÉTRICOS
   ═══════════════════════════════════════════ */
body .loading-mandala {
    perspective: 900px;
    transform-style: preserve-3d;
    filter: drop-shadow(0 0 18px rgba(139, 92, 246, 0.42));
}
body .mandala-ring {
    box-shadow:
        inset 0 0 12px rgba(212, 175, 55, 0.28),
        0 0 18px rgba(139, 92, 246, 0.30);
}
body .loading-palm {
    filter: drop-shadow(0 6px 12px rgba(8, 1, 20, 0.55));
    animation: p3PalmPulse 2.4s var(--p3-squash) infinite;
}

@keyframes p3PalmPulse {
    0%, 100% { transform: scale(1, 1) translateZ(0); }
    40%      { transform: scale(1.10, 0.93); }
    68%      { transform: scale(0.96, 1.05); }
}

/* ═══════════════════════════════════════════
   11 · APARICIÓN CINEMATOGRÁFICA AL SCROLL
   ═══════════════════════════════════════════ */
body .reveal-up.is-visible,
body .scroll-reveal.is-visible,
body .atlas-mount-point.reveal-up {
    animation: p3CameraIn 0.9s var(--p3-settle) both;
}

@keyframes p3CameraIn {
    0%   { opacity: 0; transform: translateY(30px) scale(0.965) rotateX(6deg); filter: blur(4px); }
    60%  { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0deg); filter: blur(0); }
}

/* ═══════════════════════════════════════════
   12 · CAMPOS DE FORMULARIO — MATERIAL HUNDIDO
   ═══════════════════════════════════════════ */
body .form-group input,
body .form-group select,
body .form-select {
    box-shadow:
        inset 0 2px 6px var(--p3-ao),
        inset 0 -1px 0 var(--p3-spec-soft),
        0 1px 0 rgba(255, 255, 255, 0.05);
    transition: box-shadow 0.35s var(--p3-settle), transform 0.3s var(--p3-spring);
}
body .form-group input:focus,
body .form-group select:focus,
body .form-select:focus {
    box-shadow:
        inset 0 2px 8px var(--p3-ao),
        0 0 0 3px rgba(139, 92, 246, 0.32),
        0 6px 18px -6px rgba(139, 92, 246, 0.45);
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════
   13 · PESTAÑAS — TECLAS DE MÁQUINA
   ═══════════════════════════════════════════ */
body .guide-tab,
body .cosmos-tab {
    box-shadow: var(--p3-contact), inset 0 1px 0 var(--p3-spec-soft), inset 0 -2px 4px var(--p3-ao);
    transition: transform 0.32s var(--p3-spring), box-shadow 0.32s ease;
}
body .guide-tab:hover,
body .cosmos-tab:hover {
    transform: translateY(-2px);
    box-shadow: var(--p3-lift-1), inset 0 1px 0 var(--p3-spec-hot);
}
body .guide-tab[aria-selected="true"],
body .guide-tab.active,
body .cosmos-tab[aria-selected="true"],
body .cosmos-tab.active {
    transform: translateY(1px);
    box-shadow: inset 0 3px 8px var(--p3-ao), 0 0 16px rgba(212, 175, 55, 0.22);
}

/* ═══════════════════════════════════════════
   14 · AURORA — NIEBLA VOLUMÉTRICA MÁS ORGÁNICA
   ═══════════════════════════════════════════ */
body .aurora-blob {
    mix-blend-mode: screen;
    filter: blur(72px) saturate(1.25);
}

/* ═══════════════════════════════════════════
   15 · RENDIMIENTO: contención de pintura
   ═══════════════════════════════════════════ */
body .stat-card,
body .guide-card,
body .note-card,
body .hand-demo-card,
body .atlas-metric,
body .feature-badge {
    contain: paint;
}

/* ═══════════════════════════════════════════
   17 · MANOS DE LA GUÍA — SVG CON VOLUMEN
   Las siluetas eran planas (un gradiente beige de dos paradas y borde
   marrón). Ahora la piel lleva 5 paradas radiales, oclusión en el hueco
   de la palma, rim light violeta-oro y especular en las yemas; aquí se
   añade la respiración y el contraste de las etiquetas.
   ═══════════════════════════════════════════ */
body .hand-render-stage .hand-render {
    animation: p3HandBreathe 8.5s ease-in-out infinite;
    transform-origin: 50% 62%;
}
body .hand-render-stage[data-side="right"] .hand-render { animation-delay: -4.25s; }

@keyframes p3HandBreathe {
    0%, 100% { transform: translateY(0)      scale(1.005);  }
    50%      { transform: translateY(-6px)   scale(1.022);  }
}
/* La versión reflejada (mano izquierda) debe conservar el `scale(-1,1)`
   fijo definido en styles.css mientras respira, por eso el `transform`
   de la animación se compone sobre la propiedad `scale` independiente
   en vez de pisarla (mismo truco que usa el Atlas Anatómico). */

/* La foto reacciona al puntero sobre su tarjeta, como antes con la silueta SVG */
body .hand-render-stage .hand-render {
    transition: filter 0.45s var(--p3-settle);
}
body .hand-demo-card:hover .hand-render-stage .hand-render {
    filter: saturate(1.12) brightness(1.06);
}

/* Aura dorada sutil sobre el escenario, coherente con el Atlas */
body .hand-render-stage::after {
    content: '';
    position: absolute; inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(circle at 54% 46%, rgba(244, 221, 154, 0.14), transparent 60%);
    animation: atlasBreathe 6s ease-in-out infinite;
}

/* ═══════════════════════════════════════════
   18 · BOTÓN PRINCIPAL — ORO FUNDIDO
   El usuario pidió que resalte más y que las letras sean doradas.
   El fondo pasa a púrpura profundo (para que el oro contraste de
   verdad) con anillo y aura dorados; el texto es un degradado de oro
   recortado sobre el glifo.
   ═══════════════════════════════════════════ */
body .btn-start-reading {
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%,
                                rgba(255, 255, 255, 0.04) 42%,
                                rgba(0, 0, 0, 0.16) 100%),
        linear-gradient(135deg, #4c1d95 0%, #6d28d9 40%,
                                #7c3aed 62%, #4c1d95 100%) !important;
    border: 2px solid transparent !important;
    /* El anillo dorado se pinta en el borde con dos capas de fondo:
       la interior recortada al padding-box, la exterior al border-box. */
    background-origin: border-box !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 236, 179, 0.55),
        inset 0 2px 3px rgba(255, 245, 214, 0.42),
        inset 0 -4px 10px rgba(46, 16, 88, 0.6),
        0 6px 22px -6px rgba(212, 175, 55, 0.75),
        0 14px 40px -12px rgba(124, 58, 237, 0.7) !important;
    animation: p3GoldPulse 3.4s ease-in-out infinite !important;
}

/* Letras y glifo en oro */
body .btn-start-reading,
body .btn-start-reading span,
body .btn-start-reading i {
    background-image: linear-gradient(180deg,
        #fff6d5 0%, #f7dd8f 28%, #e8b93f 58%, #fff2c4 84%, #d9a520 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none;
    font-weight: 800;
    letter-spacing: 0.03em;
}
/* El propio botón necesita su fondo visible: solo el TEXTO va recortado,
   así que se restaura el pintado del fondo en el elemento contenedor. */
body .btn-start-reading {
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
}
body .btn-start-reading span,
body .btn-start-reading i {
    filter: drop-shadow(0 1px 1px rgba(46, 16, 88, 0.85));
}

@keyframes p3GoldPulse {
    0%, 100% {
        box-shadow:
            inset 0 0 0 1px rgba(255, 236, 179, 0.55),
            inset 0 2px 3px rgba(255, 245, 214, 0.42),
            inset 0 -4px 10px rgba(46, 16, 88, 0.6),
            0 6px 22px -6px rgba(212, 175, 55, 0.75),
            0 14px 40px -12px rgba(124, 58, 237, 0.7);
    }
    50% {
        box-shadow:
            inset 0 0 0 1px rgba(255, 244, 205, 0.8),
            inset 0 2px 3px rgba(255, 245, 214, 0.55),
            inset 0 -4px 10px rgba(46, 16, 88, 0.55),
            0 8px 30px -4px rgba(240, 200, 90, 0.95),
            0 20px 56px -12px rgba(167, 139, 250, 0.8);
    }
}

body .btn-start-reading:hover {
    filter: brightness(1.1) saturate(1.14);
}

/* ═══════════════════════════════════════════
   16 · ACCESIBILIDAD Y PREFERENCIAS
   ═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    body .btn-start-reading,
    body .btn-analyze,
    body .pixar-hero-figure::before,
    body .pixar-hero-figure::after,
    body .pixar-hero-figure img,
    body .atlas-glow,
    body .atlas-render,
    body .upload-hand-icon,
    body .loading-palm,
    body .portal-features .feature-badge,
    body .reveal-up.is-visible,
    body .scroll-reveal.is-visible,
    body .atlas-mount-point.reveal-up {
        animation: none !important;
    }
    body .stat-card,
    body .guide-card,
    body .note-card,
    body .hand-demo-card,
    body .btn-primary,
    body .btn-secondary,
    body .upload-zone,
    body .atlas-mount,
    body .atlas-finger,
    body .atlas-metric {
        transition-duration: 0.01ms !important;
    }
    body .stat-card:hover,
    body .guide-card:hover,
    body .note-card:hover,
    body .hand-demo-card:hover,
    body .btn-primary:hover,
    body .upload-zone:hover {
        transform: none;
    }
}

@media (prefers-contrast: more) {
    body .stat-card::before,
    body .guide-card::before,
    body .note-card::before,
    body .hand-demo-card::before,
    body .atlas-panel::before,
    body .btn-primary::after,
    body .btn-secondary::after {
        display: none;
    }
    body .section-title,
    body .disclaimer-title,
    body .atlas-title {
        text-shadow: none;
    }
}

@media (forced-colors: active) {
    body .stat-card::before,
    body .guide-card::before,
    body .note-card::before,
    body .hand-demo-card::before,
    body .atlas-panel::before,
    body .btn-primary::after,
    body .btn-secondary::after,
    body .pixar-hero-figure::before,
    body .pixar-hero-figure::after {
        display: none;
    }
    body .atlas-line,
    body .atlas-mount,
    body .atlas-finger,
    body .atlas-render {
        filter: none;
        animation: none;
    }
}

/* Móvil: menos capas de sombra y sin transformaciones 3D costosas */
@media (max-width: 640px) {
    body .stat-card:hover,
    body .guide-card:hover,
    body .note-card:hover,
    body .hand-demo-card:hover {
        transform: translateY(-4px) scale(1.008);
        box-shadow: var(--p3-lift-2);
    }
    body .pixar-hero-figure::before { filter: blur(20px); }
    body .atlas-glow { filter: blur(18px); }
    body .aurora-blob { filter: blur(48px) saturate(1.15); }
}

/* Impresión: material plano */
@media print {
    body .stat-card,
    body .guide-card,
    body .note-card,
    body .hand-demo-card,
    body .atlas-panel,
    body .btn-primary,
    body .btn-secondary {
        box-shadow: none !important;
        filter: none !important;
        animation: none !important;
        transform: none !important;
    }
    body .stat-card::before,
    body .guide-card::before,
    body .note-card::before,
    body .atlas-panel::before,
    body .btn-primary::after { display: none !important; }
}