/*
IBUIN — Recetarios veterinarios
DISEÑO INTEGRADO IBUIN 1.6.5
Hoja exclusiva para el HTML histórico de Recetarios veterinarios.
El contenido sigue en el editor Gutenberg y aquí queda solo su presentación.

Paleta IBUIN: violeta #6543AD, grafito #302D38 y fondos claros.

TODOS LOS BOTONES USAN TEXTO BLANCO.
*/

.ib-recetario-page {
  --ibr-black: #272330;
  --ibr-primary: #302D38;
  --ibr-accent: #6543AD;
  --ibr-bg: #FAF9FC;
  --ibr-surface: #FFFFFF;
  --ibr-soft: #F2EFF8;
  --ibr-text: #29243B;
  --ibr-muted: #6B6379;
  --ibr-border: #E5DFF0;
  --ibr-radius: 16px;
  --ibr-radius-sm: 11px;
  --ibr-shell: 1120px;

  background: var(--ibr-bg);
  color: var(--ibr-text);
  font-size: 15.5px;
  line-height: 1.56;
  overflow: visible;
}

.ib-recetario-page *,
.ib-recetario-page *::before,
.ib-recetario-page *::after {
  box-sizing: border-box;
}

.ib-recetario-page :where(h1,h2,h3,p,ul,figure) {
  margin-top: 0;
}

.ib-recetario-page :where(h1,h2,h3) {
  color: var(--ibr-text);
  text-wrap: balance;
}

.ib-recetario-page h1 {
  max-width: 610px;
  margin-bottom: 13px;
  font-size: clamp(1.95rem, 3.25vw, 2.75rem);
  line-height: 1.02;
  letter-spacing: -.04em;
  font-weight: 800;
}

.ib-recetario-page h2 {
  margin-bottom: 10px;
  font-size: clamp(1.45rem, 2.25vw, 2rem);
  line-height: 1.1;
  letter-spacing: -.028em;
  font-weight: 700;
}

.ib-recetario-page h3 {
  margin-bottom: 6px;
  font-size: clamp(.98rem, 1.25vw, 1.12rem);
  line-height: 1.24;
  font-weight: 600;
}

.ib-recetario-page p {
  margin-bottom: 12px;
}

.ibr-shell {
  width: min(calc(100% - 32px), var(--ibr-shell));
  margin-inline: auto;
}

.ibr-section {
  padding-block: clamp(36px, 5vw, 56px);
}

.ibr-section--compact {
  padding-block: clamp(24px, 3.5vw, 38px);
}

.ibr-section--soft {
  background: var(--ibr-soft);
}

.ibr-section--dark,
.ibr-section--final {
  background: var(--ibr-primary);
  color: #fff;
}

.ibr-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  color: var(--ibr-muted);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ibr-kicker::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--ibr-accent);
}

.ibr-kicker--light {
  color: rgba(255,255,255,.72);
}

.ibr-section-heading {
  max-width: 690px;
  margin-bottom: 20px;
}

.ibr-section-heading--wide {
  max-width: 780px;
}

.ibr-section-heading > p,
.ibr-copy > p {
  color: var(--ibr-muted);
}

.ibr-section-heading--light h2,
.ibr-section-heading--light p,
.ibr-section--dark h2,
.ibr-section--dark h3,
.ibr-section--final h2 {
  color: #fff;
}

.ibr-section-heading--light p,
.ibr-text-light {
  color: rgba(255,255,255,.72) !important;
}


/* HERO */

.ibr-hero {
  padding-block: 18px 34px;
  background: var(--ibr-bg);
}

.ibr-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(310px, .78fr);
  align-items: center;
  gap: clamp(24px, 4.5vw, 46px);
  min-height: 400px;
  padding: clamp(28px, 4vw, 42px);
  border-radius: 20px;
  background: var(--ibr-surface);
}

.ibr-lead {
  max-width: 580px;
  color: var(--ibr-muted);
  font-size: clamp(.98rem, 1.2vw, 1.08rem);
}

.ibr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.ib-recetario-page a.ibr-btn,
.ib-recetario-page a.ibr-btn:link,
.ib-recetario-page a.ibr-btn:visited,
.ib-recetario-page a.ibr-btn:hover,
.ib-recetario-page a.ibr-btn:focus,
.ib-recetario-page a.ibr-btn:active {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

.ibr-btn {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--ibr-primary);
  font-size: .84rem;
  font-weight: 800;
  line-height: 1;
  transition:
    transform .18s ease,
    background-color .18s ease,
    border-color .18s ease;
}

.ibr-btn:hover,
.ibr-btn:focus {
  transform: none;
}

.ibr-btn--primary {
  background: var(--ibr-accent) !important;
}

