/* =========================================================
   DOICHE GOURMET FOODS — ARTICLE / BLOG
   Complementa /assets/css/styles.css sin cambiar el branding.
   ========================================================= */

:root{
  --article-red:#d72027;
  --article-yellow:#f3c21a;
  --article-ink:#111111;
  --article-muted:#666666;
  --article-line:#e9e9e9;
  --article-soft:#f8f8f6;
  --article-cream:#fff8e8;
}

/* Evita que reglas genéricas del home compriman el artículo */
.article-page,
.article-page *{
  box-sizing:border-box;
}

.article-page{
  color:var(--article-ink);
}

.article-page .container{
  width:min(1180px,calc(100% - 40px));
  margin-inline:auto;
}

/* HERO */
.article-hero{
  position:relative;
  overflow:hidden;
  padding:clamp(72px,8vw,112px) 0 clamp(42px,5vw,72px);
  background:
    radial-gradient(circle at 88% 15%,rgba(243,194,26,.20),transparent 28%),
    radial-gradient(circle at 8% 92%,rgba(215,32,39,.10),transparent 30%),
    #fff;
  border-bottom:1px solid var(--article-line);
}

.article-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);
  align-items:center;
  gap:clamp(34px,6vw,76px);
}

.article-hero-copy{
  min-width:0;
}

.article-hero-copy .eyebrow{
  margin-bottom:12px;
}

.article-hero-copy h1{
  margin:0 0 20px !important;
  max-width:820px;
  font-size:clamp(2.3rem,4.2vw,4.65rem) !important;
  line-height:1.02 !important;
  letter-spacing:-.045em;
  text-wrap:balance;
}

.article-hero-copy .hero-lead{
  max-width:750px;
  margin:0;
  font-size:clamp(1.05rem,1.35vw,1.28rem);
  line-height:1.65;
  color:#474747;
}

.article-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 12px;
  margin-top:22px;
  color:#6b6b6b;
  font-size:.92rem;
}

.article-meta strong{
  color:#222;
}

.article-hero-media{
  position:relative;
  margin:0;
  min-height:440px;
  overflow:hidden;
  border-radius:28px;
  background:#111;
  box-shadow:0 28px 70px rgba(0,0,0,.16);
}

.article-hero-media img{
  display:block;
  width:100%;
  height:100%;
  min-height:440px;
  object-fit:cover;
}

.article-hero-media::after{
  content:"";
  position:absolute;
  inset:45% 0 0;
  background:linear-gradient(to bottom,transparent,rgba(0,0,0,.63));
  pointer-events:none;
}

.article-hero-badge{
  position:absolute;
  z-index:2;
  left:22px;
  right:22px;
  bottom:22px;
  margin:0;
  padding:18px 20px;
  border-radius:18px;
  color:#171717;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  box-shadow:0 12px 30px rgba(0,0,0,.14);
}

.article-hero-badge strong{
  display:block;
  margin-bottom:5px;
  font-size:1rem;
}

.article-hero-badge span{
  display:block;
  line-height:1.45;
  color:#555;
}

/* BREADCRUMBS */
.breadcrumbs{
  margin:0 0 26px;
  font-size:.9rem;
}

.breadcrumbs ol{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  padding:0;
  margin:0;
}

.breadcrumbs li{
  display:flex;
  align-items:center;
  gap:8px;
  color:#747474;
}

.breadcrumbs li:not(:last-child)::after{
  content:"/";
  color:#b3b3b3;
}

.breadcrumbs a{
  color:#333;
  text-decoration:none;
}

.breadcrumbs a:hover{
  color:var(--article-red);
}

/* ARTICLE NAV — menú del artículo */
.article-nav-wrap{
  position:relative;
  z-index:4;
  margin-top:-1px;
  border-bottom:1px solid var(--article-line);
  background:#fff;
}

.article-nav{
  padding:28px 0 30px;
}

.article-nav-header{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:18px;
}

.article-nav-header .eyebrow{
  margin:0 0 4px;
}

.article-nav-header h2{
  margin:0 !important;
  font-size:clamp(1.35rem,2vw,1.8rem) !important;
  line-height:1.15;
}

.article-nav-hint{
  margin:0;
  max-width:420px;
  color:#707070;
  font-size:.92rem;
  line-height:1.45;
  text-align:right;
}

