/* Info: CSS de 02-index.php*/
*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
    font-family:Arial, Helvetica, sans-serif;
}

/* ============ Layout base ============ */
    .wrap{
        max-width:1290px;
        margin:0 auto;
        padding:24px
    }

    /* ============ Nav Pill ============ */
    .nav-wrap{
        position:sticky;
        top:0;
        z-index:40;
        background:transparent;
    }

    .logo-header {
        max-height: 60px;
        width: auto;
        object-fit: contain;
        display: block;
        margin-left: -40px;
        margin-top: 10px;
    }
    
    /* Omar Morán: Logo del header */
    .nav-pill {
        height: 72px;
        width: 1322px;
        margin-left: -40px;
        display: flex;
        align-items: center;
        gap: 24px;
        justify-content: space-between;
        padding: 0 28px;
        border-radius: 999px;
        background: #0a1c3a;
        box-shadow: 0 10px 30px rgba(0,0,0,.25);
    }

    .brand{
        display:flex;
        align-items:center;
        gap:14px;
        font-weight:700;
        letter-spacing:.2px
    }

    .brand .dot{width:12px;
        height:12px;border-radius:999px;
        background:var(--brand-ink)}

    .nav{
        display:flex;
        align-items:center;
        gap:26px
    }

    .nav a{
      position:relative;
      text-decoration:none;
      color:var(--brand-ink);
      font-weight:600;
      opacity:.9;
      transition:opacity .2s ease;
    }

    .nav a.active::after{
      content:"";
      position:absolute;
      left:0;right:0;
      bottom:-8px;
      margin:auto;
      width:34px;
      height:4px;
      border-radius:4px;
      background:var(--brand-ink);
    }

/*Menu del encabezado*/
.navigation a{
    position: relative;
    font-size: 1.1em;
    color: white;
    text-decoration: none;
    font-weight: 500;
    margin-left: 40px;
}

/*Líneas debajo de el menu del encabezado al poner el cursor sobre ellas */
.navigation a::after{
    content:'';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 3px;
    background: #fff;
    border-radius: 5px;
    transform-origin: right;
    transform: scaleX(0);
    transition: transform.5s;
}

/*Líneas debajo de el menu del encabezado al poner el cursor sobre ellas */
.navigation a:hover:after{
    transform-origin: left;
    transform: scaleX(1);
}

/*Botón de "Acceder" en el menu del encabezado*/
.navigation .btnLogin-popup {
    width: 130px;
    height: 50px;
    background:#fff;
    border:none;
    outline: none;
    border-radius:999px;
    cursor: pointer;
    font-size: 1.1em;
    color:#111;
    font-weight:700;
    margin-left: 40px;
    transition: .5s;
    box-shadow:0 6px 14px rgba(0,0,0,.18);
}

.navigation .btnLogin-popup:hover {
    background: #2dd4bf;
    color: black;
    
}

/* ============ Hero ============ */
    .hero{
      position:relative;
      isolation:isolate;
      overflow:hidden;
      border-radius:22px;
      margin-left:-40px;
      margin-top:-100px;
      background:#111;
      min-height: 90vh;
      width: 209vh;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:-2;
      background:url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?q=80&w=2400&auto=format&fit=crop') center/cover no-repeat;
      filter:contrast(1.06) saturate(1.05);
    }

    .hero::after{
        content:"";
        position:absolute;
        inset:0;
        z-index:-1;
        background: linear-gradient(
            90deg,
            rgba(10,28,58,.85) 0%,
            rgba(10,28,58,.55) 45%,
            rgba(10,28,58,.15) 100%
        );
    }

    /* ============ Contenido del Hero ============ */

.hero-content{
  position: relative;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 60px;
}

.hero-card{
  background: rgba(255,255,255,.96);
  border-radius: 22px;
  padding: 32px 36px;
  max-width: 420px;
  box-shadow: 0 25px 60px rgba(0,0,0,.35);
  margin-top: 70px;
  height: 470px;
  margin-right: -25px;
}

