/* ==========================================================
   MOOSE · Guía de Panes Artesanales
   Premium food editorial + product explorer
   Mobile-first (390 px) → tablet → desktop
   ========================================================== */

@font-face{font-family:"Archivo";font-weight:400;font-display:swap;src:url("/assets/fonts/Archivo-400.ttf") format("truetype");}
@font-face{font-family:"Archivo";font-weight:500;font-display:swap;src:url("/assets/fonts/Archivo-500.ttf") format("truetype");}
@font-face{font-family:"Archivo";font-weight:600;font-display:swap;src:url("/assets/fonts/Archivo-600.ttf") format("truetype");}
@font-face{font-family:"Fraunces";font-weight:300;font-display:swap;src:url("/assets/fonts/Fraunces-300.ttf") format("truetype");}
@font-face{font-family:"Fraunces";font-weight:400;font-display:swap;src:url("/assets/fonts/Fraunces-400.ttf") format("truetype");}

:root{
  --verde:#21372B;
  --verde-2:#33503F;
  --crema:#F6F2E9;
  --papel:#FFFFFF;
  --tinta:#20302A;
  --texto:#4B554F;
  --suave:#8B948D;
  --linea:rgba(33,55,43,.13);
  --linea-2:rgba(33,55,43,.24);
  --naranja:#E07B18;
  --naranja-claro:#FDF3E7;
  --verde-claro:#EDF1EC;
  --sombra:0 1px 2px rgba(33,55,43,.05), 0 6px 20px rgba(33,55,43,.06);
  --ancho:1160px;
  --radio:3px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}
body{
  margin:0;background:var(--crema);color:var(--texto);
  font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--verde);outline-offset:3px;}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.saltar{position:absolute;left:-999px;top:0;background:var(--verde);color:#fff;padding:10px 16px;z-index:99;}
.saltar:focus{left:8px;top:8px;}

.wrap{max-width:var(--ancho);margin:0 auto;padding:0 20px;}
@media (min-width:768px){.wrap{padding:0 32px;}}

h1,h2,h3,h4,p{margin:0;}
.serif{font-family:"Fraunces",Georgia,serif;font-weight:300;color:var(--verde);letter-spacing:-.014em;}
h1{font-family:"Fraunces",Georgia,serif;font-weight:300;color:var(--verde);
   font-size:clamp(31px,7.6vw,50px);line-height:1.04;letter-spacing:-.018em;}
h2{font-family:"Fraunces",Georgia,serif;font-weight:300;color:var(--verde);
   font-size:clamp(24px,4.6vw,33px);line-height:1.14;letter-spacing:-.014em;}
h3{font-family:"Fraunces",Georgia,serif;font-weight:300;color:var(--verde);
   font-size:clamp(19px,3.2vw,23px);line-height:1.22;}
.kicker{font-size:12px;letter-spacing:.19em;text-transform:uppercase;font-weight:600;color:var(--suave);}
.kicker.v{color:var(--verde-2);}
.kicker.n{color:var(--naranja);}
p+p{margin-top:14px;}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:40;background:rgba(246,242,233,.95);
     backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--linea);}
.top .bar{max-width:var(--ancho);margin:0 auto;padding:11px 20px;
     display:flex;align-items:center;justify-content:space-between;gap:14px;}
.marca{display:flex;align-items:center;gap:11px;min-height:44px;}
.marca .wm{line-height:0;}
.marca svg{width:92px;height:auto;display:block;}
.marca svg path{fill:var(--verde);}
.marca .rot{width:1px;height:19px;background:var(--linea-2);}
.marca .sub{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;
     color:var(--verde-2);line-height:1.25;max-width:96px;}
.nav{display:flex;gap:2px;}
.nav a{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
     color:var(--verde);opacity:.68;padding:12px 9px;min-height:44px;display:flex;align-items:center;}
.nav a:hover,.nav a[aria-current]{opacity:1;}
.nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--verde);}
@media (max-width:719px){
  .top .bar{padding:9px 14px;flex-wrap:wrap;gap:6px;}
  .marca .rot,.marca .sub{display:none;}
  .marca svg{width:80px;}
  .nav{width:100%;order:3;justify-content:space-between;border-top:1px solid var(--linea);}
  .nav a{font-size:11px;letter-spacing:.06em;padding:11px 4px;flex:1;justify-content:center;}
}

/* ---------- hero ---------- */
.hero{padding:26px 0 6px;}
.hero .in{display:grid;gap:20px;}
.hero p.lede{font-size:16.5px;max-width:52ch;}
.hero .subt{margin-top:12px;font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;
     font-weight:600;color:var(--verde-2);}
.acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;
     font-size:13px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
     border:1px solid var(--verde);border-radius:var(--radio);}
.btn.solido{background:var(--verde);color:var(--crema);}
.btn.solido:hover{background:var(--verde-2);}
.btn.linea{color:var(--verde);background:transparent;}
.btn.linea:hover{background:var(--verde-claro);}
.hero .duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.hero .duo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radio);}
/* mismo encuadre en todos los anchos: las fotos ya vienen recortadas al par */
@media (min-width:900px){
  .hero{padding:40px 0 10px;}
  .hero .in{grid-template-columns:1fr 1fr;gap:44px;align-items:center;}
  .hero .duo{gap:14px;}
  .hero .duo img{aspect-ratio:4/5;max-height:430px;}
}

/* ---------- tarjetas de producto ---------- */
.seccion{padding:44px 0;}
.seccion.compacta{padding:30px 0;}
.cab{margin-bottom:22px;}
.cab .kicker{margin-bottom:9px;}
.cab p{margin-top:12px;max-width:60ch;}

.productos{display:grid;gap:22px;}
@media (min-width:820px){.productos{grid-template-columns:1fr 1fr;gap:26px;}}
.pcard{background:var(--papel);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);
     display:flex;flex-direction:column;border-top:3px solid var(--verde);}
.pcard.naranja{border-top-color:var(--naranja);}
.pcard .im{position:relative;}
.pcard .im img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.pcard .bd{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
.pcard .tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--verde-2);}
.pcard.naranja .tag{color:var(--naranja);}
.pcard h3{margin:8px 0 10px;font-size:clamp(22px,4.4vw,27px);}
.pcard p{font-size:15.5px;}
.pcard .mini{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:20px 0 22px;
     border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);}
.pcard .mini div{padding:12px 8px 12px 0;}
.pcard .mini div+div{border-left:1px solid var(--linea);padding-left:12px;}
.pcard .mini b{display:block;font-family:"Fraunces",Georgia,serif;font-weight:300;
     font-size:19px;color:var(--verde);line-height:1.1;}
.pcard .mini span{display:block;margin-top:4px;font-size:10.5px;letter-spacing:.1em;
     text-transform:uppercase;color:var(--suave);line-height:1.35;}
.pcard .btn{margin-top:auto;}

/* ---------- iconos ---------- */
.ico{width:22px;height:22px;flex:none;stroke:var(--verde-2);fill:none;stroke-width:1.5;
     stroke-linecap:round;stroke-linejoin:round;}
.naranja .ico{stroke:var(--naranja);}

/* ---------- rejilla de datos rápidos ---------- */
.rapidos{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (min-width:720px){.rapidos{grid-template-columns:repeat(3,1fr);gap:16px;}}
.rapido{background:var(--papel);border-radius:var(--radio);padding:18px 16px;box-shadow:var(--sombra);}
.rapido .ico{margin-bottom:10px;}
.rapido b{display:block;font-family:"Fraunces",Georgia,serif;font-weight:300;font-size:20px;
     color:var(--verde);line-height:1.15;}
.rapido span{display:block;margin-top:5px;font-size:13px;color:var(--suave);line-height:1.4;}

/* ---------- identidad de producto ---------- */
.identidad{display:grid;gap:22px;}
.identidad img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radio);}
@media (min-width:900px){
  .identidad{grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;}
  .identidad img{aspect-ratio:4/3;}
}
.hechos{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--linea);margin-top:22px;}
.hechos div{padding:16px 10px 16px 0;border-bottom:1px solid var(--linea);}
.hechos div+div{border-left:1px solid var(--linea);padding-left:14px;}
.hechos b{display:block;font-family:"Fraunces",Georgia,serif;font-weight:300;font-size:22px;color:var(--verde);line-height:1.1;}
.hechos span{display:block;margin-top:5px;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--suave);}

/* ---------- galería ---------- */
.galeria{display:grid;gap:14px;}
@media (min-width:720px){.galeria{grid-template-columns:repeat(3,1fr);}}
.galeria figure{margin:0;background:var(--papel);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);}
.galeria img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.galeria figcaption{padding:12px 15px 15px;font-size:13.5px;color:var(--suave);line-height:1.45;}

/* ---------- cómo lo distingo ---------- */
.distingo{display:grid;gap:20px;}
@media (min-width:900px){.distingo{grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;}}
.marco{position:relative;border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);}
.marco img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.punto{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;
     background:var(--verde);color:var(--crema);font-size:13px;font-weight:600;
     display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.28);}
