/* ===========================================================================
   BASE MÍNIMA PARA TEMAS DE USUARIO
   ---------------------------------------------------------------------------
   Se carga ANTES del CSS del tema, y SOLO cuando el tema activo no es uno de
   los que vienen de serie (esos ya estilan el sitio entero, así que no la
   necesitan y no se les toca).

   Por qué existe: un tema generado por IA casi siempre se deja fuera los
   bloques "aburridos" — el logo, la navegación, el pie, el banner de cookies,
   el visor de imágenes. Sin estilos, el logo sale a tamaño original ocupando
   media pantalla, la navegación se convierte en una lista con viñetas y
   aparecen botones sueltos por la página.

   Aquí solo va lo IMPRESCINDIBLE para que nada se vea roto, con selectores de
   especificidad muy baja para que cualquier regla del tema los sustituya sin
   pelearse. No define colores ni tipografías: eso es cosa del tema.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body { margin: 0; }
img, video { max-width: 100%; }

/* --- Cabecera y navegación ------------------------------------------------ */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 24px;
}
/* La causa del "logo gigante": sin altura, la imagen sale a tamaño original */
.logo img {
    height: 40px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}
.logo a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}
nav ul {
    list-style: none;      /* si no, la navegación sale con viñetas */
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}
nav a { text-decoration: none; }
.skip-to-content { position: absolute; left: -9999px; }
.skip-to-content:focus { left: 16px; top: 16px; z-index: 2000; }

/* --- Contenedores --------------------------------------------------------- */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.section { padding-top: 48px; padding-bottom: 48px; }

/* --- Elementos que DEBEN estar ocultos en reposo --------------------------- */
/* Sin esto aparecen botones sueltos (×, ‹, ›) y un velo negro sobre la web */
.lightbox-overlay:not(.active) { display: none; }
.mobile-nav:not(.open) { display: none; }
.cookie-banner:not(.show) { display: none; }

.cookie-banner {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1200;
    padding: 14px 20px;
}
.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* --- Pantalla de entrada --------------------------------------------------- */
#loader {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}
body.loaded #loader { display: none; }

/* Franja de código de tiempo: solo la usa el tema por defecto */
#timeline-container, #timeline-ruler, #timeline-playhead { display: none; }

/* --- Rejilla y tarjetas ---------------------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.card-img { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.card-img img, .card-video { width: 100%; height: 100%; object-fit: cover; }
.card-video { position: absolute; inset: 0; opacity: 0; }
.card:hover .card-video { opacity: 1; }
.tags-wrapper { display: flex; flex-wrap: wrap; gap: 6px; }

/* --- Pie ------------------------------------------------------------------- */
.site-footer { padding-top: 40px; padding-bottom: 40px; }
.footer-content { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.social-links { display: flex; gap: 10px; }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; text-decoration: none; }

/* --- Ficha de proyecto ------------------------------------------------------ */
.project-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.project-main { min-width: 0; }
.scroll-wrapper { display: flex; gap: 16px; overflow-x: auto; }
.scroll-wrapper > * { flex: 0 0 auto; width: min(100%, 860px); }
.project-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* --- Acceso ----------------------------------------------------------------- */
.login-card { max-width: 380px; margin: 12vh auto 0; padding: 32px; }
.form-input { width: 100%; }

@media (max-width: 900px) {
    .project-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    nav.desktop-nav { display: none; }
    .mobile-nav.open { position: fixed; left: 12px; right: 12px; z-index: 1100; display: flex; flex-direction: column; }
}
@media (min-width: 769px) {
    .mobile-menu-toggle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ===========================================================================
   FICHA DE PROYECTO Y RESTO DE PÁGINAS
   ---------------------------------------------------------------------------
   Es la vista más compleja del sitio y la que una IA deja peor: carrusel de
   vídeos, ficha técnica, galería, embeds y visor de imágenes. Aquí va solo el
   armazón para que nada se descoloque.

   Los fondos y bordes usan grises translúcidos a propósito: funcionan igual
   sobre un tema claro y uno oscuro, y cualquier color del tema los sustituye.
   =========================================================================== */

.hero-project { position: relative; margin-bottom: 32px; }
.hero-project > img { width: 100%; max-height: 70vh; object-fit: cover; display: block; }
.hero-project .hero-text { padding: 24px 20px 0; }
.project-subtitle { margin: 6px 0 0; font-weight: 400; }
.section-heading { margin: 0 0 16px; }

/* Ficha técnica lateral */
.project-sidebar {
    padding: 20px;
    background: rgba(128, 128, 128, 0.08);
    border: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 10px;
}
.info-box { display: flex; flex-direction: column; gap: 12px; }
.info-item { display: flex; flex-direction: column; gap: 2px; }
.info-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.6; }
.info-val { font-size: 0.95rem; }
.role-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.role-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 20px;
    background: rgba(128, 128, 128, 0.16);
    font-size: 0.78rem;
}

/* Contenido y cita */
.project-content { line-height: 1.7; }
.project-content img { max-width: 100%; height: auto; border-radius: 8px; }
.project-quote {
    margin: 28px 0; padding: 20px 24px;
    background: rgba(128, 128, 128, 0.08);
    border-left: 3px solid currentColor;
    border-radius: 0 8px 8px 0;
}
.project-quote cite { display: block; margin-top: 8px; font-style: normal; font-size: 0.88rem; opacity: 0.7; }

