/* Páginas secundarias (lo-nuestro.html, personaliza.html): misma marca que index.html.
   Si cambian la paleta o las fuentes de index.html, cámbialas también aquí. */
/* misma marca que index.html: Caviar Dreams para títulos y etiquetas, Ahellya para leer */
@font-face{ font-family:'Caviar Dreams'; src:url('../fonts/caviar-dreams.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Caviar Dreams'; src:url('../fonts/caviar-dreams-bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Ahellya'; src:url('../fonts/ahellya.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Ahellya'; src:url('../fonts/ahellya-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }

:root{
  --ink:#1A1A1A;
  --ink-soft:#5C5C5C;
  --paper:#F5F2E9;
  --paper-alt:#ECE4D2;
  --paper-card:#FBF8F1;
  --vino:#752130;
  --terra:#A6523D;
  --line:rgba(26,26,26,0.14);
  --font-display:'Caviar Dreams', 'Century Gothic', Futura, ui-sans-serif, system-ui, sans-serif;
  --font-text:'Ahellya', Georgia, 'Times New Roman', serif;
  color-scheme:light;
}
*{ box-sizing:border-box; }
html{ scroll-padding-top:96px; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-text); font-size:1.125rem; line-height:1.6; font-synthesis-weight:none;
  padding-left:max(20px, env(safe-area-inset-left)); padding-right:max(20px, env(safe-area-inset-right));
}
img{ display:block; max-width:100%; height:auto; }
h1,h2,h3{ font-family:var(--font-display); color:var(--vino); margin:0; line-height:1.12; text-wrap:balance; }
h1{ font-weight:400; }
h2,h3{ font-weight:700; }
p{ margin:0; }
a{ color:inherit; }
.wrap{ max-width:1080px; margin-inline:auto; }

.skip-link{
  position:fixed; left:max(20px, env(safe-area-inset-left)); top:-100px; z-index:40;
  padding:10px 16px; border-radius:3px; background:var(--ink); color:var(--paper-card);
  font-family:var(--font-display); font-weight:700; text-decoration:none;
}
.skip-link:focus{ top:12px; }

/* encabezado */
header{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:20;
  background:rgba(245,242,233,0.94); backdrop-filter:blur(6px); border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:16px; }
.wordmark{ display:inline-flex; padding:4px 0; }
.wordmark img{ height:50px; width:auto; }
.nav-actions{ display:flex; align-items:center; gap:22px; }
.nav-link{ font-family:var(--font-display); font-weight:700; font-size:0.92rem; color:var(--ink-soft); text-decoration:none; }
.nav-link:hover, .nav-link:focus-visible{ color:var(--vino); }
.btn{
  display:inline-flex; align-items:center; justify-content:center; padding:12px 22px; border-radius:3px;
  font-family:var(--font-display); font-weight:700; font-size:0.95rem; text-decoration:none;
  background:var(--ink); color:var(--paper-card); transition:background .15s;
}
.btn:hover, .btn:focus-visible{ background:var(--vino); }

/* entrada */
.intro{ padding-block:64px 44px; }
.intro h1{ font-size:clamp(2.6rem, 4.6vw + 1rem, 4.2rem); }
.lead{ margin-top:20px; max-width:52ch; font-size:1.25rem; color:var(--ink-soft); }
.indice{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.indice a{
  padding:8px 18px; border:1px solid var(--ink-soft); border-radius:999px; background:var(--paper-card);
  font-family:var(--font-display); font-weight:700; font-size:0.9rem; color:var(--ink); text-decoration:none;
  transition:border-color .15s, color .15s;
}
.indice a:hover, .indice a:focus-visible{ border-color:var(--vino); color:var(--vino); }

/* cada tema: Cultura, Paisajes, Tradición */
.tema{ padding-block:64px; border-top:1px solid var(--line); }
.tema-head{ max-width:62ch; }
.tema-head h2{ font-size:clamp(1.6rem, 1.9vw + 1rem, 2.2rem); }
.tema-head p{ margin-top:14px; font-size:1.15rem; color:var(--ink-soft); }
.items{ margin-top:36px; display:grid; grid-template-columns:repeat(var(--cols, 3), minmax(0, 1fr)); gap:22px; }
.item{
  display:flex; flex-direction:column; gap:12px; padding:22px;
  background:var(--paper-card); border:1px solid var(--line); border-radius:3px;
}
.item-img{ height:150px; display:flex; align-items:center; justify-content:center; }
.item-img img{ max-height:120px; width:auto; }
.item-img.foto{ height:auto; aspect-ratio:4/3; overflow:hidden; border-radius:3px; background:#fff; }
.item-img.foto img{ width:100%; height:100%; max-height:none; object-fit:cover; }
.item h3{ font-size:1.2rem; }
.item p{ font-size:1.05rem; line-height:1.55; color:var(--ink-soft); }
.lugar{ font-family:var(--font-display); font-weight:700; font-size:0.82rem; color:var(--terra); }
/* paisajes como estampillas: borde perforado */
.postal{ border:2px dotted rgba(117,33,48,0.45); border-radius:0; }

/* camisetas relacionadas */
.llevalo{ margin-top:32px; padding-top:22px; border-top:1px dashed var(--line); display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; }
.llevalo-title{ font-family:var(--font-display); font-weight:700; font-size:0.95rem; }
.producto{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.producto img{ width:72px; height:72px; object-fit:cover; border:1px solid var(--line); border-radius:3px; background:#fff; }
.producto span{ font-family:var(--font-display); font-weight:700; font-size:0.95rem; color:var(--vino); text-decoration:underline; text-underline-offset:3px; }
.producto:hover span, .producto:focus-visible span{ color:var(--ink); }

.cierre{ padding-block:56px 72px; border-top:1px solid var(--line); }
.cierre h2{ font-size:clamp(1.6rem, 1.9vw + 1rem, 2.2rem); }
.cierre p{ margin-top:14px; max-width:52ch; font-size:1.15rem; color:var(--ink-soft); }
.cierre .btn{ margin-top:24px; }

footer{ border-top:1px solid var(--line); padding-block:36px; }
.footer-grid{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; align-items:center; }
footer .wordmark img{ height:58px; }
.footer-tag{ font-size:1rem; color:var(--ink-soft); }
.footer-fine{ font-size:0.92rem; color:var(--ink-soft); }
.footer-fine a{ padding-block:8px; text-underline-offset:3px; }
.footer-fine a:hover, .footer-fine a:focus-visible{ color:var(--vino); }

@media (max-width:900px){
  .items{ grid-template-columns:1fr; gap:16px; }
  .item{ display:grid; grid-template-columns:132px minmax(0, 1fr); column-gap:22px; row-gap:8px; align-content:start; }
  .item > *{ grid-column:2; }
  .item .item-img{ grid-column:1; grid-row:1 / span 4; height:auto; align-self:start; }
  .item-img img{ max-height:110px; }
}
@media (max-width:480px){
  .item{ display:flex; }
  .item .item-img{ height:130px; align-self:stretch; }
}
@media (max-width:560px){
  .nav-link{ display:none; }
  .wordmark img{ height:42px; }
  .btn{ padding:10px 16px; }
  .intro{ padding-top:44px; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}

/* ---------- personaliza.html ---------- */
.intro-grid{ display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 0.75fr); gap:48px; align-items:center; }
.intro-img{ border-radius:3px; overflow:hidden; background:var(--paper-card); border:1px solid var(--line); }
/* pasos de una personalización: es una secuencia, de ahí los números */
.pasos{ list-style:none; counter-reset:paso; margin:36px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.pasos li{ counter-increment:paso; background:var(--paper); padding:22px 20px; }
.pasos li::before{ content:counter(paso, decimal-leading-zero); display:block; font-family:var(--font-display); font-size:2.2rem; line-height:1.2; color:var(--terra); }
.pasos h3{ margin-top:8px; font-size:1.1rem; }
.pasos p{ margin-top:6px; font-size:1rem; line-height:1.5; color:var(--ink-soft); }
.accion{ margin-top:30px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; }
.accion p{ max-width:58ch; font-size:1.08rem; color:var(--ink-soft); }
/* canales de contacto: el negativo de la marca, blanco sobre vinotinto */
.canales{ margin-top:32px; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); background:var(--vino); color:var(--paper-card); border-radius:3px; }
.canal{ position:relative; display:grid; gap:4px; padding:24px 26px; }
.canal + .canal{ border-left:1px solid rgba(251,248,241,0.25); }
.canal-label{ font-family:var(--font-display); font-weight:700; font-size:0.86rem; color:#EBD9DC; }
.canal a{ width:fit-content; font-size:1.15rem; color:var(--paper-card); word-break:break-word;
  text-decoration:underline; text-decoration-color:rgba(251,247,236,0.45); text-underline-offset:4px; }
.canal a::after{ content:""; position:absolute; inset:0; }
.canal a:hover{ text-decoration-color:#D49B2D; }
.canal a:focus-visible{ outline:2px solid #D49B2D; outline-offset:3px; border-radius:2px; }
/* técnicas de estampado */
.tecnicas{ margin-top:36px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px; }
.tecnica{ display:grid; gap:10px; align-content:start; padding:26px; background:var(--paper-card); border:1px solid var(--line); border-radius:3px; }
.tecnica h3{ font-size:1.3rem; }
.sigla{ font-family:var(--font-display); font-weight:700; font-size:0.86rem; color:var(--terra); }
.definicion{ font-size:1.14rem; line-height:1.5; }
.tecnica p:not(.sigla):not(.definicion){ font-size:1.05rem; line-height:1.55; color:var(--ink-soft); }

@media (max-width:900px){
  .sin-img .item{ display:flex; }
  .intro-grid{ grid-template-columns:1fr; gap:28px; }
  .intro-img{ max-width:300px; }
  .pasos{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .canales, .tecnicas{ grid-template-columns:1fr; }
  .canal + .canal{ border-left:0; border-top:1px solid rgba(251,248,241,0.25); }
}
@media (max-width:560px){
  .pasos{ grid-template-columns:1fr; }
}

/* ---------- privacidad.html: texto legal ---------- */
.fecha{ margin-top:14px; font-size:0.95rem; color:var(--ink-soft); }
.legal{ padding-bottom:72px; }
/* primera capa: el resumen que pide la normativa, antes del detalle */
.resumen{
  margin:0; max-width:860px; display:grid; grid-template-columns:11rem minmax(0, 1fr);
  background:var(--paper-card); border:1px solid var(--line); border-radius:3px;
}
.resumen dt, .resumen dd{ margin:0; padding:14px 22px; border-top:1px solid var(--line); }
.resumen dt:first-of-type, .resumen dd:first-of-type{ border-top:0; }
.resumen dt{ font-family:var(--font-display); font-weight:700; font-size:0.92rem; line-height:1.6; color:var(--vino); }
.resumen dd{ font-size:1.05rem; line-height:1.5; }
.resumen a, .texto a{ color:var(--vino); text-underline-offset:3px; }
.resumen a:hover, .resumen a:focus-visible, .texto a:hover, .texto a:focus-visible{ color:var(--ink); }
.texto{ max-width:68ch; }
.texto h2{ margin-top:52px; font-size:clamp(1.35rem, 1vw + 1rem, 1.7rem); }
.texto p{ margin-top:14px; }
.texto ul{ margin:14px 0 0; padding-left:1.2em; }
.texto li + li{ margin-top:10px; }
.texto li::marker{ color:var(--terra); }
.texto strong{ font-weight:400; color:var(--vino); }
.legal .accion{ margin-top:44px; }
/* sin resumen delante (cambios-y-devoluciones.html), el primer título no necesita tanto aire */
.legal > .texto:first-child > h2:first-child{ margin-top:8px; }
.enlace{ color:var(--vino); text-underline-offset:3px; }
.enlace:hover, .enlace:focus-visible{ color:var(--ink); }

/* ---------- 404.html ---------- */
.no-encontrada{ display:grid; grid-template-columns:auto minmax(0, 1fr); gap:48px; align-items:center; padding-block:88px 104px; }
.sello-404{ width:200px; height:auto; }
@media (max-width:640px){
  .no-encontrada{ grid-template-columns:1fr; gap:28px; padding-block:48px 72px; }
  .sello-404{ width:132px; }
}
@media (max-width:640px){
  .resumen{ grid-template-columns:1fr; }
  .resumen dd{ border-top:0; padding-top:0; }
}