/* =========================================================
   RECURSOS — Page (scoped)  ✅ FINAL v2 (REEMPLAZO COMPLETO)
   Objetivo: centro de operación limpio, jerarquía fuerte,
   fotos como midground editorial (no afiche), y cierre prolijo.
   Contrato:
   - Solo recursos (body[data-page="recursos"])
   - Sin @media
   - Theme-aware por tokens
   ========================================================= */

/* ===== Rhythm / aire global de la página ===== */

body[data-page="recursos"] #gl-r-hero{
  padding: 38px 0 22px; /* +aire arriba, más premium */
}

body[data-page="recursos"] #gl-r-main{
  padding: 18px 0 34px; /* evita “cortar” contra el footer */
}

/* ===== HERO CARD ===== */

body[data-page="recursos"] .r-hero-card{
  position: relative;
  padding: 26px;
  overflow: hidden;
  border-radius: 28px;
  background: var(--gl-surface-2);
  border: 1px solid var(--gl-border-2);
  box-shadow: var(--gl-shadow-2);
  isolation: isolate;
}

/* overlay hero: menos “pantano”, más vidrio/volumen */
body[data-page="recursos"] .r-hero-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(980px 520px at 16% 18%,
      color-mix(in oklab, var(--gl-accent) 14%, transparent),
      transparent 68%
    ),
    radial-gradient(860px 520px at 92% 30%,
      color-mix(in oklab, var(--gl-fg) 6%, transparent),
      transparent 70%
    ),
    linear-gradient(180deg,
      color-mix(in oklab, var(--gl-surface-3) 14%, transparent),
      transparent 56%,
      color-mix(in oklab, var(--gl-surface-2) 12%, transparent)
    );
  opacity: .78;
}

html[data-theme="light"] body[data-page="recursos"] .r-hero-card::before{
  background:
    radial-gradient(980px 520px at 14% 22%,
      rgba(48,86,1,.09),
      transparent 68%
    ),
    radial-gradient(980px 560px at 88% 35%,
      rgba(255,255,255,.70),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      rgba(10,18,10,.032),
      transparent 58%,
      rgba(10,18,10,.026)
    );
  opacity: .84;
}

body[data-page="recursos"] .r-hero-shell{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

/* Hero text */
body[data-page="recursos"] .r-kicker{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 950;
  color: var(--gl-accent-strong);
  margin: 0 0 10px;
}

body[data-page="recursos"] .r-kicker.r-kicker--tight{ margin: 0 0 6px; }

body[data-page="recursos"] .r-title{
  margin: 0 0 10px;
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--gl-fg);
}

body[data-page="recursos"] .r-sub{
  margin: 0;
  color: var(--gl-fg-dim);
  line-height: 1.65;
  max-width: 80ch;
  font-size: 16px;
}

/* Manual: “bloque sistema” con acento controlado */
body[data-page="recursos"] .r-manual{
  margin-top: 16px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid color-mix(in oklab, var(--gl-accent) 18%, var(--gl-border-2));
  background:
    radial-gradient(980px 460px at 18% 30%,
      color-mix(in oklab, var(--gl-accent-strong) 18%, transparent),
      transparent 68%
    ),
    linear-gradient(
      135deg,
      color-mix(in oklab, var(--gl-surface-3) 78%, var(--gl-accent) 22%),
      color-mix(in oklab, var(--gl-surface-2) 76%, var(--gl-accent-strong) 24%)
    );
  box-shadow: var(--gl-shadow-2);
}

body[data-page="recursos"] .r-manual-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

body[data-page="recursos"] .r-manual-badge{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--gl-border-2);
  background: color-mix(in oklab, var(--gl-surface-2) 74%, transparent);
  color: var(--gl-fg);
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11.5px;
}

body[data-page="recursos"] .r-manual-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

body[data-page="recursos"] .r-manual-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--gl-border-2);
  background: color-mix(in oklab, var(--gl-surface-2) 70%, transparent);
  color: var(--gl-fg);
  font-weight: 950;
  font-size: 14px;
  text-decoration: none;
  transition: transform var(--gl-t-fast), border-color var(--gl-t-fast), background var(--gl-t-fast), box-shadow var(--gl-t-fast), filter var(--gl-t-fast);
  white-space: nowrap;
  box-shadow: var(--gl-shadow-1);
}

body[data-page="recursos"] .r-manual-btn:hover{
  transform: translateY(-1px);
  border-color: var(--gl-border-3);
  background: color-mix(in oklab, var(--gl-surface-3) 70%, transparent);
  box-shadow: var(--gl-shadow-2);
}

