/* ==========================================================================
   GALERÍA PRIVADA — HOJA DE ESTILOS
   --------------------------------------------------------------------------
   Este archivo define el DISEÑO del portal y es compartido por todos los
   clientes. No contiene texto ni datos: eso vive en config.js.

   Si quieres personalizar colores/tipografía para un cliente puntual,
   modifica ÚNICAMENTE la sección "1. TOKENS DE DISEÑO" de este archivo.
   El resto de las reglas usa esas variables, así que un cambio ahí se
   propaga a todo el portal sin tocar el layout. Ver /docs/05-personalizacion.md
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. TOKENS DE DISEÑO (única sección pensada para personalización rápida)
   ------------------------------------------------------------------------- */
:root {
  /* Colores base — paleta neutra inspirada en Apple / Notion / Linear */
  --color-bg: #ffffff;
  --color-bg-alt: #fafafa;
  --color-text: #1d1d1f;
  --color-text-muted: #6e6e73;
  --color-border: #e5e5e7;

  /* Acento sutil, usado solo en detalles puntuales (no en botones grandes) */
  --color-accent: #3b5bfd;

  /* Botones */
  --color-btn-primary-bg: #1d1d1f;
  --color-btn-primary-text: #ffffff;
  --color-btn-secondary-border: #1d1d1f;
  --color-btn-secondary-text: #1d1d1f;

  /* Tipografía — pila de sistema: rápida, nativa, sin dependencias externas */
  --font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;

  /* Escala tipográfica */
  --font-size-xs: 0.8125rem;
  --font-size-sm: 0.9375rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.75rem;
  --font-size-2xl: 2.5rem;
  --font-size-3xl: 3.25rem;

  /* Espaciado */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6rem;
  --space-8: 9rem;

  /* Bordes y sombras — deliberadamente sutiles */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.08);

  /* Duración de transiciones — microanimaciones, nunca lentas ni exageradas */
  --transition-fast: 150ms ease;
  --transition-base: 260ms cubic-bezier(0.25, 0.1, 0.25, 1);

  --max-width: 1120px;
}

/* -------------------------------------------------------------------------
   2. RESET MÍNIMO
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* El atributo HTML "hidden" lo usa el JS para ocultar secciones/tarjetas
   opcionales (Galería, Videos, Fotografías Originales). Por defecto el
   navegador ya lo respeta, pero cualquier regla de abajo que le ponga
   "display" a ese mismo elemento (ej. .download-card { display: flex })
   lo sobreescribe. Esta regla se asegura de que "hidden" siempre gane,
   sin importar qué más se le agregue a la plantilla más adelante. */
[hidden] {
  display: none !important;
}

/* -------------------------------------------------------------------------
   3. UTILIDADES DE LAYOUT
   ------------------------------------------------------------------------- */
.section__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.section {
  padding: var(--space-7) 0;
}

.section--alt {
  background: var(--color-bg-alt);
}

.section__title {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
}

.section__text {
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  max-width: 640px;
  margin: 0 0 var(--space-4);
}

.section__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
   4. BOTONES
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.75rem;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  border: 1px solid transparent;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    background var(--transition-fast), opacity var(--transition-fast);
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-text);
}

.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
  opacity: 0.92;
}

.btn--secondary {
  background: transparent;
  border-color: var(--color-btn-secondary-border);
  color: var(--color-btn-secondary-text);
}

.btn--secondary:hover {
  background: var(--color-bg-alt);
  transform: translateY(-1px);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn--ghost:hover {
  background: var(--color-bg-alt);
}

.btn:active {
  transform: translateY(0);
}

/* -------------------------------------------------------------------------
   5. HERO
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: #fff;
  overflow: hidden;
}

.hero__cover {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0.35) 55%,
    rgba(0, 0, 0, 0.65) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: var(--space-6) var(--space-3) var(--space-6);
  max-width: 760px;
}

.hero__logo {
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  margin: 0 0 var(--space-3);
}

.hero__title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-2);
}

.hero__client {
  font-size: var(--font-size-xl);
  font-weight: 500;
  margin: 0;
}

.hero__date {
  font-size: var(--font-size-base);
  opacity: 0.85;
  margin: 0.25rem 0 var(--space-3);
}

.hero__message {
  font-size: var(--font-size-base);
  line-height: 1.6;
  max-width: 560px;
  opacity: 0.95;
  margin: 0 0 var(--space-4);
}

.hero__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.hero .btn--secondary {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.hero .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* -------------------------------------------------------------------------
   6. GALERÍA / DESCARGAS
   ------------------------------------------------------------------------- */
.downloads-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.download-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.download-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.download-card__title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin: 0;
}

