:root{
      --radius: 20px;
      --pad: 18px;
      --accent: #6F3AFF;
      --accent-2: #AA7DFF;
      --text: #0f1226;
      --muted: #5b5f78;
      --bg: #eef1f6;
      --surface: #f7f9fc;
      --shadow-dark: #c9d1e1;
      --shadow-light: #ffffff;
      --gradient-dark-1: #0b0b1a;
      --gradient-dark-2: #1a0828;
      --gradient-dark-3: #2b1050;
      --text-inv: #eef1f6;
      --header-h-mobile: 68px;
      --header-h-desktop: 72px;
    }

    /* Modo oscuro */
    [data-theme="dark"]{
      --bg: linear-gradient(160deg,var(--gradient-dark-1),var(--gradient-dark-2) 45%,var(--gradient-dark-3));
      --surface: rgba(255,255,255,0.12);
      --text: #E7E7F7;
      --muted: #C5C7DC;
      --shadow-dark: rgba(0,0,0,0.55);
      --shadow-light: rgba(255,255,255,0.08);
    }

    *{ box-sizing:border-box }
    html{ scroll-behavior:smooth }
    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
      background: var(--bg);
      color: var(--text);
      min-height:100dvh;
      overflow-x:hidden;
    }
    .no-scroll{ overflow:hidden }

    .container{ width:min(1120px, 92%); margin-inline:auto }

    /* Visibilidad */
    .desktop-only{ display:flex !important; }
    .mobile-only{ display:none !important; }
    @media (max-width: 960px){
      .desktop-only{ display:none !important; }
      .mobile-only{ display:inline-grid !important; }
      body{ padding-top: calc(env(safe-area-inset-top, 0px) + var(--header-h-mobile)); }
    }

    /* Neumorphism */
    .neo{
      background: var(--surface);
      border-radius: var(--radius);
      box-shadow: 10px 10px 24px var(--shadow-dark), -10px -10px 24px var(--shadow-light);
    }
    .neo-inset{
      background: var(--surface);
      border-radius: var(--radius);
      box-shadow: inset 10px 10px 24px var(--shadow-dark), inset -10px -10px 24px var(--shadow-light);
    }

    /* Header */
    header{
      position: sticky; top:0; z-index: 120;
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      background: transparent;
    }
    [data-theme="dark"] header{
      background: linear-gradient(180deg, rgba(20,20,35,.85), rgba(20,20,35,.45) 80%, transparent);
    }
    @media (max-width:960px){
      header{ position: fixed; inset:0 0 auto 0; height: var(--header-h-mobile); }
    }
    .nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; }
    @media (max-width:960px){ .nav{ padding:12px 0 } }

    .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit }
    .brand .s-badge{ width:44px; height:44px; border-radius:18px; position:relative; display:grid; place-items:center }
    .brand .title{ font-weight:800; letter-spacing:0.3px }
    .s-badge{ background: var(--surface); box-shadow: 8px 8px 18px var(--shadow-dark), -8px -8px 18px var(--shadow-light) }
    .s-badge::after{ content:"S"; font-weight:900; font-size:28px; line-height:1; color:var(--accent); text-shadow: 0 10px 25px rgba(111,58,255,.35); }

    /* ✅ Botones sin subrayado y con aspecto consistente */
    a.btn, .btn, .nav-actions a, .cta a, .mobile-menu a{
      text-decoration: none !important;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
    }
    a.btn:hover, .btn:hover, .nav-actions a:hover, .cta a:hover, .mobile-menu a:hover{
      text-decoration: none !important;
    }

    .btn{ border:none; cursor:pointer; padding:10px 14px; border-radius:14px; font-weight:600 }
    .btn.neo{ display:inline-flex; align-items:center; gap:10px }
    .btn .fa{ font-size:14px }

    .icon-btn{ width:44px; height:44px; padding:0; display:grid; place-items:center; border:none; cursor:pointer; border-radius:14px; }
    .icon-btn svg{ width:22px; height:22px; display:block }
    .icon-btn.active{ outline: 2px solid var(--accent); box-shadow: 10px 10px 24px var(--shadow-dark), -10px -10px 24px var(--shadow-light), 0 0 0 6px rgba(111,58,255,.12); }
    .icon-row{ display:flex; gap:8px; align-items:center }

    .hamburger{ width:44px; height:44px; display:grid; place-items:center; border-radius:14px; border:none; cursor:pointer; }
    .hamburger svg{ width:24px; height:24px }
    .hamburger[aria-expanded="true"]{ outline:2px solid var(--accent) }

    /* ===== MENU MÓVIL ===== */
    .menu-overlay{
      position:fixed; inset:0; background: rgba(0,0,0,.45); z-index: 210;
      opacity:0; pointer-events:none; transition: opacity .25s ease;
    }
    .menu-overlay.show{ opacity:1; pointer-events:auto }

    .mobile-menu{
      position:fixed; top:0; right:0; height:100dvh; width:min(86%, 380px); z-index: 220;
      transform: translateX(100%); transition: transform .28s ease;
      padding:18px; display:flex; flex-direction:column; gap:14px;
    }
    .mobile-menu.show{ transform: translateX(0) }

    /* mismo color que el tema oscuro */
    [data-theme="dark"] #mobile-menu{
      background: linear-gradient(160deg,var(--gradient-dark-1),var(--gradient-dark-2) 45%,var(--gradient-dark-3)) !important;
      box-shadow: 0 10px 30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
      border-left: 1px solid rgba(255,255,255,.06);
    }
    [data-theme="dark"] .menu-overlay{ background: rgba(10,8,20,.55); }

    .mobile-menu .group{ padding:12px; }
    .mobile-menu a{ text-decoration:none; color:inherit; display:flex; align-items:center; gap:10px; padding:12px; border-radius:14px }
    .mobile-menu a:hover{ background: rgba(0,0,0,.06) }
    [data-theme="dark"] .mobile-menu a:hover{ background: rgba(255,255,255,.10) }

    /* Hero */
    .hero{ display:grid; grid-template-columns: 1.1fr 1fr; gap:28px; padding:28px 0 10px; align-items:center }
    @media (max-width:960px){ .hero{ grid-template-columns:1fr; padding:16px 0 8px } }
    .hero-card{ padding:28px; position:relative }
    .tag{ display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.3px }
    .tag i{ color:var(--accent) }
    h1{ font-size: clamp(28px, 4.5vw, 48px); margin:10px 0 6px; line-height:1.05 }
    .lead{ color:var(--muted); font-size: clamp(14px, 1.8vw, 17px) }
    .cta{ margin-top:18px; display:flex; gap:12px; flex-wrap:wrap }
    .cta .btn-primary{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:white }
    .cta .btn-ghost{ background: var(--surface) }

    .profile-card{ padding:28px; display:grid; gap:18px; place-items:center; text-align:center }
    .avatar{ width:140px; height:140px; border-radius:36px; position:relative }
    .avatar::before, .avatar::after{ content:""; position:absolute; inset:0; border-radius:36px; }
    .avatar::before{ background: radial-gradient(circle at 30% 30%, rgba(111,58,255,.6), transparent 45%), radial-gradient(circle at 70% 70%, rgba(170,125,255,.45), transparent 50%); filter: blur(10px) }
    .avatar::after{ content:"S"; display:grid; place-items:center; font-weight:900; font-size:88px; color:var(--accent) }

    .kpis{ width:100%; display:grid; grid-template-columns: repeat(3,1fr); gap:12px }
    .kpi{ padding:14px; text-align:center }
    .kpi b{ font-size:20px }

    section{ padding:38px 0 }
    .section-title{ font-size: clamp(20px, 3vw, 28px); margin:0 0 18px; display:flex; align-items:center; gap:10px }
    .section-title i{ color:var(--accent) }

    .skills{ display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap:14px }
    .skill{ padding:16px; text-align:center; position:relative; overflow:hidden }
    .skill i,.skill svg{ font-size:22px }
    .chip{ margin-top:10px; font-weight:700 }
    .meter{ margin-top:12px; height:10px; border-radius:999px; position:relative }
    .meter::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(90deg, var(--accent), var(--accent-2)) }

    .grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px }
    .card{ padding:18px; display:grid; gap:10px }
    .card h3{ margin:4px 0 0; font-size:18px }
    .card p{ margin:0; color:var(--muted) }

    /* ---------- PROYECTOS DINÁMICOS ---------- */
    #projects{ scroll-margin-top: calc(var(--header-h-mobile) + 10px); }
    .projects-grid{
      display:grid; gap:16px;
      grid-template-columns: repeat(3, 1fr);
    }
    @media (max-width: 1200px){ .projects-grid{ grid-template-columns: repeat(2, 1fr) } }
    @media (max-width: 720px){ .projects-grid{ grid-template-columns: 1fr } }

    .project-card{ display:flex; flex-direction:column; gap:12px; padding:16px }
    .project-media{ position:relative; overflow:hidden; border-radius:14px }
    .slider{
      position:relative; width:100%; overflow:hidden; border-radius:14px;
      aspect-ratio: 16/9; background: rgba(0,0,0,.06);
    }
    .slides{ display:flex; height:100%; width:100%; transition: transform .5s ease; }
    .slide{ min-width:100%; height:100%; display:block }
    .slide img{ width:100%; height:100%; object-fit:cover; display:block }

    .slider-dots{
      position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
      display:flex; gap:6px; padding:6px 10px; border-radius:999px;
      background: rgba(0,0,0,.35);
    }
    .dot{
      width:8px; height:8px; border-radius:999px; background:#fff; opacity:.55; border:none;
      padding:0; cursor:pointer;
    }
    .dot.active{ opacity:1 }

    .project-title{ font-size:18px; margin:0; display:flex; align-items:center; gap:10px; }
    .meta{ display:flex; flex-wrap:wrap; gap:10px; color:var(--muted); font-size:13px }
    .meta > span{ display:inline-flex; align-items:center; gap:6px }
    .tech-list{ display:flex; flex-wrap:wrap; gap:8px }
    .chip-tech{
      padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px;
      background: var(--surface);
      box-shadow: inset 6px 6px 14px var(--shadow-dark), inset -6px -6px 14px var(--shadow-light);
    }
    .project-actions{ display:flex; gap:10px; margin-top:4px }
    .btn-primary{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff }
    .btn-ghost{ background: var(--surface) }

    /* Contacto: botones */
    .contact-card{ padding:22px; display:grid; gap:16px; align-items:start }
    .contact-actions{
      display:grid; gap:12px;
      grid-template-columns: 1fr;
    }
    @media (min-width:640px){
      .contact-actions{ grid-template-columns: 1fr 1fr; }
    }
    .muted{ color: var(--muted); font-size: 13px }

    footer{ padding:24px 0 54px; color:var(--muted) }

    .reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease }
    .reveal.visible{ opacity:1; transform:none }

    /* Skeleton */
    .skeleton-overlay{ position:fixed; inset:0; pointer-events:none; z-index:300; opacity:0; transition:opacity .25s ease }
    .skeleton-overlay.show{ opacity:1 }
    .skeleton-grid{ position:absolute; inset:0; display:grid; grid-template-columns: repeat(6, 1fr); gap:10px; padding:10px; filter:blur(1px) }
    .skeleton-item{ border-radius:14px; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.15), rgba(255,255,255,.06)); animation: shimmer 1.2s infinite linear; }
    @keyframes shimmer{ 0%{ background-position:-200% 0 } 100%{ background-position:200% 0 } }

    /* Suavizado nativo y compensación general por header */
    html{
      scroll-behavior:smooth;
      scroll-padding-top: var(--header-h-desktop, 72px);
    }
    @media (max-width:960px){
      html{
        scroll-padding-top: calc(var(--header-h-mobile, 68px) + 8px);
      }
    }

    /* --- Skills horizontales en móvil --- */