.ibr-btn--primary:hover,
.ibr-btn--primary:focus {
  background: #4C2D89 !important;
}

.ibr-btn--dark {
  background: var(--ibr-primary) !important;
}

.ibr-btn--dark:hover,
.ibr-btn--dark:focus {
  background: #4C2D89 !important;
}

.ibr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0;
  margin: 15px 0 0;
  list-style: none;
}

.ibr-chips li {
  padding: 4px 8px;
  border: 1px solid var(--ibr-border);
  border-radius: 999px;
  color: var(--ibr-muted);
  background: #F8F5FC;
  font-size: .68rem;
  font-weight: 700;
}

.ibr-hero__media,
.ibr-photo-card {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--ibr-radius);
  background: #FFFFFF;
}

.ibr-hero__media,
.ibr-photo-card {
  aspect-ratio: 3 / 2;
}

.ibr-hero__media img,
.ibr-photo-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* SUMMARY */

.ibr-summary {
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid var(--ibr-border);
  border-radius: var(--ibr-radius);
  background: var(--ibr-surface);
}

.ibr-summary__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.ibr-summary__grid article {
  padding: 13px;
  border-radius: var(--ibr-radius-sm);
  background: var(--ibr-bg);
}

.ibr-summary__grid strong {
  display: block;
  margin-bottom: 3px;
  font-size: .88rem;
}

.ibr-summary__grid p {
  margin-bottom: 0;
  color: var(--ibr-muted);
  font-size: .78rem;
}


/* TWO COLUMN */

.ibr-two-col {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(22px, 4.5vw, 46px);
  align-items: center;
}

.ibr-copy {
  min-width: 0;
}

.ibr-check-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 5px 15px;
  padding: 0;
  margin: 15px 0 0;
  list-style: none;
}

.ibr-check-list li {
  position: relative;
  padding-left: 20px;
  font-size: .87rem;
}

.ibr-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--ibr-accent);
  font-weight: 900;
}


/* DARK FEATURES */

.ibr-feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 16px;
}

.ibr-feature-list > div {
  padding: 13px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--ibr-radius-sm);
  background: rgba(255,255,255,.055);
}

.ibr-feature-list strong,
.ibr-feature-list span {
  display: block;
}

.ibr-feature-list strong {
  margin-bottom: 2px;
  color: #fff;
  font-size: .87rem;
}

.ibr-feature-list span {
  color: rgba(255,255,255,.68);
  font-size: .76rem;
}


/* CHOICE CARDS */

.ibr-card-grid {
  display: grid;
  gap: 8px;
}

.ibr-card-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ibr-choice-card {
  position: relative;
  min-height: 155px;
  padding: 17px;
  border: 1px solid var(--ibr-border);
  border-radius: var(--ibr-radius);
  background: var(--ibr-surface);
  overflow: hidden;
}


.ibr-choice-card p {
  margin-bottom: 0;
  color: var(--ibr-muted);
  font-size: .8rem;
}

.ibr-number {
  display: inline-flex;
  margin-bottom: 17px;
  color: var(--ibr-accent);
  font-size: .68rem;
  font-weight: 800;
}


/* STEPS */

.ibr-steps {
  display: grid;
  gap: 0;
  margin-top: 14px;
}

.ibr-steps article {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--ibr-border);
}

.ibr-steps article:last-child {
  border-bottom: 0;
}

.ibr-steps article > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--ibr-primary);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
}

.ibr-steps p {
  margin-bottom: 0;
  color: var(--ibr-muted);
  font-size: .8rem;
}

.ibr-tip-card {
  padding: clamp(20px, 3.5vw, 30px);
  border-radius: var(--ibr-radius);
  background: var(--ibr-primary);
  color: #fff;
}

.ibr-tip-card h3 {
  color: #fff;
  font-size: clamp(1.18rem, 2vw, 1.55rem);
}

.ibr-tip-card p {
  margin-bottom: 0;
  color: rgba(255,255,255,.7);
}

.ibr-tip-card__icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  margin-bottom: 13px;
  border-radius: 50%;
  background: var(--ibr-accent);
  color: #fff;
  font-weight: 900;
}


/* SPECS */

.ibr-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 7px;
  margin-top: 15px;
}

.ibr-specs span {
  display: flex;
  gap: 5px;
  align-items: baseline;
  padding: 10px 12px;
  border-radius: var(--ibr-radius-sm);
  background: var(--ibr-surface);
  font-size: .78rem;
}

.ibr-specs strong {
  color: var(--ibr-accent);
}


/* USE GRID */

.ibr-use-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px;
}

.ibr-use-grid article {
  padding: 16px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--ibr-radius);
  background: rgba(255,255,255,.055);
}