.download-card__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  flex: 1;
}

.download-card__list li::before {
  content: "—";
  margin-right: 0.5rem;
  color: var(--color-border);
}

/* -------------------------------------------------------------------------
   7. VIDEOS
   ------------------------------------------------------------------------- */
.videos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.video-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.video-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.video-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-alt);
  overflow: hidden;
}

.video-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.video-card:hover .video-card__thumb img {
  transform: scale(1.03);
}

.video-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-card__play span {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-fast);
}

.video-card:hover .video-card__play span {
  transform: scale(1.08);
}

.video-card__body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.video-card__name {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin: 0;
}

.video-card__actions {
  display: flex;
  gap: 0.5rem;
}

.video-card__actions .btn {
  padding: 0.6rem 1rem;
  font-size: var(--font-size-xs);
  flex: 1;
}

/* -------------------------------------------------------------------------
   8. INFORMACIÓN IMPORTANTE
   ------------------------------------------------------------------------- */
.info-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 640px;
}

.info-list li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--font-size-base);
  color: var(--color-text);
}

.info-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}

/* -------------------------------------------------------------------------
   9. AVISO DE GALERÍA VENCIDA (mostrado por JS cuando aplica)
   ------------------------------------------------------------------------- */
.expired-banner {
  background: #fff4e5;
  border: 1px solid #f4d9a8;
  color: #8a5a00;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-3);
}

/* Badge sutil de "disponible por N días más" — tono elegante, no alarmante */
.urgency-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(59, 91, 253, 0.08);
  color: var(--color-accent);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  margin: 0 0 var(--space-3);
}

/* -------------------------------------------------------------------------
   10. FOOTER
   ------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) 0;
}

.footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
  display: flex;
  justify-content: center;
}

.footer__links {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.footer__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.footer__link:hover {
  color: var(--color-text);
}

.footer__icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
}

.footer__icon svg {
  width: 100%;
  height: 100%;
}

/* -------------------------------------------------------------------------
   11. TOAST (confirmación de "Enlace copiado")
   ------------------------------------------------------------------------- */
.toast {
  position: fixed;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--color-btn-primary-bg);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base), transform var(--transition-base);
  z-index: 100;
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* -------------------------------------------------------------------------
   12. REVEAL / FADE-IN AL HACER SCROLL
   ------------------------------------------------------------------------- */
/*
  IMPORTANTE: por defecto [data-reveal] es completamente visible.
  La clase .reveal-init (que oculta el elemento antes de animarlo) la
  agrega scrollReveal.js en tiempo de ejecución, nunca este CSS.

  Esto es progressive enhancement a propósito: si por alguna razón el
  JavaScript no llega a ejecutarse (por ejemplo, al abrir index.html con
  doble clic desde el Finder/Explorador en vez de servirlo desde un
  servidor, algo que los navegadores restringen para módulos ES), el
  portal sigue siendo legible en vez de mostrarse en blanco.
*/
.reveal-init {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.reveal-init.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal-init {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .btn,
  .download-card,
  .video-card,
  .video-card__thumb img {
    transition: none !important;
  }
}

/* -------------------------------------------------------------------------
   13. RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .videos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  :root {
    --font-size-3xl: 2.25rem;
    --font-size-2xl: 1.9rem;
    --space-6: 3rem;
    --space-7: 3.5rem;
  }

  .downloads-grid {
    grid-template-columns: 1fr;
  }

  .videos-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: 92vh;
  }

  .footer__links {
    gap: var(--space-3);
  }
}

@media (max-width: 480px) {
  .hero__actions,
  .section__actions {
    flex-direction: column;
    align-items: stretch;
  }
}