@media (max-width: 720px){
.skills{ grid-template-columns: 1fr !important; gap: 12px; justify-items:center; }
.skill{ display:grid; grid-template-columns:56px 1fr; align-items:center; gap:12px; padding:14px 16px; width:min(560px,100%); text-align:left; }
.skill i,.skill svg{ grid-column:1; font-size:26px; width:26px; height:26px; display:grid; place-items:center; }
.skill .chip{ grid-column:2; margin:0 0 6px 0; text-align:left; }
.skill .meter{ grid-column:2; width:100%; height:10px; margin-top:0; border-radius:999px; overflow:hidden; }
}

    /* =========================
       ⭐ NUEVO: Navbar ordenada en desktop
       ========================= */
    @media (min-width: 961px){
      .nav-actions{
        display:flex;
        align-items:center;
        gap:12px;
        flex-wrap:nowrap;
      }
      .nav-actions .icon-row{
        padding-left:12px;
        margin-left:6px;
        border-left:1px solid rgba(15,18,38,.12);
      }
      [data-theme="dark"] .nav-actions .icon-row{
        border-left:1px solid rgba(255,255,255,.14);
      }
      .nav-actions .btn,
      .nav-actions .icon-btn{
        height:44px;
      }
    }

    /* ============== Pulido de layout en MÓVIL (≤720px) ============== */
