@charset "UTF-8";
/* =========================================================================
   Quitita Home — hoja de estilos principal
   -------------------------------------------------------------------------
   Índice:
     1.  Tipografías locales (@font-face)
     2.  Variables de diseño (colores, tipos, tamaños)
     3.  Base y accesibilidad
     4.  Cabecera fija (HUD) y preloader
     5.  Rejilla y bloques de contenido
     6.  Fotografías: contenedor, protección y marca de agua
     7.  Portada
     8.  Capítulos, franjas y pie
     9.  Páginas secundarias (404, legales)
    10.  Aviso de imagen protegida
    11.  Responsive y movimiento reducido
   ========================================================================= */


/* 1. TIPOGRAFÍAS ---------------------------------------------------------
   Se sirven desde el propio dominio: no hay peticiones a Google Fonts,
   así no se envían datos de los visitantes a terceros (RGPD) y la
   Content-Security-Policy puede ser estricta.                            */

@font-face{
  font-family:"Fraunces";
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url("../fonts/fraunces-300-700.woff2") format("woff2");
}
@font-face{
  font-family:"Jost";
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url("../fonts/jost-300.woff2") format("woff2");
}
@font-face{
  font-family:"Jost";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/jost-400.woff2") format("woff2");
}
@font-face{
  font-family:"Amatic SC";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../fonts/amatic-sc-700.woff2") format("woff2");
}


/* 2. VARIABLES ----------------------------------------------------------- */

:root{
  color-scheme: light;
  --paper:#f7f5f0;
  --sage-pale:#e2e8e1;
  --sage:#c2d0c6;
  --sage-deep:#6f8478;
  --blue:#9db6cb;
  --lavender:#8b7ab5;
  --ink:#26292a;
  --ink-soft:#5a6061;
  --line:rgba(38,41,42,.15);

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --hand:"Amatic SC","Bradley Hand","Segoe Print",cursive;

  --s--1:clamp(.68rem,.66rem + .1vw,.76rem);
  --s-0:clamp(.95rem,.9rem + .25vw,1.06rem);
  --s-1:clamp(1.25rem,1.02rem + 1.1vw,1.95rem);
  --s-2:clamp(2rem,1.1rem + 4.4vw,4.2rem);
  --s-hero:clamp(2.3rem,1.05rem + 4.9vw,5rem);

  --pad:clamp(1.1rem,4vw,4rem);
  --gap-chapter:clamp(6rem,15vh,12rem);
  --gap-beat:clamp(2.5rem,7vh,6rem);
  --ease:cubic-bezier(.16,1,.3,1);

  --alto-hud:4.2rem;

  /* El texto de la marca de agua lo escribe assets/js/config.js.
     Aquí queda un valor de respaldo por si el script no llega a cargarse. */
  --marca-agua:"© Quitita Home";
  --marca-agua-mosaico:none;
}


/* 3. BASE Y ACCESIBILIDAD ------------------------------------------------ */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
/* Reglas que pide Lenis: si html conserva scroll-behavior:smooth, el
   navegador y Lenis animan el mismo desplazamiento a la vez y el scroll
   da tirones (se nota sobre todo en Chrome y Edge de Windows). */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}

body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:var(--s-0);line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden;height:100vh}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--lavender);outline-offset:3px}
::selection{background:var(--sage);color:var(--ink)}

/* Los anclajes no deben quedar tapados por la cabecera fija.
   Se usa el mismo desplazamiento (70 px) que aplica Lenis al pulsar un
   enlace del menú, para que abrir "tudominio.es/#casa" deje la página en
   el mismo sitio que llegar ahí navegando. */
:target{scroll-margin-top:70px}
[id]{scroll-margin-top:70px}

.label{
  font-size:var(--s--1);font-weight:400;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-soft);
}

/* Enlace para saltar al contenido: invisible hasta que se tabula. */
.skip-link{
  position:absolute;left:.6rem;top:-4rem;z-index:200;
  background:var(--ink);color:var(--paper);
  padding:.7rem 1.1rem;border-radius:3px;
  font-size:var(--s--1);letter-spacing:.12em;text-transform:uppercase;
  transition:top .25s var(--ease);
}
.skip-link:focus{top:.6rem}