.naranja .punto{background:var(--naranja);}
.pistas{list-style:none;margin:0;padding:0;counter-reset:p;}
.pistas li{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--linea);}
.pistas li:first-child{border-top:1px solid var(--linea);}
.pistas .n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--verde);color:var(--crema);
     font-size:12.5px;font-weight:600;display:flex;align-items:center;justify-content:center;}
.naranja .pistas .n{background:var(--naranja);}
.pistas b{display:block;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--verde);}
.pistas span{display:block;margin-top:4px;font-size:14.5px;}

/* ---------- ingredientes ---------- */
.ingredientes{display:grid;grid-template-columns:1fr;gap:10px;}
@media (min-width:600px){.ingredientes{grid-template-columns:1fr 1fr;}}
@media (min-width:960px){.ingredientes{grid-template-columns:repeat(4,1fr);}}
.ing{background:var(--papel);border-radius:var(--radio);padding:16px 15px;box-shadow:var(--sombra);
     display:flex;gap:12px;align-items:flex-start;}
.ing b{display:block;font-size:14.5px;color:var(--verde);letter-spacing:.02em;}
.ing span{display:block;margin-top:3px;font-size:13.5px;color:var(--suave);line-height:1.4;}

/* ---------- nutrición ---------- */
.destacados{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
@media (min-width:720px){.destacados{grid-template-columns:repeat(4,1fr);gap:16px;}}
.dest{background:var(--papel);border-radius:var(--radio);padding:20px 16px;box-shadow:var(--sombra);text-align:left;}
.dest .n{font-family:"Fraunces",Georgia,serif;font-weight:300;font-size:clamp(30px,7vw,38px);
     color:var(--verde);line-height:1;}
.dest .u{font-size:15px;color:var(--verde-2);margin-left:2px;}
.dest .l{margin-top:8px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--suave);}
.porcion{margin-top:14px;font-size:13px;color:var(--suave);}

details.nf{margin-top:18px;background:var(--papel);border-radius:var(--radio);box-shadow:var(--sombra);}
details.nf>summary{list-style:none;cursor:pointer;min-height:52px;display:flex;align-items:center;
     justify-content:space-between;gap:12px;padding:14px 18px;font-size:13px;letter-spacing:.11em;
     text-transform:uppercase;font-weight:600;color:var(--verde);}
details.nf>summary::-webkit-details-marker{display:none;}
details.nf>summary .mas{font-size:20px;line-height:1;transition:transform .2s;}
details.nf[open]>summary .mas{transform:rotate(45deg);}
.tabla{padding:0 18px 20px;}
.tabla .t{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:24px;color:var(--verde);
     padding-bottom:10px;border-bottom:6px solid var(--verde);}
.tabla .r{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
     padding:8px 0;border-bottom:1px solid var(--linea);font-size:15px;}
.tabla .r b{font-weight:600;color:var(--verde);white-space:nowrap;}
.tabla .r.sub{padding-left:18px;}
.tabla .r.cal b{font-size:18px;}
.tabla .bar{height:5px;background:var(--verde);margin:9px 0 6px;}
.tabla .bar.fino{height:2px;}
.tabla .pie{margin-top:10px;font-size:11.5px;line-height:1.45;color:var(--suave);}

/* ---------- comparador ---------- */
.cmp-cab{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px;
     position:sticky;top:56px;z-index:20;background:var(--crema);padding:12px 0;}
@media (max-width:719px){.cmp-cab{top:92px;}}
.cmp-cab .c{display:flex;gap:10px;align-items:center;}
.cmp-cab img{width:60px;height:60px;object-fit:cover;border-radius:var(--radio);flex:none;
     box-shadow:0 0 0 1px var(--linea);}
.cmp-cab b{font-family:"Fraunces",Georgia,serif;font-weight:300;font-size:clamp(16px,3.4vw,21px);
     color:var(--verde);line-height:1.15;}
.fila{background:var(--papel);border-radius:var(--radio);box-shadow:var(--sombra);
     padding:15px 16px 16px;margin-bottom:10px;}
.fila .et{display:flex;align-items:center;gap:9px;font-size:11.5px;letter-spacing:.14em;
     text-transform:uppercase;font-weight:600;color:var(--suave);margin-bottom:11px;}
.fila .vs{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.fila .v{border-left:2px solid var(--verde);padding-left:11px;}
.fila .v.n{border-left-color:var(--naranja);}
.fila .v .d{font-size:15.5px;color:var(--tinta);line-height:1.4;}
.fila .v .d.num{font-family:"Fraunces",Georgia,serif;font-weight:300;font-size:26px;color:var(--verde);line-height:1.1;}
.fila .v .q{display:block;margin-top:3px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--suave);}
.nota-base{font-size:13px;color:var(--suave);margin-top:6px;}

