/* ===================================================================
   Inicio (index.php) — bandas y componentes propios de la home.
   Se carga solo en Inicio, después de style.css. Todo cuelga de `.home`,
   así que no puede afectar a otras páginas. Los colores salen de
   colors.css.
   =================================================================== */
/* ── BANDAS DE LA HOME ──
   Todo lo de este bloque cuelga de `.home` (envoltorio que solo existe en
   index.php), así que no puede afectar a las páginas internas.
   Un tema = una banda = un fondo. Solo dos fondos puros que alternan:
   negro y blanco; el cambio de fondo es lo que delimita cada sección.
   Regla de marca: nunca dorado con texto blanco. Sobre negro el dorado
   funciona como texto; sobre blanco (≈2.5:1) no, así que ahí el texto de
   acento va en negro y el dorado queda como relleno de botón (con texto
   negro) o filo decorativo. */
.home .band{position:relative;isolation:isolate;}
.home .band > .hero{max-width:1040px;}

/* Tipografía mínima legible dentro de las bandas. */
.home .eyebrow{font-size:var(--text-label);}
.home .card .k{font-size:var(--text-label);}
.home .card .d{font-size:var(--text-body-sm);}
.home .card .cta{font-size:var(--text-body-sm);}

/* Dos columnas: texto + visual (evita que la mitad derecha quede vacía). */
.home .split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center;}
.home .split .video-facade{max-width:none;}
.home .btn-stack{display:flex;flex-direction:column;gap:12px;align-items:stretch;}
.home .btn-stack .btn{width:100%;}
.home .steps{display:grid;gap:14px;}
.home .steps h3{font-size:var(--text-h3);margin-bottom:2px;}
.home .steps .col-item p{font-size:var(--text-body-sm);line-height:var(--leading-body);}
.home .credibility-note{margin-top:18px;padding-left:14px;border-left:2px solid var(--accent);font-size:var(--text-body-sm);line-height:var(--leading-body);color:var(--muted);}
.home .about-split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:center;}
.home .about-photo-xl{width:min(300px,100%);aspect-ratio:1;border-radius:50%;overflow:hidden;justify-self:center;border:1px solid var(--line-strong);}
.home .about-photo-xl img{width:100%;height:100%;object-fit:cover;}
.home .about-split .quote-lg{max-width:none;justify-self:center;}
.home .about-split .quote-lg p{font-size:var(--text-h2);}
.home .hero-photo{justify-self:end;}
@media (max-width:860px){
  .home .hero-photo{display:none;}
  .home .band{padding-block:48px;}
  .home .band > .section + .section{margin-top:36px;}
  .home .split,.home .about-split{grid-template-columns:1fr;gap:24px;}
  .home .steps{gap:10px;}
  .home .steps .col-item{padding:14px 16px;}
}

/* En la banda blanca los bloques de pasos no llevan fondo propio. */
.home .band-white{--bg-raised:transparent;}
/* Tarjetas: carbón en todas las bandas, con texto claro y dorado como
   texto (sus colores, en colors.css). La regla de dos colores aplica a
   los fondos de sección, no a los elementos. */
.home .card,.home .portfolio-card{background:var(--card-bg);border:1px solid var(--line);}
.home .card:hover,.home .portfolio-card:hover{border-color:var(--line-strong);}
.home .card.card-product,.home .card.card-product:hover{border-color:var(--accent);border-top-width:2px;}
/* Sobre blanco el carbón necesita sombra para despegarse; el foco, contorno negro. */
.home .band-white .card,.home .band-white .portfolio-card{box-shadow:var(--shadow-sm);}
.home .band-white .card:hover,.home .band-white .portfolio-card:hover{box-shadow:var(--shadow-md);}
.home .band-white .card:focus-visible,.home .band-white .portfolio-card:focus-visible{outline-color:var(--focus-on-light);}

/* Proyectos de la home: captura, nombre y enlace sobre tarjeta carbón.
   3 columnas desde 861px; en una columna hasta 860px. Entre 561 y 860px la
   captura va a la izquierda y el texto a la derecha; por debajo, apilado.
   Sin saltos en 600/601px. */
.home .portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px;}
.home .portfolio-card{
  display:flex;flex-direction:column;overflow:hidden;color:var(--ink);text-decoration:none;
  border-radius:var(--radius-md);
  transition:border-color .15s ease,transform .15s ease,box-shadow var(--dur-base) var(--ease);
}
.home .portfolio-card:hover{transform:translateY(var(--lift));}
.home .portfolio-card-shot{aspect-ratio:16/11;overflow:hidden;border-bottom:1px solid var(--line);background:var(--card-bg);}
.home .portfolio-card-shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform var(--dur-slow) var(--ease);}
.home .portfolio-card:hover .portfolio-card-shot img{transform:scale(1.045);}
.home .portfolio-card-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1;min-width:0;}
.home .portfolio-card .t{font-family:var(--font-heading);font-size:var(--text-lead);color:var(--ink);margin-bottom:6px;font-weight:var(--weight-heading-sm);}
.home .portfolio-card .cta{font-size:var(--text-body-sm);font-weight:var(--weight-strong);color:var(--accent);overflow-wrap:anywhere;}
@media (max-width:860px){
  .home .portfolio-grid{grid-template-columns:1fr;gap:16px;margin-top:20px;}
}
@media (min-width:561px) and (max-width:860px){
  .home .portfolio-card{flex-direction:row;}
  .home .portfolio-card-shot{flex:0 0 42%;aspect-ratio:auto;height:220px;border-bottom:0;border-right:1px solid var(--line);}
}
@media (max-width:600px){
  .home .hero::before{left:0;width:100%;}
  .home .products-grid{gap:12px;margin-top:20px;}
  .home .products-grid .card{padding:16px 18px;}
  .home .products-grid .card .d{margin-bottom:8px;line-height:var(--leading-small);}
}
/* Video: foco visible cuando el reproductor (iframe) recibe el foco. */
.home .video-facade:focus-within{outline:2px solid var(--focus);outline-offset:2px;}
.home .video-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;}
.home .video-wrap .video-facade{width:100%;}