/* Bondi SVG: paleta y trazos compartidos. Los colores vienen de comunes.css. */
#principal .bondi-vector .fill-verde { fill:var(--verde); }
#principal .bondi-vector .fill-cian { fill:var(--cian); }
#principal .bondi-vector .fill-blanco { fill:#fff; }
#principal .bondi-vector .fill-negro { fill:#000; }
#principal .bondi-vector .fill-none { fill:none; }
#principal .bondi-vector .stroke-negro { stroke:#000; }
#principal .bondi-vector .stroke-none { stroke:none; }
#principal .bondi-vector .stroke-3 { stroke-width:3; }
#principal .bondi-vector .stroke-1-5 { stroke-width:1.5; }
#principal .bondi-vector .stroke-2 { stroke-width:2; }
#principal .bondi-vector .fill-opacity-25 { fill-opacity:.25; }
#principal .bondi-vector .fill-opacity-50 { fill-opacity:.5; }
#principal .bondi-vector .cap-round { stroke-linecap:round; }
#principal .bondi-vector .join-round { stroke-linejoin:round; }
#principal .bondi-vector .join-miter { stroke-linejoin:miter; }

/* Escena: posiciones iniciales ajustables independientemente del arte fotográfico.
   Coordenadas en % del hero; no afectan a la maqueta de otras secciones. */
#principal .hero-objects { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
#principal .hero-object { position:absolute; left:var(--x); top:var(--y); width:var(--w); transform:translate(-50%,-50%) rotate(var(--r,0deg)); transform-origin:center; }
#principal .hero-object svg { display:block; width:100%; height:auto; overflow:visible; }
#principal .hero-object--pantonera { --x:13%; --y:31%; --w:clamp(45px,5.5vw,105px); --r:-13deg; }
#principal .hero-object--pluma { --x:82%; --y:34%; --w:clamp(44px,5.5vw,100px); --r:12deg; }
#principal .hero-object--cafe { --x:90%; --y:69%; --w:clamp(45px,5.5vw,96px); }
#principal .hero-object--popup { --x:78%; --y:16%; --w:clamp(150px,19vw,335px); --r:5deg; }
#principal .hero-object--html { --x:20%; --y:64%; --w:clamp(35px,3.5vw,70px); --r:-7deg; }
#principal .hero-object--miniweb { --x:19%; --y:17%; --w:clamp(105px,13vw,245px); --r:-5deg; }
#principal .hero-object--laptop { --x:9%; --y:82%; --w:clamp(80px,10vw,180px); --r:-6deg; }
#principal .hero-object--camara { --x:95%; --y:38%; --w:clamp(50px,6vw,110px); --r:8deg; }
#principal .hero-object--regla { --x:66%; --y:88%; --w:clamp(38px,5vw,85px); --r:23deg; }
#principal .hero-object--pad { --x:38%; --y:13%; --w:clamp(55px,6vw,112px); --r:-10deg; }
#principal .hero-object--dibujo { --x:71%; --y:66%; --w:clamp(55px,6vw,110px); --r:15deg; }
#principal .hero-object--lapizverde { --x:33%; --y:82%; --w:clamp(20px,2.6vw,50px); --r:28deg; }
#principal .hero-object--lapizcian { --x:42%; --y:86%; --w:clamp(20px,2.6vw,50px); --r:-20deg; }
#principal .hero-object--cutter { --x:57%; --y:16%; --w:clamp(25px,3vw,55px); --r:-15deg; }
#principal .hero-object--puntero { --x:92%; --y:88%; --w:clamp(35px,4vw,72px); --r:-15deg; }
#principal .hero-object--anteojos { --x:29%; --y:15%; --w:clamp(70px,9vw,165px); --r:10deg; }
@media (max-width:700px) {
  #principal .hero-object { width:calc(var(--w) * .72); }
  #principal .hero-object--popup { --x:72%; --y:19%; }
  #principal .hero-object--pantonera { --x:15%; --y:35%; }
  #principal .hero-object--miniweb { --x:18%; --y:16%; }
  #principal .hero-object--cafe { --x:87%; --y:76%; }
}

