/* ═══════════════════════════════════════════════
   INDEX.CSS — Diseñoverde
   Estilos EXCLUSIVOS de la portada (index.html):
   #hero, #metodologia, #trabajo, #siembra-idea,
   #estudio, #contacto y sus media queries.
   Requiere base.css cargado ANTES que esta hoja.
   Tokens, reset, nav, footer, botones y .reveal
   viven en base.css — no se redefinen aquí.
   ═══════════════════════════════════════════════ */

/* ── BANNER DE PORTADA ──
   Ocupa exactamente la posición del hero y lo reemplaza cuando se enciende
   desde el panel. Apagado, nada de esto se imprime y el home es el de
   siempre. Dos variantes: hero (pantalla completa) y apaisado (franja).

   El velo del ::before no es decoración: es lo que garantiza que el texto se
   lea sobre CUALQUIER imagen que suba quien administra el sitio. Sin él, una
   foto clara deja el titular ilegible y no hay forma de arreglarlo desde el
   panel. Por eso el contraste lo pone la hoja y no la imagen.

   Las animaciones son las mismas del hero —fadeUp, con sus mismos retardos—
   y no .reveal a propósito: .reveal empieza en opacity:0 y depende del JS
   para hacerse visible. En la primera pantalla eso significa que si site.js
   no carga, no hay portada. El hero nunca corrió ese riesgo y el banner que
   lo reemplaza tampoco debe correrlo.

   Las láminas se apilan con `grid-area:1/1` en vez de con posicionamiento
   absoluto. Así la sección la mide la lámina más alta: no hay saltos de
   altura al pasar de una a otra, y un texto largo en móvil no se desborda
   fuera de la caja, que es lo que pasaría si estuvieran todas absolutas.

   Las flechas y los puntos los crea el JS, no la plantilla. Si el JS no
   carga, no quedan botones muertos en pantalla que no hacen nada; se ve la
   primera lámina y ya está, que es un banner perfectamente válido. */
.banner { position:relative; display:grid; background:var(--verde-oscuro); overflow:hidden; }
.banner-lamina { grid-area:1 / 1; position:relative; display:flex; align-items:center; }
.banner-fondo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.banner-lamina::before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(100deg, rgba(15,42,13,0.95) 0%, rgba(15,42,13,0.88) 40%, rgba(15,42,13,0.64) 100%); }
.banner-lamina::after { content:''; position:absolute; top:-300px; right:-200px; width:700px; height:700px; border-radius:50%; z-index:1; pointer-events:none; background:radial-gradient(circle, rgba(82,168,76,0.12) 0%, transparent 65%); }
.banner-contenido { position:relative; z-index:2; width:100%; max-width:var(--max); margin:0 auto; }
.banner-titulo { color:var(--blanco); font-weight:800; line-height:1.04; animation:fadeUp .9s ease .2s both; }
.banner-texto { font-size:17px; font-weight:300; color:rgba(255,255,255,0.62); line-height:1.9; max-width:520px; animation:fadeUp .9s ease .45s both; }
.banner-boton { animation:fadeUp .9s ease .65s both; }

.banner-hero { min-height:100vh; }
.banner-hero .banner-lamina { padding:120px 48px 80px; }
.banner-hero .banner-titulo { font-size:62px; letter-spacing:-2.5px; max-width:760px; }
.banner-hero .banner-texto { margin:38px 0 44px; }

.banner-apaisado { min-height:440px; }
.banner-apaisado .banner-lamina { padding:118px 48px 66px; }
.banner-apaisado .banner-titulo { font-size:40px; letter-spacing:-1.5px; max-width:700px; }
.banner-apaisado .banner-texto { font-size:16px; margin:24px 0 34px; }

/* ── Carrusel ──
   Solo en apaisado. La lámina activa se ve y las demás esperan apagadas;
   `visibility` además las saca del orden de tabulación, para que el teclado
   no se pierda entre botones invisibles. */