.ibr-use-grid h3 {
  color: #fff;
}

.ibr-use-grid p {
  margin-bottom: 0;
  color: rgba(255,255,255,.68);
  font-size: .78rem;
}


/* MISTAKES */

.ibr-mistakes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px;
}

.ibr-mistakes article {
  padding: 16px;
  border-radius: var(--ibr-radius);
  background: var(--ibr-surface);
}

.ibr-mistakes p {
  margin-bottom: 0;
  color: var(--ibr-muted);
  font-size: .78rem;
}


/* SHOP */

.ibr-section--shop {
  background: #fff;
}

.ibr-shop-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
}

.ibr-shop-card {
  display: flex;
  min-height: 215px;
  flex-direction: column;
  padding: 17px;
  border: 1px solid var(--ibr-border);
  border-radius: var(--ibr-radius);
  background: var(--ibr-bg);
}

.ibr-shop-card--featured {
  border-color: color-mix(in srgb, var(--ibr-accent) 38%, var(--ibr-border));
}

.ibr-shop-card p {
  flex: 1 1 auto;
  margin-bottom: 14px;
  color: var(--ibr-muted);
  font-size: .8rem;
}

.ibr-shop-card .ibr-btn {
  width: 100%;
}

.ibr-shop-card__tag {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 16px;
  color: var(--ibr-accent);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .11em;
}


/* FAQ */

.ibr-section--faq {
  background: var(--ibr-surface);
}

.ibr-faq-layout {
  display: grid;
  grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr);
  gap: clamp(28px, 5vw, 58px);
  align-items: start;
}

.ibr-faq-intro {
  position: sticky;
  top: 100px;
}

.ibr-faq-intro p {
  color: var(--ibr-muted);
}

.ibr-faq {
  border-top: 1px solid var(--ibr-border);
}

.ibr-faq details {
  border-bottom: 1px solid var(--ibr-border);
}

.ibr-faq summary {
  position: relative;
  padding: 14px 32px 14px 0;
  cursor: pointer;
  list-style: none;
  font-weight: 800;
}

.ibr-faq summary::-webkit-details-marker {
  display: none;
}

.ibr-faq summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  color: var(--ibr-accent);
  font-size: 1.15rem;
}

.ibr-faq details[open] summary::after {
  content: "−";
}

.ibr-faq details p {
  max-width: 700px;
  padding: 0 32px 14px 0;
  margin-bottom: 0;
  color: var(--ibr-muted);
  font-size: .84rem;
}


/* FINAL CTA */

.ibr-final-cta {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}

.ibr-final-cta > div {
  max-width: 680px;
}

.ibr-final-cta p {
  margin-bottom: 0;
  color: rgba(255,255,255,.7);
}


/* TABLET */

@media (max-width: 900px) {
  .ibr-hero__grid,
  .ibr-two-col,
  .ibr-faq-layout {
    grid-template-columns: 1fr;
  }

  .ibr-summary__grid,
  .ibr-card-grid--4,
  .ibr-mistakes,
  .ibr-use-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .ibr-shop-grid {
    grid-template-columns: 1fr;
  }

  .ibr-faq-intro {
    position: static;
  }

  .ibr-photo-card,
  .ibr-hero__media {
    max-height: 400px;
  }
}


/* MOBILE */

@media (max-width: 620px) {
  .ib-recetario-page {
    font-size: 15px;
  }

  .ibr-shell {
    width: min(calc(100% - 22px), var(--ibr-shell));
  }

  .ibr-section {
    padding-block: 34px;
  }

  .ibr-hero {
    padding-block: 8px 26px;
  }

  .ibr-hero__grid {
    width: min(calc(100% - 14px), var(--ibr-shell));
    min-height: auto;
    padding: 21px 15px 15px;
    gap: 18px;
    border-radius: 16px;
  }

  .ib-recetario-page h1 {
    font-size: clamp(1.9rem, 10vw, 2.4rem);
  }

  .ib-recetario-page h2 {
    font-size: clamp(1.4rem, 6.5vw, 1.8rem);
  }

  .ibr-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ibr-btn {
    width: 100%;
  }

  .ibr-summary {
    padding: 15px;
  }

  .ibr-summary__grid,
  .ibr-card-grid--4,
  .ibr-mistakes,
  .ibr-feature-list,
  .ibr-check-list,
  .ibr-specs,
  .ibr-use-grid {
    grid-template-columns: 1fr;
  }

  .ibr-choice-card {
    min-height: 135px;
  }

  .ibr-shop-card {
    min-height: 180px;
  }

  .ibr-photo-card,
  .ibr-hero__media {
    aspect-ratio: 4 / 3;
    max-height: none;
  }

  .ibr-final-cta {
    display: grid;
  }

  .ibr-final-cta .ibr-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ib-recetario-page *,
  .ib-recetario-page *::before,
  .ib-recetario-page *::after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}


