/* Cards de ciclos */
.ciclo-card{
  background:#fff;box-shadow:0 10px 20px rgba(0,0,0,.1);padding:2rem;text-align:center;border-radius:10px;transition:transform .3s ease
}
.ciclo-card:hover{transform:translateY(-10px)}
.ciclo-card h3 i{margin-right:.5rem;color:var(--primary-color)}
.detalles{margin-top:1.5rem;text-align:left}
.detalles h4{color:var(--primary-color)}
.detalles ul{list-style:none;padding:0;margin:0}
.detalles ul li i{margin-right:.5rem;color:var(--primary-color)}
.precio{font-size:2.5rem;font-weight:700;color:var(--primary-color);margin:1rem 0}
.btn-pagar{
  background:var(--primary-color);color:#fff;border:0;padding:.8rem 1.5rem;cursor:pointer;margin-top:1rem;border-radius:5px;
  transition:background-color .3s ease;font-size:1rem;text-decoration:none;display:inline-block
}
.btn-pagar:hover{background:#004a99}

/* Testimonios */
#testimonios{background:var(--light-color)}
.testimonio{background:#fff;padding:2rem;border-radius:10px;box-shadow:0 5px 15px rgba(0,0,0,.05)}
.testimonio img{width:80px;height:80px;border-radius:50%;float:left;margin-right:1.5rem}
.testimonio h4{font-style:italic;color:var(--secondary-color);margin-top:1rem}

/* Redes (iconos FA) */
#redes{text-align:center}
.redes-container{display:flex;justify-content:center;gap:1rem}
.red-social{
  display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;
  border:1px solid rgba(0,0,0,.15);color:var(--primary-color);background:#fff;text-decoration:none;
  transition:transform .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease;outline-offset:2px
}
.red-social i{font-size:22px;line-height:1}
.red-social:hover,.red-social:focus-visible{background:var(--primary-color);color:#fff;border-color:var(--primary-color);transform:translateY(-2px) scale(1.03)}

/* Formularios (inputs + floating label) */
.form-container h3,.pagos-container h3{font-size:1.8rem;margin-bottom:1.5rem;color:var(--primary-color)}
.input-group{position:relative;margin-bottom:2rem}
.input-group i{position:absolute;top:50%;left:1rem;transform:translateY(-50%);color:#ccc}
.input-group input,.input-group textarea{
  width:100%;padding:1rem 1rem 1rem 3rem;border:1px solid #ccc;border-radius:5px;font-family:'Poppins',sans-serif
}
.input-group label{
  position:absolute;top:50%;left:3rem;transform:translateY(-50%);color:#999;transition:.3s ease;pointer-events:none;background:#fff;padding:0 .25rem
}
.input-group input:not(:placeholder-shown)+label,
.input-group textarea:not(:placeholder-shown)+label,
.input-group input:focus+label,
.input-group textarea:focus+label,
.input-group:focus-within label{
  top:-1rem;left:0;font-size:.9rem;color:var(--primary-color)
}
/* Autocompletado */
.input-group input:-webkit-autofill+label{top:-1rem;left:0;font-size:.9rem;color:var(--primary-color)}

/* Contador en textarea */
.input-group .char-counter{
  position:absolute;right:.6rem;bottom:.4rem;font-size:.8rem;color:var(--secondary-color);pointer-events:none
}
.input-group textarea{padding-bottom:2.2rem}

/* File input */
.file-input-container{margin-bottom:1rem}
.file-input-container input[type="file"]{display:none}
.file-label{
  background:var(--primary-color);color:#fff;padding:1rem 2rem;border-radius:5px;cursor:pointer;display:inline-block;transition:background-color .3s ease
}
.file-label:hover{background:#004a99}
.file-label i{margin-right:.5rem}

/* Botón submit */
form button{
  background:var(--primary-color);color:#fff;border:0;padding:1rem 2rem;cursor:pointer;border-radius:5px;width:100%;
  transition:background-color .3s ease;font-size:1.1rem
}
form button:hover{background:#004a99}

/* Pago: QR codes */
.qr-codes{display:flex;justify-content:space-around;margin-top:2rem}
.qr-codes img{width:180px;height:180px;border:5px solid var(--light-color);border-radius:10px}

/* Spinner */
.spinner-wrapper{
  position:fixed;inset:0;background:#fff;z-index:9999;display:flex;justify-content:center;align-items:center;transition:opacity .5s ease
}
.spinner{
  border:8px solid var(--light-color);border-top:8px solid var(--primary-color);border-radius:50%;
  width:60px;height:60px;animation:spin 1s linear infinite
}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.hidden-spinner{opacity:0;visibility:hidden;pointer-events:none}

/* Scroll animations */
.hidden{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
.visible{opacity:1;transform:translateY(0)}

/* WhatsApp Popover */
.wa-popover{
  position:fixed;bottom:5.5rem;right:2rem;background:#fff;color:#111;padding:.75rem 1rem;border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.15);border:1px solid rgba(0,0,0,.06);max-width:240px;font-size:.95rem;z-index:1002;display:none
}
.wa-popover[data-open="true"]{display:block;animation:wa-pop-in .25s ease}
.wa-popover strong{color:#128C7E}
.wa-popover::after{
  content:'';position:absolute;right:16px;bottom:-8px;border-width:8px 8px 0 8px;border-style:solid;border-color:#fff transparent transparent transparent;
  filter:drop-shadow(0 -1px 1px rgba(0,0,0,.06))
}
.wa-popover-close{
  position:absolute;top:6px;right:8px;background:transparent;border:0;font-size:16px;cursor:pointer;color:#888;line-height:1
}
.wa-popover-close:hover{color:#000}
@keyframes wa-pop-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){ .wa-popover[data-open="true"]{animation:none} }

/* ===== Ingresantes (cards verticales + masonry) ===== */
#ingresantes{ background: var(--light-color); }

.ing-toolbar{ display:flex; justify-content:flex-end; margin:-1rem 0 1.5rem; }
.ing-year{
  border:1px solid #ccc; border-radius:8px; padding:.5rem .75rem; font:inherit; background:#fff;
}

.ing-grid{ column-count: 3; column-gap: 1rem; }
.ing-card{
  break-inside: avoid; margin: 0 0 1rem;
  background:#fff; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.08);
  overflow:hidden; position:relative; cursor:pointer; transition: transform .2s ease;
}
.ing-card:hover{ transform: translateY(-2px); }

.ing-card img{ width:100%; height:auto; display:block; }
.ing-cap{ padding:.75rem .9rem; display:flex; flex-direction:column; gap:.25rem; }
.ing-nombre{ font-weight:700; }
.ing-coar{ color: var(--secondary-color); font-size:.95rem; }
.ing-badge{
  position:absolute; top:.6rem; left:.6rem;
  background:rgba(0,0,0,.7); color:#fff; border-radius:999px; padding:.2rem .5rem; font-size:.8rem;
}

/* ===== Lightbox ===== */
.lb{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.8); z-index:1600;
}
.lb[aria-hidden="false"]{ display:flex; }

.lb-inner{ max-width:min(92vw, 720px); max-height:90vh; position:relative; }
.lb-inner img{ width:100%; height:auto; display:block; border-radius:12px; }
.lb-cap{ color:#fff; margin-top:.5rem; text-align:center; }

.lb-close, .lb-prev, .lb-next{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.6); color:#fff; border:0; width:40px; height:40px;
  border-radius:50%; cursor:pointer;
}
.lb-close{ top:-16px; right:-16px; transform:none; }
.lb-prev{ left:-52px; }
.lb-next{ right:-52px; }

body.lb-open{ overflow:hidden; }

/* ===== Topbar: segmented links (sin bordes/redondeos) ===== */
.portal-links{
  display: inline-flex;
  align-items: center;
  gap: 0;                /* sin espacios entre items */
  line-height: 1;
}

.portal-link{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;            /* separa ícono y texto */
  padding: .35rem .9rem; /* “pastilla” pero sin fondo/borde */
  color: #fff;
  text-decoration: none;
  border: 0;
  border-radius: 0;      /* sin redondeo */
  background: transparent;
  font-size: .9rem;
}

.portal-link i{ font-size: .95em; }
/* Separador vertical SOLO entre elementos (unión visual) */
.portal-link + .portal-link{
  padding-left: 1rem;    /* espacio tras el separador */
}

.portal-link + .portal-link::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 1.2em;                      /* alto del separador */
  background: rgba(255,255,255,.45);   /* solo la línea divisoria */
}

/* Hover/Focus: look profesional (sin “chip” de color) */
.portal-link:hover,
.portal-link:focus-visible{
  text-decoration: underline;
  outline: none; /* usamos focus-visible en el contenedor si quieres */
}


/* En pantallas chicas, conserva una sola línea (ya tienes white-space en .topbar-center) */
@media (max-width: 576px){
  .portal-link{ padding: .4rem .7rem; font-size: .88rem; }
  .portal-link + .portal-link{ padding-left: .9rem; }
}
/* Login */
.section-narrow{ padding: 5rem 0; }
.login-card{
  max-width: 520px; margin: 0 auto; background:#fff; border-radius:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08); padding:2rem;
}
.login-brand{ display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; }
.login-brand .brand-name{ font-weight:700; font-size:1.15rem; color:var(--dark-color); }
.login-brand .brand-desc{ color:var(--secondary-color); font-size:.95rem; }
.login-form .btn-primary{ width:100%; }
.login-note{ margin:.75rem 0 0; color:var(--secondary-color); font-size:.9rem; }

/* Ciclo (detalle) */
.section-ciclo{ padding: 4rem 0; }
.ciclo-hero{
  position:relative; border-radius:14px; overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.08); margin-bottom:2rem;
  display:grid; grid-template-columns: 1.4fr 1fr; gap:0;
}
.ciclo-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.ciclo-hero-text{
  padding:1.5rem; display:flex; flex-direction:column; gap:.8rem; background:#fff;
}
.ciclo-hero-text h1{ margin:0; }
.ciclo-price{ color:var(--primary-color); }
.btn-primary, .btn-pagar{
  display:inline-block; background: var(--primary-color); color:#fff; text-decoration:none;
  padding:.8rem 1.2rem; border-radius:8px;
}
.ciclo-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:1rem;
}
.ciclo-card{
  background:#fff; border-radius:12px; box-shadow:0 10px 20px rgba(0,0,0,.06);
  padding:1rem;
}
.ciclo-list{ margin:0; padding-left:1rem; }
.ciclo-calendar .cal-row{
  display:flex; justify-content:space-between; padding:.5rem .6rem; border:1px solid #eee; border-radius:8px; margin-bottom:.5rem;
}
.cal-day{ font-weight:600; }

/* Resumen en pagos */
.ciclo-summary{
  display:flex; gap:1rem; align-items:center;
  background:#fff; border-radius:12px; box-shadow:0 10px 20px rgba(0,0,0,.06);
  padding:1rem; margin-bottom:1rem;
}
.ciclo-summary img{ border-radius:10px; }
.ciclo-summary .muted{ color:var(--secondary-color); }
.ciclo-summary--empty{ background: #fff3cd; border: 1px solid #ffe09a; }

/* Responsive */
@media (max-width: 992px){
  .ciclo-hero{ grid-template-columns: 1fr; }
  .ciclo-grid{ grid-template-columns: 1fr; }
}