/* Ajustes del editor: se cargan sólo al usar ?hero-editor=1 y se exportan como CSS. */
#principal .hero-object { width:var(--editor-w, var(--w)); }
@media (max-width:700px) { #principal .hero-object { width:var(--editor-w, calc(var(--w) * .72)); } }
body.bondi-editing #principal .hero-objects { pointer-events:auto; overflow:visible; }
body.bondi-editing #principal .hero-object { cursor:grab; outline:1px dashed rgba(0,0,0,.4); outline-offset:5px; touch-action:none; }
body.bondi-editing #principal .hero-object.is-selected { outline:2px solid #f04; z-index:20; }
body.bondi-editing #principal .hero-object:active { cursor:grabbing; }
body.bondi-editing #principal .hero-object svg { pointer-events:none; }
body.bondi-editing #principal .hero-objects { z-index:5; }

/* V6 — Composición inicial del usuario: todas las coordenadas relativas al título.
   Escala global compartida: --hero-objects-scale (1 = 100%).
   El JS multiplica el tamaño relativo al título por esta variable.
   Los valores individuales siguen disponibles para ajustes finos. */
/* Bondi Hero — posiciones editadas. Pegar al FINAL de hero-graphics.css */
/* Bondi Hero — posiciones editadas. Pegar al FINAL de hero-graphics.css */
#principal { --hero-objects-scale:1; }
@media(max-width:1100px){#principal{--hero-objects-scale:1;}}
@media(max-width:700px){#principal{--hero-objects-scale:1;}}
#principal .hero-object--cutter { --anchor:title; --size-unit:title; --x:106.002%; --y:78.240%; --title-size:3.504; --r:0.00deg; }
#principal .hero-object--laptop { --anchor:title; --size-unit:title; --x:88.645%; --y:29.012%; --title-size:21.900; --r:0.00deg; }
#principal .hero-object--regla { --anchor:title; --size-unit:title; --x:37.857%; --y:133.429%; --title-size:4.000; --r:90.00deg; }
#principal .hero-object--pantonera { --anchor:title; --size-unit:title; --x:54.623%; --y:24.151%; --title-size:12.000; --r:180.00deg; }
/* V12.1: posiciones desktop preservadas de V11 (ausentes en la exportación). */
#principal .hero-object--popup { --anchor:title; --size-unit:title; --x:122.273%; --y:-17.711%; --title-size:26.532; --r:0.00deg; }
#principal .hero-object--pad { --anchor:title; --size-unit:title; --x:136.001%; --y:-33.708%; --title-size:21.898; --r:0.00deg; }
#principal .hero-object--anteojos { --anchor:title; --size-unit:title; --x:18.193%; --y:131.400%; --title-size:12.937; --r:0.00deg; }
#principal .hero-object--puntero { --anchor:title; --size-unit:title; --x:4.564%; --y:131.364%; --title-size:5.256; --r:0.00deg; }
#principal .hero-object--pluma { --anchor:title; --size-unit:title; --x:115.920%; --y:37.748%; --title-size:12.263; --r:0.00deg; }
#principal .hero-object--html { --anchor:title; --size-unit:title; --x:3.149%; --y:76.553%; --title-size:6.131; --r:0.00deg; }
#principal .hero-object--lapizcian { --anchor:title; --size-unit:title; --x:69.376%; --y:33.612%; --title-size:13.000; --r:0.00deg; }
#principal .hero-object--miniweb { --anchor:hero; --size-unit:px; --x:55.538%; --y:14.812%; --editor-w:280.00px; --r:0.00deg; }
#principal .hero-object--cafe { --anchor:title; --size-unit:title; --x:149.797%; --y:115.572%; --title-size:7.477; --r:0.00deg; }
#principal .hero-object--dibujo { --anchor:title; --size-unit:title; --x:138.247%; --y:129.135%; --title-size:10.921; --r:0.00deg; }
#principal .hero-object--camara { --anchor:title; --size-unit:title; --x:124.931%; --y:119.813%; --title-size:10.511; --r:0.00deg; }
@media (min-width:701px) and (max-width:1100px) {
#principal .hero-object--popup { --anchor:title; --size-unit:title; --x:78.732%; --y:-46.158%; --title-size:26.532; --r:0.00deg; }
#principal .hero-object--pad { --anchor:title; --size-unit:title; --x:92.083%; --y:-70.380%; --title-size:21.898; --r:0.00deg; }
#principal .hero-object--regla { --anchor:title; --size-unit:title; --x:90.887%; --y:122.654%; --title-size:4.000; --r:90.00deg; }
#principal .hero-object--anteojos { --anchor:title; --size-unit:title; --x:71.769%; --y:122.565%; --title-size:12.937; --r:0.00deg; }
#principal .hero-object--puntero { --anchor:title; --size-unit:title; --x:59.104%; --y:122.808%; --title-size:5.256; --r:0.00deg; }
#principal .hero-object--lapizverde { --anchor:title; --size-unit:title; --x:71.827%; --y:-64.144%; --title-size:12.263; --r:0.00deg; }
#principal .hero-object--camara { --anchor:title; --size-unit:title; --x:123.286%; --y:-45.592%; --title-size:10.511; --r:0.00deg; }
#principal .hero-object--dibujo { --anchor:title; --size-unit:title; --x:123.730%; --y:0.734%; --title-size:10.921; --r:0.00deg; }
#principal .hero-object--cafe { --anchor:title; --size-unit:title; --x:39.786%; --y:-18.712%; --title-size:7.477; --r:0.00deg; }
#principal .hero-object--pluma { --anchor:title; --size-unit:title; --x:108.564%; --y:-3.084%; --title-size:12.263; --r:0.00deg; }
}
@media (max-width:700px) {
#principal .hero-object--popup { --anchor:title; --size-unit:title; --x:58.961%; --y:188.593%; --title-size:40.000; --r:0.00deg; }
#principal .hero-object--lapizverde { --anchor:title; --size-unit:title; --x:52.343%; --y:218.854%; --title-size:12.263; --r:0.00deg; }
#principal .hero-object--camara { --anchor:title; --size-unit:title; --x:33.555%; --y:313.907%; --title-size:10.511; --r:0.00deg; }
#principal .hero-object--dibujo { --anchor:title; --size-unit:title; --x:16.074%; --y:298.504%; --title-size:15.000; --r:0.00deg; }
#principal .hero-object--pad { --anchor:title; --size-unit:title; --x:74.270%; --y:213.782%; --title-size:21.898; --r:0.00deg; }
#principal .hero-object--pluma { --anchor:title; --size-unit:title; --x:5.732%; --y:-45.184%; --title-size:12.263; --r:0.00deg; }
#principal .hero-object--cafe { --anchor:title; --size-unit:title; --x:85.098%; --y:-14.733%; --title-size:8.000; --r:0.00deg; }
#principal .hero-object--regla { --anchor:title; --size-unit:title; --x:64.293%; --y:120.249%; --title-size:4.000; --r:90.00deg; }
#principal .hero-object--anteojos { --anchor:title; --size-unit:title; --x:42.156%; --y:123.644%; --title-size:12.937; --r:0.00deg; }
#principal .hero-object--puntero { --anchor:title; --size-unit:title; --x:26.176%; --y:123.511%; --title-size:5.256; --r:0.00deg; }
#principal .hero-object--cutter { --anchor:title; --size-unit:title; --x:32.885%; --y:184.280%; --title-size:3.504; --r:0.00deg; }
}