body[data-page="recursos"] .r-manual-btn.primary{
  color: var(--gl-bg);
  background: linear-gradient(135deg, var(--gl-accent-strong), var(--gl-accent));
  border: 1px solid color-mix(in oklab, var(--gl-accent) 22%, transparent);
  box-shadow: 0 14px 32px color-mix(in oklab, #000 36%, transparent),
              inset 0 0 0 1px color-mix(in oklab, var(--gl-fg) 10%, transparent);
}

html[data-theme="light"] body[data-page="recursos"] .r-manual-btn.primary{
  color: rgba(248,246,240,.96);
  box-shadow: 0 18px 50px rgba(14,18,14,.12);
}

body[data-page="recursos"] .r-manual h4{
  margin: 0 0 6px;
  line-height: 1.15;
  color: var(--gl-fg);
  font-size: 16px;
}

body[data-page="recursos"] .r-manual p{
  margin: 0;
  color: var(--gl-fg-dim);
  font-size: 14.5px;
  line-height: 1.65;
}

/* ===== Head ===== */

body[data-page="recursos"] .r-head{
  padding: 18px;
  margin-bottom: 14px;
  border-radius: 22px;
  border: 1px solid var(--gl-border-1);
  background: color-mix(in oklab, var(--gl-surface-1) 86%, transparent);
  box-shadow: var(--gl-shadow-1);
}

body[data-page="recursos"] .r-head h3{
  margin: 0;
  line-height: 1.08;
  color: var(--gl-fg);
  font-size: 28px;
}

body[data-page="recursos"] .r-head p{
  margin: 10px 0 0;
  color: var(--gl-fg-dim);
  line-height: 1.7;
  max-width: 92ch;
  font-size: 16px;
}

/* ===== Grid ===== */

body[data-page="recursos"] .r-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

/* ===== Sheets base (más “instrumento”) ===== */

body[data-page="recursos"] .r-sheet{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid var(--gl-border-1);
  background: color-mix(in oklab, var(--gl-surface-1) 86%, transparent);
  min-height: 242px;
  box-shadow: var(--gl-shadow-1);
  transition: transform var(--gl-t-fast), border-color var(--gl-t-fast), background var(--gl-t-fast), box-shadow var(--gl-t-fast), filter var(--gl-t-fast);
}

body[data-page="recursos"] .r-sheet:hover{
  transform: translateY(-2px);
  border-color: var(--gl-border-3);
  background: color-mix(in oklab, var(--gl-surface-2) 88%, transparent);
  box-shadow: var(--gl-shadow-2);
}

/* Wrapper */
body[data-page="recursos"] .r-sheet > a{
  position: relative;
  z-index: 3;
  display:block;
  text-decoration:none;
  color: inherit;
  padding: 16px;
  height: 100%;
}

/* Imagen midground: editorial + controlada */
body[data-page="recursos"] .r-sheet::after{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:0;
  pointer-events:none;
  background-image: var(--r-sheet-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: var(--r-img-o, .14);
  filter: saturate(.78) contrast(1.02) brightness(.82);
  transform: scale(1.03);
}

/* Overlay: estable, legible, sin empastar */
body[data-page="recursos"] .r-sheet::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:
    radial-gradient(860px 460px at 14% -12%,
      color-mix(in oklab, var(--gl-accent) 10%, transparent),
      transparent 70%
    ),
    radial-gradient(920px 520px at 78% 118%,
      color-mix(in oklab, black 14%, transparent),
      transparent 70%
    ),
    linear-gradient(180deg,
      rgba(0,0,0,.05) 0%,
      rgba(0,0,0,.06) 46%,
      rgba(0,0,0,.12) 100%
    );

  opacity: var(--r-ov-o, .72);
}

/* Hover: micro-presencia, no “poster” */
body[data-page="recursos"] .r-sheet:hover::after{
  opacity: calc(var(--r-img-o, .14) + .05);
  filter: saturate(.84) contrast(1.03) brightness(.80);
}

/* Typography inside sheet */
body[data-page="recursos"] .r-sheet .rk{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 950;
  color: var(--gl-accent-strong);
  margin-bottom: 10px;
}

body[data-page="recursos"] .r-sheet h4{
  margin: 0 0 10px;
  line-height: 1.15;
  color: var(--gl-fg);
  font-size: 16px;
}

body[data-page="recursos"] .r-sheet p{
  margin: 0 0 12px;
  color: var(--gl-fg-dim);
  font-size: 14.5px;
  line-height: 1.65;
}

/* Tags: más consistentes, menos “pegote” */
body[data-page="recursos"] .r-tags{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

body[data-page="recursos"] .r-tag{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--gl-border-1) 88%, transparent);
  background: color-mix(in oklab, var(--gl-surface-0) 80%, transparent);
  color: color-mix(in oklab, var(--gl-fg) 70%, transparent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  opacity: .98;
}

/* Open row: CTA más claro + micro-mov */
body[data-page="recursos"] .r-open{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in oklab, var(--gl-border-1) 92%, transparent);
  color: var(--gl-fg-soft);
  font-size: 13px;
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

body[data-page="recursos"] .r-open b{
  color: var(--gl-fg);
  font-weight: 950;
  letter-spacing: .02em;
}

body[data-page="recursos"] .r-open .arrow{
  opacity: .84;
  transition: transform var(--gl-t-fast), opacity var(--gl-t-fast);
}

body[data-page="recursos"] .r-sheet:hover .r-open .arrow{
  transform: translateX(2px);
  opacity: 1;
}

/* ===== IMÁGENES por ficha (y perfil por variable) ===== */
/* Orden: 1 Temp, 2 pH, 3 EC, 4 CO2, 5 VPD, 6 MAPA */

/* 1) Temperatura — admite “clima” */
body[data-page="recursos"] .r-grid > .r-sheet:nth-child(1){
  --r-sheet-bg: url("https://lh3.googleusercontent.com/d/1-JWvCYPSE8Xk1axZvi6Tr0NYyDTiefa4");
  --r-img-o: .18;
  --r-ov-o: .74;
}

/* 2) pH — laboratorio (menos imagen) */
body[data-page="recursos"] .r-grid > .r-sheet:nth-child(2){
  --r-sheet-bg: url("https://lh3.googleusercontent.com/d/13-Vs2hbsyVhaWFp7qCkWklpqT11gJA81");
  --r-img-o: .11;
  --r-ov-o: .68;
}

/* 3) EC — laboratorio (menos imagen) */
body[data-page="recursos"] .r-grid > .r-sheet:nth-child(3){
  --r-sheet-bg: url("https://lh3.googleusercontent.com/d/13E_FppZkt6c8ddl62kLlJAsS6Q7tUJma");
  --r-img-o: .11;
  --r-ov-o: .68;
}

/* 4) CO2 — laboratorio (menos imagen) */
body[data-page="recursos"] .r-grid > .r-sheet:nth-child(4){
  --r-sheet-bg: url("https://lh3.googleusercontent.com/d/1gKdt4zI1rPu3jyZHsoOwZsN6fSfteFka");
  --r-img-o: .10;
  --r-ov-o: .66;
}

/* 5) VPD — admite “clima” */
body[data-page="recursos"] .r-grid > .r-sheet:nth-child(5){
  --r-sheet-bg: url("https://lh3.googleusercontent.com/d/17F2tg4nI9YdViJqhPDgpXTln0lGu25hx");
  --r-img-o: .16;
  --r-ov-o: .74;
}

/* 6) MAPA — sin imagen, más “sistema” */
body[data-page="recursos"] .r-grid > .r-sheet:nth-child(6){
  --r-sheet-bg: none;
  --r-img-o: 0;
  --r-ov-o: .66;
}

/* ===== LIGHT MODE tuning ===== */

html[data-theme="light"] body[data-page="recursos"] .r-sheet::after{
  opacity: calc(var(--r-img-o, .14) * .72);
  filter: saturate(.76) contrast(1.02) brightness(1.12);
}

html[data-theme="light"] body[data-page="recursos"] .r-sheet::before{
  background:
    radial-gradient(1100px 560px at 14% -12%,
      color-mix(in oklab, var(--gl-accent) 7%, transparent) 0%,
      transparent 70%
    ),
    radial-gradient(980px 720px at 50% 58%,
      transparent 0%,
      rgba(255,255,255,.14) 74%,
      rgba(255,255,255,.24) 100%
    ),
    linear-gradient(180deg,
      rgba(255,255,255,.12) 0%,
      rgba(255,255,255,.05) 46%,
      rgba(255,255,255,.11) 100%
    );
  opacity: .84;
}

/* ===== Bridge ===== */

body[data-page="recursos"] .r-bridge{
  margin-top: 16px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid var(--gl-border-1);
  background: color-mix(in oklab, var(--gl-surface-1) 86%, transparent);
  box-shadow: var(--gl-shadow-1);

  color: var(--gl-fg-dim);
  font-size: 14.5px;
  line-height: 1.65;
}

body[data-page="recursos"] .r-bridge b{ color: var(--gl-fg); }

body[data-page="recursos"] .r-bridge a{
  color: var(--gl-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body[data-page="recursos"] .r-bridge-actions{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ===== Footer integration (solo en Recursos) ===== */
/* Esto evita el “bloque negro infinito” y lo integra al ritmo. */
body[data-page="recursos"] #gl-12-footer{
  margin-top: 18px;
}

body[data-page="recursos"] #gl-12-footer .container{
  padding-top: 10px;
}