/* ===================================================================
==
   Componentes nuevos — página Pilotaje VSEP (15-09-2026)
   =================================================================== */

.page-hero.hero-photo-pilotaje-vsep{
  background-image:linear-gradient(to right, rgba(253,253,251,1) 0%, rgba(253,253,251,0.97) 32%, rgba(253,253,251,0.66) 56%, rgba(253,253,251,0.16) 82%, rgba(253,253,251,0) 100%), url(vsep-hero-planta.jpg);
}
/* en celular, la hoja compartida apaga la foto de fondo de .has-photo
   (background-image:none !important); para esta página sí la queremos,
   en vertical y con degradado de arriba hacia abajo para no tapar el texto */
@media (max-width:760px){
  .page-hero.hero-photo-pilotaje-vsep{
    min-height:300px !important; display:flex !important; align-items:flex-end;
    /* se muestra solo la mitad superior de la foto (background-position:top +
       menos alto) porque la mitad inferior de la imagen es muy oscura */
    background-image:linear-gradient(to bottom, rgba(253,253,251,1) 0%, rgba(253,253,251,0.95) 26%, rgba(253,253,251,0.45) 55%, rgba(253,253,251,0.85) 88%, rgba(253,253,251,1) 100%), url(vsep-hero-planta.jpg) !important;
    background-size:cover !important; background-position:center top !important; background-repeat:no-repeat !important;
  }
}

/* proceso del piloto: reutiliza el layout numerado de idx-row pero sin
   comportamiento de link (no es una lista de páginas, es una secuencia real) */
.proceso-list{ display:flex; flex-direction:column; }
.proceso-row{
  display:grid; grid-template-columns:60px 1fr; gap:18px; align-items:start;
  padding:20px 14px; border-bottom:1px solid var(--rule);
}
.proceso-row:first-child{ border-top:1px solid var(--rule); }
.proceso-n{ font-family:'Big Shoulders Display',sans-serif; font-weight:700; font-size:1.8rem; color:var(--accent); line-height:1; }
.proceso-body h3{
  font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:1.02rem;
  text-transform:none; margin:0 0 4px;
}
.proceso-body p{ font-family:'IBM Plex Sans',sans-serif; color:var(--text-soft); font-size:0.9rem; margin:0; line-height:1.55; max-width:64ch; }

/* comparación piloto vs. escala industrial: imagen + texto como columnas
   paralelas (título de la sección va en banda negra aparte) */
.compare-grid--4col{
  display:grid; grid-template-columns:1.6fr 1fr 1.6fr 1fr; gap:28px; align-items:center;
}
@media (max-width:980px){ .compare-grid--4col{ grid-template-columns:1fr 1fr; row-gap:20px; } }
@media (max-width:620px){ .compare-grid--4col{ grid-template-columns:1fr; } }
.cg-img{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--rule); background:#fff; }
.cg-img img{ width:100%; display:block; aspect-ratio:3/4; object-fit:contain; padding:16px; box-sizing:border-box; background:#fff; }
.cg-text{ display:flex; flex-direction:column; gap:8px; }
.cg-text .cc-label{
  font-family:'Archivo',sans-serif; font-weight:700; font-size:0.72rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--accent);
}
.cg-text p{ margin:0; font-family:'IBM Plex Sans',sans-serif; font-size:0.92rem; color:var(--text-soft); line-height:1.5; }

/* infografía de referencia del fabricante, enmarcada como fuente externa */
.source-figure{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--rule);
  background:#0B1E4A; max-width:420px; margin:0 auto;
}
.source-figure img{ width:100%; display:block; }
.source-figure figcaption{
  background:var(--card); padding:12px 16px; border-top:1px solid var(--rule);
  font-family:'Archivo',sans-serif; font-weight:500; font-size:0.72rem; color:var(--text-soft);
}