.banner-carrusel .banner-lamina { opacity:0; visibility:hidden; transition:opacity .6s ease, visibility .6s; }
.banner-carrusel .banner-lamina.activa { opacity:1; visibility:visible; }
.banner-carrusel .banner-lamina:not(.activa) .banner-titulo,
.banner-carrusel .banner-lamina:not(.activa) .banner-texto,
.banner-carrusel .banner-lamina:not(.activa) .banner-boton { animation:none; }
.banner-flecha { position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,0.28); background:rgba(15,42,13,0.45); color:var(--blanco); font-family:inherit; font-size:18px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s, border-color .2s; }
.banner-flecha:hover { background:var(--verde); border-color:var(--verde); }
.banner-flecha:focus-visible { outline:2px solid var(--acento); outline-offset:3px; }
.banner-flecha-izq { left:16px; }
.banner-flecha-der { right:16px; }
.banner-puntos { position:absolute; left:0; right:0; bottom:22px; z-index:3; display:flex; gap:9px; justify-content:center; }
.banner-punto { width:9px; height:9px; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,0.5); background:transparent; cursor:pointer; transition:background .2s, border-color .2s, transform .2s; }
.banner-punto[aria-current="true"] { background:var(--acento); border-color:var(--acento); transform:scale(1.25); }
.banner-punto:focus-visible { outline:2px solid var(--acento); outline-offset:3px; }

