/* =============================================================
   Tema claro (html[data-theme="light"]) y botón de cambio de tema.
   El hero, la cabecera del portafolio y la galería siguen oscuros:
   van sobre fotografía o video y necesitan texto blanco.
   ============================================================= */

/* ── Botón claro / oscuro ─────────────────────────────────────── */
.nav-acciones { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: .6rem; }
.nav-acciones .btn-nav, .nav-acciones .burger { grid-column: auto; justify-self: auto; }
.tema-toggle {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .28); color: #fff;
  background: rgba(8, 13, 24, .25);
  transition: background-color .3s, border-color .3s, color .3s, transform .3s;
}
.tema-toggle:hover { border-color: var(--accent); transform: rotate(-12deg); }
.tema-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tema-toggle svg { width: 19px; height: 19px; }
.tema-toggle .ico-sol { display: none; }
html[data-theme="light"] .tema-toggle .ico-luna { display: none; }
html[data-theme="light"] .tema-toggle .ico-sol { display: block; }

/* Logotipo: versión clara u oscura según el fondo. */
.marca-logo--oscuro { display: none; }

/* ── Paleta clara ─────────────────────────────────────────────── */
html[data-theme="light"] {
  color-scheme: light;
  --bg:        #FFFFFF;
  --bg-2:      #F2F4F7;
  --card:      #FFFFFF;
  --card-2:    #F7F8FA;
  --paper:     #0E1625;
  --paper-2:   #364152;
  --paper-3:   #667085;
  --accent:    #D3202A;
  --accent-2:  #B5161F;
  --accent-3:  #D3202A;
  --line:      rgba(20, 27, 40, .16);
  --line-soft: rgba(20, 27, 40, .09);
}