/* Vídeos */
.video-item { border-radius: 10px; overflow: hidden; background: #000; }
.video-item video { width: 100%; display: block; }
.video-caption { padding: 10px 4px 0; font-size: 0.88rem; opacity: 0.75; }

/* Flechas del carrusel: sin esto quedan sueltas por la página */
.scroll-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(0, 0, 0, 0.55); color: #fff;
}
.scroll-prev { left: 10px; }
.scroll-next { right: 10px; }

/* Galería */
.gallery-item { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; cursor: zoom-in; }

/* Contenidos incrustados */
.project-embeds { display: flex; flex-direction: column; gap: 24px; }
.embed-item, .embed-video, .embed-social { border-radius: 10px; overflow: hidden; }
.embed-video iframe, .embed-iframe iframe { display: block; width: 100%; border: 0; }

/* Visor de imágenes: solo el armazón; ocultarlo en reposo ya está más arriba */
.lightbox-overlay { position: fixed; inset: 0; z-index: 1500; align-items: center; justify-content: center; background: rgba(0,0,0,.85); }
.lightbox-overlay.active { display: flex; }
.lightbox-content { position: relative; max-width: 92vw; max-height: 88vh; }
.lightbox-img { max-width: 92vw; max-height: 88vh; object-fit: contain; }
.lightbox-caption, .lightbox-counter { text-align: center; color: #fff; font-size: 0.85rem; margin-top: 10px; }
.lightbox-close, .lightbox-nav {
    position: absolute; display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255,255,255,.16); color: #fff; font-size: 1.2rem;
}
.lightbox-close { top: -54px; right: 0; }
.lightbox-prev { left: -56px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: -56px; top: 50%; transform: translateY(-50%); }

/* Página de información */
.bio-card { padding: 32px; border-radius: 12px; background: rgba(128,128,128,.06); }
.bio-avatar-container { display: flex; justify-content: center; margin-bottom: 20px; }
.bio-avatar { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; }
.bio-header-name, .bio-header-role { text-align: center; }
.bio-social-links { display: flex; justify-content: center; gap: 10px; margin: 16px 0; }
.bio-content { line-height: 1.7; }

/* Formulario de contacto */
.contact-form { max-width: 620px; margin: 0 auto; }
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-field {
    width: 100%; padding: 11px 14px; margin-bottom: 12px;
    border: 1px solid rgba(128,128,128,.3); border-radius: 8px;
    background: transparent; color: inherit; font: inherit;
}
textarea.contact-field { min-height: 120px; resize: vertical; }
.contact-submit, .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 22px; border: 1px solid rgba(128,128,128,.35); border-radius: 8px;
    background: transparent; color: inherit; font: inherit; cursor: pointer;
    text-decoration: none;
}
.btn-full { width: 100%; }
.contact-success, .contact-error { padding: 11px 14px; border-radius: 8px; margin-bottom: 12px; }
.contact-success { background: rgba(52,199,89,.14); }
.contact-error { background: rgba(255,59,48,.14); }

/* Filtros y buscador */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 24px; }
.filter-btn {
    padding: 7px 14px; border-radius: 20px; cursor: pointer; font: inherit;
    background: rgba(128,128,128,.1); border: 1px solid rgba(128,128,128,.22); color: inherit;
}
.search-bar-container { display: flex; justify-content: center; margin-bottom: 16px; }
.search-bar { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 440px;
    padding: 9px 16px; border-radius: 20px; border: 1px solid rgba(128,128,128,.25); }
.search-bar input { flex: 1; border: 0; background: transparent; color: inherit; font: inherit; outline: none; }
.search-counter { text-align: center; font-size: 0.85rem; opacity: 0.7; }

/* Etiquetas y estado */
.tag { padding: 3px 9px; border-radius: 5px; font-size: 0.7rem; background: rgba(128,128,128,.16); }
.status-indicator { display: inline-flex; align-items: center; gap: 7px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* Acceso */
.login-card { border: 1px solid rgba(128,128,128,.22); border-radius: 12px; }
.form-input { padding: 11px 14px; margin-bottom: 12px; border: 1px solid rgba(128,128,128,.3);
    border-radius: 8px; background: transparent; color: inherit; font: inherit; }

@media (max-width: 768px) {
    .contact-row { grid-template-columns: 1fr; }
    .lightbox-prev { left: 6px; }
    .lightbox-next { right: 6px; }
    .lightbox-close { top: -48px; right: 4px; }
}

/* Aviso de privacidad bajo el formulario de contacto (art. 13 RGPD).
   Letra pequeña y apagada: es información obligatoria, no una llamada a la acción. */
.contact-privacy { font-size: .78rem; line-height: 1.5; opacity: .62; margin-top: 14px; max-width: 54ch; }
.contact-privacy a { color: inherit; text-decoration: underline; }

/* Título opcional de cada incrustado (Social Embeds) — 2026-10-12 */
.embed-caption { margin-top: 10px; font-size: 0.82rem; color: var(--text-muted, #888); text-align: left; }