.article-nav-list{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:article-nav;
}

.article-nav-list li{
  counter-increment:article-nav;
  min-width:0;
}

.article-nav-list a{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:58px;
  height:100%;
  padding:11px 12px;
  border:1px solid #e8e8e8;
  border-radius:14px;
  background:#fff;
  color:#222;
  text-decoration:none;
  font-size:.86rem;
  font-weight:700;
  line-height:1.25;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}

.article-nav-list a::before{
  content:counter(article-nav,decimal-leading-zero);
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:50%;
  color:#fff;
  background:var(--article-red);
  font-size:.72rem;
  font-weight:800;
}

.article-nav-list a:hover,
.article-nav-list a:focus-visible{
  border-color:rgba(215,32,39,.42);
  box-shadow:0 8px 22px rgba(0,0,0,.07);
  transform:translateY(-2px);
}

/* ARTICLE BODY */
.article-body{
  padding:clamp(52px,7vw,90px) 0;
  background:#fff;
}

.article-content{
  width:min(820px,100%);
  margin-inline:auto;
}

.article-content section{
  scroll-margin-top:110px;
  margin:0 0 clamp(56px,7vw,86px);
}

.article-content .eyebrow{
  margin-bottom:10px;
}

.article-content h2{
  margin:0 0 18px !important;
  font-size:clamp(1.75rem,2.7vw,2.65rem) !important;
  line-height:1.12 !important;
  letter-spacing:-.03em;
  text-wrap:balance;
}

.article-content h3{
  margin:30px 0 10px !important;
  font-size:clamp(1.12rem,1.55vw,1.35rem) !important;
  line-height:1.25;
}

.article-content p,
.article-content li{
  font-size:1rem;
  line-height:1.78;
  color:#393939;
}

.article-content p{
  margin:0 0 16px;
}

.article-content ul,
.article-content ol{
  margin:18px 0 22px;
  padding-left:1.25rem;
}

.article-content li+li{
  margin-top:6px;
}

.article-content a:not(.button){
  color:#a8181d;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.article-content strong{
  color:#161616;
}

/* Quick answer */
.article-answer-box{
  margin:28px 0 0;
  padding:22px 24px;
  border-left:4px solid var(--article-red);
  border-radius:0 16px 16px 0;
  background:var(--article-cream);
}

.article-answer-box h3{
  margin:0 0 8px !important;
  font-size:1.08rem !important;
}

.article-answer-box p:last-child{
  margin-bottom:0;
}

/* Flow */
.article-flow{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin:28px 0 34px;
}

.article-flow div{
  position:relative;
  min-height:118px;
  padding:18px 15px;
  border:1px solid #ececec;
  border-radius:16px;
  background:var(--article-soft);
}

.article-flow strong{
  display:block;
  margin-bottom:7px;
  color:#191919;
}

.article-flow span{
  display:block;
  color:#666;
  font-size:.88rem;
  line-height:1.45;
}

/* Entity relationship block */
.entity-map{
  margin:30px 0 22px;
  padding:clamp(24px,4vw,36px);
  border-radius:24px;
  background:#111;
  color:#fff;
}

.entity-map h3{
  margin:0 0 16px !important;
  color:#fff;
  font-size:1.35rem !important;
}

.entity-map dl{
  display:grid;
  gap:0;
  margin:0;
}

.entity-map div{
  display:grid;
  grid-template-columns:185px 1fr;
  gap:24px;
  padding:17px 0;
  border-bottom:1px solid rgba(255,255,255,.14);
}

.entity-map div:last-child{
  border-bottom:0;
}

.entity-map dt{
  font-weight:800;
  color:#fff;
}

.entity-map dd{
  margin:0;
  color:rgba(255,255,255,.78);
  line-height:1.58;
}

.entity-note{
  margin-top:18px !important;
  padding:18px 20px;
  border:1px solid rgba(243,194,26,.4);
  border-radius:16px;
  background:#fff7dc;
}

/* Quote */
.article-content blockquote{
  margin:28px 0;
  padding:22px 24px;
  border-left:5px solid var(--article-red);
  border-radius:0 16px 16px 0;
  background:#f6f6f6;
}

.article-content blockquote p{
  margin:0;
  font-size:1.08rem;
  font-weight:650;
  color:#202020;
}