@media (max-width: 720px){
.container{ width:min(680px, 92%); margin-inline:auto; }
section{ text-align:center; }
.section-title{ justify-content:center; text-align:center; }


.hero{ gap:16px; }
.hero-card{ text-align:center; }
.tag{ justify-content:center; }
.cta{ justify-content:center; }
.cta .btn{ width:100%; justify-content:center; }


.kpis{ grid-template-columns: repeat(3, 1fr); gap:10px; justify-items:center; }
.kpi{ width:100%; }


.projects-grid{ grid-template-columns: 1fr !important; max-width:680px; margin-inline:auto; gap:14px; justify-items:center; }
.project-card{ padding:16px; width:min(560px,100%); margin-inline:auto; }
.project-actions{ justify-content:center; }
.project-actions .btn{ width:100%; justify-content:center; }


#contact .contact-card{ max-width:560px; margin-inline:auto; text-align:center; }
.contact-actions{ grid-template-columns:1fr !important; }
.contact-actions .btn{ width:100%; justify-content:center; }


footer .neo{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; }
}
    /* Pulido en tablets (≤960px) */
@media (max-width:960px){
.section-title{ align-items:center; }
.hero-card, .hero-card .lead, .profile-card, #projects, #contact .contact-card{ text-align:center; }
.cta{ justify-content:center; }
.kpis{ justify-items:center; }
.projects-grid{ justify-items:center; }
.contact-actions{ justify-items:stretch; }
}
/* separa un poco la bandera del texto */
.flag-cr{ display:inline-flex; align-items:center; margin-left:6px; }

