/* Base */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}

body{
  min-height: 100dvh;                 /* mejor en mobile (barra de URL variable) */
  display: grid;
  grid-template-rows: auto auto auto 1fr auto; /* h1 | h2 | carrusel | panel | footer */
  align-items: start;
  justify-items: center;
  color: #fff;
  text-align: center;
  position: relative;

  /* 👇 permite desplazarse hacia el footer */
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;

  /* más aire y safe-area en iOS */
  padding: clamp(4px, 4vh, 48px) 16px calc(clamp(12px, 5vh, 56px) + env(safe-area-inset-bottom));
  row-gap: 16px;
}

:root{
  --modal-surface: linear-gradient(135deg, #111833, #35247c);
  --modal-surface-bright: radial-gradient(circle at top right, rgba(56,189,248,.25), transparent 45%);
  --modal-border: rgba(255,255,255,.16);
  --modal-card: rgba(15,23,42,.7);
  --modal-card-border: rgba(148,163,184,.2);
  --modal-cta: linear-gradient(135deg,#38bdf8,#22d3ee);
  --modal-cta-text: #041724;
  --modal-muted: rgba(226,232,240,.78);
}


/* Fondo y overlay (igual) */
.bg-video{ position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  filter:saturate(.9) brightness(.65); opacity:0; transition:opacity 1.2s ease }
.bg-video.visible{ opacity:1 }
.overlay{ position:fixed; inset:0; z-index:-1;
  background: radial-gradient(transparent 30%, rgba(0,0,0,.6) 80%),
              linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.65)); pointer-events:none }

