/* ===============================================================
   dancarrillophoto.com — hoja de estilos
   Paleta y tipografía: todo se controla desde :root
   =============================================================== */

/* La tipografía vive en assets/fonts/, no se pide a Google.
   Es el mismo archivo para los dos pesos, igual que servía Google. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg:        #ffffff;
  --ink:       #141414;
  --muted:     #767676;   /* gris de los textos pequeños: el más claro que
                             aún cumple el contraste mínimo accesible */
  --rule:      #e6e6e6;
  --film-bg:   #f4f3f1;   /* fondo mientras carga la foto */

  --serif: "Cormorant Garamond", "Hoefler Text", Georgia, serif;
  --sans:  "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gap: 10px;            /* separación entre fotos (como la referencia) */
  --pad: 10px;            /* margen lateral de la tira */
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 14px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { -webkit-user-drag: none; user-select: none; }

a { color: inherit; }

/* Navegación con teclado: sin esto no se ve dónde estás al pulsar Tab.
   Sólo aparece con el teclado, nunca al hacer clic con el ratón. */
:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

.about-page :focus-visible { outline-color: #fff; }

/* ------------------------------ Header ------------------------ */

.site-header {
  flex: 0 0 auto;
  text-align: left;
  padding: 1.6em 2em 1.3em;
  background: var(--bg);
  z-index: 50;
}

.logo {
  margin: 0 0 .85em;
  font: 300 27px/1.1 var(--serif);
  letter-spacing: .22em;
  text-transform: uppercase;
}

.logo a { text-decoration: none; }

.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0 1.7em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  display: inline-block;
  padding: 2px 0;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 200ms ease;
}

.nav a:hover,
.nav a.is-current { color: var(--ink); }

.nav .ext::after {
  content: "↗";
  margin-left: .35em;
  font-size: 9px;
  vertical-align: .15em;
}

/* ------------------------- Galería horizontal ------------------ */

body.gallery {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.filmstrip {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 0 var(--pad) 46px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  overscroll-behavior-x: contain;
}

.filmstrip::-webkit-scrollbar { display: none; }
.filmstrip.is-dragging { cursor: grabbing; }

.shot {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  /* <figure> trae de fábrica un margen de 40 px a los lados: sin esto, en
     móvil la foto se salía de la pantalla y aquí la separación no era la
     de --gap. Para dar más aire entre fotos, sube --gap arriba del todo. */
  margin: 0;
  aspect-ratio: var(--ar, 3 / 4);   /* el valor real lo pone gallery.js */
  background: var(--film-bg);
}

/* <picture> es inline por defecto y dejaría la foto sin altura */
.shot picture {
  display: block;
  height: 100%;
}

.shot img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 700ms ease;
}

.shot img.is-loaded { opacity: 1; }

