/* ═════════════════════════════════════════════════════════════
   ACCESIBILIDAD WCAG 2.1 AA — Fotre! Studio
   Hoja compartida por todas las páginas públicas
   ═════════════════════════════════════════════════════════════ */


/* ─── 1. SKIP LINK ─────────────────────────────────────────────
   Enlace "Saltar al contenido principal" que aparece solo al
   hacer Tab desde el inicio de la página. Permite a usuarios
   con lectores de pantalla / teclado evitar el menú navegacional. */
.skip-link {
  position: fixed;
  top: 0; left: 50%;
  transform: translate(-50%, -120%);
  background: #0a0a0a;
  color: #f5e642;
  padding: .8rem 1.4rem;
  border-radius: 0 0 8px 8px;
  font-family: 'BDO Grotesk', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  z-index: 10000;
  transition: transform .25s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translate(-50%, 0);
  outline: 3px solid #f5e642;
  outline-offset: 2px;
}


/* ─── 2. FOCUS VISIBLE ─────────────────────────────────────────
   Outline claro cuando el usuario navega con teclado.
   :focus-visible solo lo aplica con teclado, no con ratón. */
*:focus { outline: none; } /* anular default feo, lo reemplazamos */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #2563eb;        /* azul brillante */
  outline-offset: 3px;
  border-radius: 4px;
}

/* Sobre fondos oscuros (blue, black, marquee yellow...) usamos amarillo */
.section-hero-main *:focus-visible,
.section-hero-phrase *:focus-visible,
.work-list_block *:focus-visible,
.footer-layer *:focus-visible,
.about-marquee *:focus-visible,
.land-approach *:focus-visible,
.mobile-menu *:focus-visible {
  outline-color: #f5e642 !important;
}


/* ─── 3. PREFERS-REDUCED-MOTION ────────────────────────────────
   Si el usuario marca "reducir movimiento" en su SO, desactivamos
   animaciones, transitions y autoplay. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Detener animaciones específicas */
  .home-header_component .stack-img,        /* hero 3D del index */
  .marquee-track, .about-marquee-track,     /* marquees */
  .about-smile,                              /* wobble del :) en nosotros */
  .circle-cta-text,                          /* texto circular giratorio */
  .land-hero-image-bg {                     /* parallax */
    animation: none !important;
    transform: none !important;
  }

  /* Detener videos que se auto-reproducen */
  .work-content-video[autoplay],
  .land-gallery-video[autoplay],
  video[autoplay] {
    /* el JS los pausa también */
  }
}


/* ─── 4. TAMAÑOS TÁCTILES MÍNIMOS (44×44) ──────────────────────
   WCAG 2.1 AA exige 44×44 px en áreas táctiles. La mayoría de
   nuestros botones ya lo cumple, pero hay algunos pequeños. */
.gi-del,                       /* botón borrar miniatura en admin */
.mobile-menu-close,            /* X del menú móvil */
.hamburger {
  min-width: 44px;
  min-height: 44px;
}


/* ─── 5. CONTRASTE MEJORADO ────────────────────────────────────
   El criterio AA exige 4.5:1 para texto normal. Algunos rgba(0,0,0,.4-.5)
   se quedaban justos sobre fondos claros. Los subimos un poco. */
.work-collab,
.about-cta-extra,
.land-cta-extra {
  color: rgba(10, 10, 10, .72) !important;
}


/* ─── 6. UTILIDADES ────────────────────────────────────────────
   sr-only: texto sólo para lectores de pantalla.
   .sr-only-focusable: visible cuando recibe foco (útil para skip-link). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ─── 7. RESPETO AL CURSOR DEL SISTEMA ─────────────────────────
   Mientras navega con teclado, mostrar el cursor del sistema
   (no esconderlo con cursor:none). */
:focus-within {
  /* no aplicamos nada aquí, pero garantizamos que el foco siga visible */
}


/* ─── COLOR DE LOS ENLACES LEGALES ────────────────────────────
   Los enlaces "Aviso legal", "Privacidad", "Cookies" y el botón
   "Cosicas legales" comparten el mismo color que el © (gris suave). */

/* Footer pequeño (proyecto, nosotros, landings, legal): © está en rgba(0,0,0,.5) */
.footer-small-link[href*="aviso-legal"],
.footer-small-link[href*="politica-"],
.legal-mobile-group summary.footer-small-link,
.footer-small-links button.footer-cookies-link {
  color: rgba(0,0,0,.5) !important;
  font-weight: 700;
}

/* Footer animado (index, proyectos): © está en rgba(0,0,0,.35) */
.footer-legal-link[href*="aviso-legal"],
.footer-legal-link[href*="politica-"],
.legal-mobile-group summary.footer-legal-link,
.footer-legal-links button.footer-cookies-link {
  color: rgba(0,0,0,.35) !important;
  font-weight: 700;
}

/* El botón "Redes" en móvil hereda el azul de marca, como Instagram/LinkedIn */
.social-mobile-group summary.footer-small-link,
.social-mobile-group summary.footer-legal-link {
  color: #203886 !important;
  font-weight: 700;
}

