/* ====== Página de Crear Cuenta ====== */
.SIGNUP{
  background: var(--bg, #d5faff);
  min-height: 100vh;
  display: flex;
  flex-direction: column;    /* ⬅️ apilar verticalmente */
  align-items: center;       /* centrar horizontal */
  justify-content: center;   /* o flex-start si lo quieres pegado arriba */
  gap: 16px;                 /* espacio entre el rectángulo y el botón */
  padding: 40px 20px;
}

/* (opcional) un poco de margen adicional bajo el contenedor azul */
.home-button-container{ margin-top: 4px; }

.signup-container {
  background: linear-gradient(180deg, #2f90ff 0%, #1e70d1 100%);
  max-width: 720px;     /* antes 600px, más ancho */
  width: 100%;
  min-height: 750px;    /* altura mínima mayor */
  padding: 60px 50px;   /* más aire por dentro */
  border-radius: 24px;
  box-shadow: 0 12px 36px rgba(0,0,0,.25);
  color: #fff;
}


.signup-header {
  text-align: center;
  margin-bottom: 24px;
}

.signup-title {
  font-size: 2rem;
  font-weight: 800;
  margin: 0 0 8px;
  color: #fff; /* título blanco */
}

.signup-subtitle {
  font-size: 1rem;
  font-weight: 500;
  color: #e0e0e0; /* gris claro sobre azul */
  margin: 0;
}

/* Texto descriptivo adicional */
.signup-description {
  margin-top: 20px;
  text-align: left;
  background: rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.signup-description p {
  margin: 0 0 12px 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #f0f0f0;
}

.signup-description p:last-child {
  margin-bottom: 0;
  font-weight: 600;
  color: #fff;
}

.signup-description ul {
  margin: 12px 0;
  padding-left: 20px;
  list-style: none;
}

.signup-description li {
  margin: 8px 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #f0f0f0;
  position: relative;
}

.signup-description li::before {
  content: "→";
  position: absolute;
  left: -20px;
  color: #4a90e2;
  font-weight: bold;
}

.signup-description strong {
  color: #fff;
  font-weight: 700;
}

/* ---- Formulario ---- */
.signup-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: 600;
  margin-bottom: 6px;
  color: #fff; /* label blanco */
}

.form-group input {
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  background: #f1f5f9;
  color: #000;
}

/* 1) Apilar el rectángulo y el botón de inicio */
.SIGNUP{
  display: flex;
  flex-direction: column;   /* ⬅️ apilar vertical */
  align-items: center;      /* centrar en horizontal */
  justify-content: flex-start;
  gap: 16px;                /* espacio entre azul y botón */
}

/* 2) Mantener inputs a ancho completo */
.signup-form{
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;     /* ⬅️ inputs 100% */
}

/* 3) Centrar el botón dentro del form */
.btn-primary{
  /* elimina duplicados de margin y usa align-self */
  background: #cc460c;
  color: #fff;
  border: none;
  padding: 14px;
  font-weight: 700;
  border-radius: 12px;
  cursor: pointer;
  transition: background .25s ease, transform .1s ease;

  align-self: center;       /* ⬅️ centra en flex column */
  margin-top: 16px;         /* separación arriba */
}

/* 4) Texto bajo el botón centrado (ya lo tienes) */
.signup-login{
  text-align: center;
  margin-top: 10px;
}

/* (opcional) un poco de margen por si lo necesitas */
.home-button-container{ margin-top: 4px; }


/* ====== Planes de suscripción (versión mejorada) ====== */
.plans{
  display:grid;
  gap:18px;
  margin:12px 0 16px;
  padding:0;
  border:0;
}
@media (min-width:640px){
  .plans{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Tarjeta base */
.plan-card{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  background: linear-gradient(180deg,#ffffff 0%, #f7fbff 100%);
  border:2px solid rgba(0,0,0,.06);
  border-radius:18px;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  overflow:hidden;
}

/* Efecto hover */
.plan-card:hover{
  transform: translateY(-2px);
  box-shadow:0 14px 32px rgba(0,0,0,.18);
}

/* Radio: lo ocultamos pero sigue siendo accesible y clicable */
.plan-card input[type="radio"]{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

/* Indicador de selección en la esquina */
/* Quitamos el circulito azul por defecto */
.plan-card::before {
  display: none;
}

/* Cuando un plan está seleccionado → borde naranja */
.plan-card:has(input[type="radio"]:checked) {
  border-color: #cc460c;
  box-shadow: 0 12px 28px rgba(204,70,12,.35);
  transform: translateY(-2px);
}


/* Plan PRO destacado */
.plan-card.pro{
  background: linear-gradient(180deg, #fff 0%, #ffece6 100%);
  border: 2px solid;
  transform: scale(1.05); /* un poco más grande */
  z-index: 2;             /* sobresale por encima del Normal */
  box-shadow: 0 12px 28px rgba(204,70,12,.35);
}

/* Al pasar el ratón todavía más destaque */
.plan-card.pro:hover{
  transform: scale(1.07);
  box-shadow: 0 16px 34px rgba(204,70,12,.45);
}

/* Insignia “Más popular” arriba a la derecha */
.plan-card.pro::after{
  content:"Más popular";
  position:absolute;
  top:12px; 
  right:12px;           /* 👉 antes estaba en left */
  background: linear-gradient(90deg, #cc460c, #e85c20);
  color:#fff;
  font-weight:800;
  font-size:.85rem;
  padding:6px 14px;
  border-radius:999px;
  box-shadow:0 6px 14px rgba(204,70,12,.35);
  letter-spacing:.02em;
  z-index:3;
}

/* Ajuste del body para que no baje el texto */
.plan-card.pro .plan-card__body{
  margin-top:0;   /* 👉 antes le dimos margen-top, ahora lo quitamos */
}



/* Contenido */
.plan-card__body{
  padding:20px 20px 18px;
  display:grid;
  gap:12px;
}

/* Cabecera: nombre y precio con mejor jerarquía */
.plan-card__head{
  display:grid;
  grid-template-columns: 1fr;
  gap:6px;
  padding-bottom:12px;
  border-bottom:1px dashed rgba(0,0,0,.08);
}

.plan-card__name{
  font-weight:900;
  font-size:1.3rem;
  color:#0d082c;
}

.plan-card__price{
  font-weight:800;
  font-size:1.15rem;
  color:#0d082c;
  margin-top:2px;
}

/* quitamos el /año automático */
.plan-card__price::after{
  content: "";
}
/* Lista de features */
.plan-card__features{
  list-style:none;
  display:grid;
  gap:8px;
  margin:0;
  padding:4px 0 0;
  font-size:1rem;
}
.plan-card__features li{
  display:flex; align-items:center; gap:10px;
  color:#0f172a;
}

/* Iconos más grandes y legibles */
.plan-card__features li.ok::before{
  content:"✓";
  font-weight:900;
  font-size:1.05rem;
  line-height:1;
  color:#16a34a;
}
.plan-card__features li.no{
  opacity:.9;
}
.plan-card__features li.no::before{
  content:"✕";
  font-weight:900;
  font-size:1.05rem;
  line-height:1;
  color:#b91c1c;
}

/* Estados de enfoque accesibles para teclado */
.plan-card input[type="radio"]:focus-visible + .plan-card__body,
.plan-card:has(input[type="radio"]:focus-visible){
  outline:3px solid color-mix(in oklab,#2f90ff,white 35%);
  outline-offset:3px;
  border-radius:18px;
}

/* Pequeñas mejoras en contexto del contenedor azul */
.SIGNUP .plans-title{ color:#fff; }
.SIGNUP .plan-card__name,
.SIGNUP .plan-card__price,
.SIGNUP .plan-card__features li{ color:#0d082c; }