/* pie de foto, sólo si tiene título o lugar */
.caption {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 6px 11px;
  background: rgba(255, 255, 255, .85);
  color: var(--ink);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.shot:hover .caption { opacity: 1; }

/* -------------------------- HUD inferior ----------------------- */

.hud {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 1.4em;
  padding: 0 2em 1.1em;
  background: linear-gradient(to top, var(--bg) 62%, transparent);
  pointer-events: none;
  z-index: 40;
}

.counter {
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.counter b { color: var(--ink); font-weight: 400; }

.progress {
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
  position: relative;
}

.progress span {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: var(--ink);
  transition: width 120ms linear;
}

.hint {
  margin: 0;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* El HUD no recibe clics (así no estorba al arrastrar las fotos), pero sus
   enlaces sí: el de Privacy, abajo a la derecha. */
.hud a {
  pointer-events: auto;
  text-decoration: none;
  transition: color 200ms ease;
}

.hud a:hover { color: var(--ink); }

/* ------------------------- Vista índice ------------------------ */

.index-view {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 60;
  overflow-y: auto;
  padding: 2em 2em 4em;
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease, visibility 250ms;
}

.index-view.is-open { opacity: 1; visibility: visible; }

.index-close {
  position: sticky;
  top: 0;
  display: block;
  margin-left: auto;
  width: max-content;
  padding: .2em .4em;
  background: none;
  border: 0;
  color: var(--muted);
  font: 400 22px/1 var(--sans);
  cursor: pointer;
}

.index-close:hover { color: var(--ink); }

.index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  max-width: 1400px;
  margin: 1em auto 0;
}

.index-grid button {
  position: relative;
  padding: 0;
  border: 0;
  background: var(--film-bg);
  aspect-ratio: 3 / 4;
  cursor: pointer;
  overflow: hidden;
}

.index-grid picture { display: block; width: 100%; height: 100%; }

.index-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 250ms ease;
}

.index-grid button:hover img { opacity: .72; }

/* ---------------------- Páginas de texto ----------------------- */

body.page { display: flex; flex-direction: column; min-height: 100%; }

.sheet {
  flex: 1 0 auto;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 2.5em 2em 5em;
}

.sheet.wide { max-width: 1000px; }

.sheet h2 {
  margin: 0 0 1.2em;
  font: 300 25px/1.3 var(--serif);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Apartados de una página larga (el aviso): el primer título manda, los
   siguientes van más pequeños y con aire por arriba. */
.sheet h2 ~ h2 {
  margin-top: 2.6em;
  margin-bottom: .9em;
  font-size: 17px;
  letter-spacing: .14em;
}

/* Salvo cuando empieza otra parte del documento (la versión en inglés):
   ahí vuelve a mandar, separada por una línea. */
.sheet h2.parte {
  margin-top: 3.6em;
  padding-top: 2.6em;
  border-top: 1px solid var(--rule);
  font-size: 25px;
  letter-spacing: .12em;
}

/* El cambio de idioma, arriba de cada parte */
.lang {
  margin: -0.6em 0 2.2em;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.lang a { border: 0; color: var(--muted); }
.lang a:hover { color: var(--ink); }

.sheet p {
  margin: 0 0 1.35em;
  font-size: 15px;
  line-height: 1.8;
  color: #3a3a3a;
}

.sheet p.lead { font: 300 20px/1.65 var(--serif); color: var(--ink); }

.sheet a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.sheet a:hover { border-bottom-color: var(--ink); }

/* ------------------------- About -------------------------------
   La foto ocupa toda la pantalla y el texto va encima, en un
   recuadro blanco.

   PARA CAMBIAR LA FOTO DE FONDO: genera la nueva con
   sips -Z 2560 "IMAGENES WEB ALTA/LA-QUE-QUIERAS.jpg" \
        --out images/fijas/fondo-about.jpg
   (o cambia la ruta en .about-page aquí abajo).

   El recuadro va a la derecha, sobre el mar, para no tapar la
   silueta del cerro. Para centrarlo, borra el margin-left: auto. */

.about-page {
  min-height: 100%;
  background: #1a1a1a url("../images/fijas/fondo-about.jpg") center / cover no-repeat fixed;
}

/* Si el navegador entiende AVIF/WebP, la misma foto pesando un tercio.
   Los archivos los genera optimizar-fotos.mjs. */
@supports (background-image: image-set(url("x.avif") type("image/avif"))) {
  .about-page {
    background-image: image-set(
      url("../images/fijas/fondo-about.avif") type("image/avif"),
      url("../images/fijas/fondo-about.webp") type("image/webp"),
      url("../images/fijas/fondo-about.jpg")  type("image/jpeg")
    );
  }
}

/* Cabecera en blanco, porque va encima de la foto */
.about-page .site-header {
  background: transparent;
  background-image: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0));
  padding-bottom: 2.4em;
}

.about-page .logo a,
.about-page .nav a { color: #fff; }
.about-page .nav a { color: rgba(255,255,255,.72); }
.about-page .nav a:hover,
.about-page .nav a.is-current { color: #fff; }

.about-stage {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  padding: 1em 2em 4em;
}

/* El recuadro blanco */
.card {
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  padding: 3.4em 3.2em;
  /* Cristal: blanco a medias y la foto desenfocada por detrás.
     Para más o menos transparencia, sube o baja el .54 */
  background: rgba(255, 255, 255, .54);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  backdrop-filter: blur(24px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, .4);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
  animation: card-in 900ms cubic-bezier(.2, .7, .3, 1) both;
}

/* Navegadores viejos sin desenfoque: casi opaco, para que se lea */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card { background: rgba(255, 255, 255, .93); }
}

@keyframes card-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .card { animation: none; }
}

.card p {
  margin: 0 0 1.35em;
  font-size: 15px;
  line-height: 1.8;
  color: #3a3a3a;
}

.card p.lead { font: 300 20px/1.65 var(--serif); color: var(--ink); }
.card a { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(0, 0, 0, .22); }
.card a:hover { border-bottom-color: var(--ink); }

.about-page .site-footer { color: rgba(255,255,255,.6); }
.about-page .site-footer a { color: rgba(255,255,255,.6); }
.about-page .site-footer a:hover { color: #fff; }

/* Contact, dentro del recuadro */
.contact {
  margin: 2.6em 0 0;
  padding-top: 2.2em;
  border-top: 1px solid rgba(0, 0, 0, .14);
}

.contact p { margin: 0 0 .6em; }

.contact .email {
  margin: 0;
  font: 300 20px/1.65 var(--serif);
}

.contact .email a { color: var(--ink); }

/* Aviso de privacidad simplificado, debajo del correo en About. Va en
   letra pequeña a propósito: tiene que estar, pero sin pesar en la página. */
.legal {
  margin: 2.4em 0 0;
  padding-top: 1.5em;
  border-top: 1px solid rgba(0, 0, 0, .12);
  font-size: 11.5px;
  line-height: 1.7;
  color: #5e5e5e;
}

.legal a { border-bottom-color: rgba(0, 0, 0, .28); white-space: nowrap; }

.meta {
  margin: 2.5em 0 0;
  padding-top: 1.6em;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.meta a { border: 0; color: var(--muted); }
.meta a:hover { color: var(--ink); }

.site-footer {
  flex: 0 0 auto;
  padding: 2em;
  text-align: center;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }

/* En la galería de escritorio el pie sobra: el enlace ya está en el HUD.
   En móvil (más abajo) se enciende, porque allí el HUD no se ve. */
body.gallery .site-footer { display: none; }

/* --------------- Si el JavaScript no funciona -------------------
   gallery.js le pone la clase "js" al <html> nada más arrancar. Si no
   llega a hacerlo (JavaScript desactivado, un error, una conexión que
   se corta a medias) la tira se queda vacía, así que la escondemos y
   mandan las fotos en cuadrícula que index.html lleva dentro de
   <noscript>. Antes esto iba escrito dentro del HTML; está aquí para
   que la web pueda prohibir por cabecera todo estilo incrustado. */

html:not(.js) .filmstrip,
html:not(.js) .hud { display: none; }

html:not(.js) body.gallery { overflow: auto; height: auto; }
html:not(.js) body.gallery .site-footer { display: block; }

.ns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  padding: 0 10px 3em;
}

.ns-grid img { display: block; width: 100%; height: auto; }

/* ----------------------------- Móvil --------------------------- */

@media (max-width: 900px) {
  body.gallery { overflow: auto; height: auto; min-height: 100%; }

  .site-header { padding: 1.4em 1.2em 1.1em; }
  .logo { font-size: 22px; letter-spacing: .18em; margin-bottom: .8em; }
  .nav { gap: 0 1.1em; }
  .nav a { font-size: 10px; }

  .filmstrip {
    display: block;
    overflow: visible;
    padding: 0 12px 3em;
    cursor: default;
  }

  .shot {
    height: auto;
    width: 100%;
    margin-bottom: 12px;
  }

  .caption { opacity: 1; }

  .hud { display: none; }

  /* Sin HUD, el pie de la galería es el único sitio donde vive Privacy */
  body.gallery .site-footer { display: block; padding: 1em 1.2em 2.4em; }

  .sheet { padding: 1.5em 1.2em 3em; }
  .sheet h2 ~ h2 { margin-top: 2.2em; }

  /* About en móvil: el fondo se queda quieto, el recuadro se centra y la
     foto baja a 1280 px (la pantalla no da para más y pesa un cuarto) */
  .about-page {
    background-attachment: scroll;
    background-image: url("../images/fijas/fondo-about-movil.jpg");
  }

  @supports (background-image: image-set(url("x.avif") type("image/avif"))) {
    .about-page {
      background-image: image-set(
        url("../images/fijas/fondo-about-movil.avif") type("image/avif"),
        url("../images/fijas/fondo-about-movil.webp") type("image/webp"),
        url("../images/fijas/fondo-about-movil.jpg")  type("image/jpeg")
      );
    }
  }

  .about-stage { padding: .5em 1.2em 3em; }
  .card { margin: 0 auto; max-width: none; padding: 2.2em 1.6em; }
  .contact { margin-top: 2.2em; }
  .index-view { padding: 1.2em 1.2em 3em; }
  .index-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

.nowrap { white-space: nowrap; }