/* Estilo comun de todas las paginas, inspirado en la plantilla Horizon de Format:
   fondo blanco, menu siempre visible y fotos en una tira horizontal. */

/* Fuentes alojadas aqui mismo: sin llamadas a Google desde la web publica */
@font-face { font-family:"Open Sans"; src:url(fonts/opensans.woff2) format("woff2"); font-weight:300 700; font-display:swap; }

:root {
  --fondo:#ffffff; --texto:#2b2a28; --suave:#8c8781; --piedra:#eeece8;
  --sans:"Open Sans", system-ui, sans-serif;
  --cabecera:88px;   /* alto de la cabecera */
  --margen:32px;     /* margen lateral y hueco inferior de la tira */
}
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body { background:var(--fondo); color:var(--texto); font:400 15px/1.7 var(--sans); }
a { color:inherit; text-decoration:none; }

/* --- Cabecera: nombre a la izquierda, menu a la derecha, siempre visible --- */
header { position:sticky; top:0; z-index:10; background:var(--fondo); height:var(--cabecera);
         display:flex; align-items:center; justify-content:space-between; padding:0 var(--margen); }
.logo { font-size:26px; font-weight:400; letter-spacing:-.01em; white-space:nowrap; }
nav ul { list-style:none; display:flex; gap:24px; }
nav a { font-size:14px; color:var(--suave); }
nav a:hover, nav a.activo { color:var(--texto); }
#menu-btn { display:none; background:none; border:0; font-size:24px; cursor:pointer; color:var(--texto); }

/* --- Tira horizontal de fotos a casi toda la altura --- */
.tira { display:flex; gap:10px; overflow-x:auto; overflow-y:hidden; padding:0 var(--margen);
        height:calc(100vh - var(--cabecera) - var(--margen)); scrollbar-width:thin; }
.tira figure { flex:0 0 auto; height:100%; display:flex; flex-direction:column; }
/* <picture> es un contenedor intermedio: sin esto las alturas en % de la
   foto no se resuelven y se muestran a su tamaño natural (cortadas) */
.tira figure > picture { display:block; height:calc(100% - 28px); }
.tira img { height:100%; width:auto; display:block; background:var(--piedra); }
.tira figcaption { font-size:13px; color:var(--suave); padding-top:6px; white-space:nowrap; }
.tira figcaption a:hover { color:var(--texto); }
.hueco { height:calc(100% - 28px); aspect-ratio:3/4; background:var(--piedra);
         display:grid; place-items:center; color:var(--suave); font-size:13px; }

/* --- Pagina de videos: un unico video por pantalla, centrado; al tocarlo
       se reproduce en el sitio y solo suena uno a la vez. Las flechas y los
       puntos van fuera de la tira, para que no se desplacen con ella --- */
.videos-pagina { position:relative; }
.videos-tira { align-items:center; gap:0; scrollbar-width:none; }
.videos-tira::-webkit-scrollbar { display:none; }
.videos-tira figure { flex:0 0 100%; justify-content:center; align-items:center;
                      /* Se reserva el hueco de los controles de abajo
                         (puntos y flechas); a los lados solo un margen */
                      padding:0 16px 84px; }
.videos-tira .repro { display:block; width:auto; height:auto; border:0; padding:0;
                      background:none; cursor:pointer; position:relative; }
.videos-tira .repro img { display:block; width:100%; height:100%; object-fit:contain; }
.videos-tira .video { display:none; width:100%; height:100%; object-fit:contain;
                      background:#000; }
.videos-tira .play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
                     width:74px; height:74px; border-radius:50%; background:rgba(0,0,0,.55);
                     border:2px solid rgba(255,255,255,.85); color:#fff; display:grid;
                     place-items:center; font-size:24px; padding-left:4px;
                     transition:background .2s, transform .2s; }
.videos-tira .repro:hover .play { background:rgba(0,0,0,.72);
                                  transform:translate(-50%,-50%) scale(1.08); }

/* Flechas y puntos del carrusel de videos: las flechas van integradas en
   la fila de puntos, como un circulo mas a cada lado */
.puntos .flecha { width:48px; height:48px; border-radius:50%; border:0; padding:0;
                  background:rgba(0,0,0,.12); color:var(--suave); font-size:22px;
                  line-height:1; cursor:pointer; display:grid; place-items:center; }