/* Títulos */
h1{ font-size:2.8rem; font-weight:600; margin-bottom:4px; text-shadow:0 2px 10px rgba(0,0,0,.5) }
h2{ font-size:1.1rem; font-weight:400; color:#ccc; margin-bottom:6px; letter-spacing:1px }

/* === Carrusel transparente === */
.hero-carousel{
  width:min(96vw,1200px);
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  /* separación superior/inferior */
  margin-top:8px;
}

.hc-viewport{
  overflow:hidden;
  border-radius:18px;
  /* vidrio muy sutil */
  background:rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding:18px 10px;
}

.hc-track{
  display:flex;
  gap:18px;
  will-change:transform;
}
.hero-carousel.is-single-page .hc-track{
  justify-content:center;
}

.hc-card{
  flex:0 0 calc((100% - (18px * (var(--perView,1)-1))) / var(--perView,1));
  /* fallback a 1 por defecto; JS mueve por viewport */
}
.hc-card figure{
  width:clamp(210px, 22vw, 260px);
  aspect-ratio: 1 / 1.05;
  margin:0 auto; padding:16px;
  border-radius:16px;
  background:rgba(0,0,0,.25);
  box-shadow:0 12px 30px rgba(0,0,0,.25) inset, 0 8px 20px rgba(0,0,0,.25);
  display:grid; place-items:center; gap:14px;
}
.hc-card img{
  width:72%; aspect-ratio:1/1; object-fit:cover;
  border-radius:50%; border:3px solid rgba(255,255,255,.65);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.hc-card figcaption{
  font-weight:600; font-size:1rem; letter-spacing:.2px;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}

  /* Boton alineado a la izquierda */
.hc-btn{
  --size:42px;
  width:var(--size); height:var(--size);
  border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center;
  color:#fff; background:rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  transition:transform .2s ease, background .2s ease, opacity .2s ease;
}
.hc-btn:hover{ transform:translateY(-1px); background:rgba(255,255,255,.2) }
.hc-btn:active{ transform:scale(.96) }

/* Dots */
.hc-dots{ display:flex; justify-content:center; gap:8px; margin-top:10px; grid-column:1 / -1 }
.hc-dots .dot{
  width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.35);
  border:0; cursor:pointer; transition:transform .2s ease, background .2s ease;
}
.hc-dots .dot.active{ background:#fff; transform:scale(1.25) }

.trust-banner-section{
  width: min(92vw, 1100px);
  margin: 28px auto 10px;
}
.trust-banner{
  padding: clamp(16px, 2.6vw, 26px) clamp(18px, 3.5vw, 32px);
  border-radius: 20px;
  background: linear-gradient(115deg,#7c3aed,#5b21b6);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(0.8rem,1.8vw,1.4rem);
  flex-wrap:wrap;
  box-shadow:0 30px 45px rgba(0,0,0,.45);
}
.trust-banner__text{
  flex:1 1 240px;
}
.trust-banner__eyebrow{
  margin:0 0 .35rem;
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:.78rem;
  font-weight:600;
  color:rgba(255,255,255,.85);
}
.trust-banner__text h3{
  margin:0;
  font-size:clamp(1.1rem,1vw + 1rem,1.8rem);
  font-weight:700;
}
.trust-banner__avatars{
  display:flex;
  align-items:center;
  gap:.45rem;
  flex-wrap:nowrap;
  margin-top:.4rem;
}
.trust-banner__avatar{
  width:52px;
  height:52px;
  border-radius:999px;
  border:3px solid rgba(255,255,255,.55);
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(3,7,18,.35);
  font-weight:600;
  font-size:.95rem;
  box-shadow:0 12px 24px rgba(0,0,0,.45);
  color:#fff;
  margin-left:-12px;
}
.trust-banner__avatar:first-child{ margin-left:0; }
.trust-banner__avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.trust-banner__count{
  width:56px;
  height:56px;
  border-radius:999px;
  background:rgba(0,0,0,.65);
  border:3px solid rgba(255,255,255,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:1rem;
  color:#fff;
  margin-left:-10px;
  box-shadow:0 14px 26px rgba(0,0,0,.45);
}
@media (max-width:640px){
  .trust-banner{
    flex-direction:column;
    text-align:center;
    padding:18px 20px;
    gap:.8rem;
  }
  .trust-banner__avatars{
    flex-wrap:wrap;
    justify-content:center;
    margin-top:0;
  }
  .trust-banner__avatar,
  .trust-banner__count{
    margin-left:0;
  }
  .trust-banner__text h3{
    font-size:1.2rem;
  }
}

/* Panel principal (iconos) */
.container{
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 32px 28px;

  /* Grid que se reparte equitativamente */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  justify-items: center;     /* centra cada tarjeta */
  align-content: start;
  gap: clamp(20px, 3vw, 36px);

  width: min(92vw, 1100px);
  margin-top: 12px;
}


/* Items */
.category{
  width: 100%;
  text-align: center;
  cursor: pointer;
  transition: transform .3s ease, opacity .3s ease;
  padding: 12px 8px;         /* aire vertical */
}
.category:hover{ transform: translateY(-8px); opacity: .9; }
.category i{ font-size: 2.5rem; color: #fff; margin-bottom: 10px; }
.category p{ font-size: 1rem; color: #fff; }

/* Footer */
footer{ margin-top:20px; align-self:end; display:flex; gap:30px; justify-content:center;
   }
footer a{ color:#fff; font-size:1.5rem; text-decoration:none; transition:color .3s ease }
footer a:hover{ color:#1DA1F2 }

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){ .bg-video{ display:none } }

/* Breakpoints carrusel (per-view visual) */
@media (min-width: 600px){ .hero-carousel{ --perView:2 } }
@media (min-width: 900px){ .hero-carousel{ --perView:3 } }
@media (min-width:1200px){ .hero-carousel{ --perView:3 } }

/* Breakpoints panel de iconos */
@media (max-width: 768px){
  h1{ font-size:2rem }
  .container{ padding:25px; gap:25px; grid-template-columns:1fr; width:min(94vw,700px) }
  .category i{ font-size:2rem }
}
@media (min-width: 768px){ .container{ grid-template-columns: repeat(2,1fr) } }
@media (min-width:1024px){ .container{ grid-template-columns: repeat(3,1fr) } }

/* === Typewriter === */
#typewrap {
  min-height: 1.4em;              /* evita saltos al cambiar frases */
  letter-spacing: 1px;
  color: #ddd;
}

#typewriter {
  white-space: nowrap;
  display: inline-block;
  text-shadow: 0 2px 10px rgba(0,0,0,.4);
}

/* cursor */
.caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 6px;
  background: #fff;
  opacity: .9;
  animation: blink 1s step-end infinite;
  vertical-align: -2px;
}

@keyframes blink { 50% { opacity: 0; } }

/* opcional: en móviles, letra un poco más chica */
@media (max-width: 480px) {
  #typewrap { font-size: .95rem; }
}

/* --- Botón "Ver Planes" en el carrusel --- */
.hc-card figure{
  display: grid;
  grid-template-rows: auto auto auto; /* img | título | botón */
  gap: 12px;
}

  /* Boton alineado a la izquierda */
.plan-btn{
  justify-self: center;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.35);
  background: #008000;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.plan-btn:hover{
  transform: translateY(-2px);
  background: #0a5c0a;
  box-shadow: 0 10px 24px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.35);
}

.plan-btn:active{ transform: translateY(0); }
.plan-btn:focus{ outline: 2px solid rgba(255,255,255,.55); outline-offset: 2px; }

.hc-highlight{
  justify-self: center;
  margin-bottom: .4rem;
  padding: .2rem .75rem;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 600;
  color: #f8fafc;
  background: linear-gradient(135deg, #2563eb, #4c1d95);
  letter-spacing: .02em;
}

.hc-perks{
  display: grid;
  gap: .35rem;
  margin-top: .35rem;
  margin-bottom: .75rem;
}

.hc-perk{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .9rem;
  color: rgba(226, 232, 240, 0.95);
}


.hc-perk i{
  font-size: 1rem;
}


/* Móvil estrecho */
@media (max-width: 420px){
  .hero-carousel{ width: 100vw; margin-left: -16px; margin-right: -16px; } /* ocupa todo el ancho */
  .hc-viewport{ padding: 12px 8px; border-radius: 14px; }
  .hc-track{ gap: 12px; }
  .hc-card figure{
    width: clamp(160px, 68vw, 210px); /* antes min 210: demasiado grande para 360px */
    padding: 12px;
    border-radius: 14px;
    gap: 10px;
  }
  .hc-card img{ width: 68%; border-width: 2px; }
  .hc-btn{ --size: 36px; }            /* flechas más chicas */
  .hc-dots{ gap: 6px; margin-top: 8px; }
  h1{ font-size: 1.9rem; }
  #typewrap{ font-size: .95rem; }
}

/* ===== Mobile: una debajo de otra, con buena separación ===== */
@media (max-width: 768px){
  .container{
    grid-template-columns: 1fr;   /* stack */
    row-gap: 26px;                /* separación entre ítems */
    padding: 22px 22px 26px;
    width: min(94vw, 700px);
  }
  .category i{ font-size: 2rem; margin-bottom: 8px; }
  .category p{ line-height: 1.2; }
  .category{ border-bottom: 1px solid rgba(255,255,255,.08); }
  .category:last-child{ border-bottom: 0; }
}

/* ===== Desktop grande: 3 columnas “perfectas” ===== */
@media (min-width: 1200px){
  .container{
    grid-template-columns: repeat(3, minmax(240px, 1fr));
    column-gap: clamp(28px, 4vw, 48px);
    row-gap: clamp(20px, 3vw, 36px);
  }
}

/* ===== Modal rubros (override) ===== */
#modal-rubros .cat-modal{
  position:relative;
  padding: clamp(24px, 4vw, 40px);
  border-radius:24px;
  background: var(--modal-surface);
  border:1px solid var(--modal-border);
  box-shadow:0 26px 55px rgba(3,7,18,.65);
  width:min(1020px, 96vw);
  max-height:min(84vh, 860px);
  overflow:hidden;
}
#modal-rubros .cat-modal::after{
  content:'';
  position:absolute;
  inset:-40% -60% auto 35%;
  width:220%;
  height:220%;
  background: var(--modal-surface-bright);
  opacity:.7;
  pointer-events:none;
}
#modal-rubros .cat-modal > *{ position:relative; z-index:1; }

#modal-rubros .cat-header{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin-bottom: clamp(16px, 2vw, 24px);
}
#modal-rubros .cat-header h3{
  margin:0;
  font-size: clamp(1rem, 1.15vw + .6rem, 1.2rem);
  letter-spacing:.35px;
  text-align:center;
}
#modal-rubros .cat-header__text{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
}
#modal-rubros .cat-subtitle{
  margin:0;
  font-size: clamp(.78rem, .9vw + .3rem, .95rem);
  color:rgba(226,232,240,.8);
}
#modal-rubros .cat-close{
  position:absolute;
  top:50%;
  right: clamp(12px, 2vw, 20px);
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(15,23,42,.65);
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  transform:translateY(-50%);
  transition:none;
  z-index:5;
}
#modal-rubros .cat-header h3{
  margin:0;
  font-size: clamp(1rem, 1.15vw + .6rem, 1.2rem);
  letter-spacing:.35px;
  width:100%;
  text-align:center;
}
#modal-rubros .cat-close:hover{ background:rgba(33,41,61,.85); }

#modal-rubros .cat-grid{
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap: clamp(16px, 2vw, 24px);
  padding: clamp(16px, 2vw, 24px) 4px 4px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.2) transparent;
}
#modal-rubros .cat-grid::-webkit-scrollbar{ width:10px; }
#modal-rubros .cat-grid::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.25); border-radius:999px; }