/* Texto solo para lectores de pantalla. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Logotipo tipográfico */
.wordmark{
  font-family:var(--hand);font-weight:700;line-height:.9;
  letter-spacing:.015em;white-space:nowrap;color:var(--ink);display:block;
}


/* 4. HUD Y PRELOADER ----------------------------------------------------- */

.hud{
  position:fixed;top:0;right:0;left:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:.7rem var(--pad);
  background:rgba(247,245,240,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:border-color .4s var(--ease);
}
.hud.is-stuck{border-bottom-color:var(--line)}
.hud .wordmark{font-size:clamp(1.7rem,4.4vw,2.15rem)}
.hud__nav{display:flex;gap:1.5rem;align-items:center}
.hud__nav a{
  font-size:var(--s--1);letter-spacing:.15em;text-transform:uppercase;
  transition:color .3s var(--ease);
}
.hud__nav a:hover{color:var(--lavender)}
.hud__progress{
  position:fixed;left:var(--pad);bottom:var(--pad);z-index:50;font-size:var(--s--1);
  letter-spacing:.15em;color:var(--ink-soft);background:rgba(247,245,240,.8);
  padding:.25rem .5rem;border-radius:2px;
}
@media (max-width:680px){ .hud__nav a.is-optional{display:none} }

.preloader{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:var(--sage-pale);display:grid;place-items:center}
.preloader__box{display:flex;flex-direction:column;align-items:center;gap:1.4rem}
.preloader .wordmark{font-size:clamp(3rem,13vw,6.5rem);color:var(--sage-deep)}
.preloader__count{font-size:var(--s--1);letter-spacing:.3em;color:var(--sage-deep)}

/* Si el navegador no ejecuta JavaScript, el velo se retira desde
   assets/css/sin-js.css, que se carga dentro de <noscript>. */


/* 5. REJILLA Y BLOQUES --------------------------------------------------- */

.wrap{padding-inline:var(--pad)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2.4vw,2.4rem)}
/* Sin 100vw: en Windows la barra de scroll cuenta dentro de 100vw y la
   página se salía por la derecha. Fuera de .wrap el padre ya ocupa todo
   el ancho; dentro de .wrap se descuenta el padding lateral. */
.bleed{width:100%}
.wrap .bleed{width:auto;margin-inline:calc(-1 * var(--pad))}
.chapter{margin-block:var(--gap-chapter)}
figure{margin:0}


/* 6. FOTOGRAFÍAS --------------------------------------------------------- */

/* .media es el marco recortado de cada foto. Lleva tres capas:
     1. la propia imagen,
     2. .media__escudo  — lámina transparente que recibe el clic derecho
                          en lugar de la imagen, y donde se pinta el mosaico
                          de copyright,
     3. ::after         — la firma "© Nombre de la tienda" en una esquina.  */
.media{
  position:relative;overflow:hidden;
  background:var(--sage-pale);
  aspect-ratio:var(--ratio,4/3);
  isolation:isolate;
}
/* <picture> es solo un envoltorio: lo estiramos para que la imagen de
   dentro se posicione respecto al marco y no genere una línea de texto. */
.media picture{position:absolute;top:0;right:0;bottom:0;left:0;display:block}
.media img{
  position:absolute;top:-9%;left:0;height:118%;width:100%;object-fit:cover;
  /* Estorba el arrastre y el menú "Guardar imagen" del móvil. */
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;
  pointer-events:none;
}

/* Proporciones (antes iban como style="" en el HTML; al sacarlas de ahí
   la Content-Security-Policy puede prohibir los estilos en línea). */
.r-3-4{--ratio:3/4}
.r-4-3{--ratio:4/3}
.r-3-2{--ratio:3/2}
.r-2-1{--ratio:2/1}
/* Navegadores sin aspect-ratio (iOS y Safari anteriores a 15): se reserva
   la altura con padding-top, que es lo que se hacía antes. */
@supports not (aspect-ratio:1){
  .media{height:0;padding-top:75%}
  .r-3-4{padding-top:133.33%}
  .r-4-3{padding-top:75%}
  .r-3-2{padding-top:66.67%}
  .r-2-1{padding-top:50%}
  .hero__wide .media{padding-top:50%}
  @media (max-width:820px){ .hero__fig .media,.hero__wide .media{padding-top:75%} }
}