.hero-card h1{
  font-size: 2rem;
  color: #0a1c3a;
  margin-bottom: 14px;
}

.hero-card p{
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 18px;
}

.hero-list{
  list-style: none;
  padding: 0;
  margin-bottom: 22px;
}

.hero-list li{
  margin-bottom: 10px;
  font-weight: 600;
  color: #0a1c3a;
}

.hero-list li::before{
  content: "✔";
  margin-right: 10px;
  color: #16a34a;
}

/* Buttons */

.hero-actions{
  display: flex;
  gap: 14px;
  margin-top: 60px;
}

.btn-primary{
  background: #0a1c3a;
  color: #fff;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
}

.btn-secondary{
  color: #0a1c3a;
  font-weight: 600;
  text-decoration: none;
  align-self: center;
}

/*Formulario de Acceso*/
.wrapper{
    position: fixed;
    width: 400px;
    height: 440px;
    background: transparent;
    border: 2px solid rgba(255, 255, 255, .5);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    box-shadow: 0 0 30px rgba(0, 0, 0, .5);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transform: scale(0);
    transition: transform .5s ease, height .2s ease;
    z-index: 9999;
    margin-top: 50px;
    margin-top: -20px;
    left: 35%;
}

.wrapper.active-popup {
    transform: scale(1);
}


.wrapper.active{
    height: 470px;
}

.wrapper .form-box {
    width: 100%;
    height: 100%;         
    padding: 40px;
    overflow-y: auto;
    box-sizing: border-box;
}

.wrapper .form-box.login{
    transition: transform .18s ease;
    transform: translateX(0);
}

.wrapper.active .form-box.login {
    transition: none;
    transform: translateX(-400px);
}


.wrapper .form-box.register {
    position: absolute;
    transition: none;
    transform: translateX(400px);
}

.wrapper.active .form-box.register{
    transition: transform .18s ease;
    transform: translateX(0);
}

/*Icono de cerrar formulario "X"*/
.wrapper .icon-close{
    position: absolute;
    top: 0;
    right: 0;
    width: 45px;
    height: 45px;
    background: red;
    font-size: 2em;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius: 20px;
    cursor: pointer;
    z-index: 1;
}

.icon-close:hover{
    background: white;
    color: #162938;
}

.icon-close:active{
    background: red;
    color: white;
}

/*Texto del formulario "Acceder"*/
.form-box h2{
    font-size: 2em;
    color: #bcccd8;

    text-align: center;

}

/*Líneas del formulario en las que se escribe el correo y contraseña*/
.input-box{
    position: relative;
    width: 100%;
    height: 50px;
    border-bottom: 2px solid #bcccd8;
    margin: 30px 0;
}

/*Letras del formulario donde escribes "Correo" y "Contraseña" */
.input-box label{
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    font-size: 1em;
    color: #bcccd8;
    font-weight: 500;
    pointer-events: none;
    transition: .5s;
}

.input-box input:focus~label,
.input-box input:valid~label{
    top: -5px;
}

/*Al escribir en el formulario el correo y contraseña, se modifican las letras que escribes*/
.input-box input{
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1em;
    color: #bcccd8;
    font-weight: 600;
    padding: 0 35px 0 5px;
}

/*Iconos dentro del formulario, donde escribes*/
.input-box .icon{
    position: absolute;
    right: 8px;
    font-size: 1.2em;
    color: #bcccd8;
    line-height: 57px;
}

.input-box {
  position: relative;
}

.input-box .icon.left {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
  color: #bcccd8;
}

.input-box .toggle-password {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 1.2em;
  color: #bcccd8;
}

.input-box .toggle-password:hover {
  color: #fff;
}

/*Texto "recordar" dentro del formulario*/
.remember-forgot{
    font-size: .9em;
    color: #bcccd8;
    font-weight: 500;
    margin: -15px 0 15px;
    display: flex;
    justify-content: space-between;
}

