/* ============================================================
   MERCADO JAMÓN — bloque largo de "Descripción del producto".

   Va aparte de styles.css porque es una pieza cerrada: cabecera,
   secciones alternas de texto e imagen, garantías, ficha técnica y
   cierre. Todo el bloque vive dentro de .desc, así que las etiquetas
   genéricas (h1, h2, p, ul) se pueden usar sin pisar el resto del sitio.
   ============================================================ */

.desc{color:var(--tinta-2);font-size:1rem;line-height:1.7}
.desc .wrap{max-width:56rem;margin:0 auto}

/* ---------- cabecera del bloque ---------- */
.desc .hero{background:var(--crema);border:1px solid var(--linea);border-radius:.25rem;
  padding:clamp(32px,5vw,56px) clamp(20px,4vw,48px);text-align:center}
.desc .hero .eyebrow{font-size:.6875rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--oro);margin-bottom:1rem}
.desc .hero h1{font-family:var(--serif);font-size:clamp(26px,3.6vw,44px);font-weight:700;
  line-height:1.16;letter-spacing:-.015em;color:var(--tinta);max-width:34ch;margin:0 auto}
.desc .hero h1 span{color:var(--jamon)}
.desc .hero>.wrap>p{margin:1.1rem auto 0;max-width:56ch;color:var(--gris);font-size:1.0625rem}

.desc .hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  margin-top:clamp(28px,3.5vw,44px);padding-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--linea)}
.desc .hstat{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.desc .hstat b{font-family:var(--serif);font-size:clamp(20px,2.4vw,30px);
  font-weight:700;color:var(--tinta);line-height:1}
.desc .hstat small{font-size:.72rem;color:var(--gris);letter-spacing:.04em;text-align:center}
@media(max-width:639px){
  .desc .hero-stats{grid-template-columns:repeat(2,1fr);gap:1.5rem 1rem}
}

/* ---------- secciones alternas ---------- */
.desc .feature{padding:clamp(40px,5vw,64px) 0;border-bottom:1px solid var(--linea)}
.desc .feature .grid{display:grid;grid-template-columns:1fr;gap:clamp(24px,3vw,44px);
  align-items:center}
@media(min-width:768px){
  .desc .feature .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Las filas alternan solas: en .rev la imagen va primero en el HTML y por eso
   cae a la izquierda. En el móvil, en cambio, el texto tiene que abrir siempre
   —si no, el lector se encuentra dos fotos seguidas sin saber de qué van. */
@media(max-width:767px){
  .desc .feature .grid.rev .media{order:2}
  .desc .feature .grid.rev .copy{order:1}
}
.desc .copy>*+*{margin-top:1rem}
.desc .kicker{display:inline-flex;align-items:center;gap:.5rem;font-size:.6875rem;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--oro)}
.desc .kicker svg{width:18px;height:18px;stroke:currentColor;fill:none;flex-shrink:0}
.desc .feature h2{font-family:var(--serif);font-size:clamp(22px,2.6vw,32px);font-weight:700;
  line-height:1.22;letter-spacing:-.012em;color:var(--tinta)}
.desc .feature h2 em{font-style:italic;color:var(--jamon)}
.desc .feature p{color:var(--gris)}

.desc .points{display:flex;flex-direction:column;gap:.6rem;margin-top:1.15rem}
.desc .points li{display:flex;align-items:flex-start;gap:.6rem;font-size:.9375rem;
  line-height:1.5;color:var(--tinta-2)}
.desc .points svg{width:17px;height:17px;flex-shrink:0;margin-top:.18rem;
  stroke:var(--jamon);stroke-width:2.4;fill:none}

.desc .tagline{margin-top:1.25rem;padding:.9rem 1.1rem;background:var(--crema);
  border-left:3px solid var(--oro);border-radius:0 .25rem .25rem 0;
  font-size:.9375rem;line-height:1.6;color:var(--tinta-2)}

.desc .media{border-radius:.25rem;overflow:hidden;border:1px solid var(--linea);background:var(--crema)}
.desc .media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
@media(min-width:768px){.desc .media img{aspect-ratio:1/1}}

/* ---------- garantías ---------- */
.desc .assurance{padding:clamp(36px,4.5vw,56px) 0;border-bottom:1px solid var(--linea)}
.desc .assurance .row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.desc .acard{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;
  padding:1.35rem 1rem;background:var(--crema);border:1px solid var(--linea);border-radius:.25rem}
.desc .acard svg{width:26px;height:26px;stroke:var(--jamon);fill:none;margin-bottom:.2rem}
.desc .acard b{font-size:.875rem;font-weight:700;color:var(--tinta)}
.desc .acard span{font-size:.78rem;line-height:1.45;color:var(--gris)}
@media(max-width:899px){.desc .assurance .row{grid-template-columns:repeat(2,1fr)}}

/* ---------- ficha técnica ---------- */
.desc .specs{padding:clamp(36px,4.5vw,56px) 0;border-bottom:1px solid var(--linea)}
.desc .specs h3{font-family:var(--serif);font-size:clamp(20px,2.2vw,28px);font-weight:700;
  color:var(--tinta);margin-bottom:1.5rem;text-align:center}
.desc .spec-table{border:1px solid var(--linea);border-radius:.25rem;overflow:hidden}
.desc .spec-row{display:grid;grid-template-columns:14rem 1fr}
.desc .spec-row+.spec-row{border-top:1px solid var(--linea)}
.desc .spec-row:nth-child(odd){background:var(--crema)}
.desc .spec-row dt{padding:.85rem 1.1rem;font-size:.8125rem;font-weight:700;
  letter-spacing:.04em;color:var(--tinta)}
.desc .spec-row dd{padding:.85rem 1.1rem;font-size:.875rem;line-height:1.6;color:var(--gris)}
@media(max-width:639px){
  .desc .spec-row{grid-template-columns:1fr}
  .desc .spec-row dt{padding-bottom:0}
  .desc .spec-row dd{padding-top:.3rem}
}

/* ---------- cierre ---------- */
.desc .closing{padding:clamp(36px,4.5vw,56px) 0 .5rem;text-align:center}
.desc .closing h3{font-family:var(--serif);font-size:clamp(22px,2.6vw,32px);font-weight:700;
  line-height:1.2;color:var(--tinta);margin-bottom:.75rem}
.desc .closing p{max-width:52ch;margin:0 auto;color:var(--gris)}