/* Capa de protección + marca de agua en mosaico. */
.media__escudo{
  position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;
  background-image:var(--marca-agua-mosaico);
  background-repeat:repeat;
  mix-blend-mode:soft-light;   /* se apoya en la foto, no la tapa */
  opacity:.55;
  pointer-events:auto;      /* el clic derecho cae aquí, no en la foto */
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}

/* Firma discreta en la esquina inferior derecha. */
.media::after{
  content:var(--marca-agua);
  position:absolute;right:.55rem;bottom:.45rem;z-index:3;
  font-family:var(--sans);font-weight:400;
  font-size:clamp(.56rem,1.5vw,.68rem);
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.82);
  /* Doble sombra: la firma se lee tanto sobre una foto oscura como sobre
     una pared blanca, sin necesidad de poner una caja detrás. */
  text-shadow:0 1px 2px rgba(0,0,0,.55), 0 0 10px rgba(0,0,0,.35);
  pointer-events:none;
}


/* 7. PORTADA ------------------------------------------------------------- */

.hero{padding:calc(var(--pad) + 4.2rem) 0 0}
.hero__grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(1.4rem,3vw,3rem);align-items:end;padding-inline:var(--pad);
}
.hero__text{grid-column:1/7}
.hero__fig{grid-column:8/13}
.hero h1{
  font-family:var(--display);font-weight:400;font-size:var(--s-hero);
  line-height:1.02;letter-spacing:-.022em;margin:.7rem 0 0;color:var(--ink);
  text-wrap:balance;
}
.hero__lead{
  max-width:44ch;font-size:var(--s-1);font-family:var(--display);
  font-weight:300;line-height:1.32;color:var(--ink);margin:1.5rem 0 0;
}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:2.2rem;
  padding-top:1rem;border-top:1px solid var(--line);
}
.hero__wide{margin-top:clamp(2.5rem,7vh,5rem)}
.hero__wide .media{aspect-ratio:2/1}
.hero__wide .media img{top:-8%;height:116%}
.hero__cue{display:flex;justify-content:space-between;gap:1rem;padding:.9rem var(--pad) 0}

.wmask{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.09em;margin-bottom:-.09em}
.word{display:inline-block;will-change:transform}

@media (max-width:820px){
  .hero__text{grid-column:1/-1}
  .hero__fig{grid-column:1/-1;margin-top:1.8rem}
  .hero__fig .media{aspect-ratio:4/3}
}


/* 8. CAPÍTULOS, FRANJAS Y PIE -------------------------------------------- */

.chapter__head{grid-column:1/4}
.chapter__num{display:block;margin-bottom:.5rem}
.marker{
  font-family:var(--display);font-weight:300;font-size:var(--s-2);
  line-height:1;margin:0 0 .8rem;letter-spacing:-.02em;
}
.chapter__intro{max-width:32ch;color:var(--ink-soft)}
.chapter__body{grid-column:5/13;display:flex;flex-direction:column;gap:var(--gap-beat)}
figcaption{margin-top:.8rem;display:flex;flex-direction:column;gap:.3rem}
.cap{
  font-family:var(--display);font-weight:300;font-size:var(--s-1);
  line-height:1.25;margin:0;max-width:28ch;
}
.w-70{width:min(100%,70%)}
.w-55{width:min(100%,55%)}
.push{margin-left:auto}
.drop{margin-top:clamp(1.5rem,5vh,4rem)}