/* ── HERO ── */
#hero { min-height:100vh; background:var(--verde-oscuro); display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; padding:120px 48px 80px; position:relative; overflow:hidden; }
#hero::before { content:''; position:absolute; top:-300px; right:-200px; width:700px; height:700px; border-radius:50%; background:radial-gradient(circle, rgba(82,168,76,0.12) 0%, transparent 65%); pointer-events:none; }
#hero::after { content:''; position:absolute; bottom:-200px; left:15%; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle, rgba(82,168,76,0.07) 0%, transparent 65%); pointer-events:none; }
.hero-left { position:relative; z-index:2; }
.hero-h1 { font-size:62px; font-weight:800; color:var(--blanco); line-height:1.04; letter-spacing:-2.5px; animation:fadeUp .9s ease .2s both; }
.hero-h1 .ghost { font-weight:200; color:rgba(255,255,255,0.45); display:block; }
.hero-h1 .cultivar { color:var(--acento); }
.hero-body { font-size:17px; font-weight:300; color:rgba(255,255,255,0.62); line-height:1.9; margin:38px 0 44px; max-width:420px; animation:fadeUp .9s ease .45s both; }
.hero-ctas { display:flex; gap:14px; align-items:center; animation:fadeUp .9s ease .65s both; }
.hero-visual { position:relative; z-index:2; height:520px; border-radius:var(--radio-hoja); overflow:hidden; background:rgba(255,255,255,0.03); border:1px solid rgba(82,168,76,0.18); display:flex; align-items:center; justify-content:center; animation:fadeIn 1.2s ease .3s both; }
/* ── METODOLOGÍA ── */
#metodologia { background:var(--fondo); padding:120px 48px; position:relative; overflow:hidden; }
#metodologia::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle 1.5px at 1px 1px, rgba(48,102,45,0.08) 0%, transparent 100%); background-size:48px 48px; pointer-events:none; }
/* HERO METODOLOGÍA */
.met-hero { display:flex; flex-direction:column; align-items:center; text-align:center; gap:32px; margin-bottom:80px; position:relative; z-index:2; }
/* SEMILLA */
.semilla-wrap { position:relative; width:220px; height:220px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
/* El halo nace en la semilla y se expande hasta desbordar el wrap.
   El golpe está al 7%: rápido al salir, cola larga al desvanecerse.
   Es lo que separa un latido de un parpadeo regular. */
@keyframes halo {
  0%   {
    transform:scale(.94);
    opacity:0;
    box-shadow: 0 0 0 0 rgba(82,168,76,0),
                inset 0 0 0 0 rgba(82,168,76,0);
  }
  7%   {
    opacity:.78;
    box-shadow: 0 0 24px 11px rgba(82,168,76,0.34),
                inset 0 0 14px 6px rgba(82,168,76,0.17);
  }
  45%  {
    opacity:.26;
    box-shadow: 0 0 28px 13px rgba(82,168,76,0.12),
                inset 0 0 4px 1px rgba(82,168,76,0.03);
  }
  100% {
    transform:scale(2.6);
    opacity:0;
    box-shadow: 0 0 0 0 rgba(82,168,76,0),
                inset 0 0 0 0 rgba(82,168,76,0);
  }
}
.semilla-anillo {
  position:absolute; border-radius:50%;
  width:108px; height:108px;
  background:transparent;
  border:1px solid rgba(82,168,76,0.32);
  box-shadow: 0 0 18px 9px rgba(82,168,76,0.28),
              inset 0 0 12px 5px rgba(82,168,76,0.14);
  animation:halo 6.5s cubic-bezier(.16,.6,.3,1) infinite;
}
/* Retardos ligeramente irregulares a propósito: repartidos de forma exacta
   la cadencia suena a metrónomo. Desajustados, respira. */
.semilla-anillo-1 { animation-delay:0s; }
.semilla-anillo-2 { animation-delay:1.5s; }
.semilla-anillo-3 { animation-delay:3.1s; }
.semilla-anillo-4 { animation-delay:4.8s; }
@media (prefers-reduced-motion:reduce) {
  .semilla-anillo { animation:none; opacity:.3; }
}
.semilla-circulo { width:100px; height:100px; border-radius:50%; overflow:hidden; position:relative; z-index:2; border:2px solid rgba(48,102,45,0.2); background:var(--verde-oscuro); flex-shrink:0; }
.semilla-img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
/* TEXTO HERO MET */
.met-hero-texto { display:flex; flex-direction:column; align-items:center; }
.met-titulo { font-size:58px; font-weight:800; color:var(--verde-oscuro); letter-spacing:-2.5px; line-height:1.0; margin-bottom:36px; }
.met-bajada { font-size:29px; font-weight:100; color:var(--texto); line-height:1.45; max-width:560px; margin:0 auto 36px; }
.met-descripcion { font-size:18px; font-weight:300; color:var(--texto); line-height:1.6; text-align:left; width:100%; max-width:560px; margin:0 auto; }
.met-descripcion strong { font-weight:700; color:var(--texto); }
/* ACORDEÓN */
.acordeon { position:relative; z-index:2; border-top:1px solid var(--gris-2); }
.acord-item { border-bottom:1px solid var(--gris-2); }
.acord-header { width:100%; background:none; border:none; cursor:pointer; padding:36px 0; display:flex; align-items:center; justify-content:space-between; gap:40px; font-family:inherit; text-align:left; transition:background .15s; }
.acord-header:hover .acord-nombre { color:var(--acento); }
.acord-left { display:flex; align-items:center; gap:32px; }
.acord-num { font-size:12px; font-weight:300; letter-spacing:4px; color:var(--gris-3); width:28px; flex-shrink:0; }
.acord-titles { display:flex; flex-direction:column; gap:4px; }
.acord-etapa { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:3px; color:var(--verde); }
.acord-nombre { font-size:28px; font-weight:800; color:var(--texto); letter-spacing:-0.8px; line-height:1; transition:color .2s; }
.acord-right { display:flex; align-items:center; gap:24px; flex-shrink:0; }
.acord-resumen { font-size:15px; font-weight:400; color:var(--gris-4); font-style:italic; max-width:280px; text-align:right; transition:opacity .2s; }
.acord-icon { width:36px; height:36px; border-radius:50%; border:1px solid var(--gris-2); display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:300; color:var(--gris-4); flex-shrink:0; transition:all .25s; }
.acord-item.open .acord-icon { background:var(--verde); border-color:var(--verde); color:var(--blanco); transform:rotate(45deg); }
.acord-item.open .acord-resumen { opacity:0; }
.acord-item.open .acord-nombre { color:var(--verde); }
.acord-body { max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(0.4,0,0.2,1); }
.acord-item.open .acord-body { max-height:400px; }
.acord-content { display:grid; grid-template-columns:1fr auto; gap:60px; padding:0 0 48px 60px; align-items:start; }
.acord-col-texto p { font-size:17px; font-weight:300; color:var(--texto); line-height:1.9; }
.acord-col-texto p + p { margin-top:14px; }
.acord-col-tags { display:flex; flex-direction:column; gap:8px; padding-top:4px; }
.acord-tag { font-size:11px; font-weight:400; letter-spacing:0.5px; color:var(--verde); background:rgba(48,102,45,0.07); border:1px solid rgba(48,102,45,0.15); padding:8px 16px; border-radius:999px; white-space:nowrap; text-align:center; }
.met-puente { margin-top:72px; padding-top:56px; display:flex; align-items:center; justify-content:center; gap:32px; position:relative; z-index:2; }
.met-puente p { font-size:20px; font-weight:400; font-style:italic; color:var(--texto); line-height:1.65; }
/* ── TRABAJO ── */
#trabajo { background:var(--blanco); padding:0 48px 120px; position:relative; }
.trabajo-header {
  background:linear-gradient(to bottom, rgba(15,42,13,0.92) 0%, rgba(15,42,13,0.6) 50%, var(--blanco) 100%),
             url('../img/header-trabajo.raices.jpg') center/cover no-repeat;
  margin:0 -48px;
  padding:80px 48px 120px;
}
.trabajo-intro { max-width:780px; }
.trabajo-intro h2 { font-size:40px; font-weight:800; color:var(--blanco); letter-spacing:-1.5px; line-height:1.1; margin-top:10px; white-space:nowrap; }
.trabajo-intro p { font-size:16px; font-weight:300; color:rgba(255,255,255,0.65); line-height:1.9; margin-top:25px; }
.trabajo-stats {
  display:flex; gap:0;
  margin-top:32px;
  background:rgba(255,255,255,0.92);
  border-radius:var(--radio-hoja);
  overflow:hidden;
  display:inline-flex;
}
.trabajo-stat {
  padding:20px 36px;
  border-right:1px solid var(--gris-1);
}
.trabajo-stat:last-child { border-right:none; }
.trabajo-stat-num { font-size:32px; font-weight:800; color:var(--verde-oscuro); letter-spacing:-1px; line-height:1; }
.trabajo-stat-label { font-size:12px; font-weight:300; color:var(--gris-4); margin-top:4px; letter-spacing:0.5px; }
.caso { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; padding:72px 0; border-top:1px solid var(--gris-1); }
.caso:nth-child(even) .caso-visual { order:-1; }
.caso-tag { display:inline-flex; align-items:center; font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:2.5px; color:var(--verde); border:1px solid rgba(48,102,45,0.25); padding:4px 10px; border-radius:999px; margin-bottom:16px; }
.caso-mirada { font-size:32px; font-weight:800; color:var(--verde-oscuro); letter-spacing:-0.8px; line-height:1.12; margin-bottom:10px; }
.caso-mirada .light { font-weight:200; color:var(--gris-3); }
.caso-desc { font-size:15px; font-weight:300; color:var(--texto); line-height:1.9; margin-bottom:28px; }
.caso-link { display:inline-flex; align-items:center; gap:10px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:2px; color:var(--verde); border-bottom:2px solid rgba(48,102,45,0.35); padding-bottom:4px; transition:gap .2s, border-color .2s; }
.caso-link:hover { gap:16px; border-color:var(--verde); }
.caso-link::after { content:'→'; }
.caso-visual { height:380px; background:var(--gris-1); border-radius:var(--radio-hoja); overflow:hidden; position:relative; transition:transform .3s; display:block; }
.caso-visual:hover { transform:scale(1.01); }
.caso-visual img { width:100%; height:100%; object-fit:cover; display:block; }
/* ── OTROS CULTIVOS GRILLA ── */
.otros-cultivos-grilla { padding:80px 0 0; border-top:1px solid var(--gris-1); }
.oc-titulo { font-size:12px; font-weight:300; text-transform:uppercase; letter-spacing:4px; color:var(--gris-3); margin-bottom:28px; }
.oc-grilla { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
.oc-card { position:relative; height:200px; border-radius:var(--radio-hoja); overflow:hidden; }
.oc-overlay { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(15,42,13,0.55) 0%, transparent 45%, rgba(15,42,13,0.92) 100%); }
.oc-top { position:absolute; top:0; left:0; right:0; padding:14px 16px; }
.oc-nombre { font-size:14px; font-weight:700; color:#ffffff; letter-spacing:-0.2px; line-height:1.2; }
.oc-bottom { position:absolute; bottom:0; left:0; right:0; padding:10px 14px; }
.oc-pill { display:inline-flex; font-size:10px; font-weight:400; letter-spacing:1.5px; color:rgba(82,168,76,0.95); border:1px solid rgba(82,168,76,0.35); padding:3px 9px; border-radius:999px; }
/* ── SIEMBRA ── */
#siembra-idea { background:var(--verde-oscuro); padding:120px 48px; position:relative; overflow:hidden; }
#siembra-idea::before { content:''; position:absolute; bottom:-200px; right:-150px; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle, rgba(82,168,76,0.09) 0%, transparent 65%); pointer-events:none; }
#siembra-idea::after { content:''; position:absolute; top:-100px; left:-100px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle, rgba(82,168,76,0.06) 0%, transparent 65%); pointer-events:none; }
.siembra-top { display:flex; flex-direction:column; margin-bottom:60px; position:relative; z-index:2; }
.siembra-top h2 { font-size:44px; font-weight:800; color:var(--blanco); letter-spacing:-1.5px; line-height:1.05; margin-bottom:27px; }
.siembra-top h2 span { font-weight:200; color:rgba(255,255,255,0.45); display:block; }
.siembra-intro { font-size:16px; font-weight:300; color:rgba(255,255,255,0.7); line-height:1.9; max-width:520px; }
.siembra-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; position:relative; z-index:2; }
.s-card { position:relative; overflow:hidden; padding:40px 32px; border-radius:var(--radio-hoja); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; display:flex; flex-direction:column; cursor:pointer; }
.s-card.reveal { transition-delay:0s; }
.s-card.reveal:hover { transform:translateY(-4px); box-shadow:0 16px 28px rgba(0,0,0,0.22); border-color:rgba(82,168,76,0.5); z-index:2; }
.s-card.reveal:focus-visible { outline:3px solid var(--acento); outline-offset:3px; transform:translateY(-4px); z-index:2; }
.s-num { position:absolute; top:-10px; right:16px; font-size:88px; font-weight:800; opacity:.10; line-height:1; pointer-events:none; }
.s-tag { align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; padding:5px 14px; border-radius:999px; margin-bottom:18px; }
.s-nombre { font-size:22px; font-weight:800; margin-bottom:10px; }
.s-desc { font-size:14px; font-weight:300; line-height:1.7; margin-bottom:0; flex:1; }
.s-cta { align-self:flex-start; display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:.3px; padding:12px 22px; border-radius:999px; margin-top:24px; transition:gap .2s; }
.s-card:hover .s-cta { gap:12px; }
/* Nivel 1 — Siembra: claro, discreto */
.s-card.siembra { background:radial-gradient(ellipse 400px 300px at 100% 0%, rgba(82,168,76,0.35) 0%, transparent 60%), linear-gradient(160deg, #eef5e8 0%, #dfebd4 100%); border:1px solid rgba(48,102,45,0.12); }
.s-card.siembra .s-num { color:var(--verde); }
.s-card.siembra .s-tag { background:rgba(48,102,45,0.08); color:var(--verde); }
.s-card.siembra .s-nombre { color:var(--texto); }
.s-card.siembra .s-desc { color:rgba(26,61,24,0.75); }
.s-card.siembra .s-cta { background:var(--verde); color:var(--blanco); }
/* Nivel 2 — Brote: medio, más elegido */
.s-card.brote { background:radial-gradient(ellipse 400px 300px at 100% 0%, rgba(82,168,76,0.3) 0%, transparent 60%), rgba(82,168,76,0.14); border:1px solid rgba(82,168,76,0.3); }
.s-card.brote:hover { background:radial-gradient(ellipse 400px 300px at 100% 0%, rgba(82,168,76,0.35) 0%, transparent 60%), rgba(82,168,76,0.19); }
.s-card.brote .s-num { color:var(--acento); }
.s-card.brote .s-tag { background:var(--acento); color:var(--verde-oscuro); }
.s-card.brote .s-nombre { color:var(--blanco); }
.s-card.brote .s-desc { color:rgba(255,255,255,0.65); }
.s-card.brote .s-cta { background:var(--verde-oscuro); color:var(--blanco); }
/* Nivel 3 — Cosecha: oscuro, máxima presencia */
.s-card.cosecha { background:radial-gradient(ellipse 400px 300px at 100% 0%, rgba(82,168,76,0.32) 0%, transparent 60%), var(--verde-oscuro); border:1px solid rgba(82,168,76,0.22); }
.s-card.cosecha .s-num { color:var(--acento); }
.s-card.cosecha .s-tag { background:var(--acento); color:var(--verde-oscuro); }
.s-card.cosecha .s-nombre { color:var(--blanco); }
.s-card.cosecha .s-desc { color:rgba(255,255,255,0.6); }
.s-card.cosecha .s-cta { background:var(--acento); color:var(--verde-oscuro); }
.siembra-cta { margin-top:60px; display:flex; align-items:center; gap:20px; position:relative; z-index:2; }
.siembra-cta p { font-size:13px; font-weight:300; color:rgba(255,255,255,0.25); }
.siembra-ritmo { margin-bottom:32px; position:relative; z-index:2; }
.ritmo-label { font-size:11px; font-weight:300; text-transform:uppercase; letter-spacing:3px; color:rgba(255,255,255,0.55); margin-bottom:14px; }
.ritmo-row { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.ritmo-chip { display:flex; align-items:center; justify-content:space-between; gap:16px; background:rgba(255,255,255,0.03); border:1px dashed rgba(255,255,255,0.15); border-radius:var(--radio-hoja-sm); padding:18px 22px; transition:border-color .2s, transform .2s, background .2s; }
.ritmo-chip:hover { border-color:rgba(82,168,76,0.4); transform:translateY(-3px); }
.ritmo-chip:focus-visible { outline:3px solid var(--acento); outline-offset:3px; border-color:rgba(82,168,76,0.4); }
.ritmo-chip-texto { display:flex; flex-direction:column; gap:2px; }
.ritmo-chip-nombre { font-size:14px; font-weight:700; color:var(--blanco); }
.ritmo-chip-desc { font-size:12px; font-weight:300; color:rgba(255,255,255,0.55); }
.ritmo-chip-precio { font-size:13px; font-weight:800; color:var(--acento); white-space:nowrap; }
.siembra-divisor { margin:6px 0 32px; display:flex; align-items:center; gap:16px; position:relative; z-index:2; }
.siembra-divisor::before, .siembra-divisor::after { content:''; flex:1; height:1px; background:rgba(255,255,255,0.12); }
.siembra-divisor span { font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--acento); white-space:nowrap; }

/* ── FRANJA TUWEB ──
   Cierra la sección Siembra con la salida para quien solo busca una web.
   Reusa el lenguaje del .ritmo-chip —fondo tenue y borde punteado— para
   leerse como una opción más del mismo menú, no como un anuncio pegado. */
.tuweb-franja { margin-top:48px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; background:rgba(255,255,255,0.03); border:1px dashed rgba(255,255,255,0.15); border-radius:var(--radio-hoja-sm); padding:22px 26px; position:relative; z-index:2; }
.tuweb-texto { font-size:15px; font-weight:300; color:rgba(255,255,255,0.7); }
.tuweb-btn { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:.3px; padding:12px 22px; border-radius:999px; background:transparent; border:1.5px solid var(--acento); color:var(--acento); transition:background .2s, color .2s, gap .2s; white-space:nowrap; }
.tuweb-btn:hover { background:var(--acento); color:var(--verde-oscuro); gap:12px; }
.tuweb-btn:focus-visible { outline:3px solid var(--acento); outline-offset:3px; }
/* ── ESTUDIO ── */
#estudio { background:var(--fondo-calido); padding:120px 48px; }
.estudio-grid { display:grid; grid-template-columns:380px 1fr; gap:80px; align-items:start; margin-top:56px; }
.estudio-foto { height:480px; border-radius:var(--radio-hoja); overflow:hidden; }
.estudio-content h2 { font-size:36px; font-weight:800; color:var(--verde-oscuro); letter-spacing:-0.8px; line-height:1.2; }
.estudio-content p { font-size:16px; font-weight:300; color:var(--texto); line-height:1.9; margin-top:22px; }
.estudio-datos { margin-top:44px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dato { padding:18px 22px; background:var(--blanco); border-radius:var(--radio-hoja-sm); }
.dato-label { font-size:11px; font-weight:300; text-transform:uppercase; letter-spacing:2px; color:var(--gris-3); margin-bottom:6px; }
.dato-valor { font-size:14px; font-weight:700; color:var(--verde); }
/* ── CONTACTO ── */
#contacto { background:var(--verde-oscuro); min-height:62vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:120px 48px; position:relative; overflow:hidden; }
#contacto::before { content:''; position:absolute; top:-200px; left:50%; transform:translateX(-50%); width:800px; height:500px; background:radial-gradient(ellipse, rgba(82,168,76,0.1) 0%, transparent 65%); pointer-events:none; }
.contacto-inner { position:relative; z-index:2; }
.contacto-h { font-size:52px; font-weight:800; color:var(--blanco); letter-spacing:-2px; line-height:1.05; margin-bottom:32px; }
.contacto-h span { font-weight:200; color:rgba(255,255,255,0.45); display:block; }
.contacto-sub { font-size:17px; font-weight:300; color:rgba(255,255,255,0.55); line-height:1.8; margin-bottom:48px; max-width:380px; margin-left:auto; margin-right:auto; }
.contacto-email { font-size:13px; font-weight:300; color:rgba(255,255,255,0.55); margin-top:22px; letter-spacing:1px; }
/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  /* BANNER */
  /* En pantalla estrecha el texto ocupa todo el ancho, así que el velo pasa
     de lateral a vertical: si siguiera aclarándose hacia la derecha, el
     final de cada línea quedaría sobre la parte más clara de la foto. */
  .banner::before { background:linear-gradient(180deg, rgba(15,42,13,0.9) 0%, rgba(15,42,13,0.8) 55%, rgba(15,42,13,0.92) 100%); }
  .banner::after { display:none; }
  .banner-texto { font-size:16px; max-width:100%; }
  .banner-hero { min-height:auto; padding:100px 24px 60px; }
  .banner-hero .banner-titulo { font-size:40px; letter-spacing:-1.5px; }
  .banner-hero .banner-texto { margin:20px 0 32px; }
  .banner-apaisado { min-height:auto; padding:96px 24px 52px; }
  .banner-apaisado .banner-titulo { font-size:30px; letter-spacing:-1px; }
  .banner-apaisado .banner-texto { margin:18px 0 28px; }
  /* HERO */
  #hero { grid-template-columns:1fr; gap:40px; padding:100px 24px 60px; min-height:auto; }
  #hero::before, #hero::after { display:none; }
  .hero-h1 { font-size:40px; letter-spacing:-1.5px; }
  .hero-body { font-size:16px; margin:20px 0 32px; max-width:100%; }
  .hero-ctas { flex-direction:column; align-items:flex-start; gap:12px; }
  .hero-visual { height:260px; order:2; }
  .hero-left { order:1; }
  /* METODOLOGÍA */
  #metodologia { padding:72px 24px; }
  .met-hero { gap:24px; margin-bottom:48px; }
  .semilla-wrap { margin:0 auto; }
  .met-titulo { font-size:40px; letter-spacing:-1.5px; }
  .met-bajada { font-size:24px; }
  .met-descripcion { font-size:15px; }
  .acord-header { padding:24px 0; gap:16px; }
  .acord-nombre { font-size:24px; }
  .acord-resumen { display:none; }
  .acord-content { grid-template-columns:1fr; gap:24px; padding:0 0 32px 0; }
  .acord-col-tags { flex-direction:row; flex-wrap:wrap; }
  .met-puente { flex-direction:column; gap:20px; text-align:center; margin-top:48px; padding-top:40px; }
  .met-puente p { font-size:17px; }
  /* TRABAJO */
  #trabajo { padding:0 24px 80px; }
  .trabajo-header { margin:0 -24px; padding:60px 24px 80px; }
  .trabajo-intro h2 { font-size:26px; white-space:normal; }
  .trabajo-stats { display:flex; flex-wrap:wrap; width:100%; }
  .trabajo-stat { padding:16px 20px; flex:1; min-width:80px; }
  .trabajo-stat-num { font-size:24px; }
  .caso { grid-template-columns:1fr; gap:28px; padding:48px 0; }
  .caso:nth-child(even) .caso-visual { order:0; }
  .caso-visual { height:240px; }
  .caso-mirada { font-size:24px; }
  .oc-grilla { grid-template-columns:1fr 1fr; }
  .otros-cultivos-grilla { padding:48px 0 0; }
  /* SIEMBRA */
  #siembra-idea { padding:72px 24px; }
  .siembra-top { margin-bottom:40px; }
  .siembra-top h2 { font-size:30px; margin-bottom:18px; }
  .siembra-cards { grid-template-columns:1fr; gap:12px; }
  .s-card { padding:28px 24px; }
  .siembra-cta { flex-direction:column; align-items:flex-start; gap:10px; }
  .ritmo-row { grid-template-columns:1fr; gap:14px; }
  .ritmo-chip { background:rgba(82,168,76,0.16); border:1.5px solid rgba(82,168,76,0.4); padding:22px 24px; }
  .ritmo-chip-nombre { font-size:16px; }
  .ritmo-chip-desc { font-size:13px; }
  .ritmo-chip-precio { font-size:15px; }
  .siembra-divisor { margin:4px 0 22px; }
  .tuweb-franja { flex-direction:column; align-items:stretch; text-align:center; margin-top:32px; }
  .tuweb-btn { justify-content:center; }
  /* ESTUDIO */
  #estudio { padding:72px 24px; }
  .estudio-grid { grid-template-columns:1fr; gap:40px; margin-top:40px; }
  .estudio-foto { height:300px; }
  .estudio-content h2 { font-size:28px; }
  .estudio-datos { grid-template-columns:1fr 1fr; }
  /* CONTACTO */
  #contacto { padding:80px 24px; min-height:auto; }
  .contacto-h { font-size:36px; letter-spacing:-1.2px; }
  .contacto-sub { font-size:16px; }
}
@media (max-width: 480px) {
  .banner-hero .banner-titulo { font-size:32px; }
  .banner-apaisado .banner-titulo { font-size:26px; }
  .hero-h1 { font-size:32px; }
  .met-titulo { font-size:32px; }
  .oc-grilla { grid-template-columns:1fr; }
  .trabajo-stats { flex-direction:column; }
  .trabajo-stat { border-right:none; border-bottom:1px solid var(--gris-1); }
  .trabajo-stat:last-child { border-bottom:none; }
  .estudio-datos { grid-template-columns:1fr; }
  .contacto-h { font-size:28px; }
}