/* (Estilos de Twitch eliminados) */

/* Estilos para los iconos sociales en el footer */
.social-footer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.25rem; /* 20px */
    margin-top: 1rem;
}

/* Tipografía display para encabezados grandes (Muriel) */
:root {
  --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  --font-display: 'Muriel', var(--font-body);
}

:root, body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji'; }
body { background-color: #0e0e0f; color: #e5e7eb; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.section-title { font-size: 2rem; margin-bottom: 1rem; color: #1f2937; }
.section-subtitle { font-size: 1.25rem; color: #4b5563; }
.mb-8 { margin-bottom: 2rem; }
.mt-4 { margin-top: 1rem; }

/*
@font-face {
  font-family: 'Muriel';
  src: url('../assets/fonts/muriel/Muriel-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Muriel';
  src: url('../assets/fonts/muriel/Muriel-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*/

/* Aplicación a titulares grandes */
#hero h1,
#universo h2,
#creacion h2,
#aprendizaje h2,
#cultura h2,
#autor h2 {
  font-family: var(--font-display);
  letter-spacing: 0.2px;
}

/* Spotlight + suelo (escenario) */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
      /* cono de luz central superior (muy marcado) */
      radial-gradient(35% 24% at 50% 0%, rgba(255,255,255,0.58) 0%, rgba(255,255,255,0.34) 36%, rgba(0,0,0,0.00) 62%),
      /* glow vertical de la luz cayendo */
      linear-gradient(180deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.00) 46%),
      /* halo del suelo (muy marcado) */
      radial-gradient(66% 12% at 50% 80%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.16) 62%, rgba(0,0,0,0.00) 82%),
      /* sombra del borde del escenario */
      radial-gradient(84% 12% at 50% 86%, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.00) 64%);
    pointer-events: none;
}

.social-footer a {
    transition: transform 0.2s ease-in-out;
}

.social-footer a:hover {
    transform: scale(1.1);
}

#madrid-clock {
    font-size: 0.875rem; /* 14px */
    color: #a8a29e; /* stone-400 */
    margin-top: 1rem;
}

/* (Contenedor Twitch eliminado) */

/* Chat Styles - Streamer Theme */
#chat-container {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(229, 231, 235, 0.5);
}

#chat-header {
    background-color: #ef4444; /* red-500 */
}

#google-login-button,
#chat-send-button {
    background-color: #ef4444; /* red-500 */
    transition: background-color 0.2s;
}

#google-login-button:hover,
#chat-send-button:hover {
    background-color: #dc2626; /* red-600 */
}

#chat-messages {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
}

.chat-message {
    display: flex;
    flex-direction: column;
    max-width: 80%;
}

.chat-message.current-user {
    align-self: flex-end;
    align-items: flex-end;
}

.chat-message.other-user {
    align-self: flex-start;
    align-items: flex-start;
}

.message-author {
    font-size: 0.75rem;
    color: #44403c; /* stone-700 */
    margin-bottom: 0.25rem;
    padding: 0 0.5rem;
    font-weight: 600;
}

.message-bubble {
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    line-height: 1.5;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.chat-message.current-user .message-bubble {
    background-color: #dc2626; /* red-600 */
    color: white;
    border-bottom-right-radius: 0.25rem;
}

.chat-message.other-user .message-bubble {
    background-color: #ffffff;
    color: #292524; /* stone-800 */
    border-bottom-left-radius: 0.25rem;
}

/* Accordion (Ciclo Virtuoso) */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms ease;
}

.cycle-header {
    color: #1c1917; /* stone-900 */
    transition: background-color 180ms ease, color 180ms ease;
}

.cycle-header:focus-visible {
    outline: 2px solid #ef4444; /* red-500 */
    outline-offset: 2px;
    border-radius: 0.5rem; /* match rounded-lg */
}

.cycle-header .chevron {
    transform: rotate(0deg);
    color: #a8a29e; /* stone-400 */
    transition: transform 200ms ease, color 180ms ease;
}

.cycle-item {
    transition: border-color 200ms ease, box-shadow 200ms ease;
    background-color: #ffffff;
}

.cycle-item:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.cycle-item.open {
    border-color: #ef4444; /* red-500 */
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.08);
}

.cycle-item.open .cycle-header {
    background-color: #fef2f2; /* red-50 */
    color: #991b1b; /* red-800 */
}

.cycle-item.open .chevron {
    transform: rotate(180deg);
    color: #ef4444; /* red-500 */
}

/* Separador entre pasos (flecha + líneas tenues) */
.arrow-sep {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: #ef4444; /* red-500 */
    opacity: 0.9;
    margin: 0.25rem 0;
}

.arrow-sep::before,
.arrow-sep::after {
    content: '';
    height: 1px;
    flex: 1 1 0%;
    background: linear-gradient(to right, rgba(214, 211, 209, 0), rgba(214, 211, 209, 1), rgba(214, 211, 209, 0)); /* stone-300 */
}

/* Sección Sobre el Autor: fondo rojo con ornamentos sutiles */
#autor {
    position: relative;
    overflow: hidden;
}

