/* Capa por sistema operativo (regla de Nexo para todos los sitios), versión Concientizando Vidas.
   html[data-familia="apple"]   → iPhone, iPad y Mac: vidrio tipo Liquid Glass, tipografía del sistema, barra flotante en iPhone/iPad.
   html[data-familia="android"] → Material: superficies sólidas, botones y campos Material, FAB extendido, onda al tocar.
   html[data-familia="otro"]    → Windows y demás: el diseño base de styles.css. */

/* ───────────── Apple ───────────── */
html[data-familia="apple"]{
  --ui:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;
  --vidrio:rgba(252,251,247,.62);
  --vidrio-borde:rgba(255,255,255,.8);
  --vidrio-luz:rgba(255,255,255,.95);
  --vidrio-brillo:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.12) 45%,rgba(255,255,255,0));
}
html[data-familia="apple"] body{font-family:var(--ui);letter-spacing:-.01em}

/* Material de vidrio: desenfoque + saturación + filo de luz arriba + sombra suave. */
html[data-familia="apple"] :is(.site-header,.dock,.art-tag,.about-art>span,.service-card,.contact-form-wrap,.button-ghost){
  background-color:var(--vidrio);
  background-image:var(--vidrio-brillo);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--vidrio-borde);
  box-shadow:inset 0 1px 0 var(--vidrio-luz),0 10px 30px rgba(16,48,75,.10);
}
/* La cabecera flota como una barra de vidrio separada del borde. */
html[data-familia="apple"] .site-header{
  position:sticky;top:calc(env(safe-area-inset-top) + 8px);
  margin:0 clamp(10px,2.5vw,32px);border-radius:28px;
  background-color:rgba(252,251,247,.74);
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
}
html[data-familia="apple"] .header-inner{min-height:72px}
html[data-familia="apple"] .brand img{height:56px}
html[data-familia="apple"] .service-card{border-radius:24px}
html[data-familia="apple"] .service-card:hover{box-shadow:inset 0 1px 0 var(--vidrio-luz),0 18px 40px rgba(16,48,75,.14)}
html[data-familia="apple"] .contact-form-wrap{border-radius:28px}
html[data-familia="apple"] :is(.youth-section,.contact-banner){border-radius:28px}
html[data-familia="apple"] .button{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 26px rgba(10,120,211,.24)}
html[data-familia="apple"] .button-verde{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 26px rgba(91,191,42,.26)}
html[data-familia="apple"] input,html[data-familia="apple"] select,html[data-familia="apple"] textarea{border-radius:14px;background-color:rgba(255,255,255,.75)}
html[data-familia="apple"] .demo{border-radius:0}

/* Mac: el botón de WhatsApp también es de vidrio, teñido de verde. */
html[data-os="macos"] .wa-float{
  background:rgba(31,168,85,.8) var(--vidrio-brillo);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 12px 30px rgba(0,0,0,.2);
}

/* iPhone y iPad: barra flotante de vidrio abajo (como la de iOS 26) con las páginas y WhatsApp.
   El menú hamburguesa y el botón flotante sobran. */
