/* ==========================================================================
   Portafolio · Rodrigo González Larrondo
   Una sola hoja de estilos para todas las páginas. Sin frameworks.

   CÓMO ORIENTARSE
   1. Variables y fuentes  ......... colores y tipografías (arriba)
   2. Fondo fijo  .................. la imagen de fondo de cada página
   3. Inicio y Cine  ............... portada con menú centrado
   4. Páginas interiores  .......... título, "Atrás" y columna de contenido
   5. Videos · Galería · Música  ... bloques de contenido
   6. Textos  ...................... PDFs, extractos y "garabatos"
   7. Móvil  ....................... ajustes para pantallas angostas

   Tipografías: Poppins es la misma del sitio original. Las otras cuatro del
   original (DIN Next, Avenir LT, Madefor, Droid Serif) son de pago o propias de
   Wix, así que se usan equivalentes libres: Barlow, Nunito Sans, DM Sans y Noto Serif.
   ========================================================================== */

@font-face{font-family:'Poppins';font-style:normal;font-weight:200;font-display:swap;src:url('../fonts/poppins-200.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-600.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-700.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/barlow-300.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/barlow-500.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/barlow-700.woff2') format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/nunito-sans-300.woff2') format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/nunito-sans-700.woff2') format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/nunito-sans-800.woff2') format('woff2')}
@font-face{font-family:'Noto Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/noto-serif-400.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/dm-sans-400.woff2') format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/dm-sans-700.woff2') format('woff2')}

/* 1. Variables ------------------------------------------------------------ */
:root{
  --cafe:#552800;      /* nombre "Rodrigo González Larrondo" en páginas interiores */
  --naranjo:#aa5100;   /* subtítulo de Arte 3D y Textos */
  --gris:#5e5d5d;      /* subtítulos, "Atrás" y color base del fondo */
  --tinta:#2c2c2b;     /* texto de la página Textos */
  --claro:#f1f1f1;     /* menú del Inicio */
  --f-poppins:'Poppins',Arial,sans-serif;
  --f-din:'Barlow',Arial,sans-serif;                 /* sustituye a DIN Next */
  --f-avenir:'Nunito Sans',Arial,sans-serif;         /* sustituye a Avenir LT */
  --f-madefor:'DM Sans',Arial,sans-serif;            /* sustituye a Madefor Display */
  --f-serif:'Noto Serif',Georgia,serif;              /* sustituye a Droid Serif */
  --f-lucida:'Lucida Sans Unicode','Lucida Grande','Lucida Sans',Arial,sans-serif;
  --gutter:24px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--gris);color:var(--tinta);font-family:var(--f-poppins);-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:4px}
img{max-width:100%}

/* 2. Fondo fijo ----------------------------------------------------------- */
.fondo{position:fixed;inset:0;z-index:-1;background:var(--gris) center/cover no-repeat}
.fondo--oscuro{background-image:url('../img/fondo-inicio.jpg')}   /* Inicio y Cine */
.fondo--claro{background-image:url('../img/fondo-paginas.png')}   /* el resto de las páginas */

/* 3. Inicio y Cine -------------------------------------------------------- */
/* Franja blanca vacía de arriba, tal como está en el sitio original.
   Para quitarla: borra la línea <div class="franja"> de index.html y cine.html. */