#modal-rubros .cat-card{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 32px rgba(3,7,18,.45);
  min-height:210px;
}
#modal-rubros .cat-imgfill::after{
  background:linear-gradient(180deg, rgba(9,11,25,.08) 0%, rgba(2,7,20,.85) 85%);
}
#modal-rubros .cat-overlay{
  padding: clamp(16px, 2.4vw, 24px);
  justify-content:flex-end;
  gap:10px;
}
#modal-rubros .cat-ttl{
  font-size: clamp(1rem, 1.2vw + .5rem, 1.25rem);
  text-shadow:0 10px 20px rgba(3,7,18,.65);
}
#modal-rubros .cat-desc.small{
  color:rgba(226,232,240,.92);
  font-size: clamp(.82rem, .8vw + .45rem, 1rem);
}
#modal-rubros .cat-planline{
  align-items:center;
  width:100%;
  margin-top:6px;
}
#modal-rubros .btn-contratar{
  padding: clamp(6px, .8vw, 9px) clamp(14px, 1.1vw, 22px);
  font-size: clamp(.78rem, .85vw + .4rem, .95rem);
  background:var(--modal-cta);
  color:var(--modal-cta-text);
  border:1px solid rgba(255,255,255,.25);
  min-width:max-content;
}

@media (max-width:640px){
  #modal-rubros .cat-modal{
    padding: clamp(18px, 6vw, 28px);
  }
  #modal-rubros .cat-grid{
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
  #modal-rubros .cat-overlay{
    padding: clamp(14px, 3vw, 20px);
  }
  #modal-rubros .btn-contratar{
    width:100%;
    justify-content:center;
  }
}

/* ===== Modal selector inicial ===== */
.lead-modal{
  display:grid;
  gap:clamp(18px, 3vw, 28px);
  padding:clamp(26px, 4vw, 38px);
  background: linear-gradient(135deg,#121c3b,#4627a7);
  border:1px solid var(--modal-border);
  box-shadow:0 24px 48px rgba(6,9,26,.6);
}
.lead-modal__header{
  display:grid;
  gap:10px;
  text-align:left;
}
.lead-modal__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(56,189,248,.22);
  color:#e0f2fe;
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.6px;
  text-transform:uppercase;
}
.lead-modal__title{ margin:0; font-size: clamp(1.2rem, 1vw + 1rem, 1.6rem); }
.lead-modal__text{
  margin:0;
  color:var(--modal-muted);
  font-size:.95rem;
}
.lead-modal__form{
  display:grid;
  gap:clamp(14px, 2vw, 22px);
  padding: clamp(18px, 3vw, 26px);
  border-radius:18px;
  background: rgba(15,23,42,.45);
  border:1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.lead-modal__label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  color:#f8fafc;
  font-size:.9rem;
}
.lead-modal__select{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(8,13,28,.7);
  color:#fff;
  padding:12px 16px;
  font-size:1rem;
  font-weight:600;
  box-shadow:0 16px 32px rgba(5,8,20,.4);
}
.lead-modal__select:focus{
  outline:3px solid rgba(56,189,248,.35);
  outline-offset:2px;
}
.lead-modal__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:flex-end;
}
.lead-modal__btn{
  border:0;
  border-radius:999px;
  padding:12px 26px;
  font-weight:600;
  font-size:.95rem;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.lead-modal__btn--primary{
  background:var(--modal-cta);
  color:var(--modal-cta-text);
  box-shadow:0 18px 32px rgba(34,211,238,.32);
}
.lead-modal__btn--ghost{
  background:rgba(255,255,255,.08);
  color:#f8fafc;
  border:1px solid rgba(255,255,255,.18);
}
.lead-modal__btn:hover{ transform:translateY(-1px); }

/* ===== Modal marketing ===== */
.marketing-modal{
  position:relative;
  margin: clamp(16px, 4vw, 32px) auto;
  display:grid;
  gap:clamp(18px, 3vw, 30px);
  padding:clamp(28px, 5vw, 44px);
  padding-top: clamp(48px, 6vw, 62px);
  padding-right: clamp(48px, 6vw, 72px);
  background: linear-gradient(135deg,#0f142c,#471f8f);
  border:1px solid var(--modal-border);
  border-radius: 32px;
  color:#fff;
  overflow:hidden;
  min-width:min(520px, 94vw);
  max-width: min(900px, 92vw);
  box-shadow: 0 35px 65px rgba(5, 8, 20, 0.55);
}
.marketing-modal::after{
  content:'';
  position:absolute;
  inset:-50% -20% auto 20%;
  width:200%;
  height:200%;
  background: radial-gradient(circle, rgba(56,189,248,.3), transparent 40%);
  opacity:.85;
  pointer-events:none;
}
.marketing-modal > *{ position:relative; z-index:1; }
.marketing-modal__close{
  position:absolute;
  top: clamp(10px, 1.6vw, 20px);
  right: clamp(10px, 1.6vw, 20px);
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(15,23,42,.6);
  color:#fff;
  font-size:1.4rem;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:transform .2s ease, background .2s ease;
  z-index:2;
}
.marketing-modal__close:hover{ transform:translateY(-1px); background:rgba(33,41,61,.85); }
.marketing-modal__tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(56,189,248,.2);
  font-weight:600;
}
.marketing-modal__headline{
  margin:0;
  font-size: clamp(1.4rem, 1vw + 1.1rem, 1.9rem);
}
.marketing-modal__message{
  display:none; /* oculto ya no se utiliza */
}
.marketing-modal__benefits{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.marketing-modal__benefits li{
  font-weight:600;
  color:rgba(226,232,240,.92);
}
.marketing-modal__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}
.marketing-modal__cta{
  border:0;
  border-radius:999px;
  padding:12px 28px;
  font-weight:700;
  font-size:1rem;
  cursor:pointer;
  background:var(--modal-cta);
  color:var(--modal-cta-text);
  box-shadow:0 18px 32px rgba(34,211,238,.32);
}
.marketing-modal__ghost{
  border-radius:999px;
  padding:12px 28px;
  border:1px solid rgba(255,255,255,.35);
  background:transparent;
  color:#fff;
  font-weight:600;
  cursor:pointer;
}

/* ===== Modal planes ===== */
.plan-modal{
  display:grid;
  gap:clamp(12px, 2.5vw, 20px);
  background: transparent;
  border:0;
  padding:0;
}
.plan-header{
  position:static;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: clamp(6px, 1vw, 10px) 0;
  background: transparent;
  border:0;
  border-radius:0;
}
.plan-close{
  appearance:none;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(15,23,42,.65);
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  color:#fff;
  font-size: clamp(22px, 2vw + 12px, 30px);
  line-height:1;
  cursor:pointer;
  transition:background .2s ease;
}
.plan-close:hover{
  background:rgba(33,41,61,.85);
}
.plan-body{
  padding:0;
}

.plan-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.plan-item{
  position:relative;
  padding-left:24px;
  font-size:.95rem;
  color:#f8fafc;
  line-height:1.5;
}
.plan-item::before{
  content:"";
  position:absolute;
  left:0;
  top:0.7em;
  width:10px;
  height:10px;
  border-radius:50%;
  background:radial-gradient(circle, #34d399 0%, #14b8a6 60%, rgba(20,184,166,.3) 100%);
  box-shadow:0 0 8px rgba(34,197,94,.45);
  transform:translateY(-50%);
}
@media (max-width:640px){.plan-item{font-size:.9rem;}}

/* ===== Modal registro ===== */
#modal-registro .u-modal__content{
  background: linear-gradient(135deg,#0c1228,#2b1c66);
  border:1px solid var(--modal-border);
}
.reg-modal__header,
.reg-stepper,
.reg-field,
.reg-summary,
.reg-card{
  backdrop-filter:blur(4px);
}

/* Logo + titular */
.brand-identity{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(6px, 1.5vw, 16px);
  margin:clamp(12px, 2vh, 28px) auto clamp(8px, 1.5vh, 18px);
  max-width:90vw;
  flex-wrap:nowrap;
}
.brand-logo{
  display:block;
  width:clamp(36px, 4.5vw, 58px);
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));
  user-select:none;
  pointer-events:none;
}
.brand-title{
  font-size:clamp(1.1rem, 2.8vw, 1.8rem);
  letter-spacing:.06em;
  margin:0;
  font-family:'Poppins',sans-serif;
  font-weight:700;
}
.brand-subtitle{
  margin:0 0 clamp(10px, 2vh, 18px);
  font-size:clamp(.78rem, 1.9vw, 1.1rem);
  letter-spacing:.04em;
  word-spacing:.08em;
}

