/* ============================================================================
   LAURA VAAMONDE & JAVIER ACEVEDO DÍAZ — Hoja de estilos principal
   ----------------------------------------------------------------------------
   Este archivo controla TODO el aspecto del sitio. Está pensado para que
   puedas seguir editándolo a mano con comodidad.

   CÓMO ESTÁ ORGANIZADO:
     1. Variables (colores, tipografías, medidas) ........ acá cambiás la "marca"
     2. Reset y base
     3. Tipografía (títulos, párrafos, etc.)
     4. Layout (contenedor, secciones, grillas)
     5. Componentes (botones, tarjetas, navbar, footer, galería, etc.)
     6. Animaciones (revelado al hacer scroll)
     7. Responsive (celulares y tablets)

   PARA CAMBIAR LOS COLORES: editá los valores en :root (sección 1).
   PARA AGREGAR UNA TARJETA: copiá un bloque .tarjeta en el HTML (ver comentarios).
   PARA CAMBIAR UNA FOTO: reemplazá el archivo en /img y usá el mismo nombre,
     o cambiá la ruta del src/background en el HTML.
   ========================================================================== */

/* ============================================================================
   1) VARIABLES — el "panel de control" de la marca
   ========================================================================== */
:root {
  /* --- Paleta: maderas, folklore y papel --- */
  --papel:       #f4ece0;   /* fondo general, color papel/crema cálido     */
  --papel-2:     #efe4d3;   /* fondo alterno para secciones                 */
  --tinta:       #241a12;   /* texto principal (marrón muy oscuro)          */
  --tinta-suave: #5b4d40;   /* texto secundario / párrafos largos           */
  --terracota:   #b8472b;   /* ACENTO principal (quebracho / cerámica)      */
  --terracota-osc:#923317;  /* terracota más oscuro (hover)                 */
  --miel:        #c98a3c;   /* madera dorada / detalles                     */
  --monte:       #4f5d43;   /* verde monte (acento secundario)              */
  --crudo:       #fbf6ee;   /* casi blanco, para tarjetas sobre papel       */
  --linea:       #d8c9b4;   /* líneas finas y bordes                        */
  --tinta-noche: #1c140d;   /* fondo oscuro para secciones de contraste     */

  /* --- Tipografías --- */
  --display: "Fraunces", Georgia, "Times New Roman", serif; /* títulos        */
  --texto:   "Hanken Grotesk", system-ui, -apple-system, sans-serif; /* cuerpo */

  /* --- Medidas --- */
  --ancho-max: 1240px;       /* ancho máximo del contenido                  */
  --gutter: clamp(20px, 5vw, 64px); /* margen lateral, se adapta al ancho   */
  --radio: 4px;              /* redondeo de bordes (sobrio)                 */
  --transicion: 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================================
   2) RESET Y BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--texto);
  color: var(--tinta);
  background-color: var(--papel);
  /* Textura de grano muy sutil generada con SVG embebido (no pesa nada) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  line-height: 1.65;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--terracota); text-decoration: none; transition: color var(--transicion); }
a:hover { color: var(--terracota-osc); }

::selection { background: var(--terracota); color: var(--crudo); }

/* ============================================================================
   3) TIPOGRAFÍA
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--tinta);
  font-optical-sizing: auto;
}

/* Título gigante editorial (heros) */
.titulo-xl {
  font-size: clamp(3rem, 9vw, 8.5rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.92;
}

/* Itálica de acento dentro de los títulos: <em> o .it */
h1 em, h2 em, h3 em, .it {
  font-style: italic;
  font-weight: 400;
  color: var(--terracota);
}

h2 { font-size: clamp(2rem, 4.5vw, 3.6rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
h4 { font-size: 1.25rem; }

p { color: var(--tinta-suave); max-width: 65ch; }
p + p { margin-top: 1.1em; }

/* Texto chico en mayúsculas, para etiquetas y números de sección */
.etiqueta {
  font-family: var(--texto);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracota);
}
.etiqueta--monte { color: var(--monte); }

/* Bajada / texto introductorio más grande */
.bajada {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  color: var(--tinta-suave);
  font-weight: 400;
}

/* ============================================================================
   4) LAYOUT — contenedor, secciones y grillas
   ========================================================================== */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.seccion { padding-block: clamp(64px, 11vw, 140px); }
.seccion--papel-2 { background: var(--papel-2); }
.seccion--noche {
  background: var(--tinta-noche);
  color: var(--papel);
}
.seccion--noche h1, .seccion--noche h2, .seccion--noche h3, .seccion--noche h4 { color: var(--papel); }
.seccion--noche p { color: #c9bbab; }
.seccion--noche .etiqueta { color: var(--miel); }

/* Grillas reutilizables */
.grilla        { display: grid; gap: clamp(28px, 4vw, 56px); }
.grilla-2      { grid-template-columns: repeat(2, 1fr); }
.grilla-3      { grid-template-columns: repeat(3, 1fr); }
.grilla-4      { grid-template-columns: repeat(4, 1fr); }
/* Grilla asimétrica para layouts editoriales (texto + imagen) */
.grilla-split  { grid-template-columns: 1fr 1fr; align-items: center; }
.grilla-split--ancho-izq { grid-template-columns: 1.15fr 0.85fr; }

/* Encabezado de sección (etiqueta + título + bajada) */
.encabezado { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.encabezado .etiqueta { display: block; margin-bottom: 18px; }
.encabezado--centrado { margin-inline: auto; text-align: center; }

/* Línea divisoria fina */
.linea { height: 1px; background: var(--linea); border: 0; }

/* Número de sección estilo editorial (ej: 01 / 04) */
.num-seccion {
  font-family: var(--display);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--miel);
  letter-spacing: 0.05em;
}

/* ============================================================================
   5) COMPONENTES
   ========================================================================== */

/* --- 5.1 Botones --- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--texto);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.95em 1.8em;
  border-radius: 100px;
  border: 1.5px solid var(--terracota);
  background: var(--terracota);
  color: var(--crudo);
  cursor: pointer;
  transition: all var(--transicion);
  text-decoration: none;
}
.boton:hover { background: var(--terracota-osc); border-color: var(--terracota-osc); color: var(--crudo); transform: translateY(-2px); }
.boton .flecha { transition: transform var(--transicion); }
.boton:hover .flecha { transform: translateX(4px); }

.boton--linea {
  background: transparent;
  color: var(--tinta);
  border-color: var(--tinta);
}
.boton--linea:hover { background: var(--tinta); color: var(--papel); transform: translateY(-2px); }

.boton--wsp { background: #25884a; border-color: #25884a; }
.boton--wsp:hover { background: #1e6e3c; border-color: #1e6e3c; }

/* Enlace con flecha, estilo texto */
.enlace-flecha {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-weight: 600; font-size: 0.95rem; color: var(--terracota);
}
.enlace-flecha::after { content: "→"; transition: transform var(--transicion); }
.enlace-flecha:hover::after { transform: translateX(5px); }

/* --- 5.2 Navbar --- */
.navbar {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
  transition: box-shadow var(--transicion);
}
.navbar.con-sombra { box-shadow: 0 6px 30px -18px rgba(36,26,18,0.4); }
.navbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; gap: 24px;
}
.marca {
  font-family: var(--display);
  font-size: 1.32rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--tinta);
  white-space: nowrap;
}
.marca em { font-style: italic; color: var(--terracota); }

.nav-links { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 28px); list-style: none; }
.nav-links a {
  font-size: 0.92rem; font-weight: 500; color: var(--tinta);
  position: relative; padding-block: 6px;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 0; height: 1.5px; background: var(--terracota);
  transition: width var(--transicion);
}
.nav-links a:hover::after, .nav-links a.activo::after { width: 100%; }
.nav-links a.activo { color: var(--terracota); }

