/* Recursos de Boris González. Extiende los tokens y componentes existentes. */

/* Presentación compacta en el inicio. */
.resources{
  position:relative;
  padding:clamp(2.8rem,5.5vw,4.8rem) 0 clamp(3.5rem,7vw,6rem);
  border-top:1px solid var(--line-dark);
  background:var(--ink-900);
}
.resources-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:1.4rem 3rem;
  margin-bottom:clamp(1.7rem,3vw,2.4rem);
}
.resources-head .eyebrow{ margin-bottom:.75rem; }
.resources-head .h-display{ max-width:21ch; }
.resources-head > p{
  max-width:39ch;
  margin:0;
  color:var(--fg-on-dark-muted);
  font-size:.94rem;
}
.resources-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(.8rem,1.6vw,1.25rem);
}
.resource-card{
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:clamp(1.2rem,2.3vw,1.75rem);
  border:1px solid var(--line-dark);
  border-radius:var(--r-md);
  background:linear-gradient(155deg,rgba(21,138,132,.055),var(--ink-800) 70%);
  transition:border-color .3s var(--ease);
}
.resource-card:hover{ border-color:rgba(70,198,190,.32); }
.resource-card--pack{ border-color:var(--gold-line); }
.resource-card--pack::before{
  content:"";
  position:absolute;
  top:-1px;
  left:18%;
  right:18%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.resource-card-visual{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.7rem;
  height:190px;
  margin-bottom:1.4rem;
}
.resource-card-visual picture{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  height:100%;
}
.resource-card-visual img{
  display:block;
  width:auto;
  height:auto;
  max-height:100%;
  max-width:100%;
  object-fit:contain;
  border-radius:2px;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.8);
}
.resource-card-visual--pair picture{ max-width:calc(50% - .35rem); }
.resource-card-body{ display:flex; flex:1; flex-direction:column; align-items:start; min-width:0; }
.resource-card-type{
  display:inline-flex;
  margin-bottom:.6rem;
  color:var(--teal-300);
  font-size:.67rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.4;
}
.resource-card--pack .resource-card-type{ color:var(--gold-soft); }
.resource-card h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.15rem,1rem + .4vw,1.38rem);
  line-height:1.23;
  margin-bottom:.75rem;
  text-wrap:balance;
}
.resource-card-description{
  margin:0 0 1.3rem;
  color:var(--fg-on-dark-muted);
  font-size:.88rem;
  line-height:1.6;
}
.resource-card .btn{
  margin-top:auto;
  min-height:44px;
  padding:.75rem 1.15rem;
  font-size:.85rem;
}

