/* ===================================================
   ENPCAC – Hoja de Estilos Principal
   Escuela Normal Profesor Carlos A. Carrillo
   =================================================== */

/* === VARIABLES === */
:root {
  --azul-oscuro:    #0a1f44;
  --azul-medio:     #1a3a6e;
  --azul-claro:     #2563b0;
  --azul-brillante: #3b82f6;
  --amarillo:       #ff9;
  --amarillo-claro: #ff9;
  --gris-oscuro:    #1f2937;
  --gris-medio:     #4b5563;
  --gris-claro:     #e5e7eb;
  --blanco:         #fff;
  --sombra:         0 8px 32px rgba(10,31,68,.18);
}

/* === RESET === */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Montserrat',sans-serif; background:var(--blanco); color:var(--gris-oscuro); overflow-x:hidden; }

/* ===================================================
   SIDEBAR
   =================================================== */
#sidebar {
  position:fixed; top:0; left:-320px; width:300px; height:100vh;
  background:linear-gradient(180deg,var(--azul-oscuro),var(--azul-medio));
  z-index:2000; display:flex; flex-direction:column;
  transition:left .4s cubic-bezier(.77,0,.18,1);
  box-shadow:4px 0 30px rgba(0,0,0,.35); overflow-y:auto;
}
#sidebar.open { left:0; }

.sb-logo { padding:28px 22px 16px; border-bottom:2px solid var(--amarillo); display:flex; align-items:center; gap:12px; }
.sb-icon  { width:50px; height:50px; background:var(--amarillo); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:900; color:var(--azul-oscuro); flex-shrink:0; font-family:'Bebas Neue',cursive; letter-spacing:1px; }
.sb-txt   { color:var(--blanco); font-size:11px; font-weight:700; line-height:1.3; }
.sb-txt span { color:var(--amarillo); font-size:14px; display:block; font-family:'Bebas Neue',cursive; letter-spacing:2px; }

.sb-nav { flex:1; padding:12px 0; list-style:none; }
.sb-nav li>a,
.sb-nav li>.sb-toggle {
  display:flex; align-items:center; gap:10px; padding:11px 22px;
  color:rgba(255,255,255,.85); text-decoration:none; font-size:12px;
  font-weight:600; letter-spacing:.5px; text-transform:uppercase;
  transition:all .25s; border-left:3px solid transparent;
  cursor:pointer; background:none; border-top:none; border-right:none;
  border-bottom:none; width:100%; text-align:left;
}
.sb-nav li>a:hover,
.sb-nav li>.sb-toggle:hover { background:rgba(255,255,255,.08); color:var(--amarillo); border-left-color:var(--amarillo); }
.sb-toggle .arrow { margin-left:auto; transition:transform .3s; }
.sb-toggle.active .arrow { transform:rotate(180deg); }

.sb-sub { display:none; list-style:none; background:rgba(0,0,0,.2); padding:4px 0; }
.sb-sub.open { display:block; }
.sb-sub li a { display:block; padding:9px 22px 9px 52px; color:rgba(255,255,255,.7); text-decoration:none; font-size:11px; font-weight:500; letter-spacing:.4px; transition:all .2s; text-transform:uppercase; }
.sb-sub li a:hover { color:var(--amarillo); }

.sb-footer { padding:14px 22px; border-top:1px solid rgba(255,255,255,.1); font-size:10px; color:rgba(255,255,255,.4); text-align:center; }

/* OVERLAY */
#overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:1999; backdrop-filter:blur(2px); }
#overlay.open { display:block; }

/* HAMBURGER */
#menu-toggle {
  position:fixed; top:20px; left:20px; z-index:3000;
  width:52px; height:52px; background:var(--azul-oscuro);
  border:2px solid var(--amarillo); border-radius:12px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; transition:background .3s; box-shadow:var(--sombra);
}
#menu-toggle:hover { background:var(--azul-claro); }
#menu-toggle .bar { width:22px; height:2.5px; background:var(--amarillo); border-radius:2px; transition:all .35s cubic-bezier(.77,0,.18,1); transform-origin:center; }
#menu-toggle.open .bar:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
#menu-toggle.open .bar:nth-child(2) { opacity:0; transform:scaleX(0); }
#menu-toggle.open .bar:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }

/* ===================================================
   HERO / INICIO
   =================================================== */
#inicio { position:relative; height:100vh; min-height:580px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.h-slider { position:absolute; inset:0; display:flex; transition:transform .9s cubic-bezier(.77,0,.18,1); }
.h-slide  { min-width:100%; height:100%; background-size:cover; background-position:center; position:relative; }
.h-slide::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(10,31,68,.83),rgba(37,99,176,.45)); }

.h-content  { position:relative; z-index:10; text-align:center; color:var(--blanco); padding:20px; max-width:820px; }
.h-badge    { display:inline-block; background:var(--amarillo); color:var(--azul-oscuro); font-size:11px; font-weight:800; letter-spacing:3px; text-transform:uppercase; padding:6px 20px; border-radius:50px; margin-bottom:22px; animation:fadeDown .8s ease .3s both; }
.h-title    { font-family:'Bebas Neue',cursive; font-size:clamp(2.8rem,7vw,6rem); line-height:1.05; letter-spacing:3px; margin-bottom:16px; animation:fadeUp .9s ease .5s both; }
.h-title span { color:var(--amarillo); }
.h-sub      { font-size:clamp(.9rem,2vw,1.15rem); font-weight:300; letter-spacing:1px; opacity:.9; margin-bottom:12px; animation:fadeUp .9s ease .7s both; }
.h-quote    { font-style:italic; font-size:13px; color:rgba(255,255,255,.7); margin-bottom:28px; animation:fadeUp .9s ease .8s both; }
.h-btns     { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; animation:fadeUp .9s ease .9s both; }

.btn-primary-h   { background:var(--amarillo); color:var(--azul-oscuro); font-weight:800; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; padding:13px 34px; border-radius:8px; border:none; text-decoration:none; transition:all .3s; box-shadow:0 4px 20px rgba(245,197,24,.4); }
.btn-primary-h:hover { background:#e6b800; transform:translateY(-3px); color:var(--azul-oscuro); }
.btn-secondary-h     { background:transparent; color:var(--blanco); font-weight:600; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; padding:12px 34px; border-radius:8px; border:2px solid rgba(255,255,255,.5); text-decoration:none; transition:all .3s; }
.btn-secondary-h:hover { border-color:var(--amarillo); color:var(--amarillo); }

.h-dots { position:absolute; bottom:34px; left:50%; transform:translateX(-50%); display:flex; gap:10px; z-index:10; }
.h-dot  { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.4); cursor:pointer; transition:all .3s; border:none; }
.h-dot.active { background:var(--amarillo); transform:scale(1.4); }

.h-arrow   { position:absolute; top:50%; transform:translateY(-50%); z-index:10; background:rgba(255,255,255,.15); border:2px solid rgba(255,255,255,.3); color:white; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer; transition:all .3s; backdrop-filter:blur(4px); }
.h-arrow:hover { background:var(--amarillo); color:var(--azul-oscuro); border-color:var(--amarillo); }
.h-arrow-l { left:22px; }
.h-arrow-r { right:22px; }

/* ===================================================
   SECTION HEADERS
   =================================================== */
.sec-header { text-align:center; margin-bottom:56px; }
.sec-label  { display:inline-block; font-size:11px; font-weight:800; letter-spacing:4px; text-transform:uppercase; color:var(--azul-brillante); margin-bottom:10px; }
.sec-label::before,
.sec-label::after { content:'—'; margin:0 8px; opacity:.5; }
.sec-title { font-family:'Bebas Neue',cursive; font-size:clamp(2.2rem,5vw,3.8rem); line-height:1.1; color:var(--azul-oscuro); letter-spacing:2px; }
.sec-title .hl { color:var(--azul-claro); }
.sec-div   { width:70px; height:4px; background:linear-gradient(90deg,var(--amarillo),var(--azul-brillante)); border-radius:2px; margin:14px auto 0; }