/* estilo del svg para que combine con el diseño */
.flag-cr svg{
  display:block;
  border-radius:2px;
  box-shadow:0 1px 2px rgba(0,0,0,.15);
}
/* ============================================
   2) iPHONE 11 ESPECÍFICO (414 × 896, DPR=2)
   ============================================ */

/* ——— Vertical (portrait) ——— */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 414px)
  and (min-device-height: 896px)
  and (max-device-height: 896px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

  /* Contenedor + secciones centradas */
  .container {
    width: min(680px, 90%);
    margin-inline: auto;
    text-align: center;
  }
  section { text-align: center; }
  .section-title { justify-content: center; text-align: center; }

  /* Hero */
  .hero {
    grid-template-columns: 1fr;
    gap: 18px;
    justify-items: center;
  }
  .hero-card { text-align: center; }
  .tag { justify-content: center; }
  .cta { justify-content: center; }
  .cta .btn { width: 100%; justify-content: center; }

  /* Skills */
  .skills { grid-template-columns: 1fr; justify-items: center; gap: 12px; }
  .skill {
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: center;
    gap: 12px;
    width: min(560px, 100%);
    text-align: left;
  }
  .skill .chip { text-align: left; }

  /* Proyectos */
  .projects-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    max-width: 680px;
    margin-inline: auto;
    gap: 14px;
  }
  .project-card { width: min(560px, 100%); margin-inline: auto; }
  .project-actions { justify-content: center; }
  .project-actions .btn { width: 100%; justify-content: center; }

  /* Contacto */
  #contact .contact-card { max-width: 560px; margin-inline: auto; text-align: center; }
  .contact-actions { grid-template-columns: 1fr !important; }
  .contact-actions .btn { width: 100%; justify-content: center; }

  /* Footer */
  footer .neo {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 8px; text-align: center;
  }
}