/* Espaciado y anchura nativos: nunca encerrar el contenido en la tarjeta editorial genérica. */
body.ibuin-modular-shell .ib-recetario-page {width:100%;max-width:none;margin:0;padding:0;overflow:visible;}
body.ibuin-modular-shell .ib-recetario-page .ibr-section,
body.ibuin-modular-shell .ib-recetario-page .ibr-hero {width:100%;max-width:none;height:auto;max-height:none;overflow:visible;}
body.ibuin-modular-shell .ib-recetario-page .ibr-shell{max-width:1120px;min-width:0;}
body.ibuin-modular-shell .ib-recetario-page :is(.ibr-hero__grid,.ibr-two-col,.ibr-shop-grid,.ibr-card-grid,.ibr-summary__grid,.ibr-feature-list,.ibr-use-grid,.ibr-mistakes,.ibr-faq-layout)>*{min-width:0;}
body.ibuin-modular-shell .ib-recetario-page :is(.ibr-section--dark,.ibr-section--final) :is(h2,h3,strong){color:#fff;}
body.ibuin-modular-shell .ib-recetario-page .ibr-section--soft :is(h2,h3,strong){color:var(--ibr-text);}
body.ibuin-modular-shell .ib-recetario-page .ibr-section--dark .ibr-kicker,
body.ibuin-modular-shell .ib-recetario-page .ibr-section--final .ibr-kicker{color:rgba(255,255,255,.75);}
body.ibuin-modular-shell .ib-recetario-page .ibr-shop-card :is(h3,strong){color:var(--ibr-text);}
body.ibuin-modular-shell .ib-recetario-page .ibr-btn{box-shadow:none;}
body.ibuin-modular-shell .ib-recetario-page :is(img,video,svg){max-width:100%;}
body.ibuin-modular-shell .ib-recetario-page .ibr-final-cta .ibr-btn{flex-shrink:0;}

/* Contraste consistente en bloques grafito. Especificidad mayor que el CSS editorial general. */
body.ibuin-modular-shell .ib-recetario-page .ibr-tip-card,
body.ibuin-modular-shell .ib-recetario-page :is(.ibr-section--dark,.ibr-section--final){color:#fff}
body.ibuin-modular-shell .ib-recetario-page .ibr-tip-card :is(h2,h3,strong),
body.ibuin-modular-shell .ib-recetario-page :is(.ibr-section--dark,.ibr-section--final) :is(h2,h3){color:#fff!important}
body.ibuin-modular-shell .ib-recetario-page .ibr-tip-card :is(p,span.ibr-kicker),
body.ibuin-modular-shell .ib-recetario-page :is(.ibr-section--dark,.ibr-section--final) :is(.ibr-copy>p,.ibr-section-heading>p,.ibr-text-light){color:#e4dfe9!important}
body.ibuin-modular-shell .ib-recetario-page :is(.ibr-section--dark,.ibr-section--final) .ibr-kicker{color:#e4dfe9!important}
body.ibuin-modular-shell .ib-recetario-page :is(.ibr-section--dark,.ibr-section--final) .ibr-kicker::before{background:#b49bdd}
/* Evitar textos blancos dentro de tarjetas realmente claras. */
body.ibuin-modular-shell .ib-recetario-page .ibr-shop-card :is(h2,h3,strong){color:var(--ibr-text)!important}
body.ibuin-modular-shell .ib-recetario-page .ibr-btn--dark:hover,
body.ibuin-modular-shell .ib-recetario-page .ibr-btn--dark:focus-visible{background:#4c2d89!important;color:#fff!important}

@media(max-width:900px){
 body.ibuin-modular-shell .ib-recetario-page :is(.ibr-hero__grid,.ibr-two-col,.ibr-faq-layout){grid-template-columns:minmax(0,1fr);}
}
@media(max-width:620px){
 body.ibuin-modular-shell .ib-recetario-page :is(.ibr-hero__grid,.ibr-two-col,.ibr-faq-layout){min-width:0;}
 body.ibuin-modular-shell .ib-recetario-page .ibr-shell{width:calc(100% - 32px);}
 body.ibuin-modular-shell .ib-recetario-page .ibr-hero__grid{width:calc(100% - 32px);}
 body.ibuin-modular-shell .ib-recetario-page .ibr-shop-card{min-height:0;}
 body.ibuin-modular-shell .ib-recetario-page .ibr-faq-intro{position:static;}
}