/*Cuando marcas la casilla "recordar"*/
.remember-forgot label input {
    accent-color: #bcccd8;
    margin-right: 3px;
}

/*Texto Olvidaste tu contraseña?*/
.remember-forgot a{
    color: #bcccd8;
    text-decoration: none;
}

/*Al colocarte sobre el texto "Olvidaste tu contraseña?"*/
.remember-forgot a:hover{
    text-decoration: underline;
    color: red;
}

/*Botón de "Iniciar sesión"*/
.btn{
    width: 100%;
    height: 45px;
    background: #0a1c3a;
    border: none;
    outline: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    color: #fff;
    font-weight: 500;
}

/*Texto "No tienes cuenta?"*/
.login-register{
    font-size: .9em;
    color: #bcccd8;
    text-align: center;
    font-weight: 500;
    margin: 25px 0 10px;
}

/*Texto "Registrarme"*/
.login-register p a{
    color: #bcccd8;
    text-decoration: none;
    font-weight: 600;
}

/*Al colocarte sobre "Registrarme"*/
.login-register p a:hover {
    text-decoration: underline;
    color: #bcccd8;
}

.logo{
    height: 170px;
    background: transparent;
}

/*Desde aquí solo CSS para párrafos*/

.terminos{
    color: white;
}

@media (min-width: 1200px) and (max-width: 1370px) {
    
    header{
        padding: 20px 40px;
    }
    
}

@media screen and (max-width: 600px) {
  
  .logo {
    font-size: 30px;
    margin-left: -70px;
	}

.navigation {
    margin-left: 40px;
}

.navigation .btnLogin-popup {
    margin-top: 10px;
	}
}


@media screen and (max-width: 400px) {
 
 .logo {
    font-size: 2em;
    margin-left: -52%;
 }
 
 .navigation .btnLogin-popup {
    margin-left: 12px;
 }
 
 
 .wrapper .form-box.login {
    width: 82%;
}

.wrapper.active-popup {
    transform: scale(.75);
}
}

/*Formulario de Acceso*/
/* Overlay centrado */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
}

/* formulario centrado */
.modal-overlay .form-box{
  position: relative;
  width: 420px;
  max-width: 92vw;
  max-height: 90vh;
  background: rgba(30,40,55,.75);
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 20px;
  backdrop-filter: blur(20px);
  box-shadow: 0 0 30px rgba(0,0,0,.5);
  padding: 40px;
  overflow: hidden;
  animation: modalIn .25s ease;
}

/* Botón cerrar */
.modal-overlay .icon-close{
  position: absolute;
  top: 0;
  right: 0;
  width: 45px;
  height: 45px;
  background: red;
  font-size: 2em;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius: 20px;
  border-top-right-radius: 20px;
  cursor: pointer;
  z-index: 2;
}

.modal-overlay .icon-close:hover{
  background: white;
  color: #162938;
}

.modal-overlay .icon-close:active{
  background: red;
  color: white;
}

@keyframes modalIn{
  from{ opacity:0; transform: scale(.96); }
  to{ opacity:1; transform: scale(1); }
}

.text{
    color: #bcccd8;
}

/* ===== SELECT estilizado (Plan) ===== */
.input-box select {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  font-size: 1em;
  color: #bcccd8;
  font-weight: 600;
  padding: 0 35px 0 5px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  cursor: pointer;
}

/* Flecha personalizada */
.input-box.select-box::after {
  content: "▾";
  position: absolute;
  right: 35px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 1em;
  color: #bcccd8;
}

/* Cuando el select tiene valor, sube el label */
.input-box select:focus ~ label,
.input-box select:valid ~ label {
  top: -5px;
}



/* ===== MODAL PLANES ===== */
.planes-box{
  position: relative;
  width: 900px;
  max-width: 95vw;
  background: rgba(20,30,45,.85);
  backdrop-filter: blur(20px);
  border-radius: 26px;
  padding: 40px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  color: #fff;
}