/* ——— Horizontal (landscape) ——— */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 414px)
  and (min-device-height: 896px)
  and (max-device-height: 896px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

  .container {
    width: min(960px, 92%);
    margin-inline: auto;
    text-align: center;
  }

  /* Hero puede ir en dos columnas aprovechando ancho */
  .hero {
    grid-template-columns: 1.1fr 1fr;
    gap: 20px;
    align-items: center;
    justify-items: center;
  }
  .hero-card { text-align: left; }
  .tag { justify-content: flex-start; }
  .cta { justify-content: flex-start; }
  .cta .btn { width: auto; }

  /* Skills en 2 columnas centradas */
  .skills {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    justify-items: center;
  }
  .skill { width: min(520px, 100%); }

  /* Proyectos en 2 columnas */
  .projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: 960px;
    margin-inline: auto;
    justify-items: center;
  }
  .project-card { width: 100%; }

  /* Contacto centrado, botones lado a lado */
  #contact .contact-card { max-width: 720px; margin-inline: auto; }
  .contact-actions { grid-template-columns: 1fr 1fr !important; gap: 12px; }
}

/* =========================
   1) FIXES GENERALES SAFARI iOS
   ========================= */

/* Evita que cualquier “desborde” cree scroll horizontal en iOS */
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* Asegura que medios y SVG no ensanchen el layout */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Previene overflow por hijos flex/grid en iOS */
.projects-grid,
.project-card,
.slides,
.slider,
.skills,
.skill {
  min-width: 0;
}

/* El drawer móvil (off-canvas) a veces “ensancha” el viewport en iOS;
   estos hints evitan que contribuya al tamaño del layout cuando está oculto */
.mobile-menu {
  will-change: transform;
  contain: layout paint size;
  /* opcional, si quieres máxima seguridad: */
  /* transform: translate3d(100%, 0, 0); */
}

/* Sombras grandes + bordes pueden generar 1px extra en iOS;
   este clip elimina cualquier píxel fantasma (si tu target iOS >= 15) */
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}

/* =========================
   FIX de centrado para HERO
   ========================= */