/* ===================================================
   CARDS BASE
   =================================================== */
.card-base { background:white; border-radius:16px; padding:28px; border:1px solid var(--gris-claro); box-shadow:var(--sombra); height:100%; transition:all .35s; position:relative; overflow:hidden; }
.card-base::before { content:''; position:absolute; top:0; left:0; width:4px; height:100%; background:linear-gradient(to bottom,var(--amarillo),var(--azul-brillante)); transition:width .35s; }
.card-base:hover { transform:translateY(-6px); box-shadow:0 20px 50px rgba(10,31,68,.14); }
.card-base:hover::before { width:6px; }
.c-icon { width:50px; height:50px; background:linear-gradient(135deg,var(--azul-claro),var(--azul-brillante)); border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:22px; color:white; margin-bottom:14px; box-shadow:0 6px 20px rgba(37,99,176,.3); }
.card-base h4 { font-size:13px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--azul-oscuro); margin-bottom:10px; }
.card-base p  { color:var(--gris-medio); font-size:13.5px; line-height:1.8; }

/* ===================================================
   STATS
   =================================================== */
#stats { padding:80px 0; background:linear-gradient(135deg,var(--azul-oscuro),var(--azul-medio)); position:relative; overflow:hidden; }
.stat-item { text-align:center; color:white; padding:18px; }
.stat-num  { font-family:'Bebas Neue',cursive; font-size:clamp(3rem,6vw,5rem); color:var(--amarillo); letter-spacing:2px; line-height:1; display:block; }
.stat-suf  { font-family:'Bebas Neue',cursive; font-size:2.2rem; color:var(--amarillo-claro); }
.stat-lbl  { font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; opacity:.75; margin-top:6px; }
.stat-sep  { width:1px; height:70px; background:rgba(255,255,255,.15); margin:auto; }

/* ===================================================
   TIMELINE
   =================================================== */
.timeline { position:relative; padding-left:28px; }
.timeline::before { content:''; position:absolute; left:8px; top:0; bottom:0; width:2px; background:linear-gradient(to bottom,var(--amarillo),var(--azul-brillante)); }
.tl-item  { position:relative; margin-bottom:28px; }
.tl-item::before { content:''; position:absolute; left:-22px; top:5px; width:12px; height:12px; border-radius:50%; background:var(--amarillo); border:2px solid var(--azul-oscuro); }
.tl-period { font-size:10px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--azul-claro); margin-bottom:3px; }
.tl-name   { font-size:14px; font-weight:700; color:var(--azul-oscuro); margin-bottom:5px; }
.tl-desc   { font-size:12.5px; color:var(--gris-medio); line-height:1.7; }

/* ===================================================
   TITULACIÓN
   =================================================== */
#titulacion { padding:110px 0; background:#f8fafd; }
.tit-card { background:white; border-radius:16px; overflow:hidden; box-shadow:var(--sombra); height:100%; transition:transform .35s,box-shadow .35s; border:1px solid rgba(37,99,176,.1); }
.tit-card:hover { transform:translateY(-8px); box-shadow:0 24px 60px rgba(10,31,68,.15); }
.tit-hdr  { background:linear-gradient(135deg,var(--azul-oscuro),var(--azul-claro)); padding:26px 28px; display:flex; align-items:center; gap:14px; }
.tit-hdr .ico { width:46px; height:46px; background:var(--amarillo); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--azul-oscuro); flex-shrink:0; }
.tit-hdr h5 { color:white; font-size:12.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; margin:0; }
.tit-body { padding:22px 26px; color:var(--gris-medio); font-size:13px; line-height:1.8; }
.step     { display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; }
.sn       { width:24px; height:24px; background:var(--amarillo); color:var(--azul-oscuro); border-radius:50%; font-size:11px; font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
.tit-foot { padding:10px 26px 22px; }
.btn-az   { background:linear-gradient(135deg,var(--azul-claro),var(--azul-brillante)); color:white; border:none; padding:10px 22px; border-radius:8px; font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; text-decoration:none; display:inline-block; transition:all .3s; box-shadow:0 4px 16px rgba(37,99,176,.3); }
.btn-az:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(37,99,176,.4); color:white; }