/* ===== Modal base ===== */
.u-modal { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; }
.u-modal.hidden { display: none; }
.u-modal__overlay { position: absolute; inset: 0; backdrop-filter: blur(4px); background: rgba(0,0,0,.55); }
.u-modal__dialog { position: relative; width: min(1100px, 96vw); max-height: 90vh; }
.u-modal__content {
  position:relative;
  background: var(--modal-surface);
  border: 1px solid var(--modal-border);
  border-radius: 24px;
  box-shadow: 0 25px 60px rgba(4,7,25,.65);
  overflow: hidden;
  padding: clamp(22px, 3vw, 36px);
  backdrop-filter: blur(8px);
}

#modal-cursos .u-modal__content{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.courses-modal{
  width: min(540px, 92vw);
  margin: 0 auto;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(15,23,42,.92), rgba(49,46,129,.92));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 45px rgba(3,7,18,.55);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 24px);
}
.courses-modal__header{
  display: grid;
  gap: 6px;
  position: relative;
}
.courses-modal__eyebrow{
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .8;
  color: #c7d2fe;
}
.courses-modal__title{
  margin: 0;
  font-size: clamp(1.3rem, 1.2vw + 1rem, 1.6rem);
  color: #fff;
}
.courses-modal__close{
  position: absolute;
  top: 0;
  right: 0;
  appearance: none;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(15,23,42,.3);
  color: #fff;
  border-radius: 999px;
  width: 38px;
  height: 38px;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.courses-modal__body{
  color: #e2e8f0;
  font-size: clamp(1rem, 1vw + .8rem, 1.1rem);
  line-height: 1.6;
}
.courses-modal__footer{
  display: flex;
  justify-content: flex-end;
}
.courses-modal__dismiss{
  border: 0;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: .95rem;
  background: linear-gradient(120deg,#6366f1,#8b5cf6);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(99,102,241,.35);
}

#modal-beneficios .u-modal__content{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.benefits-modal{
  width: min(520px, 92vw);
  margin: 0 auto;
  padding: clamp(26px, 3vw, 38px);
  border-radius: 24px;
  background: linear-gradient(150deg, rgba(20,24,47,.95), rgba(6,78,59,.92));
  border: 1px solid rgba(94,234,212,.25);
  box-shadow: 0 20px 55px rgba(2,6,23,.65);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 26px);
}
.benefits-modal__header{
  display: grid;
  gap: 6px;
  position: relative;
}
.benefits-modal__eyebrow{
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: #5eead4;
  opacity: .85;
}
.benefits-modal__title{
  margin: 0;
  color: #f0fdfa;
  font-size: clamp(1.35rem, 1.2vw + 1rem, 1.7rem);
}
.benefits-modal__close{
  position: absolute;
  top: 0;
  right: 0;
  appearance: none;
  border: 1px solid rgba(94,234,212,.45);
  background: rgba(6,78,59,.35);
  color: #f0fdfa;
  border-radius: 999px;
  width: 38px;
  height: 38px;
  font-size: 1.4rem;
  cursor: pointer;
}
.benefits-modal__body{
  color: #ccfbf1;
  font-size: clamp(1rem, 1vw + .8rem, 1.15rem);
  line-height: 1.65;
}
.benefits-modal__footer{
  display: flex;
  justify-content: flex-end;
}
.benefits-modal__cta{
  border: 0;
  border-radius: 999px;
  padding: 12px 28px;
  font-weight: 600;
  font-size: .98rem;
  background: linear-gradient(120deg,#34d399,#10b981);
  color: #06281f;
  cursor: pointer;
  box-shadow: 0 15px 30px rgba(16,185,129,.35);
}

#modal-about .u-modal__content{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.about-modal{
  width: min(520px, 92vw);
  margin: 0 auto;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 24px;
  background: linear-gradient(150deg, rgba(15,23,42,.95), rgba(59,130,246,.9));
  border: 1px solid rgba(147,197,253,.35);
  box-shadow: 0 22px 55px rgba(8,14,35,.6);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.8vw, 24px);
}
.about-modal__header{
  display: grid;
  gap: 6px;
  position: relative;
}
.about-modal__eyebrow{
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #bae6fd;
  opacity: .85;
}
.about-modal__title{
  margin: 0;
  color: #e0f2fe;
  font-size: clamp(1.35rem, 1.1vw + 1rem, 1.65rem);
}
.about-modal__close{
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid rgba(191,219,254,.5);
  background: rgba(30,64,175,.45);
  color: #e0f2fe;
  border-radius: 999px;
  width: 38px;
  height: 38px;
  font-size: 1.35rem;
  cursor: pointer;
}
.about-modal__body{
  color: #f0f9ff;
  font-size: clamp(1rem, 1vw + .8rem, 1.15rem);
  line-height: 1.65;
}
.about-modal__intro{
  margin-top: 12px;
  font-weight: 600;
  color: #bae6fd;
}
.about-modal__list{
  margin: 10px 0 0;
  padding-left: 20px;
  color: #e0f2fe;
  display: grid;
  gap: 6px;
  font-size: clamp(.95rem, 1vw + .7rem, 1.05rem);
}
.about-modal__list li::marker{
  color: #7dd3fc;
}

