:root {
      --primary-orange: #ff6600;
      --primary-dark: #0f2a44;
      --text-dark: #222;
      --white: #fff;
      --gray-light: #f5f5f5;
    }
    * { box-sizing:border-box; margin:0; padding:0; }
    body { font-family: 'Arial', sans-serif; background:#fffaf5; color:var(--text-dark); }

    a { text-decoration:none; }

    /* ==================== NAVBAR ==================== */
    .top-bar {
      position:fixed; top:0; left:0; width:100%; height:70px;
      background:var(--white); display:flex; align-items:center; z-index:1000;
      box-shadow:0 2px 12px rgba(0,0,0,0.08);
    }
    .top-bar-inner {
      max-width:1200px; width:90%; margin:0 auto;
      display:flex; justify-content:space-between; align-items:center;
    }
    .logo-text { font-size:1.3rem; font-weight:700; color:var(--text-dark); }
    .accent { color:var(--primary-orange); }

    .top-right { display:flex; gap:25px; align-items:center; }
    .nav-link { font-weight:600; color:var(--text-dark); transition:0.3s; }
    .nav-link:hover { color:var(--primary-orange); }
    .btn-premium { background:var(--primary-orange); color:#fff; padding:10px 22px; border-radius:6px; font-weight:700; }

    .mobile-menu-btn { display:none; flex-direction: column; justify-content: space-around; width:30px; height:24px; background:transparent; border:none; cursor:pointer; padding:0; z-index:1002; }
    .mobile-menu-btn .line { width:30px; height:3px; background-color: var(--primary-orange); border-radius:10px; transition: all 0.3s linear; }
    .mobile-menu-btn.is-active .line:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
    .mobile-menu-btn.is-active .line:nth-child(2) { opacity:0; }
    .mobile-menu-btn.is-active .line:nth-child(3) { transform:rotate(-45deg) translate(7px,-7px); }

    @media (max-width:768px){
      .mobile-menu-btn { display:flex; }
      .top-right {
        position:fixed; top:0; right:-100%; height:100vh; width:280px; background:#fff;
        flex-direction:column; justify-content:flex-start; align-items:flex-start; padding:100px 15px; gap:20px;
        transition:0.3s ease-in-out; box-shadow:-5px 0 15px rgba(0,0,0,0.1);
      }
      .top-right.open { right:0; }
      .top-right .nav-link { width:100%; padding:10px 0; border-bottom:1px solid #eee; display:block; word-break: break-word; }
    }
    .menu-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:none; z-index:999; }
    .menu-overlay.show { display:block; }

    /* ==================== HERO MODERNO ==================== */
    .hero-header {
      position:relative;
      background: linear-gradient(135deg, #ff6600 0%, #ff9c42 100%);
      color:#fff;
      text-align:center;
      padding:120px 20px 80px;
      overflow:hidden;
      clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
    }
    .hero-header h1 {
      font-size:3rem;
      font-weight:900;
      margin-bottom:20px;
      line-height:1.2;
     
      text-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }
    .hero-header p {
      font-size:1.2rem;
      max-width:700px;
      margin:0 auto 40px;
      line-height:1.5;
      text-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }
    .hero-buttons { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; }
    .hero-buttons a {
      padding:15px 28px; border-radius:50px; font-weight:700; color:#fff;
      transition:0.3s; text-shadow:1px 1px 3px rgba(0,0,0,0.2);
    }
    .btn-test { background:#0f2a44; }
    .btn-test:hover { background:#0a1b30; }
    .btn-guide { background:#ff6600; }
    .btn-guide:hover { background:#e65c00; }

    /* ==================== SECCIONES CARDS ==================== */
    section { padding:60px 20px; }
    section h2 { text-align:center; color: var(--primary-orange); margin-bottom:40px; font-size:2rem; }
    .cards-container { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:25px; max-width:1200px; margin:0 auto; }
    .card { background:#fff; border-radius:14px; box-shadow:0 8px 20px rgba(0,0,0,0.08); overflow:hidden; transition: transform 0.3s; display:flex; flex-direction:column; justify-content:space-between; }
    .card:hover { transform:translateY(-6px); }
    .card img { width:100%; height:180px; object-fit:cover; }
    .card h3 { font-size:1.3rem; margin:15px 15px 10px; color:#333; }
    .card p { font-size:1rem; margin:0 15px 15px; color:#555; line-height:1.5; }
    .card a { margin:15px; background: var(--primary-orange); color:#fff; padding:12px; text-align:center; font-weight:700; border-radius:50px; transition:0.3s; }
    .card a:hover { background:#e65c00; }

    /* MICROTESTS ANTIGUOS */
    .microtests{ padding: 10px 10px;}
    .microtests h2 { color:#ff7a00; margin-bottom: 5px;  }
    .micro-card { font-size:0.85rem; text-align:center;}
    .micro-card img { height:100px; }

    /* FOOTER */
    footer { background:var(--primary-dark); color:#fff; text-align:center; padding:25px 10px; font-size:0.9rem; }

    /* RESPONSIVE */
    @media(max-width:768px){
      .hero-header { padding:100px 15px 60px; }
      .hero-header h1 { font-size:2rem; }
      .hero-header p { font-size:1rem; }
      section { padding:40px 15px; }
    }
    @media(max-width:768px){
  .hero-buttons {
    flex-wrap: nowrap; /* evita que se apilen */
    justify-content:center;
    gap:15px; /* opcional: reduce espacio si hace falta */
    overflow-x:auto; /* permite que si no caben, se pueda hacer scroll horizontal */
  }
  .hero-buttons a { white-space: nowrap; flex: 0 0 auto; } /* evita que el texto se divida */
    .hero-buttons a {
      padding: 8px 16px;
      font-size: 13px;
  }
}

.divider-orange {
  height: 4px; /* altura máxima de la línea */
  width: 100%;
  background: linear-gradient(to right, transparent, #ff6600, transparent);
  border-radius: 3px; /* suaviza los extremos */
  margin:  0; /* espacio arriba y abajo */
}
.legacy-section {
    padding: 60px 20px;
    background: #f8fafc; /* Un gris muy sutil para diferenciarlo del contenido nuevo */
    border-radius: 40px;
    margin: 40px auto;
    max-width: 900px;
    font-family: system-ui, -apple-system, sans-serif;
    border: 1px solid #e2e8f0;
}

.legacy-header {
    text-align: center;
    margin-bottom: 30px;
}

/* El Badge de "Lo más buscado" */
.trending-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    color: #64748b;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    margin-bottom: 20px;
}

.legacy-header h2 {
    color: #475569; /* Color más sobrio ya que es contenido viejo */
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 15px;
}

.legacy-description {
    max-width: 700px;
    margin: 0 auto;
    color: #64748b;
    line-height: 1.6;
    font-size: 1rem;
}

.legacy-description strong {
    color: #ff7a00; /* Resaltamos el éxito del 2025 con tu color primario */
}

/* Aviso de eliminación */
.removal-notice {
    margin-top: 30px;
    text-align: center;
    font-size: 0.9rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-style: italic;
}

@media (max-width: 600px) {
    .legacy-section {
        padding: 40px 15px;
        border-radius: 24px;
    }
    .legacy-header h2 {
        font-size: 1.5rem;
    }
}


:root {
    --primary-orange: #fb923c;
    --success-green: #22c55e;
    --text-dark: #1e293b;
    --bg-soft: #fffaf5;
}

.carousel-section {
    padding: 10px 20px;
    background: var(--bg-soft);
    font-family: system-ui, -apple-system, sans-serif;
}

.carousel-header {
    text-align: center;
    margin-bottom: 10px;
}

.carousel-header h2 {
    color: var(--primary-orange);
    font-size: 2.2rem;
    margin-bottom: 8px;
    font-weight: 800;
}

.carousel-header p {
    color: #64748b;
    font-size: 1.1rem;
}

/* El "agujero" por donde se ve el carrusel */
.carousel-viewport {
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    border-radius: 24px;
}

/* El riel que se mueve */
.carousel-track {
    display: flex;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.carousel-card {
    min-width: 100%;
    box-sizing: border-box;
    padding: 0;
}

.card-inner {
    background: white;
    padding: 40px 30px;
    border-radius: 24px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid rgba(251, 146, 60, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.icon-circle {
    width: 60px;
    height: 60px;
    background: rgba(251, 146, 60, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.card-inner h3 {
    color: var(--text-dark);
    font-size: 1.6rem;
    margin-bottom: 12px;
}

.card-inner p {
    color: #475569;
    line-height: 1.6;
    margin-bottom: 5px;
}

.stat-badge {
    background: #f8fafc;
    color: #64748b;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid #e2e8f0;
}

.quote {
    color: var(--success-green) !important;
    font-style: italic;
    font-weight: 600;
    margin-top: 20px !important;
}

/* Dots */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background: var(--primary-orange);
    width: 25px;
    border-radius: 10px;
}

@media (max-width: 600px) {
    .carousel-header h2 { font-size: 1.7rem; }
    .carousel-viewport { max-width: 100%; }
}
/* Contenedor Principal */
.mock-exam-section {
    padding: 10px 20px;
    background: #ffffff;
    font-family: system-ui, -apple-system, sans-serif;
    text-align: center;
}

/* Encabezado */
.exam-header h2 {
    color: #ff7a00;
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 5px;
}

.badge-2026 {
    display: inline-block;
    background: rgba(255, 122, 0, 0.1);
    color: #ff7a00;
    padding: 5px 15px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.exam-header p {
    max-width: 700px;
    margin: 0 auto 40px;
    color: #64748b;
    line-height: 1.6;
    font-size: 1.1rem;
}

/* Tarjeta del Examen */
.exam-container {
    display: flex;
    justify-content: center;
    perspective: 1000px;
}

.exam-card {
    background: #ffffff;
    width: 100%;
    max-width: 1200px;
    border-radius: 30px;
    border: 2px solid #ff7a00;
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
    overflow: hidden;
}

.exam-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(255, 122, 0, 0.15);
}

.exam-card-content {
    padding: 12px 40px;
}

.exam-card-title {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.icon-box {
    font-size: 2rem;
}

.exam-card-title h3 {
    margin: 0;
    color: #1e293b;
    font-size: 1.5rem;
    font-weight: 800;
}

.exam-description {
    color: #475569;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Lista de Características (Sin puntos) */
.exam-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.exam-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #475569;
    font-size: 0.95rem;
    margin-bottom: 12px;
    font-weight: 500;
}

.check {
    color: #22c55e;
    font-weight: 900;
}

/* Botón de Acción */
.btn-start-exam {
    display: block;
    text-align: center;
    background: #ff7a00;
    color: #ffffff;
    padding: 18px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(255, 122, 0, 0.2);
    -webkit-tap-highlight-color: transparent;
}

.btn-start-exam:hover {
    background: #e66e00;
    transform: scale(1.02);
    box-shadow: 0 15px 30px rgba(255, 122, 0, 0.3);
}

.btn-start-exam:active {
    transform: scale(0.98);
}

/* Nota de pie */
.exam-footer-note {
    margin-top: 40px;
    font-size: 0.9rem;
    color: #94a3b8;
}

/* Ajustes para Móvil */
@media (max-width: 600px) {
    .exam-header h2 { font-size: 1.7rem; }
    .exam-card-content { padding: 30px 20px; }
    .exam-card { border-radius: 24px; }
}
.exam-details-section {
    padding: 15px 20px;
    max-width: 1200px;
    margin: 0 auto;
    font-family: system-ui, -apple-system, sans-serif;
}

.details-header {
    text-align: center;
    margin-bottom: 50px;
}

.details-header h2 {
    color: #1e293b;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 15px;
}

.details-header p {
    color: #64748b;
    line-height: 1.7;
    font-size: 1.1rem;
}

/* Summary Grid (Time & Questions) */
.exam-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 10px;
}

.summary-item {
    background: #f8fafc;
    padding: 25px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid #e2e8f0;
}

.summary-icon {
    font-size: 2.2rem;
}

.summary-text strong {
    display: block;
    font-size: 1.25rem;
    color: #1e293b;
}

.summary-text span {
    color: #64748b;
    font-size: 0.95rem;
}

/* Domains Visualization */
.domains-container {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.domains-title {
    color: #ff7a00;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: center;
}

.domain-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.domain-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-weight: 600;
}

.domain-name {
    color: #334155;
    font-size: 1rem;
}

.domain-stats {
    color: #ff7a00;
}

.domain-progress-bg {
    width: 100%;
    height: 8px;
    background: #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
}

.domain-progress-fill {
    height: 100%;
    background: #ff7a00;
    border-radius: 10px;
}

/* CTA */
.details-cta {
    text-align: center;
    margin-top: 50px;
}

.btn-outline-orange {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 35px;
    border: 2px solid #ff7a00;
    color: #ff7a00;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.btn-outline-orange:hover {
    background: #ff7a00;
    color: white;
}

@media (max-width: 600px) {
    .exam-summary-grid { grid-template-columns: 1fr; }
    .domains-container { padding: 25px 20px; }
    .details-header h2 { font-size: 1.6rem; }
    .domain-info { flex-direction: column; gap: 4px; }
}

.ad-home-top {
  margin: 16px auto 24px;
  text-align: center;
}

/* 🔑 Control en móvil */
@media (max-width: 768px) {
  .ad-home-top {
   /* display: none;*/
  }
}