/* ============================================================
   H. E. MARTORANO — Sitio autoral
   responsive.css — Adaptación a dispositivos
   WEB-001 | WEB-003
   ============================================================ */

/* ------------------------------------------------------------
   PUNTOS DE QUIEBRE
   - Base:     < 480px  (móvil pequeño)
   - sm:       480px+   (móvil)
   - md:       768px+   (tableta)
   - lg:       1024px+  (escritorio)
   - xl:       1280px+  (escritorio amplio)
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   TABLETA — 768px y menor
   ------------------------------------------------------------ */
@media (max-width: 768px) {

  /* Encabezado */
  .encabezado {
    padding: var(--espacio-md) var(--espacio-lg);
  }

  .encabezado__contenedor {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espacio-md);
  }

  /* Navegación: oculta por defecto en móvil */
  .nav-principal {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-boton-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem var(--espacio-md);
  }

  .nav-principal__lista {
    flex-direction: column;
    gap: var(--espacio-sm);
    width: 100%;
    display: none;        /* Controlado por main.js */
    padding-top: var(--espacio-sm);
    border-top: 1px solid var(--color-borde);
  }

  .nav-principal__lista.abierta {
    display: flex;
  }

  .nav-principal__enlace {
    font-size: var(--tipo-base);
    display: block;
    min-height: 44px;
    padding: 0.625rem 0;
  }

  /* Hero */
  .hero {
    padding: var(--espacio-2xl) 0;
  }

  /* Contenido principal */
  .contenido-principal {
    padding: var(--espacio-2xl) var(--espacio-lg);
  }

  /* Títulos */
  h1 {
    font-size: var(--tipo-2xl);
  }

  h2 {
    font-size: var(--tipo-xl);
    margin-top: var(--espacio-2xl);
  }

  /* Pie de página */
  .pie {
    padding: var(--espacio-lg);
  }

  .pie__contenedor {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espacio-sm);
  }

  /* ── WEB-003/WEB-004D: Publicación destacada ── */
  .publicacion-destacada__contenido {
    flex-direction: column;
    gap: var(--espacio-lg);
  }

  .publicacion-destacada__portada {
    width: 100%;
    max-width: 220px;
  }

  /* ── WEB-003: Ventana autoral ── */
  .ventana-autoral__media--video iframe {
    height: 220px;
  }

  /* ── WEB-003: Accesos autorales ── */
  .accesos-autorales__lista {
    flex-direction: column;
    gap: var(--espacio-sm);
  }

  /* ── WEB-003/WEB-004D: Obras categoría ── */
  .obra-item {
    flex-direction: column;
    gap: var(--espacio-md);
  }

  .obra-item__portada {
    width: 100%;
    max-width: 220px;
  }

  /* ── WEB-004D: Retrato autoral ── */
  .autor-foto {
    max-width: 240px;
    margin: 0 auto var(--espacio-xl) auto;
    text-align: center;
  }

  /* ── WEB-004G-A: Corto seleccionado ── */
  .corto-destacado__reproductor--vertical {
    max-width: 280px;
    padding-top: calc(280px * 16 / 9);
  }
}

/* ------------------------------------------------------------
   MÓVIL PEQUEÑO — 480px y menor
   ------------------------------------------------------------ */
@media (max-width: 480px) {

  :root {
    --tipo-md:   1rem;
    --tipo-lg:   1.125rem;
    --tipo-xl:   1.25rem;
    --tipo-2xl:  1.75rem;
    --tipo-3xl:  2rem;
  }

  .encabezado {
    padding: var(--espacio-md);
  }

  .contenido-principal {
    padding: var(--espacio-xl) var(--espacio-md);
  }

  .encabezado__nombre {
    font-size: var(--tipo-lg);
  }

  .pie__nav {
    flex-wrap: wrap;
    gap: var(--espacio-sm);
  }

  .contacto-bloque {
    padding: var(--espacio-md);
  }

}

/* ------------------------------------------------------------
   WEB-003H — PÁGINA MUSICAL: móvil pequeño
   ------------------------------------------------------------ */
@media (max-width: 480px) {

  /* El reproductor 16:9 es intrínsecamente responsive (padding-top: 56.25%).
     En pantallas muy pequeñas se ajusta al ancho disponible sin cambios. */

  .musica-presentacion {
    max-width: 100%;
  }

  .video-seleccionado__canal {
    font-size: var(--tipo-sm);
  }
}

/* ------------------------------------------------------------
   ESCRITORIO AMPLIO — 1280px y mayor
   ------------------------------------------------------------ */
@media (min-width: 1280px) {

  .contenido-principal {
    padding: var(--espacio-3xl) var(--espacio-2xl);
  }

  .encabezado {
    padding: var(--espacio-xl) var(--espacio-2xl);
  }

  /* ── WEB-004G-A: Corto seleccionado — vertical en escritorio amplio ── */
  .corto-destacado__reproductor--vertical {
    max-width: 400px;
    padding-top: calc(400px * 16 / 9);
  }
}

/* ------------------------------------------------------------
   IMPRESIÓN
   ------------------------------------------------------------ */
@media print {

  .encabezado,
  .nav-principal,
  .pie,
  .nav-boton-menu {
    display: none;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  .contenido-principal {
    padding: 0;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}