.puntos .flecha:hover { background:rgba(0,0,0,.24); color:var(--texto); }
/* En el primer y ultimo video la flecha se ve pero apagada */
.puntos .flecha.desactivada { opacity:.35; cursor:default; background:rgba(0,0,0,.12); }
.puntos .flecha.desactivada:hover { background:rgba(0,0,0,.12); color:var(--suave); }
.puntos { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:5;
          display:flex; gap:12px; }
.punto { width:48px; height:48px; border-radius:50%; border:0; padding:0; cursor:pointer;
         background:rgba(0,0,0,.12); }
.punto:hover { background:rgba(0,0,0,.24); }
.punto.activo { background:transparent; transform:none; }
.punto.activo::before { content:""; display:block; width:0; height:0;
                        border-left:34px solid #000;
                        border-top:24px solid transparent;
                        border-bottom:24px solid transparent; margin-left:6px; }

/* El carrusel de videos pagina con su propio codigo: nada del ajuste
   forzado del navegador, que peleaba con las flechas */
.videos-tira { scroll-snap-type:none; }
.videos-tira figure { scroll-snap-align:none; }

/* --- Pagina de texto (info y contacto) --- */
.info { display:grid; grid-template-columns:5fr 6fr; gap:56px; padding:24px var(--margen) 64px; max-width:1200px; }
.info .retrato { aspect-ratio:4/5; background:var(--piedra); display:grid; place-items:center; color:var(--suave); font-size:13px; }
.info .retrato picture { display:block; width:100%; height:100%; }
.info .retrato img { width:100%; height:100%; object-fit:cover; }
.info h1 { font-size:22px; font-weight:400; margin-bottom:20px; white-space:nowrap; }
.info h2 { font-size:15px; font-weight:600; margin:36px 0 10px; }
/* Texto justificado; los guiones evitan huecos grandes entre palabras en el movil */
.info p { margin-bottom:14px; color:#57534e; text-align:justify; hyphens:auto; }
.info a { border-bottom:1px solid var(--piedra); }
.info a:hover { border-color:var(--texto); }
.pie { font-size:13px; color:var(--suave); margin-top:48px; }
.pie a { margin-right:16px; border:0; }

/* --- Pantallas estrechas: el menu no cabe y se pliega --- */
@media (max-width:1100px) {
  #menu-btn { display:block; }
  nav { display:none; position:absolute; top:var(--cabecera); left:0; right:0; background:var(--fondo);
        padding:8px var(--margen) 20px; box-shadow:0 12px 16px -12px #0002; }
  nav.abierto { display:block; }
  nav ul { flex-direction:column; gap:12px; }
  nav a { font-size:16px; }
}

/* --- Movil: una foto a la vez; deslizando a los lados se pasa a la siguiente --- */
@media (max-width:820px) {
  :root { --cabecera:64px; --margen:16px; }
  .logo { font-size:20px; }
  .tira { gap:0; padding:0; height:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .tira::-webkit-scrollbar { display:none; }
  .tira figure { flex:0 0 auto; height:auto; padding:0 var(--margen) 32px; scroll-snap-align:center; }
  /* Todas las fotos a la misma altura, con su ancho natural: las apaisadas
     sobresalen de la pantalla y al deslizar se recorren antes de saltar a
     la siguiente */
  .tira figure > picture { display:block; height:calc(100svh - var(--cabecera) - 70px); }
  .tira img { height:100%; width:auto; }
  .videos-tira { height:calc(100svh - var(--cabecera)); }
  .videos-tira figure { flex:0 0 100%; height:100%; padding:0 16px 49px; }
  /* En el movil los puntos no caben a 48 px: se reducen para no salirse */
  .puntos { gap:10px; }
  .punto { width:28px; height:28px; }
  .puntos .flecha { width:28px; height:28px; font-size:16px; }
  .punto.activo::before { border-left:20px solid #000;
                          border-top:14px solid transparent;
                          border-bottom:14px solid transparent; margin-left:4px; }
  .tira figcaption { white-space:normal; }
  .hueco { width:100%; height:calc(100svh - var(--cabecera) - 70px); aspect-ratio:auto; }
  .info { grid-template-columns:1fr; gap:28px; }
}