/* Botón hamburguesa (solo se ve en celular) */
.hamburguesa {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 8px;
}
.hamburguesa span { width: 26px; height: 2px; background: var(--tinta); transition: var(--transicion); }
.hamburguesa.abierto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa.abierto span:nth-child(2) { opacity: 0; }
.hamburguesa.abierto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- 5.3 Tarjetas --- */
.tarjeta {
  background: var(--crudo);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: clamp(24px, 3vw, 36px);
  transition: transform var(--transicion), box-shadow var(--transicion);
  height: 100%;
}
.tarjeta:hover { transform: translateY(-5px); box-shadow: 0 24px 50px -28px rgba(36,26,18,0.45); }
.tarjeta h3 { margin-bottom: 12px; }
.tarjeta__num { font-family: var(--display); font-style: italic; font-size: 1.6rem; color: var(--miel); display: block; margin-bottom: 14px; }

/* Tarjeta-enlace que ocupa toda el área cliqueable (ramas del proyecto) */
.rama {
  display: flex; flex-direction: column;
  background: var(--crudo);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion);
  height: 100%;
}
.rama:hover { transform: translateY(-6px); box-shadow: 0 28px 56px -30px rgba(36,26,18,0.5); }
.rama__media { aspect-ratio: 4/3; overflow: hidden; background: var(--papel-2); }
.rama__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.rama:hover .rama__media img { transform: scale(1.06); }
.rama__cuerpo { padding: clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; flex: 1; }
.rama__cuerpo h3 { margin-bottom: 10px; color: var(--tinta); }
.rama__cuerpo p { font-size: 0.98rem; margin-bottom: 20px; }
.rama__cuerpo .enlace-flecha { margin-top: auto; }