#modal-buscar .u-modal__content{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.search-modal{
  width: min(960px, 95vw);
  margin: 0 auto;
  padding: clamp(22px, 4vw, 40px);
  border-radius: 26px;
  background: linear-gradient(140deg, rgba(12, 19, 36, .94), rgba(15, 23, 42, .88));
  border:1px solid rgba(148,163,184,.24);
  box-shadow:0 24px 60px rgba(3,7,18,.55);
  display:flex;
  flex-direction:column;
  gap: clamp(18px, 2vw, 28px);
}
.search-modal__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.search-modal__eyebrow{
  text-transform:uppercase;
  letter-spacing:.25em;
  font-size:.75rem;
  color:#bae6fd;
  margin-bottom:6px;
}
.search-modal__header h3{
  margin:0;
  font-size:clamp(1.3rem, 1.2vw + 1rem, 1.7rem);
  color:#f8fafc;
}
.search-modal__hint{
  margin:.35rem 0 0;
  color:rgba(226,232,240,.8);
  font-size:.95rem;
}
.search-modal__filter{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.3);
  background:rgba(15,23,42,.6);
}
.search-modal__filter i{
  font-size:1.2rem;
  color:#94a3b8;
}
.search-modal__input{
  flex:1;
  border:0;
  background:transparent;
  color:#f8fafc;
  font-size:1rem;
}
.search-modal__input:focus{
  outline:none;
}
.search-modal__close{
  appearance:none;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(15,23,42,.4);
  border-radius:999px;
  width:42px;
  height:42px;
  font-size:1.6rem;
  color:#f8fafc;
  cursor:pointer;
}
.search-modal__empty{
  padding:32px;
  border-radius:18px;
  background:rgba(15,23,42,.6);
  border:1px solid rgba(148,163,184,.2);
  text-align:center;
  color:#e2e8f0;
}
.search-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:clamp(16px, 2vw, 24px);
}
.search-card{
  border-radius:22px;
  border:1px solid rgba(59,130,246,.25);
  background:rgba(11,16,30,.85);
  padding:18px;
  transition:transform .2s ease, border-color .2s ease;
}
.search-card[hidden]{
  display:none;
}
.search-card:hover{
  transform:translateY(-4px);
  border-color:#38bdf8;
}
.search-card__link{
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.search-card__avatar{
  width:90px;
  height:90px;
  border-radius:50%;
  background:radial-gradient(circle at top, rgba(59,130,246,.9), rgba(59,130,246,.4));
  display:grid;
  place-items:center;
  overflow:hidden;
  position:relative;
  font-weight:700;
  font-size:1.4rem;
  color:#e0f2fe;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.search-card__avatar-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.search-card__avatar.has-logo .search-card__initials{
  opacity:0;
}
.search-card__initials{
  transition:opacity .2s ease;
}
.search-card__meta h4{
  margin:0 0 6px;
  font-size:1rem;
}
.search-card__meta p{
  margin:0;
  font-size:.9rem;
  color:rgba(226,232,240,.8);
}

#modal-rubros .u-modal__content{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* Evitar scroll del fondo cuando el modal está abierto */
body.modal-open { overflow: hidden; }

/* ===== Contenido planes.php ===== */
.plan-modal{
  display:grid;
  grid-template-rows:auto 1fr;
  max-height:min(82vh, 720px);
}
.plan-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: clamp(12px, 2vw, 18px);
  background: transparent;
  border:0;
  position:sticky;
  top:0;
  z-index:2;
}
.plan-header h3{
  margin:0;
  font-size: clamp(1rem, 1.4vw + .6rem, 1.2rem);
  letter-spacing:.4px;
}
.plan-body{
  padding: clamp(18px, 3vw, 30px) clamp(20px, 3.2vw, 38px);
  display:flex;
  justify-content:center;
  align-items:center;
}
.plan-empty{
  margin:0;
  color:#ddd;
  font-size: clamp(.9rem, 1vw + .5rem, 1.05rem);
  text-align:center;
}

.plan-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.plan-item{display:flex;align-items:flex-start;gap:10px;font-size:.95rem;color:#f8fafc;line-height:1.5;}
.plan-item::before{content:'?';flex:0 0 auto;font-size:1rem;color:#34d399;margin-top:2px;}
@media (max-width:640px){.plan-item{font-size:.9rem;}}
plan-list{
    gap: clamp(14px, 3vw, 20px);
  }
  .plan-item{
    border-radius:14px;
  }


/* ===== Contenido categorias.php ===== */
.cat-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: clamp(10px, 1.2vw, 16px) clamp(12px, 1.6vw, 20px);
  position: sticky; top: 0; z-index: 2;
  background: transparent;
  border-bottom: none;
}
.cat-header h3{ margin:0; font-size: clamp(1rem, 1.2vw + .6rem, 1.1rem); letter-spacing:.3px; }
.cat-close{ appearance:none; border:0; background:transparent; color:#fff; font-size: clamp(22px, 1.6vw + 12px, 28px); line-height:1; cursor:pointer; }
.cat-empty{ padding:28px 22px; color:#ddd; }

.cat-modal{
  display:grid;
  grid-template-rows:auto 1fr;
  max-height:min(82vh, 820px);
  width:min(96vw, 1040px);
  margin:0 auto;
}

/* ===== Grid ===== */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(12px, 1.2vw, 20px);
  padding: clamp(12px, 1.4vw, 18px);
  overflow-y:auto; min-height:0; scroll-behavior:smooth;
}
.cat-grid::-webkit-scrollbar{ width:10px; }
.cat-grid::-webkit-scrollbar-track{ background:transparent; }
.cat-grid::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:999px; }
.cat-grid{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.15) transparent; }

/* ===== Card ===== */
.cat-card{
  position: relative;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  overflow:hidden;
  isolation:isolate;
}

/* Imagen + capa oscura */
.cat-imgfill{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: clamp(160px, 26vh, 260px);
  display: block;
  border-radius: inherit;
  overflow: hidden;
}
.cat-imgfill img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: 0;
}
.cat-imgfill::after{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  background:
    linear-gradient(to top,
      rgba(0,0,0,.80) 16%,
      rgba(0,0,0,.50) 55%,
      rgba(0,0,0,.28) 100%
    ),
    rgba(0,0,0,.18);
  z-index: 1;
  pointer-events:none;
}

/* ========= Overlay general ========= */
.cat-overlay{
  position:absolute; inset:0;
  display:flex;
  flex-direction: column;
  justify-content:flex-start;
  align-items:flex-start;
  gap:12px;
  padding: 16px;
  color:#fff;
  z-index: 2;
}

