/* Modo oscuro de estudiogarbo.com (pedido Ivo 09/11/2026).
   Se activa con html[data-theme="dark"]: lo pone el script del <head> según
   la preferencia del sistema o lo que el visitante eligió con el botón ☾/☀.
   Las secciones blancas pasan a negro cálido y las negras a casi negro, para
   que se mantenga el ritmo claro/oscuro; amarillo y rosa no se tocan. */

html[data-theme="dark"]{
  color-scheme:dark;
  --paper:#131312;
  --ink:#171717;
  --muted:#a9a69c;
  --line:#2e2d29;
  --depth-hairline:#ffffff14;
  --depth-glass:rgba(19,19,18,.92);
  --glass-edge:#ffffff1a;
  --dk-bg:#131312;
  --dk-card:#1d1d1b;
  --dk-deep:#0a0a09;
  --dk-text:#f1eee5;
  --dk-soft:#c9c6bc;
}

html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) body{background:var(--dk-bg)!important;color:var(--dk-text)}

/* Toda sección del main arranca oscura; las que en claro son negras se
   sobreescriben más abajo. El prefijo :not(#_1)… suma peso de ID para
   ganarle a brand.css, que usa #servicios / #inicio con !important. */
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) main>section{background-color:var(--dk-bg)!important;color:var(--dk-text)}

/* Secciones que en claro son blancas / papel */
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .site-header,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .collab-invite,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .hero,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .web-hero,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .services,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .how,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .photo-portfolio,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .manifesto,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .solutions,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .models,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .faq{background-color:var(--dk-bg)!important;color:var(--dk-text)!important}