/* Páginas de venta: mismo ancho, tipografía, paleta y botones que el inicio. */
.resource-page{ background:var(--ink-900); }
.resource-hero{
  position:relative;
  padding:calc(var(--header-h) + 1.7rem) 0 clamp(3.5rem,6vw,5.5rem);
  background:
    radial-gradient(ellipse at 85% 48%,rgba(21,138,132,.14),transparent 52%),
    linear-gradient(180deg,var(--ink-900),var(--ink-800));
}
.resource-breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.4rem .6rem;
  margin-bottom:clamp(2rem,4vw,3.3rem);
  color:var(--fg-on-dark-muted);
  font-size:.78rem;
  line-height:1.55;
}
.resource-breadcrumb a{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  text-decoration:underline;
  text-decoration-color:rgba(169,182,184,.35);
  text-underline-offset:4px;
}
.resource-breadcrumb a:hover{ color:var(--teal-300); }
.resource-breadcrumb [aria-current]{ color:var(--fg-on-dark); }
.resource-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  align-items:center;
  gap:clamp(2.5rem,6vw,5.5rem);
}
.resource-hero-grid > *{ min-width:0; }
.resource-title,.resource-title h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.1rem,1.4rem + 2.8vw,3.7rem);
  line-height:1.07;
  letter-spacing:-.026em;
  text-wrap:balance;
  font-variation-settings:"opsz" 96,"SOFT" 0,"WONK" 0;
}
.resource-title em{ color:var(--teal-300); font-style:normal; }
.resource-subtitle{
  margin:1.3rem 0 0;
  max-width:50ch;
  font-size:clamp(1rem,.97rem + .2vw,1.12rem);
  line-height:1.7;
  color:var(--fg-on-dark-muted);
}
.resource-subtitle + .lead{ margin-top:1rem; }
.resource-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.45rem .8rem;
  margin:1.4rem 0 0;
  font-size:.78rem;
  color:var(--gold-soft);
}
.resource-meta > span + span{
  padding-left:.8rem;
  border-left:1px solid var(--gold-line);
}
.resource-visual{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1rem;
  min-width:0;
  margin:0;
}
.resource-visual > picture{ width:min(100%,310px); }
.resource-visual > picture img{
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:2px;
  box-shadow:0 28px 60px -28px rgba(0,0,0,.9);
}
.resource-visual figcaption{
  max-width:38ch;
  text-align:center;
  color:var(--fg-on-dark-muted);
  font-size:.76rem;
  line-height:1.6;
}
.resource-covers{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:clamp(.65rem,1.6vw,1.1rem);
  width:100%;
  max-width:500px;
  min-width:0;
}
.resource-covers > picture{
  flex:1;
  min-width:0;
  width:calc(50% - .55rem);
}
.resource-covers img{
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:2px;
  box-shadow:0 23px 40px -24px rgba(0,0,0,.9);
}
.resource-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem;
  margin-top:1.7rem;
}
.resource-actions .btn{ min-height:46px; }
.resource-actions [disabled],.resource-actions [aria-disabled="true"]{
  cursor:default;
  opacity:.65;
  transform:none;
  box-shadow:none;
}
.resource-actions [disabled]::after,.resource-actions [aria-disabled="true"]::after{ display:none; }
.resource-note{
  margin:1rem 0 0;
  max-width:64ch;
  font-size:.8rem;
  line-height:1.65;
  color:var(--fg-on-dark-muted);
}
.resource-note a{ text-decoration:underline; text-underline-offset:3px; }
.resource-section{
  padding:clamp(3.5rem,7vw,6.25rem) 0;
  border-top:1px solid var(--line-dark);
}
.resource-section .sec-head{ margin-bottom:clamp(1.8rem,3.6vw,2.8rem); }
.resource-section .h-display{ max-width:30ch; text-wrap:balance; }
.resource-section .lead{ margin-top:1.1rem; }
.resource-section--muted{ background:var(--ink-800); }
.resource-section--light{
  color:var(--fg-on-light);
  background:linear-gradient(180deg,var(--cream),var(--cream-2));
  border-color:var(--line-light);
}
.resource-section--light .lead,
.resource-section--light .body-muted,
.resource-section--light .resource-note{ color:var(--fg-on-light-muted); }
.resource-section--light .h-display em{ color:var(--teal-700); }
.resource-section--light .eyebrow{ color:var(--teal-700); }
.resource-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5.5vw,5rem);
  align-items:start;
}
.resource-split > *{ min-width:0; }
.resource-split p{ max-width:62ch; }
.resource-split h3{
  margin-bottom:.9rem;
  font-family:var(--serif);
  font-size:clamp(1.4rem,1.2rem + .8vw,1.85rem);
  font-weight:400;
  line-height:1.22;
}
.resource-questions li{
  padding:.85rem 0;
  border-bottom:1px solid var(--line-dark);
  font-family:var(--serif);
  font-size:clamp(1.12rem,1rem + .5vw,1.4rem);
  line-height:1.4;
}
.resource-questions li:first-child{ padding-top:0; }
.resource-benefits{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  margin-top:2rem;
}
.resource-benefits > li,.resource-benefits > article{
  padding:clamp(1.3rem,2.7vw,2rem);
  border:1px solid var(--line-dark);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.025);
}
.resource-benefits h3,.resource-includes h3,.resource-steps h3{
  margin-bottom:.7rem;
  font-family:var(--serif);
  font-size:clamp(1.14rem,1.04rem + .3vw,1.35rem);
  font-weight:400;
  line-height:1.25;
}
.resource-benefits p,.resource-steps p{
  margin:0;
  color:var(--fg-on-dark-muted);
  font-size:.92rem;
  line-height:1.7;
}
.resource-benefits--three{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.resource-section--light .resource-benefits > li,
.resource-section--light .resource-benefits > article{
  border-color:var(--line-light);
  background:rgba(255,255,255,.52);
}
.resource-section--light .resource-benefits p,
.resource-section--light .resource-steps p{ color:var(--fg-on-light-muted); }
.resource-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,2.5rem);
  margin-top:2.2rem;
  counter-reset:resource-step;
}
.resource-steps > li{
  counter-increment:resource-step;
  padding-top:1.3rem;
  border-top:1px solid var(--gold-line);
}
.resource-steps > li::before{
  content:counter(resource-step,decimal-leading-zero);
  display:block;
  margin-bottom:.85rem;
  font-family:var(--serif);
  font-size:1.55rem;
  line-height:1;
  color:var(--teal-300);
}
.resource-section--light .resource-steps > li::before{ color:var(--teal-700); }
.resource-callout{
  width:calc(100% - var(--shell-pad) * 2);
  max-width:calc(var(--shell) - var(--shell-pad) * 2);
  padding:clamp(1.5rem,3.5vw,2.6rem);
  border:1px solid var(--gold-line);
  border-radius:var(--r-md);
  background:linear-gradient(135deg,rgba(201,165,92,.045),rgba(21,138,132,.055));
}
.resource-callout h2,.resource-callout h3{ margin-bottom:1rem; }
.resource-callout p{ max-width:65ch; }
.resource-callout .resource-actions{ margin-top:1.4rem; }
.resource-author{
  display:grid;
  grid-template-columns:minmax(180px,.6fr) minmax(0,1.4fr);
  align-items:center;
  gap:clamp(2rem,5.5vw,5rem);
}
.resource-author-image{
  width:100%;
  max-width:310px;
  margin:0;
}
.resource-author-image img{
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center 24%;
  border:1px solid var(--gold-line);
  border-radius:var(--r-lg);
}
.resource-author .h-display{ margin-bottom:1.3rem; }
.resource-author p{ max-width:61ch; }
.resource-includes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.2rem;
  margin-top:2rem;
}
.resource-includes > article{
  min-width:0;
  padding:clamp(1.4rem,3vw,2.2rem);
  border:1px solid var(--line-dark);
  border-radius:var(--r-md);
  background:var(--ink-800);
}
.resource-section--light .resource-includes > article{
  background:rgba(255,255,255,.55);
  border-color:var(--line-light);
}
.resource-section--light .resource-includes p{ color:var(--fg-on-light-muted); }
.resource-tag{
  display:block;
  color:var(--teal-700);
  font-size:.73rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:1rem;
}
.resource-includes .eyebrow{ margin-bottom:1rem; }
.resource-includes h3{ font-size:clamp(1.35rem,1.15rem + .6vw,1.65rem); }
.resource-includes p{ color:var(--fg-on-dark-muted); font-size:.94rem; }
.resource-includes .btn,.resource-includes .link-arrow{ margin-top:.5rem; }
.resource-faq{ padding-block:clamp(3.5rem,7vw,6.25rem); }
.resource-faq .kicker{ font-size:clamp(1.5rem,1.1rem + 1.3vw,2.3rem); }
.resource-closing{
  position:relative;
  padding:clamp(3.8rem,8vw,6.5rem) 0;
  text-align:center;
  background:
    radial-gradient(ellipse at 50% 100%,rgba(21,138,132,.17),transparent 68%),
    var(--ink-900);
}
.resource-closing .h-display{ max-width:26ch; margin-inline:auto; text-wrap:balance; }
.resource-closing .lead{ max-width:57ch; margin:1.2rem auto 0; }
.resource-closing .resource-actions{ justify-content:center; }
.resource-closing .resource-note{ margin-inline:auto; }
.resource-closing .link-arrow{ margin-top:1.5rem; }