/* Bloque de texto (título + descripción) */
.cat-overlay__text{
  text-align:left;
}
.cat-ttl{ margin:0 0 4px; font-size: clamp(.9rem, 1.1vw + .55rem, 1.05rem); font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.cat-desc.small{ margin:0; font-size: clamp(.78rem, .9vw + .45rem, .95rem); opacity:.9; }

/* Línea del chip */
.cat-planline{
  display:flex;
  justify-content:flex-start;
  margin-bottom: 4px;
}
.pill{
  display:inline-block;
  padding: clamp(4px, .6vw, 6px) clamp(8px, .9vw, 10px);
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  font-size: clamp(.72rem, .9vw + .4rem, .85rem);
  color:#f3f3f3;
  white-space: nowrap;
}

  /* Boton alineado a la izquierda */
.cat-overlay__cta{
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  width:auto;
  margin-top: clamp(4px, 1.2vh, 10px);
  align-self:flex-start;
}
.btn-contratar{
  appearance:none; border:0; cursor:pointer;
  border-radius:999px;
  padding: clamp(6px, .85vw, 9px) clamp(12px, 1vw, 18px);
  font-weight:700;
  font-size: clamp(.78rem, .8vw + .45rem, .9rem);
  background:#10b981; color:#0b1d16;
  box-shadow:0 4px 14px rgba(16,185,129,.28);
  min-width: max-content;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-contratar:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.btn-contratar:active{ transform:translateY(0); filter:brightness(.98); }

/* ===== Responsive ===== */
@media (max-width:640px){
  .cat-overlay{
    padding: clamp(12px, 2vw, 16px);
    text-align:left;
    gap:10px;
  }
  .cat-overlay__text{
    max-width: 100%;
  }
  .cat-overlay__cta{
    width:auto;
    margin-top:6px;
    align-self:flex-end;
  }
  .btn-contratar{
    width:auto;
    min-width: clamp(150px, 42vw, 220px);
    text-align:center;
  }
}

@media (max-width:480px){
  .cat-grid{
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    padding:12px 10px;
    gap:14px;
  }
  .cat-card{
    border-radius:12px;
  }
  .cat-imgfill{
    min-height:220px;
  }
  .cat-overlay{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .cat-overlay__text{
    max-width:100%;
  }
  .cat-planline{
    justify-content:flex-start;
    margin-bottom:4px;
  }
  .cat-overlay__cta{
    align-items:flex-start;
    width:auto;
    margin-top:6px;
    align-self:flex-end;
  }
  .btn-contratar{
    width:auto;
    min-width: clamp(140px, 60vw, 200px);
    text-align:center;
  }
}

/* Desktop (>=641px): layout left aligned */
@media (min-width:641px){
  .cat-overlay{
    justify-content:flex-start;
    align-items:flex-start;
    text-align:left;
    padding: clamp(14px, 2vh, 20px);
    gap:16px;
  }

  .cat-overlay__text{
    max-width: 88%;
    margin: 0;
  }

  /* Chip alineado con el texto */
  .cat-planline{
    margin-top: 4px;
    margin-bottom: 12px;
    justify-content:flex-start;
  }

  /* Boton alineado a la izquierda */
  .cat-overlay__cta{
    justify-content:flex-start;
    margin-top: clamp(6px, 1.6vh, 14px);
  }

  .btn-contratar{
    width:auto;
  }
}

/* Hover extra (opcional) */
@media (hover:hover){
  .cat-card:hover .cat-imgfill::after{
    background:
      linear-gradient(to top,
        rgba(0,0,0,.86) 16%,
        rgba(0,0,0,.60) 55%,
        rgba(0,0,0,.42) 100%
      ),
      rgba(0,0,0,.20);
  }
}
/* === Modal registro === */
#modal-registro .u-modal__dialog{
  width: min(720px, 94vw);
  max-height: calc(100vh - clamp(32px, 6vh, 80px));
  display: flex;
  flex-direction: column;
}
#modal-registro .u-modal__content{
  background: rgba(15, 23, 42, 0.95);
  color: #e2e8f0;
  border-radius: 20px;
  padding: clamp(20px, 3vw, 28px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 28px);
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.45);
  max-height: 100%;
  flex: 1 1 auto;
}
#modal-registro .reg-modal {
  position: relative;
}
.reg-progress {
  position: absolute;
  inset: clamp(10px, 1.5vw, 20px);
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.5rem;
  padding: clamp(24px, 3vw, 40px);
  backdrop-filter: blur(6px);
  box-shadow: 0 20px 40px rgba(2, 6, 23, 0.45);
  z-index: 12;
}
.reg-progress.hidden {
  display: none;
}
.reg-progress__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 28rem;
}
.reg-progress__bar{
  width: min(320px, 60vw);
  height: 10px;
  border-radius: 999px;
  background: rgba(148,163,184,0.25);
  overflow: hidden;
  position: relative;
}
.reg-progress__bar-fill{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,#06b6d4 0%, #3b82f6 40%, #8b5cf6 100%);
  transform: translateX(-100%);
  animation: reg-progress-bar 1.5s ease-in-out infinite;
  animation-play-state: paused;
}
.reg-progress__bar-fill.is-animating{
  animation-play-state: running;
}
.reg-progress__message {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.1rem);
  font-weight: 600;
  color: #e2e8f0;
  line-height: 1.4;
}
.reg-modal--loading .reg-close,
.reg-modal--loading [data-step-prev],
.reg-modal--loading [data-step-next],
.reg-modal--loading [data-reg-submit] {
  pointer-events: none;
  opacity: 0.5;
}

@keyframes reg-progress-bar {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(-10%); }
  100% { transform: translateX(100%); }
}
.reg-modal__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.reg-modal__header h3{
  margin-top:6px;
  font-size: clamp(1.08rem, 1.2vw + .8rem, 1.5rem);
  color:#f8fafc;
}
.reg-modal__header .reg-subtitle{
  margin-top:6px;
  font-size:.92rem;
  color: rgba(226, 232, 240, 0.75);
}
.reg-plan{
  margin-top:6px;
  font-size:.85rem;
  color: rgba(94, 234, 212, .85);
}
.reg-plan-note{
  margin-top:4px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.82rem;
  color: rgba(226, 232, 240, 0.9);
  font-weight:500;
}
.reg-plan-note .bx{
  font-size:1rem;
  color:#22d3ee;
}
.reg-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 14px;
  border-radius:999px;
  background: rgba(16,185,129,.18);
  color:#6ee7b7;
  font-weight:600;
  letter-spacing:.6px;
  text-transform:uppercase;
  font-size:.75rem;
}
.reg-close{
  background: transparent;
  border:0;
  color:#f8fafc;
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
  transition: transform .15s ease, color .15s ease;
}
.reg-close:hover{
  color:#fda4af;
  transform: scale(1.05);
}
.reg-stepper{
  list-style:none;
  display:flex;
  justify-content:space-between;
  margin:0;
  padding:0;
  gap: clamp(8px, 1vw, 16px);
  position:relative;
}
.reg-stepper li{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-size:.75rem;
  color:#94a3b8;
  text-transform:uppercase;
  letter-spacing:.5px;
  position:relative;
}
.reg-stepper li::after{
  content:'';
  position:absolute;
  top:14px;
  left:calc(50% + 18px);
  width:calc(100% - 36px);
  height:2px;
  background: rgba(148,163,184,.25);
}
.reg-stepper li:last-child::after{ display:none; }
.reg-stepper li span{
  width:32px;
  height:32px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background: rgba(148,163,184,.25);
  color:#94a3b8;
  font-weight:600;
}
.reg-stepper li.active span{
  background:#38bdf8;
  color:#0f172a;
  box-shadow:0 0 0 4px rgba(56,189,248,.18);
}
.reg-stepper li.completed span{
  background:#10b981;
  color:#022c22;
}
.reg-form{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.reg-step{ display:block; }
.reg-step[hidden]{ display:none !important; }
.reg-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
  margin-top:16px;
}
.reg-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
  text-align:left;
  font-size:.9rem;
  color:#cbd5f5;
}
.reg-field span{
  font-weight:600;
  font-size:.83rem;
  color:#e2e8f0;
}
.reg-field small{
  font-weight:400;
  color: rgba(203, 213, 225, 0.75);
}
.reg-field input,
.reg-field select{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.28);
  background: rgba(15,23,42,.8);
  color:#f8fafc;
  padding:12px 14px;
  font-size:.92rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.reg-phone-field{
  display:flex;
  gap:8px;
  align-items:center;
}
.reg-phone-field select{
  min-width:120px;
  flex:0 0 38%;
  max-width:160px;
}
.reg-phone-field input{
  flex:1;
}
.reg-field [data-reg-phone-hint]{
  display:block;
  margin-top:6px;
  font-size:.78rem;
  color:rgba(226,232,240,.7);
}
.reg-field input:focus,
.reg-field select:focus{
  outline:none;
  border-color:#38bdf8;
  box-shadow:0 0 0 3px rgba(56,189,248,.25);
}
.reg-field--file input{
  padding:10px;
  background: rgba(15,23,42,.6);
}

