/* Interconecction · v1.2 conectada al CRM — lo que se añade a estilo.css.
   estilo.css es la piel de la v1.2 y no se toca. Aquí solo va lo que pide el
   paso a producción: el mundo carga después del LCP, más de tres proyectos,
   el aviso de vista previa, las páginas legales y la lista de idiomas. */

/* Mientras el mundo no ha pintado su primer fotograma, el suelo lo pone el CSS
   (sin esto, un suelo claro sería texto oscuro sobre negro durante la carga). */
.con-mundo:not(.mundo-listo) [data-suelo]{background:var(--suelo)}
.con-mundo:not(.mundo-listo) #tecnologia,.con-mundo:not(.mundo-listo) #preguntas{background:var(--suelo)}

/* …y en escritorio, el póster de cada tramo donde va a aparecer el mundo. */
@media (min-width:821px){
  .con-mundo:not(.mundo-listo) .escena > .poster{display:block;position:absolute;right:calc(var(--gutter) + 14px);top:50%;transform:translateY(-50%);width:min(40vw,640px);border:1px solid var(--borde2);opacity:.9;pointer-events:none;z-index:-1;animation:poster-entra .8s var(--ease) both}
  .con-mundo:not(.mundo-listo) .escena > .poster img{width:100%;height:auto}
  .con-mundo:not(.mundo-listo) .claro .escena > .poster{border-color:#CFC9BC}
}
@keyframes poster-entra{from{opacity:0}to{opacity:.9}}

/* Con más de tres proyectos con captura, se siguen alternando lados. */
.proyecto:nth-child(2n):not(.proyecto-resto){left:auto;right:14px}
@media (max-width:820px){.proyecto:nth-child(2n):not(.proyecto-resto){right:auto;left:0}}

/* Idiomas del pie (solo aparece cuando hay más de uno publicado). */
.pie .idiomas{margin-top:1.2rem;font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--texto2)}
.pie .idiomas a{display:inline;padding:.4rem .1rem}
.pie .idiomas b{color:var(--verde);font-weight:700}

/* Vista previa: se sabe siempre que se está mirando un borrador. */
.aviso-previa{position:fixed;left:50%;top:70px;transform:translateX(-50%);z-index:40;background:#FF6A13;color:#0B0B0B;font:600 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:.6rem 1rem;border:1px solid #0B0B0B;max-width:calc(100vw - 32px);text-align:center}

/* Páginas legales, gracias y error: la misma piel, para leer. */
.legal-pagina{min-height:100svh;padding-top:22vh}
.legal-doc .medio{margin-bottom:1.4rem}
.legal-doc .revision{margin:0 0 2.6rem;padding:.9rem 1rem;border-left:2px solid var(--naranja-o);background:rgba(179,66,0,.06);color:var(--negro)}
.apartados{border-top:1px solid var(--negro)}
.apartados section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:2rem;padding:1.6rem 0;border-bottom:1px solid #D9D4C8}
.apartados h2{font:700 clamp(16px,1.3vw,19px)/1.3 var(--display);text-transform:uppercase;letter-spacing:-.005em}
.apartados p{color:var(--texto2-claro);max-width:68ch}
.pagina-simple{min-height:100svh;display:flex;align-items:center}
.pagina-simple .grande{max-width:16ch}
@media (max-width:820px){.apartados section{grid-template-columns:1fr;gap:.6rem}}

/* El formulario mientras se envía. */
.formulario button[disabled]{opacity:.6;cursor:progress}

/* La banda de abajo del HUD toma el color del suelo que tiene debajo (no el de
   la mitad de la pantalla): en los relevos entre secciones se sigue leyendo. */
body[data-hud-pie="claro"] .hud-pie{--hud:#0B0B0B;--hud-tono:var(--verde-o)}
body[data-hud-pie="neon"] .hud-pie{--hud:#0B0B0B;--hud-tono:var(--negro)}
body[data-hud-pie="oscuro"] .hud-pie{--hud:#F2F2F0;--hud-tono:var(--verde)}

/* Áreas táctiles de 44 px en el móvil, sin mover nada de sitio. */
@media (max-width:820px){
  .hud{padding-block:7px}
  .hud .marca{min-height:44px}
  .pie a{padding:.6rem 0}
  .fecha-si input{min-height:44px}
  .correo{padding-top:.9rem}
}

/* Un botón u otra pieza opaca que pasa justo por debajo de un texto del HUD:
   ese texto se pinta en el color que se lee encima (pagina.js → data-sobre). */
.hud [data-sobre="claro"],.hud-pie [data-sobre="claro"]{--hud:#0B0B0B;--hud-tono:#0B0B0B;color:#0B0B0B}
.hud [data-sobre="oscuro"],.hud-pie [data-sobre="oscuro"]{--hud:#F2F2F0;--hud-tono:var(--verde);color:#F2F2F0}
.hud .marca[data-sobre="claro"] svg circle:last-child{stroke:#0B0B0B}
.hud .marca[data-sobre="oscuro"] svg circle:last-child{stroke:var(--verde)}