/* ===================================================
   PLANES DE ESTUDIO
   =================================================== */
#planes { padding:110px 0; background:var(--blanco); }
.plan-card  { background:white; border-radius:16px; padding:34px 26px; border:2px solid var(--gris-claro); box-shadow:var(--sombra); height:100%; transition:all .35s; position:relative; overflow:hidden; text-align:center; }
.plan-card.feat  { border-color:var(--amarillo); background:linear-gradient(135deg,var(--azul-oscuro),var(--azul-medio)); }
.plan-card.feat2 { border-color:rgba(37,99,176,.4); background:linear-gradient(135deg,#0d2957,#1e4d9e); }
.plan-card:not(.feat):not(.feat2):hover { border-color:var(--azul-brillante); transform:translateY(-6px); }
.plan-icon { font-size:44px; margin-bottom:12px; }
.plan-card h5 { font-size:13px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--azul-oscuro); margin-bottom:10px; }
.plan-card.feat h5,
.plan-card.feat2 h5 { color:var(--amarillo); }
.plan-card p { font-size:13px; color:var(--gris-medio); line-height:1.7; }
.plan-card.feat p,
.plan-card.feat2 p { color:rgba(255,255,255,.8); }
.plan-tag  { display:inline-block; background:var(--azul-claro); color:white; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:3px 12px; border-radius:50px; margin-bottom:16px; }
.plan-card.feat .plan-tag,
.plan-card.feat2 .plan-tag { background:var(--amarillo); color:var(--azul-oscuro); }
.plan-links { margin-top:14px; display:flex; flex-direction:column; gap:7px; text-align:left; }
.plan-link  { font-size:12px; color:var(--azul-claro); text-decoration:none; transition:color .2s; display:flex; align-items:center; gap:6px; }
.plan-link:hover { color:var(--azul-oscuro); }
.plan-card.feat .plan-link,
.plan-card.feat2 .plan-link { color:var(--amarillo-claro); }

/* ===================================================
   CAROUSEL / INFRAESTRUCTURA
   =================================================== */
#infraestructura { padding:110px 0; background:var(--gris-claro); }
.car-wrap  { position:relative; border-radius:20px; overflow:hidden; box-shadow:0 24px 60px rgba(10,31,68,.2); }
.car-inner { display:flex; transition:transform .75s cubic-bezier(.77,0,.18,1); }
.car-slide { min-width:100%; position:relative; }
.car-slide img { width:100%; height:500px; object-fit:cover; display:block; }
.car-cap   { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top,rgba(10,31,68,.9),transparent); padding:56px 36px 32px; color:white; }
.car-cap h5 { font-family:'Bebas Neue',cursive; font-size:1.9rem; letter-spacing:2px; margin-bottom:5px; }
.car-cap p  { font-size:13px; opacity:.8; }
.car-ctrl   { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.2); border:2px solid rgba(255,255,255,.4); color:white; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer; transition:all .3s; backdrop-filter:blur(4px); z-index:10; }
.car-ctrl:hover { background:var(--amarillo); color:var(--azul-oscuro); border-color:var(--amarillo); }
.car-ctrl-l { left:14px; }
.car-ctrl-r { right:14px; }
.car-dots   { display:flex; justify-content:center; gap:8px; margin-top:18px; }
.c-dot      { width:8px; height:8px; border-radius:50%; background:var(--gris-medio); cursor:pointer; transition:all .3s; border:none; }
.c-dot.active { background:var(--azul-claro); transform:scale(1.4); }
.thumb-strip { display:flex; gap:10px; overflow-x:auto; padding:10px 0; scrollbar-width:thin; scrollbar-color:var(--azul-claro) transparent; }
.thumb      { min-width:95px; height:65px; border-radius:8px; overflow:hidden; cursor:pointer; opacity:.6; transition:all .3s; border:2px solid transparent; flex-shrink:0; }
.thumb img  { width:100%; height:100%; object-fit:cover; }
.thumb.active { opacity:1; border-color:var(--amarillo); transform:scale(1.05); }