/* Bloques que siguen oscuros: devuelven la paleta original a su interior. */
html[data-theme="light"] :is(.hero, .portada, .photo-dialog, .mision, .demo-caption, .porque-foto) {
  --bg: #080D18; --bg-2: #0B1220; --card: #111A2B; --card-2: #16203A;
  --paper: #FFFFFF; --paper-2: #DCE3EC; --paper-3: #9FABBB;
  --accent: #FF3030; --accent-3: #FF3030;
  --line: rgba(255, 255, 255, .12); --line-soft: rgba(255, 255, 255, .07);
  color: var(--paper);
}
html[data-theme="light"] .hero { background: #080D18; }
html[data-theme="light"] .portada { background-color: #080D18; }
html[data-theme="light"] .demo-caption { background: #111A2B; }

/* Cabecera: transparente sobre el hero, clara al bajar. */
html[data-theme="light"] .nav.compacta { background: rgba(255, 255, 255, .92); border-bottom-color: var(--line); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme="light"] .nav.compacta { background: rgba(255, 255, 255, .98); }
}
html[data-theme="light"] .nav.compacta .nav-link { color: var(--paper-2); }
html[data-theme="light"] .nav.compacta .nav-link:hover,
html[data-theme="light"] .nav.compacta .nav-link.activo { color: var(--paper); }
html[data-theme="light"] .nav.compacta .nav-link::before { background: rgba(20, 27, 40, .07); }
html[data-theme="light"] .nav:not(.compacta) .burger span { background: #fff; }
html[data-theme="light"] .nav.compacta .tema-toggle { color: var(--paper); border-color: var(--line); background: #fff; }
html[data-theme="light"] .nav.compacta .marca-logo--claro { display: none; }
html[data-theme="light"] .nav.compacta .marca-logo--oscuro { display: block; mix-blend-mode: multiply; }

/* Menú móvil. */
html[data-theme="light"] .menu-movil { background: rgba(255, 255, 255, .98); color: var(--paper); }

/* Textos y tarjetas con colores fijos en el diseño oscuro. */
html[data-theme="light"] .serv-mas li { color: var(--paper-2); }

html[data-theme="light"] .perfil { background: var(--card); box-shadow: 0 18px 40px -28px rgba(20, 27, 40, .35); }
html[data-theme="light"] .perfil .perfil-certs li span { color: #fff; }
html[data-theme="light"] .profile-area { color: var(--paper-3); }
html[data-theme="light"] :is(.serv, .tarjeta-proy, .proy, .formulario) { box-shadow: 0 16px 36px -28px rgba(20, 27, 40, .35); }
html[data-theme="light"] .serv:hover, html[data-theme="light"] .serv:focus-within { box-shadow: 0 16px 34px -18px rgba(20, 27, 40, .3); }
html[data-theme="light"] .tarjeta-proy-cifra { color: rgba(20, 27, 40, .25); }

/* Formulario. */
html[data-theme="light"] .campo input,
html[data-theme="light"] .campo select,
html[data-theme="light"] .campo textarea { background: #fff; color: var(--paper); }
html[data-theme="light"] .campo input:focus,
html[data-theme="light"] .campo select:focus,
html[data-theme="light"] .campo textarea:focus { background: #fff; }
html[data-theme="light"] .campo input::placeholder,
html[data-theme="light"] .campo textarea::placeholder { color: #8A93A1; }

/* Portafolio. */
html[data-theme="light"] .proy-n { color: var(--paper); }
html[data-theme="light"] .proy-rol { color: var(--accent-2); background: rgba(211, 32, 42, .07); }
html[data-theme="light"] .project-album summary { color: var(--paper); }
html[data-theme="light"] .filtro .filtro-count { background: rgba(20, 27, 40, .08); }
html[data-theme="light"] .filtro.is-active .filtro-count { background: rgba(255, 255, 255, .25); color: #fff; }


/* Grano de película: más sutil sobre fondo claro. */
html[data-theme="light"] .grano::after { opacity: .025; }

/* Transición suave al cambiar de tema (sin animar la carga inicial). */
html.tema-cambiando, html.tema-cambiando * { transition: background-color .35s ease, color .35s ease, border-color .35s ease !important; }

/* Rótulos y numeraciones: en el diseño oscuro van en blanco; aquí en rojo. */
html[data-theme="light"] :is(.kicker:not(.kicker-raya), .perfil-rol, .tarjeta-proy-n, .proy-n) { color: var(--accent); }
html[data-theme="light"] :is(.hero, .portada) .kicker:not(.kicker-raya) { color: #FF3030; }

/* Párrafos: más cuerpo para que se lean bien sobre fondo claro. */
html[data-theme="light"] :is(.parrafo, .serv > p, .profile-intro, .porque-lista div, .equipo-nota, .proy-desc, .portada-lead) { color: var(--paper-2); font-weight: 400; }
html[data-theme="light"] .hero .hero-lead { font-weight: 400; }

/* Cabecera sobre el video (aún sin bajar): textos blancos. */
html[data-theme="light"] .nav:not(.compacta) { --paper: #FFFFFF; --paper-2: #DCE3EC; }
html[data-theme="light"] .nav:not(.compacta) .nav-link.activo,
html[data-theme="light"] .nav:not(.compacta) .nav-link:hover { color: #fff; }

/* Rótulos sobre fotografía: siempre blancos. */
html[data-theme="light"] :is(.photo-badge, .rain-pause, .hero-flecha) { color: #fff; }
html[data-theme="light"] .proy-cover .proy-n, html[data-theme="light"] .photo-badge { color: #fff; }

/* ── Tema claro: secciones alternas blanco / gris frío ─────────── */
html[data-theme="light"] body { background: #FFFFFF; }
html[data-theme="light"] :is(.servicios, .porque, .contacto, .cierre) { background: var(--bg-2); }
html[data-theme="light"] :is(.nosotros, .proyectos, .equipo, .listado) { background: #FFFFFF; }
html[data-theme="light"] .tira { background: #FFFFFF; box-shadow: none; }
html[data-theme="light"] .geo-background { opacity: .1; }

/* Tarjetas: blancas con borde fino y sombra suave. */
html[data-theme="light"] :is(.serv, .tarjeta-proy, .proy, .perfil, .formulario, .porque-panel) {
  background: #FFFFFF; border: 1px solid #E4E7EC;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 12px 32px -18px rgba(16, 24, 40, .22);
}
html[data-theme="light"] .equipo .perfil, html[data-theme="light"] .proyectos .tarjeta-proy { background: #F9FAFB; }
html[data-theme="light"] .perfil { border-top: 3px solid var(--accent); }
html[data-theme="light"] :is(.serv:hover, .tarjeta-proy:hover) { border-color: var(--accent); box-shadow: 0 18px 40px -20px rgba(211, 32, 42, .35); }

/* Controles y chips. */
html[data-theme="light"] :is(.mando, .filtro) { background: #FFFFFF; border: 1px solid #D0D5DD; color: var(--paper); }
html[data-theme="light"] .filtro.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
html[data-theme="light"] .demo-chapters button { background: #FFFFFF; border: 1px solid #D0D5DD; color: var(--paper-2); }
html[data-theme="light"] .project-demo { background: #FFFFFF; border: 1px solid #E4E7EC; }
html[data-theme="light"] :is(.serv-ico, .porque-ico, .contacto-ico) { background: #FDECEC; }
html[data-theme="light"] .btn-linea { border-color: #D0D5DD; color: var(--paper); background: #FFFFFF; }
html[data-theme="light"] .btn-linea:hover { border-color: var(--accent); color: var(--accent); }
html[data-theme="light"] .campo :is(input, select, textarea) { border-color: #D0D5DD; }

/* Pie oscuro en ambos temas para enmarcar la lava. */