/* iOS: respeta las safe areas para que nada “empuje” el layout */
@supports (padding: max(0px)) {
  .container {
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
}

/* ----- Móviles generales (≤720px): aseguramos centrado real del grid ----- */
@media (max-width: 720px){
  .hero{
    /* La grid misma centrada dentro del contenedor */
    justify-content: center;   /* centra el track */
    justify-items: center;     /* centra los items */
    margin-inline: auto;
    max-width: 100%;
    overflow-x: hidden;        /* evita que 1px de overflow desplace */
  }

  /* Los dos hijos del hero centrados y con ancho controlado */
  .hero > .hero-card,
  .hero > .profile-card{
    justify-self: center;
    width: min(560px, 100%);
  }

  /* Textos y CTA realmente centrados */
  .hero-card{ text-align: center; }
  .tag{ justify-content: center; }
  .cta{ justify-content: center; }
  .cta .btn{ width: 100%; justify-content: center; }
}

/* ----- iPhone 11 (414 × 896, DPR=2) – Portrait ----- */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 414px)
  and (min-device-height: 896px)
  and (max-device-height: 896px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait){

  .hero{
    grid-template-columns: 1fr; /* 1 columna para evitar desbalance 1.1fr */
    justify-content: center;
    justify-items: center;
    margin-inline: auto;
    max-width: 100%;
    overflow-x: hidden;
  }

  .hero > .hero-card,
  .hero > .profile-card{
    justify-self: center;
    width: min(560px, 100%);
  }
}

/* ----- iPhone 11 – Landscape ----- */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 414px)
  and (min-device-height: 896px)
  and (max-device-height: 896px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape){

  .hero{
    /* 2 columnas equilibradas y centradas */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    justify-content: center;
    justify-items: center;
    align-items: center;
    gap: 20px;
    margin-inline: auto;
    max-width: 100%;
    overflow-x: hidden;
  }

  .hero > .hero-card,
  .hero > .profile-card{
    justify-self: center;
    width: min(520px, 100%);
  }
}
/* =========================
   🔵 Restaurar bordes redondeados en móvil e iPhone 11
   ========================= */

/* Aplica el mismo radio que en desktop */
.hero-card,
.profile-card,
.project-card,
.contact-card,
.skill,
footer .neo {
  border-radius: var(--radius);
}

/* Asegura que el efecto neumórfico mantenga su suavidad */
.neo,
.neo-inset {
  border-radius: var(--radius);
  overflow: hidden; /* previene que sombras rectas sobresalgan del borde redondo */
}

/* iPhone 11 específico */
@media only screen
  and (min-device-width: 414px)
  and (max-device-width: 414px)
  and (min-device-height: 896px)
  and (max-device-height: 896px)
  and (-webkit-min-device-pixel-ratio: 2) {

  .hero-card,
  .profile-card {
    border-radius: var(--radius);
    overflow: hidden;
  }
}

/* Otro codigo */

/* Encabezado tipo banner */
.section-header{
  display:flex;
  align-items:center;
  gap:.9rem;
  margin-bottom:28px;
  user-select:none;
}

.logo{
  width:28px; height:28px;
  display:inline-grid; place-items:center;
  background:linear-gradient(145deg, var(--accent), var(--accent-2));
  border-radius:10px;
  box-shadow:
    0 6px 16px -6px var(--ring),
    inset 0 1px 0 0 rgba(255,255,255,.15);
}
.logo svg{ width:18px; height:18px; color:white }

.title{
  font-weight:800;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing:.2px;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* Tarjeta estado vacío */
.card{
  position:relative;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)) , var(--card);
  border-radius:16px;
  padding:28px;
  overflow:hidden;
  box-shadow:
    0 20px 50px -25px rgba(0,0,0,.6),
    inset 0 1px 0 0 rgba(255,255,255,.04);
}

/* brillo sutil */
.cardprogreso::before{
  content:"";
  position:absolute; inset:-1px;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  transform:translateX(-100%);
  animation: sweep 3.2s infinite;
  pointer-events:none;
}
@keyframes sweep{
  0%{ transform:translateX(-120%) }
  60%{ transform:translateX(120%) }
  100%{ transform:translateX(120%) }
}

.empty{
  display:grid;
  place-items:center;
  text-align:center;
  gap:14px;
  padding:28px 10px 6px;
}

/* Loader */
.spinner{
  width:42px; height:42px;
  border:3px solid rgba(255,255,255,.15);
  border-top-color: var(--accent-2);
  border-radius:50%;
  animation: spin 1s linear infinite;
  filter: drop-shadow(0 0 10px rgba(139,92,246,.35));
}
@keyframes spin{ to{ transform:rotate(360deg) } }