/* ===================================================
   TRANSPARENCIA
   =================================================== */
#transparencia { padding:110px 0; background:var(--blanco); }
.tr-item  { display:flex; align-items:center; gap:18px; background:white; border:1px solid var(--gris-claro); border-radius:12px; padding:18px 22px; margin-bottom:12px; transition:all .3s; text-decoration:none; color:inherit; box-shadow:0 2px 12px rgba(10,31,68,.06); }
.tr-item:hover { border-color:var(--azul-brillante); transform:translateX(6px); color:var(--azul-oscuro); }
.tr-ico   { width:46px; height:46px; background:linear-gradient(135deg,var(--azul-claro),var(--azul-brillante)); border-radius:12px; display:flex; align-items:center; justify-content:center; color:white; font-size:20px; flex-shrink:0; }
.tr-info h6 { font-size:13px; font-weight:700; color:var(--azul-oscuro); margin-bottom:2px; }
.tr-info p  { font-size:11.5px; color:var(--gris-medio); margin:0; }
.tr-arr   { margin-left:auto; color:var(--azul-brillante); font-size:18px; transition:transform .3s; }
.tr-item:hover .tr-arr { transform:translateX(4px); }
.tr-gal   { background:white; border-radius:12px; overflow:hidden; box-shadow:var(--sombra); }
.tr-gal img { width:100%; height:190px; object-fit:cover; }
.tr-gal-cap { padding:14px; font-size:12.5px; color:var(--gris-medio); line-height:1.6; }
.tr-gal-tag { display:inline-block; background:var(--azul-oscuro); color:var(--amarillo); font-size:9px; font-weight:800; letter-spacing:1.5px; padding:3px 10px; border-radius:50px; margin-bottom:6px; text-transform:uppercase; }

/* ===================================================
   PUBLICACIONES
   =================================================== */
#publicaciones { padding:110px 0; background:#f0f4fa; }
.pub-track { display:flex; gap:22px; overflow-x:hidden; }
.pub-card  { min-width:295px; background:white; border-radius:16px; overflow:hidden; box-shadow:var(--sombra); transition:transform .3s; flex-shrink:0; }
.pub-card:hover { transform:translateY(-6px); }
.pub-img   { height:190px; overflow:hidden; }
.pub-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.pub-card:hover .pub-img img { transform:scale(1.08); }
.pub-body  { padding:20px 22px; }
.pub-tag   { display:inline-block; background:var(--amarillo); color:var(--azul-oscuro); font-size:9px; font-weight:900; letter-spacing:2px; text-transform:uppercase; padding:3px 11px; border-radius:50px; margin-bottom:8px; }
.pub-body h6 { font-size:14px; font-weight:700; color:var(--azul-oscuro); margin-bottom:8px; line-height:1.4; }
.pub-body p  { font-size:12.5px; color:var(--gris-medio); line-height:1.7; }
.pub-meta  { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--gris-medio); margin-top:12px; }
.pub-nav   { display:flex; gap:12px; justify-content:center; margin-top:28px; }
.pub-btn   { width:42px; height:42px; border-radius:50%; background:white; border:2px solid var(--azul-claro); color:var(--azul-claro); font-size:18px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .3s; }
.pub-btn:hover { background:var(--azul-claro); color:white; }

/* ===================================================
   CONTACTO
   =================================================== */
