/* ============================================================
   PAGINAS DE SISTEMAS — ORIENS ENERGIA SOLAR
   Estilos COMPARTIDOS por on-grid, off-grid, hibridos, backup y
   estructuras: un cambio aca se ve en todas.
   Mismo lenguaje visual que la landing y Nosotros.
   ============================================================ */

:root{
  --negro:#201F1F;
  --negro-hondo:#171616;
  --negro-carta:#292827;
  --gris-linea:#3A3938;
  --gris-txt:#A8A6A1;
  --texto:#DEDCD7;
  --amarillo:#FBD54F;
  --amarillo-hover:#F2C93B;
  --blanco:#FFFFFF;
  --claro:#F6F5F2;
  --claro-txt:#5C5A55;
  --display:"Montserrat","Segoe UI",system-ui,-apple-system,sans-serif;
  --cuerpo:"Poppins","Segoe UI",system-ui,-apple-system,sans-serif;
  --max:1120px;
  --pad:clamp(20px,5vw,56px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--negro);color:var(--texto);
  font-family:var(--cuerpo);font-weight:300;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--amarillo);text-underline-offset:3px;}
a:hover{color:var(--blanco);}
:focus-visible{outline:2px solid var(--amarillo);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad);}
section{padding-block:clamp(56px,8vw,96px);}
.hondo{background:var(--negro-hondo);border-block:1px solid var(--gris-linea);}

.eyebrow{
  font-family:var(--display);font-weight:400;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--amarillo);margin:0 0 16px;
}
h1,h2,h3{font-family:var(--display);font-weight:300;line-height:1.13;margin:0;color:var(--blanco);text-wrap:balance;letter-spacing:-.005em;}
h1{font-size:clamp(34px,5.4vw,60px);}
h2{font-size:clamp(26px,3.5vw,40px);}
h3{font-size:clamp(17px,1.7vw,20px);line-height:1.28;font-weight:400;}
h1 em,h2 em{font-style:normal;color:var(--amarillo);}
p{margin:0 0 16px;}
.lead{font-size:clamp(16px,1.5vw,19px);color:var(--gris-txt);max-width:58ch;}
.cab{max-width:62ch;margin-bottom:clamp(30px,4vw,48px);}
.cab .lead{margin-top:14px;}

/* ---------- barra superior ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(23,22,22,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--gris-linea);
}
.topbar .in{max-width:var(--max);margin:0 auto;padding:0 var(--pad);height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.marca img{height:36px;width:auto;}
.topbar nav{display:flex;align-items:center;gap:22px;}
.topbar nav a{font-size:13.5px;color:var(--gris-txt);text-decoration:none;}
.topbar nav a:hover{color:var(--blanco);}
.topbar nav a.btn{color:var(--negro);padding:10px 18px;font-size:13.5px;}
@media (max-width:640px){.topbar nav a:not(.btn){display:none;}}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--cuerpo);font-size:15px;font-weight:400;
  padding:15px 26px;border-radius:2px;text-decoration:none;border:0;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.btn-primario{background:var(--amarillo);color:var(--negro);}
.btn-primario:hover{background:var(--amarillo-hover);color:var(--negro);}
.btn-fantasma{border:1px solid var(--gris-linea);color:var(--blanco);background:rgba(23,22,22,.4);}
.btn-fantasma:hover{border-color:var(--amarillo);color:var(--amarillo);}
.btn-bloque{width:100%;}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;}

/* ---------- portada: foto de obra a lo ancho, texto abajo a la izquierda ---------- */
.hero{
  position:relative;display:flex;align-items:flex-end;
  min-height:clamp(480px,78vh,820px);padding-block:clamp(64px,9vw,120px) clamp(44px,6vw,80px);
  background:
    linear-gradient(to top,rgba(23,22,22,.94) 0%,rgba(23,22,22,.6) 38%,rgba(23,22,22,0) 68%),
    linear-gradient(90deg,rgba(23,22,22,.6) 0%,rgba(23,22,22,0) 60%),
    var(--fondo) center/cover no-repeat;
  background-color:var(--negro-hondo);border-bottom:1px solid var(--gris-linea);
}
.hero .wrap{width:100%;}
.hero-texto{max-width:660px;}
.hero .lead{margin-top:20px;color:var(--texto);}
@media (max-width:640px){
  .hero{min-height:min(86vh,640px);
    background:linear-gradient(to top,rgba(23,22,22,.96) 0%,rgba(23,22,22,.75) 45%,rgba(23,22,22,.1) 75%),var(--fondo) center/cover no-repeat;}
}

/* ---------- para quien es ---------- */
.perfiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);}
@media (max-width:860px){.perfiles{grid-template-columns:1fr;}}
.perfil{
  background:var(--negro-carta);border:1px solid var(--gris-linea);border-radius:12px;
  padding:24px 24px 26px;transition:transform .3s,border-color .3s;
}
.perfil:hover{transform:translateY(-4px);border-color:#55524E;}
.perfil .ico{
  width:48px;height:48px;border-radius:50%;background:var(--amarillo);
  display:grid;place-items:center;margin-bottom:16px;
}
.perfil .ico svg{width:24px;height:24px;stroke:var(--negro);}
.perfil h3{margin-bottom:8px;}
.perfil p{font-size:14.5px;color:var(--gris-txt);margin:0;}

/* "para quien es" con una foto al costado (ej. off grid: foto rural) */
.perfiles-foto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px);align-items:stretch;}
@media (max-width:860px){.perfiles-foto{grid-template-columns:1fr;}}
.foto-lado{
  min-height:320px;border-radius:12px;border:1px solid var(--gris-linea);
  background:#2A2928 var(--img) center/cover no-repeat;box-shadow:0 24px 50px -30px rgba(0,0,0,.8);
}
.perfiles.columna{grid-template-columns:1fr;}
.perfiles.columna .perfil{display:grid;grid-template-columns:48px 1fr;column-gap:18px;align-items:start;padding:20px 22px;}
.perfiles.columna .perfil .ico{grid-row:span 2;margin-bottom:0;}
.perfiles.columna .perfil h3{margin-bottom:4px;}

/* ---------- como funciona: diagrama + pasos ---------- */
.funciona{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;}
@media (max-width:900px){.funciona{grid-template-columns:1fr;}}
.diagrama{
  background:var(--negro-carta);border:1px solid var(--gris-linea);border-radius:14px;
  padding:clamp(14px,2vw,22px);
}
.diagrama svg{width:100%;height:auto;display:block;}
.diagrama .caja{fill:#201F1F;stroke:#4A4845;stroke-width:1.5;}
.diagrama .ico{fill:none;stroke:var(--amarillo);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.diagrama .ico-g{fill:none;stroke:#BDBAB4;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.diagrama text{font-family:var(--display);fill:#DEDCD7;font-size:13px;}
.diagrama text.chico{fill:#8E8B86;font-size:11px;}
.diagrama .via{fill:none;stroke:#3A3938;stroke-width:3;}
/* en celular el dibujo se achica: letra mas grande y sin los textos secundarios */
@media (max-width:640px){
  .diagrama text{font-size:20px;}
  .diagrama text.chico{display:none;}
}
/* energia que circula: rayas que se mueven */
.diagrama .flujo{fill:none;stroke:var(--amarillo);stroke-width:3;stroke-dasharray:6 10;animation:fluir 1.2s linear infinite;}
.diagrama .flujo.red{stroke:#9FC3E8;}
@keyframes fluir{to{stroke-dashoffset:-32;}}
.leyenda{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-size:12.5px;color:var(--gris-txt);}
.leyenda span{display:flex;align-items:center;gap:8px;}
.leyenda i{width:22px;height:0;border-top:3px dashed var(--amarillo);}
.leyenda i.red{border-top-color:#9FC3E8;}

.pasos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px;counter-reset:paso;}
.pasos li{display:grid;grid-template-columns:42px 1fr;gap:16px;align-items:start;}
.pasos li::before{
  counter-increment:paso;content:counter(paso);
  width:42px;height:42px;border-radius:50%;border:1px solid var(--amarillo);color:var(--amarillo);
  display:grid;place-items:center;font-family:var(--display);font-size:17px;
}
.pasos h3{margin-bottom:4px;}
.pasos p{font-size:15px;color:var(--gris-txt);margin:0;}

/* ---------- a tener en cuenta ---------- */
.tener{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);}
@media (max-width:860px){.tener{grid-template-columns:1fr;}}
.nota{border-left:4px solid var(--amarillo);background:var(--negro-carta);border-radius:0 12px 12px 0;padding:22px 24px;}
.nota h3{margin-bottom:8px;}
.nota p{font-size:14.5px;color:var(--gris-txt);margin:0;}
.nota a{color:var(--amarillo);}

/* ---------- equipos: fondo claro para que luzcan las fotos ---------- */
.equipos{background:var(--claro);color:#201F1F;}
.equipos h2,.equipos h3{color:#201F1F;}
.equipos .eyebrow{color:#B07A06;}
.equipos .lead{color:var(--claro-txt);}
.grupo{margin-top:clamp(28px,3.4vw,40px);}
.grupo > h3{
  font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#2B2A28;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid #DEDBD4;
}
.equipos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,18px);}
@media (max-width:980px){.equipos-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:700px){.equipos-grid{grid-template-columns:repeat(2,1fr);}}
.equipo{
  background:#FFFFFF;border:1px solid #E6E3DC;border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s;
}
.equipo:hover{transform:translateY(-4px);box-shadow:0 18px 36px -22px rgba(0,0,0,.35);}
.equipo .foto{height:clamp(130px,13vw,170px);padding:16px;}
.equipo .foto img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;}
.equipo .txt{padding:12px 16px 16px;border-top:1px solid #EFECE6;}
.equipo b{display:block;font-family:var(--display);font-weight:600;font-size:14.5px;color:#201F1F;line-height:1.3;}
.equipo span{display:block;font-size:13px;color:var(--claro-txt);line-height:1.45;margin-top:3px;}
.equipo .rango{display:inline-block;margin-top:8px;font-size:11.5px;font-weight:500;letter-spacing:.04em;color:#201F1F;background:var(--amarillo);border-radius:99px;padding:3px 10px;}

/* ---------- paneles y estructuras: foto clara + para que techo + explicacion ---------- */
.estructuras{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px);}
@media (max-width:900px){.estructuras{grid-template-columns:1fr;}}
.estructura{
  display:grid;grid-template-columns:minmax(150px,38%) 1fr;
  background:var(--negro-carta);border:1px solid var(--gris-linea);border-radius:12px;overflow:hidden;
  transition:border-color .3s,transform .3s;
}
.estructura:hover{border-color:#55524E;transform:translateY(-3px);}
.estructura .foto{min-height:190px;background:#2A2928 var(--img) center/cover no-repeat;}
.estructura.destacada{grid-column:1 / -1;grid-template-columns:minmax(150px,45%) 1fr;}
.estructura.destacada .foto{min-height:240px;}
.estructura .txt{padding:20px 22px 22px;}
.estructura h3{margin-bottom:4px;}
.estructura .para{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--amarillo);margin:0 0 10px;}
.estructura p:last-child{font-size:14.5px;color:var(--gris-txt);margin:0;}
@media (max-width:520px){.estructura,.estructura.destacada{grid-template-columns:1fr;}.estructura .foto{min-height:180px;}}

/* ---------- asi quedan instalados (fotos de tableros e inversores) ---------- */
.instalados{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(12px,1.6vw,18px);}
.instalado{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--gris-linea);}
.instalado .foto{aspect-ratio:3/4;background:#2A2928 var(--img) center/cover no-repeat;transition:transform .5s;}
.instalado:hover .foto{transform:scale(1.04);}
@media (max-width:520px){.instalados{grid-template-columns:1fr 1fr;}}

/* ---------- obras de este tipo ---------- */
.obras{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);}
@media (max-width:860px){.obras{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.obras{grid-template-columns:1fr;}}
.obra{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--gris-linea);background:var(--negro-carta);}
.obra .foto{aspect-ratio:4/3;background:#2A2928 var(--img) center/cover no-repeat;transition:transform .5s;}
.obra:hover .foto{transform:scale(1.04);}
.obra figcaption{padding:14px 18px 16px;}
.obra b{display:block;color:var(--blanco);font-weight:500;}
.obra span{font-size:13.5px;color:var(--gris-txt);}
.ver-mas{margin-top:26px;}

/* ---------- preguntas ---------- */
.faq{max-width:820px;}
.faq details{border-bottom:1px solid var(--gris-linea);}
.faq summary{
  list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-family:var(--display);font-size:clamp(16px,1.5vw,18px);color:var(--blanco);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:4px;top:16px;font-size:24px;color:var(--amarillo);transition:transform .25s;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq details p{color:var(--gris-txt);font-size:15px;margin:0 0 20px;max-width:68ch;}

/* ---------- otros sistemas ---------- */
.otros{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,18px);}
@media (max-width:760px){.otros{grid-template-columns:1fr;}}
.otro{
  display:block;text-decoration:none;color:inherit;
  background:var(--negro-carta);border:1px solid var(--gris-linea);border-radius:12px;padding:20px 22px;
  transition:border-color .25s,transform .25s;
}
.otro:hover{border-color:var(--amarillo);transform:translateY(-3px);color:inherit;}
.otro b{display:block;font-family:var(--display);font-weight:500;color:var(--blanco);font-size:17px;margin-bottom:4px;}
.otro span{font-size:14px;color:var(--gris-txt);}
.otro em{font-style:normal;color:var(--amarillo);font-size:13.5px;display:inline-block;margin-top:10px;}

/* ---------- formulario (igual al de la landing) ---------- */
.contacto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start;}
@media (max-width:900px){.contacto{grid-template-columns:1fr;}}
.form-card{
  background:var(--negro-carta);border:1px solid var(--gris-linea);border-top:3px solid var(--amarillo);
  border-radius:3px;padding:clamp(22px,2.8vw,30px);display:flex;flex-direction:column;gap:16px;
}
.form-cabeza{display:flex;flex-direction:column;gap:5px;margin-bottom:2px;}
.form-cabeza h3{font-size:20px;}
.form-cabeza p{font-size:13.5px;color:var(--gris-txt);margin:0;}
.campo{display:flex;flex-direction:column;gap:6px;}
.campo label{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris-txt);}
.campo input,.campo select{
  font-family:var(--cuerpo);font-size:15px;font-weight:300;padding:12px 13px;
  background:var(--negro);border:1px solid var(--gris-linea);border-radius:2px;color:var(--blanco);width:100%;
}
.campo input::placeholder{color:#6B6965;}
.campo input:focus,.campo select:focus{border-color:var(--amarillo);outline:none;}
.dosgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:520px){.dosgrid{grid-template-columns:1fr;}}
.nota-legal{font-size:11.5px;color:var(--gris-txt);line-height:1.5;margin:0;}
.nota-legal a{color:var(--amarillo);text-underline-offset:2px;}
.casilla{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--gris-txt);cursor:pointer;}
.casilla input{flex:0 0 18px;width:18px;height:18px;margin:1px 0 0;accent-color:var(--amarillo);cursor:pointer;}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-error{margin:0;font-size:13.5px;line-height:1.45;color:#FFB4A8;background:rgba(255,120,100,.1);border:1px solid rgba(255,120,100,.35);border-radius:4px;padding:10px 12px;}
.form-error a{color:#FFFFFF;}
button[disabled]{opacity:.7;cursor:wait;}
.form-listo{display:none;flex-direction:column;gap:12px;padding-block:10px;}
.form-listo.activo{display:flex;}
.form-listo .tilde{width:42px;height:42px;border:1px solid var(--amarillo);border-radius:50%;display:grid;place-items:center;color:var(--amarillo);font-size:19px;}
.contacto-txt ul{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;}
.contacto-txt li{display:flex;gap:12px;align-items:flex-start;font-size:15px;}
.contacto-txt li::before{content:"";flex:0 0 8px;height:8px;margin-top:9px;border-radius:50%;background:var(--amarillo);}

/* ---------- pie de pagina (igual al de la landing) ---------- */
footer.pie{background:var(--negro-hondo);border-top:1px solid var(--gris-linea);padding:clamp(44px,5vw,64px) clamp(20px,5vw,56px) 28px;}
.pie-in{max-width:1120px;margin:0 auto;}
.pie-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(26px,4vw,52px);padding-bottom:34px;border-bottom:1px solid var(--gris-linea);}
@media (max-width:900px){.pie-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.pie-grid{grid-template-columns:1fr;}}
.pie-col{display:flex;flex-direction:column;gap:10px;}
.pie-col h4{font-family:var(--display);font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#7A7873;margin:0 0 4px;}
.pie-col a,.pie-col p{font-size:14px;color:var(--gris-txt);text-decoration:none;margin:0;}
.pie-col a:hover{color:var(--amarillo);}
.pie-marca img{height:50px;width:auto;margin-bottom:6px;}
.pie-marca p{max-width:32ch;line-height:1.55;}
.pie-redes{display:flex;gap:10px;margin-top:8px;}
.pie-redes a{width:38px;height:38px;border:1px solid var(--gris-linea);border-radius:50%;display:grid;place-items:center;color:var(--gris-txt);transition:border-color .2s,color .2s;}
.pie-redes a:hover{border-color:var(--amarillo);color:var(--amarillo);}
.pie-redes svg{width:18px;height:18px;}
.pie-legal{padding-top:20px;font-size:12.5px;color:#7A7873;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.pie-legal a{color:#7A7873;text-decoration:none;}
.pie-legal a:hover{color:var(--amarillo);}

/* ============================================================
   SECCION CLARA (fondo crema): "Como funciona" en todas las paginas
   ============================================================ */
.claro-sec{background:var(--claro);color:#201F1F;}
.claro-sec h2,.claro-sec h3{color:#201F1F;}
.claro-sec h2 em{color:#B07A06;}
.claro-sec .eyebrow{color:#B07A06;}
.claro-sec .lead{color:var(--claro-txt);}
.claro-sec .diagrama{background:#FFFFFF;border-color:#E6E3DC;box-shadow:0 24px 50px -34px rgba(0,0,0,.35);}
.claro-sec .diagrama .caja{fill:#F6F5F2;stroke:#D6D2CA;}
.claro-sec .diagrama .ico{stroke:#C98F00;}
.claro-sec .diagrama .ico-g{stroke:#5C5A55;}
.claro-sec .diagrama text{fill:#201F1F;}
.claro-sec .diagrama text.chico{fill:#7A7873;}
.claro-sec .diagrama .via{stroke:#ECE9E3;}
.claro-sec .diagrama .flujo{stroke:#E5A800;}
.claro-sec .diagrama .flujo.red{stroke:#3D86D6;}
.claro-sec .diagrama .flujo.bat{stroke:#2E9E6A;}
.claro-sec .leyenda{color:var(--claro-txt);}
.claro-sec .leyenda i{border-top-color:#E5A800;}
.claro-sec .leyenda i.red{border-top-color:#3D86D6;}
.claro-sec .leyenda i.bat{border-top-color:#2E9E6A;}
.claro-sec .pasos li::before{border-color:#E5A800;color:#B07A06;background:#FFFFFF;}
.claro-sec .pasos p{color:var(--claro-txt);}
/* flujo de baterias (verde) tambien para fondos oscuros */
.diagrama .flujo.bat{stroke:#5BC79A;}
.leyenda i.bat{border-top-color:#5BC79A;}
/* camino opcional (ej. paneles que se pueden sumar en backup) */
.diagrama .opcional{opacity:.55;}
.diagrama .caja.opcional{stroke-dasharray:5 5;}

/* portada con foto al costado (cuando la foto es vertical, ej. Backup) */
.hero.split{background:var(--negro-hondo);min-height:0;align-items:center;padding-block:clamp(48px,7vw,96px);}
.hero.split .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,72px);align-items:center;}
.hero.split .hero-foto{
  aspect-ratio:4/5;max-height:620px;width:100%;border-radius:14px;border:1px solid var(--gris-linea);
  background:#2A2928 var(--fondo) center/cover no-repeat;box-shadow:0 30px 60px -28px rgba(0,0,0,.75);
}
@media (max-width:860px){.hero.split .wrap{grid-template-columns:1fr;}.hero.split .hero-foto{aspect-ratio:4/3;}}

/* ============================================================
   RESUMEN DE ESTRUCTURAS en cada pagina de sistema (lleva a estructuras.html)
   ============================================================ */
.est-resumen{display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(8px,1vw,12px);}
@media (max-width:1000px){.est-resumen{grid-template-columns:repeat(4,1fr);}}
@media (max-width:560px){.est-resumen{grid-template-columns:repeat(2,1fr);}}
.est-mini{
  position:relative;display:block;border-radius:10px;overflow:hidden;aspect-ratio:3/4;
  border:1px solid var(--gris-linea);text-decoration:none;
}
.est-mini .foto{position:absolute;inset:0;background:#2A2928 var(--img) center/cover no-repeat;transition:transform .5s;}
.est-mini::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(23,22,22,.92) 0%,rgba(23,22,22,.1) 60%);}
.est-mini b{position:absolute;left:12px;right:10px;bottom:10px;z-index:1;color:var(--blanco);font-family:var(--display);font-weight:500;font-size:14px;line-height:1.25;}
.est-mini:hover .foto{transform:scale(1.06);}

/* ============================================================
   PAGINA DE ESTRUCTURAS
   ============================================================ */
.indice-est{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;}
.indice-est a{font-size:13.5px;color:var(--blanco);text-decoration:none;border:1px solid var(--gris-linea);border-radius:99px;padding:7px 14px;background:rgba(23,22,22,.5);}
.indice-est a:hover{border-color:var(--amarillo);color:var(--amarillo);}
.tipo-est{scroll-margin-top:90px;}
.tipo-cab{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);align-items:start;margin-bottom:clamp(22px,3vw,34px);}
@media (max-width:860px){.tipo-cab{grid-template-columns:1fr;}}
.tipo-cab .para{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--amarillo);margin:10px 0 0;}
.tipo-cab ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.tipo-cab li{display:flex;gap:12px;font-size:15px;color:var(--texto);}
.tipo-cab li::before{content:"";flex:0 0 8px;height:8px;margin-top:9px;border-radius:50%;background:var(--amarillo);}
.galeria-est{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(10px,1.4vw,16px);}
.galeria-est figure{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--gris-linea);}
.galeria-est .foto{aspect-ratio:4/3;background:#2A2928 var(--img) center/cover no-repeat;transition:transform .5s;}
.galeria-est figure:hover .foto{transform:scale(1.04);}
.ficha{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:14px;color:var(--amarillo);text-decoration:none;border:1px solid var(--amarillo);border-radius:2px;padding:9px 14px;}
.ficha:hover{background:var(--amarillo);color:var(--negro);}
.ficha svg{width:16px;height:16px;}
.equipo .ficha{margin:10px 0 0;padding:6px 10px;font-size:12.5px;color:#201F1F;border-color:#D6D2CA;}
.equipo .ficha:hover{background:var(--amarillo);border-color:var(--amarillo);}

/* ============================================================
   PORTADA CON DIAGRAMA "3D" (referencia de la usuaria: tarjetas blancas
   flotando sobre azulejos claros, unidas por cables negros por donde corre
   la energia). Texto a la izquierda, diagrama a la derecha.
   Las posiciones de cada tarjeta van en el HTML (--x, --y en %), y los
   cables en un SVG con el mismo viewBox que la proporcion del diagrama.
   ============================================================ */
.hero.con-flujo{
  align-items:center;min-height:clamp(560px,86vh,880px);padding-block:clamp(48px,7vw,96px);
  background:
    linear-gradient(90deg,rgba(23,22,22,.92) 0%,rgba(23,22,22,.7) 42%,rgba(23,22,22,.35) 100%),
    var(--fondo) center/cover no-repeat;
  background-color:var(--negro-hondo);
}
.hero.con-flujo .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,64px);align-items:center;}
@media (max-width:980px){.hero.con-flujo .wrap{grid-template-columns:1fr;}}
@media (max-width:640px){.hero.con-flujo{background:linear-gradient(rgba(23,22,22,.9),rgba(23,22,22,.9)),var(--fondo) center/cover no-repeat;}}

/* Estilo LIMPIO Y OSCURO, como el diagrama original del sitio (la usuaria
   prefirio este al de azulejos claros; de la referencia quedaron solo las
   tarjetas que flotan y la energia corriendo por los cables). */
.flujo3d{
  position:relative;container-type:inline-size;width:100%;
  aspect-ratio:var(--ar,1000/640);border-radius:14px;overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 40%,rgba(251,213,79,.06),rgba(251,213,79,0) 60%),
    var(--negro-carta);
  border:1px solid var(--gris-linea);
  box-shadow:0 30px 70px -36px rgba(0,0,0,.9);
}
.flujo3d .cables{position:absolute;inset:0;width:100%;height:100%;}
.flujo3d .cable{fill:none;stroke:#3A3938;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;}
/* la energia que corre por el cable: un tramo de color que se desplaza, con halo */
.flujo3d .chispa{fill:none;stroke:#FBD54F;stroke-width:6;stroke-linecap:round;stroke-dasharray:44 96;animation:chispa 1.4s linear infinite;}
.flujo3d .halo{fill:none;stroke:#FBD54F;stroke-width:16;stroke-linecap:round;stroke-dasharray:44 96;opacity:.22;animation:chispa 1.4s linear infinite;}
.flujo3d .red{stroke:#9FC3E8;}
.flujo3d .bat{stroke:#5BC79A;}
.flujo3d .lento{animation-duration:2s;}
@keyframes chispa{to{stroke-dashoffset:-140;}}

.flujo3d .nodo{
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  width:var(--t,21.5cqw);aspect-ratio:1;
  background:#201F1F;border:1px solid #4A4845;border-radius:1.8cqw;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1cqw;padding:1.6cqw;
  box-shadow:0 2.4cqw 3.4cqw -1.2cqw rgba(0,0,0,.8);
  animation:flotar 6s ease-in-out infinite;animation-delay:var(--d,0s);
}
@keyframes flotar{0%,100%{transform:translate(-50%,-50%);}50%{transform:translate(-50%,calc(-50% - .5cqw));}}
.flujo3d .nodo img{height:66%;width:auto;max-width:92%;object-fit:contain;filter:drop-shadow(0 .7cqw .8cqw rgba(0,0,0,.45));}
/* foto real (no recorte) dentro de una tarjeta, ej. la casa rural de off grid */
.flujo3d .nodo img.foto{width:100%;height:auto;max-width:none;aspect-ratio:4/3;object-fit:cover;border-radius:1.2cqw;filter:none;}
.flujo3d .nodo svg{height:48%;width:auto;fill:none;stroke:var(--amarillo);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.flujo3d .nodo b{
  font-family:var(--display);font-weight:400;font-size:max(10px,1.95cqw);line-height:1.15;
  color:#DEDCD7;text-align:center;
}
@media (max-width:640px){.flujo3d .nodo{--t:23cqw;}}
@media (prefers-reduced-motion:reduce){.flujo3d .nodo{animation:none;}}
.flujo-leyenda{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-size:12.5px;color:var(--gris-txt);}
.flujo-leyenda span{display:flex;align-items:center;gap:8px;}
.flujo-leyenda i{width:22px;height:0;border-top:3px dashed #FBD54F;}
.flujo-leyenda i.red{border-top-color:#9FC3E8;}
.flujo-leyenda i.bat{border-top-color:#5BC79A;}

/* atributos cortos en la portada (ej. backup: automatico, silencioso...) */
.atributos{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.atributos li{font-size:13px;color:var(--blanco);border:1px solid rgba(251,213,79,.45);background:rgba(23,22,22,.55);border-radius:99px;padding:5px 12px;}

/* "Como funciona" sin diagrama (ya esta en la portada): pasos en fila */
.pasos.fila{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,32px);}
.pasos.fila li{grid-template-columns:1fr;gap:14px;}
@media (max-width:980px){.pasos.fila{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.pasos.fila{grid-template-columns:1fr;}}

/* ============================================================
   BLOG: listado (blog/) y notas (/<slug>/)
   ============================================================ */
.nota-cab{padding-block:clamp(48px,7vw,88px) clamp(24px,3vw,36px);}
.nota-cab .eyebrow a{color:inherit;text-decoration:none;}
.nota-cab .eyebrow a:hover{color:var(--blanco);}
.nota-cab h1{font-size:clamp(30px,4.4vw,52px);max-width:22ch;}
.nota-cuerpo{max-width:860px;padding-bottom:clamp(56px,8vw,96px);}
.nota-foto{width:100%;max-height:520px;object-fit:cover;border-radius:14px;border:1px solid var(--gris-linea);margin-bottom:clamp(28px,4vw,44px);}
/* texto de la nota: lectura comoda */
.articulo{font-size:clamp(16px,1.25vw,18px);line-height:1.8;color:var(--texto);max-width:70ch;}
.articulo p{margin:0 0 1.15em;}
.articulo h2{font-size:clamp(23px,2.4vw,30px);margin:1.8em 0 .6em;}
.articulo h3{font-size:clamp(19px,1.8vw,22px);margin:1.6em 0 .5em;color:var(--blanco);}
.articulo h4{font-size:17px;margin:1.4em 0 .4em;color:var(--blanco);font-weight:500;}
.articulo strong{color:var(--blanco);font-weight:500;}
.articulo ul,.articulo ol{margin:0 0 1.2em;padding-left:1.3em;}
.articulo li{margin-bottom:.45em;}
.articulo li::marker{color:var(--amarillo);}
.articulo hr{border:0;border-top:1px solid var(--gris-linea);margin:2.2em 0;}
.articulo img{height:auto;border-radius:10px;margin:1.4em 0;}
.articulo a{color:var(--amarillo);}
.cta-nota{
  margin-top:clamp(40px,5vw,60px);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:var(--negro-carta);border:1px solid var(--gris-linea);border-left:4px solid var(--amarillo);border-radius:0 14px 14px 0;
  padding:clamp(22px,3vw,32px);
}
.cta-nota h2{font-size:clamp(21px,2.2vw,27px);margin-bottom:8px;}
.cta-nota p{margin:0;color:var(--gris-txt);max-width:52ch;font-size:15px;}
.notas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px);}
@media (max-width:900px){.notas-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.notas-grid{grid-template-columns:1fr;}}
.nota-card{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--negro-carta);border:1px solid var(--gris-linea);border-radius:12px;overflow:hidden;
  transition:transform .3s,border-color .3s;
}
.nota-card:hover{transform:translateY(-4px);border-color:#55524E;color:inherit;}
.nota-card .foto{aspect-ratio:16/9;background:#2A2928 var(--img) center/cover no-repeat;}
.nota-card .txt{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px;flex:1;}
.nota-card small{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-txt);}
.nota-card b{font-family:var(--display);font-weight:500;font-size:17px;line-height:1.3;color:var(--blanco);}
.nota-card .txt > span{font-size:14px;color:var(--gris-txt);line-height:1.55;}
.nota-card em{font-style:normal;color:var(--amarillo);font-size:13.5px;margin-top:auto;padding-top:6px;}

/* ---------- pantallas grandes ---------- */
@media (min-width:1440px){
  :root{--max:1280px;}
  body{font-size:17px;}
  .lead{font-size:20px;}
}
@media (min-width:1800px){
  :root{--max:1500px;}
  body{font-size:18px;}
  h1{font-size:72px;}
  h2{font-size:48px;}
  .lead{font-size:22px;}
}