html:is([data-os="ios"],[data-os="ipados"]) .dock{
  display:flex;gap:2px;position:fixed;z-index:40;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 10px);
  width:min(480px,calc(100% - 24px));padding:6px;border-radius:999px;
  background-color:rgba(252,251,247,.76);
}
html:is([data-os="ios"],[data-os="ipados"]) .dock a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 4px 6px;border-radius:999px;
  color:var(--tinta-2);font-size:11px;font-weight:600;letter-spacing:0;min-width:0;
  transition:background-color .2s ease;
}
html:is([data-os="ios"],[data-os="ipados"]) .dock a span{white-space:nowrap}
html:is([data-os="ios"],[data-os="ipados"]) .dock a[aria-current="page"]{background:rgba(10,120,211,.12);color:var(--azul-osc)}
html:is([data-os="ios"],[data-os="ipados"]) .dock .dock-wa{color:#15803d}
html:is([data-os="ios"],[data-os="ipados"]) .wa-float{display:none}
html:is([data-os="ios"],[data-os="ipados"]) .menu-toggle{display:none}
html:is([data-os="ios"],[data-os="ipados"]) .footer-bottom{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
@media (max-width:820px){
  html:is([data-os="ios"],[data-os="ipados"]) .header-inner nav{display:none}
  html:is([data-os="ios"],[data-os="ipados"]) .header-cta{display:inline-flex;margin-left:auto}
}
@media (min-width:821px){
  html[data-os="ipados"] .header-inner nav{display:none}
}

/* ───────────── Android (Material) ───────────── */
html[data-familia="android"]{
  --ui:Roboto,"Google Sans","Noto Sans",system-ui,sans-serif;
  --sup:#fff;
  --sup-alta:#eef4f8;
  --contorno:#9fb3c0;
}
html[data-familia="android"] body{font-family:var(--ui)}
html[data-familia="android"] .site-header{background:var(--papel);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:0;box-shadow:0 2px 6px rgba(16,48,75,.12),0 1px 2px rgba(16,48,75,.10)}
html[data-familia="android"] .button{border-radius:20px;min-height:48px;font-weight:500;letter-spacing:.01em;box-shadow:0 1px 3px rgba(16,48,75,.25)}
html[data-familia="android"] .button:hover{transform:none;box-shadow:0 2px 6px rgba(16,48,75,.3)}
html[data-familia="android"] .button-ghost{border-color:var(--contorno);box-shadow:none}
html[data-familia="android"] .menu-toggle{border:0;border-radius:50%;background:transparent}
html[data-familia="android"] .service-card{border:0;border-radius:12px;background:var(--sup);box-shadow:0 1px 3px rgba(16,48,75,.2)}
html[data-familia="android"] .service-card:hover{transform:none;box-shadow:0 4px 10px rgba(16,48,75,.2)}
html[data-familia="android"] :is(.youth-section,.contact-banner,.contact-form-wrap,.message-preview){border-radius:16px}
html[data-familia="android"] .contact-form-wrap{border:0;box-shadow:0 1px 3px rgba(16,48,75,.2)}
html[data-familia="android"] :is(.art-frame,.about-art){border-radius:16px;box-shadow:0 1px 3px rgba(16,48,75,.2)}
html[data-familia="android"] .art-tag,html[data-familia="android"] .about-art>span{border-radius:8px;background:rgba(255,255,255,.94)}
/* Campos Material "filled": fondo tenue, borde solo abajo, que se engrosa al enfocar. */
html[data-familia="android"] input,html[data-familia="android"] select,html[data-familia="android"] textarea{border:0;border-bottom:1px solid var(--contorno);border-radius:4px 4px 0 0;background:var(--sup-alta);min-height:56px}
html[data-familia="android"] input:focus,html[data-familia="android"] select:focus,html[data-familia="android"] textarea:focus{box-shadow:inset 0 -2px 0 var(--azul);border-color:var(--azul)}
/* FAB extendido de Material: esquina de 16 px, siempre con texto; se encoge al bajar. */
html[data-familia="android"] .wa-float{border-radius:16px;padding:16px 20px 16px 16px;box-shadow:0 6px 10px rgba(0,0,0,.2),0 2px 3px rgba(0,0,0,.25);transition:padding .25s ease,gap .25s ease}
html[data-familia="android"] .wa-float:hover{transform:none}
html[data-familia="android"] .wa-float span{display:inline-block;max-width:14em;white-space:nowrap;overflow:hidden;transition:max-width .25s ease,opacity .2s ease}
html[data-familia="android"] .wa-float.is-compacto{padding:16px;gap:0}
html[data-familia="android"] .wa-float.is-compacto span{max-width:0;opacity:0}
/* Onda al tocar (la crea app.js). */
html[data-familia="android"] :is(.button,.service-card,.menu-toggle,.header-inner nav a,.text-link){position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent}
html[data-familia="android"] .wa-float{overflow:hidden;-webkit-tap-highlight-color:transparent} /* ya es fixed: no tocar position */
.onda{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.18;transform:scale(0);animation:onda .5s ease-out forwards}
@keyframes onda{to{transform:scale(1);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .onda{display:none}
  html:is([data-os="ios"],[data-os="ipados"]) .dock a{transition:none}
  html[data-familia="android"] .wa-float,html[data-familia="android"] .wa-float span{transition:none}
}
/* Sin soporte de desenfoque (navegadores viejos): vidrio sólido y legible. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-familia="apple"] :is(.site-header,.dock,.art-tag,.about-art>span,.service-card,.contact-form-wrap,.button-ghost){background-color:rgba(252,251,247,.97)}
}