#contacto { padding:110px 0; background:var(--blanco); }
.con-card  { background:white; border-radius:20px; padding:44px 38px; box-shadow:0 20px 60px rgba(10,31,68,.12); border:1px solid rgba(37,99,176,.1); }
.form-label { font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--azul-oscuro); margin-bottom:7px; }
.form-control,
.form-select { border:1.5px solid var(--gris-claro); border-radius:10px; padding:11px 14px; font-size:13.5px; color:var(--gris-oscuro); transition:all .3s; background:#fafbfd; }
.form-control:focus,
.form-select:focus { border-color:var(--azul-brillante); box-shadow:0 0 0 3px rgba(59,130,246,.15); background:white; }
.ci-item { display:flex; align-items:flex-start; gap:14px; margin-bottom:22px; }
.ci-ico  { width:44px; height:44px; background:linear-gradient(135deg,var(--azul-claro),var(--azul-brillante)); border-radius:12px; display:flex; align-items:center; justify-content:center; color:white; font-size:18px; flex-shrink:0; }
.ci-item h6 { font-size:10.5px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:var(--azul-oscuro); margin-bottom:2px; }
.ci-item p  { font-size:13px; color:var(--gris-medio); margin:0; line-height:1.5; }

/* ===================================================
   SOMOS ENPCAC
   =================================================== */
#somos { padding:110px 0; background:linear-gradient(135deg,var(--azul-oscuro),var(--azul-medio) 60%,var(--azul-claro)); position:relative; overflow:hidden; }
#somos::before { content:'ENPCAC'; position:absolute; font-family:'Bebas Neue',cursive; font-size:22vw; color:rgba(255,255,255,.03); top:50%; left:50%; transform:translate(-50%,-50%); white-space:nowrap; pointer-events:none; letter-spacing:8px; }
.som-card { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); border-radius:16px; padding:28px 22px; height:100%; transition:all .35s; backdrop-filter:blur(8px); text-align:center; }
.som-card:hover { background:rgba(255,255,255,.12); transform:translateY(-6px); border-color:var(--amarillo); }
.som-icon { font-size:44px; margin-bottom:12px; display:block; }
.som-card h5 { color:var(--amarillo); font-size:13px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:10px; }
.som-card p  { color:rgba(255,255,255,.8); font-size:13.5px; line-height:1.8; }

/* ===================================================
   REGISTRO
   =================================================== */
#registro { padding:110px 0; background:var(--blanco); }
.reg-box  { background:linear-gradient(135deg,var(--azul-oscuro),var(--azul-claro)); border-radius:24px; padding:48px 40px; color:white; position:relative; overflow:hidden; box-shadow:0 24px 60px rgba(10,31,68,.25); }
.reg-box::before { content:'2026'; position:absolute; right:-20px; bottom:-30px; font-family:'Bebas Neue',cursive; font-size:14rem; color:rgba(255,255,255,.05); line-height:1; pointer-events:none; }
.reg-badge { display:inline-block; background:var(--amarillo); color:var(--azul-oscuro); font-size:11px; font-weight:900; letter-spacing:2.5px; text-transform:uppercase; padding:5px 18px; border-radius:50px; margin-bottom:16px; }
.reg-box h3 { font-family:'Bebas Neue',cursive; font-size:3rem; letter-spacing:3px; line-height:1.1; margin-bottom:12px; }
.reg-box>p  { font-size:13.5px; opacity:.85; line-height:1.7; max-width:500px; margin-bottom:22px; }
.reg-steps { display:flex; flex-direction:column; gap:12px; }
.reg-step  { display:flex; align-items:flex-start; gap:12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:14px 18px; transition:all .3s; }
.reg-step:hover { background:rgba(255,255,255,.13); border-color:var(--amarillo); }
.reg-sn    { width:30px; height:30px; background:var(--amarillo); color:var(--azul-oscuro); border-radius:50%; font-size:13px; font-weight:900; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }
.reg-step h6 { color:white; font-size:13px; font-weight:700; margin-bottom:1px; }
.reg-step p  { color:rgba(255,255,255,.65); font-size:12px; margin:0; }
.bank-box  { background:rgba(245,197,24,.15); border:1px solid rgba(245,197,24,.4); border-radius:10px; padding:12px 16px; margin-bottom:20px; }
.bank-box p { font-size:12.5px; color:rgba(255,255,255,.9); margin:0; }
.bank-num  { font-family:'Bebas Neue',cursive; font-size:1.5rem; letter-spacing:3px; color:var(--amarillo); }
.doc-ul    { list-style:disc; padding-left:18px; margin-bottom:16px; }
.doc-ul li { font-size:12.5px; color:rgba(255,255,255,.85); margin-bottom:6px; line-height:1.5; }