#modal-registro .admin-form__grid{
  display:grid;
  gap:clamp(12px, 1vw + 6px, 18px);
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
#modal-registro .admin-form__field{
  display:flex;
  flex-direction:column;
  gap:6px;
  text-align:left;
}
#modal-registro .admin-form__label{
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.01em;
  color:#e2e8f0;
}
#modal-registro .admin-form__field input,
#modal-registro .admin-form__field select{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.28);
  background: rgba(15,23,42,.82);
  color:#f8fafc;
  padding:.65rem .9rem;
  font-size:1rem;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#modal-registro .admin-form__field input:focus,
#modal-registro .admin-form__field select:focus{
  outline:none;
  border-color:#38bdf8;
  box-shadow:0 0 0 3px rgba(56,189,248,.25);
  transform:translateY(-1px);
}
#modal-registro .admin-form__hint{
  font-size:.82rem;
  color:rgba(226,232,240,.7);
}
#modal-registro .admin-form__error{
  margin-top:.5rem;
  color:#fca5a5;
  font-weight:600;
}

.reg-collection-card{
  margin-top:1rem;
  padding:clamp(18px, 2vw, 28px);
  border-radius:22px;
  background:rgba(8,13,28,.9);
  border:1px solid rgba(148,163,184,.2);
  box-shadow:0 25px 60px rgba(2,6,23,.55);
  display:grid;
  gap:clamp(18px, 1.5vw, 26px);
}
.reg-service-form{
  display:grid;
  gap:clamp(16px, 1.4vw, 24px);
}
.reg-collection-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:flex-end;
}
.reg-collection{
  display:grid;
  gap:12px;
}
.reg-collection__item{
  border:1px solid rgba(148,163,184,.25);
  border-radius:18px;
  padding:14px 16px;
  background:rgba(9,14,27,.85);
  display:grid;
  gap:10px;
}
.reg-collection__item header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.reg-collection__title{
  margin:0;
  font-size:1rem;
  color:#f8fafc;
}
.reg-collection__remove{
  border:0;
  border-radius:999px;
  padding:6px 16px;
  font-weight:600;
  font-size:.85rem;
  background:rgba(248,113,113,.15);
  color:#fecaca;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.reg-collection__remove:hover{
  background:#ef4444;
  color:#fff;
  transform:translateY(-1px);
}
.reg-collection__meta{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size:.85rem;
}
.reg-collection__meta span{
  padding:4px 12px;
  border-radius:999px;
  background:rgba(59,130,246,.18);
  color:#bfdbfe;
  border:1px solid rgba(59,130,246,.35);
}

