/* Concepto: el packaging de la marca llevado a la web. Bandas mostaza/azul,
   lunares y el logo de dos cuadrados; fotos de estudio a sangre. */
:root{
  --azul:#0C2A50; --azul-2:#163A66; --mostaza:#DAB006; --mostaza-2:#E9C53A;
  --cal:#FAF9F5; --sal:#EEECE6; --tinta:#1B2230; --gris:#59606C;
  --display:"Barlow Semi Condensed","Kelson Sans","Arial Narrow",sans-serif;
  --sans:"Barlow","Kelson Sans",system-ui,sans-serif;
  --acento:"Zilla Slab",Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--cal);color:var(--tinta);font:400 1.0625rem/1.65 var(--sans)}
img{max-width:100%;display:block;height:auto}
a{color:var(--azul-2);text-underline-offset:3px}
a:hover{color:var(--azul)}
:focus-visible{outline:3px solid var(--mostaza);outline-offset:3px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.prose{max-width:64ch}
.wrap.prose{max-width:1180px}.wrap.prose>*{max-width:64ch}
h1,h2,h3{font-family:var(--display);font-weight:600;color:var(--azul);line-height:1.08;margin:0 0 .45em;text-wrap:balance}
h1{font-size:clamp(2.4rem,5.2vw,4rem);letter-spacing:-.005em}
h2{font-size:clamp(1.9rem,3.4vw,2.7rem)}
h3{font-size:1.4rem;font-weight:600}
p{margin:0 0 1.1em}
.lead{font:400 1.3rem/1.55 var(--acento);font-style:italic;color:var(--gris)}
.lema{font:500 .95rem/1.4 var(--display);letter-spacing:.32em;text-transform:uppercase}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;background:#fff;padding:8px;z-index:9}

/* Lunares (recurso del packaging) */
.lunares{background-color:var(--azul);background-image:radial-gradient(var(--mostaza) 23%,transparent 24.5%);background-size:28px 28px}
.lunares-m{background-color:var(--mostaza);background-image:radial-gradient(var(--azul) 23%,transparent 24.5%);background-size:28px 28px}
.franja{height:16px;background-size:16px 16px}

/* Cabecera */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--azul);z-index:10}
.top{background:var(--azul);color:#fff;position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.marca{display:block;line-height:0}
.marca img{height:52px;width:auto}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;flex-wrap:wrap}
nav a{display:block;color:#fff;text-decoration:none;font:500 1.02rem/1 var(--display);letter-spacing:.04em;padding:11px 12px}
nav a:hover{color:var(--mostaza)}
nav a[aria-current=page]{color:var(--mostaza);box-shadow:inset 0 -3px 0 var(--mostaza)}
.menu-btn{display:none;background:none;border:1px solid var(--mostaza);color:#fff;font:500 1rem var(--display);padding:8px 14px}
@media (max-width:960px){
  .menu-btn{display:block}
  nav{display:none;position:absolute;left:0;right:0;top:76px;background:var(--azul);padding:8px 24px 20px}
  nav.open{display:block}
  nav ul{flex-direction:column}
  nav a{padding:14px 4px;font-size:1.15rem}
}

/* Portada: como la caja de regalo. Mostaza arriba y franja azul con lunares abajo */
.portada{position:relative;background:var(--mostaza);overflow:hidden}
.portada::after{content:"";position:absolute;left:0;right:0;bottom:0;height:190px;background-color:var(--azul);background-image:radial-gradient(var(--mostaza) 23%,transparent 24.5%);background-size:28px 28px}
.portada .wrap{position:relative;z-index:1;display:grid;grid-template-columns:5fr 6fr;gap:clamp(24px,5vw,64px);align-items:end;padding-top:clamp(40px,6vw,72px);padding-bottom:56px}
.portada-txt{align-self:start;padding-bottom:170px}
.portada-txt img{width:min(320px,80%);margin-bottom:28px}
.portada h1{color:var(--azul);margin-bottom:.3em}
.portada-txt p{font-size:1.15rem;max-width:36ch;color:var(--azul)}
.portada-foto{position:relative;margin:0;box-shadow:0 18px 40px rgba(6,20,40,.35)}
.portada-foto img{width:100%;aspect-ratio:3/2;object-fit:cover}
.portada-foto figcaption{position:absolute;left:0;bottom:0;background:var(--azul);color:var(--mostaza);padding:10px 16px}
.btn{display:inline-block;background:var(--azul);color:#fff;font:600 1.02rem/1 var(--display);letter-spacing:.06em;padding:16px 24px;text-decoration:none}
.btn:hover{background:var(--azul-2);color:#fff}
.btn-m{background:var(--mostaza);color:var(--azul)}
.btn-m:hover{background:var(--mostaza-2);color:var(--azul)}
@media (max-width:860px){.portada-foto figcaption{font-size:.72rem;letter-spacing:.2em;padding:8px 12px}.portada .wrap{grid-template-columns:1fr;padding-bottom:40px}.portada-txt{padding-bottom:8px}.portada::after{height:150px}}

/* Bloques */
section{padding-block:clamp(56px,8vw,104px)}
.alt{background:var(--sal)}
.azul{background:var(--azul);color:#DCE3EE;position:relative;overflow:hidden}
.azul h2,.azul h3{color:#fff}
.azul a{color:var(--mostaza)}
.azul .lead{color:#C7D1E0}
.mostaza{background:var(--mostaza);color:var(--azul)}
.mostaza h2,.mostaza h3{color:var(--azul)}
.mostaza a{color:var(--azul);font-weight:600}
.trazo{position:absolute;right:-80px;bottom:-60px;width:min(460px,55vw);opacity:.13;pointer-events:none}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.dos>*{min-width:0}
.dos.inv>:first-child{order:2}
@media (max-width:860px){.dos{grid-template-columns:1fr}.dos.inv>:first-child{order:0}}
.foto-pie{margin:0}
.foto-pie figcaption{font:italic 400 .92rem/1.5 var(--acento);color:var(--gris);margin-top:10px}
.azul .foto-pie figcaption{color:#AEB9CB}

/* Tres pilares sobre mostaza: el lunar marca cada pilar */
.pilares{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,48px);margin-top:12px}
.pilares>div{min-width:0}
.pilares>div::before{content:"";display:block;width:44px;height:44px;border-radius:50%;background:var(--azul);margin-bottom:18px}
@media (max-width:860px){.pilares{grid-template-columns:1fr}}

/* Foto del pueblo a sangre */
.pueblo{position:relative;min-height:clamp(420px,52vw,640px);display:flex;align-items:flex-end;padding:0}
.pueblo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pueblo .wrap{position:relative;width:100%;padding-bottom:clamp(24px,4vw,48px)}
.pueblo .caja{background:var(--azul);color:#DCE3EE;padding:clamp(24px,3vw,40px);max-width:560px}
.pueblo .caja h2{color:#fff}
.pueblo .caja a{color:var(--mostaza)}

/* Cabecera de página interior: foto + título en el cuadrado mostaza del logo */
.pag-cab{position:relative;background:var(--azul)}
.pag-cab>img{width:100%;height:clamp(220px,32vw,420px);object-fit:cover;object-position:50% 35%}
.pag-cab .wrap{position:absolute;left:0;right:0;bottom:-1px}
.pag-cab.titulo-dcha .wrap{text-align:right}
.pag-cab h1{display:inline-block;background:var(--mostaza);color:var(--azul);margin:0;padding:18px 26px 14px;font-size:clamp(2rem,4.4vw,3.2rem)}

/* Línea del tiempo (secuencia real) */
.tiempo{list-style:none;margin:0;padding:0;border-left:2px solid var(--mostaza)}
.tiempo li{position:relative;padding:0 0 48px 34px}
.tiempo li::before{content:"";position:absolute;left:-12px;top:6px;width:22px;height:22px;border-radius:50%;background:var(--mostaza);box-shadow:0 0 0 5px var(--sal)}
.tiempo .anio{font:600 2.6rem/1 var(--display);color:var(--azul);display:block;margin-bottom:8px}
.tiempo .fila{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:start}
.tiempo .fila>*{min-width:0}
@media (max-width:860px){.tiempo .fila{grid-template-columns:1fr}}

/* Productos */
.cat{margin-top:64px}
.cat:first-of-type{margin-top:0}
.cat-cab{display:flex;align-items:center;gap:18px;margin-bottom:8px}
.cat-cab::before{content:"";flex:0 0 auto;width:54px;height:54px;border-radius:50%;background:var(--mostaza)}
.cat-cab h2{margin:0}
.cat>p{max-width:64ch}
.indice{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 48px;padding:0;list-style:none}
.indice a{display:block;background:var(--azul);color:#fff;padding:10px 14px;text-decoration:none;font:500 .98rem var(--display);letter-spacing:.03em}
.indice a:hover{background:var(--mostaza);color:var(--azul)}
.prod{display:grid;grid-template-columns:300px 1fr;gap:40px;padding:40px 0;border-top:1px solid #D6D2C8;scroll-margin-top:96px}
.prod>*{min-width:0}
.prod img{width:100%;height:auto}
.prod h3{font-size:1.7rem;margin-bottom:.15em}
.prod .sub{font:italic 400 1.05rem var(--acento);color:var(--gris);margin-bottom:1em}
.ficha{display:grid;grid-template-columns:max-content 1fr;gap:6px 20px;margin:0 0 1.1em;font-size:.98rem}
.ficha dt{color:var(--gris)}
.ficha dd{margin:0}
.precinto{display:inline-block;width:.85em;height:.85em;border-radius:50%;vertical-align:-1px;margin-right:6px;border:1px solid #999}
.p-negro{background:#111}.p-rojo{background:#C0272D}.p-verde{background:#2E8B3A}.p-blanco{background:#fff}
@media (max-width:720px){.prod{grid-template-columns:1fr;gap:18px}.prod img{max-width:380px}}

/* Escaparate de productos en portada */
.escaparate{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.escaparate a{display:block;text-decoration:none;color:#fff;background:var(--azul)}
.escaparate img{aspect-ratio:1;object-fit:cover;width:100%}
.escaparate span{display:block;padding:12px 14px;font:500 1.05rem/1.2 var(--display);letter-spacing:.02em}
.escaparate a:hover span{background:var(--mostaza);color:var(--azul)}
@media (max-width:860px){.escaparate{grid-template-columns:1fr 1fr}}

/* Tabla de precintos */
.tabla-w{overflow-x:auto}
.tabla{width:100%;border-collapse:collapse;margin:8px 0 24px}
.tabla th,.tabla td{text-align:left;padding:12px 14px;border-bottom:1px solid #D6D2C8;vertical-align:top}
.tabla th{font:600 1.05rem var(--display);color:var(--azul)}

/* Galería */
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.galeria img{aspect-ratio:4/3;object-fit:cover;width:100%}
@media (max-width:720px){.galeria{grid-template-columns:1fr 1fr}}

/* Pasos (secuencia real) */
.pasos{counter-reset:p;list-style:none;padding:0;margin:0}
.pasos li{counter-increment:p;position:relative;padding:4px 0 26px 62px;min-height:44px}
.pasos li::before{content:counter(p);position:absolute;left:0;top:0;width:42px;height:42px;border-radius:50%;background:var(--mostaza);color:var(--azul);font:600 1.3rem/42px var(--display);text-align:center}

/* Contacto */
.datos dt{color:var(--gris);font-size:.95rem;margin-top:18px}
.datos dd{margin:0;font:500 1.4rem/1.4 var(--display);color:var(--azul)}
.datos a{color:var(--azul)}

.wa{display:inline-flex;align-items:center;gap:6px}
.wa-ico{flex:0 0 auto;color:#25D366}
.datos .wa-ico{width:26px;height:26px}
/* Pie */
footer{background:var(--azul);color:#C3CCDA;font-size:.95rem;line-height:1.6}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-block:48px 32px}
footer img{width:200px;margin-bottom:16px}
footer a{color:#fff}
footer .legal{grid-column:1/-1;border-top:1px solid #2A4670;padding-top:20px;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:.88rem}
footer .lema{color:var(--mostaza);font-size:.8rem}
@media (max-width:860px){footer .wrap{grid-template-columns:1fr}}