/* ========= Respeta reduce-motion ========= */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ========= Tokens de tema (oscuro por defecto) ========= */
:root {
  --accent: #ff5ec4;         /* rosa neón */
  --text:   #ffffff;
  --muted:  #cfd2d6;
  --bg-1:   #0f1214;         /* body */
  --bg-2:   #1e2326;         /* secciones oscuras */
  --bg-3:   #252A2E;         /* secciones alternas */
  --header-rgba: 64,74,81;   /* gris header (RGB) */
}

/* Tema CLARO si se activa html[data-theme="light"] */
html[data-theme="light"] {
  --text:   #101114;
  --muted:  #3d4451;
  --bg-1:   #f6f7fb;
  --bg-2:   #ffffff;
  --bg-3:   #f1f3f7;
  --header-rgba: 230,232,236;
}

/* Aplicar tokens a fondo/texto generales */
body { background-color: var(--bg-1); color: var(--text); }

/* ========= Navbar transparente -> gris translúcido al scrollear ========= */
.contenedor-header{
  background: transparent !important;
  backdrop-filter: none;
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
body.scrolled .contenedor-header{
  background: rgba(var(--header-rgba), .65) !important;
  backdrop-filter: saturate(140%) blur(6px);
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}

/* Subrayado magnético del menú + estado active */
.contenedor-header header nav{
  position: relative;
  --underline-left: 0px;
  --underline-width: 0px;
}
.contenedor-header header nav .ink {
  position:absolute;
  bottom:-6px; height:3px; border-radius:3px;
  background: var(--accent);
  left:var(--underline-left); width:var(--underline-width);
  transition:left .25s ease, width .25s ease, opacity .25s ease;
  opacity:.95;
}
.contenedor-header header nav a.active{
  color: var(--accent) !important;
  text-shadow: 0 0 8px rgba(255,94,196,.35);
}

/* ========= Héroe ========= */
.inicio .contenido-banner{
  background: rgba(30,35,38,.85);
  box-shadow: 0 12px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  transform-style: preserve-3d;
}
.contenedor-img img { will-change: transform; }

/* ========= Botones: ripple sutil ========= */
button, .boton-ateris, .contacto button{ position: relative; overflow: hidden; }
button::after, .boton-ateris::after, .contacto button::after{
  content:""; position:absolute; inset:auto; width:0; height:0; border-radius:50%;
  transform:translate(-50%,-50%); background: rgba(254,222,255,.25);
  pointer-events:none; opacity:0;
  transition: width .45s ease, height .45s ease, opacity .45s ease;
}
button:active::after, .boton-ateris:active::after, .contacto button:active::after{
  width:260px; height:260px; opacity:1;
}

/* ========= Reveal base ========= */
.reveal{ opacity:0; transform: translateY(24px) scale(.98); }
.reveal.in{ opacity:1; transform: none;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .6s ease; }

/* ========= Cards lista de cursos ========= */
.arup li article{
  border-radius: 16px;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.arup li:hover article{ transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.arup li article svg path{ filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); }

/* ========= Skills ========= */
.skills .skill .barra-skill span{ box-shadow: 0 6px 14px rgba(254,222,255,.35); }

/* ========= Portfolio overlay ========= */
.portfolio .galeria .proyecto .overlay{
  backdrop-filter: blur(2px);
  transition: opacity .45s ease, transform .45s ease;
  transform: translateY(6px);
}
.portfolio .galeria .proyecto .overlay:hover{ transform: none; }

/* ========= Contacto panel info ========= */
.contacto .col .info{
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

/* ========= Flyout de preview PDFs ========= */
@media (hover:hover) and (pointer:fine) {
  .preview-flyout {
    position: fixed; top: 0; left: 0;
    width: clamp(280px, 36vw, 520px);
    height: clamp(180px, 28vw, 360px);
    pointer-events: none;
    background: rgba(20,20,22,.9);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 18px 48px rgba(0,0,0,.45);
    opacity: 0; transform: translate3d(0,8px,0) scale(.98);
    transition: opacity .18s ease, transform .18s ease;
    z-index: 9999; backdrop-filter: blur(6px) saturate(130%);
  }
  .preview-flyout.in { opacity: 1; transform: none; }
  .preview-flyout iframe { width: 100%; height: 100%; border: 0; background: #0e0f11; }
  .preview-flyout .hint {
    position: absolute; inset: auto 10px 10px auto;
    font-size: 11px; color: #cfcfd4; opacity:.8;
    padding: 4px 8px; border-radius: 8px; background: rgba(255,255,255,.06);
  }
}
@media (prefers-reduced-motion: reduce) { .preview-flyout { transition: none !important; } }

/* ========= Sección LinkedIn ========= */
.linkedin{ background:#1e2326; color:#fff; padding:60px 20px; }
.linkedin .contenido-seccion{ max-width:1100px; margin:auto; }
.linkedin h2{ font-size: 48px; font-family: 'Righteous'; text-align:center; padding: 10px 0 6px; }
.linkedin .sub{ text-align:center; color:#cfd2d6; margin: 0 auto 28px; max-width: 720px; }
.linkedin-grid{ display:grid; gap:18px; grid-template-columns: repeat(12, 1fr); }
.linkedin-card{
  grid-column: span 6;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; overflow:hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  transition: transform .25s ease, box-shadow .25s ease;
}
.linkedin-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.linkedin-card iframe{ width:100%; height: 560px; border:0; background:#0e0f11; display:block; }
.linkedin-card .ph{
  height:560px; display:grid; place-items:center; color:#9aa0a6; font-size:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.btn-linkedin{
  display:inline-block; margin-top:18px; padding:12px 22px; border-radius:999px;
  background:#0a66c2; color:#fff; text-decoration:none; font-weight:600;
  border:1px solid rgba(255,255,255,.1);
}
.btn-linkedin:hover{ filter: brightness(1.08); }
.cta-center{ text-align:center; margin-top:10px; }
@media (max-width:980px){ .linkedin-card{ grid-column: span 12; } }
@media (prefers-reduced-motion: reduce){ .linkedin-card, .btn-linkedin{ transition: none !important; } }

/* ========= Progress bar vertical + dot neón ========= */
#scroll-track{
  position: fixed; right: 10px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 70vh; z-index: 98; border-radius: 999px;
  background: linear-gradient(to bottom, rgba(255,255,255,.08), rgba(255,255,255,.12));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
#scroll-track .dot{
  position: absolute; left: 50%;
  width: 14px; height: 14px; margin-left: -7px; margin-top: -7px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--accent), #ff2ea6 60%, transparent 61%);
  box-shadow: 0 0 14px var(--accent), 0 0 28px rgba(255, 94, 196, .5);
  top: 0%; transition: top .08s linear;
}
@media (max-width: 980px){ #scroll-track{ display:none; } }

/* ========= Preloader ========= */
#preloader{
  position: fixed; inset:0; z-index: 9999;
  display: grid; place-items: center;
  background: radial-gradient( circle at 30% 20%, rgba(255,94,196,.12), transparent 40% ),
              radial-gradient( circle at 70% 80%, rgba(255,94,196,.10), transparent 45% ),
              #0b0d10;
  color: var(--text);
}
#preloader.hidden{
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .4s ease, visibility .4s ease;
}
#preloader .preloader-inner{ position: relative; width: 140px; height: 140px; display:grid; place-items:center; }
#preloader .brand{ font: 700 26px/1 'Righteous', system-ui; letter-spacing: .5px; color: var(--text); }
#preloader .ring, #preloader .ring::before, #preloader .ring::after{
  content: ""; position: absolute; border-radius: 50%; inset: 0; border: 3px solid transparent;
}
#preloader .ring{ border-top-color: var(--accent); animation: spin 1s linear infinite; filter: drop-shadow(0 0 12px var(--accent)); }
#preloader .ring::before{ inset: 10px; border-right-color: rgba(255,255,255,.25); animation: spinR .85s linear infinite; }
#preloader .ring::after{ inset: 20px; border-bottom-color: rgba(255,255,255,.15); animation: spin 1.2s linear infinite; }
@keyframes spin{ to { transform: rotate(360deg); } }
@keyframes spinR{ to { transform: rotate(-360deg); } }

/* ========= Toggle de tema flotante (si lo usas) ========= */
.theme-toggle{
  position: fixed; left: 12px; bottom: 12px; z-index: 98;
  width: 42px; height: 42px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.35); color: #fff; display:grid; place-items:center;
  box-shadow: 0 8px 20px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
  cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.theme-toggle:hover{ transform: translateY(-2px); background: rgba(0,0,0,.45); }
.theme-toggle .sun{ display:none; }
html[data-theme="light"] .theme-toggle { background:#ffffff; color:#111; border-color: rgba(0,0,0,.12); }
html[data-theme="light"] .theme-toggle .sun{ display:inline; }
html[data-theme="light"] .theme-toggle .moon{ display:none; }
html:not([data-theme="light"]) .theme-toggle .sun{ display:none; }
html:not([data-theme="light"]) .theme-toggle .moon{ display:inline; }

/* ========= Secciones a tokens (conserva look) ========= */
.sobremi{ background-color: var(--bg-2) !important; color: var(--text); }
.skills{ background-color: var(--bg-3) !important; color: var(--text); }
.curriculum{ background-color: var(--bg-2) !important; color: var(--text); }
.portfolio{ background-color: var(--bg-3) !important; color: var(--text); }
.contacto{ background-color: var(--bg-2) !important; color: var(--text); }

/* ========= Acentos rosas existentes ========= */
.sobremi .contenido-seccion p span,
.sobremi .fila .col ul li strong,
.curriculum .fila .item .casa,
.curriculum .fila .item .fecha,
.skills .skill .barra-skill span,
footer .arriba { color: var(--accent) !important; }
.inicio .contenido-banner img { border-color: var(--accent) !important; }
.sobremi .fila .col .contenedor-intereses .interes:hover,
.contacto button .overlay,
.sobremi button .overlay { background-color: var(--accent) !important; }
footer .arriba { background-color: var(--accent) !important; }

/* ========= Switch de tema en header ========= */
.theme-switch-wrap{ margin-left: 10px; }
.contenedor-header header{ gap: 10px; }
.theme-switch input{ display:none; }
.theme-switch .track{
  position: relative;
  width: 56px; height: 30px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: space-between;
  padding: 0 8px; gap: 6px;
  background: rgba(var(--header-rgba), .35);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.theme-switch .track .fa-moon, .theme-switch .track .fa-sun{ font-size: 13px; opacity: .9; }
.theme-switch .thumb{
  position: absolute; top: 4px; left: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent), 0 0 24px rgba(255,94,196,.45);
  transition: transform .18s ease;
}
.theme-switch input:checked + .track .thumb{ transform: translateX(26px); }
.theme-switch input:checked + .track .fa-moon{ opacity: .45; }
.theme-switch input:checked + .track .fa-sun{ opacity: .95; }

@media (max-width: 700px){
  .theme-switch-wrap{ margin-left: 6px; }
}


/* ===== NAV MÓVIL BONITO / LIMPIO ===== */
@media (max-width:980px){
  /* Quita el “glass pill” del UL cuando el menú es vertical */
  .contenedor-header header ul{
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* Oculta la tinta (.ink) en móvil para que no se desplace raro */
  .contenedor-header header nav .ink{ display:none !important; }

  /* Usa tu nav.responsive pero con un look más moderno (blur y bordes suaves) */
  nav.responsive{
    background: rgba(var(--header-rgba), .95) !important;
    backdrop-filter: blur(10px) saturate(140%) !important;
    border: 1px solid rgba(255,255,255,.10);
    width: min(80vw, 280px);
    right: 10px !important;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
  }
  nav.responsive ul li{ border-bottom: 1px solid rgba(255,255,255,.12); }
  nav.responsive ul li:last-child{ border-bottom: 0; }
  nav.responsive ul li a{
    display:block; padding: 12px 16px; color: var(--text) !important;
  }

  /* Tema claro dentro del menú móvil */
  html[data-theme="light"] nav.responsive{
    background: rgba(255,255,255,.95) !important;
    border-color: #e8ecf3 !important;
    box-shadow: 0 18px 40px rgba(16,17,20,.10);
  }
  html[data-theme="light"] nav.responsive ul li{ border-bottom-color: #e8ecf3; }
  html[data-theme="light"] nav.responsive ul li a{ color:#101114 !important; }
}

/* ===== Tema claro: arregla contraste en tarjetas/listas ===== */

/* LinkedIn usa tokens del tema (no valores fijos oscuros) */
.linkedin{ background: var(--bg-2) !important; color: var(--text) !important; }

html[data-theme="light"] .linkedin-card{
  background:#ffffff;
  border:1px solid #e8ecf3;
  box-shadow: 0 8px 20px rgba(16,17,20,.06);
}
html[data-theme="light"] .linkedin-card .ph{
  color:#6b7280;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01));
}

/* Certificados / items / paneles de info: fondo claro + texto oscuro */
html[data-theme="light"] .arup li article,
html[data-theme="light"] .curriculum .item,
html[data-theme="light"] .contacto .col .info{
  background:#ffffff !important;
  color:#101114 !important;
  border:1px solid #e8ecf3 !important;
  box-shadow: 0 8px 20px rgba(16,17,20,.06);
}

/* Títulos/enlaces internos de esas tarjetas: texto oscuro */
html[data-theme="light"] .arup li article h1,
html[data-theme="light"] .arup li article h2,
html[data-theme="light"] .arup li article h3,
html[data-theme="light"] .arup li article p,
html[data-theme="light"] .arup li article a{
  color:#101114 !important;
}

/* Inputs del formulario en claro */
html[data-theme="light"] .contacto .col input,
html[data-theme="light"] .contacto .col textarea{
  background-color: #ffffff !important;
  color: #101114 !important;
  border: 1px solid #e3e7ee !important;
}

/* Links del navbar según tema (por si en tu CSS hay #fff hardcodeado) */
.contenedor-header header nav a{ color: var(--text); }
html[data-theme="light"] .contenedor-header header nav a{ color:#101114 !important; }

/* ====== HÉROE en tema claro ====== */
html[data-theme="light"] .inicio{
  /* mismo GIF, pero velo blanco en vez de negro */
  background: linear-gradient(to top, rgba(255,255,255,.78), rgba(255,255,255,.92)), url(img/fondo.gif);
  background-size: cover;
  color: var(--text);
}
html[data-theme="light"] .inicio .contenido-banner{
  background: rgba(255,255,255,.85) !important;
  color: #101114 !important;
  border: 1px solid #e8ecf3;
  box-shadow: 0 8px 24px rgba(16,17,20,.06), inset 0 1px 0 rgba(16,17,20,.04);
}
html[data-theme="light"] .inicio .contenido-banner h1,
html[data-theme="light"] .inicio .contenido-banner h2{ color:#101114 !important; }
html[data-theme="light"] .inicio .contenido-banner .redes a{
  color:#101114 !important; border-color:#101114 !important;
}
html[data-theme="light"] .inicio .contenido-banner .redes a:hover{
  background-color: var(--accent); color:#fff !important; border-color: var(--accent) !important;
}

/* ====== CERTIFICADOS (ARUP) en tema claro ====== */
html[data-theme="light"] .arup li article{
  background:#ffffff !important;
  color:#101114 !important;
  border:1px solid #e8ecf3 !important;
  box-shadow: 0 8px 20px rgba(16,17,20,.06);
}
html[data-theme="light"] .arup li article h3 a,
html[data-theme="light"] .arup li article p,
html[data-theme="light"] .arup li article a{
  color:#101114 !important;
}
/* por si tu UL usa el highlight con ::after, cámbialo a claro */
html[data-theme="light"] ul.arup::after{ background:#f6f7fb !important; }
/* iconos de las tarjetas más suaves en claro */
html[data-theme="light"] .arup li article svg path{ stroke:#6b7280 !important; }

/* enlaces sueltos dentro de la sección portfolio (ej: “mi CV”) */
html[data-theme="light"] .portfolio .contenido-seccion a{ color:#101114 !important; }

/* ====== CONTRASTE FUERTE EN TEMA CLARO (texto bien oscuro) ====== */
:root{ --text-strong: #0f1114; } /* más oscuro que #101114 */

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6,
html[data-theme="light"] p,
html[data-theme="light"] li,
html[data-theme="light"] dt,
html[data-theme="light"] dd,
html[data-theme="light"] small,
html[data-theme="light"] label,
html[data-theme="light"] a:not(.btn):not(.redes a) {
  color: var(--text-strong) !important;
}

/* place­holders más suaves (pero legibles) */
html[data-theme="light"] ::placeholder { color:#6b7280 !important; }

/* Enlaces dentro de portfolio (ej. “mi CV”) */
html[data-theme="light"] .portfolio .contenido-seccion a{ color: var(--text-strong) !important; }
/* Párrafo de portfolio arriba de certificados */
html[data-theme="light"] .portfolio .contenido-seccion p{ color: var(--text-strong) !important; }

/* ====== HÉROE (tu tarjeta) bien claro y legible ====== */
html[data-theme="light"] .inicio{
  background: linear-gradient(to top, rgba(255,255,255,.78), rgba(255,255,255,.92)), url(img/fondo.gif);
  background-size: cover;
}
html[data-theme="light"] .inicio .contenido-banner{
  background: rgba(255,255,255,.90) !important;
  color: var(--text-strong) !important;
  border: 1px solid #e8ecf3;
  box-shadow: 0 10px 28px rgba(16,17,20,.06), inset 0 1px 0 rgba(16,17,20,.04);
}
html[data-theme="light"] .inicio .contenido-banner h1,
html[data-theme="light"] .inicio .contenido-banner h2{ color: var(--text-strong) !important; }
html[data-theme="light"] .inicio .contenido-banner .redes a{
  color: var(--text-strong) !important; border-color: var(--text-strong) !important;
}
html[data-theme="light"] .inicio .contenido-banner .redes a:hover{
  background-color: var(--accent); color:#fff !important; border-color: var(--accent) !important;
}

/* ====== CERTIFICADOS (ARUP) — texto 100% oscuro ====== */
html[data-theme="light"] .arup li article{
  background:#ffffff !important;
  color: var(--text-strong) !important;
  border:1px solid #e8ecf3 !important;
  box-shadow: 0 8px 20px rgba(16,17,20,.06);
}
html[data-theme="light"] .arup li article h3,
html[data-theme="light"] .arup li article h3 a,
html[data-theme="light"] .arup li article p,
html[data-theme="light"] .arup li article a{
  color: var(--text-strong) !important;
}
/* Si tu UL hace highlight con ::after, que sea clarito */
html[data-theme="light"] ul.arup::after{ background:#f6f7fb !important; }
/* iconos más sutiles en claro */
html[data-theme="light"] .arup li article svg path{ stroke:#6b7280 !important; }

/* ====== CONTACTO — inputs y BOTÓN Enviar visibles en claro ====== */
html[data-theme="light"] .contacto{ background-color: var(--bg-2) !important; }
html[data-theme="light"] .contacto .col input,
html[data-theme="light"] .contacto .col textarea{
  background:#fff !important; color: var(--text-strong) !important; border:1px solid #e3e7ee !important;
}
/* Botón (sobrescribe tu estilo oscuro) */
html[data-theme="light"] .contacto button,
html[data-theme="light"] .sobremi button{
  color: var(--text-strong) !important;
  border-color: var(--text-strong) !important;
  background: transparent !important;
}
html[data-theme="light"] .contacto button .overlay,
html[data-theme="light"] .sobremi button .overlay{
  background: var(--accent) !important; /* relleno rosa en hover */
}
html[data-theme="light"] .contacto button:hover,
html[data-theme="light"] .sobremi button:hover{
  color:#fff !important; border-color: var(--accent) !important;
}

/* Subtítulo de LinkedIn en claro (antes gris pálido) */
html[data-theme="light"] .linkedin .sub{ color:#3d4451 !important; }

/* ====== NAV móvil (ya bonito) asegura texto oscuro en claro ====== */
html[data-theme="light"] nav.responsive ul li a{ color: var(--text-strong) !important; }




/* ========== CERTIFICADOS: LEGIBILIDAD + LOOK ========== */

/* 0) Ajusto el token --bg del patrón decorativo de tus cards
      (tu style.css lo usa en article::before). En claro lo vuelvo muy claro
      para que NO ensucie el texto. */
html[data-theme="light"] { --bg: hsl(0 0% 96%) !important; }

/* 1) Contenedor de la sección */
html[data-theme="light"] #portfolio { 
  background: var(--bg-3) !important; 
  color: #0f1114 !important;
}
html[data-theme="light"] #portfolio .contenido-seccion p,
html[data-theme="light"] #portfolio .contenido-seccion a {
  color:#0f1114 !important;
}

/* 2) Tarjetas (article) dentro de la lista .arup */
html[data-theme="light"] .arup li article{
  background:#ffffff !important;
  color:#0f1114 !important;
  border:1px solid #e8ecf3 !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(16,17,20,.06) !important;
  padding: 16px !important;
}

/* 3) Títulos, enlaces y párrafos NEGROS (pase lo que pase) */
html[data-theme="light"] .arup li article h1,
html[data-theme="light"] .arup li article h2,
html[data-theme="light"] .arup li article h3,
html[data-theme="light"] .arup li article p,
html[data-theme="light"] .arup li article a,
html[data-theme="light"] .arup li article h3 a,
html[data-theme="light"] .arup li article h3 a[style]{
  color:#0f1114 !important;
  -webkit-text-fill-color:#0f1114 !important; /* por si hay truquitos de fill */
  text-shadow: none !important;
}

/* 4) Estados de enlace y hover (subrayado bonito + acento rosa) */
html[data-theme="light"] .arup li article a:link,
html[data-theme="light"] .arup li article a:visited{ 
  color:#0f1114 !important;
}
html[data-theme="light"] .arup li article a:hover{
  color: var(--accent) !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* 5) Iconos SVG dentro de las cards (que no queden lavados) */
html[data-theme="light"] .arup li article svg path{
  stroke: #374151 !important; /* gris oscuro legible */
}

/* 6) “Resaltado” del UL (tu efecto con ::after) en claro */
html[data-theme="light"] ul.arup::after{
  background:#ffffff !important;
  border-radius: 16px !important;
  box-shadow: inset 0 0 0 1px #e8ecf3;
}

/* 7) Flyout/preview del PDF con bordes redondeados extra */
.preview-flyout{ border-radius: 16px !important; overflow: hidden !important; }

/* ========== CONTACTO: botón visible y lindo en claro ========== */
html[data-theme="light"] .contacto .col input,
html[data-theme="light"] .contacto .col textarea{
  background:#ffffff !important;
  color:#0f1114 !important;
  border:1px solid #e3e7ee !important;
}
html[data-theme="light"] .contacto button{
  color:#0f1114 !important;
  border:2px solid #0f1114 !important;
  background:#ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 16px rgba(16,17,20,.06) !important;
}
html[data-theme="light"] .contacto button .overlay{ background: var(--accent) !important; }
html[data-theme="light"] .contacto button:hover{
  color:#ffffff !important;
  border-color: var(--accent) !important;
  background: var(--accent) !important;
}

/* ========== HÉROE: asegurar contraste en claro (por si faltaba en tu build) ========== */
html[data-theme="light"] .inicio{
  background: linear-gradient(to top, rgba(255,255,255,.82), rgba(255,255,255,.96)), url(img/fondo.gif) !important;
  background-size: cover !important;
}
html[data-theme="light"] .inicio .contenido-banner{
  background: rgba(255,255,255,.92) !important;
  color:#0f1114 !important;
  border:1px solid #e8ecf3 !important;
  box-shadow: 0 10px 28px rgba(16,17,20,.06), inset 0 1px 0 rgba(16,17,20,.04) !important;
}
html[data-theme="light"] .inicio .contenido-banner h1,
html[data-theme="light"] .inicio .contenido-banner h2{ color:#0f1114 !important; }
html[data-theme="light"] .inicio .contenido-banner .redes a{
  color:#0f1114 !important; border-color:#0f1114 !important;
}
html[data-theme="light"] .inicio .contenido-banner .redes a:hover{
  background: var(--accent) !important; color:#fff !important; border-color: var(--accent) !important;
}


/* ========== CERTIFICADOS — TEXTO 100% LEGIBLE EN CLARO + BORDES BONITOS ========== */

/* Apaga cualquier efecto que lave el texto en el portfolio */
html[data-theme="light"] #portfolio,
html[data-theme="light"] #portfolio *{
  text-shadow: none !important;
}

/* Card base */
html[data-theme="light"] .arup li article{
  background:#ffffff !important;
  color:#0b0d10 !important;                 /* texto oscuro real */
  border:1px solid #e8ecf3 !important;
  border-radius:16px !important;             /* bordes redondeados */
  box-shadow: 0 10px 24px rgba(16,17,20,.06) !important;
  padding:16px !important;
}

/* Títulos/enlaces del título */
html[data-theme="light"] .arup li article h1,
html[data-theme="light"] .arup li article h2,
html[data-theme="light"] .arup li article h3,
html[data-theme="light"] .arup li article h3 a,
html[data-theme="light"] .arup li article h3 a[style]{
  color:#0b0d10 !important;
  -webkit-text-fill-color:#0b0d10 !important; /* por si había clip */
  font-weight: 700 !important;
}

/* Párrafos: color bien oscuro + desactivar background-clip */
html[data-theme="light"] .arup li article p{
  color:#0b0d10 !important;
  -webkit-text-fill-color:#0b0d10 !important;
  background:none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: .1px;
}

/* Enlaces dentro de la card (no-título) */
html[data-theme="light"] .arup li article a{
  color:#0b0d10 !important;
}
html[data-theme="light"] .arup li article a:hover{
  color: var(--accent) !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* Iconos */
html[data-theme="light"] .arup li article svg path{
  stroke:#374151 !important;
}

/* El resaltado del UL (tu ::after) en claro, redondeado */
html[data-theme="light"] ul.arup::after{
  background:#ffffff !important;
  border-radius:16px !important;
  box-shadow: inset 0 0 0 1px #e8ecf3;
}

/* OFFSET GLOBAL PARA ANCLAS (compensa el header fijo) */
html{ scroll-padding-top: var(--nav-offset, 90px) !important; }
section[id]{ scroll-margin-top: var(--nav-offset, 90px) !important; }



/* === OFFSET GLOBAL PARA ANCLAS (siempre compensa el header fijo) === */
html{ scroll-padding-top: var(--nav-offset, 90px) !important; }
section[id]{ scroll-margin-top: var(--nav-offset, 90px) !important; }

/* fallback adicional por si el hash llega por URL o desde fuera del menú */
section[id]::before{
  content:""; display:block;
  height: var(--nav-offset, 90px);
  margin-top: calc(-1 * var(--nav-offset, 90px));
  pointer-events:none;
}


/* El header se vuelve un poco más fluido y compacto en anchos medios */
.contenedor-header header{
  max-width: min(1200px, 94vw);
  padding: 12px 14px;           /* antes 15px 20px: baja un poquito */
  gap: 10px;
  flex-wrap: nowrap;
}

/* La hilera del menú NO se parte y ajusta tipografía/espaciado */
.contenedor-header header nav ul{
  display:flex; align-items:center; flex-wrap: nowrap;
  gap: 6px;                      /* más compacto */
  padding: 6px 10px;
}
.contenedor-header header nav ul li a{
  white-space: nowrap;           /* evita “SOBRE MI” en 2 líneas */
  font-size: clamp(12px, 1.05vw, 13.5px);
  padding: 8px 12px;
}

@media (max-width:1120px){
  .contenedor-header header nav ul li a{ padding: 6px 10px; font-size: 12.5px; }
  .theme-switch .track{ transform: scale(.92); transform-origin:right center; }
  .contenedor-header .logo img{ width: 88px; height:auto; } /* logo un pelín más chico */
}

@media (max-width:980px){
  /* lo que ya tienes para nav.responsive aplica, solo aseguramos estética */
  nav.responsive{
    background: rgba(var(--header-rgba), .95) !important;
    backdrop-filter: blur(10px) saturate(140%) !important;
    border: 1px solid rgba(255,255,255,.10);
    width: min(82vw, 300px);
    right: 10px !important; border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
  }
  nav.responsive ul li{ border-bottom: 1px solid rgba(255,255,255,.12); }
  nav.responsive ul li:last-child{ border-bottom: 0; }
  nav.responsive ul li a{ display:block; padding: 12px 16px; color: var(--text) !important; }

  html[data-theme="light"] nav.responsive{
    background: rgba(255,255,255,.95) !important;
    border-color: #e8ecf3 !important;
    box-shadow: 0 18px 40px rgba(16,17,20,.10);
  }
  html[data-theme="light"] nav.responsive ul li{ border-bottom-color: #e8ecf3; }
  html[data-theme="light"] nav.responsive ul li a{ color:#101114 !important; }
}

/* Header en tema claro (un poco más “airy” y bonito) */
html[data-theme="light"] .contenedor-header{
  box-shadow: 0 8px 26px rgba(16,17,20,.08);
}
html[data-theme="light"] .contenedor-header header ul{
  background: rgba(255,255,255,.70);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}