.planes-title{
  text-align: center;
  font-size: 2em;
  margin-bottom: 6px;
}

.planes-subtitle{
  text-align: center;
  opacity: .85;
  margin-bottom: 30px;
}

.planes-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 24px;
}

.plan-card{
  background: rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 26px;
  text-align: center;
  position: relative;
}

.plan-card h3{
  font-size: 1.4em;
  margin-bottom: 6px;
}

.precio{
  font-size: 1.8em;
  margin-bottom: 18px;
}

.precio span{
  font-size: .5em;
  opacity: .7;
}

.plan-card ul{
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}

.plan-card ul li{
  margin: 8px 0;
  font-size: .95em;
}

.btn-plan{
  width: 100%;
  padding: 12px;
  border-radius: 999px;
  border: none;
  background: #0a1c3a;
  color: #fff;
  cursor: pointer;
  font-weight: 600;
}

.btn-plan.primary{
  background: #2563eb;
}

.destacado{
  outline: 2px solid #2563eb;
}

.badge-plan{
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #2563eb;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: .75em;
  font-weight: 700;
}

/* Responsive */
@media (max-width: 700px){
  .planes-box{
    padding: 26px;
  }
}


/* ===== Modal plan detalle ===== */
.detalle-plan-box{
  position: relative;
  width: 520px;
  max-width: 92vw;
  max-height: 85vh;
  background: rgba(20,30,45,.85);
  backdrop-filter: blur(20px);
  border-radius: 26px;
  padding: 36px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  color: #fff;
  overflow: hidden;
}

.detalle-lista{
  margin-top: 20px;
  max-height: 55vh;
  overflow-y: auto;
  padding-right: 6px;
}

.detalle-lista li{
  margin-bottom: 10px;
  font-size: .95em;
}

.btn-plan.link{
  background: none;
  color: #93c5fd;
  margin-top: 12px;
  font-size: .9em;
}

.btn-plan.link:hover{
  text-decoration: underline;
}