/* Tarjetas sobre esas secciones */
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .service-card.audiovisual,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .service-card.service-photo,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .stand-feature,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .stand-feature-copy,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .step,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .solution-card,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .work-item,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .model-featured,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .faq details,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .nav-submenu,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .main-nav.open{background-color:var(--dk-card)!important;background-image:none!important;color:var(--dk-text)!important;border-color:var(--line)!important;box-shadow:0 10px 26px #00000059!important}

/* Secciones que en claro son negras: un punto más profundas */
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .ticker,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .service-card.digital,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .contact,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .site-footer,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .frames-section,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .process,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .service-video,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .service-intro-heading,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .intro-section,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .work,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .method,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .ai-section{background-color:var(--dk-deep)!important}
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .ai-panel{background-color:var(--dk-card)!important}

/* Header */
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .site-header{border-color:var(--line)!important;box-shadow:0 1px 0 #ffffff0d!important}
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .site-header .wordmark,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .site-header .main-nav a,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .site-header .main-nav summary{color:var(--dk-text)!important}
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .site-header .menu-toggle span{background:var(--dk-text)!important}
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .site-header .header-login,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .site-header .theme-toggle,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .site-header .nav-login-avatar{background:#ffffff14!important;color:var(--dk-text)!important}
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .site-header .theme-toggle::before{background:#ffffff2e!important}
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .site-header .main-nav.open>a,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .site-header .main-nav.open summary{border-color:#ffffff1a!important}

/* Lo amarillo sigue con texto negro */
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .button-dark,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .button-yellow,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .service-more-link,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .event-contact-button,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .stand-feature-label,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .step-number,
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .photo-print-service{color:#171717!important}

/* Botón ☾/☀ (en PC al lado del avatar; en el celular es una fila del menú) */
html body .site-header .theme-toggle{position:relative;display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin-left:25px;padding:0;border:0;border-radius:50%;background:rgba(23,23,23,.07);color:#171717;cursor:pointer;transition:background-color .2s,color .2s}
html body .site-header .theme-toggle::before{content:"";position:absolute;left:-13px;top:5px;width:1px;height:18px;background:rgba(23,23,23,.18)}
html body .site-header .theme-toggle:hover{background:var(--pink,#f32483);color:#fff}
html body .site-header .header-login{margin-left:8px}
html body .site-header .header-login::before{display:none}
html body .site-header .theme-toggle svg,
html body .site-header .nav-theme svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html .ic-sun{display:none}
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .ic-sun{display:block}
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .ic-moon{display:none}
html body .site-header .nav-theme{display:none!important}
@media(max-width:800px){
  html body .site-header .theme-toggle{display:none!important}
  html body .site-header .main-nav.open .nav-theme{display:flex!important;align-items:center;gap:12px;width:100%;padding:10px 0 4px;border:0;background:none;color:inherit;font:inherit;font-weight:600;text-align:left;cursor:pointer}
}

/* Tarjeta del dron: en claro es amarilla con velo blanco sobre el vídeo */
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .service-card.service-drone{background-color:var(--dk-card)!important;color:var(--dk-text)!important}
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .service-card.service-drone a:not([class]){color:var(--dk-text)!important;border-color:currentColor!important}

/* Velos blancos sobre vídeos/fotos (pseudo-elementos: el script no llega) */
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .service-drone::before{background-image:linear-gradient(90deg,rgba(19,19,18,.9),rgba(19,19,18,.8))!important}
html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .hero::after,html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .web-hero::after{background-image:radial-gradient(#ffffff 0.8px,transparent 0.9px)!important;opacity:.12!important}

/* Selector de idioma (09/11/2026): en PC "🌐 ES" con desplegable entre la
   rayita y el ☾; en el celular es una fila ES · CA · EN dentro del menú. */
html body .site-header .lang-menu{position:relative;margin-left:25px}
html body .site-header .lang-menu::before{content:"";position:absolute;left:-13px;top:5px;width:1px;height:18px;background:rgba(23,23,23,.18)}
html body .site-header .lang-menu summary{display:flex;align-items:center;gap:5px;height:28px;padding:0 10px 0 8px;border-radius:14px;background:rgba(23,23,23,.07);color:#171717;font:700 12px/1 var(--font-body,"DM Sans",sans-serif);letter-spacing:.04em;list-style:none;cursor:pointer;transition:background-color .2s,color .2s}
html body .site-header .lang-menu summary::-webkit-details-marker{display:none}
html body .site-header .lang-menu summary:hover,html body .site-header .lang-menu[open] summary{background:var(--pink,#f32483);color:#fff}
html body .site-header .lang-menu svg,html body .site-header .nav-lang svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html body .site-header .lang-list{position:absolute;right:0;top:38px;z-index:70;display:flex;flex-direction:column;min-width:150px;padding:6px;border:1px solid #dcd9cf;border-radius:12px;background:#fffdf4;box-shadow:0 14px 34px #1717171f}
html body .site-header .lang-list a{padding:9px 12px;border-radius:8px;color:#171717;font-size:14px;font-weight:600;text-decoration:none}
html body .site-header .lang-list a:hover{background:rgba(23,23,23,.06)}
html body .site-header .lang-list a[aria-current]{color:var(--pink,#f32483)}
html body .site-header .theme-toggle{margin-left:8px}
html body .site-header .theme-toggle::before{display:none}
html body .site-header .nav-lang{display:none!important}
@media(max-width:800px){
  html body .site-header .lang-menu{display:none!important}
  html body .site-header .main-nav.open .nav-lang{display:flex!important;align-items:center;gap:6px;padding:10px 0 4px;border:0}
  html body .site-header .main-nav.open .nav-lang .nav-login-avatar{margin-right:6px}
  html body .site-header .main-nav.open .nav-lang a{padding:5px 11px!important;border:0!important;border-radius:999px;font-weight:700;font-size:13px}
  html body .site-header .main-nav.open .nav-lang a[aria-current]{background:var(--pink,#f32483);color:#fff!important}
}
html[data-theme="dark"] body .site-header .lang-menu::before{background:#ffffff2e}
html[data-theme="dark"] body .site-header .lang-menu summary{background:#ffffff14;color:#f1eee5}
html[data-theme="dark"] body .site-header .lang-list{background:#1d1d1b;border-color:#2e2d29;box-shadow:0 14px 34px #00000080}
html[data-theme="dark"] body .site-header .lang-list a{color:#f1eee5}
html[data-theme="dark"] body .site-header .lang-list a:hover{background:#ffffff12}
html[data-theme="dark"] body .site-header .lang-list a[aria-current]{color:var(--pink,#f32483)}

/* Menú del celular (09/11/2026): "Servicios" como título y las 3 opciones
   siempre visibles y grandes — es lo que queremos que se destaque. El
   <details> lo deja abierto garbo-dark.js mientras la pantalla sea de móvil. */
@media(max-width:800px){
  html body .site-header .main-nav.open .nav-services{border:0!important;margin:0 0 6px;padding:0}
  html body .site-header .main-nav.open .nav-services>summary{display:block!important;padding:4px 0 6px!important;border:0!important;color:var(--pink,#f32483)!important;font:800 11px/1.2 var(--font-body,"DM Sans",sans-serif)!important;letter-spacing:.14em!important;text-transform:uppercase;cursor:default;pointer-events:none}
  html body .site-header .main-nav.open .nav-services>summary::after{display:none!important}
  html body .site-header .main-nav.open .nav-services .nav-submenu{display:flex!important;flex-direction:column;position:static!important;width:auto!important;min-width:0!important;margin:0!important;padding:0!important;border:0!important;border-left:0!important;background:transparent!important;box-shadow:none!important}
  html body .site-header .main-nav.open .nav-services .nav-submenu a{display:flex!important;align-items:center;justify-content:space-between;padding:13px 0!important;border-bottom:1px solid #17171714!important;background:transparent!important;color:#171717!important;font:600 21px/1.15 var(--font-head,"Space Grotesk",sans-serif)!important;letter-spacing:-.02em}
  html body .site-header .main-nav.open .nav-services .nav-submenu a::after{content:"→";color:var(--pink,#f32483);font-size:19px}
  html body .site-header .main-nav.open .nav-services .nav-submenu a:hover,
  html body .site-header .main-nav.open .nav-services .nav-submenu a:active{color:var(--pink,#f32483)!important}
  html body .site-header .main-nav.open .nav-login{margin-top:10px}
}
html[data-theme="dark"] body .site-header .main-nav.open .nav-services .nav-submenu a{color:#f1eee5!important;border-bottom-color:#ffffff14!important}
html[data-theme="dark"] body .site-header .main-nav.open .nav-services .nav-submenu{background:transparent!important;box-shadow:none!important}
@media(max-width:800px){
  html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .site-header .main-nav.open .nav-services>summary{color:var(--pink,#f32483)!important}
  html[data-theme="dark"]:not(#_1):not(#_2):not(#_3) .site-header .main-nav.open .nav-services .nav-submenu{background:transparent!important;box-shadow:none!important;border:0!important}
}

/* Hero de Digital con la misma foto de fondo (frambuesas) que el resto de servicios */
html body main>.web-hero#inicio{position:relative;isolation:isolate;background:#fff!important}
html body main>.web-hero#inicio:before{content:"";position:absolute;z-index:-1;inset:0;background:url("/assets/frambuesas-home.jpeg") center 46%/cover no-repeat;opacity:.24;pointer-events:none}