/* ===================================================
   FOOTER
   =================================================== */
footer { background:var(--gris-oscuro); color:rgba(255,255,255,.7); padding:56px 0 28px; }
.ft-logo { font-family:'Bebas Neue',cursive; font-size:1.9rem; letter-spacing:3px; color:var(--blanco); }
.ft-logo span { color:var(--amarillo); }
footer p.ft-p { font-size:12.5px; line-height:1.7; margin-top:10px; max-width:280px; }
.ft-ttl   { font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--blanco); margin-bottom:14px; padding-bottom:8px; border-bottom:2px solid var(--amarillo); display:inline-block; }
footer ul { list-style:none; padding:0; }
footer ul li { margin-bottom:8px; }
footer ul li a { color:rgba(255,255,255,.6); text-decoration:none; font-size:12.5px; transition:color .3s; display:flex; align-items:center; gap:8px; }
footer ul li a:hover { color:var(--amarillo); }
footer ul li a::before { content:'›'; color:var(--amarillo); font-size:16px; }
.ft-social { display:flex; gap:10px; margin-top:16px; }
.soc-btn   { width:36px; height:36px; background:rgba(255,255,255,.08); border-radius:8px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); text-decoration:none; font-size:15px; transition:all .3s; }
.soc-btn:hover { background:var(--amarillo); color:var(--azul-oscuro); transform:translateY(-3px); }
.ft-bottom { border-top:1px solid rgba(255,255,255,.08); margin-top:36px; padding-top:20px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:11px; color:rgba(255,255,255,.4); }
.ft-bottom span { color:var(--amarillo); }

/* ===================================================
   UTILIDADES GLOBALES
   =================================================== */
#backTop { position:fixed; bottom:30px; right:30px; width:44px; height:44px; background:var(--azul-claro); color:white; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; box-shadow:0 6px 20px rgba(37,99,176,.35); opacity:0; pointer-events:none; transition:all .4s; z-index:900; border:none; cursor:pointer; }
#backTop.show { opacity:1; pointer-events:auto; }
#backTop:hover { background:var(--amarillo); color:var(--azul-oscuro); transform:translateY(-4px); }

#prog { position:fixed; top:0; left:0; height:3px; background:linear-gradient(90deg,var(--amarillo),var(--azul-brillante),var(--amarillo)); background-size:200% auto; animation:shimmer 2s linear infinite; z-index:9999; width:0%; transition:width .1s; }

.ann { background:var(--amarillo); color:var(--azul-oscuro); text-align:center; padding:9px 20px; font-size:12.5px; font-weight:700; letter-spacing:.5px; position:sticky; top:0; z-index:1900; }
.ann a { color:var(--azul-oscuro); font-weight:900; text-decoration:underline; margin-left:10px; }

.pulse-anim { animation:pulse 2s ease infinite; }

/* ===================================================
   KEYFRAMES
   =================================================== */
@keyframes fadeUp   { from { opacity:0; transform:translateY(30px)  } to { opacity:1; transform:translateY(0) } }
@keyframes fadeDown { from { opacity:0; transform:translateY(-20px) } to { opacity:1; transform:translateY(0) } }
@keyframes pulse    { 0%,100% { box-shadow:0 0 0 0 rgba(245,197,24,.4) } 50% { box-shadow:0 0 0 12px rgba(245,197,24,0) } }
@keyframes shimmer  { 0% { background-position:-200% center } 100% { background-position:200% center } }

/* ===================================================
   RESPONSIVE
   =================================================== */
@media (max-width:768px) {
  .h-title    { font-size:2.8rem; }
  .reg-box    { padding:30px 20px; }
  .reg-box h3 { font-size:2.4rem; }
  .stat-sep   { display:none; }
  .con-card   { padding:24px 16px; }
  .car-slide img { height:260px; }
}