/* FAQ reuses Doiche's details pattern, with spacing protection */
.article-faq{
  padding:0;
}

.article-faq .faq-list{
  display:grid;
  gap:10px;
  margin-top:22px;
}

.article-faq details{
  border:1px solid #e9e9e9;
  border-radius:16px;
  background:#fff;
  overflow:hidden;
}

.article-faq summary{
  cursor:pointer;
  padding:18px 20px;
  font-weight:750;
  color:#171717;
}

.article-faq details p{
  padding:0 20px 20px;
  margin:0;
}

/* CTA */
.article-cta-panel{
  position:relative;
  overflow:hidden;
  padding:clamp(30px,5vw,52px);
  border-radius:28px;
  background:#111;
  color:#fff;
}

.article-cta-panel::after{
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  right:-90px;
  top:-110px;
  border-radius:50%;
  background:rgba(243,194,26,.18);
}

.article-cta-panel .eyebrow{
  position:relative;
  z-index:1;
}

.article-cta-panel h2{
  position:relative;
  z-index:1;
  max-width:650px;
  color:#fff !important;
}

.article-cta-panel p{
  position:relative;
  z-index:1;
  max-width:670px;
  color:rgba(255,255,255,.82);
}

.article-cta-actions{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}

.article-cta-panel .button-secondary{
  border-color:rgba(255,255,255,.35);
  color:#fff;
}

/* Responsive */
@media (max-width:1080px){
  .article-nav-list{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:920px){
  .article-hero-grid{
    grid-template-columns:1fr;
  }

  .article-hero-copy h1{
    max-width:900px;
  }

  .article-hero-media,
  .article-hero-media img{
    min-height:390px;
  }

  .article-nav-header{
    align-items:flex-start;
    flex-direction:column;
  }

  .article-nav-hint{
    text-align:left;
  }

  .article-flow{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:680px){
  .article-page .container{
    width:min(100% - 28px,1180px);
  }

  .article-hero{
    padding-top:54px;
  }

  .article-hero-copy h1{
    font-size:clamp(2rem,11vw,3.2rem) !important;
  }

  .article-hero-media,
  .article-hero-media img{
    min-height:300px;
  }

  .article-hero-badge{
    left:14px;
    right:14px;
    bottom:14px;
  }

  .article-nav{
    padding:22px 0 24px;
  }

  .article-nav-list{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding:0 0 8px;
    scroll-snap-type:x proximity;
  }

  .article-nav-list li{
    flex:0 0 230px;
    scroll-snap-align:start;
  }

  .article-flow{
    grid-template-columns:1fr;
  }

  .entity-map div{
    grid-template-columns:1fr;
    gap:5px;
  }

  .article-cta-actions{
    flex-direction:column;
  }

  .article-cta-actions .button,
  .article-cta-actions .animated-button-wrap{
    width:100%;
  }
}


/* =========================================================
   CTA FINAL — CORRECCIÓN BOTONES
   Evita el botón blanco sin texto heredado de .button-secondary
   del stylesheet principal.
   ========================================================= */
.article-cta-panel .article-cta-actions{
  align-items:center;
}

.article-cta-panel .article-cta-actions .button,
.article-cta-panel .article-cta-actions .animated-button-wrap{
  flex:0 0 auto;
}

.article-cta-panel .button-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto !important;
  min-width:210px;
  min-height:54px;
  padding:14px 24px !important;
  border:2px solid rgba(255,255,255,.68) !important;
  border-radius:999px;
  background:transparent !important;
  color:#fff !important;
  font-weight:750;
  text-decoration:none;
  box-shadow:none !important;
}

.article-cta-panel .button-secondary:hover,
.article-cta-panel .button-secondary:focus-visible{
  border-color:#fff !important;
  background:#fff !important;
  color:#111 !important;
  transform:translateY(-1px);
}

.article-cta-panel .button-primary{
  min-height:54px;
}

@media (max-width:680px){
  .article-cta-panel .article-cta-actions{
    align-items:stretch;
  }

  .article-cta-panel .article-cta-actions .button,
  .article-cta-panel .article-cta-actions .animated-button-wrap{
    width:100% !important;
  }

  .article-cta-panel .button-secondary{
    min-width:0;
  }
}