#modal-registro input[type="file"]{
  border-radius:12px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(15,23,42,.82);
  padding:.35rem;
  color:#e2e8f0;
}
#modal-registro input[type="file"]::file-selector-button,
#modal-registro input[type="file"]::-webkit-file-upload-button{
  border:0;
  margin-right:.9rem;
  border-radius:10px;
  padding:.45rem 1.1rem;
  background:linear-gradient(135deg,#06b6d4,#3b82f6);
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}
#modal-registro input[type="file"]::file-selector-button:hover,
#modal-registro input[type="file"]::-webkit-file-upload-button:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 20px rgba(6,182,212,.35);
}
.reg-checkbox{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:18px;
  font-size:.85rem;
  color:#e2e8f0;
}
.reg-checkbox input{
  margin-top:3px;
  width:18px;
  height:18px;
}
.reg-summary{
  background: rgba(15,118,110,.14);
  border:1px solid rgba(45,212,191,.34);
  border-radius:16px;
  padding:16px;
  text-align:left;
  color:#ccfbf1;
  margin-bottom:18px;
}
.reg-summary__empty{
  margin:0;
  font-size:.9rem;
  color:rgba(226,232,240,.82);
}
.reg-summary__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.reg-summary__list li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:.9rem;
}
.reg-summary__list span{
  color:rgba(204,251,241,.82);
  font-weight:500;
}
.reg-summary__list strong{
  color:#f8fafc;
  font-weight:600;
}
.reg-summary__trial{
  margin-top:12px;
  font-size:.85rem;
  color:rgba(190,242,100,.9);
}
.reg-payment > p{
  margin-bottom:12px;
  font-size:.9rem;
  color:rgba(226,232,240,.82);
}
.reg-card{
  margin-top:16px;
  padding:16px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.3);
  background: rgba(15,23,42,.65);
}
.reg-card__info{
  margin:0 0 12px 0;
  font-size:.8rem;
  color:rgba(226,232,240,.7);
}
.reg-card__grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}
.reg-field--full{
  grid-column:1 / -1;
}
.reg-field--compact span{
  font-size:.78rem;
}
.reg-card__grid select:empty{
  color:rgba(148,163,184,.7);
}
.reg-status{
  margin-top:16px;
  padding:12px 14px;
  border-radius:12px;
  font-size:.85rem;
  font-weight:500;
  background: rgba(148,163,184,.12);
  color:#e2e8f0;
}
.reg-status--info{ background: rgba(56,189,248,.18); color:#e0f2fe; }
.reg-status--error{ background: rgba(248,113,113,.22); color:#fee2e2; }
.reg-status--success{ background: rgba(16,185,129,.2); color:#d1fae5; }
.reg-error{
  font-size:.85rem;
  color:#fecaca;
  text-align:left;
  margin-bottom:-6px;
}
.reg-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
  margin-top:12px;
}
.reg-btn{
  border:0;
  border-radius:12px;
  padding:12px 20px;
  font-weight:600;
  font-size:.9rem;
  cursor:pointer;
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.reg-btn[disabled]{
  opacity:.6;
  cursor:not-allowed;
}
.reg-btn--ghost{
  background: transparent;
  color:#e2e8f0;
  border:1px solid rgba(148,163,184,.4);
}
.reg-btn--primary{
  background: linear-gradient(135deg,#38bdf8,#22d3ee);
  color:#041724;
  box-shadow:0 10px 22px rgba(34,211,238,.28);
}
.reg-btn--accent{
  background: linear-gradient(135deg,#10b981,#0ea5e9);
  color:#041724;
  box-shadow:0 12px 24px rgba(16,185,129,.28);
}
.reg-btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
}
.reg-btn:active{
  transform:translateY(0);
  filter:brightness(.97);
}
/* P�gina loader */
#page-loader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(circle at top, rgba(14,165,233,.25), transparent 45%), #030814;
  backdrop-filter: blur(6px);
  transition: opacity .6s ease, visibility .6s ease;
}
#page-loader.page-loader--hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.page-loader__glow{
  position:absolute;
  width:320px;
  height:320px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(16,185,129,.35), transparent 70%);
  animation:pulseGlow 3s ease-in-out infinite;
}
.page-loader__card{
  position:relative;
  padding:32px;
  border-radius:28px;
  background: rgba(15,23,42,.9);
  border:1px solid rgba(94,234,212,.25);
  box-shadow:0 25px 55px rgba(2,6,23,.7);
  max-width:320px;
  width:90%;
  text-align:center;
  color:#e2e8f0;
  display:grid;
  gap:16px;
}
.page-loader__badge{
  justify-self:center;
  padding:6px 18px;
  border-radius:999px;
  background: rgba(56,189,248,.15);
  border:1px solid rgba(56,189,248,.35);
  font-weight:600;
  letter-spacing:.4px;
  color:#7dd3fc;
}
.page-loader__spinner{
  position:relative;
  width:88px;
  height:88px;
  margin:0 auto;
}
.page-loader__spinner span{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:3px solid transparent;
  border-top-color:#38bdf8;
  border-right-color:#38bdf8;
  animation:rotateSpinner 1.1s linear infinite;
}
.page-loader__spinner span::after{
  content:'';
  position:absolute;
  inset:12px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.15);
}
.page-loader__title{
  font-size:1.1rem;
  font-weight:600;
}
.page-loader__hint{
  font-size:.9rem;
  color:rgba(226,232,240,.8);
  margin:0;
}
.page-loader__progress{
  width:100%;
  height:8px;
  border-radius:999px;
  background: rgba(148,163,184,.2);
  overflow:hidden;
}
.page-loader__progress-bar{
  width:30%;
  height:100%;
  border-radius:999px;
  background: linear-gradient(90deg,#0ea5e9,#38bdf8,#a855f7);
  animation:progressRun 1.6s ease-in-out infinite;
}
@keyframes rotateSpinner{
  to{ transform:rotate(360deg); }
}
@keyframes progressRun{
  0%{ transform:translateX(-120%); }
  50%{ transform:translateX(20%); }
  100%{ transform:translateX(220%); }
}
@keyframes pulseGlow{
  0%,100%{ transform:scale(1); opacity:.45; }
  50%{ transform:scale(1.2); opacity:.2; }
}
@media (max-width: 768px){
  #modal-registro .reg-modal{
    padding:clamp(16px,4vw,24px);
    border-radius:18px;
    max-height:calc(100vh - 24px);
  }
  .reg-grid{
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:12px;
  }
  .reg-field{
    font-size:.85rem;
    gap:4px;
  }
  .reg-field span{
    font-size:.78rem;
  }
  .reg-field input,
  .reg-field select{
    padding:10px 12px;
    font-size:.88rem;
  }
  .reg-phone-field select{
    flex:0 0 34%;
    max-width:140px;
  }
  .reg-actions{
    justify-content:center;
    gap:10px;
  }
  .reg-btn{
    flex:1 1 auto;
    min-width:140px;
  }
}
@media (max-width: 520px){
  .reg-modal__header{ flex-direction:column; align-items:flex-start; }
  .reg-actions{ justify-content:center; }
  .reg-stepper{
    flex-wrap:wrap;
    justify-content:center;
    gap:12px 18px;
  }
  .reg-stepper li{
    flex:0 1 45%;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .reg-stepper li::after{ display:none; }
  .reg-grid{
    grid-template-columns:1fr;
  }
  .reg-field{
    width:100%;
  }
  .reg-phone-field{
    flex-direction:column;
    align-items:stretch;
  }
  .reg-phone-field select,
  .reg-phone-field input{
    max-width:none;
    flex:1 1 auto;
    width:100%;
  }
  .reg-actions{
    flex-direction:row;
    flex-wrap:wrap;
    gap:10px;
  }
  .reg-actions [data-step-prev],
  .reg-actions [data-step-next]{
    flex:1 1 calc(50% - 10px);
    min-width:140px;
  }
}

/* Registro - horarios */
.reg-hours {
  display: grid;
  gap: 1.6rem;
  margin-bottom: 1.4rem;
}

.reg-hours__group {
  display: grid;
  gap: 1rem;
  padding: 1.2rem;
  border-radius: 1rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: rgba(12, 18, 28, 0.68);
}

.reg-hours__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #e2e8f0;
}

.reg-hours__grid {
  display: grid;
  gap: 1rem;
}

.reg-hours__grid--tz {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.reg-hours__hint,
.reg-hours-hint {
  margin: 0;
  font-size: .85rem;
  color: rgba(226, 232, 240, 0.7);
}

.reg-hours-days {
  display: grid;
  gap: 1rem;
  max-height: clamp(320px, 48vh, 520px);
  overflow-y: auto;
  padding-right: .5rem;
}

.reg-hours-day {
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 1rem;
  padding: 1rem;
  background: rgba(9, 13, 22, 0.78);
  display: grid;
  gap: .8rem;
}

.reg-hours-day legend {
  font-weight: 700;
  color: #f8fafc;
  padding: 0 .2rem;
}

.reg-hours-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  color: #e2e8f0;
}

.reg-hours-slots {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.reg-hours-slots label {
  display: grid;
  gap: .35rem;
  font-size: .85rem;
  color: rgba(226, 232, 240, 0.72);
}

.reg-hours-slots input[type="time"],
.reg-hours-holidays__input input[type="date"] {
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: .7rem;
  padding: .45rem .6rem;
  background: rgba(15, 23, 42, 0.75);
  color: #f8fafc;
}

.reg-hours-slots input[type="time"]:disabled {
  opacity: .45;
}

.reg-hours-break {
  display: grid;
  gap: .6rem;
  padding: .75rem .9rem;
  border-radius: .9rem;
  background: rgba(7, 12, 20, 0.8);
}

.reg-hours-holidays {
  display: grid;
  gap: .85rem;
}

.reg-hours-holidays__input {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
}

.reg-hours-holidays__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}

.reg-hours-holidays__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(11, 17, 26, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: .8rem;
  padding: .55rem .75rem;
  color: #e2e8f0;
}

.reg-hours-holidays__item button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.2);
  color: #fee2e2;
  font-size: 1.05rem;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.reg-hours-holidays__item button:hover {
  transform: translateY(-1px);
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
}

.reg-btn--sm {
  padding: .4rem .9rem;
  font-size: .8rem;
}

@media (max-width: 640px) {
  .reg-hours__grid--tz {
    grid-template-columns: minmax(0, 1fr);
  }
}