/* --- 5.4 Figuras / imágenes con marco --- */
.figura { position: relative; border-radius: var(--radio); overflow: hidden; }
.figura img { width: 100%; height: 100%; object-fit: cover; }
.figura--alta { aspect-ratio: 3/4; }
.figura--ancha { aspect-ratio: 4/3; }
.figura figcaption {
  font-family: var(--display); font-style: italic; font-size: 0.95rem;
  color: var(--tinta-suave); margin-top: 12px;
}
/* Detalle decorativo: marco offset detrás de una imagen */
.figura-marco { position: relative; }
.figura-marco::before {
  content: ""; position: absolute; inset: 18px -18px -18px 18px;
  border: 1.5px solid var(--miel); border-radius: var(--radio); z-index: -1;
}

/* --- 5.5 Reproductor de audio (lista para escuchar) --- */
.pista {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 0; border-bottom: 1px solid var(--linea);
}
.pista:last-child { border-bottom: 0; }
.pista__info { flex: 1; }
.pista__titulo { font-family: var(--display); font-size: 1.15rem; color: var(--tinta); }
.seccion--noche .pista__titulo { color: var(--papel); }
.pista__autor { font-size: 0.85rem; color: var(--tinta-suave); }
.seccion--noche .pista__autor { color: #b0a290; }
.pista audio { height: 38px; }

/* --- 5.6 Lista de datos (bio, ficha técnica) --- */
.ficha { list-style: none; }
.ficha li {
  display: grid; grid-template-columns: minmax(140px, 0.35fr) 1fr;
  gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--linea);
}
.ficha li:last-child { border-bottom: 0; }
.ficha dt, .ficha .ficha__clave {
  font-weight: 600; font-size: 0.82rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--terracota);
}
.ficha .ficha__valor { color: var(--tinta-suave); }

/* --- 5.7 Galería tipo mosaico (clic = lightbox) --- */
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.galeria a { display: block; overflow: hidden; border-radius: var(--radio); aspect-ratio: 1; cursor: zoom-in; }
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transicion); }
.galeria a:hover img { transform: scale(1.08); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20,14,8,0.94);
  display: none; align-items: center; justify-content: center;
  padding: 24px; cursor: zoom-out;
}
.lightbox.activo { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: var(--radio); }
.lightbox__cerrar {
  position: absolute; top: 22px; right: 28px;
  font-size: 2.4rem; color: var(--papel); background: none; border: 0; cursor: pointer; line-height: 1;
}

/* --- 5.8 Tabla de episodios (radio) --- */
.episodios { columns: 2; column-gap: 56px; list-style: none; }
.episodios li {
  break-inside: avoid; display: flex; gap: 14px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--linea);
}
.episodios .ep-num { font-family: var(--display); font-style: italic; color: var(--miel); min-width: 34px; }

/* --- 5.9 Cita / destacado --- */
.cita {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.4rem); line-height: 1.3;
  color: var(--tinta); max-width: 22ch;
}
.cita span { color: var(--terracota); }

