/* Colores del fondo, cristal y texto: claro inicial, oscuro por elección. */
.welcome-page {
  --welcome-bg: #F5F2FB;
  --welcome-mobile-surface: #FFFFFF;
  --welcome-mobile-wash: rgba(255,255,255,.68);
  --welcome-text: #241B39;
  --welcome-muted: #514365;
  --welcome-soft: #645575;
  --welcome-guide: radial-gradient(ellipse at 80% 20%, #DFD4F1 0%, #EDE7F7 40%, #F8F6FC 85%);
  --welcome-veil: linear-gradient(180deg, rgba(250,247,255,.42), rgba(250,247,255,.65));
  --welcome-header: rgba(255,255,255,.72);
  --welcome-panel: rgba(255,255,255,.66);
  --welcome-panel-hover: rgba(255,255,255,.88);
  --welcome-menu: rgba(250,247,255,.97);
  --welcome-border: rgba(64,43,96,.2);
  --welcome-glow: rgba(255,255,255,.94);
  --welcome-glow-soft: rgba(255,255,255,.7);
  --welcome-brand-start: #6D28D9;
  --welcome-brand-end: #086D77;
  --welcome-link: #6635A8;
  --welcome-logo-filter: none;
  --welcome-accessible-brand: #8B5400;
}
html[data-theme="dark"] .welcome-page {
  --welcome-bg: #151126;
  --welcome-mobile-surface: #171327;
  --welcome-mobile-wash: rgba(23,19,39,.86);
  --welcome-text: #FFFFFF;
  --welcome-muted: #E6DDEE;
  --welcome-soft: #D5C8E4;
  --welcome-guide: radial-gradient(ellipse at 80% 20%, #5B447E 0%, #2E2345 40%, #171327 85%);
  --welcome-veil: linear-gradient(180deg, rgba(8,6,20,.12), rgba(8,6,20,.45));
  --welcome-header: rgba(17,13,31,.55);
  --welcome-panel: rgba(21,16,37,.48);
  --welcome-panel-hover: rgba(47,34,70,.75);
  --welcome-menu: rgba(23,18,40,.96);
  --welcome-border: rgba(255,255,255,.2);
  --welcome-glow: rgba(9,7,23,.9);
  --welcome-glow-soft: rgba(9,7,23,.6);
  --welcome-brand-start: #D2B6FF;
  --welcome-brand-end: #96EBE4;
  --welcome-link: #D9C1FF;
  --welcome-logo-filter: brightness(0) invert(1);
  --welcome-accessible-brand: #FFD477;
}
/* La interpretación conserva el encuadre completo; el texto tiene una zona propia. */
.welcome-page { position: relative; isolation: isolate; min-height: 100svh; background: var(--welcome-guide); background-attachment: fixed; color: var(--welcome-text); }
.welcome-video-card { width: min(100%, 400px); min-width: 0; justify-self: end; margin: 0; }
.welcome-video-stage { position: relative; width: 100%; aspect-ratio: 1; background: #111827; border: 1px solid var(--welcome-border); border-radius: 22px; overflow: hidden; }
.welcome-video-stage video { display: block; width: 100%; height: 100%; object-fit: contain; }
.welcome-video-backdrop { display: none; }
.welcome-video-stage video[hidden], .welcome-video-guide[hidden] { display: none; }
.welcome-video-guide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; color: var(--welcome-text); background: var(--welcome-guide); }
.welcome-video-label { color: var(--welcome-soft); font-size: .6rem; text-transform: uppercase; letter-spacing: .09em; }
.welcome-sign-symbol { width: 64px; height: 64px; padding: 12px; border: 1px solid var(--welcome-border); border-radius: 20px; color: var(--welcome-brand-start); background: var(--welcome-panel); }
.welcome-sign-symbol svg { width: 100%; height: 100%; display: block; }
.welcome-video-guide h2 { font-size: 1.25rem; font-weight: 500; letter-spacing: -.025em; line-height: 1.4; }
.welcome-video-guide p { color: var(--welcome-muted); font-size: .72rem; line-height: 1.6; }
.welcome-video-pending { color: var(--welcome-soft); border: 1px solid var(--welcome-border); padding: 6px 10px; border-radius: 100px; font-size: .6rem; }
.welcome-page .header-container.has-global-navigation { background: var(--welcome-header); border-color: var(--welcome-border); box-shadow: none; }
.welcome-page .brand-official-logo { filter: var(--welcome-logo-filter); }
.welcome-page .site-menu-links a { color: var(--welcome-text); }
.welcome-page .site-menu-links a:hover { background: var(--welcome-panel-hover); color: var(--welcome-text); }
.welcome-page .site-tools .btn { color: var(--welcome-text); }
.welcome-page .site-tools .btn:hover { background: var(--welcome-panel-hover); border-color: var(--welcome-border); }
.welcome-page .site-menu-toggle { background: var(--welcome-panel); border-color: var(--welcome-border); color: var(--welcome-text); }
.welcome-page .site-menu[open] .site-menu-links { background: var(--welcome-menu); border-color: var(--welcome-border); }
@media (min-width: 1200px) { .welcome-page .site-menu[open] .site-menu-links { background: none; border: 0; } }
.welcome-main { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px 32px 28px; min-height: calc(100svh - 148px); }
.welcome-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 64px); align-items: center; min-height: clamp(320px, 45svh, 440px); }
.welcome-copy { position: relative; isolation: isolate; width: 100%; min-width: 0; margin: 24px 0; padding: 16px 0; color: var(--welcome-text); }
.welcome-copy::before { content: ''; position: absolute; z-index: -1; inset: -64px -48px; pointer-events: none; background: radial-gradient(ellipse closest-side at center, var(--welcome-glow) 0%, var(--welcome-glow-soft) 55%, transparent 100%); }
.welcome-copy h1 { position: relative; color: var(--welcome-text); font-family: 'Montserrat', sans-serif; font-size: clamp(2.2rem, 4.2vw, 3.6rem); font-weight: 700; line-height: 1.1; letter-spacing: -.05em; margin: 0 0 22px; overflow-wrap: anywhere; text-shadow: none; }
.welcome-title-reserve { display: block; opacity: 0; }
#welcome-title-animated { position: absolute; inset: 0; }
.welcome-brand-highlight { color: var(--welcome-brand-start); background: linear-gradient(105deg, var(--welcome-brand-start), var(--welcome-brand-end)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.welcome-message { position: relative; }
.welcome-message p { color: var(--welcome-muted); font-size: .98rem; line-height: 1.8; overflow-wrap: anywhere; max-width: 580px; }
.welcome-message-reserve { opacity: 0; }
#welcome-message-animated { position: absolute; inset: 0; }
#welcome-title-animated.is-typing::after, #welcome-message-animated.is-typing::after { content: '|'; color: var(--welcome-brand-start); font-weight: 400; }
.welcome-interpreter-credit { font-size: .8rem; line-height: 1.6; margin: 16px 0 0; color: var(--welcome-muted); }
.welcome-interpreter-credit a { color: var(--welcome-text); font-weight: 600; text-decoration-color: var(--welcome-border); text-underline-offset: 4px; }
.welcome-playback { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.welcome-text-button { min-height: 44px; padding: 10px 14px; color: var(--welcome-text); background: var(--welcome-panel); border: 1px solid var(--welcome-border); border-radius: 100px; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.welcome-text-button:hover { background: var(--welcome-panel-hover); }
.welcome-explore { position: relative; margin-top: 6px; }
.welcome-explore-heading { position: relative; isolation: isolate; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; padding: 14px 0 18px; margin-bottom: 8px; }
.welcome-explore-heading::before { content: ''; position: absolute; z-index: -1; inset: -24px 0; background: radial-gradient(ellipse closest-side at center, var(--welcome-glow) 0%, var(--welcome-glow-soft) 55%, transparent 100%); pointer-events: none; }
.welcome-explore-heading h2 { color: var(--welcome-text); font-family: 'Montserrat', sans-serif; font-size: 1.16rem; font-weight: 600; letter-spacing: -.035em; line-height: 1.4; }
.welcome-explore-heading > p { color: var(--welcome-muted); font-size: .72rem; }
.welcome-paths { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.welcome-path { display: flex; flex-direction: column; position: relative; min-width: 0; padding: 18px; border: 2px solid color-mix(in srgb, var(--color-primary) 45%, var(--welcome-border)); border-radius: 18px; background: var(--welcome-panel); box-shadow: 0 5px 16px #5830a812; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--welcome-text); text-decoration: none; transition: background .18s ease, border-color .18s ease; }
.welcome-path:hover { background: var(--welcome-panel-hover); border-color: #BFA3E5; }
.welcome-path-number { font-size: .62rem; color: var(--welcome-soft); margin-bottom: 12px; }
.welcome-path h3 { color: var(--welcome-text); font-size: 1rem; line-height: 1.4; font-weight: 700; margin-bottom: 6px; }
.welcome-path p { color: var(--welcome-muted); font-size: .8rem; line-height: 1.6; margin-bottom: 12px; }
.welcome-path-action { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 48px; padding: 12px; margin-top: auto; border-radius: 12px; background: var(--color-primary); font-size: .85rem; line-height: 1.5; font-weight: 700; color: #fff; }
.welcome-path:hover .welcome-path-action { background: var(--color-primary-dark); }
.welcome-path:focus-visible, .welcome-text-button:focus-visible { outline: 3px solid var(--border-focus); outline-offset: 4px; }
.welcome-footer { padding: 16px 20px; color: var(--welcome-muted); background: var(--welcome-panel); border-top: 1px solid var(--welcome-border); font-size: .65rem; }
html[data-high-contrast] .welcome-page {
  --welcome-mobile-surface: var(--bg-surface);
  --welcome-mobile-wash: var(--bg-surface);
  --welcome-text: var(--text-main);
  --welcome-muted: var(--text-main);
  --welcome-soft: var(--text-main);
  --welcome-panel: var(--bg-surface);
  --welcome-panel-hover: var(--bg-surface);
  --welcome-header: var(--bg-surface);
  --welcome-menu: var(--bg-surface);
  --welcome-border: var(--text-main);
  --welcome-glow: var(--bg-surface);
  --welcome-glow-soft: var(--bg-surface);
}
html[data-high-contrast] .welcome-page :is(.welcome-path, .header-container) { backdrop-filter: none; }
html[data-high-contrast] .welcome-brand-highlight, html[data-saturation="gray"] .welcome-brand-highlight { color: var(--welcome-text); background: none; -webkit-text-fill-color: currentColor; }
html[data-accessible-colors] .welcome-brand-highlight { color: var(--welcome-accessible-brand); background: none; -webkit-text-fill-color: currentColor; }
@media (max-width: 1000px) {
  .welcome-paths { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .welcome-main { padding: 18px 18px 24px; min-height: 0; }
  .welcome-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; width: min(100%, 420px); margin-inline: auto; min-height: 0; gap: 0; border: 1px solid var(--welcome-border); border-radius: 22px; overflow: hidden; background: var(--welcome-mobile-surface); }
  /* Dos capas del mismo video: interpretación completa y nítida arriba;
     fotogramas ambientales detrás de la copia, sin otro decodificador. */
  .welcome-video-card { grid-area: 1 / 1; align-self: stretch; width: 100%; height: 100%; justify-self: stretch; margin: 0; }
  .welcome-video-stage { height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; background: var(--welcome-mobile-surface); }
  .welcome-video-backdrop { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(8px); transform: scale(1.08); }
  .welcome-video-stage video { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: auto; aspect-ratio: 1; }
  .welcome-video-guide { bottom: auto; width: 100%; aspect-ratio: 1; }
  .welcome-copy { grid-area: 1 / 1; align-self: end; z-index: 2; width: 100%; margin: 100% 0 0; padding: 18px; background: transparent; }
  .welcome-copy::before { inset: 0; height: auto; background: linear-gradient(to bottom, transparent 0, var(--welcome-mobile-wash) 16px, var(--welcome-mobile-surface) 100%); }
  .welcome-hero:not(.has-welcome-video) .welcome-copy::before { background: var(--welcome-mobile-surface); }
  .welcome-copy h1 { font-size: clamp(1.65rem, 6.8vw, 2rem); margin-bottom: 12px; }
  .welcome-message p { font-size: .82rem; line-height: 1.75; }
  .has-welcome-video .welcome-copy .welcome-message p { color: var(--welcome-text); }
  .welcome-playback { margin-top: 14px; gap: 8px; }
  .welcome-video-label { font-size: .52rem; }
  .welcome-video-pending { font-size: .6rem; padding: 4px 8px; }
  .welcome-sign-symbol { width: 52px; height: 52px; border-radius: 16px; padding: 8px; }
  .welcome-explore { margin-top: 4px; }
  .welcome-explore-heading { padding: 12px 0; margin-bottom: 8px; }
  .welcome-explore-heading h2 { font-size: 1rem; }
  .welcome-explore-heading > p { display: none; }
  .welcome-explore-heading::before { inset: -20px 0; }
  .welcome-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .welcome-path { min-height: 190px; padding: 16px; border-radius: 16px; }
  .welcome-path-number { position: absolute; right: 12px; top: 12px; font-size: .55rem; opacity: .75; }
  .welcome-path h3 { font-size: 1.18rem; padding-right: 14px; }
  .welcome-path p { font-size: .95rem; line-height: 1.65; margin-bottom: 12px; }
  .welcome-path-action { font-size: 1rem; }
  .welcome-path:last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .welcome-page *, .welcome-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }