/* GenieAutoDesigner — pieles (skins) de la web.
 *
 * La skin "clasica" NO cambia nada (todo lo de aquí está bajo
 * html[data-skin="obra"] o [data-skin="dron"]). Las dos skins 3D ponen un
 * lienzo Three.js de fondo fijo y visten el contenido con paneles de cristal
 * para que el texto siga legible y la estructura intacta. Si no hay WebGL o el
 * equipo es débil (data-3d="no"), el lienzo cae a un degradado de prados.
 */

/* --- botón del logo del genio (arriba a la izquierda); cambia la skin --- */
#mascara-skin{
  position:fixed;top:12px;left:12px;z-index:1200;
  width:54px;height:54px;padding:0;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.55);color:#2c180f;
  border:1px solid rgba(44,24,15,.10);cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 4px 18px rgba(44,24,15,.12);
  transition:transform .18s ease,background .2s,box-shadow .2s;
}
#mascara-skin img{width:40px;height:auto;display:block;pointer-events:none;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.18));transition:transform .25s ease}
#mascara-skin:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(11,90,160,.22)}
#mascara-skin:hover img{transform:scale(1.08)}
#mascara-skin:active{transform:scale(.94)}
#mascara-skin:disabled{cursor:progress;opacity:.7}
html[data-skin="obra"] #mascara-skin{background:rgba(237,243,238,.82)}
html[data-skin="dron"] #mascara-skin{background:rgba(243,243,238,.86)}

#skin-aviso{
  position:fixed;top:20px;left:70px;z-index:1200;
  font:600 12px/1 "Inter Tight",system-ui,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:#2c180f;
  background:rgba(247,241,234,.9);padding:8px 12px;border-radius:999px;
  border:1px solid rgba(44,24,15,.16);
  opacity:0;transform:translateX(-6px);pointer-events:none;
  transition:opacity .3s,transform .3s;
}
#skin-aviso.visible{opacity:1;transform:none}

/* --- lienzo 3D de fondo --- */
#licito-lienzo-3d{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  display:none;
}
html[data-skin="obra"] #licito-lienzo-3d,
html[data-skin="dron"] #licito-lienzo-3d{display:block}
#licito-lienzo-3d canvas{width:100%!important;height:100%!important;display:block}

/* fallback sin WebGL: prados y colinas por CSS */
html[data-3d="no"] #licito-lienzo-3d{
  background:
    radial-gradient(120% 80% at 50% 120%, #6ea653 0%, #8bbf6a 40%, transparent 70%),
    linear-gradient(#dfeede 0%, #cfe6cf 55%, #a7cf8f 100%);
}

/* ================= reskin del contenido (obra + dron) ================= */
html[data-skin="obra"],
html[data-skin="dron"]{background:transparent!important}
html[data-skin="obra"] body,
html[data-skin="dron"] body{background:transparent!important}
/* la textura de grano se atenúa para que respire el 3D */
html[data-skin="obra"] body.grano:after,
html[data-skin="dron"] body.grano:after{opacity:.15}

/* cabecera de cristal */
html[data-skin="obra"] .cab,
html[data-skin="dron"] .cab{
  background:rgba(247,241,234,.55);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(44,24,15,.10);
}

/* cada sección, panel de cristal legible dejando ver el 3D entre ellas */
html[data-skin="obra"] main>section,
html[data-skin="dron"] main>section{
  background:rgba(247,241,234,.72)!important;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:#2c180f!important;
  border-radius:22px;
  margin:26px auto;max-width:1180px;
  border:1px solid rgba(44,24,15,.10);
  box-shadow:0 10px 40px rgba(44,24,15,.10);
}
/* el héroe deja ver el 3D casi entero */
html[data-skin="obra"] main>section.heroe,
html[data-skin="dron"] main>section.heroe{
  background:rgba(247,241,234,.28)!important;border:none;box-shadow:none;
}
/* las secciones oscuras pasan a texto oscuro para seguir legibles */
html[data-skin="obra"] .oscuro,html[data-skin="dron"] .oscuro,
html[data-skin="obra"] .oscuro *,html[data-skin="dron"] .oscuro *{
  color:#2c180f!important;
}
html[data-skin="obra"] .oscuro,html[data-skin="dron"] .oscuro{
  background:transparent!important;
}

/* app (SPA): las vistas y tarjetas, también de cristal */
html[data-skin="obra"] .vista,html[data-skin="dron"] .vista{color:#2c180f}
html[data-skin="obra"] .tarjeta,html[data-skin="dron"] .tarjeta{
  background:rgba(247,241,234,.82)!important;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(44,24,15,.10);
}
html[data-skin="obra"] body.con-fondo,html[data-skin="dron"] body.con-fondo{
  background:transparent!important;
}

/* HUD monoespaciado en las esquinas (estética "plano de obra") */
html[data-skin="obra"] body:before{
  content:"GenieAutoDesigner // obra civil";
  position:fixed;bottom:14px;left:16px;z-index:1100;
  font:600 11px/1.4 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(44,24,15,.6);
  pointer-events:none;
}
html[data-skin="dron"] body:before{
  content:"GenieAutoDesigner // vista de dron";
  position:fixed;bottom:14px;left:16px;z-index:1100;
  font:600 11px/1.4 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(44,24,15,.6);
  pointer-events:none;
}
html[data-skin="obra"] body:after,
html[data-skin="dron"] body:after{
  content:"////// obra civil";
  position:fixed;bottom:14px;right:16px;z-index:1100;
  font:600 11px/1.4 ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(44,24,15,.5);
  pointer-events:none;
}
html[data-skin="dron"] body:after{content:"////// vista de dron"}

/* respeta a quien pide menos movimiento */
@media (prefers-reduced-motion:reduce){
  #mascara-skin{transition:none}
}
/* en móvil el botón un poco más pequeño y sin solapar el menú */
@media (max-width:560px){
  #mascara-skin{width:46px;height:46px;top:10px;left:10px;border-radius:13px}
  #mascara-skin img{width:34px}
  #skin-aviso{top:15px;left:58px;font-size:11px;padding:6px 10px}
}
/* Ciclo 2026-09-16: paleta completa, controles y estructura conservada. */
html[data-skin="obra"]{--tinta:#172d35;--texto:#263c43;--suave:#52666d;--tenue:#61747a;--linea:#bac9ca;--fondo:#dde7e3;--cafe:#16323c;--crema:#edf3ee;--acento:#aa451d;--acento-2:#833112;--acento-f:#f3e4d5}
html[data-skin="dron"]{--tinta:#133b3b;--texto:#254a48;--suave:#4e6c68;--tenue:#617b75;--linea:#afc9bf;--fondo:#dbece5;--cafe:#143d3c;--crema:#eff7ef;--acento:#23695e;--acento-2:#164f46;--acento-f:#d4e9df}
html:is([data-skin="obra"],[data-skin="dron"]) body{color:var(--texto);isolation:isolate}
html:is([data-skin="obra"],[data-skin="dron"]) .fondo-vivo{display:none!important}
html:is([data-skin="obra"],[data-skin="dron"]) body:after{content:none!important;animation:none!important}
html:is([data-skin="obra"],[data-skin="dron"]) :is(.cab,.tarjeta,.menu,.modal,.pie){background:var(--crema)!important;color:var(--texto)!important;border-color:var(--linea)!important;box-shadow:0 14px 45px #143b3912}
html:is([data-skin="obra"],[data-skin="dron"]) :is(.logo,.nav a,h1,h2,h3){color:var(--tinta)}
html:is([data-skin="obra"],[data-skin="dron"]) :is(input,select,textarea,.segmentado button,.lista-carteras button){background:var(--crema)!important;color:var(--tinta)!important;border-color:var(--linea)!important}
html:is([data-skin="obra"],[data-skin="dron"]) .btn{background:var(--acento);color:#fff;border-color:var(--acento);border-radius:12px}
html:is([data-skin="obra"],[data-skin="dron"]) .btn:is(.sec,.fantasma){background:var(--crema);color:var(--tinta);border-color:var(--linea)}
html:is([data-skin="obra"],[data-skin="dron"]) :is(.aviso,.pastilla){background:var(--acento-f);color:var(--tinta);border-color:var(--linea)}
html:is([data-skin="obra"],[data-skin="dron"]) main>section{background:var(--crema)!important;color:var(--texto)!important}
html:is([data-skin="obra"],[data-skin="dron"]) main>section.heroe{background:linear-gradient(90deg,var(--crema),transparent)!important;min-height:85vh}
html:is([data-skin="obra"],[data-skin="dron"]) .heroe :is(.marca,.cinta,.lado){opacity:.08;pointer-events:none}
html:is([data-skin="obra"],[data-skin="dron"]) .oscuro *{color:var(--tinta)!important}
html:is([data-skin="obra"],[data-skin="dron"]) .oscuro .btn{color:#fff!important}
html:is([data-skin="obra"],[data-skin="dron"]) :focus-visible{outline:3px solid var(--acento);outline-offset:3px}
@media(max-width:560px){
html:is([data-skin="obra"],[data-skin="dron"]) main>section{margin:16px 10px;border-radius:16px}
html:is([data-skin="obra"],[data-skin="dron"]) .cab{padding-left:60px}
html:is([data-skin="obra"],[data-skin="dron"]) main>section.heroe{background:linear-gradient(0deg,var(--crema),transparent)!important}
html:is([data-skin="obra"],[data-skin="dron"]) body:before{font-size:9px;bottom:8px}
}
@media(prefers-reduced-motion:reduce){html:is([data-skin="obra"],[data-skin="dron"]) *{animation:none!important;scroll-behavior:auto!important}}

html:is([data-skin="obra"],[data-skin="dron"]) .legal-skin{background:var(--crema);margin:28px auto;border:1px solid var(--linea);border-radius:20px;box-shadow:0 20px 70px #143b3920}
/* Contraste y encuadre verificados contra la cabecera propia de portada. */
html:is([data-skin="obra"],[data-skin="dron"]) .cab.portada :is(.logo,.nav a,.btn.fantasma){color:var(--tinta)!important}
html:is([data-skin="obra"],[data-skin="dron"]) main>section.heroe{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:0;max-width:none;margin:0}
html:is([data-skin="obra"],[data-skin="dron"]) .heroe .marca{opacity:1;left:4%;top:34%;width:36%;transform:none!important}
html:is([data-skin="obra"],[data-skin="dron"]) .heroe .marca g{filter:none}
html:is([data-skin="obra"],[data-skin="dron"]) .heroe .marca text{fill:var(--tinta);stroke:none;letter-spacing:-14px}
html:is([data-skin="obra"],[data-skin="dron"]) .heroe :is(.cinta,.lado){display:none}
/* La galería fija contiene documentos altos: el relleno debe formar parte del
   alto visible para que el lienzo de la skin no corte la lámina inferior. */
html:is([data-skin="obra"],[data-skin="dron"]) .galeria .fijo{padding-top:max(76px,env(safe-area-inset-top));padding-bottom:max(28px,env(safe-area-inset-bottom))}
html:is([data-skin="obra"],[data-skin="dron"]) main>section.galeria{max-width:none!important;margin:0!important;border:0;border-radius:0;box-shadow:none;background:rgba(237,243,238,.78)!important}
@media(max-width:560px){
html:is([data-skin="obra"],[data-skin="dron"]) .cab{padding-left:0}
html:is([data-skin="obra"],[data-skin="dron"]) .cab .envoltorio{padding:8px 10px 8px 58px;gap:8px;min-height:92px;height:auto;flex-wrap:wrap}
html:is([data-skin="obra"],[data-skin="dron"]) .cab .dcha{width:100%;margin-left:0;gap:7px;justify-content:flex-end}
html:is([data-skin="obra"],[data-skin="dron"]) .cab .btn{padding:8px 10px;font-size:12px}
html:is([data-skin="obra"],[data-skin="dron"]) .heroe .marca{left:10%;top:19%;width:80%}
}
/* Paleta integral de ingeniería civil: prado, pizarra, hormigón y cobre. */
html[data-skin="obra"]{
 --naranja:var(--acento);--hueso:#edf3ee;--gris-cafe:#52666d;
 --blanco:#f7faf6;--lila:#b7c9cf;--limon:#d5dfb5;
 --verde:#356443;--verde-f:#e2eddf;--ambar:#88521c;--ambar-f:#f1e7d3;
 --rojo:#a43830;--rojo-f:#f5e4df;
}
html[data-skin="obra"] :is(.papel,.hoja,.paso,.plan,.pegatina,.btn-hueso){background:var(--crema);color:var(--tinta);border-color:var(--linea)}
html[data-skin="obra"] :is(.papel.lila,.pieza[data-i="0"] .media){background:var(--lila)!important}
html[data-skin="obra"] :is(.papel.limon,.pieza[data-i="1"] .media){background:var(--limon)!important}
html[data-skin="obra"] :is(.papel.kraft,.pieza[data-i="2"] .media){background:#c5c9bb!important}
html[data-skin="obra"] :is(.papel.naranja,.pieza[data-i="3"] .media){background:#c58e6d!important}
html[data-skin="obra"] .pieza[data-i="4"] .media{background:#d9e2dc!important}
html[data-skin="obra"] .pieza[data-i="5"] .media{background:#35545e!important}
html[data-skin="obra"] :is(.plan.destacado,.caja-ondas){background:#d9e2dc;color:var(--texto);border-color:var(--linea)}
html[data-skin="obra"] .plan.destacado :is(h3,.precio){color:var(--tinta)}
html[data-skin="obra"] .caja-ondas:before,html[data-skin="obra"] .caja-ondas:after{background-image:radial-gradient(circle at 10px 0,#d9e2dc 9px,transparent 10px)}
html[data-skin="obra"] :is(.tira,.tira.clara,.prueba small,.prueba .aviso-p,.fila-serv p,.fila-serv .num,.pie-legal,.pie-legal a,.pie-fila .derecha){color:var(--suave)!important}
html[data-skin="obra"] .revela span{color:#9aaba7}
html[data-skin="obra"] .revela span.si{color:var(--tinta)}
html[data-skin="obra"] :is(.tira hr,.tabla td,.pieza,.pie-fila){border-color:var(--linea)}
html[data-skin="obra"] .pieza .rotulo{color:var(--suave)}
html[data-skin="obra"] .pieza.on .rotulo{color:var(--tinta)}
html[data-skin="obra"] :is(.papel,.hoja) b{color:var(--acento)!important}
html[data-skin="obra"] :is(.papel,.hoja) i{background:var(--linea)}
html[data-skin="obra"] .hoja .marca-f{background:var(--limon)}
html[data-skin="obra"] :is(.estrella path:first-child,.sobre-dib circle){fill:var(--acento)}
html[data-skin="obra"] .sobre-dib rect{fill:#c5c9bb}
html[data-skin="obra"] .sobre-dib path{stroke:var(--suave)}
html[data-skin="obra"] .sobre-dib text{fill:var(--tinta)}
html[data-skin="obra"] .sobre-dib circle+text{fill:var(--crema)}
html[data-skin="obra"] .raya path{stroke:var(--linea)}
html[data-skin="obra"] :is(#mascara-skin,#skin-aviso){background:var(--crema);color:var(--tinta);border-color:var(--linea)}
html[data-skin="obra"] body:before{color:var(--suave)}
html[data-skin="obra"] :is(.nav a:hover,.nav a.activo,.segmentado){background:#d9e2dc}
html[data-skin="obra"] :is(input,select,textarea):focus{box-shadow:0 0 0 3px #aa451d26}
html[data-skin="obra"] .oscuro :is(.btn.sec,.btn.fantasma){color:var(--tinta)!important}
html[data-skin="obra"] .oscuro :is(.brocha,.titular em,.fila-serv h3 u,.letras span.cerca,.apoya-movil){color:var(--acento)!important}
html[data-skin="obra"] .btn:hover{background:var(--acento-2)}
html[data-skin="obra"] .btn:is(.sec,.fantasma):hover{background:var(--linea)}
html[data-skin="obra"] .btn.peligro{background:var(--rojo-f);color:var(--rojo);border-color:var(--rojo)}
/* Cambio de skin: salida completa y entrada cinematográfica de los bloques. */
html.skin-saliendo body{opacity:0;transform:scale(.985);transition:opacity .32s ease,transform .32s ease;pointer-events:none}
html.skin-entrada{overflow:hidden}
html.skin-entrada body{overflow:hidden}
html.skin-entrada #licito-lienzo-3d{z-index:1150}
html.skin-entrada :is(main,.cab,.pie-portada,#precarga,body:before){visibility:hidden}
html.skin-entrada #mascara-skin{pointer-events:none;opacity:0}
html:not(.skin-entrada) #licito-lienzo-3d{transition:opacity .6s ease}
@media(prefers-reduced-motion:reduce){html.skin-saliendo body{transform:none;transition:none}}

/* Vista aérea: diorama civil continuo y tarjetas editoriales sobre el paisaje. */
#licito-dron{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:#dbe0d6}
#licito-dron canvas{width:100%;height:100%;display:block}
#licito-dron[hidden],#dron-presentacion{display:none}
html[data-skin="dron"]{--crema:#f3f3ee;--tinta:#223532;--texto:#354941;--suave:#5c7066;--linea:#c4cec4;--acento:#e65d42;--acento-2:#b8402b;--acento-f:#f8e5dc;--cafe:#223532;--hueso:#f3f3ee;--naranja:#e65d42}
html[data-skin="dron"] #licito-lienzo-3d{display:none!important}
html[data-skin="dron"] body:before{content:"VISTA AÉREA  /  INFRAESTRUCTURAS CIVILES";background:#f4f4eccc;color:#36534a;letter-spacing:.12em;padding:7px 12px;border-radius:4px}
html[data-skin="dron"] .heroe .marca{left:4%;top:17%;width:24%;opacity:.94}
html[data-skin="dron"] .heroe .marca text{fill:#e65d42}
html[data-skin="dron"] #dron-presentacion{display:block;position:absolute;left:3.5%;bottom:8%;width:min(440px,43vw);padding:27px;background:rgba(250,250,244,.94);border:1px solid #ffffffaa;border-radius:7px;box-shadow:0 18px 60px #35483a18;color:#223532;z-index:5;backdrop-filter:blur(12px)}
html[data-skin="dron"] #dron-presentacion h1{font-family:inherit;font-size:clamp(28px,3.4vw,48px);font-weight:450;line-height:1.02;letter-spacing:-.045em;color:#223532!important;margin:18px 0}
html[data-skin="dron"] #dron-presentacion p{font-size:15px;line-height:1.5;color:#4b5b50!important;margin-bottom:24px}
html[data-skin="dron"] #dron-presentacion .dron-kicker{font-size:10px;letter-spacing:.12em;color:#637769!important}
html[data-skin="dron"] #dron-presentacion>div{display:flex;gap:7px;flex-wrap:wrap}
html[data-skin="dron"] #dron-presentacion .btn{border-radius:30px;padding:12px 15px;font-size:13px}
html[data-skin="dron"] #dron-presentacion .btn.fantasma{color:#223532!important;border-color:#b8c4b7}
html[data-skin="dron"] :is(.tarjeta,.plan,.paso,.panel){background:rgba(249,250,244,.96);border-color:#c7d0c5;border-radius:8px;box-shadow:0 12px 40px #3444350c}
html[data-skin="dron"] .cab.portada{background:rgba(248,249,242,.82)!important;backdrop-filter:blur(14px)!important}
html[data-skin="dron"] main>section:not(.heroe){border-radius:8px;background:rgba(246,248,241,.94)!important}
html[data-skin="dron"] :is(.papel,.hoja,.plan.destacado,.caja-ondas){background:#e8ede3;color:#223532}
html[data-skin="dron"] .prov-tabla{background:#fbfcf7}
html[data-skin="dron"] .prov-tabla th{background:#dfe8dc}
@media(max-width:760px){
 html[data-skin="dron"] #dron-presentacion{left:5%;bottom:7%;width:90%;padding:22px}
 html[data-skin="dron"] #dron-presentacion h1{font-size:34px}
 html[data-skin="dron"] .heroe .marca{left:7%;top:19%;width:50%}
 html[data-skin="dron"] #dron-presentacion p{font-size:14px;margin-bottom:16px}
}
/* hidden debe prevalecer sobre la rejilla de la ficha al cambiar subpestaña. */
#lc-ficha-chat[hidden],#lc-proveedores[hidden]{display:none!important}

/* Dron WebGL — arquitectura, señalética y controles anclados al recinto.
   El HTML de las secciones y formularios sigue siendo el original. */
html[data-skin="dron"]{--acento:#df4b36;--acento-2:#bd3528;--tinta:#263b3d;--texto:#3f5051;--crema:#f5f3ec}
html[data-skin="dron"] body{background:transparent!important}
html[data-skin="dron"] body:before{display:none}
html[data-skin="dron"] #licito-dron{z-index:-1;background:#e4e6df}
html[data-skin="dron"] #licito-dron canvas{width:100%;height:100%}
html[data-skin="dron"][data-dron="ready"] .heroe .marca{display:none}
html[data-skin="dron"] .heroe{min-height:100svh!important}
html[data-skin="dron"] .cab.portada,
html[data-skin="dron"] .cab{background:rgba(249,248,242,.82)!important;border-bottom:1px solid #ffffff80;backdrop-filter:blur(18px)!important;box-shadow:none!important}
html[data-skin="dron"] .cab .btn{border-radius:999px}
html[data-skin="dron"] main>section:not(.heroe){
  background:rgba(250,249,243,.94)!important;border:1px solid #fff;border-bottom:5px solid #afb5ae;
  border-radius:3px;box-shadow:12px 18px 0 #34494b14,0 20px 80px #1c353326;
  backdrop-filter:blur(16px);
}
html[data-skin="dron"] main>section.vista{margin-top:72px!important}
html[data-skin="dron"] .vista:before{content:"GenieAutoDesigner  /  CONTROL";font:600 10px/1.5 system-ui;letter-spacing:.18em;color:#72817e;display:block;margin-bottom:24px}
html[data-skin="dron"] .vista h1,html[data-skin="dron"] .vista h2{letter-spacing:-.04em}
#dron-world-ui{position:fixed;inset:0;pointer-events:none;z-index:3;overflow:hidden}
#dron-world-ui[hidden],#dron-hud[hidden]{display:none!important}
.dron-world-link{position:absolute;left:0;top:0;pointer-events:auto;white-space:nowrap;
  font:600 12px/1.2 "Inter Tight",system-ui,sans-serif;text-decoration:none;color:#fff7eb;
  background:#df4b36;padding:10px 17px;border:1px solid #ed8d7d;border-radius:3px;
  box-shadow:0 4px 0 #9d372c,0 8px 16px #14363322;transition:background .2s}
.dron-world-link:hover,.dron-world-link:focus-visible{background:#b93425;outline:2px solid #fff;outline-offset:3px}
.dron-world-link[hidden]{display:none}
#dron-hud{position:fixed;inset:0;z-index:4;pointer-events:none;color:#263b3d;font-family:"Inter Tight",system-ui,sans-serif}
#dron-hud .dron-heading{position:absolute;left:4.5vw;bottom:124px;width:min(350px,29vw);display:none}
.dron-in-hero #dron-hud .dron-heading{display:block}
.dron-sector{font-size:10px;letter-spacing:.16em;font-weight:650;display:inline-block;border-bottom:1px solid #697b7266;padding-bottom:9px}
#dron-hud h1{font:500 clamp(27px,3vw,46px)/1.05 "Inter Tight",system-ui;margin:17px 0;letter-spacing:-.05em;text-wrap:balance}
#dron-hud p{font-size:13px;line-height:1.6;max-width:250px;color:#51615d}
#dron-hud nav{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;gap:4px;
  padding:5px;background:#f7f6edeb;border:1px solid #fff;border-radius:40px;backdrop-filter:blur(14px);pointer-events:auto;box-shadow:0 6px 25px #263b3d18}
#dron-hud button{background:none;border:0;border-radius:30px;padding:11px 18px;color:#465b56;font:550 12px/1 system-ui;cursor:pointer}
#dron-hud button[aria-pressed="true"]{background:#df4b36;color:#fff6ed}
#dron-hud .dron-status{position:absolute;right:24px;bottom:40px;font:500 10px/1 system-ui;letter-spacing:.08em;background:#f7f6eddd;border-radius:4px;padding:7px 10px}
html:not([data-skin="dron"]) :is(#dron-hud,#dron-world-ui){display:none!important}
html[data-skin="dron"]:not([data-dron="ready"]) .heroe .marca{display:block}
@media(max-width:760px){
  #dron-hud .dron-heading{left:22px;bottom:100px;width:60vw;padding:15px;background:#f7f6ece8;border:1px solid #fff;border-radius:3px}
  #dron-hud h1{font-size:27px;margin:10px 0}
  #dron-hud p{display:none}
  #dron-hud nav{bottom:16px;max-width:calc(100vw - 20px)}
  #dron-hud button{padding:11px 10px;font-size:11px}
  #dron-hud .dron-status{top:115px;bottom:auto;right:12px}
  .dron-world-link{font-size:10px;padding:8px 11px}
}
@media(prefers-reduced-motion:reduce){.dron-world-link{transition:none}}
.dron-world-link{box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-size:20px;padding:0}
@media(min-width:761px){
  #dron-hud .dron-heading{left:0;top:0;bottom:auto;width:400px;height:230px;transform-origin:0 0;box-sizing:border-box;padding:8px 0}
  #dron-hud .dron-sector{font-size:12px}
  #dron-hud h1{font-size:44px;margin:18px 0}
  #dron-hud p{font-size:17px;max-width:340px}
}

/* Dron — placa de cada entorno: título + botón en un mismo plano, paralelo a
   la cámara una vez llegada (mundo.js la orienta). La presa no tiene panel
   físico: el rótulo va sobre la lámina de agua, con velo para que se lea. */
.dron-plate-link{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;pointer-events:auto;
  height:42px;padding:0 20px;margin-top:14px;white-space:nowrap;text-decoration:none;color:#fff7eb;background:#df4b36;
  font:600 16px/1 "Inter Tight",system-ui,sans-serif;border:1px solid #ed8d7d;border-radius:3px;
  box-shadow:0 4px 0 #9d372c,0 8px 16px #14363322;transition:background .2s}
.dron-plate-link:hover,.dron-plate-link:focus-visible{background:#b93425;outline:2px solid #fff;outline-offset:3px}
@media(min-width:761px){
  #dron-hud .dron-heading{height:300px;padding:6px 0;will-change:transform}
  #dron-hud h1{font-size:40px;margin:14px 0 12px}
  #dron-hud p{font-size:15px;max-width:360px;margin:0}
  /* Presa: el oleaje es del agua, no de las letras. El rótulo va sobre un velo
     tenue que deja ver la lámina moverse por debajo y mantiene el contraste. */
  html[data-dron-sector="dam"] #dron-hud .dron-heading{
    background:linear-gradient(105deg,#15484ecc,#15484e7a 62%,#15484e14);
    border-left:3px solid #f06a4f;border-radius:2px;padding:18px 26px 22px 20px}
  html[data-dron-sector="dam"] #dron-hud :is(h1,p,.dron-sector){color:#f4fbf9;text-shadow:0 1px 2px #0d3a3fcc}
  html[data-dron-sector="dam"] #dron-hud .dron-sector{border-bottom-color:#f4fbf999}
}
@media(max-width:760px){.dron-plate-link{height:36px;font-size:12px;padding:0 13px;margin-top:4px}}
@media(prefers-reduced-motion:reduce){.dron-plate-link{transition:none}}
/* Dron — en la app las vistas van dentro de .envoltorio: sin esta ficha el
   título quedaba flotando ilegible sobre el escenario 3D. */
html[data-skin="dron"] main>.envoltorio>section.vista{background:rgba(250,249,243,.94);border:1px solid #fff;border-bottom:5px solid #afb5ae;
  border-radius:3px;box-shadow:12px 18px 0 #34494b14,0 20px 80px #1c353326;backdrop-filter:blur(16px);padding:28px clamp(16px,3vw,40px);margin-bottom:96px}
/* Puerto: título y botón pintados sobre la cara de los contenedores. */
@media(min-width:761px){
  html[data-dron-sector="port"] #dron-hud :is(h1,p,.dron-sector){color:#f4f1e6;text-shadow:0 1px 0 #183a3e}
  html[data-dron-sector="port"] #dron-hud .dron-sector{border-bottom-color:#f4f1e688}
}

/* =====================================================================
   VÍDEO — la portada de la landing (.cine) y la página /video.html
   =====================================================================
   El bloque de vídeo vive dentro de una seccion `.oscuro`, y las dos
   skins 3D fuerzan ahi `color:var(--tinta)!important`. Sin estas reglas
   el reclamo naranja quedaba con letra marron sobre naranja (ilegible) y
   el marco del reproductor seguia siendo una caja negra flotando sobre
   un escenario claro. Lo que cambia es SOLO el aspecto: el enlace, el
   destino y la medicion son los mismos en las tres skins. */

/* --- Clásica: nada que corregir, el bloque ya nace oscuro. --- */

/* --- Obra civil y dron: papel claro, marco de plano --- */
html:is([data-skin="obra"],[data-skin="dron"]) main>section.cine{
  background:var(--crema)!important;border:1px solid var(--linea);
  box-shadow:0 18px 60px #143b3914}
html:is([data-skin="obra"],[data-skin="dron"]) :is(.cine-pantalla,.reproductor){
  border-radius:4px;box-shadow:14px 18px 0 #34494b14,0 0 0 1px var(--linea)}
html:is([data-skin="obra"],[data-skin="dron"]) .cine-caja:hover .cine-pantalla{
  box-shadow:14px 18px 0 #34494b22,0 0 0 2px var(--acento)}
html:is([data-skin="obra"],[data-skin="dron"]) :is(.cine-play,.sonido:hover){
  background:var(--acento)}
html:is([data-skin="obra"],[data-skin="dron"]) .cine-tiempo{
  background:var(--acento-2);color:#fff}
html:is([data-skin="obra"],[data-skin="dron"]) .cine-titular{color:var(--tinta)!important}
html:is([data-skin="obra"],[data-skin="dron"]) .cine-p{color:var(--texto)!important}
html:is([data-skin="obra"],[data-skin="dron"]) .cine-texto .etiqueta{color:var(--acento)!important}
/* El reclamo: fondo del acento de la skin y letra BLANCA, por encima de la
   regla general que pinta todo lo de dentro de `.oscuro` de color tinta. */
html:is([data-skin="obra"],[data-skin="dron"]) .cine-cta,
html:is([data-skin="obra"],[data-skin="dron"]) .cine-cta *{
  background:var(--acento);color:#fff!important;border-radius:12px}
html:is([data-skin="obra"],[data-skin="dron"]) .cine-cta *{background:none}

/* --- /video.html con skin 3D: la página entera se vuelve clara --- */
html:is([data-skin="obra"],[data-skin="dron"]) body:has(>main.escena){
  background:transparent!important;color:var(--texto)}
html:is([data-skin="obra"],[data-skin="dron"]) .cab-video{
  background:var(--crema)!important;border-bottom:1px solid var(--linea);padding-left:60px}
html:is([data-skin="obra"],[data-skin="dron"]) :is(.cab-video .logo,.cab-video a){color:var(--tinta)!important}
html:is([data-skin="obra"],[data-skin="dron"]) .cab-video .btn{color:#fff!important}
html:is([data-skin="obra"],[data-skin="dron"]) .cab-video .btn.fantasma{color:var(--tinta)!important}
html:is([data-skin="obra"],[data-skin="dron"]) .escena{
  background:rgba(237,243,238,.82);margin:16px 10px;border-radius:16px;
  border:1px solid var(--linea);backdrop-filter:blur(10px)}
html:is([data-skin="dron"]) .escena{background:rgba(239,247,239,.84)}
html:is([data-skin="obra"],[data-skin="dron"]) :is(.discurso h1,.regalo h2,.reproductor .capa h2,.hitos b){color:var(--tinta)}
html:is([data-skin="obra"],[data-skin="dron"]) :is(.discurso>p,.hitos li,.regalo p,.volver){color:var(--texto)}
html:is([data-skin="obra"],[data-skin="dron"]) .discurso .etiqueta{color:var(--acento)}
html:is([data-skin="obra"],[data-skin="dron"]) .hitos s{background:var(--acento-f);color:var(--acento-2)}
html:is([data-skin="obra"],[data-skin="dron"]) .regalo{
  background:var(--crema);border:1px solid var(--linea);border-radius:16px;
  box-shadow:10px 14px 0 #34494b10}
html:is([data-skin="obra"],[data-skin="dron"]) .regalo .sello{background:var(--acento);color:#fff}
html:is([data-skin="obra"],[data-skin="dron"]) .regalo .letra-chica{color:var(--tenue)}
/* La capa del final se queda oscura a proposito: va ENCIMA del vídeo, y un
   velo claro sobre un fotograma claro no deja leer la llamada. */
html:is([data-skin="obra"],[data-skin="dron"]) .reproductor .capa :is(h2,p){color:#f7f1ea!important}