/* --- 5.10 Pie de página --- */
.footer { background: var(--tinta-noche); color: var(--papel); padding-block: clamp(56px, 8vw, 88px); }
.footer a { color: var(--miel); }
.footer a:hover { color: var(--papel); }
.footer h3 { color: var(--papel); margin-bottom: 22px; }
.footer .marca { color: var(--papel); }
.footer .marca em { color: var(--miel); }
.footer__grilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
.footer__links { list-style: none; }
.footer__links li { padding: 6px 0; }
.footer__links a { color: #cbbdac; }
.footer__legal {
  margin-top: clamp(48px, 6vw, 72px); padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  font-size: 0.82rem; color: #9b8e7e;
}

/* --- 5.11 Hero de portada --- */
.hero { position: relative; padding-block: clamp(60px, 9vw, 120px) clamp(48px, 7vw, 90px); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__media { position: relative; }
.hero__media .figura { aspect-ratio: 4/5; }
/* Disco/mancha decorativa detrás del hero */
.hero::before {
  content: ""; position: absolute; top: -10%; right: -8%;
  width: 46vw; height: 46vw; max-width: 560px; max-height: 560px;
  background: radial-gradient(circle, color-mix(in srgb, var(--miel) 26%, transparent), transparent 70%);
  border-radius: 50%; z-index: -1;
}

/* Banda superior de página interior (mini-hero) */
.cabecera-pagina { padding-block: clamp(56px, 8vw, 104px) clamp(36px, 5vw, 56px); }
.cabecera-pagina .titulo-xl { font-size: clamp(2.6rem, 7vw, 6rem); }

/* Marquesina de texto desplazable (detalle de vanguardia) */
.marquesina { overflow: hidden; white-space: nowrap; border-block: 1px solid var(--linea); padding-block: 18px; }
.marquesina__pista { display: inline-block; animation: desplazar 32s linear infinite; }
.marquesina__pista span {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2.4rem); color: var(--tinta);
  padding-inline: 1.2em;
}
.marquesina__pista span::after { content: "✦"; color: var(--miel); padding-left: 2.4em; font-style: normal; }
@keyframes desplazar { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Utilidades rápidas */
.text-centro { text-align: center; }
.mt-s { margin-top: 14px; } .mt-m { margin-top: 28px; } .mt-l { margin-top: 48px; }
.grupo-botones { display: flex; flex-wrap: wrap; gap: 14px; }
.lista-check { list-style: none; }
.lista-check li { padding: 12px 0 12px 32px; position: relative; border-bottom: 1px solid var(--linea); color: var(--tinta-suave); }
.lista-check li::before { content: "✦"; position: absolute; left: 0; color: var(--miel); }
.lista-check li:last-child { border-bottom: 0; }

/* ============================================================================
   6) ANIMACIONES — revelado al hacer scroll
   Agregá la clase  .revelar  a cualquier elemento que quieras animar.
   El JS le pone .visible cuando entra en pantalla.
   ========================================================================== */
.revelar { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.revelar.visible { opacity: 1; transform: none; }
/* Retardos escalonados: agregá .d1 .d2 .d3 ... para que aparezcan en cascada */
.d1 { transition-delay: 0.08s; } .d2 { transition-delay: 0.16s; }
.d3 { transition-delay: 0.24s; } .d4 { transition-delay: 0.32s; }
.d5 { transition-delay: 0.40s; } .d6 { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; transition: none; }
  .marquesina__pista { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================================
   7) RESPONSIVE — tablets y celulares
   ========================================================================== */
@media (max-width: 980px) {
  .grilla-4 { grid-template-columns: repeat(2, 1fr); }
  .grilla-3 { grid-template-columns: repeat(2, 1fr); }
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__media { order: -1; max-width: 460px; }
  .footer__grilla { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  body { font-size: 17px; }
  .grilla-2, .grilla-3, .grilla-4, .grilla-split, .grilla-split--ancho-izq { grid-template-columns: 1fr; }
  .episodios { columns: 1; }
  .galeria { grid-template-columns: repeat(2, 1fr); }
  .footer__grilla { grid-template-columns: 1fr; }
  .ficha li { grid-template-columns: 1fr; gap: 4px; }

  /* Navegación móvil */
  .hamburguesa { display: flex; }
  .nav-links {
    position: fixed; inset: 72px 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--papel); border-bottom: 1px solid var(--linea);
    padding: 12px var(--gutter) 24px;
    transform: translateY(-130%); transition: transform var(--transicion);
    box-shadow: 0 20px 40px -24px rgba(36,26,18,0.5);
  }
  .nav-links.abierto { transform: translateY(0); }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; width: 100%; padding: 14px 0; font-size: 1.1rem; border-bottom: 1px solid var(--linea); }
  .nav-links a::after { display: none; }
}