#autor::before {
    /* Orbes suaves en esquinas */
    content: '';
    position: absolute;
    inset: -10%;
    background:
      radial-gradient(600px 600px at -10% 20%, rgba(255,255,255,0.18), rgba(255,255,255,0) 60%),
      radial-gradient(500px 500px at 110% 80%, rgba(255,255,255,0.12), rgba(255,255,255,0) 55%);
    pointer-events: none;
}

#autor::after {
    /* Líneas diagonales muy tenues */
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 2px, rgba(255,255,255,0) 2px 12px);
    mix-blend-mode: soft-light;
    pointer-events: none;
}

/* Afinado de tipografía dentro de #autor cuando se use texto blanco */
#autor .text-on-red-strong { color: #ffffff; }
#autor .text-on-red-soft { color: rgba(255,255,255,0.85); }
#autor .text-on-red-muted { color: rgba(255,255,255,0.7); }

/* Asegura contenido por encima de pliegues */
#autor .container { position: relative; z-index: 1; }

/* Pliegues diagonales para efecto de profundidad */
#autor .autor-fold {
    position: absolute;
    left: -12%;
    right: -12%;
    pointer-events: none;
    z-index: 0;
}

#autor .autor-fold-top {
    top: -8%;
    height: 46%;
    transform: skewY(-12deg);
    transform-origin: top left;
    background:
      linear-gradient(135deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.18) 45%, rgba(0,0,0,0.0) 72%),
      linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0)); /* leve brillo superior */
    mix-blend-mode: multiply;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}

#autor .autor-fold-bottom {
    bottom: -10%;
    height: 48%;
    transform: skewY(12deg);
    transform-origin: bottom left;
    background:
      linear-gradient(315deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.18) 45%, rgba(0,0,0,0.0) 72%),
      linear-gradient(0deg, rgba(255,255,255,0.08), rgba(255,255,255,0)); /* leve brillo inferior */
    mix-blend-mode: multiply;
    box-shadow: 0 -10px 36px rgba(0,0,0,0.22);
}

@media (min-width: 768px) {
  #autor .autor-fold-top { height: 42%; transform: skewY(-10deg); }
  #autor .autor-fold-bottom { height: 44%; transform: skewY(10deg); }
}

/* Fondo global base: gris muy oscuro, sin textura */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
      /* viñetas fuertes para profundidad */
      radial-gradient(80% 50% at 50% -10%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 28%, rgba(0,0,0,0.00) 58%),
      radial-gradient(92% 52% at 50% 112%, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0.00) 58%),
      /* base gris vertical */
      linear-gradient(180deg, #161617 0%, #121213 60%, #0e0e0f 100%);
    background-color: #111213; /* base oscura gris */
}

/* Widget superior derecho (clock + estado Twitch + redes) */
.header-widget { display: none; }

@media (min-width: 768px) {
  .header-widget {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

.header-widget .status-button, .hero-widget .status-button {
    height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    color: #991b1b;      /* red-800 */
    border: 1px solid #fecaca; /* red-300 */
}

.header-widget .status-button.online, .hero-widget .status-button.online { background: #dc2626; color: #fff; border-color: #b91c1c; }
.header-widget .status-button.offline, .hero-widget .status-button.offline { background: #fef2f2; color: #991b1b; }

.header-widget .social-icon-link img, .hero-widget .social-icon-link img { width: 18px; height: 18px; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.08)); }
.header-widget .social-icon-link, .hero-widget .social-icon-link { opacity: 0.85; transition: opacity .15s ease; }
.header-widget .social-icon-link:hover, .hero-widget .social-icon-link:hover { opacity: 1; }

.header-widget .clock, .hero-widget .clock { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; color: #44403c; /* stone-700 */ }

/* Layout del héroe */
.hero-widget { align-items: center; gap: 0.5rem; }

/* Evitar duplicados en footer (opcional) */
footer .social-icons, footer .clock-container { display: none; }

/* Tarjetas de Aprendizaje (Pilar 2) */
.learn-card {
    background: #fff;
    border: 1px solid #e7e5e4; /* stone-200 */
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    transition: transform .15s ease, box-shadow .15s ease;
}
.learn-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
.learn-card .step {
    width: 28px; height: 28px; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fee2e2; color: #b91c1c; font-weight: 700; margin-bottom: 8px;
}
.learn-card h4 { font-weight: 700; color: #1c1917; margin-bottom: 6px; }
.learn-card p { color: #57534e; font-size: 0.95rem; }

/* Asegurar contraste dentro de tarjetas del Pilar 2 sobre fondo claro */
#aprendizaje .learn-card h4 { color: #111827; /* stone-900 */ }
#aprendizaje .learn-card p { color: #374151; /* stone-700 */ }

/* Chart responsive */
.chart-container { position: relative; width: 100%; max-width: 640px; }
.chart-container canvas { width: 100% !important; height: auto !important; }

/* Explora el Ecosistema: estilo "Sobre el Autor" sin textura */
#universo { position: relative; overflow: hidden;
  /* rojo opaco tipo autor, sin líneas diagonales */
  background: linear-gradient(180deg, #b91c1c 0%, #991b1b 60%, #7f1d1d 100%);
}
#universo::before { content: none; }
#universo > .container { position: relative; z-index: 2; }
/* Textos sobre rojo */
#universo h2 { color: #ffffff; }
#universo p { color: #fde2e2; }

/* Asegurar contraste en tarjetas del grid Ecosistema */
#universo .project-card { background: #ffffff; color: #111827; }
#universo .project-card h3 { color: #111827; }
#universo .project-card p { color: #374151; }

/* Pilar 3: Cultura con escenario como Ecosistema anterior */
#cultura { position: relative; overflow: hidden; background: transparent !important; }
#cultura > .container { position: relative; z-index: 2; }
#cultura::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    /* cono de luz superior */
    radial-gradient(36% 28% at 50% 0%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.28) 34%, rgba(0,0,0,0.00) 62%),
    /* glow vertical */
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.00) 46%),
    /* halo del suelo */
    radial-gradient(72% 14% at 50% 82%, rgba(255,255,255,0.40) 0%, rgba(255,255,255,0.16) 60%, rgba(0,0,0,0.00) 84%);
  pointer-events: none;
}
/* Textos más claros en Cultura */
#cultura h2 { color: #f8fafc; }
#cultura p { color: #e5e7eb; }

/* Glassmorphism para tarjetas en Cultura */
#cultura .bg-stone-50 {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  color: #111827; /* negro/gris muy oscuro para textos por defecto */
}
#cultura .bg-stone-50 h3 { color: #ffffff; }
#cultura .bg-stone-50 p { color: #111827; }

