/* APS · estilos de la web: oscuro (el de siempre, definido en site.css), medio y claro.
   Se activan con <html data-tema="…">. Solo cambian variables de color. */
html[data-tema="medio"]{
  --bg:#2a2826;--bg-rgb:42,40,38;--ivory:#f0ebe2;--red:#d1403a;--soft:#bab4aa;
  --line:#ffffff30;--line-2:#ffffff2b;--line-3:#ffffff45;--btn-line:#ffffff77;
  --nav:#e4dfd6;--nav-sub:#d9d3c9;--hero-p:#e0dbd2;--hero-idx:#ece6dc;--filter:#d0cabf;
  --piece-bg:#383532;--studio-bg:#34312e;--studio-p:#d2ccc2;--reel-bg:#322f2d;
  --contact-bg:#dcd5c8;--contact-ink:#1d1b19;--contact-soft:#4a453f;--menu-bg:#242220;--foot:#bab4aa;
}
html[data-tema="claro"]{
  --bg:#f4f0e8;--bg-rgb:244,240,232;--ivory:#1a1816;--red:#b0211c;--soft:#6b655d;
  --line:#00000024;--line-2:#0000001f;--line-3:#0000003a;--btn-line:#00000066;
  --nav:#3a3632;--nav-sub:#4a453f;--hero-p:#3a3632;--hero-idx:#3a3632;--filter:#4a453f;
  --piece-bg:#e2dccf;--studio-bg:#e9e3d8;--studio-p:#4a453f;--reel-bg:#ebe5da;
  --contact-bg:#e4dccd;--contact-ink:#1a1816;--contact-soft:#4a453f;--menu-bg:#f4f0e8;--foot:#6b655d;
}
/* Tarjetas de vídeo: la pantalla es siempre oscura, su texto siempre claro */
html[data-tema] .reel-screen{color:#eee9df}
html[data-tema="claro"] .reel-screen:before{color:#ffffff13}
html[data-tema="claro"] .to-top{box-shadow:0 4px 18px #00000030}
html[data-tema="claro"] .piece:after{background:linear-gradient(transparent,#000a)}
/* Sin logo propio para el claro, el logo (normalmente blanco) se invierte para que se vea */
html[data-tema="claro"]:not([data-logo="propio"]) .sigil,html[data-tema="claro"]:not([data-logo="propio"]) .about-mark svg,html[data-tema="claro"]:not([data-logo="propio"]) .studio-empty svg{filter:invert(1) hue-rotate(180deg)}
/* Claro: la cabecera sigue transparente (se ve todo el banner); solo el logo y los botones del menú llevan fondo marfil para leerse */
html[data-tema="claro"] header{background:none;border-bottom-color:var(--line-3)}
html[data-tema="claro"] .identity,html[data-tema="claro"] nav a{background:rgba(var(--bg-rgb),.9);color:var(--ivory);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html[data-tema="claro"] .identity{padding:8px 16px 8px 10px;border-radius:999px}
html[data-tema="claro"] nav a{padding:10px 16px;border-radius:999px}
html[data-tema="claro"] .reserve{border-color:var(--ivory)}
@media (max-width:800px){
  html[data-tema="claro"] nav a{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;border-radius:0}
  html[data-tema="claro"] .identity{padding:6px 14px 6px 8px}
}
/* Medio: banda suave por si el banner es claro */
html[data-tema="medio"] header{background:linear-gradient(rgba(var(--bg-rgb),.78),rgba(var(--bg-rgb),.3))}

/* Medio y claro: sin zonas negras. Los degradados de las fotos y del banner usan el color del tema. */
html[data-tema="medio"] .piece:after,html[data-tema="claro"] .piece:after{background:linear-gradient(transparent,rgba(var(--bg-rgb),.9))}
html[data-tema="medio"] .piece-label,html[data-tema="claro"] .piece-label{color:var(--ivory)}
html[data-tema="medio"] .piece-label small,html[data-tema="claro"] .piece-label small{color:var(--soft)}
html[data-tema="claro"] .piece-label small{color:var(--nav)}
/* Tablet y móvil: el banner ocupa toda la cabecera, así que se aclara entero (en PC se funde por la izquierda) */
@media (max-width:1024px){
  html[data-tema="medio"] .hero-photo:before{background-image:linear-gradient(0deg,var(--bg) 0%,rgba(var(--bg-rgb),.55) 45%,rgba(var(--bg-rgb),.55) 100%)}
  html[data-tema="claro"] .hero-photo:before{background-image:linear-gradient(0deg,var(--bg) 0%,rgba(var(--bg-rgb),.72) 45%,rgba(var(--bg-rgb),.72) 100%)}
}
/* Tablet ancho (801–1024 px): la foto empieza al 25 %, así que conserva el fundido por la izquierda */
@media (min-width:801px) and (max-width:1024px){
  html[data-tema="medio"] .hero-photo:before{background-image:linear-gradient(90deg,var(--bg) 0%,rgba(var(--bg-rgb),.4) 38%,rgba(var(--bg-rgb),.0) 80%),linear-gradient(0deg,var(--bg) 0%,rgba(var(--bg-rgb),.5) 45%,rgba(var(--bg-rgb),.5) 100%)}
  html[data-tema="claro"] .hero-photo:before{background-image:linear-gradient(90deg,var(--bg) 0%,rgba(var(--bg-rgb),.5) 38%,rgba(var(--bg-rgb),.0) 80%),linear-gradient(0deg,var(--bg) 0%,rgba(var(--bg-rgb),.65) 45%,rgba(var(--bg-rgb),.65) 100%)}
}