@media (max-width:1019px){
  .resource-card-visual{ height:165px; }
  .resource-hero-grid{ gap:2.2rem; }
  .resource-benefits--three{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:819px){
  .is-reading-resources .wa-float{ visibility:hidden; pointer-events:none; }
  .resource-page .wa-float{
    position:static;
    margin:0 auto 1.5rem;
    opacity:1;
    transform:none;
    pointer-events:auto;
  }
  .resources-head{ display:block; }
  .resources-head > p{ margin-top:.9rem; max-width:55ch; }
  .resources-grid{ grid-template-columns:1fr; }
  .resource-card{
    display:grid;
    grid-template-columns:clamp(90px,20vw,145px) minmax(0,1fr);
    align-items:center;
    gap:1.3rem;
    padding:1.25rem;
  }
  .resource-card-visual{ height:auto; max-height:none; margin:0; }
  .resource-card-visual img{ width:100%; height:auto; }
  .resource-card-visual--pair{ flex-direction:column; gap:.6rem; }
  .resource-card-visual--pair picture{ max-width:83px; }
  .resource-card h3{ font-size:clamp(1.12rem,1rem + .5vw,1.4rem); }
  .resource-card-description{ margin-bottom:.9rem; }
  .resource-card .btn{ margin-top:.15rem; }
  .resource-hero-grid{ grid-template-columns:minmax(0,1fr); gap:2.5rem; }
  .resource-hero-grid > :first-child{ max-width:650px; }
  .resource-visual > picture{ width:min(64vw,275px); }
  .resource-covers{ max-width:430px; }
  .resource-covers > picture{ width:calc(50% - .55rem); }
  .resource-split{ grid-template-columns:1fr; gap:1.8rem; }
  .resource-author{ grid-template-columns:180px minmax(0,1fr); gap:1.8rem; }
  .resource-steps{ gap:1.3rem; }
}
@media (max-width:599px){
  .resource-breadcrumb{ font-size:.73rem; margin-bottom:1.8rem; }
  .resource-hero{ padding-top:calc(var(--header-h) + 1rem); }
  .resource-hero .eyebrow{ font-size:.67rem; letter-spacing:.15em; margin-bottom:1rem; }
  .resource-benefits,.resource-benefits--three,.resource-steps,.resource-includes{ grid-template-columns:1fr; }
  .resource-steps{ gap:1.5rem; }
  .resource-author{ grid-template-columns:1fr; gap:1.7rem; }
  .resource-author-image{ max-width:220px; }
  .resource-actions{ align-items:stretch; }
  .resource-actions .btn{ width:100%; }
  .resource-section .kicker{ font-size:1.65rem; }
}
@media (max-width:399px){
  .resource-card{ grid-template-columns:78px minmax(0,1fr); gap:.9rem; padding:1rem; }
  .resource-card-type{ font-size:.61rem; letter-spacing:.09em; }
  .resource-card h3{ font-size:1.06rem; }
  .resource-card-description{ font-size:.875rem; line-height:1.5; }
  .resource-card .btn{ padding:.68rem .8rem; font-size:.85rem; }
  .resource-card-visual--pair picture{ max-width:68px; }
}
@media (prefers-reduced-motion:reduce){
  .resource-card{ transition:none; }
}