.headline{
  font-size: clamp(16px, 1.7vw, 18px);
  font-weight:700;
}

.dots{
  display:inline-block;
  width:1.5em;
  text-align:left;
}
/* puntos animados */
.dots::after{
  content:"...";
  animation: dots 1.4s steps(4, end) infinite;
  clip-path: inset(0 3ch 0 0);
}
@keyframes dots{
  0%{ clip-path: inset(0 3ch 0 0) } /* 0 puntos visibles */
  25%{ clip-path: inset(0 2ch 0 0) } /* 1 punto */
  50%{ clip-path: inset(0 1ch 0 0) } /* 2 puntos */
  75%{ clip-path: inset(0 0ch 0 0) } /* 3 puntos */
  100%{ clip-path: inset(0 3ch 0 0) }
}

.sub{
  color:var(--muted);
  font-size:14px;
}

/* Botón (opcional, deshabilitado) */
.ghost{
  margin-top:6px;
  border:1px dashed var(--border);
  background:transparent;
  color:var(--muted);
  padding:10px 14px;
  border-radius:10px;
  cursor:not-allowed;
  font-weight:600;
  letter-spacing:.2px;
}

/* Layout responsivo */
@media (min-width:760px){
  .card{ padding:36px }
  .empty{ gap:16px }
}

/* ===== Ubuntu-like Terminal Preloader ===== */
#preloader{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background: var(--bg);
  transition: opacity .35s ease, visibility .35s ease;
}
body.preloading{ overflow:hidden; }

/* Window */
.term-wrap{
  width:min(820px, 92vw);
  border-radius: 14px;
  overflow:hidden;
  box-shadow:
    0 22px 60px -20px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.04);
  background: var(--surface);
}

/* Title bar */
.term-titlebar{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  padding:10px 12px; gap:12px;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.06));
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.tl-dots{ display:flex; gap:8px; align-items:center }
.dot{ width:12px; height:12px; border-radius:50%; display:inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15) }
.dot.red{ background:#ff5f56 }
.dot.yellow{ background:#ffbd2e }
.dot.green{ background:#27c93f }
.term-title{
  font-weight:700; letter-spacing:.3px; opacity:.9;
  color: var(--text);
  text-align:center;
}

/* Body */
.term-body{
  position:relative;
  padding:18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color: var(--text);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(111,58,255,.06), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.02));
  /* ✅ Evita cortes feos y permite que el contenido se adapte */
  word-break: normal;
  overflow-wrap: anywhere;
}
.scanline{
  position:absolute; inset:0;
  background-image: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,.05) 50%);
  background-size: 100% 3px;
  mix-blend-mode: multiply; opacity:.25; pointer-events:none;
  animation: scan 8s linear infinite;
}
@keyframes scan{
  0%{ background-position-y:0 } 100%{ background-position-y:300px }
}

.line{
  display:flex; align-items:baseline; gap:10px;
  white-space:pre-wrap; word-break:break-word; padding:4px 2px;
}
.line .prompt{
  color: var(--accent);
  font-weight:800;
}
.line .user{ color: var(--accent) }
.line .host{ color: var(--accent-2) }
.line .path{ color: #8aa2ff }
.line.muted{ opacity:.85; font-size:.95em; color: var(--muted); }
.line.output{ margin-left: calc(1ch + 8px); color: var(--text); font-weight:700; }

/* Typewriter */
.type{
  display:inline-block; white-space:nowrap; overflow:hidden; width:0ch;
}
.type.small{ font-size:.95em; opacity:.95 }
.cursor{
  width:.66ch; height:1.2em; margin-left:4px;
  background: currentColor; align-self:flex-end;
  animation: blink 1s step-end infinite;
}
@keyframes blink{ 0%,50%{opacity:1} 50.01%,100%{opacity:0} }

/* Sweep highlight on window (tu "sweep" refinado) */
.term-wrap::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transform: translateX(-120%); pointer-events:none;
  animation: sweepWin 3.4s 300ms ease-in-out forwards;
}
@keyframes sweepWin{
  0%{ transform:translateX(-120%) }
  60%,100%{ transform:translateX(120%) }
}