/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE 02-index.css
   Referencia: 1366×768 = layout objetivo
   Fórmula: calc(-(100vw - 1286px) / 2)
     → da exactamente -40px a 1366px (valor original)
     → escala automáticamente a cualquier viewport mayor
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 1290px) {

  /* ── Nav pill: de ancho fijo a proporcional al viewport ── */
  .nav-pill {
    width:       calc(100vw - 44px);            /* 22px de sangría en cada lado */
    margin-left: calc(-(100vw - 1286px) / 2);   /* -40px exacto a 1366px */
    height:      clamp(68px, 5.3vw, 90px);      /* 72px a 1366px, 90px a 1920px */
    padding:     0 clamp(20px, 2.1vw, 36px);
    gap:         clamp(16px, 1.8vw, 30px);
  }

  /* ── Logo del header ── */
  .logo-header {
    max-height:  clamp(50px, 4.4vw, 74px);       /* 60px a 1366px */
    margin-left: clamp(-52px, -2.9vw, -24px);    /* -40px a 1366px */
    margin-top:  clamp(6px, 0.7vw, 14px);        /* 10px a 1366px */
  }

  /* ── Links de navegación ── */
  .navigation a {
    font-size:   clamp(0.95em, 1vw, 1.25em);
    margin-left: clamp(22px, 2.9vw, 52px);       /* 40px a 1366px */
  }

  /* ── Botón Acceder ── */
  .navigation .btnLogin-popup {
    width:       clamp(110px, 9.5vw, 158px);     /* 130px a 1366px */
    height:      clamp(42px,  3.7vw,  58px);     /* 50px a 1366px */
    font-size:   clamp(0.95em, 1vw, 1.25em);
    margin-left: clamp(22px, 2.9vw, 52px);
  }

  /* ── Hero: mismo principio que nav-pill ── */
  .hero {
    width:       calc(100vw - 44px);
    margin-left: calc(-(100vw - 1286px) / 2);
    margin-top:  clamp(-130px, -7.3vw, -80px);  /* -100px a 1366px */
    min-height:  clamp(480px, 88vh, 980px);
  }

  /* ── Padding derecho del hero-content ── */
  .hero-content {
    padding-right: clamp(44px, 4.4vw, 100px);   /* 60px a 1366px */
  }

  /* ── Hero card: escala proporcional ── */
  .hero-card {
    max-width:    clamp(360px, 30.7vw, 580px);   /* 420px a 1366px */
    height:       auto;
    min-height:   clamp(420px, 34.4vw, 640px);  /* 470px a 1366px */
    padding:      clamp(26px, 2.3vw, 44px) clamp(28px, 2.6vw, 46px);
    margin-top:   clamp(60px, 5.1vw, 106px);    /* 70px a 1366px */
    margin-right: clamp(-28px, -1.8vw, -14px);
    box-shadow:   0 clamp(18px, 1.8vw, 36px) clamp(44px, 4.4vw, 80px) rgba(0,0,0,.35);
    border-radius: clamp(18px, 1.6vw, 28px);
  }

  .hero-card h1 {
    font-size:     clamp(28px, 2.34vw, 46px);   /* ≈ 2rem a 1366px */
    margin-bottom: clamp(10px, 1vw, 20px);
  }

  .hero-card p {
    font-size:     clamp(14px, 0.95vw, 18px);   /* ≈ 1rem a 1366px */
    line-height:   1.65;
    margin-bottom: clamp(14px, 1.3vw, 26px);
  }

  .hero-list {
    margin-bottom: clamp(16px, 1.6vw, 30px);
  }

  .hero-list li {
    font-size:     clamp(14px, 0.95vw, 18px);
    margin-bottom: clamp(7px, 0.7vw, 13px);
  }

  .hero-actions {
    margin-top: clamp(44px, 4.4vw, 80px);       /* 60px a 1366px */
    gap:        clamp(10px, 1vw, 20px);
  }

  .btn-primary {
    padding:   clamp(11px, 1vw, 18px) clamp(20px, 1.9vw, 34px);
    font-size: clamp(0.88rem, 0.95vw, 1.1rem);
    border-radius: 999px;
  }

  .btn-secondary {
    font-size: clamp(0.88rem, 0.95vw, 1.1rem);
  }

}

/* ═══════════════════════════════════════════════════
   MÓVIL (≤ 768px) — Layout diferente
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {

  .wrap {
    padding: 16px;
  }

  /* Nav pill → columna */
  .nav-pill {
    width:          100%;
    margin-left:    0;
    height:         auto;
    flex-direction: column;
    padding:        16px 20px;
    border-radius:  20px;
    gap:            14px;
  }

  .logo-header {
    max-height:  48px;
    margin-left: 0;
    margin-top:  0;
  }

  .navigation {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             10px 18px;
  }

  .navigation a {
    margin-left: 0;
    font-size:   0.95em;
  }

  .navigation .btnLogin-popup {
    margin-left: 0;
    width:       120px;
    height:      42px;
    font-size:   0.95em;
  }

  /* Hero → stack */
  .hero {
    width:         100%;
    margin-left:   0;
    margin-top:    12px;
    min-height:    72vh;
    border-radius: 16px;
  }

  .hero-content {
    flex-direction:  column;
    justify-content: flex-end;
    align-items:     stretch;
    padding:         20px;
    padding-right:   20px;
    min-height:      72vh;
  }

  .hero-card {
    max-width:    100%;
    width:        100%;
    height:       auto;
    min-height:   auto;
    margin-right: 0;
    margin-top:   0;
    padding:      22px;
    border-radius: 18px;
  }

  .hero-card h1    { font-size: 1.65rem; }
  .hero-card p     { font-size: 0.95rem; }
  .hero-list li    { font-size: 0.9rem; }

  .hero-actions {
    margin-top:     18px;
    flex-direction: column;
    gap:            12px;
  }

  .btn-primary {
    text-align: center;
    padding:    13px 24px;
  }
}