/* ---------- cuál es cuál ---------- */
.cual{display:grid;gap:18px;}
@media (min-width:820px){.cual{grid-template-columns:1fr 1fr;gap:24px;}}
.cual .c{background:var(--papel);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);
     border-top:3px solid var(--verde);}
.cual .c.naranja{border-top-color:var(--naranja);}
.cual .c img{width:100%;aspect-ratio:1/1;object-fit:cover;}
.cual .c .bd{padding:20px 20px 22px;}

/* ---------- proceso ---------- */
.pasos{display:grid;gap:16px;}
.paso{background:var(--papel);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);}
@media (min-width:760px){
  .paso.con-foto{display:grid;grid-template-columns:1.1fr 1fr;}
  .paso.con-foto.inv .f{order:2;}
}
.paso .f img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2;}
.paso .b{padding:22px 22px 24px;align-self:center;}
.paso .n{font-family:"Fraunces",Georgia,serif;font-weight:300;font-size:30px;color:var(--suave);line-height:1;}
.paso h3{margin:6px 0 8px;}
.paso p{font-size:15.5px;}
.paso.clave{background:var(--verde);}
.paso.clave .n{color:rgba(246,242,233,.45);}
.paso.clave h3{color:var(--crema);}
.paso.clave p{color:rgba(246,242,233,.86);}

.bloque24{background:var(--verde);border-radius:var(--radio);padding:34px 24px;
     display:grid;gap:20px;align-items:center;}
@media (min-width:760px){.bloque24{grid-template-columns:auto 1fr;gap:40px;padding:44px 40px;}}
.bloque24 .num{font-family:"Fraunces",Georgia,serif;font-weight:300;font-size:clamp(72px,18vw,120px);
     color:var(--crema);line-height:.85;}
.bloque24 .lb{font-size:13px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;color:var(--crema);}
.bloque24 p{color:rgba(246,242,233,.86);margin-top:12px;max-width:58ch;}

/* ---------- avisos ---------- */
.aviso{background:var(--papel);border-left:3px solid var(--verde-2);border-radius:var(--radio);
     padding:18px 20px;box-shadow:var(--sombra);font-size:14.5px;}
.aviso.n{border-left-color:var(--naranja);}
.aviso b{color:var(--verde);}
.aviso ul{margin:10px 0 0;padding-left:20px;}
.aviso li{margin-bottom:7px;}

.salon{background:var(--verde);border-radius:var(--radio);padding:26px 22px 28px;}
.salon .kicker{color:rgba(246,242,233,.6);}
.salon .say{font-family:"Fraunces",Georgia,serif;font-weight:300;font-size:clamp(18px,3.4vw,23px);
     line-height:1.42;color:var(--crema);margin-top:12px;}
.salon ul{margin:18px 0 0;padding-left:20px;color:rgba(246,242,233,.85);font-size:14.5px;}
.salon li{margin-bottom:8px;}

.lista{list-style:none;margin:0;padding:0;}
.lista li{padding:12px 0;border-bottom:1px solid var(--linea);font-size:15.5px;}
.lista li:first-child{border-top:1px solid var(--linea);}

.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{border:1px solid var(--linea-2);border-radius:100px;padding:7px 14px;font-size:13.5px;color:var(--verde);background:var(--papel);}

/* ---------- empaque ---------- */
.empaques{display:grid;gap:20px;}
@media (min-width:820px){.empaques{grid-template-columns:1fr 1fr;gap:26px;}}
.empaque{background:var(--papel);border-radius:var(--radio);box-shadow:var(--sombra);overflow:hidden;}
.empaque .ph img{width:100%;aspect-ratio:3/4;object-fit:cover;}
.empaque .arte{background:var(--crema);display:flex;align-items:center;justify-content:center;
     aspect-ratio:3/4;padding:26px;}
.empaque .arte img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
.empaque .bd{padding:18px 20px 22px;}

/* ---------- pie ---------- */
.pie{background:var(--verde);color:rgba(246,242,233,.8);margin-top:48px;padding:40px 0 36px;}
.pie .in{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-end;}
.pie svg{width:120px;height:auto;display:block;}
.pie svg path{fill:var(--crema);}
.pie .corp{font-size:13.5px;line-height:1.8;margin-top:16px;}
.pie .corp b{color:var(--crema);}
.pie .ic{width:32px;color:var(--crema);}
.pie .ic svg{width:32px;}
.pie nav{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;}
.pie nav a{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:rgba(246,242,233,.75);}
.pie nav a:hover{color:var(--crema);}

.volver{display:inline-flex;align-items:center;min-height:44px;margin-top:26px;font-size:12px;
     letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--verde);opacity:.72;}
.volver:hover{opacity:1;}