/* Almacén de Clau · base compartida de la web (colores, letras y recursos del manual). */

@font-face { font-family: "Satisfy"; src: url("../fuentes/Satisfy-Regular.woff2") format("woff2"), url("../fuentes/Satisfy-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Delius"; src: url("../fuentes/Delius-Regular.woff2") format("woff2"), url("../fuentes/Delius-Regular.ttf") format("truetype"); font-display: swap; }
/* Nunito se carga desde Google Fonts en cada página. */

:root {
  /* Paleta del manual (pág. 13) */
  --bordo: #610E21;
  --tinta: #4A2620;
  --crema: #F8E0C0;
  --kraft: #C9A77C;
  --oliva: #A69A62;
  --madera: #966047;
  --naranja: #D68F52;
  /* Tintes: mezclas de la paleta, no colores nuevos */
  --papel: #FCF0E0;      /* crema 50 % */
  --hoja: #FEF9F2;       /* crema 20 % */
  --borde: #E4D3BE;      /* kraft 50 % */
  --fondo-oliva: #E2D6BA;/* oliva 30 % */
  --fondo-bordo: #ECD9CD;/* bordó 10 % */
  --suave: #6E4E46;      /* tinta 80 % */
  --kraft-claro: #F1E9DE; /* kraft 25 %: franjas de la tienda editorial */
  --luz: #EEC89F;        /* crema 70 % + naranja 30 %: la luz de la ventana */

  --f-nombre: "Satisfy", cursive;
  --f-titulo: "Delius", "Nunito", sans-serif;
  --f-texto: "Nunito", system-ui, sans-serif;

  /* Puntada dibujada: trazo 2,5, puntada visible 7,5, hueco 5 (manual pág. 15) */
  --puntada-bordo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12.5' height='4'%3E%3Cline x1='1.25' y1='2' x2='6.25' y2='2' stroke='%23610E21' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --puntada-tinta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12.5' height='4'%3E%3Cline x1='1.25' y1='2' x2='6.25' y2='2' stroke='%234A2620' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --puntada-oliva: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12.5' height='4'%3E%3Cline x1='1.25' y1='2' x2='6.25' y2='2' stroke='%23A69A62' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --puntada-crema: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12.5' height='4'%3E%3Cline x1='1.25' y1='2' x2='6.25' y2='2' stroke='%23F8E0C0' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --puntada-v-tinta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='12.5'%3E%3Cline x1='2' y1='1.25' x2='2' y2='6.25' stroke='%234A2620' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --puntada-v-oliva: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='12.5'%3E%3Cline x1='2' y1='1.25' x2='2' y2='6.25' stroke='%23A69A62' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --puntada-v-bordo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='12.5'%3E%3Cline x1='2' y1='1.25' x2='2' y2='6.25' stroke='%23610E21' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");

  /* Tiempos: con "reducir animaciones" se alargan, no se apagan */
  --lento: 1;
}
@media (prefers-reduced-motion: reduce) {
  :root { --lento: 2.4; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--papel);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }

:focus-visible { outline: 3px solid var(--bordo); outline-offset: 3px; border-radius: 4px; }

.solo-lector { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* "Ir a los productos": aparece al llegar con el teclado */
.solo-lector.saltar:focus, .solo-lector.saltar:focus-visible {
  position: fixed !important; top: 10px; left: 10px; z-index: 100;
  width: auto; height: auto; overflow: visible; clip: auto;
  padding: .7em 1.2em; border-radius: 999px;
  background: var(--bordo); color: var(--hoja); text-decoration: none;
  font-family: var(--f-titulo); font-size: 16px;
  outline: 3px solid var(--tinta); outline-offset: 2px;
}

/* Letras */
.nombre { font-family: var(--f-nombre); font-weight: 400; text-transform: none; line-height: 1.1; }
.rotulo { font-family: var(--f-titulo); text-transform: uppercase; letter-spacing: .2em; font-size: 13px; line-height: 1.5; }
.titulo { font-family: var(--f-titulo); text-transform: lowercase; line-height: 1.15; }

/* Puntada */
.puntada { display: block; height: 4px; background: var(--puntada-bordo) repeat-x left center; }
.puntada.tinta { background-image: var(--puntada-tinta); }
.puntada.oliva { background-image: var(--puntada-oliva); }
.puntada.crema { background-image: var(--puntada-crema); }

/* La puntada que se cose: se dibuja de a una puntada cuando aparece en pantalla */
.coser { width: 0; }
.coser.cosida { width: var(--largo, 100%); transition: width calc(1.4s * var(--lento)) steps(var(--puntadas, 24), end); }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .7em 1.4em;
  font-family: var(--f-titulo); font-size: 16px; text-decoration: none; line-height: 1.2;
  border-radius: 999px; border: 2px solid var(--bordo);
  background: var(--bordo); color: var(--hoja);
  cursor: pointer; transition: background .25s, color .25s, transform .25s;
}
.boton:hover { background: var(--tinta); border-color: var(--tinta); }
.boton.claro { background: transparent; color: var(--bordo); }
.boton.claro:hover { background: var(--bordo); color: var(--hoja); }
.boton:active { transform: translateY(1px); }

/* Aviso de precios de respaldo */
.aviso-respaldo {
  font-size: 14px; line-height: 1.4; color: var(--tinta);
  background: var(--hoja); border: 1.5px dashed var(--madera); border-radius: 10px;
  padding: .7em 1em; margin: 0 0 1.5em;
}
.aviso-respaldo[hidden] { display: none; }