/* Fondo con ondas para #aprendizaje (estilo escenario/autor) */
#aprendizaje {
  position: relative;
  overflow: hidden;
  /* Fondo opaco tipo 'Sobre el autor' */
  background:
    linear-gradient(180deg, #7f1d1d 0%, #991b1b 50%, #7f1d1d 100%);
}
#aprendizaje > .container { position: relative; z-index: 2; }

/* Capa superior: curva roja */
#aprendizaje::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 50%;
    transform: translateX(-50%);
    width: min(1400px, 120vw);
    height: clamp(120px, 22vw, 260px);
    top: 0;
    z-index: 0;
    background:
      linear-gradient(90deg, rgba(185,28,28,0.95), rgba(239,68,68,0.90)); /* red-700 -> red-500 */
    border-bottom-left-radius: 50% 100%;
    border-bottom-right-radius: 50% 100%;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,0.06));
}

/* Capa inferior: ondas múltiples rojas */
#aprendizaje::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: min(1600px, 140vw);
    height: clamp(120px, 24vw, 300px);
    z-index: 0;
    background:
      radial-gradient(80% 60% at 50% 80%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.0) 60%),
      linear-gradient(180deg, rgba(254,226,226,0.92), rgba(254,202,202,0.88)), /* red-100/200 */
      repeating-linear-gradient(160deg, rgba(185,28,28,0.28) 0 8px, rgba(239,68,68,0.16) 8px 18px, rgba(254,226,226,0.0) 18px 28px);
    border-top-left-radius: 60% 100%;
    border-top-right-radius: 60% 100%;
    filter: blur(0.2px);
}

/* Mejora de contraste del texto: aplicar mismo estilo a todos los enunciados (h2/h3) de secciones */
#hero h1,
#universo h2, #universo h3, #universo h4,
#creacion h2, #creacion h3, #creacion h4,
#aprendizaje h2, #aprendizaje h3, #aprendizaje h4,
#cultura h2, #cultura h3, #cultura h4,
#autor h2, #autor h3, #autor h4 {
  position: relative; z-index: 2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
/* Mantener colores legibles por sección */
#aprendizaje h2, #aprendizaje h3 { color: #fafafa; }
#aprendizaje p { color: #e7e7ea; }
#aprendizaje .text-stone-600 { color: #e7e7ea !important; }
/* En tarjetas del Pilar 2, restablecer colores oscuros para legibilidad */
#aprendizaje .learn-card { background: rgba(255,255,255,0.98) !important; }
#aprendizaje .learn-card .text-stone-600 { color: #374151 !important; }

/* Subtítulo "Pilar X" en fondos intensos */
#aprendizaje .text-red-600,
#cultura .text-red-600,
#creacion .text-red-600 {
  color: #fde2e2 !important; /* rojo-50/100 claro para contraste */
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  position: relative; z-index: 2;
}

/* Panel translúcido tipo glass (glassmorphism) */
.glass-sheet {
    width: min(1200px, 92%);
    margin-inline: auto;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    background: rgba(255,255,255,0.48);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.38);
    border-radius: 1.25rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.4);
}

.glass-sheet > *:first-child { border-top-left-radius: 1.25rem; border-top-right-radius: 1.25rem; }
.glass-sheet > *:last-child { border-bottom-right-radius: 1.25rem; border-bottom-left-radius: 1.25rem; }