/* Instagram y LinkedIn destacados con el azul de marca */
.footer-small-link[href*="instagram"],
.footer-small-link[href*="linkedin"],
.footer-legal-link[href*="instagram"],
.footer-legal-link[href*="linkedin"],
.social-mobile-group .social-mobile-links a {
  color: #203886 !important;
  font-weight: 700;
  position: relative;
  transition: opacity .2s;
}
.footer-small-link[href*="instagram"]:hover,
.footer-small-link[href*="linkedin"]:hover,
.footer-legal-link[href*="instagram"]:hover,
.footer-legal-link[href*="linkedin"]:hover,
.social-mobile-group .social-mobile-links a:hover {
  opacity: .65;
}


/* ─── ENLACES AGRUPADOS EN FOOTER MÓVIL ────────────────────────
   En escritorio se muestran los enlaces sueltos.
   En móvil se agrupan en dos botones <details>: "Cosicas legales" y "Redes". */
.legal-mobile-group,
.social-mobile-group { display: none; }
.legal-inline-group,
.social-inline-group { display: contents; }

@media (max-width: 768px) {
  .legal-inline-group,
  .social-inline-group { display: none; }

  /* Estilo compartido para los dos <details> agrupadores */
  .legal-mobile-group,
  .social-mobile-group {
    display: inline-block;
    position: relative;
    margin: 0; padding: 0;
    line-height: inherit;
    vertical-align: top;
  }
  .legal-mobile-group summary,
  .social-mobile-group summary {
    list-style: none;
    cursor: pointer;
    padding: 0; margin: 0;
    user-select: none;
    display: inline-flex; align-items: baseline; gap: .25rem;
    line-height: inherit;
  }
  .legal-mobile-group summary::-webkit-details-marker,
  .social-mobile-group summary::-webkit-details-marker { display: none; }
  .legal-mobile-group summary::marker,
  .social-mobile-group summary::marker { content: ''; }
  .legal-mobile-group summary::after,
  .social-mobile-group summary::after {
    content: '▾';
    font-size: .75em;
    transition: transform .25s;
    display: inline-block;
    opacity: .7;
  }
  .legal-mobile-group[open] summary::after,
  .social-mobile-group[open] summary::after { transform: rotate(180deg); }

  /* dropdown común */
  .legal-mobile-group .legal-mobile-links,
  .social-mobile-group .social-mobile-links {
    position: absolute;
    bottom: calc(100% + .4rem);
    padding: .8rem 1rem;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    display: flex; flex-direction: column; gap: .5rem;
    min-width: 160px;
    z-index: 200;   /* por encima del botón volver-arriba (z-index 150) */
  }
  /* "Cosicas legales" (más a la izquierda) se despliega hacia la derecha */
  .legal-mobile-group  .legal-mobile-links  { left: 0; }
  /* "Redes" (en el centro) se despliega hacia la izquierda para no salirse */
  .social-mobile-group .social-mobile-links { right: 0; }
  .legal-mobile-group .legal-mobile-links a,
  .social-mobile-group .social-mobile-links a,
  .legal-mobile-group .legal-mobile-links button.footer-cookies-link {
    font-family: 'Space Grotesk', sans-serif;
    font-size: .9rem; font-weight: 700;
    color: #0a0a0a !important; text-decoration: none;
    padding: .15rem 0;
    width: 100%;
  }
  .legal-mobile-group .legal-mobile-links a:hover,
  .social-mobile-group .social-mobile-links a:hover,
  .legal-mobile-group .legal-mobile-links button.footer-cookies-link:hover { opacity: .6; }

  /* ─── Footer móvil ─── */
  /* Una sola fila:
     - el © queda a la IZQUIERDA
     - los botones (Cosicas legales / Redes) quedan a la DERECHA */
  .footer-small,
  .footer-legal {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 1rem !important;
  }

  /* El © no se encoge; los botones ocupan el resto a la derecha. */
  .footer-small-text,
  .footer-legal-text {
    flex-shrink: 0 !important;
    text-align: left !important;
  }

  .footer-small-links,
  .footer-legal-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    gap: 1.2rem !important;
    margin: 0 0 0 auto !important;
    flex-shrink: 0 !important;
  }

  /* ─── Botón volver arriba en móvil ─── */
  /* A la DERECHA, justo encima de los botones del footer
     (que están a la derecha). bottom: 5rem deja un
     margen limpio sobre los enlaces. */
  .back-to-top {
    bottom: 5rem !important;
    right: 2rem !important;
    left: auto !important;
    width: 48px !important;
    height: 48px !important;
  }
}


/* ─── 8. PRINT ─────────────────────────────────────────────────
   Estilos al imprimir las páginas legales o cualquier contenido. */
@media print {
  .skip-link,
  .fc-banner, .fc-floating,         /* banner cookies */
  .back-to-top,
  .navbar, .mobile-menu,
  .footer-small-links,
  .footer-legal-links {
    display: none !important;
  }
  body { background: white; color: black; cursor: auto; }
  #cursor { display: none !important; }
  a { color: black; text-decoration: underline; }
}