/* Reduce Motion */
@media (prefers-reduced-motion: reduce){
  .scanline, .cursor, .term-wrap::after{ animation:none !important }
}

/* Nice glow on accent text */
.line .prompt, .line .user, .line .host{
  text-shadow: 0 0 12px rgba(111,58,255,.18);
}

/* ===== Responsiveness for the Ubuntu-like preloader ===== */

/* Base: already fluid, but ensure it never overflows small screens */
#preloader{ padding: 16px; }
.term-wrap{
  width: min(820px, 92vw);
  max-height: calc(100dvh - 32px);
  display: grid;
  grid-template-rows: auto 1fr;
}
.term-body{
  max-height: calc(100dvh - 32px - 48px); /* total - paddings - titlebar */
  overflow: auto;                          /* scroll if content grows */
  overscroll-behavior: contain;
}

/* Typography scales with viewport; keeps terminal feel on phones */
.term-body,
.line{ font-size: clamp(14px, 2.2vw, 18px); }
.type.small{ font-size: clamp(13px, 2vw, 16px); }

/* Titlebar: compact on narrow widths */
.term-titlebar{
  padding: 8px 10px;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
}
.term-title{
  font-size: clamp(12px, 1.9vw, 14px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-dots{ gap: 6px; }
.tl-dots .dot{ width: 12px; height: 12px; }
@media (max-width: 420px){
  .tl-dots .dot{ width: 10px; height: 10px; }
}

/* Terminal paddings tighten on small screens */
@media (max-width: 720px){
  .term-body{ padding: 14px; }
}
@media (max-width: 420px){
  .term-body{ padding: 12px; }
}

/* Keep prompts readable but compact */
.line{ gap: 8px; padding: 3px 0; }
.line.output{ margin-left: calc(1ch + 6px); }

/* Cursor height adapts to font size */
.cursor{ height: 1.1em; }

/* Very short viewports: avoid clipping; let window fill height */
@media (max-height: 560px){
  #preloader{ padding: 8px; }
  .term-wrap{
    width: min(820px, 96vw);
    max-height: calc(100dvh - 16px);
  }
  .term-body{
    max-height: calc(100dvh - 16px - 44px);
  }
}

/* Ultra narrow (<=340px): stack title elements gracefully */
@media (max-width: 340px){
  .term-titlebar{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "dots actions"
      "title title";
    row-gap: 6px;
  }
  .tl-dots{ grid-area: dots; }
  .term-actions{ grid-area: actions; justify-self: end; }
  .term-title{ grid-area: title; text-align: left; }
}

/* Optional: smoother scroll inside terminal body on touch devices */
.term-body{
  -webkit-overflow-scrolling: touch;
}

/* ===== Mobile wrap fix (evita corte de texto en teléfonos) ===== */
@media (max-width: 480px){
  .line{ white-space: normal; }                 /* permite saltos de línea limpios */
  .type{
    white-space: normal;                        /* el tipeo puede envolver */
    display: inline-block;
    max-width: 100%;
    hyphens: none;
    -webkit-hyphens: none;
  }
  .line.output{ margin-left: 0; }               /* sin indent si envuelve */
  .term-body{ overflow-x: hidden; }             /* sin scroll lateral */
  .cursor{ height: 1em; }
}

@media (max-width: 480px){
  .line{ white-space: nowrap; }     /* fuerza línea única */
  .type{ white-space: nowrap; }     /* línea única para el tipeo */
  .term-body{ -webkit-overflow-scrolling: touch; }
    .type { hyphens: none; -webkit-hyphens: none; }
}