.franja{position:absolute;top:0;left:0;right:0;height:100px;background:#fff;box-shadow:0 0 5px rgba(0,0,0,.7);z-index:2}
.portada{position:relative;min-height:100vh;padding:100px var(--gutter);display:grid;place-content:center;justify-items:center;text-align:center}
.nombre{margin:0;font:200 clamp(30px,5.5vw,56px)/1.41 var(--f-poppins);color:#fff}
.menu{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 38px;margin-top:24px}
.menu a{font:600 clamp(17px,2.45vw,25px)/1.4 var(--f-poppins);color:var(--claro);text-decoration:none}
.menu a:hover,.menu a:focus-visible{text-decoration:underline;text-underline-offset:6px}
.cine{position:relative}
.menu--cine{gap:8px 52px;margin-top:0}
.menu--cine a{font-size:clamp(24px,3.8vw,39px);color:#fff}
.cine .atras{position:absolute;right:22px;bottom:calc(100% + 85px);color:#fff}

/* 4. Páginas interiores --------------------------------------------------- */
.atras{font:300 12px/1.2 var(--f-din);letter-spacing:.04em;text-transform:uppercase;color:var(--gris);text-decoration:none}
.atras:hover{text-decoration:underline}
.wrap{position:relative;width:min(var(--ancho,780px),calc(100% - 2 * var(--gutter)));margin:0 auto;padding:62px 0 100px}
.wrap .atras{position:absolute;top:65px;right:22px}
.marca{display:block;width:min-content;font:700 44px/52.8px var(--f-poppins);text-transform:uppercase;color:var(--cafe);text-decoration:none}
.seccion{margin:10px 0 0;font:600 30px/1.4 var(--f-poppins);text-transform:uppercase;color:var(--gris)}
.contenido{margin-top:34px}

/* Ancho de columna y detalles propios de cada página (la clase está en <body>) */
.p-ficcion{--ancho:716px}
.p-ficcion .seccion{font-family:var(--f-din);font-weight:300}
.p-documental{--ancho:700px}
.p-videoclip{--ancho:770px}
.p-arte{--ancho:800px}
.p-arte .seccion,.p-textos .seccion{color:var(--naranjo)}
.p-musica{--ancho:700px}
.p-musica .marca,.p-musica .seccion{font-family:var(--f-din)}
.p-musica .seccion{font-weight:300}
.p-textos{--ancho:810px}

/* 5. Videos · Galería · Música -------------------------------------------- */
.videos{display:grid;gap:12px}
.videos--2{grid-template-columns:repeat(2,1fr)}
.video{position:relative;aspect-ratio:16/9;background:#000}
.video--ancho{grid-column:1/-1}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Galería de Arte 3D: rejilla de 2 columnas. Cada pieza (imagen o video) puede ser:
   (sin clase) media columna · .ancho = columna completa · .medio = centrada a 600 px.
   Para reordenar o cambiar el tamaño de una pieza basta mover su línea o cambiar su clase en arte-3d.html. */
.galeria{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;align-items:start}
.galeria img,.galeria video{display:block;width:100%;height:auto;background:#1b1b1b}
.galeria .ancho{grid-column:1/-1}
.galeria .medio{grid-column:1/-1;width:min(100%,600px);justify-self:center}

.discos{display:grid;gap:56px;justify-items:center}
.disco{width:min(100%,352px)}
.disco a{display:block}
.disco img{display:block;width:100%;height:auto;aspect-ratio:311/295;object-fit:cover}
.disco iframe{display:block;width:100%;height:352px;margin-top:12px;border:0;border-radius:12px}

/* 6. Textos --------------------------------------------------------------- */
.p-textos .contenido{color:var(--tinta)}
.t-enlace{display:inline-block;font:700 17px/1.3 var(--f-avenir);color:var(--tinta)}
.t-nota{max-width:40ch;margin:8px 0 0;font:300 16px/24px var(--f-avenir);color:#000}
.t-bloque{margin-bottom:44px}
.t-sub{margin:22px 0 8px;font:800 20px/1.3 var(--f-avenir);color:var(--tinta)}
.colapsable{max-width:420px;margin-bottom:18px}
.colapsable__texto{margin:0;font:300 16px/24px var(--f-avenir);color:#000}
.colapsable__mas{display:none;margin-top:6px;padding:0;border:0;background:none;font:700 14px/1.4 var(--f-avenir);color:var(--tinta);text-decoration:underline;cursor:pointer}
.js .colapsable__mas{display:inline-block}
.js .colapsable:not(.abierto) .colapsable__texto{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.garabatos h2{margin:72px 0 30px;font:600 28px/1.5 var(--f-poppins);letter-spacing:.01em;color:var(--tinta)}
.g-fila{display:grid;grid-template-columns:1fr 1fr 1.63fr;gap:20px;margin-bottom:56px}
.g-fila p,.g-texto{margin:0;color:var(--tinta)}
.g-texto{margin-bottom:56px}
.g-lucida-grande{font:41px/53.3px var(--f-lucida)}
.g-lucida-medio{font:21px/27.3px var(--f-lucida)}
.g-avenir{font:300 17px/22.1px var(--f-avenir)}
.g-madefor{font:400 17px/22.1px var(--f-madefor);text-align:justify}
.g-serif{font:400 17px/22.1px var(--f-serif);max-width:451px}
.g-barlow{font:500 17px/22.1px var(--f-din);text-align:justify}

/* 7. Móvil ---------------------------------------------------------------- */
@media (max-width:640px){
  :root{--gutter:20px}
  .wrap{padding-top:40px}
  .wrap .atras{top:43px;right:0}
  .marca{font-size:34px;line-height:1.2}
  .seccion{font-size:24px}
  .contenido{margin-top:26px}
  .videos--2{grid-template-columns:1fr}
  .menu{gap:6px 22px}
  .cine .atras{right:0;bottom:calc(100% + 40px)}
  .g-fila{grid-template-columns:1fr;gap:34px}
  .g-lucida-grande{font-size:34px;line-height:1.3}
  .garabatos h2{font-size:22px;margin-top:56px}
  .disco iframe{height:352px}
}
@media (max-width:560px){
  .galeria{grid-template-columns:1fr}
  .galeria .ancho,.galeria .medio{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}