.band{background:var(--sage-pale);padding-block:var(--gap-chapter);margin-block:var(--gap-chapter)}
.swatches{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:1.6rem}
.sw{width:60px;height:60px;border-radius:50%;position:relative;background:var(--sw-color,var(--sage))}
.sw span{
  position:absolute;left:50%;top:calc(100% + .5rem);transform:translateX(-50%);
  white-space:nowrap;font-size:var(--s--1);letter-spacing:.1em;color:var(--ink-soft);
}
.sw--salvia{--sw-color:#c2d0c6}
.sw--azul{--sw-color:#9db6cb}
.sw--lavanda{--sw-color:#8b7ab5}
.sw--roto{--sw-color:#f7f5f0;box-shadow:inset 0 0 0 1px rgba(38,41,42,.15)}

.dark{background:var(--ink);color:var(--paper);padding-block:var(--gap-chapter)}
.dark .label{color:rgba(247,245,240,.68)}
.dark p.big{
  font-family:var(--display);font-weight:300;font-size:var(--s-2);
  line-height:1.12;max-width:20ch;margin:1rem 0 0;
}

.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:1.1rem}
.marquee__inner{display:flex;gap:2.6rem;width:max-content;will-change:transform}
.marquee span{
  font-family:var(--display);font-weight:300;font-size:var(--s-1);
  white-space:nowrap;color:var(--sage-deep);
}

.visit{padding-block:var(--gap-chapter)}
.visit h2{
  font-family:var(--display);font-weight:400;font-size:var(--s-2);
  line-height:1;margin:0 0 2rem;letter-spacing:-.02em;
}
.info{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:2rem;border-top:1px solid var(--line);padding-top:1.6rem;
}
.info h3{
  margin:0 0 .4rem;font-weight:400;font-size:var(--s--1);
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
}
.info p{margin:0;line-height:1.7}
.info a:hover{color:var(--lavender)}

.cta{
  display:inline-block;margin-top:2.4rem;padding:.85rem 1.7rem;border-radius:100px;
  background:var(--ink);color:var(--paper);
  font-size:var(--s--1);letter-spacing:.15em;text-transform:uppercase;
  will-change:transform;transition:background .35s var(--ease);
}
.cta:hover{background:var(--lavender)}

footer{
  border-top:1px solid var(--line);padding:1.4rem var(--pad);
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;
  justify-content:space-between;align-items:center;
}
footer .wordmark{font-size:1.7rem;color:var(--ink-soft)}
.footer__legal{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;align-items:center}
.footer__legal a:hover{color:var(--lavender)}


/* 9. PÁGINAS SECUNDARIAS (404 y legales) --------------------------------- */

.pagina{
  min-height:70vh;
  padding:calc(var(--pad) + 6rem) var(--pad) var(--gap-chapter);
  max-width:68ch;margin-inline:auto;
}
.pagina h1{
  font-family:var(--display);font-weight:400;font-size:var(--s-2);
  line-height:1.04;letter-spacing:-.02em;margin:.6rem 0 1.4rem;
}
.pagina h2{
  font-family:var(--display);font-weight:400;font-size:var(--s-1);
  line-height:1.2;margin:2.6rem 0 .6rem;
}
.pagina p,.pagina li{color:var(--ink-soft);max-width:62ch}
.pagina a{text-decoration:underline;text-underline-offset:.2em}
.pagina a:hover{color:var(--lavender)}
.pagina ul{padding-left:1.1rem}
.pagina li{margin-bottom:.4rem}
.pagina .cta{margin-top:2rem}
.pagina__nota{
  margin-top:3rem;padding-top:1.2rem;border-top:1px solid var(--line);
  font-size:var(--s--1);
}


/* 10. AVISO DE IMAGEN PROTEGIDA ------------------------------------------ */

.aviso-copia{
  position:fixed;left:50%;bottom:1.4rem;transform:translate(-50%,1.2rem);
  z-index:120;max-width:min(92vw,34rem);
  background:rgba(38,41,42,.93);color:var(--paper);
  padding:.75rem 1.1rem;border-radius:4px;
  font-size:var(--s--1);letter-spacing:.06em;line-height:1.5;text-align:center;
  box-shadow:0 8px 30px rgba(38,41,42,.22);
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.aviso-copia.is-visible{opacity:1;visibility:visible;transform:translate(-50%,0)}


/* 11. RESPONSIVE Y MOVIMIENTO REDUCIDO ----------------------------------- */

@media (max-width:768px){
  .grid{grid-template-columns:1fr}
  .chapter__head,.chapter__body{grid-column:1/-1}
  .chapter__head{margin-bottom:1.5rem}
  .w-70,.w-55{width:100%}
  .push{margin-left:0}
  .drop{margin-top:0}
  .hero__wide .media{aspect-ratio:4/3}
  .hud__progress{display:none}
  footer{justify-content:flex-start}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

/* Impresión: sin velos ni cabeceras flotantes. */
@media print{
  .hud,.hud__progress,.preloader,.marquee,.aviso-copia,.skip-link{display:none!important}
  body{background:#fff}
}