/* FAQ desplegable */
.faq-list{ display:flex; flex-direction:column; gap:10px; max-width:820px; }
.faq-item{
  border:1px solid var(--rule); border-radius:var(--radius); background:var(--card);
  overflow:hidden; transition:border-color 180ms ease;
}
.faq-item[open]{ border-color:var(--accent); }
.faq-item summary{
  list-style:none; cursor:pointer; padding:18px 46px 18px 20px; position:relative;
  font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:0.98rem; color:var(--text);
  display:flex; align-items:center; gap:12px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:''; position:absolute; right:18px; top:50%; width:12px; height:12px;
  border-right:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:translateY(-65%) rotate(45deg); transition:transform 220ms ease;
}
.faq-item[open] summary::after{ transform:translateY(-35%) rotate(-135deg); }
.faq-answer{ padding:0 20px 20px; font-family:'IBM Plex Sans',sans-serif; font-size:0.92rem; color:var(--text-soft); line-height:1.6; max-width:70ch; }

/* select en el formulario (comparte estilo con input/textarea) */
.contact-form select{
  font-family:'IBM Plex Sans',sans-serif; font-size:0.95rem; color:var(--text);
  background:var(--bg); border:1px solid var(--rule); border-radius:var(--radius-sm);
  padding:11px 13px; transition:border-color 160ms ease; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B4F44' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px;
}
.contact-form select:focus{ outline:none; border-color:var(--accent); }
.contact-form fieldset{ border:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.contact-form legend{
  padding:0; font-family:'Archivo',sans-serif; font-weight:600; font-size:0.74rem;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--text-soft); margin-bottom:2px;
}
.radio-row{ display:flex; gap:18px; flex-wrap:wrap; }
.radio-row label{
  flex-direction:row !important; align-items:center; gap:7px !important;
  text-transform:none !important; font-size:0.9rem !important; letter-spacing:0 !important;
  font-weight:400 !important; color:var(--text) !important;
}
.radio-row input{ margin:0; }

/* variante de svc-layout usada para poner un bloque destacado a la derecha
   (caveat-box, cifra, etc.) en vez de una foto */
.svc-layout--2col{ align-items:start; }
.caveat-box--aside{ margin-top:0; align-self:start; }
@media (max-width:900px){ .caveat-box--aside{ margin-top:22px; } }

/* infografía propia de Biotamb (reemplaza la imagen del fabricante):
   grilla de sectores + nota, directo en el ancho de la sección — sin
   tarjeta contenedora propia, así el ancho siempre calza con el resto
   de los bloques de la página (evita el desajuste visual entre la
   última fila incompleta de la grilla y la nota de abajo) */
.sector-infographic-label{
  display:block; font-family:'Archivo',sans-serif; font-weight:700; font-size:0.7rem;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); margin:0 0 16px;
}

/* banda de corte entre secciones: título grande sobre fondo de marca */
.section-band{ background:var(--green-deep); padding:clamp(28px,4vw,44px) 0; }
.section-band.is-wine{ background:var(--wine); }
.section-band.is-black{ background:var(--ink); }
.section-band .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.section-band h3{
  font-family:'Big Shoulders Display',sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(1.5rem,3vw,2.6rem); line-height:1.05; letter-spacing:0.005em;
  color:var(--paper); margin:0; white-space:nowrap;
}
.section-band p{
  font-family:'IBM Plex Sans',sans-serif; font-size:0.92rem; line-height:1.55;
  color:rgba(253,253,251,0.82); margin:0; max-width:38ch;
}
.section-band p.nowrap-sub{ white-space:nowrap; max-width:none; }
@media (max-width:640px){
  .section-band .wrap{ flex-direction:column; align-items:flex-start; }
  .section-band h3{ white-space:normal; }
  .section-band p.nowrap-sub{ white-space:normal; }
}

/* nota de expectativas (no-sobrepromesa) */
.caveat-box{
  background:var(--card); border:1px solid var(--rule); border-left:3px solid var(--accent);
  border-radius:var(--radius-sm); padding:16px 20px; margin-top:22px;
}
.caveat-box p{ margin:0; font-family:'IBM Plex Sans',sans-serif; font-size:0.88rem; color:var(--text-soft); line-height:1.6; max-width:none; }
.caveat-box strong{ color:var(--text); }

/* ajustes finos de ancho/una-línea pedidos en la segunda ronda de revisión */
.equip-tags span{ white-space:nowrap; }
.exp-note{ max-width:none; }