/* Quita las flechitas en Chrome, Edge y Safari */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Scroll suave al CSS */
html {
  scroll-behavior: smooth;
}

/* Quita las flechitas en Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

body {
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 140, 0, 0.10), transparent 28%),
    radial-gradient(circle at 85% 85%, rgba(255, 122, 0, 0.08), transparent 30%),
    linear-gradient(
      180deg,
      #fff7f0 0%,
      #ffe9d2 42%,
      #fff4ea 100%
    );
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: #1f2937;
}

/* reset estilos viejos del header genérico */
/*header { background-color: #003366; color: white; padding: 1em; }*/

/* Links base */
nav a {
  text-decoration: none;
}
/* ===========================
   HEADER / NAVBAR (Base)
   =========================== */
/* === Navbar (override seguro) === */
:root {
  --nav-bg: #e6782a;      /* naranja */
  --nav-bg-dark: #e65c00; /* naranja hover/activo */
  --nav-link: #ffffff;
  --nav-link-hover: rgba(255,255,255,.10);
  --nav-link-active: rgba(255,255,255,.18);
  --btn-on-nav-bg: #ffffff;
  --btn-on-nav-text: #e6782a;
}

/* Barra */
header.navbar {
  background: var(--nav-bg) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Estructura */
.navbar .wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  min-height: 58px;
  display: flex;
  align-items: center;
}
/* Badge SOLO para el menú de usuario (no rompe otros badges) */
.user-dropdown .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 18px;
  height: 18px;
  padding: 0 6px;

  font-size: 11px;
  font-weight: 800;
  line-height: 1;

  background: #ff7a00;
  color: #fff;

  border-radius: 999px;
}

/* ===========================
   HOME MENU
   =========================== */
/* HOME: ícono + label (el label se ocultará en mobile) */
.navbar .nav-home{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--nav-link); text-decoration:none;
  padding:8px 8px; border-radius:10px;
}
.navbar .nav-home:hover{ background:var(--nav-link-hover); }
.navbar .nav-home .icon{
  width:24px; height:24px; display:inline-flex;
}
.navbar .nav-home .label{
  font-weight:700; letter-spacing:.2px;
}

/* Comunidad Naranja */
.navbar .nav-cn{
  color:var(--nav-link); text-decoration:none;
  padding:8px 10px; border-radius:10px; font-weight:700;
}
.navbar .nav-cn:hover{ background:var(--nav-link-hover); }
.navbar .nav-cn .label-full{ display:inline; }
.navbar .nav-cn .label-short{ display:none; } /* aparecerá en mobile */

/* Empujar avatar a la derecha */
.navbar .nav-spacer{ margin-left:auto; }

/* Avatar con inicial */
.navbar .user-pill{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:var(--avatar-bg); color:var(--avatar-text);
  text-decoration:none; font-weight:800; font-size:16px;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.navbar .user-pill:hover{ filter:brightness(.98); }

/* Grupo de links izquierdos */
.navbar .left-group{
  display:flex; align-items:center; gap:8px;
}

.navbar .nav-links {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;           /* ocupa todo el ancho */
  min-width: 0;
}

/* Empujar login */
.navbar .nav-spacer {
  margin-left: auto;
  flex: 1;           /* empuja el botón a la derecha */
}

/* Links */
.navbar a {
  color: var(--nav-link);
  text-decoration: none;
  padding: 10px 8px;
  border-radius: 10px;
  opacity: .96;
}
.navbar a:hover  { background: var(--nav-link-hover); }
.navbar a.active { background: var(--nav-link-active); }

/* Brand con logo */
.navbar .brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--nav-link);
  text-decoration: none;
  font-weight: 700;
}

/* Logo dentro del brand */
.navbar .brand .logo {
  max-width: 120px !important;   /* fuerza ancho */
  max-height: 70px !important;  /* fuerza alto */
  width: auto !important;
  height: auto !important;
  object-fit: contain;          /* encuadra sin deformar */
  display: inline-block;
}

/* Botón login/logout */
.navbar .btn-login {
  background: var(--btn-on-nav-bg);
  color: var(--btn-on-nav-text);
  padding: 6px 14px;
  border-radius: 20px;
  font-weight: 700;
  text-decoration: none;
}
.navbar .btn-login:hover {
  background: #eaeef3;
}

/* ============ formulario comunidad naranja =============== */
#form-comunidad-naranja {
  max-width: 640px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.form-group input:not([type="radio"]):not([type="checkbox"]),
.form-group textarea {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
}
.form-group input[type="radio"] {
  width: auto;
  padding: 0;
}
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: normal;
  cursor: pointer;
}

.radio-option input[type="radio"] {
  margin: 0;
  transform: translateY(1px);
}

.radio-option span {
  line-height: 1.2;
}

.form-group select {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #fff;
}

.btn-cta-naranja {
  background-color: #ff7a00;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px 42px;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(255, 122, 0, 0.35);
  transition: all 0.2s ease;
}

.btn-cta-naranja:hover {
  background-color: #e86e00;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(255, 122, 0, 0.45);
}


/* ============ MENU DE LOGIN EN HEADER =============== */
/* Botón login (cuando no hay sesión) */
.btn-login{
  background:#fff; color:#e6782a;
  padding:6px 14px; border-radius:20px; font-weight:700; text-decoration:none;
}
.btn-login:hover{ background:#f1f1f1; }

/* Botón circular de usuario (solo inicial) */
.user-btn.user-btn-circle{
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer; padding:0;
}
.user-btn.user-btn-circle .avatar{
  width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:#e6782a;
  font-weight:800; font-size:16px;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
  transition:background .2s ease;
}
.user-btn.user-btn-circle:hover .avatar{ background:#f1f1f1; }

/* Dropdown (si ya lo tenías, mantené tu estilo) */
.user-dropdown{
  position:absolute; top:calc(100% + 8px); right:0;
  min-width:180px; background:#fff; border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
  padding:8px; display:none; z-index:50;
}
.user-item{ display:block; padding:10px 12px; border-radius:8px; color:#222; text-decoration:none; }
.user-item:hover{ background:#f3f4f6; }
.user-sep{ height:1px; background:#ececec; margin:6px 0; }

/* === Presentación (Inicio) === */
.container{
  max-width: 1100px;
  margin: 0 auto;
  margin-bottom: 30px;
  padding: 0 16px;
}

.intro{
  padding: 32px 0 20px;
  background: transparent;
}

.intro__title{
  margin: 0 0 8px;
  font-size: 28px;          /* simple y legible */
  line-height: 1.2;
}

.intro__lead{
  color: #475569;           /* gris suave para el primer párrafo */
  margin: 6px 0 14px;
}

.intro p{
  margin: 10px 0 12px;
}

.intro__list{
  margin: 8px 0 14px 20px;  /* viñetas sobrias */
  padding: 0;
  color: #334155;
}

.intro__list li{
  margin: 6px 0;
}

.intro__closing{
  margin-top: 14px;
  font-weight: 600;         /* cierra con un poco más de énfasis */
}
/* ===== INDEX INTERFAZ VISUAL ===== */
/* =========================================
   HERO PRINCIPAL - ESPACIO ESTUDIANTIL
========================================= */
.hero-ee {
  background: linear-gradient(135deg, #fff4ea 0%, #ffe0c2 45%, #ffb36b 100%);
  padding: 56px 0 42px;
}

.hero-ee__content {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 38px;
  align-items: center;
}

.hero-ee__tag {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.75);
  color: #d86b09;
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 16px;
}

.hero-ee__title {
  font-size: 3.1rem;
  line-height: 1.05;
  font-weight: 800;
  color: #111;
  margin: 0 0 18px;
}

.hero-ee__desc {
  font-size: 1.08rem;
  line-height: 1.7;
  color: #2c2c2c;
  max-width: 700px;
}

.hero-ee__desc p {
  margin-bottom: 14px;
}

.hero-ee__buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.btn-hero {
  display: inline-block;
  text-decoration: none;
  padding: 14px 22px;
  border-radius: 14px;
  font-weight: 800;
  transition: all 0.25s ease;
  cursor: pointer;
}

.btn-hero--primary {
  background: #ef7d1a;
  color: #fff;
  box-shadow: 0 10px 24px rgba(239, 125, 26, 0.28);
}

.btn-hero--primary:hover {
  background: #d96807;
  transform: translateY(-2px);
}

.btn-hero--secondary {
  background: #fff;
  color: #d96807;
  border: 2px solid #ef7d1a;
}

.btn-hero--secondary:hover {
  background: #fff5ec;
  transform: translateY(-2px);
}

.hero-ee__save {
  margin-top: 18px;
}

.hero-ee__video .video-box {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 24px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.hero-ee__video .video-box iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* =========================================
   BANNER COMUNIDAD NARANJA
========================================= */
.banner-comunidad-wrap {
  padding: 28px 0 10px;
}

.banner-comunidad {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 20px;
  align-items: center;
  text-decoration: none;
  padding: 42px;
  border-radius: 30px;
  overflow: hidden;
  background: linear-gradient(135deg, #ff7a00 0%, #ff9831 55%, #ffd4aa 100%);
  box-shadow: 0 18px 42px rgba(0,0,0,0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.banner-comunidad:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 48px rgba(0,0,0,0.16);
}

.banner-comunidad::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.16), transparent 30%),
    radial-gradient(circle at 85% 80%, rgba(255,255,255,.14), transparent 30%);
  pointer-events: none;
}

.banner-comunidad__content,
.banner-comunidad__visual {
  position: relative;
  z-index: 2;
}

.banner-comunidad__tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,0.16);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
}

.banner-comunidad__content h2 {
  font-size: 2.5rem;
  line-height: 1.08;
  margin: 0 0 16px;
  color: #fff;
  font-weight: 800;
  max-width: 620px;
}

.banner-comunidad__content p {
  color: #fff8f1;
  font-size: 1.08rem;
  line-height: 1.65;
  max-width: 560px;
  margin-bottom: 24px;
}

.banner-comunidad__button {
  display: inline-block;
  background: #fff;
  color: #ea6c00;
  font-weight: 800;
  padding: 14px 22px;
  border-radius: 14px;
  transition: all 0.25s ease;
}

.banner-comunidad:hover .banner-comunidad__button {
  transform: translateY(-2px);
}

.banner-comunidad__visual {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-comunidad__card-bg {
  position: absolute;
  width: 420px;
  height: 260px;
  background: rgba(255,255,255,0.18);
  border-radius: 30px;
  transform: rotate(-8deg);
  backdrop-filter: blur(4px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}

.banner-comunidad__card {
  position: relative;
  width: 360px;
  max-width: 100%;
  border-radius: 20px;
  transform: rotate(-8deg);
  box-shadow: 0 20px 45px rgba(0,0,0,0.22);
  transition: transform 0.3s ease;
}

.banner-comunidad:hover .banner-comunidad__card {
  transform: rotate(-5deg) scale(1.03);
}

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 991px) {
  .hero-ee__content,
  .banner-comunidad {
    grid-template-columns: 1fr;
  }

  .hero-ee {
    padding: 42px 0 28px;
  }

  .hero-ee__title {
    font-size: 2.4rem;
  }

  .banner-comunidad {
    padding: 30px 24px;
  }

  .banner-comunidad__content h2 {
    font-size: 2rem;
  }

  .banner-comunidad__visual {
    min-height: 260px;
  }

  .banner-comunidad__card-bg {
    width: 320px;
    height: 210px;
  }

  .banner-comunidad__card {
    width: 290px;
  }
}

@media (max-width: 576px) {
  .hero-ee__title {
    font-size: 2rem;
  }

  .hero-ee__desc,
  .banner-comunidad__content p {
    font-size: 1rem;
  }

  .hero-ee__buttons {
    flex-direction: column;
  }

  .btn-hero {
    width: 100%;
    text-align: center;
  }

  .banner-comunidad__content h2 {
    font-size: 1.7rem;
  }
}



/* ===== Separador ===== */
.divider {
  background: transparent;
  border-top: 1px solid rgba(230, 120, 42, 0.10);
  border-bottom: 1px solid rgba(230, 120, 42, 0.10);
  padding: 26px 0;
  text-align: center;
}
.divider__title {
  margin: 0 0 6px;
  font-size: 22px;
}
.divider__sub {
  margin: 0;
  color: #475569;
  font-size: 14px;
}

/* ===== Grid 6 cards (marketing sobrio) ===== */
.features-grid { padding: 22px 0 8px; }
.grid-6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Card con fondo por CSS */
.feature-card {
  position: relative;
  display: block;
  min-height: 160px;              /* alto visual */
  border-radius: 14px;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

/* Sombra para legibilidad del texto */
.feature-card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.45) 100%);
}

/* Contenido de la card */
.feature-card__body {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  color: #fff;
}
.feature-card__body h3 {
  margin: 0 0 4px;
  font-size: 18px;
}
.feature-card__body p {
  margin: 0;
  font-size: 13px;
  opacity: .95;
}

/* ===== Cards: SOLO img-optimized ===== */

/* Fallback simple (por si el browser no soporta image-set) */
.feature--comunidad {
  background-image: url('/assets/img-optimized/feature-comunidad@800.jpg');
}

.feature--emprendedores {
  background-image: url('/assets/img-optimized/feature-emprendedores@800.jpg');
}

.feature--inscripciones { background-image: url('/assets/img-optimized/feature-inscripciones@400.jpg'); }
.feature--becas         { background-image: url('/assets/img-optimized/feature-becas@800.jpg'); }
.feature--calendario    { background-image: url('/assets/img-optimized/feature-calendario@800.jpg'); }
.feature--tramites      { background-image: url('/assets/img-optimized/feature-tramites@800.jpg'); }
.feature--recursos      { background-image: url('/assets/img-optimized/feature-recursos@800.jpg'); }
.feature--consultas     { background-image: url('/assets/img-optimized/feature-consultas@800.jpg'); }

.feature--herramientas  { background-image: url('/assets/img-optimized/feature-herramientas@800.png'); }
.feature--planes        { background-image: url('/assets/img-optimized/feature-planes@800.png'); }
.feature--biblio        { background-image: url('/assets/img-optimized/feature-biblio@800.png'); }

/* Formatos modernos (AVIF/WebP) */
.feature--comunidad {
  background-image: -webkit-image-set(
    url('/assets/img-optimized/feature-comunidad@800.avif') type('image/avif'),
    url('/assets/img-optimized/feature-comunidad@800.webp') type('image/webp'),
    url('/assets/img-optimized/feature-comunidad@800.jpg')  type('image/jpeg')
  );
  background-image: image-set(
    url('/assets/img-optimized/feature-comunidad@800.avif') type('image/avif'),
    url('/assets/img-optimized/feature-comunidad@800.webp') type('image/webp'),
    url('/assets/img-optimized/feature-comunidad@800.jpg')  type('image/jpeg')
  );
}

.feature--emprendedores {
  background-image: -webkit-image-set(
    url('/assets/img-optimized/feature-emprendedores@800.avif') type('image/avif'),
    url('/assets/img-optimized/feature-emprendedores@800.webp') type('image/webp'),
    url('/assets/img-optimized/feature-emprendedores@800.jpg')  type('image/jpeg')
  );
  background-image: image-set(
    url('/assets/img-optimized/feature-emprendedores@800.avif') type('image/avif'),
    url('/assets/img-optimized/feature-emprendedores@800.webp') type('image/webp'),
    url('/assets/img-optimized/feature-emprendedores@800.jpg')  type('image/jpeg')
  );
}

.feature--inscripciones {
  background-image: -webkit-image-set(
    url('/assets/img-optimized/feature-inscripciones@400.avif') type('image/avif'),
    url('/assets/img-optimized/feature-inscripciones@400.webp') type('image/webp'),
    url('/assets/img-optimized/feature-inscripciones@400.jpg')  type('image/jpeg')
  );
  background-image: image-set(
    url('/assets/img-optimized/feature-inscripciones@400.avif') type('image/avif'),
    url('/assets/img-optimized/feature-inscripciones@400.webp') type('image/webp'),
    url('/assets/img-optimized/feature-inscripciones@400.jpg')  type('image/jpeg')
  );
}

.feature--becas {
  background-image: -webkit-image-set(
    url('/assets/img-optimized/feature-becas@800.avif') type('image/avif'),
    url('/assets/img-optimized/feature-becas@800.webp') type('image/webp'),
    url('/assets/img-optimized/feature-becas@800.jpg')  type('image/jpeg')
  );
  background-image: image-set(
    url('/assets/img-optimized/feature-becas@800.avif') type('image/avif'),
    url('/assets/img-optimized/feature-becas@800.webp') type('image/webp'),
    url('/assets/img-optimized/feature-becas@800.jpg')  type('image/jpeg')
  );
}

.feature--calendario {
  background-image: -webkit-image-set(
    url('/assets/img-optimized/feature-calendario@800.avif') type('image/avif'),
    url('/assets/img-optimized/feature-calendario@800.webp') type('image/webp'),
    url('/assets/img-optimized/feature-calendario@800.jpg')  type('image/jpeg')
  );
  background-image: image-set(
    url('/assets/img-optimized/feature-calendario@800.avif') type('image/avif'),
    url('/assets/img-optimized/feature-calendario@800.webp') type('image/webp'),
    url('/assets/img-optimized/feature-calendario@800.jpg')  type('image/jpeg')
  );
}

.feature--tramites {
  background-image: -webkit-image-set(
    url('/assets/img-optimized/feature-tramites@800.avif') type('image/avif'),
    url('/assets/img-optimized/feature-tramites@800.webp') type('image/webp'),
    url('/assets/img-optimized/feature-tramites@800.jpg')  type('image/jpeg')
  );
  background-image: image-set(
    url('/assets/img-optimized/feature-tramites@800.avif') type('image/avif'),
    url('/assets/img-optimized/feature-tramites@800.webp') type('image/webp'),
    url('/assets/img-optimized/feature-tramites@800.jpg')  type('image/jpeg')
  );
}

.feature--recursos {
  background-image: -webkit-image-set(
    url('/assets/img-optimized/feature-recursos@800.avif') type('image/avif'),
    url('/assets/img-optimized/feature-recursos@800.webp') type('image/webp'),
    url('/assets/img-optimized/feature-recursos@800.jpg')  type('image/jpeg')
  );
  background-image: image-set(
    url('/assets/img-optimized/feature-recursos@800.avif') type('image/avif'),
    url('/assets/img-optimized/feature-recursos@800.webp') type('image/webp'),
    url('/assets/img-optimized/feature-recursos@800.jpg')  type('image/jpeg')
  );
}

.feature--consultas {
  background-image: -webkit-image-set(
    url('/assets/img-optimized/feature-consultas@800.avif') type('image/avif'),
    url('/assets/img-optimized/feature-consultas@800.webp') type('image/webp'),
    url('/assets/img-optimized/feature-consultas@800.jpg')  type('image/jpeg')
  );
  background-image: image-set(
    url('/assets/img-optimized/feature-consultas@800.avif') type('image/avif'),
    url('/assets/img-optimized/feature-consultas@800.webp') type('image/webp'),
    url('/assets/img-optimized/feature-consultas@800.jpg')  type('image/jpeg')
  );
}

/* PNGs */
.feature--herramientas {
  background-image: -webkit-image-set(
    url('/assets/img-optimized/feature-herramientas@800.avif') type('image/avif'),
    url('/assets/img-optimized/feature-herramientas@800.webp') type('image/webp'),
    url('/assets/img-optimized/feature-herramientas@800.png')  type('image/png')
  );
  background-image: image-set(
    url('/assets/img-optimized/feature-herramientas@800.avif') type('image/avif'),
    url('/assets/img-optimized/feature-herramientas@800.webp') type('image/webp'),
    url('/assets/img-optimized/feature-herramientas@800.png')  type('image/png')
  );
}

.feature--planes {
  background-image: -webkit-image-set(
    url('/assets/img-optimized/feature-planes@800.avif') type('image/avif'),
    url('/assets/img-optimized/feature-planes@800.webp') type('image/webp'),
    url('/assets/img-optimized/feature-planes@800.png')  type('image/png')
  );
  background-image: image-set(
    url('/assets/img-optimized/feature-planes@800.avif') type('image/avif'),
    url('/assets/img-optimized/feature-planes@800.webp') type('image/webp'),
    url('/assets/img-optimized/feature-planes@800.png')  type('image/png')
  );
}

.feature--biblio {
  background-image: -webkit-image-set(
    url('/assets/img-optimized/feature-biblio@800.avif') type('image/avif'),
    url('/assets/img-optimized/feature-biblio@800.webp') type('image/webp'),
    url('/assets/img-optimized/feature-biblio@800.png')  type('image/png')
  );
  background-image: image-set(
    url('/assets/img-optimized/feature-biblio@800.avif') type('image/avif'),
    url('/assets/img-optimized/feature-biblio@800.webp') type('image/webp'),
    url('/assets/img-optimized/feature-biblio@800.png')  type('image/png')
  );
}

/* Cobertura y centrado */
.feature--inscripciones,
.feature--becas,
.feature--calendario,
.feature--tramites,
.feature--recursos,
.feature--consultas,
.feature--herramientas,
.feature--planes,
.feature--biblio,
.feature--comunidad,
.feature--emprendedores {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.feature--emprendedores {
  background-position: center 30%;
  background-size: cover;
}

/* Colores por marca (suaves) */
.social-card.yt svg { fill: #ff0000; }
.social-card.ig svg { fill: #E1306C; }
.social-card.fb svg { fill: #1877F2; }
.social-card.tk svg { fill: #111; }
.social-card.wa svg { fill: #25D366; }


/* ===== Sitios de interés: fondo + logo centrado ===== */
.sitios-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:24px;

  text-align:center;
  color:inherit;
  text-decoration:none !important; /* quita subrayado en el <a> */
}

/* ===== Sitios de interés — sin fondo blanco y centrado exacto ===== */
.sitio-card .card-img{
  position:relative;
  height:clamp(180px, 28vw, 260px);
  width:100%;
  border:2px solid #ff7a00;
  border-radius:12px;
  overflow:hidden;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
margin-bottom: 30px;
}

/* overlay centrado */
.sitio-card .sitio-logo{
  position:absolute; inset:0;
  display:grid; place-items:center;   /* centra x/y */
}

/* LOGO: sin fondo, sin sombra, tamaño parejo */
.sitio-card .logo-box{
  background: transparent;            /* ← chau blanco */
  box-shadow: none;                    /* opcional: add “drop-shadow(0 4px 14px rgba(0,0,0,.18))” si querés */
  border-radius: 0;
  padding: 0;

  /* tamaño del logo (ancho) — ajustá si querés más grande/chico */
  width: clamp(160px, 48%, 360px);
  max-height: 60%;

  display:grid; place-items:center;
}

/* la imagen ocupa el contenedor sin recorte */
.sitio-card .logo-box picture,
.sitio-card .logo-box img{
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;                 /* logo completo, sin cortar */
  object-position: center;
  display:block;
}
.sitio-card:link,
.sitio-card:visited,
.sitio-card:hover,
.sitio-card:active { text-decoration:none !important; }
/* HOVER: levanta la card y el logo, cambia un toque el color del título */
.sitio-card:hover .card-img{
  transform: translateY(-3px);
  border-color:#ffa241;
  box-shadow:0 12px 26px rgba(0,0,0,.18);
}
.sitio-card:hover .logo-box{ transform: scale(1.03); filter: drop-shadow(0 6px 18px rgba(0,0,0,.20)); }
.sitio-card:hover h3{ color:#6a2bd9; /* ajustá al color de marca que uses */ }

/* Título */
.sitio-card h3{ 
  margin:4px 0 0;
  font-weight:700;
  letter-spacing:.3px;
  text-align:center;
  text-decoration:none !important;   /* por si algún reset lo subraya */
  transition: color .25s ease, transform .25s ease;
}




.insc-lead{
  margin: 6px 0 18px;
  color: #444;
}

.insc-fechas h3{
  margin: 14px 0 4px;
  font-size: 18px;
  color: #222;
}

.insc-fechas p{
  margin: 0 0 16px;
}

.checklist{
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.checklist li{
  position: relative;
  padding-left: 26px;
  margin: 8px 0;
  color: #333;
}
.checklist li::before{
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  line-height: 1;
  background: var(--nav-bg);   /* tu naranja como acento */
  color: #fff;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
}


/* =========== para foto de inscripciones ================ */
.insc-hero{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}

.insc-hero img{
  width: 80%;
  display: block;
}

.insc-hero-text{
  position:absolute;
  inset: 16px;
  display:flex;
  text-align: center;
  flex-direction:column;
  gap: 10px;
  color:#fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);

  max-width: 520px;   /* 🔑 clave */
  pointer-events:none; /* evita clicks accidentales */
}

/* Cuando es admin y editás, habilitamos interacción */
.editable{
  pointer-events:auto;
}

.insc-hero-title{
  font-weight:800;
  font-size: 25px;
  line-height: 1.05;
  letter-spacing: .5px;
}

.insc-hero-dates{
  font-weight:700;
  font-size: 21px;
  color:#0b0b0b;
  text-shadow: none;
}

.insc-hero-cta{
  font-weight:700;
  font-size: 17px;
  color:#7CFF63; 
}

@media (max-width: 980px){
  .insc-hero-title{ font-size: 33px; }
  .insc-hero-dates{ font-size: 28px; }
  .insc-hero-cta{ font-size: 23px; }
}

@media (max-width: 500px){
  .insc-hero-title{ font-size: 25px; }
  .insc-hero-dates{ font-size: 22px; }
  .insc-hero-cta{ font-size: 17px; }
}




/* ===== Calendario académico ===== */

.cal-head{
  background: #661a2c;          /* bordó tipo ejemplo */
  color: #fff;
  padding: 14px 0;
}
.cal-head h2{
  margin: 0;
  text-align: center;
  letter-spacing: .5px;
  font-size: 24px;
}
.cal-body{ padding: 18px 0 8px; }
.cal-figure{
  margin: 0 auto;
  max-width: 760px;             /* ancho cómodo en desktop */
  border: 3px solid #e6782a;    /* marco naranja */
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,.12);
}
.cal-figure img{
  display: block;
  width: 100%;
  height: auto;
}


/* ===== CALENDARIO (calx) ===== */
.calx{ width:100%; max-width:100%; background:#fff; border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,.06); padding:12px; margin:16px 0; box-sizing:border-box; }
.calx-head{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:8px; }
.calx-title{ margin:0; font-weight:800; font-size:18px; text-transform:capitalize; }
.calx-nav{ border:0; background:#f3f4f6; width:34px; height:34px; border-radius:10px; cursor:pointer; }
.calx-nav:hover{ background:#eceef2; }

.calx-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
.calx-dow>div{ text-align:center; font-size:12px; font-weight:700; color:#6b7280; padding:6px 0; }

.calx-cell{ min-height:92px; background:#fff; border:1px solid #ececec; border-radius:12px; padding:8px; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:6px; box-sizing:border-box; }
.calx-cell.muted{ background:#fafafa; color:#9ca3af; }
.calx-daynum{ font-weight:800; font-size:13px; color:#374151; }
.calx-today{ outline:2px solid #e6782a; outline-offset:-2px; }

.calx-dots{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.calx-dot{ display:inline-flex; align-items:center; gap:6px; font-size:11px; line-height:1; padding:4px 6px; border-radius:999px; color:#111; background:#eee; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Colores por categoría */
.dot-efemerides   { background:#f1e9ff; color:#6b21a8; }  /* violeta */
.dot-inscripciones{ background:#e6f0ff; color:#1d4ed8; }  /* azul */
.dot-cursada      { background:#e7f9ef; color:#047857; }  /* verde */
.dot-examenes     { background:#ffe7e7; color:#b91c1c; }  /* rojo */
.dot-receso       { background:#fff1e6; color:#c2410c; }  /* naranja */
.dot-talleres     { background:#e6fbff; color:#0e7490; }  /* cian */

/* Tooltip mini */
.calx-pop{ position:fixed; z-index:60; background:#111; color:#fff; font-size:12px; padding:6px 8px; border-radius:8px; box-shadow:0 10px 24px rgba(0,0,0,.25); max-width:min(60ch,90vw); }

/* ===== Layout del cuerpo de página ===== */
.content{
  padding: 22px 0 28px;
  background: transparent;
}
.content-grid{
  display: grid;
  grid-template-columns: minmax(0,1fr) 260px; /* main + índice */
  gap: 20px;
}

/* separadores verticales entre bloques del main */
.content-main section{ margin-bottom: 20px; }

/* Avisos */
.notice{
  border-radius:10px; padding:12px 14px; margin-bottom:14px;
  background:#f8fafc; border:1px solid #e2e8f0; color:#0f172a;
}
.notice.info{ border-color:#bfdbfe; background:#eff6ff; }

/* Listas de pasos */
.steps{ margin: 8px 0 0 20px; }
.steps li{ margin:6px 0; }

/* Tabla básica */
.table-wrap{ overflow:auto; border-radius:10px; border:1px solid #e5e7eb; }
.table{ width:100%; border-collapse: collapse; }
.table th, .table td{ padding:10px 12px; border-bottom:1px solid #eef2f7; text-align:left; }
.table th{ background:#f8fafc; font-weight:700; }

/* Texto suave */
.muted{ color:#64748b; font-size:13px; }

/* Botonera genérica ya la usás en otras páginas */
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
.btn{ display:inline-block; padding:8px 14px; border-radius:999px; text-decoration:none;
      background:#f3f4f6; color:#0f172a; border:1px solid #e5e7eb; }
.btn:hover{ background:#eaeef3; }
.btn.primary{ background:#fff; color:var(--nav-bg); border-color:#ffd7bf; }
.btn.primary:hover{ background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.08); }

/* Índice lateral (TOC) */
.toc .toc-box{
  position: sticky; top: 86px;
  border:1px solid #e5e7eb; border-radius:12px; padding:12px;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.toc-title{ font-weight:700; margin-bottom:8px; }
.toc nav{ display:flex; flex-direction:column; gap:6px; }
.toc nav a{ color:#0f172a; text-decoration:none; font-size:14px; }
.toc nav a:hover{ text-decoration:underline; }

/* ===== Calendario ===== */
.calendario{
  padding: 28px 0 18px;
  background: transparent;
}
.cal-head-lite h1{ margin:0 0 6px; font-size:26px; }
.cal-sub{ margin:0 0 14px; color:#475569; }

/* Filtros */
.cal-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.chip{
  border:1px solid #e5e7eb; background:#f8fafc; color:#0f172a;
  padding:6px 12px; border-radius:999px; cursor:pointer; font-weight:600;
}
.chip.is-active{ background:#fff; color:var(--nav-bg); border-color:#ffd7bf; }

/* Lista */
.cal-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.cal-item{
  display:flex; gap:14px; align-items:flex-start;
  border:1px solid #e5e7eb; border-radius:12px; padding:12px; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.cal-date{
  min-width:56px; text-align:center; border-radius:10px;
  background:#fff7ed; border:1px solid #ffedd5; color:#b45309; padding:6px 6px;
}
.cal-date .day{ display:block; font-size:20px; font-weight:800; line-height:1; }
.cal-date .mon{ display:block; font-size:12px; letter-spacing:.3px; text-transform:uppercase; }

.cal-body h3{ margin:0 0 4px; font-size:18px; }
.cal-body p{ margin:0 0 6px; color:#475569; }

/* Etiquetas */
.tag{
  display:inline-block; font-size:12px; padding:4px 8px; border-radius:999px;
  border:1px solid transparent; font-weight:700;
}
.tag-insc   { background:#fff1f2; color:#be123c; border-color:#fecdd3; }
.tag-cursada{ background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; }
.tag-examen { background:#ecfeff; color:#0e7490; border-color:#a5f3fc; }
.tag-receso { background:#ecfccb; color:#3f6212; border-color:#d9f99d; }
/* NUEVA: efemérides */
.tag-efem   { background:#f5f3ff; color:#6d28d9; border-color:#ddd6fe; }

/* ===== Mini mes ===== */
/* Contenedor */
.mini-month { margin-top: 16px; }

/* Pastilla: flechas + mes (todo unido) */
.mini-head{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 999px;
  padding: 6px 10px;
  margin: 8px auto 12px;
}
.mini-head .month-label{
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase; /* AGOSTO 2025 */
}

/* Flechas integradas a la pastilla */
.mini-nav{
  border: 0;
  background: transparent;
  width: 28px; height: 28px;
  border-radius: 999px;
  display: grid; place-items: center;
  cursor: pointer;
}
.mini-nav:hover{ background: #f5f5f5; }

/* Grilla: 7 columnas */
.mini-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

/* Encabezados de días (chicos, nombre completo) */
.mini-headcell{
  background: #fafafa;
  color: #666;
  border: 1px solid #eee;
  border-radius: 10px;
  min-height: 36px;
  padding: 6px 8px;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
}

/* Celdas de día (cuadradas) */
.mini-cell{
  position: relative;
  border: 1px solid #eaeaea;
  border-radius: 14px;
  padding: 8px;
  min-height: 92px;       /* alto celda */
  aspect-ratio: 1 / 1;    /* cuadrada */
  background: #fff;
  display: flex; flex-direction: column;
}

/* Número del día */
.mini-cell .day-num{
  font-weight: 700; 
  font-size: 14px; 
  line-height: 1;
  color: #222;
}

/* Hoy y Seleccionada */
.mini-cell.today{ outline: 2px solid #ff8a00; }
.mini-cell.selected{ outline: 2px solid #2f6fe6; }

/* Contenedor de eventos dentro de la celda */
.mini-events{
  margin-top: 6px; 
  display: flex; 
  flex-direction: column; 
  gap: 6px;
}

/* Tarjetitas por evento */
.mini-event{
  display: block;
  font-size: 12px;
  line-height: 1.25;
  padding: 6px 8px;
  border-radius: 10px;
  border-left: 4px solid transparent;
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}

/* Colores por categoría */
.mini-event--insc   { background:#e9f2ff; color:#154a9a; border-left-color:#2f6fe6; }
.mini-event--cursada{ background:#eafff1; color:#1b7a49; border-left-color:#33be77; }
.mini-event--examen { background:#fff2e8; color:#a14f14; border-left-color:#f29c64; }
.mini-event--receso { background:#f3f3f3; color:#555;    border-left-color:#bbb; }
.mini-event--efem   { background:#f4e9ff; color:#6b21a8; border-left-color:#9b59ff; }

/* Indicador “+n más” */
.mini-more{
  font-size: 11px; 
  color: #666; 
  background: #f7f7f7;
  padding: 4px 6px; 
  border-radius: 8px; 
  width: max-content;
}

/* muestra 5 ítems aprox. (ajustá height según tu card) */
.cal-list{
  max-height: 420px;   /* ajustá según la altura de tus .cal-item */
  overflow-y: auto;
  padding-right: 6px;  /* espacio para la barra */
}

/* Reutiliza tus botones existentes */


/* ===== Footer ===== */
.footer {
  background: #f1f1f1;
  padding: 20px 0;
  text-align: center;
  margin-top: 40px;
}

.footer p {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #333;
}

/* IMAGEN PARA SUMARSE DENTRO DEL FOOTER */
/* ===============================
   CTA SUMATE A MILITAR
================================ */

.cta-militar {
  position: relative;
  display: block;
  height: 360px;

  background-image: url('/assets/img-optimized/militancia2@1200.avif') center / cover no-repeat;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
}


@supports (background-image: image-set(url("") 1x)) {
  .cta-militar {
    background-image: image-set(
      url('/assets/img-optimized/militancia2@800.avif') 1x,
      url('/assets/img-optimized/militancia2@1200.avif') 2x,
      url('/assets/img-optimized/militancia2@800.webp') 1x,
      url('/assets/img-optimized/militancia2@1200.webp') 2x
    );
  }
}




/* Overlay */
.cta-militar__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.25) 0%,
    rgba(0,0,0,0.35) 45%,
    rgba(0,0,0,0.55) 100%
  );
}

.cta-militar__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 16px;
}

.cta-militar__content h2 {
  color: #fff;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: 0.8px;
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: 0 6px 24px rgba(0,0,0,0.6);
}

.cta-militar:hover .cta-militar__overlay {
  background: rgba(0,0,0,0.45);
}

.cta-militar:hover {
  filter: saturate(1.05);
}


/* ===== Enterate más (plataformas con iconos grandes) ===== */
.more-about{
  /* más aire y mejor centrado del contenido */
  padding: 44px 0 32px;                 /* ↑ más top, más bottom */
  background: #fff3eb;                  /* naranja suave */
  border-top: 3px solid #f08a3e;        /* marco superior */
  border-radius: 12px;                  /* redondeo completo */
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  margin: 26px auto 22px;               /* separa del footer de copyright */
  max-width: 1100px;                    /* “caja” centrada */
}

/* “terminación” inferior (línea sutil) */
.more-about::after{
  content:"";
  display:block;
  height:10px;                          /* tira final */
  border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.06));
  margin-top: 18px;                     /* separada de los íconos */
}

.more-title{
  margin: 0 0 8px;
  text-align:center;
  font-size: 24px;
  color:#b45309;
}

.more-sub{
  margin: 0 0 22px;                     /* más aire abajo del subtítulo */
  text-align:center;
  color:#78350f;
  font-size:14px;
}

/* grid e íconos igual que ya tenías */
.social-giant-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap:18px;                             /* un pelín más de separación */
  justify-items:center;
}

.social-giant{ display:flex; flex-direction:column; align-items:center; gap:10px; text-decoration:none; color:#0f172a; font-weight:600; }
.social-giant .icon-wrap{
  width:90px; height:90px;
  border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.12), inset 0 0 0 2px rgba(255,255,255,.3);
  transition: transform .15s ease, box-shadow .15s ease;
}
.social-giant svg{ width:46px; height:46px; fill:#111; }
.social-giant:hover .icon-wrap{ transform: translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.12), inset 0 0 0 2px rgba(0,0,0,.06); }

/* colores por marca (igual) */
.social-giant.yt .icon-wrap{ background:#ff0000; } .social-giant.yt svg{ fill:#fff; }
.social-giant.ig .icon-wrap{ background: radial-gradient(circle at 30% 110%, #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%); } .social-giant.ig svg{ fill:#fff; }
.social-giant.fb .icon-wrap{ background:#1877F2; } .social-giant.fb svg{ fill:#fff; }
.social-giant.tk .icon-wrap{ background:#000; } .social-giant.tk svg{ fill:#fff; }
.social-giant.wa .icon-wrap{ background:#25D366; } .social-giant.wa svg{ fill:#fff; }

/* ===== Sección carrusel herramientas ===== */
.tools-carousel{
  background:#5b0a17;             /* bordó */
  padding: 36px 0 40px;
  color:#fff;
}
.tools-title{
  margin: 0 0 18px;
  text-align:center;
  font-size: 42px;
  line-height:1.1;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* Carrusel */
.slider{
  position: relative;
  max-width: 780px;
  margin: 0 auto;
}
.slides{
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  background: #2a0a10;
}
.slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(20px) scale(.98);
  transition: opacity .35s ease, transform .35s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide.is-active{
  opacity: 1;
  transform: translateX(0) scale(1);
  position: relative;
}
.slide img{
  display:block;
  width:100%;
  height:auto;
}

/* Botones prev/next */
.nav{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:44px; height:44px;
  border-radius: 999px;
  border:none;
  background: rgba(255,255,255,.9);
  color:#111; font-size: 26px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.nav:hover{ background:#fff; }
.nav.prev{ left: -18px; }
.nav.next{ right: -18px; }

/* Puntos */
.dots{
  display:flex; justify-content:center; gap:8px;
  padding: 12px 0 6px;
}
.dots button{
  width:10px; height:10px; border-radius:999px; border:0;
  background: rgba(255,255,255,.45); cursor:pointer;
}
.dots button.is-active{ background:#fff; }

/* Botón descarga */
.dl-wrap{ text-align:center; margin-top: 18px; }
.btn-download{
  display:inline-block;
  background: var(--nav-bg, #e6782a);
  color:#fff; text-decoration:none;
  padding: 12px 18px; border-radius: 999px;
  font-weight: 800; letter-spacing:.2px;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
.btn-download:hover{ filter: brightness(1.05); }

/* ===== MAPA DE LA UNAJ (split + carrusel a la derecha) ===== */
.mapa-unaj{ padding: 34px 0 28px; background:#fff; color:#111; }
.mapa-title{
  margin: 0 0 18px; text-align:center; font-size: 44px; line-height:1.1;
  font-weight: 900; letter-spacing: .6px;
}
.mapa-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start;
}

/* Mapa general fijo */
.mapa-general{
  margin:0; border-radius: 10px; overflow:hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  border: 1px solid #eef2f7;
}
.mapa-general img{ display:block; width:100%; height:auto; }

/* Carrusel derecho (reutiliza estilos base del anterior) */
.mapa-slider{ position: relative; }
.mapa-slider .slides{
  position: relative; overflow: hidden; border-radius: 10px;
  box-shadow: 0 8px 22px rgba(0,0,0,.12); background:#111;
}
.mapa-slider .slide{
  position:absolute; inset:0; opacity:0; transform: translateX(20px) scale(.98);
  transition: opacity .35s ease, transform .35s ease; display:flex; align-items:center; justify-content:center;
}
.mapa-slider .slide.is-active{ opacity:1; transform: translateX(0) scale(1); position:relative; }
.mapa-slider .slide img{ display:block; width:100%; height:auto; }

/* Flechas */
.mapa-slider .nav{
  position:absolute; top:50%; transform: translateY(-50%);
  width:44px; height:44px; border-radius: 999px; border:0;
  background:#fff; color:#111; font-size:28px; cursor:pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.mapa-slider .nav.prev{ left: 8px; }
.mapa-slider .nav.next{ right: 8px; }
.mapa-slider .nav:hover{ filter: brightness(1.05); }

/* Puntos */
.mapa-slider .dots{
  display:flex; justify-content:center; gap:8px; padding: 12px 0 6px;
}
.mapa-slider .dots button{
  width:10px; height:10px; border-radius:999px; border:0; background:#dadde3; cursor:pointer;
}
.mapa-slider .dots button.is-active{ background:#666; }

/* ===== YouTube section ===== */
.yt-section{ padding: 26px 0 18px; }

/* Opción B (barra generada por CSS) */
.yt-banner{
  background: var(--nav-bg, #e6782a);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.08) inset;
  margin-bottom: 16px;
}
.yt-banner__inner{
  display:flex; align-items:center; gap:14px;
  padding: 18px 20px;
  color:#fff;
}
.yt-banner__inner h2{
  margin:0; letter-spacing:.5px; font-size:24px; font-weight:800;
  text-transform: uppercase;
}
.yt-dot{
  width:42px; height:42px; border-radius:50%;
  background:#fff; position:relative; flex:0 0 auto;
}
.yt-dot::before{
  content:""; position:absolute; inset:8px;
  background:#ff0000; border-radius:4px; transform:skewX(-6deg);
}
.yt-dot::after{
  content:""; position:absolute; left:50%; top:50%;
  transform: translate(-35%, -50%);
  border-style: solid; border-width:8px 0 8px 12px;
  border-color: transparent transparent transparent #fff;
}

/* Si usás imagen en la barra */
.yt-banner-img{ width:100%; height:auto; display:block; border-radius:10px; margin-bottom:16px; }

.yt-subtitle{ margin: 8px 0 14px; font-size:22px; }

/* Grid de videos */
.video-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:16px;
}

.video-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  padding:10px; box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.video-card iframe{
  width:100%;
  aspect-ratio: 16 / 9;
  border:0; border-radius:8px;
}

/* Botón “Ver más” */
.yt-cta{ text-align:center; margin-top:16px; }
.btn-cta{
  display:inline-block; padding:10px 16px; border-radius:999px;
  background:#fff; color:var(--nav-bg, #e6782a);
  border:1px solid #ffd7bf; text-decoration:none; font-weight:700;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-cta:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 18px rgba(0,0,0,.10);
}

/* ===== Planes de estudio ===== */
.planes { padding: 28px 0; }
.planes-title { margin: 0 0 10px; font-size: 26px; }

.planes-filters {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.search-wrap {
  position: relative;
}
.search-wrap input[type="search"]{
  width: 100%;
  padding: 12px 14px 12px 14px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 15px;
}
.search-wrap .kbd{
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: #6b7280; border:1px solid #e5e7eb; border-radius:6px; padding:2px 6px; background:#f8fafc;
}

.selects { display: flex; gap: 8px; }
.selects select{
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 14px;
}

.planes-meta { color:#64748b; font-size: 13px; margin: 6px 0 12px; }

.planes-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.plan{
  border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.plan h3{ margin: 0 0 6px; font-size: 18px; }
.plan small{ color:#6b7280; }
.plan .btn-row{ margin-top: 10px; display:flex; gap:8px; flex-wrap:wrap; }

.plan .btn{
  display:inline-block; padding:8px 14px; border-radius: 999px; text-decoration:none;
  background:#f3f4f6; color:#0f172a; border:1px solid #e5e7eb; font-weight:600;
}
.plan .btn:hover{ background:#eaeef3; }
.plan .btn.primary{ background:#fff; color:var(--nav-bg); border-color:#ffd7bf; }
.plan .btn.primary:hover{ background:#fff; box-shadow:0 6px 16px rgba(0,0,0,.08); }

/* skeleton loading */
.skel{ border:1px solid #e5e7eb; border-radius:12px; padding:12px; }
.skel-line{ height:12px; background: #eef2f7; border-radius: 8px; margin:8px 0; }
.skel-line.big{ height:16px; }
.skel-line.sm{ width: 50%; }
.skel-btn{ width: 120px; height: 28px; background:#eef2f7; border-radius:999px; margin-top:10px; }

mark.query{ background:#fff3c4; padding:0 2px; border-radius:3px; }

/*===== Franja destacada Paginas Hijas =====*/
.section-highlight {
  background: #e6782a;     /* naranja fuerte */
  color: #fff;
  text-align: center;
  padding: 40px 16px;
  margin: 0 0 32px;        /* separación con la sección siguiente */
}

.highlight-title {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 800;
  text-transform: uppercase;
}

.highlight-text {
  max-width: 800px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.6;
}

/*==== Tabs =====*/
.tabs{
  display:flex; gap:10px; flex-wrap:wrap; margin: 8px 0 18px;
}
.tab-btn{
  padding:8px 14px; border-radius:999px; border:1px solid #e5e7eb;
  background:#f8fafc; color:#0f172a; font-weight:700; cursor:pointer;
}
.tab-btn:hover{ background:#eef2f7; }
.tab-btn.is-active{
  background:#fff; color:#b45309; border-color:#ffd7bf;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}

/* Panels */
.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; }

.lib-lead.sm{ margin: 0 0 10px; color:#475569; }

/*====== Sección biblioteca – Iniciales ======*/
.lib-inst { padding: 24px 0 36px; background: #fff; }
.lib-title{
  font-size: 36px; font-weight: 800; text-transform: uppercase;
  margin: 0 0 10px; letter-spacing: .5px;
}
.lib-lead{ margin: 0 0 18px; color:#374151; }

.lib-toolbar{
  display:flex; align-items:center; gap:10px;
  margin: 6px 0 12px;
}
#libSearch{
  flex:1; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px;
  outline: none;
}
#libSearch:focus{ border-color: #f08a3e; box-shadow: 0 0 0 3px rgba(240,138,62,.15);}
.lib-count{ color:#6b7280; }

/* Tabla estilo drive */
.drive-table{
  border:1px solid #e5e7eb; border-radius:12px; overflow:hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.drive-head{
  display:grid; grid-template-columns: 1fr 220px;
  background:#f8fafc; border-bottom:1px solid #e5e7eb; font-weight:700;
}
.drive-head .cell{ padding:12px 14px; }

.drive-row{
  display:grid; grid-template-columns: 1fr 220px;
  padding:12px 14px; text-decoration:none; color:#111827;
  border-bottom:1px solid #f1f5f9; background:#fff;
}
.drive-row:last-child{ border-bottom:none; }
.drive-row:hover{ background:#fff7ed; }

.cell{ display:flex; align-items:center; gap:10px; }
.cell--right{ justify-content:flex-end; color:#6b7280; font-size:14px; }

.badge{
  width:22px; height:22px; border-radius:4px; display:inline-flex;
  align-items:center; justify-content:center; font-size:11px; font-weight:800;
}
.badge--folder{
  background:#fde68a; border:1px solid #fcd34d; /* amarillo */
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V8C22 6.9 21.1 6 20 6H12L10 4Z'/%3E%3C/svg%3E") center/18px 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V8C22 6.9 21.1 6 20 6H12L10 4Z'/%3E%3C/svg%3E") center/18px 18px no-repeat;
  background-color:#f59e0b;
}
.badge--pdf{
  background:#fee2e2; color:#b91c1c; border:1px solid #fecaca;
  padding:0 6px; border-radius:6px; font-weight:800; font-size:11px;
}
.heart{ margin-left:6px; font-size:14px; }

/* ===== Sección: donar/aportar apuntes ===== */
.biblio-share{
  padding: 34px 0 44px;
  background: #fff;
}

.share-title{
  margin: 0 0 10px;
  text-align: center;
  font-size: 34px;
  letter-spacing: .5px;
}

.share-lead{
  text-align: center;
  color: #475569;
  max-width: 820px;
  margin: 0 auto 18px;
}

/* Wrapper del iframe (borde y sombra sutil) */
.gform-embed{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* El iframe ya viene con height fijo, pero lo adaptamos en móvil */
.gform-embed iframe{
  display: block;
  width: 100%;
  height: 900px;    /* podés ajustar según la longitud del form */
}

.share-fallback{
  text-align: center;
  margin-top: 14px;
}

  /*===== Contenedor del buscador  COMUNIDAD NARANJA =====*/
  #form-buscar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
  }

  /* Botón grandote a juego */
  .btn.primary.big {
    font-size: 1.05rem;
    padding: 14px 18px;
    border-radius: 14px;
    line-height: 1;
  }

  /* Pie de ayuda bajo el input */
  .dni-help {
    width: 100%;
    font-size: .92rem;
    color: #6b7280;
    margin-top: -6px;
  }

/* ===== Login (centrado) ===== */
/* --- Patch de estilos del login (podés moverlo a estilo.css) --- */
.content.auth { padding: 32px 0 48px; }
.auth-wrap { max-width: 560px; margin: 0 auto; }
.auth-card{
  background:#fff; border:1px solid #eef2f7; border-radius:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  padding: 24px 24px 20px;
}
.auth-title{ margin:0 0 6px; font-size:28px; line-height:1.2; }
.auth-sub{ margin:0 0 18px; color:#475569; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-weight:700; margin-bottom:6px; }
.field input[type="email"],
.field input[type="password"],
.field input[type="text"],
.field input[type="number"],
.field input[type="url"],
.field input[type="date"],
.field input[type="time"]
{
  width:100%;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:10px 12px;
  font-size:15px;
  outline:none;
  background:#fff;
}
.field input:focus{ border-color:#ffd7bf; box-shadow:0 0 0 3px rgba(255,124,45,.12); }

.pass-wrap{ position:relative; }
.toggle-pass{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:transparent; border:0; padding:4px; cursor:pointer;
  line-height:0; border-radius:8px;
}
.toggle-pass:hover{ background:#f3f4f6; }
.toggle-pass svg{ width:20px; height:20px; stroke:#475569; }

.field.row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.field.row .check{ display:flex; align-items:center; gap:8px; }
.small{ font-size:13px; }
.muted{ color:#64748b; }

.btn.auth-submit{
  width:100%; border-radius:999px; padding:10px 14px; font-weight:700;
  background:#e6782a; color:#fff; border:0; cursor:pointer;
}

.auth-card .btn.auth-submit{
  width:100%;
  box-sizing:border-box;   /* evita el overflow */
  display:block;           /* asegura que tome todo el ancho */
}
.btn.auth-submit:hover{ background:#e65c00; }
.auth-foot{ text-align:left; margin:10px 6px 0; }

/* Refuerzos para el login */
.auth .auth-wrap { max-width: 460px; }
.auth .auth-card { padding: 20px; }
.auth .field input[type="email"],
.auth .field input[type="password"],
.auth .field input[type="text"],
.auth .field input[type="number"],
.auth .field input[type="url"],
.auth .field input[type="date"],
.auth .field input[type="time"]
 {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* ===== Contacto.php ===== */
.contact-section {
  padding: 40px 0;
  margin-bottom: 30px;
  background: #fff3eb; /* mismo estilo que footer */
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 280px; /* formulario + columna lateral */
  gap: 30px;
  max-width: 1000px;
  margin: auto;
  padding: 0 20px;
}

/*============== USUARIOS PENDIENTES FORMULARIO ====================*/
.lib-toolbar { display:flex; gap:8px; align-items:center; }
.panel-search {
  width:100%;
  max-width:420px;
  height:44px;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  font: inherit;
  outline: none;
}

/* Caja que “encierra” la tabla dentro de la tarjeta */
.table-card{
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;            /* recorta bordes del thead/td para que no sobresalga */
  background:#fff;
}

/* Si hay muchas columnas: scroll horizontal sin romper la tarjeta */
.table-scroll{
  overflow-x:auto;            /* usa auto; si querés prohibir scroll, poné hidden */
  -webkit-overflow-scrolling: touch;
}

/* Tabla prolija */
.table{
  width:100%;
  border-collapse:collapse;
  margin:0;                   /* evita que “empuje” fuera de la card */
  table-layout:auto;
}

.table th,
.table td{
  padding:10px 12px;
  border-bottom:1px solid #e5e7eb;
  text-align:left;
  vertical-align:top;
  white-space:nowrap;         /* si preferís que corte líneas, quitá esta línea */
}

.table thead th{
  background:#f9fafb;
  font-weight:600;
}

/* Opcional: que el header quede fijo cuando hay scroll horizontal/vertical */
.table thead th{
  position:sticky;
  top:0;
  z-index:1;
}

/* Botones dentro de la tabla: que no “rompan” el ancho */
.table .btn{
  white-space:nowrap;
}
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.badge-warning {
  background: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
}

/* ===== Layout ancho para paneles (usuarios, préstamos, etc.) ===== */
.panel-wrap{
  width: 90%;
  max-width: 1200px;     /* no más de 1200px en monitores grandes */
  margin: 8px auto;      /* centrado con margen vertical chico */
}

.panel-card{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
  padding: 24px;
}

/* Buscador que combine con el panel ancho */
.panel .lib-toolbar{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.panel .lib-toolbar .panel-search,
.panel .lib-toolbar .input{
  height: 44px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  padding: 10px 12px;
  flex: 1 1 420px;     /* crece y ocupa buen ancho */
  max-width: 600px;
}

/* La tabla queda “encerrada” y no se sale de la card */
.table-card{
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  margin-top: 10px;
}

.table-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table{
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

.table th, .table td{
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: top;
  white-space: nowrap; /* si querés que corte línea, eliminá esta línea */
}

.table thead th{
  background: #f9fafb;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}
.table .btn{ white-space: nowrap; }

/* ===== Layout ancho para paneles ===== */
.panel-wrap{
  width: 90%;
  max-width: 1200px;
  margin: 8px auto;         /* centrado con poco margen vertical */
}
.panel-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 2px 12px rgba(0,0,0,.04);
  padding:24px;
}

/* Buscador dentro de panel */
.panel .lib-toolbar{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.panel .lib-toolbar .panel-search,
.panel .lib-toolbar .input{
  height:44px; border-radius:10px; border:1px solid #e5e7eb;
  padding:10px 12px; flex:1 1 420px; max-width:600px;
}

/* Tabla encapsulada para que no se salga del contenedor */
.table-card{
  border:1px solid #e5e7eb;
  border-radius:12px;
  overflow:hidden;           /* recorta el thead dentro de la card */
  background:#fff;
  margin-top:10px;
}
.table-scroll{
  position:relative;         /* ayuda al sticky */
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.table{
  width:100%;
  border-collapse:collapse;
  margin:0;
}
.table th,.table td{
  padding:10px 12px;
  border-bottom:1px solid #e5e7eb;
  text-align:left; vertical-align:top;
  white-space:nowrap;        /* si querés que corte, quitá esta línea */
}
.table thead th{
  background:#f9fafb;
  font-weight:600;
  position:sticky; top:0; z-index:1; /* queda fijo dentro de la table-scroll */
}
.table .btn{ white-space:nowrap; }

/* ===== Menú de usuario (header) ===== */
.user-menu { position: relative; margin-left: 8px; }
.user-btn {
  display: flex;
  align-items: center;
  gap: 8px;              /* espacio entre inicial y nombre */
  background: #fff;
  border: none;
  border-radius: 20px;
  padding: 6px 12px;
  cursor: pointer;
  font: inherit;
  color: #333;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  transition: background .2s;
}
.user-btn:hover { background:#f8f8f8; }
.user-btn .avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f97316;   /* naranja institucional */
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
.user-btn .user-label {   
  font-size: 14px;
  font-weight: 500;
  color: #222;
 }
.user-btn .user-role { color:#6b7280; font-weight:500; }
.user-btn .caret {   
  margin-left: auto;
  color: #666; }

.user-dropdown {
  position:absolute; right:0; top:calc(100% + 6px);
  min-width:180px; background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.08); padding:6px; display:none; z-index:50;
}
.user-menu.open .user-dropdown { display:block; }

.user-item {
  display:block; padding:10px 12px; border-radius:8px; color:#374151; text-decoration:none; font-weight:600;
}
.user-item:hover { background:#f6f5f3; }
.user-sep { height:1px; background:#f1f5f9; margin:6px; }

/* Corregir color de enlaces dentro del menú de usuario (sobre-escribe la navbar) */
.navbar .user-menu .user-dropdown { 
  color: #374151;
  background: #fff;
  z-index: 999;              /* por si algo lo tapa */
}

.navbar .user-menu .user-dropdown .user-item {
  color: #374151 !important; /* evita heredar el blanco del nav */
  display: block;
  text-decoration: none;
  font-weight: 600;
}

.navbar .user-menu .user-dropdown .user-item:hover {
  background: #f3f4f6;
  color: #111827 !important;
}

/* ===== Inventario: campos dentro de la tabla ===== */
.table td { vertical-align: middle; }               /* centra contenido por celda */
.tbl-inline{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.input.sm{ height:32px; padding:6px 10px; border:1px solid #e5e7eb; border-radius:10px; }
.btn.sm{ padding:6px 10px; font-size:13px; }

/* Badges para "Activo" */
.badge-ok   { display:inline-block; padding:3px 8px; border-radius:999px; background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; font-weight:700; font-size:12px; }
.badge-off  { display:inline-block; padding:3px 8px; border-radius:999px; background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; font-weight:700; font-size:12px; }

/* Columnas con ancho razonable para que no “bailen” */
.col-carton   { width:110px; }
.col-tipo     { width:160px; }
.col-estado   { width:260px; }
.col-activo   { width:110px; }
.col-acciones { width:220px; }

/* Select grande SOLO en el form de inventario (no global) */
.inv-card .select-lg{
  width:100%; height:44px; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; background:#fff;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #888 50%),
    linear-gradient(135deg, #888 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px),
    100% 0;
  background-size: 6px 6px, 6px 6px, 2.5em 100%;
  background-repeat: no-repeat;
}

/* ===== Nuevo préstamo – UI ===== */
/* Chips para abrir/cerrar secciones (Mate / Calculadoras / Diccionarios) */
.chip-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
}
.chip {
  appearance: none;
  border: 1px solid #e6e7eb;
  background: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.chip:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.chip.is-on {
  background: #e8772e;
  border-color: #e8772e;
  color: #fff;
}

/* Sub-secciones del formulario (caja con separación superior) */
.subsection {
  padding: 12px 0 4px;
  border-top: 1px solid #eceff3;
  margin-top: 8px;
}
.is-hidden { display: none; }

/* Grupo de toggles (Termo/Mate/Bombilla) */
.toggle-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.toggle {
  border: 1px solid #e6e7eb;
  background: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.toggle:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.toggle.is-on {
  background: #e8772e;
  border-color: #e8772e;
  color: #fff;
}
.input-hidden {
  position: absolute !important;
  inset: 0;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* Campos más angostos para números */
.field.narrow { max-width: 360px; }
.form-stack .field { margin-bottom: 12px; }

/* Asegura padding lateral visual en la tarjeta */
.auth-card .form-stack { padding-right: 2px; } /* micro para que no “pegue” */

.auth-card form,
.panel-card form {
  max-width: 95%;   /* deja espacio a los costados */
  margin: 0 auto;   /* centra */
}


/* --- Estilos para formulario de eventos --- */
.event-form textarea {
  width: 90%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: #111;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.event-form textarea:focus {
  border-color: #ff6a00;
  box-shadow: 0 0 0 3px rgba(255,106,0,0.2);
  outline: none;
}

.event-form textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

/* Ajustes mínimos para eventos de BD */
.cal-title-row{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cal-title{margin:0}
.cal-desc{margin:6px 0 0}
.meta-row{display:flex;gap:8px;align-items:center;margin-top:6px}
.meta-row .ico{width:16px;height:16px;display:inline-block;fill:currentColor;opacity:.7}
.pill{display:inline-block;border-radius:999px;padding:2px 8px;font-size:12px;line-height:1.6;background:#eef2ff;color:#3730a3;border:1px solid #e0e7ff}
.pill-time{background:#ecfdf5;color:#065f46;border-color:#d1fae5}
.btn.btn-sm{padding:6px 10px;border-radius:10px;font-size:14px}
.cal-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}

/* === Tags por categoría (agrega “taller”) === */
.tag-taller{
  background: #fef3c7;        /* ámbar clarito */
  color: #92400e;
  border: 1px solid #fde68a;
}

/* Chips del mini-calendario por categoría (agrega “taller”) */
.mini-event--taller{
  background: #fde68a;
  color: #78350f;
  border: 1px solid #fcd34d;
}

/* Píldoras & metadatos (si no lo tenías ya) */
.cal-title-row{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cal-title{margin:0}
.cal-desc{margin:6px 0 0}
.meta-row{display:flex;gap:8px;align-items:center;margin-top:6px}
.meta-row .ico{width:16px;height:16px;display:inline-block;fill:currentColor;opacity:.7}
.pill{display:inline-block;border-radius:999px;padding:2px 8px;font-size:12px;line-height:1.6;background:#eef2ff;color:#3730a3;border:1px solid #e0e7ff}
.pill-time{background:#ecfdf5;color:#065f46;border-color:#d1fae5}
.btn.btn-sm{padding:6px 10px;border-radius:10px;font-size:14px}
.cal-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}

/* ===== Tabla con scroll (máx 15 filas visibles) ===== */
.table-clip-15{
  /* Ajustá si tus filas o header son más altos */
  --row-h: 48px;   /* altura aproximada de una fila */
  --head-h: 44px;  /* altura del encabezado */

  max-height: calc(var(--head-h) + (var(--row-h) * 15));
  overflow-y: auto;        /* scroll vertical */
  overflow-x: auto;        /* scroll horizontal si hace falta */
  -webkit-overflow-scrolling: touch;
}

/* Opcional: mejora estética del scrollbar */
.table-clip-15::-webkit-scrollbar{ height: 8px; width: 8px; }
.table-clip-15::-webkit-scrollbar-thumb{ background:#d1d5db; border-radius: 8px; }
.table-clip-15::-webkit-scrollbar-thumb:hover{ background:#9ca3af; }

/* =========================================================
   TRÁMITES — Modo responsive sin tocar HTML
   ========================================================= */

/* ----- Contenedor base de la página de trámites ----- */
.tramites .container { max-width: 1100px; margin: 0 auto; padding: 0 16px; margin-bottom: 30px; }

/* ----- Encabezado (título + acciones) ----- */
.tram-head{
  display: flex; align-items: center; gap: 12px; margin: 12px 0 14px;
}
.tram-head .title-wrap{ flex: 1; min-width: 0; }
.tram-head h1{ margin: 0 0 6px; }
.tram-head .sub{ margin: 0; color: #6b7280; }

/* Acciones (botones) */
.tram-actions{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.tram-actions .btn{ padding: 8px 12px; border-radius:10px; font-size:13px; }
.tram-actions .btn-manage{
  background:#f3f4f6; color:#111; border:1px solid #d1d5db; transition:all .2s;
}
.tram-actions .btn-manage:hover{ background:#e5e7eb; border-color:#9ca3af; }
.tram-actions .btn-add{
  background:#e6782a; color:#fff; border:0; padding:8px 12px; border-radius:10px;
}

/* ----- Buscador + Filtros ----- */
.tram-filters{
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
  margin-bottom: 14px;
}
.tram-filters .search { width: 100%; }
.tram-filters .row { display:flex; gap:10px; align-items:center; }
.tram-filters .row > * { flex: 1; }
.tram-filters .btn-primary{
  background:#e6782a; color:#fff; border:0; padding:10px 14px; border-radius:10px;
}

/* ----- Grilla de tarjetas (si la usás) ----- */
.tram-grid{
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.tram-card{
  background:#fff; border:1px solid #ececec; border-radius:14px; padding:12px;
}
.tram-card h3{ margin:0 0 6px; font-size:16px; }
.tram-card p{ margin:0; color:#374151; font-size:14px; }

/* ----- Tabla responsive (listado de trámites) ----- */
/* Wrapper para no romper estilos de la tabla: scroll vertical + horizontal */
.table-clip-15{
  --row-h: 48px;   /* alto aprox de fila, ajustá si hace falta */
  --head-h: 44px;
  max-height: calc(var(--head-h) + (var(--row-h) * 15));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.table-clip-15 .tabla-tramites{ margin-bottom:0; }

/* Mantener celdas legibles en pantallas chicas */
.tabla-tramites th, .tabla-tramites td{
  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
}

/* ----- Utilidades mostrar/ocultar según tamaño ----- */
.show-mobile{ display:none !important; }
.hide-mobile{ display:block !important; }

/* =========================================================
   TRÁMITES — Estilos aislados (prefijo trm-)
   ========================================================= */
.trm{ background:#fff; }
.trm-container{ max-width:1100px; margin:0 auto; padding:16px; }

.trm-head{ margin:4px 0 12px; }
.trm-title{ margin:0 0 4px; font-size:32px; line-height:1.2; }
.trm-sub{ margin:0; color:#4b5563; }

/* Aviso */
.trm-notice{
  background:#f3f4f6; border:1px solid #e5e7eb; color:#374151;
  padding:12px; border-radius:12px; margin:12px 0 16px;
}

/* Bloques */
.trm-block{ margin:18px 0; }
.trm-h2{ margin:0 0 10px; font-size:22px; }

/* Tabla responsiva (scroll si no entra) */
.trm-tableclip{
  overflow:auto;  /* vertical/horizontal */
  -webkit-overflow-scrolling: touch;
  max-height: calc(44px + 48px * 15); /* header + 15 filas visibles */
  border-radius:12px; border:1px solid #eee;
}
.trm-table{
  width:100%; min-width:560px;
  border-collapse:separate; border-spacing:0;
  background:#fff;
}
.trm-table thead th{
  position:sticky; top:0; z-index:1;
  background:#fff; border-bottom:1px solid #eee;
  padding:10px 12px; text-align:left; font-weight:700;
}
.trm-table td{
  padding:10px 12px; border-bottom:1px solid #f3f4f6;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Enlaces útiles */
.trm-btns{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px;
}
.trm-btn{
  display:inline-block; text-align:center;
  padding:10px 12px; border-radius:10px; border:1px solid #e5e7eb;
  color:#111; text-decoration:none; background:#fff;
}
.trm-btn:hover{ background:#f9fafb; }
.trm-btn--primary{ background:#e6782a; color:#fff; border-color:#e6782a; }
.trm-btn--primary:hover{ background:#cf600f; }

/* FAQ */
.trm-qa{
  border:1px solid #eee; border-radius:12px; padding:0 12px; margin:10px 0;
}
.trm-qa > summary{
  cursor:pointer; padding:12px 0; list-style:none; font-weight:600;
}
.trm-qa > summary::marker{ display:none; }
.trm-qa__body{ padding:0 0 12px; color:#374151; }

/* Texto legible y sin cortes extraños */
.trm p, .trm li, .trm-notice, .trm-qa__body{
  white-space:normal; overflow-wrap:anywhere; word-break:normal;
}
.brand-logo { width: 120px; max-width: 30vw; display:block; }
.brand-logo picture, .brand-logo img { width: 100%; height: auto; display:block; }

/* ===== Para las ediciones dentro de la pagina ===== */
.editable {
  outline: 2px dashed orange;
  padding: 4px;
}

.editable:focus {
  background: #fff6ea;
}



/* ===== MODO MOBILE ===== */
/* ===========================
   MEDIA QUERIES (Mobile)
   =========================== */
   /* AJUSTANDO MENU HEADER */
/* Ocultar "Inicio" en mobile */
@media (max-width: 780px){
  .nav-inicio { 
    display: none; 
  }

  /* Ocultar el nombre del usuario, dejar solo la inicial */
  .user-btn .user-label { 
    display: none; 
  }
}

/* ===== Separador Generico en el sitio ===== */
/* Responsive simple */
@media (max-width: 640px) {
  .navbar .wrap { flex-wrap: wrap; }
  .navbar .nav-links { width: 100%; flex-wrap: wrap; }
}

/* ===== Grid 6 cards (marketing sobrio)  HOME DE ENTRADA ===== */
/* Responsive */
@media (max-width: 980px){
  .grid-6 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px){
  .grid-6 { grid-template-columns: 1fr; }
  .feature-card { min-height: 150px; }
}

/* ===== Imágenes de fondo (relative a /assets/css/estilo.css) =====
   El CSS vive en /assets/css, por eso usamos ../img/ para llegar a /assets/img  */
/* Responsive */
@media (max-width: 980px){
  .media-grid { grid-template-columns: 1fr; }
}

/* === Sitios de interés PAGINA INDEX.PHP === */
/* Responsive  */
@media (max-width: 900px){
  .sitios-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px){
  .sitios-grid { grid-template-columns: 1fr; }
}
/* Responsive pequeño */
@media (max-width: 640px){
  .intro__title{ font-size: 24px; }
}

/* ===== Calendario académico ===== */
/* Responsive */
@media (max-width: 820px){
  .cal-head h2{ font-size: 20px; }
  .cal-figure{ max-width: 100%; }
}

/* ===== Layout del cuerpo de página ===== */
@media (max-width: 900px){
  .content-grid{ grid-template-columns: 1fr; }
}

/* ===== Enterate más (plataformas con iconos grandes) FOOTER ===== */
/* responsive */
@media (max-width:1000px){ .social-giant-grid{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:600px){
  .social-giant-grid{ grid-template-columns: repeat(2,1fr); }
  .more-about{ padding: 34px 0 26px; margin: 22px 12px; }  /* aire y margen interno en móvil */
}

/* ===== Sección carrusel herramientas ===== */
/* Responsive */
@media (max-width: 880px){
  .tools-title{ font-size: 34px; }
  .nav.prev{ left: 6px; } .nav.next{ right: 6px; }
}
@media (max-width: 520px){
  .tools-title{ font-size: 28px; }
  .nav{ width:40px; height:40px; font-size:22px; }
}
/* ===== MAPA DE LA UNAJ (split + carrusel a la derecha) ===== */
/* Responsive */
@media (max-width: 980px){
  .mapa-grid{ grid-template-columns: 1fr; }
  .mapa-title{ font-size: 36px; }
}
@media (max-width: 560px){
  .mapa-title{ font-size: 28px; }
  .mapa-slider .nav{ width:40px; height:40px; font-size:24px; }
}
/* ===== YouTube section ===== */
@media (max-width: 780px){
  .video-grid{ grid-template-columns: 1fr; }
}
/* ===== Planes de estudio ===== */
@media (max-width: 720px){ .planes-filters { grid-template-columns: 1fr; } }
@media (max-width: 980px){ .planes-list{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .planes-list{ grid-template-columns: 1fr; } }
/*===== Franja destacada Paginas Hijas =====*/
/* Responsive */
@media (max-width: 640px){
  .highlight-title { font-size: 22px; }
  .highlight-text  { font-size: 14px; }
}
/*====== Sección biblioteca – Iniciales ======*/
@media (max-width: 760px){
  .drive-head, .drive-row{
    grid-template-columns: 1fr;
  }
  .cell--right{ justify-content:flex-start; margin-top:4px; }
}
/* ===== Sección: donar/aportar apuntes ===== */
@media (max-width: 720px){
  .share-title{ font-size: 26px; }
  .gform-embed iframe{ height: 1100px; } /* formularios suelen “crecer” en móvil */
}
  /*===== Contenedor del buscador  COMUNIDAD NARANJA =====*/
  /* En pantallas chicas, que el botón vaya abajo */
  @media (max-width: 520px) {
    #form-buscar { gap: 10px; }
    .btn.primary.big { width: 100%; }
  }
/* ===== Contacto.php ===== */
/* Responsivo */
@media (max-width: 768px){
  .contact-grid {
    grid-template-columns: 1fr; /* se apila */
  }
}
/* ===== Layout ancho para paneles (usuarios, préstamos, etc.) ===== */
@media (max-width: 900px){
  .panel-wrap{ width: 95%; max-width: 95%; }
}
/* ===== Layout ancho para paneles ===== */
@media (max-width:900px){
  .panel-wrap{ width:95%; max-width:95%; }
}
/* ============== BECAS ESTILOS TEXTO ============== */ 

/* Asegurar layout base */
header.navbar{ background:#e6782a; }
.navbar .wrap{ max-width:1100px; margin:0 auto; padding:8px 16px; display:flex; align-items:center; }
.nav-links{ display:flex; align-items:center; gap:12px; width:100%; }
.navbar .brand .logo{ height:48px; width:auto; }
.nav-spacer{ margin-left:auto; }

/* Mobile: ya no hace falta tocar “Inicio” porque lo removimos */
@media (max-width: 780px){
  .navbar .wrap{ padding:8px 12px; }
  .nav-links{ gap:10px; }
  .user-btn.user-btn-circle .avatar{ width:38px; height:38px; font-size:15px; }
}

/* ===== Footer redes: modo "barra" en mobile (sin cambiar HTML) ===== */
@media (max-width: 560px){
  /* 1 columna para que cada red sea una barra completa */
  .social-giant-grid{
    grid-template-columns: 1fr !important;
    gap: 12px;
    justify-items: stretch;   /* que ocupen todo el ancho */
  }

  /* La tarjeta pasa a ser una barra: icono a la izq, texto a la der */
  .social-giant{
    flex-direction: row !important;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    width: 100%;
  }

  /* Icono compacto (mantiene el color por red que ya definiste) */
  .social-giant .icon-wrap{
    width: 40px; 
    height: 40px;
    border-radius: 10px;
    box-shadow: none;         /* limpio en formato barra */
    flex: 0 0 auto;
  }
  .social-giant svg{
    width: 22px; 
    height: 22px;
    fill: #fff;               /* ya lo tenés por red; lo reforzamos */
  }

  /* Texto al lado del icono, un poquito más chico */
  .social-giant > span{
    font-size: 15px;
    color: #111;
  }
}

/* Aún más compacto en pantallas muy pequeñas */
@media (max-width: 380px){
  .social-giant{
    padding: 9px 10px;
    border-radius: 12px;
  }
  .social-giant .icon-wrap{ width: 36px; height: 36px; }
  .social-giant svg{ width: 20px; height: 20px; }
  .social-giant > span{ font-size: 14px; }
}

/* Responsive */
@media (max-width:980px){
  .calx-grid{ gap:6px; }
  .calx-cell{ min-height:78px; padding:6px; border-radius:10px; }
}
@media (max-width:780px){
  .calx{ padding:10px; }
  .calx-title{ font-size:16px; }
  .calx-grid{ gap:6px; }
  .calx-cell{ min-height:68px; padding:6px; }
  .calx-daynum{ font-size:12px; }
  .calx-dot{ font-size:10px; padding:3px 5px; }
}
@media (max-width:480px){
  .calx{ padding:8px; }
  .calx-grid{ gap:5px; }
  .calx-cell{ min-height:60px; padding:5px; border-radius:8px; }
}

/* En mobile, filas suelen ser más altas */
@media (max-width:480px){
  .table-clip-15{ --row-h: 56px; --head-h: 48px; }
}
/* =========================================================
   BREAKPOINTS
   ========================================================= */
@media (max-width: 980px){
  .tram-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 780px){
  .tram-head{ align-items: flex-start; }
  .tram-head h1{ font-size:22px; line-height:1.2; }

  /* Gestionar más compacto */
  .tram-actions .btn-manage{ padding:6px 10px; font-size:12px; }

  /* Filtros y buscador apilados */
  .tram-filters{ grid-template-columns: 1fr; }
  .tram-filters .row{ flex-direction: column; align-items: stretch; }
  .tram-filters .row > *{ flex: initial; width:100%; }

  /* Grilla a 1 columna */
  .tram-grid{ grid-template-columns: 1fr; }

  /* Ajustar alturas de filas si en mobile se agrandan */
  .table-clip-15{ --row-h: 56px; --head-h: 48px; }

  .show-mobile{ display:block !important; }
  .hide-mobile{ display:none !important; }
}

@media (max-width: 480px){
  .tram-head{ gap:10px; }
  .tram-filters{ gap:8px; }
  .tram-card{ padding:10px; border-radius:12px; }
}

/* ===== Footer redes: corregir icono fuera del card en mobile ===== */
@media (max-width: 560px){
  /* El grid ocupa todo el ancho del contenedor, sin sangrías extras */
  .social-giant-grid{
    padding: 0 !important;
  }

  /* Cada item en forma de barra (card) con el icono adentro */
  .social-giant{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;             /* suficiente aire a los lados */
    border-radius: 14px;
    overflow: hidden;               /* por si algún shadow se sale */
  }

  /* Ícono: sin posiciones absolutas ni desplazamientos */
  .social-giant .icon-wrap{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 12px 0 0 !important;  /* separa del texto */
    width: 40px; height: 40px;
    border-radius: 10px;
    box-shadow: none;               /* opcional: sombra más sutil dentro del card */
    flex: 0 0 auto;
  }

  /* Asegura box-sizing correcto en todo el bloque */
  .social-giant, .social-giant *{
    box-sizing: border-box;
  }
}
/* ===== Header compacto + ocultar "Comunidad Naranja" en mobile ===== */

/* 1) Compacto en pantallas medianas */
@media (max-width: 900px){
  .navbar { padding: 8px 0; }
  .navbar .wrap { gap: 12px; }
  .logo { height: 38px; }                     /* baja el logo */
  .nav-links a { font-size: 15px; margin-left: 14px; }

  /* Solo la inicial a la derecha (sin nombre ni flecha) */
  .user-btn .user-label, 
  .user-btn .caret { display: none !important; }
  .user-btn .avatar { width: 32px; height: 32px; }
  .user-btn { padding: 0; }
}

/* 2) Más delgado aún */
@media (max-width: 760px){
  .navbar { padding: 6px 0; }
  .logo { height: 34px; }
  .nav-links a { font-size: 14px; margin-left: 12px; }
}


/* 4) Ultra-compacto (teléfonos angostos) */
@media (max-width: 420px){
  .navbar { padding: 5px 0; }
  .logo { height: 30px; }
  .nav-links { gap: 8px; }
}
/* =========================================================
   TRÁMITES — Estilos aislados (prefijo trm-)
   ========================================================= */
@media (max-width: 980px){
  .trm-container{ padding:14px; }
  .trm-btns{ grid-template-columns:1fr; } /* botones apilados */
}
@media (max-width: 780px){
  .trm-title{ font-size:26px; }
  .trm-h2{ font-size:20px; }
  .trm p, .trm li{ font-size:15px; line-height:1.5; }
  .trm-tableclip{ max-height: calc(48px + 56px * 15); } /* filas más altas en mobile */
}
@media (max-width: 420px){
  .trm-container{ padding:12px; }
  .trm-title{ font-size:22px; }
  .trm-h2{ font-size:18px; }
}

/* ===== Inscripciones: galería de 3 imágenes ===== */

.insc-grid{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;     /* móvil: 1 col */
}
@media (min-width: 680px){
  .insc-grid{ grid-template-columns: repeat(2, 1fr); } /* tablet: 2 cols */
}
@media (min-width: 1024px){
  .insc-grid{ grid-template-columns: repeat(3, 1fr); } /* desktop: 3 cols */
}

.insc-card{
  margin: 0;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.insc-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

.insc-card img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.insc-card figcaption{
  padding: 10px 12px;
  font-weight: 600;
  color: #1f2937;
  font-size: 14px;
  background: #fff;
  border-top: 1px solid #f2f2f2;
}

@media (min-width: 1200px){
  .sitio-card .card-img{ 
    background-image: image-set(
      url('<?= ASSETS_URL ?>/img-optimized/unaj-fachada@1200.avif') type('image/avif'),
      url('<?= ASSETS_URL ?>/img-optimized/unaj-fachada@1200.webp') type('image/webp'),
      url('<?= ASSETS_URL ?>/img-optimized/unaj-fachada@1200.jpg')  type('image/jpeg')
    );
  }
}

/* Aún más compacto en muy chico */
@media (max-width: 480px){
  .brand-logo{ width:clamp(96px, 24vw, 120px); }
  .nav-link{ font-size:.95rem; max-width:50vw; } /* se acorta con "..." antes de romper */
  .user-btn-circle{ width:30px; height:30px; }
}

/* ===== MODO MÓVIL FULL-BLEED (<= 420px) ===== */
@media (max-width: 420px){

  /* Quitar padding lateral del contenedor solo en el header */
  .navbar > .wrap{
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none;        /* que no limite el ancho */
  }

  /* Grid de 3 columnas: [logo] [link] [J] */
  .nav-links{
    display: grid !important;                 /* pisa el flex solo aquí */
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
  }

  /* Logo pegado a la izquierda y más chico */
  .brand{ grid-column: 1; padding-left: 8px; }
  .brand-logo{ width: 96px; }
  .brand-logo picture, .brand-logo img{ width:100%; height:auto; display:block; }

  /* "Comunidad Naranja" al medio, encoge con ellipsis */
  .nav-links > a[href*="comunidad.php"]{
    grid-column: 2;
    min-width: 0;                /* permite encoger */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
    font-weight: 600;
  }

  /* Avatar fijo a la derecha */
  .user-menu, .btn-login{
    grid-column: 3;
    justify-self: end;
    margin-right: 8px;
  }

  /* El spacer no se usa en este modo */
  .nav-spacer{ display: none !important; }

  /* Barra más finita */
  .navbar{ padding: 6px 0; }
  .user-btn-circle{ width: 28px; height: 28px; }
}

/* =========================================================
   CONTENIDOS ADMIN - SITIO FINAL
========================================================= */
  .contenidos-wrap{
    width: min(1100px, calc(100% - 32px));
    margin: 40px auto 60px;
  }

  .contenidos-hero{
    background: linear-gradient(135deg, #fff8f2 0%, #ffffff 100%);
    border: 1px solid #f1dfd2;
    border-radius: 22px;
    padding: 28px 28px 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    margin-bottom: 28px;
  }

  .contenidos-kicker{
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #c96b18;
    background: #fff1e3;
    border: 1px solid #ffd7b0;
    padding: 6px 10px;
    border-radius: 999px;
    margin-bottom: 14px;
  }

  .contenidos-hero h1{
    margin: 0 0 10px;
    font-size: clamp(28px, 4vw, 38px);
    line-height: 1.1;
    color: #1f2937;
  }

  .contenidos-hero p{
    margin: 0;
    max-width: 760px;
    color: #5b6472;
    font-size: 15px;
    line-height: 1.7;
  }

  .card-grid-admin{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
  }

  .card-admin-pro{
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 8px 24px rgba(0,0,0,.05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
  }

  .card-admin-pro::before{
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, #f59e0b, #ea580c);
  }

  .card-admin-pro:hover{
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(0,0,0,.09);
    border-color: #e8d4c0;
  }

  .card-admin-top{
    margin-bottom: 18px;
  }

  .card-admin-icon{
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: #fff4e8;
    margin-bottom: 14px;
  }

  .card-admin-pro h3{
    margin: 0 0 8px;
    font-size: 20px;
    color: #1f2937;
  }

  .card-admin-pro p{
    margin: 0;
    color: #667085;
    line-height: 1.6;
    font-size: 14px;
  }

  .card-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
  }

  .card-admin-pro.muted{
    background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
    border-style: dashed;
    opacity: .92;
  }

  .card-admin-pro.muted::before{
    background: linear-gradient(90deg, #cbd5e1, #94a3b8);
  }

  .pill-soon{
    display: inline-block;
    margin-top: 14px;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    background: #e2e8f0;
    padding: 6px 10px;
    border-radius: 999px;
  }

  @media (max-width: 640px){
    .contenidos-wrap{
      width: min(100%, calc(100% - 20px));
      margin: 24px auto 40px;
    }

    .contenidos-hero{
      padding: 22px 18px;
      border-radius: 18px;
    }

    .card-admin-pro{
      padding: 18px;
      border-radius: 18px;
      min-height: auto;
    }

    .card-actions{
      flex-direction: column;
    }

    .card-actions .btn{
      width: 100%;
      justify-content: center;
    }
  }
/* =========================================================
   PANEL ADMIN BOTONES - INSCRIPCIONES
========================================================= */

  .admin-page-wrap{
    width: min(1180px, calc(100% - 32px));
    margin: 36px auto 60px;
  }

  .admin-hero{
    background: linear-gradient(135deg, #fff7ef 0%, #fffdfa 100%);
    border: 1px solid #ecd9c7;
    border-radius: 22px;
    padding: 28px;
    box-shadow: 0 12px 28px rgba(0,0,0,.05);
    margin-bottom: 24px;
  }

  .admin-hero h1{
    margin: 0 0 10px;
    font-size: clamp(28px, 4vw, 42px);
    color: #122b49;
    line-height: 1.1;
  }

  .admin-hero p{
    margin: 0;
    color: #4f5d6b;
    font-size: 16px;
    line-height: 1.6;
  }

  .admin-panel{
    background: #fffaf5;
    border: 1px solid #ead9ca;
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 10px 24px rgba(0,0,0,.04);
    margin-bottom: 24px;
  }

  .admin-panel-title{
    margin: 0 0 16px;
    font-size: 20px;
    color: #122b49;
  }

  .table-wrap{
    width: 100%;
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid #e6d6c8;
    background: #fff;
  }

  .admin-table{
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .admin-table thead th{
    background: #f3f4f6;
    color: #122b49;
    font-weight: 700;
    font-size: 15px;
    text-align: left;
    padding: 14px 14px;
    border-bottom: 1px solid #e5e7eb;
  }

  .admin-table tbody td{
    padding: 14px 14px;
    border-bottom: 1px solid #eee3d8;
    vertical-align: top;
    color: #1f2937;
    font-size: 15px;
  }

  .admin-table tbody tr:hover{
    background: #fffaf6;
  }

  .col-orden{ width: 80px; }
  .col-texto{ width: 220px; }
  .col-url{ width: 430px; }
  .col-clase{ width: 150px; }
  .col-acciones{ width: 180px; }

  .url-cell,
  .class-cell{
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .class-pill{
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: #fff1e8;
    color: #a44b11;
    font-size: 13px;
    font-weight: 600;
    word-break: break-word;
  }

  .actions-cell{
    white-space: normal;
  }

  .actions-stack{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .form-card{
    max-width: 620px;
    background: #f8f8f8;
    border: 1px solid #d9dde3;
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 8px 20px rgba(0,0,0,.04);
  }

  .form-card h2{
    margin: 0 0 22px;
    font-size: 22px;
    color: #122b49;
  }

  .form-grid{
    display: grid;
    gap: 16px;
  }

  .field{
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .field label{
    font-weight: 700;
    color: #122b49;
    font-size: 15px;
  }

  .field input,
  .field select{
    width: 100%;
    min-height: 46px;
    border: 1px solid #cfd6df;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 15px;
    outline: none;
    background: #fff;
  }

  .field input:focus,
  .field select:focus{
    border-color: #eb7d23;
    box-shadow: 0 0 0 3px rgba(235,125,35,.12);
  }

  .form-actions{
    margin-top: 8px;
  }

  @media (max-width: 768px){
    .admin-page-wrap{
      width: min(100%, calc(100% - 20px));
      margin: 24px auto 40px;
    }

    .admin-hero,
    .admin-panel,
    .form-card{
      padding: 18px;
      border-radius: 16px;
    }

    .form-card{
      max-width: 100%;
    }
  }

/* =========================================================
   PANEL ADMIN BOTONES - BECAS
========================================================= */



/*========  REUTILIZABLE  =========== */
/* ===== Superficie visual reutilizable ===== */
.surface-card {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 186, 138, 0.35);
  border-radius: 24px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.06);
  backdrop-filter: blur(6px);
}

/* =========================================================
   COMUNIDAD NARANJA - FULL PRO
========================================================= */

.cn-page {
  padding-bottom: 48px;
}

.cn-hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 38px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.22), transparent 26%),
    radial-gradient(circle at 88% 82%, rgba(255,255,255,0.14), transparent 28%),
    linear-gradient(135deg, #fff4ea 0%, #ffdcb9 48%, #ffb56e 100%);
}

.cn-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
}

.cn-badge {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.78);
  color: #d96b08;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  margin-bottom: 16px;
}

.cn-badge--dark {
  background: rgba(0,0,0,0.08);
  color: #b45309;
}

.cn-hero__title {
  margin: 0 0 16px;
  font-size: 3.35rem;
  line-height: 1.02;
  font-weight: 800;
  color: #111827;
}

.cn-hero__lead {
  margin: 0 0 14px;
  font-size: 1.14rem;
  line-height: 1.7;
  color: #2f3a4a;
  max-width: 700px;
}

.cn-hero__text {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.75;
  color: #4b5563;
  max-width: 680px;
}

.cn-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.cn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  padding: 14px 24px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 0.98rem;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.cn-btn:hover {
  transform: translateY(-2px);
}

.cn-btn--primary {
  background: linear-gradient(180deg, #ff912e 0%, #ef7d1a 100%);
  color: #fff;
  box-shadow: 0 12px 26px rgba(239, 125, 26, 0.28);
}

.cn-btn--primary:hover {
  background: linear-gradient(180deg, #ff8820 0%, #df6f0d 100%);
}

.cn-btn--secondary {
  background: rgba(255,255,255,0.88);
  color: #d96b08;
  border: 2px solid rgba(239, 125, 26, 0.35);
}

.cn-btn--large {
  padding: 16px 28px;
}

.cn-hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
}

.cn-card-glow {
  position: absolute;
  width: 420px;
  height: 280px;
  border-radius: 34px;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(6px);
  transform: rotate(-8deg);
  box-shadow: 0 18px 50px rgba(0,0,0,0.08);
}

.cn-hero__card {
  position: relative;
  width: 390px;
  max-width: 100%;
  border-radius: 22px;
  transform: rotate(-7deg);
  box-shadow: 0 24px 48px rgba(0,0,0,0.18);
  transition: transform 0.28s ease;
}

.cn-hero__visual:hover .cn-hero__card {
  transform: rotate(-4deg) scale(1.03);
}

.cn-benefits-section {
  padding: 46px 0 24px;
}

.cn-section-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 30px;
}

.cn-section-heading--left {
  text-align: left;
  max-width: none;
  margin: 0 0 24px;
}

.cn-section-heading h2 {
  margin: 0 0 12px;
  font-size: 2.35rem;
  line-height: 1.08;
  color: #111827;
}

.cn-section-heading p {
  margin: 0;
  color: #5b6574;
  line-height: 1.7;
  font-size: 1.04rem;
}

.cn-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.cn-benefit-card {
  background: rgba(255,255,255,0.84);
  border: 1px solid rgba(255, 186, 138, 0.38);
  border-radius: 22px;
  padding: 26px 22px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.06);
  backdrop-filter: blur(5px);
  transition: transform 0.24s ease, box-shadow 0.24s ease;
}

.cn-benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(0,0,0,0.08);
}

.cn-benefit-card__icon {
  font-size: 1.8rem;
  margin-bottom: 14px;
}

.cn-benefit-card h3 {
  margin: 0 0 10px;
  color: #111827;
  font-size: 1.15rem;
}

.cn-benefit-card p {
  margin: 0;
  color: #4b5563;
  line-height: 1.65;
  font-size: 0.98rem;
}

.cn-search-section {
  padding: 34px 0 22px;
}

.cn-search-card {
  max-width: 820px;
  margin: 0 auto;
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(255, 186, 138, 0.4);
  border-radius: 28px;
  box-shadow: 0 18px 42px rgba(0,0,0,0.08);
  backdrop-filter: blur(7px);
  padding: 36px 30px;
}

.cn-search-card__header {
  text-align: center;
  margin-bottom: 22px;
}

.cn-search-card__header h2 {
  margin: 0 0 10px;
  font-size: 2.15rem;
  line-height: 1.1;
  color: #111827;
}

.cn-search-card__header p {
  margin: 0;
  color: #6b7280;
  font-size: 1.02rem;
  line-height: 1.7;
}

.cn-search-form {
  display: flex;
  gap: 14px;
  align-items: center;
}

.cn-input {
  flex: 1;
  width: 100%;
  min-height: 58px;
  padding: 0 18px;
  border-radius: 16px;
  border: 2px solid rgba(239, 125, 26, 0.4);
  background: #fff;
  font-size: 1.05rem;
  color: #111827;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cn-input:focus {
  border-color: #ef7d1a;
  box-shadow: 0 0 0 4px rgba(239, 125, 26, 0.12);
}

.cn-search-help {
  margin-top: 12px;
  text-align: center;
  color: #6b7280;
  font-size: 0.95rem;
}

.cn-result {
  margin-top: 16px;
  border-radius: 14px;
  padding: 14px 16px;
}

.cn-cta-formulario {
  margin-top: 22px;
  display: flex;
  justify-content: center;
}

.cn-form-section {
  padding: 26px 0 10px;
}

.cn-form-card {
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(255, 186, 138, 0.4);
  border-radius: 28px;
  box-shadow: 0 18px 42px rgba(0,0,0,0.08);
  backdrop-filter: blur(7px);
  padding: 30px;
}

.cn-embed-responsive {
  position: relative;
  padding-bottom: 65%;
  height: 0;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  background: #fff;
}

.cn-embed-responsive iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 1100px) {
  .cn-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .cn-hero__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .cn-hero {
    padding: 42px 0 26px;
  }

  .cn-hero__title {
    font-size: 2.5rem;
  }

  .cn-hero__visual {
    min-height: 300px;
  }

  .cn-card-glow {
    width: 320px;
    height: 220px;
  }

  .cn-hero__card {
    width: 300px;
  }

  .cn-search-form {
    flex-direction: column;
  }

  .cn-btn--full-mobile {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .cn-benefits-grid {
    grid-template-columns: 1fr;
  }

  .cn-hero__title {
    font-size: 2.08rem;
  }

  .cn-section-heading h2,
  .cn-search-card__header h2 {
    font-size: 1.75rem;
  }

  .cn-search-card,
  .cn-form-card {
    padding: 22px 16px;
  }

  .cn-btn {
    width: 100%;
  }

  .cn-hero__actions {
    flex-direction: column;
  }
}

/* =========================================================
   INSCRIPCIONES - FULL PRO
========================================================= */

.insc-page {
  padding-bottom: 48px;
}

.insc-hero-pro {
  position: relative;
  overflow: hidden;
  padding: 54px 0 36px;
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,0.20), transparent 26%),
    radial-gradient(circle at 88% 82%, rgba(255,255,255,0.14), transparent 28%),
    linear-gradient(135deg, #fff4ea 0%, #ffe0c0 46%, #ffb973 100%);
}

.insc-hero-pro__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 36px;
  align-items: center;
}

.insc-badge {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.82);
  color: #d96b08;
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 16px;
}

.insc-badge--dark {
  background: rgba(0,0,0,0.06);
  color: #b45309;
}

.insc-hero-pro__title {
  margin: 0 0 16px;
  font-size: 3.15rem;
  line-height: 1.03;
  font-weight: 800;
  color: #111827;
}

.insc-hero-pro__lead {
  color: #374151;
  font-size: 1.08rem;
  line-height: 1.72;
  margin-bottom: 22px;
}

.insc-hero-pro__lead p {
  margin: 0 0 12px;
}

.insc-hero-pro__datebox {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(255, 186, 138, 0.42);
  box-shadow: 0 10px 26px rgba(0,0,0,0.05);
  margin-bottom: 18px;
}

.insc-date-pill {
  font-size: 0.84rem;
  color: #b45309;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.insc-check-panel {
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(255, 186, 138, 0.38);
  border-radius: 24px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.06);
  backdrop-filter: blur(5px);
  padding: 20px 22px;
  margin-bottom: 18px;
}

.insc-check-panel .checklist {
  margin: 0;
}

.insc-check-panel .checklist li {
  margin-bottom: 10px;
}

.insc-note {
  color: #374151;
  line-height: 1.68;
  margin-bottom: 24px;
}

.insc-btn-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 800;
  transition: transform .22s ease, box-shadow .22s ease;
}

.insc-btn-chip:hover {
  transform: translateY(-2px);
}

.insc-save-btn {
  margin-top: 18px;
}

.insc-hero-pro__visual {
  display: flex;
  justify-content: center;
}

.insc-flyer-card {
  position: relative;
  width: 100%;
  max-width: 430px;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 22px 48px rgba(0,0,0,0.16);
  border: 1px solid rgba(255,255,255,0.24);
}

.insc-flyer-card__img {
  margin: 0;
  line-height: 0;
}

.insc-flyer-card__img img,
.insc-flyer-card__img picture {
  display: block;
  width: 100%;
}

.insc-flyer-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
  padding: 18px 18px 24px;
  pointer-events: none;
}

.insc-flyer-card__title {
  color: #fff;
  font-weight: 900;
  font-size: 2rem;
  line-height: 1.05;
  text-shadow: 0 2px 10px rgba(0,0,0,0.28);
  margin-bottom: 12px;
}

.insc-flyer-card__dates {
  color: #0f172a;
  font-size: 1.05rem;
  font-weight: 900;
  margin-bottom: 12px;
  text-shadow: 0 1px 4px rgba(255,255,255,0.38);
}

.insc-flyer-card__cta {
  color: #7cff42;
  font-size: 1rem;
  font-weight: 900;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.insc-cards-pro {
  padding: 44px 0 26px;
}

.insc-section-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 28px;
}

.insc-section-head h2 {
  margin: 0 0 10px;
  font-size: 2.3rem;
  line-height: 1.08;
  color: #111827;
}

.insc-section-head p {
  margin: 0;
  color: #5b6574;
  line-height: 1.68;
  font-size: 1.02rem;
}

.insc-cards-pro__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.insc-card-pro {
  margin: 0;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(255, 186, 138, 0.34);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,0.06);
  transition: transform .22s ease, box-shadow .22s ease;
}

.insc-card-pro:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}

.insc-card-pro img {
  display: block;
  width: 100%;
}

.insc-card-pro figcaption {
  padding: 16px 18px 18px;
  font-size: 1rem;
  font-weight: 800;
  color: #1f2937;
}

.insc-calendar-pro {
  padding: 30px 0 10px;
}

.insc-calendar-pro__card {
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(255, 186, 138, 0.38);
  border-radius: 28px;
  box-shadow: 0 18px 42px rgba(0,0,0,0.07);
  backdrop-filter: blur(6px);
  padding: 26px;
}

.insc-calendar-pro__figure {
  margin: 0;
}

.insc-calendar-pro__figure img {
  display: block;
  width: 100%;
  border-radius: 18px;
}

@media (max-width: 1100px) {
  .insc-cards-pro__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .insc-hero-pro__grid {
    grid-template-columns: 1fr;
  }

  .insc-hero-pro {
    padding: 42px 0 28px;
  }

  .insc-hero-pro__title {
    font-size: 2.45rem;
  }

  .insc-flyer-card {
    max-width: 360px;
  }
}

@media (max-width: 640px) {
  .insc-cards-pro__grid {
    grid-template-columns: 1fr;
  }

  .insc-hero-pro__title,
  .insc-section-head h2 {
    font-size: 1.95rem;
  }

  .insc-btn-chip {
    width: 100%;
  }

  .insc-calendar-pro__card {
    padding: 16px;
  }
}

/* =========================================================
   BECAS - UNIFICADO PRO
========================================================= */

.becas-page {
  padding-bottom: 48px;
}

.becas-hero-unificado {
  padding: 54px 0 26px;
}

.becas-shell {
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(255, 186, 138, 0.28);
  border-radius: 30px;
  box-shadow: 0 20px 46px rgba(0,0,0,0.07);
  backdrop-filter: blur(6px);
  overflow: hidden;
}

.becas-shell__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 30px;
  align-items: center;
  padding: 34px;
}

.becas-badge {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.82);
  color: #d96b08;
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 16px;
}

.becas-badge--dark {
  background: rgba(0,0,0,0.06);
  color: #b45309;
}

.becas-shell__title {
  margin: 0 0 18px;
  font-size: 3rem;
  line-height: 1.03;
  font-weight: 800;
  color: #111827;
}

.becas-shell__intro {
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(255, 186, 138, 0.30);
  border-left: 6px solid #ef7d1a;
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.05);
  margin-bottom: 16px;
}

.becas-shell__intro,
.becas-shell__note {
  color: #374151;
  font-size: 1.04rem;
  line-height: 1.75;
}

.becas-shell__intro p,
.becas-shell__note p {
  margin: 0 0 14px;
}

.becas-shell__note {
  color: #4b5563;
  font-style: italic;
}

.becas-shell__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.becas-image-card {
  width: 100%;
  max-width: 410px;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(255, 186, 138, 0.34);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 18px 38px rgba(0,0,0,0.12);
}

.becas-image-card img {
  display: block;
  width: 100%;
}

/* LISTA */
.becas-list-section {
  padding: 8px 0 10px;
}

.becas-list-card {
  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(255, 186, 138, 0.30);
  border-radius: 28px;
  box-shadow: 0 18px 42px rgba(0,0,0,0.07);
  backdrop-filter: blur(6px);
  padding: 28px;
}

.becas-list-card__head {
  margin-bottom: 20px;
}

.becas-list-card__head h2 {
  margin: 0 0 8px;
  font-size: 2rem;
  line-height: 1.08;
  color: #111827;
}

.becas-list-card__head p {
  margin: 0;
  color: #6b7280;
  line-height: 1.65;
}

.becas-table {
  width: 100%;
}

.becas-table__head,
.becas-table__row {
  display: grid;
  grid-template-columns: 1.5fr 0.7fr 0.8fr;
  gap: 16px;
  align-items: center;
}

.becas-table__head {
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(17,24,39,0.10);
  font-size: 0.95rem;
  font-weight: 800;
  color: #6b7280;
}

.becas-table__row {
  padding: 16px 0;
  border-bottom: 1px solid rgba(17,24,39,0.08);
}

.becas-table__row:last-child {
  border-bottom: none;
}

.becas-table__name strong {
  color: #1f2937;
  font-size: 1.06rem;
}

.becas-state-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.92rem;
  white-space: nowrap;
}

.becas-state-pill--on {
  background: #dff7df;
  color: #227a35;
}

.becas-state-pill--off {
  background: #fde2e2;
  color: #c53030;
}

.becas-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ff912e 0%, #ef7d1a 100%);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(239, 125, 26, 0.22);
  transition: transform .22s ease, box-shadow .22s ease;
}

.becas-action-btn:hover {
  transform: translateY(-2px);
}

.becas-action-btn--disabled {
  background: #ece7df;
  color: #9b9388;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.becas-save-btn {
  margin-top: 20px;
}

@media (max-width: 900px) {
  .becas-shell__grid {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .becas-shell__title {
    font-size: 2.3rem;
  }

  .becas-image-card {
    max-width: 340px;
  }

  .becas-table__head,
  .becas-table__row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .becas-table__head {
    display: none;
  }

  .becas-table__row {
    padding: 18px 0;
  }
}

@media (max-width: 640px) {
  .becas-shell__title,
  .becas-list-card__head h2 {
    font-size: 1.9rem;
  }

  .becas-list-card {
    padding: 20px 16px;
  }
}

/* =========================================================
   TRAMITES PRO
========================================================= */

.trm-head {
  margin-bottom: 20px;
}

.trm-title {
  font-size: 2.6rem;
  font-weight: 800;
  color: #111827;
}

.trm-sub {
  color: #6b7280;
  font-size: 1.1rem;
}

/* aviso */
.trm-notice {
  background: rgba(255,255,255,0.75);
  border-left: 6px solid #ef7d1a;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 24px;
}

/* cards */
.trm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.trm-card {
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(255, 186, 138, 0.28);
  border-radius: 16px;
  padding: 18px;
  font-weight: 700;
  color: #1f2937;
  box-shadow: 0 8px 18px rgba(0,0,0,0.04);
}

/* pasos pro */
.trm-steps-pro {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.trm-step {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  padding: 14px;
  border-radius: 14px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.05);
}

.trm-step span {
  background: #ef7d1a;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* tabla */
.trm-table {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}

.trm-table th {
  background: #f9fafb;
}

.trm-table td,
.trm-table th {
  padding: 14px;
}

/* botones */
.trm-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.trm-btn {
  padding: 14px 18px;
  border-radius: 12px;
  background: #ece7df;
  text-decoration: none;
  font-weight: 700;
}

.trm-btn--primary {
  background: linear-gradient(180deg, #ff912e, #ef7d1a);
  color: #fff;
}

/* FAQ */
.trm-qa {
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
}

.trm-qa summary {
  font-weight: 700;
  cursor: pointer;
}

/* =========================================================
   HERRAMIENTAS VIRTUALES - HERO PROPIO
========================================================= */

.hv-hero {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(255, 186, 138, 0.26);
  box-shadow: 0 16px 36px rgba(0,0,0,0.06);
}

.hv-hero__img {
  line-height: 0;
}

.hv-hero__img picture,
.hv-hero__img img {
  display: block;
  width: 100%;
  height: auto;
}

.hv-hero__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 24px;
  background: linear-gradient(to top, rgba(0,0,0,0.42), rgba(0,0,0,0.06));
}

.hv-hero__title {
  margin: 0 0 8px;
  color: #fff;
  font-size: 2.5rem;
  line-height: 1.05;
  font-weight: 900;
  text-shadow: 0 3px 14px rgba(0,0,0,0.28);
}

.hv-hero__lead {
  margin: 0;
  color: rgba(255,255,255,0.96);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 760px;
}

@media (max-width: 768px) {
  .hv-hero__body {
    padding: 18px 16px;
  }

  .hv-hero__title {
    font-size: 1.7rem;
  }

  .hv-hero__lead {
    font-size: 0.95rem;
  }
}

/* =========================================================
   BIBLIOTECA VIRTUAL SOLIDARIA - HERO PROPIO
========================================================= */

.bvs-hero {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(255, 186, 138, 0.26);
  box-shadow: 0 16px 36px rgba(0,0,0,0.06);
}

.bvs-hero__img {
  line-height: 0;
}

.bvs-hero__img picture,
.bvs-hero__img img {
  display: block;
  width: 100%;
  height: auto;
}

.bvs-hero__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 24px;
  background: linear-gradient(to top, rgba(0,0,0,0.42), rgba(0,0,0,0.06));
}

.bvs-hero__title {
  margin: 0 0 8px;
  color: #fff;
  font-size: 2.5rem;
  line-height: 1.05;
  font-weight: 900;
  text-shadow: 0 3px 14px rgba(0,0,0,0.28);
}

.bvs-hero__lead {
  margin: 0;
  color: rgba(255,255,255,0.96);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 760px;
}

@media (max-width: 768px) {
  .bvs-hero__body {
    padding: 18px 16px;
  }

  .bvs-hero__title {
    font-size: 1.7rem;
  }

  .bvs-hero__lead {
    font-size: 0.95rem;
  }
}

/* =========================================================
   CONTACTO - PRO
========================================================= */

.contact-page {
  padding: 42px 0 56px;
}

.contact-hero {
  max-width: 760px;
  margin-bottom: 28px;
}

.contact-badge {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.82);
  color: #d96b08;
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 14px;
}

.contact-title {
  margin: 0 0 10px;
  font-size: 3rem;
  line-height: 1.03;
  font-weight: 800;
  color: #111827;
}

.contact-subtitle {
  margin: 0;
  color: #6b7280;
  font-size: 1.06rem;
  line-height: 1.7;
}

.contact-section {
  margin-top: 10px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: start;
}

.contact-form-card,
.contact-whatsapp-card {
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(255, 186, 138, 0.30);
  border-radius: 28px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.06);
  backdrop-filter: blur(6px);
}

.contact-form-card {
  padding: 28px;
}

.contact-form-card__title {
  margin: 0 0 20px;
  font-size: 1.6rem;
  line-height: 1.1;
  color: #111827;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-form label {
  font-weight: 700;
  color: #1f2937;
  margin-top: 2px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 2px solid rgba(239, 125, 26, 0.18);
  background: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 1rem;
  color: #111827;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #ef7d1a;
  box-shadow: 0 0 0 4px rgba(239, 125, 26, 0.10);
}

.contact-form textarea {
  resize: vertical;
  min-height: 150px;
}

.contact-submit-btn {
  margin-top: 6px;
  align-self: flex-start;
  border: none;
  border-radius: 14px;
  padding: 14px 22px;
  background: linear-gradient(180deg, #ff912e 0%, #ef7d1a 100%);
  color: #fff;
  font-weight: 800;
  font-size: 0.98rem;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(239, 125, 26, 0.22);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.contact-submit-btn:hover {
  transform: translateY(-2px);
}

.contact-whatsapp-card {
  padding: 28px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-whatsapp-card__icon-wrap {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.contact-whatsapp-card__icon {
  width: 42px;
  height: 42px;
  display: block;
}

.contact-whatsapp-card__title {
  margin: 0 0 10px;
  font-size: 1.45rem;
  line-height: 1.15;
  color: #111827;
}

.contact-whatsapp-card__text {
  margin: 0 0 20px;
  color: #6b7280;
  line-height: 1.7;
  font-size: 1rem;
}

.contact-whatsapp-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 14px;
  background: linear-gradient(180deg, #33d06c 0%, #22b357 100%);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(34,179,87,0.18);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.contact-whatsapp-card__btn:hover {
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .contact-title {
    font-size: 2.3rem;
  }
}

@media (max-width: 640px) {
  .contact-page {
    padding: 30px 0 42px;
  }

  .contact-title {
    font-size: 1.95rem;
  }

  .contact-form-card,
  .contact-whatsapp-card {
    padding: 20px 16px;
  }

  .contact-submit-btn,
  .contact-whatsapp-card__btn {
    width: 100%;
  }
}

/* =========================================================
   BOTONES GLOBALES NORMALIZADOS
========================================================= */

/* Base compartida para botones heredados desde BD */
.btn-insc,
.btn-unite,
.btn-beca,
.becas-action-btn,
.insc-btn-chip,
.trm-btn,
.contact-submit-btn,
.contact-whatsapp-card__btn,
.cn-btn,
.btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 0.98rem;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    opacity 0.22s ease;
  box-sizing: border-box;
  cursor: pointer;
  white-space: nowrap;
}

.btn-insc:hover,
.btn-unite:hover,
.btn-beca:hover,
.becas-action-btn:hover,
.insc-btn-chip:hover,
.trm-btn:hover,
.contact-submit-btn:hover,
.contact-whatsapp-card__btn:hover,
.cn-btn:hover,
.btn-hero:hover {
  transform: translateY(-2px);
}

/* =========================
   INSCRIPCIONES
========================= */
.btn-insc {
  background: linear-gradient(180deg, #ff912e 0%, #ef7d1a 100%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(239, 125, 26, 0.22);
}

.btn-insc:hover {
  background: linear-gradient(180deg, #ff8820 0%, #df6f0d 100%);
  color: #fff;
}

.btn-unite {
  background: linear-gradient(180deg, #33d06c 0%, #22b357 100%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(34,179,87,0.18);
}

.btn-unite:hover {
  background: linear-gradient(180deg, #2ec764 0%, #1ca24d 100%);
  color: #fff;
}



/* =========================================================
   INSCRIPCIONES - ESTADO ABIERTA / CERRADA
========================================================= */

.insc-status-alert {
  margin: 0 0 18px;
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff1f1 0%, #ffe3e3 100%);
  border: 1px solid #f5b5b5;
  box-shadow: 0 10px 24px rgba(185, 28, 28, 0.08);
  color: #7f1d1d;
}

.insc-status-alert__badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #b91c1c;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.insc-status-alert strong {
  color: #991b1b;
}

.insc-status-ok {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #e8f8ec;
  border: 1px solid #b7e3c0;
  color: #166534;
  font-weight: 800;
}

.insc-status-ok__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
}

.insc-page--cerrada .insc-hero-pro {
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,0.20), transparent 26%),
    radial-gradient(circle at 88% 82%, rgba(255,255,255,0.12), transparent 28%),
    linear-gradient(135deg, #fff7f2 0%, #ffe8d8 46%, #ffd1b2 100%);
}

.insc-page--cerrada .insc-hero-pro__title {
  color: #1f2937;
}

.insc-page--cerrada .insc-hero-pro__datebox.is-closed {
  background: rgba(255,255,255,0.92);
  border: 1px solid #f3c29d;
  box-shadow: 0 10px 24px rgba(0,0,0,0.04);
}

.insc-page--cerrada .insc-date-pill {
  color: #c2410c;
}

.insc-page--cerrada .insc-check-panel {
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(255, 186, 138, 0.30);
}

.insc-page--cerrada .insc-links-pro.is-closed .insc-btn-chip {
  opacity: 0.92;
  box-shadow: none;
}

.insc-page--cerrada .insc-flyer-card {
  filter: saturate(.92);
}

.insc-page--cerrada .insc-flyer-card::after {
  content: "INSCRIPCIONES CERRADAS";
  position: absolute;
  top: 18px;
  right: -46px;
  transform: rotate(32deg);
  background: #b91c1c;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: .06em;
  padding: 10px 56px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  z-index: 3;
}

@media (max-width: 640px) {
  .insc-status-alert {
    padding: 14px;
    border-radius: 16px;
  }

  .insc-page--cerrada .insc-flyer-card::after {
    font-size: 0.68rem;
    padding: 8px 42px;
    right: -38px;
  }
}


/* =========================
   BECAS
========================= */
.btn-beca {
  min-width: 150px;
}

.btn-beca--activa {
  background: linear-gradient(180deg, #ff912e 0%, #ef7d1a 100%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(239, 125, 26, 0.22);
}

.btn-beca--activa:hover {
  background: linear-gradient(180deg, #ff8820 0%, #df6f0d 100%);
  color: #fff;
}

.btn-beca--off {
  background: #ece7df;
  color: #9b9388;
  border-color: rgba(80, 60, 40, 0.06);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.95;
}

/* =========================
   CONTENEDORES DE BOTONES
========================= */
.insc-links-pro,
.becas-links-pro,
.trm-btns,
.hero-ee__buttons,
.cn-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* =========================
   MOBILE
========================= */
@media (max-width: 640px) {
  .btn-insc,
  .btn-unite,
  .btn-beca,
  .becas-action-btn,
  .insc-btn-chip,
  .trm-btn,
  .contact-submit-btn,
  .contact-whatsapp-card__btn,
  .cn-btn,
  .btn-hero {
    width: 100%;
  }

  .insc-links-pro,
  .becas-links-pro,
  .trm-btns,
  .hero-ee__buttons,
  .cn-hero__actions {
    flex-direction: column;
  }
}

/* =========================================
   ESTADO DEL CICLO - VERSION MINIMAL
========================================= */

.insc-admin-state-box{
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid #f0caca;
  background: #fff8f8;
}

.insc-admin-state-box.is-open{
  border-color: #bfe5c8;
  background: #f4fff7;
}

.insc-admin-state-box.is-closed{
  border-color: #f3caca;
  background: #fff7f7;
}

.insc-admin-state-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.insc-admin-state-head h4{
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #132238;
}

.insc-admin-state-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  white-space: nowrap;
}

.insc-admin-state-pill.is-open{
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.insc-admin-state-pill.is-closed{
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.insc-admin-state-form{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* switch base */
.insc-switch{
  position: relative;
  display: inline-block;
}

.insc-switch input{
  opacity: 0;
  width: 0;
  height: 0;
}

.insc-switch-slider{
  position: relative;
  display: block;
  cursor: pointer;
  background: #d1d5db;
  border-radius: 999px;
  transition: .25s ease;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.15);
}

.insc-switch-slider::before{
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #fff;
  transition: .25s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

/* tamaño chico */
.insc-switch--small{
  width: 52px;
  height: 30px;
}

.insc-switch--small .insc-switch-slider{
  width: 52px;
  height: 30px;
}

.insc-switch--small .insc-switch-slider::before{
  width: 22px;
  height: 22px;
  left: 4px;
  top: 4px;
}

/* estado cerrado = rojo */
.insc-admin-state-box.is-closed .insc-switch-slider{
  background: #ef4444;
}

/* estado abierto = verde */
.insc-admin-state-box.is-open .insc-switch-slider{
  background: #22c55e;
}

.insc-switch input:checked + .insc-switch-slider::before{
  transform: translateX(22px);
}

/* =========================================================
   CALENDARIO - MEJORAS NUEVAS
========================================================= */

/* contenedor general de filtros */
.cal-filters-wrap{
  margin-bottom: 14px;
}

/* desktop */
.cal-filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* mobile menu oculto en desktop */
.cal-mobile-filter{
  display:none;
}

/* Foto del calendario académico */
.cal-academic-photo{
  margin-top: 22px;
  margin-bottom: 10px;
}

.cal-academic-photo__card{
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(255, 186, 138, 0.35);
  border-radius: 24px;
  box-shadow: 0 14px 34px rgba(0,0,0,.06);
  padding: 20px;
}

.cal-academic-photo__head{
  margin-bottom: 14px;
}

.cal-academic-photo__head h2{
  margin: 0 0 6px;
  font-size: 1.6rem;
  color: #1f2937;
}

.cal-academic-photo__head p{
  margin: 0;
  color: #6b7280;
  line-height: 1.6;
}

.cal-academic-photo__figure{
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #f1dfd2;
  background: #fff;
}

.cal-academic-photo__figure img{
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 640px){

  /* ocultar chips clásicos */
  .cal-filters{
    display:none;
  }

  /* mostrar menú mobile */
  .cal-mobile-filter{
    display:block;
    position: relative;
    margin-bottom: 12px;
  }

  .cal-mobile-filter__toggle{
    width: 100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding: 12px 14px;
    border: 1px solid #ead9ca;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,.05);
    cursor:pointer;
    font-weight:700;
    color:#1f2937;
  }

  .cal-mobile-filter__label{
    flex:1;
    text-align:left;
    font-size: 14px;
    line-height: 1.35;
  }

  .cal-mobile-filter__label strong{
    color: #e6782a;
  }

  .cal-mobile-filter__icon{
    width: 20px;
    min-width: 20px;
    display:flex;
    flex-direction:column;
    gap:4px;
  }

  .cal-mobile-filter__icon span{
    display:block;
    width:100%;
    height:2px;
    border-radius:999px;
    background:#e6782a;
  }

  .cal-mobile-filter__menu{
    position:absolute;
    top: calc(100% + 8px);
    left:0;
    right:0;
    z-index:30;
    background:#fff;
    border:1px solid #ead9ca;
    border-radius:16px;
    box-shadow:0 14px 28px rgba(0,0,0,.10);
    padding:8px;
  }

  .cal-mobile-option{
    width:100%;
    text-align:left;
    border:0;
    background:transparent;
    padding:12px 12px;
    border-radius:12px;
    font-weight:700;
    color:#1f2937;
    cursor:pointer;
  }

  .cal-mobile-option:hover{
    background:#fff3eb;
  }

  .cal-mobile-option.is-active{
    background:#fff1e3;
    color:#e6782a;
  }

  /* más aire entre calendario y foto */
  .cal-academic-photo{
    margin-top: 18px;
  }

  .cal-academic-photo__card{
    padding: 14px;
    border-radius: 18px;
  }

  .cal-academic-photo__head h2{
    font-size: 1.25rem;
  }
}

/* ===== Footer redes: iconos corregidos ===== */
.social-giant .icon-wrap{
  position: relative;
  overflow: hidden;
}

.social-giant svg{
  width: 48px;
  height: 48px;
  display: block;
  fill: #fff;
}

/* Instagram y WhatsApp un toque más grandes para que se lea mejor el detalle */
.social-giant.ig svg,
.social-giant.wa svg{
  width: 50px;
  height: 50px;
}

.social-giant span{
  font-size: 15px;
  font-weight: 700;
}

/* ===== Footer mobile más prolijo ===== */
@media (max-width: 640px){

  .social-giant-grid{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .social-giant{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    min-height: 64px;
    padding: 12px 14px;
    border-radius: 14px;
  }

  .social-giant .icon-wrap{
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .social-giant svg{
    width: 26px;
    height: 26px;
  }

  .social-giant.ig svg,
  .social-giant.wa svg{
    width: 28px;
    height: 28px;
  }

  .social-giant span{
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
  }

  .footer-social-card{
    padding: 18px 12px 14px;
  }

  .footer-social-card h2{
    font-size: 1.15rem;
    line-height: 1.2;
    margin-bottom: 8px;
  }

  .footer-social-card p{
    font-size: .95rem;
    line-height: 1.35;
    margin-bottom: 14px;
  }
}
/* =========================================
   CTA EMPRENDIMIENTOS
========================================= */
.cn-commerce-section{
  padding: 8px 0 36px;
}

.cn-commerce-card{
  max-width: 1100px;
  margin: 0 auto;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(239,125,26,0.16);
  border-radius: 32px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
  padding: 36px 32px;
  text-align: center;
}

.cn-commerce-card__header{
  max-width: 760px;
  margin: 0 auto 22px;
}

.cn-commerce-card__header h2{
  margin: 12px 0 10px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08;
  color: #111827;
}

.cn-commerce-card__header p{
  margin: 0;
  color: #5b6574;
  font-size: 1.05rem;
  line-height: 1.75;
}

.cn-commerce-card__content{
  max-width: 820px;
  margin: 0 auto;
}

.cn-commerce-card__benefits{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.cn-commerce-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff7ef;
  border: 1px solid rgba(239,125,26,0.18);
  color: #b45309;
  font-weight: 700;
  font-size: 0.95rem;
}

.cn-commerce-card__text{
  margin: 0 auto 22px;
  max-width: 700px;
  color: #5b6574;
  line-height: 1.75;
  font-size: 1rem;
}

.cn-commerce-card__actions{
  display: flex;
  justify-content: center;
}

@media (max-width: 768px){
  .cn-commerce-card{
    padding: 24px 18px;
    border-radius: 24px;
  }

  .cn-commerce-card__benefits{
    flex-direction: column;
  }

  .cn-commerce-card__actions .cn-btn{
    width: 100%;
  }
}
/* =========================================
   EMPRENDIMIENTOS
========================================= */

.cn-emprende-page{
  padding-bottom: 52px;
}

.cn-emprende-hero{
  padding: 34px 0 18px;
}

.cn-emprende-hero__box{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border-radius: 32px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.24), transparent 28%),
    radial-gradient(circle at 86% 82%, rgba(255,255,255,0.16), transparent 30%),
    linear-gradient(135deg, #fff7f1 0%, #ffe7d1 52%, #ffc98f 100%);
  border: 1px solid rgba(239,125,26,0.18);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.cn-emprende-hero__inner{
  padding: 42px 38px;
}

.cn-emprende-hero__copy{
  max-width: 860px;
}

.cn-emprende-hero__box h1{
  margin: 10px 0 14px;
  font-size: clamp(2.3rem, 4vw, 3.5rem);
  line-height: 1.03;
  color: #111827;
}

.cn-emprende-hero__lead{
  max-width: 800px;
  margin: 0 0 12px;
  font-size: 1.08rem;
  line-height: 1.78;
  color: #374151;
}

.cn-emprende-hero__text{
  max-width: 760px;
  margin: 0;
  font-size: 1rem;
  line-height: 1.74;
  color: #5b6574;
}

.cn-emprende-hero__mini{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.cn-emprende-hero__mini span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(239,125,26,0.16);
  color: #b45309;
  font-weight: 800;
  font-size: 0.93rem;
}

.cn-emprende-benefits{
  padding-top: 12px;
  padding-bottom: 14px;
}

.cn-emprende-form-section{
  padding: 12px 0 40px;
}

.cn-emprende-form-card{
  max-width: 980px;
  margin: 0 auto;
  padding: 34px 30px;
  border-radius: 32px;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(239,125,26,0.14);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.cn-emprende-form{
  display: block;
  margin: 0;
}

.cn-form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.cn-field{
  display: flex !important;
  flex-direction: column !important;
  gap: 8px;
  min-width: 0;
}

.cn-field--full{
  grid-column: 1 / -1;
}

.cn-field label{
  display: block !important;
  margin: 0 !important;
  font-weight: 800;
  font-size: 0.98rem;
  line-height: 1.3;
  color: #1f2937;
}

.cn-field input,
.cn-field select{
  display: block !important;
  width: 100% !important;
  min-height: 56px;
  height: 56px;
  margin: 0 !important;
  padding: 0 16px !important;
  border-radius: 18px;
  border: 2px solid rgba(239,125,26,0.16);
  background: #fff;
  color: #111827;
  font-size: 1rem;
  outline: none;
  box-sizing: border-box;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.cn-field input::placeholder{
  color: #9ca3af;
}

.cn-field input:focus,
.cn-field select:focus{
  border-color: #ef7d1a;
  box-shadow: 0 0 0 4px rgba(239,125,26,0.10);
}

.cn-emprende-form__footer{
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(239,125,26,0.12);
}

.cn-emprende-form__note{
  margin: 0 0 18px;
  color: #5b6574;
  line-height: 1.75;
  font-size: 1rem;
}

.cn-emprende-form__actions{
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}

.cn-emprende-form__actions .cn-btn{
  width: auto;
  min-width: 320px;
}

@media (max-width: 768px){
  .cn-emprende-hero__inner,
  .cn-emprende-form-card{
    padding: 24px 18px;
  }

  .cn-emprende-hero__box,
  .cn-emprende-form-card{
    border-radius: 24px;
  }

  .cn-form-grid{
    grid-template-columns: 1fr;
  }

  .cn-emprende-hero__mini{
    flex-direction: column;
  }

  .cn-emprende-form__actions .cn-btn{
    width: 100%;
    min-width: 0;
  }
}

.cn-form-alert{
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 16px;
  font-weight: 700;
  line-height: 1.5;
  border: 1px solid transparent;
}

.cn-form-alert--success{
  background: #ecfdf3;
  color: #166534;
  border-color: #bbf7d0;
}

.cn-form-alert--error{
  background: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}

.cn-table {
  width: 100%;
  border-collapse: collapse;
}

.cn-table th,
.cn-table td {
  padding: 12px;
  border-bottom: 1px solid #eee;
  text-align: left;
}

.cn-status {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.cn-status--nuevo {
  background: #fff7ed;
  color: #9a3412;
}

.cn-status--contactado {
  background: #ecfdf3;
  color: #166534;
}

.cn-status--descartado {
  background: #fef2f2;
  color: #991b1b;
}

/* =========================================================
   EMPRENDIMIENTOS - PANEL INTERNO
========================================================= */

.emprende-filtros{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(239,125,26,.12);
  border-radius: 18px;
  padding: 18px;
}

.emprende-filtros__grid{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:14px;
  align-items:end;
}

.emprende-filtros__item{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.emprende-filtros__item label{
  font-weight:700;
  color:#1f2937;
  font-size:14px;
}

.emprende-filtros__item input,
.emprende-filtros__item select{
  width:100%;
  min-height:44px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  background:#fff;
  box-sizing:border-box;
}

.emprende-filtros__actions{
  display:flex;
  gap:10px;
  margin-top:14px;
  flex-wrap:wrap;
}

.emprende-check{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  color:#374151;
}

.emprende-check--inline{
  min-height:44px;
}

.emprende-table td{
  vertical-align:top;
}

.emprende-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.emprende-badge--gestion-nuevo{
  background:#fff7ed;
  color:#c2410c;
}

.emprende-badge--gestion-visto{
  background:#eff6ff;
  color:#1d4ed8;
}

.emprende-badge--gestion-contactado{
  background:#ecfdf3;
  color:#166534;
}

.emprende-badge--gestion-descartado{
  background:#fef2f2;
  color:#991b1b;
}

.emprende-badge--acuerdo-pendiente{
  background:#f3f4f6;
  color:#4b5563;
}

.emprende-badge--acuerdo-acordado{
  background:#dcfce7;
  color:#166534;
}

.emprende-badge--acuerdo-sin_acuerdo{
  background:#fee2e2;
  color:#b91c1c;
}

.emprende-badge--visible{
  background:#dcfce7;
  color:#166534;
}

.emprende-badge--hidden{
  background:#e5e7eb;
  color:#4b5563;
}

.emprende-mini-form{
  display:grid;
  gap:8px;
  min-width:220px;
}

.emprende-mini-form select,
.emprende-mini-form input[type="text"]{
  width:100%;
  min-height:38px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:8px 10px;
  font-size:13px;
  box-sizing:border-box;
  background:#fff;
}

@media (max-width: 980px){
  .emprende-filtros__grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 640px){
  .emprende-filtros__grid{
    grid-template-columns:1fr;
  }

  .emprende-filtros{
    padding:14px;
  }
}

/* =========================================================
   EMPRENDIMIENTOS - PANEL COMPACTO
========================================================= */

.emprende-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.emprende-badge--gestion-nuevo{
  background:#fff7ed;
  color:#c2410c;
}

.emprende-badge--gestion-visto{
  background:#eff6ff;
  color:#1d4ed8;
}

.emprende-badge--gestion-contactado{
  background:#ecfdf3;
  color:#166534;
}

.emprende-badge--gestion-descartado{
  background:#fef2f2;
  color:#991b1b;
}

.emprende-badge--acuerdo-pendiente{
  background:#f3f4f6;
  color:#4b5563;
}

.emprende-badge--acuerdo-acordado{
  background:#dcfce7;
  color:#166534;
}

.emprende-badge--acuerdo-sin_acuerdo{
  background:#fee2e2;
  color:#b91c1c;
}

.emprende-badge--visible{
  background:#dcfce7;
  color:#166534;
}

.emprende-badge--hidden{
  background:#e5e7eb;
  color:#4b5563;
}

.emprende-filtros{
  background: #fffaf5;
  border: 1px solid #ead9ca;
  border-radius: 20px;
  padding: 18px;
}

.emprende-filtros__grid{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:16px;
  align-items:end;
}

.emprende-filtros__item{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.emprende-filtros__item label{
  font-weight:700;
  color:#122b49;
  font-size:14px;
}

.emprende-filtros__item input,
.emprende-filtros__item select{
  width:100%;
  min-height:46px;
  border:1px solid #cfd6df;
  border-radius:12px;
  padding:10px 14px;
  font-size:15px;
  outline:none;
  background:#fff;
}

.emprende-filtros__actions{
  margin-top:14px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.emprende-check{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  color:#374151;
}

@media (max-width: 900px){
  .emprende-filtros__grid{
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px){
  .emprende-filtros__grid{
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   COMERCIOS ADHERIDOS - COMUNIDAD NARANJA
========================================================= */

.cn-shops-section{
  padding: 18px 0 24px;
}

.cn-shops-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.cn-shop-card{
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(255, 186, 138, 0.34);
  border-radius: 24px;
  padding: 22px 20px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.06);
  transition: transform .22s ease, box-shadow .22s ease;
}

.cn-shop-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}

.cn-shop-card__top{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:14px;
}

.cn-shop-card__top h3{
  margin:0;
  font-size:1.2rem;
  line-height:1.15;
  color:#111827;
}

.cn-shop-card__category{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:max-content;
  padding:6px 10px;
  border-radius:999px;
  background:#fff1e8;
  color:#a44b11;
  font-size:12px;
  font-weight:700;
}

.cn-shop-card__discount{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:12px;
  background: linear-gradient(180deg, #ff912e 0%, #ef7d1a 100%);
  color:#fff;
  font-weight:800;
  font-size:.95rem;
  margin-bottom:12px;
}

.cn-shop-card__text{
  margin:0 0 10px;
  color:#4b5563;
  line-height:1.65;
  font-size:.97rem;
}

.cn-shop-card__social{
  margin:0;
  color:#6b7280;
  font-size:.92rem;
  line-height:1.5;
  word-break: break-word;
}

.cn-shops-empty{
  max-width: 760px;
  margin: 0 auto;
  padding: 20px 18px;
  text-align:center;
}

.cn-shops-empty p{
  margin:0;
  color:#5b6574;
  line-height:1.7;
}

@media (max-width: 980px){
  .cn-shops-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .cn-shops-grid{
    grid-template-columns: 1fr;
  }
}
.cn-shops-more{
  margin-top: 22px;
  display: flex;
  justify-content: center;
}
/* =========================================================
   DESCUENTOS - PAGINA PUBLICA
========================================================= */

.descuentos-page{
  padding-bottom: 48px;
}

.descuentos-hero{
  padding: 34px 0 18px;
}

.descuentos-hero__box{
  max-width: 980px;
  margin: 0 auto;
  padding: 34px 30px;
  border-radius: 30px;
  text-align: center;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.24), transparent 28%),
    radial-gradient(circle at 86% 82%, rgba(255,255,255,0.14), transparent 30%),
    linear-gradient(135deg, #fff7f1 0%, #ffe7d1 52%, #ffc98f 100%);
  border: 1px solid rgba(239,125,26,0.18);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.descuentos-hero__box h1{
  margin: 10px 0 12px;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.04;
  color: #111827;
}

.descuentos-hero__box p{
  max-width: 760px;
  margin: 0 auto;
  color: #5b6574;
  font-size: 1.04rem;
  line-height: 1.72;
}

.descuentos-filtros-section{
  padding: 10px 0 18px;
}

.descuentos-filtros{
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 24px;
}

.descuentos-filtros__grid{
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  gap: 14px;
  align-items: end;
}

.descuentos-filtros__item{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.descuentos-filtros__item label{
  font-weight: 800;
  color: #1f2937;
  font-size: 0.95rem;
}

.descuentos-filtros__item input,
.descuentos-filtros__item select{
  width: 100%;
  min-height: 50px;
  border: 2px solid rgba(239,125,26,0.14);
  border-radius: 14px;
  padding: 0 14px;
  background: #fff;
  font-size: 0.98rem;
  color: #111827;
  box-sizing: border-box;
  outline: none;
}

.descuentos-filtros__item input:focus,
.descuentos-filtros__item select:focus{
  border-color: #ef7d1a;
  box-shadow: 0 0 0 4px rgba(239,125,26,0.10);
}

.descuentos-filtros__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.descuentos-listado-section{
  padding: 12px 0 10px;
}

.descuentos-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.descuento-card{
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(255, 186, 138, 0.34);
  border-radius: 24px;
  padding: 22px 20px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.06);
  transition: transform .22s ease, box-shadow .22s ease;
}

.descuento-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}

.descuento-card__top{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.descuento-card__top h3{
  margin: 0;
  font-size: 1.16rem;
  line-height: 1.18;
  color: #111827;
}

.descuento-card__category{
  display: inline-flex;
  width: max-content;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff1e8;
  color: #a44b11;
  font-size: 12px;
  font-weight: 700;
}

.descuento-card__badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ff912e 0%, #ef7d1a 100%);
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  margin-bottom: 12px;
}

.descuento-card__text{
  margin: 0 0 10px;
  color: #4b5563;
  line-height: 1.65;
  font-size: .97rem;
}

.descuento-card__social{
  margin: 0;
  color: #6b7280;
  font-size: .92rem;
  line-height: 1.5;
  word-break: break-word;
}

.descuentos-empty{
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 20px;
  text-align: center;
}

.descuentos-empty h3{
  margin: 0 0 8px;
  color: #111827;
}

.descuentos-empty p{
  margin: 0;
  color: #5b6574;
  line-height: 1.7;
}

@media (max-width: 980px){
  .descuentos-filtros__grid{
    grid-template-columns: 1fr 1fr;
  }

  .descuentos-filtros__actions{
    grid-column: 1 / -1;
  }

  .descuentos-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .descuentos-hero__box,
  .descuentos-filtros{
    padding: 22px 16px;
    border-radius: 22px;
  }

  .descuentos-filtros__grid{
    grid-template-columns: 1fr;
  }

  .descuentos-filtros__actions{
    grid-column: auto;
    flex-direction: column;
  }

  .descuentos-grid{
    grid-template-columns: 1fr;
  }

  .descuentos-filtros__actions .cn-btn{
    width: 100%;
  }
}

.descuentos-back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.92rem;
  font-weight:700;
  color:#ef7d1a;
  text-decoration:none;
  margin-bottom:10px;
  transition: all .2s ease;
}

.descuentos-back:hover{
  transform: translateX(-3px);
  text-decoration: underline;
}



.descuento-card__actions{
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

.descuento-card__actions{
  margin-top: 14px;
  display: flex;
  gap: 10px;
}

/* BOTÓN */
.descuento-icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;

  background: #f3f4f6;
  color: #444;

  transition: all 0.2s ease;
}

/* ICONO */
.descuento-icon svg{
  width: 30px;
  height: 30px;
}

/* HOVER */
.descuento-icon:hover{
  transform: translateY(-3px) scale(1.05);
}

/* COLORES */
.descuento-icon.ig{
  color: #c13584;
  background: #fff0f6;
}

.descuento-icon.wa{
  color: #25D366;
  background: #ecfff3;
}

.descuento-icon.web{
  color: #667085;
  background: #f5f7fa;
}
/* =========================================================
   DESCUENTOS - PAGINA PUBLICA
========================================================= */

.descuentos-page{
  padding-bottom: 48px;
}

.descuentos-hero{
  padding: 34px 0 18px;
}

.descuentos-back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.92rem;
  font-weight:700;
  color:#ef7d1a;
  text-decoration:none;
  margin-bottom:10px;
  transition: all .2s ease;
}

.descuentos-back:hover{
  transform: translateX(-3px);
  text-decoration: underline;
}

.descuentos-hero__box{
  max-width: 980px;
  margin: 0 auto;
  padding: 34px 30px;
  border-radius: 30px;
  text-align: center;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.24), transparent 28%),
    radial-gradient(circle at 86% 82%, rgba(255,255,255,0.14), transparent 30%),
    linear-gradient(135deg, #fff7f1 0%, #ffe7d1 52%, #ffc98f 100%);
  border: 1px solid rgba(239,125,26,0.18);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.descuentos-hero__box h1{
  margin: 10px 0 12px;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.04;
  color: #111827;
}

.descuentos-hero__box p{
  max-width: 760px;
  margin: 0 auto;
  color: #5b6574;
  font-size: 1.04rem;
  line-height: 1.72;
}

.descuentos-filtros-section{
  padding: 10px 0 18px;
}

.descuentos-filtros{
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 24px;
}

.descuentos-filtros__grid{
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  gap: 14px;
  align-items: end;
}

.descuentos-filtros__item{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.descuentos-filtros__item label{
  font-weight: 800;
  color: #1f2937;
  font-size: 0.95rem;
}

.descuentos-filtros__item input,
.descuentos-filtros__item select{
  width: 100%;
  min-height: 50px;
  border: 2px solid rgba(239,125,26,0.14);
  border-radius: 14px;
  padding: 0 14px;
  background: #fff;
  font-size: 0.98rem;
  color: #111827;
  box-sizing: border-box;
  outline: none;
}

.descuentos-filtros__item input:focus,
.descuentos-filtros__item select:focus{
  border-color: #ef7d1a;
  box-shadow: 0 0 0 4px rgba(239,125,26,0.10);
}

.descuentos-filtros__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.descuentos-listado-section{
  padding: 12px 0 10px;
}

.descuentos-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.descuento-card{
  background: rgba(255,255,255,0.86);
  border: 1px solid rgba(255, 186, 138, 0.34);
  border-radius: 24px;
  padding: 22px 20px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.06);
  transition: transform .22s ease, box-shadow .22s ease;
}

.descuento-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}

.descuento-card__top{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.descuento-card__top h3{
  margin: 0;
  font-size: 1.16rem;
  line-height: 1.18;
  color: #111827;
}

.descuento-card__category{
  display: inline-flex;
  width: max-content;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff1e8;
  color: #a44b11;
  font-size: 12px;
  font-weight: 700;
}

.descuento-card__badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ff912e 0%, #ef7d1a 100%);
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  margin-bottom: 12px;
  width: max-content;
}

.descuento-card__text{
  margin: 0 0 10px;
  color: #4b5563;
  line-height: 1.65;
  font-size: .97rem;
}

.descuento-card__actions{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.descuento-icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease;
  background: #f3f4f6;
  color: #555;
  text-decoration: none;
  flex: 0 0 44px;
}

.descuento-icon:hover{
  transform: translateY(-2px);
}

.descuento-icon svg{
  width: 30px;
  height: 30px;
  display: block;
  flex: 0 0 24px;
}

/* Instagram */
.descuento-icon.ig{
  color: #c13584;
  background: #fff0f6;
}

/* WhatsApp */
.descuento-icon.wa{
  color: #25D366;
  background: #ecfff3;
}

.descuento-icon.wa svg{
  fill: currentColor;
  stroke: none;
}

/* Web */
.descuento-icon.web{
  color: #64748b;
  background: #f1f5f9;
}

.descuento-icon.web svg{
  fill: none;
  stroke: currentColor;
}
@media (max-width: 640px){
  .descuentos-listado-section .container{
    padding-left: 16px;
    padding-right: 16px;
  }

  .descuento-card{
    min-width: 0;
  }

  .descuento-card h3{
    font-size: 1.2rem;
    line-height: 1.2;
    word-break: break-word;
  }
}
.descuentos-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 980px){
  .descuentos-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .descuentos-grid{
    grid-template-columns: 1fr;
  }

  .descuento-card{
    width: 100%;
  }
}
/* =========================
   FIX MOBILE DESCUENTOS
========================= */

.descuentos-page,
.descuentos-page *{
  box-sizing: border-box;
}

.descuentos-page .container{
  width: 100%;
  max-width: 100%;
  padding-left: 16px;
  padding-right: 16px;
  overflow-x: hidden;
}

.descuentos-hero,
.descuentos-filtros-section,
.descuentos-listado-section{
  overflow-x: hidden;
}

.descuentos-hero__box,
.descuentos-filtros,
.descuento-card{
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.descuentos-filtros__grid{
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  gap: 14px;
  align-items: end;
}

.descuentos-filtros__item{
  min-width: 0;
}

.descuentos-filtros__item input,
.descuentos-filtros__item select{
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.descuentos-filtros__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.descuentos-filtros__actions .cn-btn{
  white-space: nowrap;
}

.descuentos-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.descuento-card h3,
.descuento-card p,
.descuento-card span{
  word-break: break-word;
}

/* tablet */
@media (max-width: 980px){
  .descuentos-filtros__grid{
    grid-template-columns: 1fr 1fr;
  }

  .descuentos-filtros__actions{
    grid-column: 1 / -1;
  }

  .descuentos-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* mobile */
@media (max-width: 768px){
  .descuentos-hero__box,
  .descuentos-filtros{
    padding: 20px 16px;
    border-radius: 22px;
  }

  .descuentos-filtros__grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .descuentos-filtros__actions{
    grid-column: auto;
    flex-direction: column;
  }

  .descuentos-filtros__actions .cn-btn{
    width: 100%;
  }

  .descuentos-grid{
    grid-template-columns: 1fr;
  }

  .descuento-card{
    padding: 18px 16px;
  }

  .descuento-card__actions{
    gap: 8px;
  }
}

/* =========================================
   BANNER CURSOS Y TALLERES
========================================= */
.banner-formacion-wrap {
  padding: 6px 0 14px;
}

.banner-formacion {
  position: relative;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 24px;
  align-items: center;
  text-decoration: none;
  padding: 30px 34px;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.22), transparent 28%),
    radial-gradient(circle at 84% 82%, rgba(255,255,255,0.14), transparent 30%),
    linear-gradient(135deg, #fff8f2 0%, #ffe8d3 52%, #ffd0a3 100%);
  border: 1px solid rgba(239, 125, 26, 0.18);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.banner-formacion:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px rgba(15, 23, 42, 0.10);
}

.banner-formacion__content,
.banner-formacion__visual {
  position: relative;
  z-index: 2;
}

.banner-formacion__tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.82);
  color: #c76612;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.banner-formacion__content h2 {
  margin: 0 0 12px;
  font-size: 2.2rem;
  line-height: 1.08;
  font-weight: 800;
  color: #111827;
  max-width: 620px;
}

.banner-formacion__lead {
  margin: 0 0 18px;
  max-width: 620px;
  color: #4b5563;
  font-size: 1.03rem;
  line-height: 1.7;
}

.banner-formacion__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.banner-formacion__pills span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(239, 125, 26, 0.14);
  color: #b45309;
  font-size: 0.93rem;
  font-weight: 700;
}

.banner-formacion__button {
  display: inline-block;
  background: linear-gradient(180deg, #ff912e 0%, #ef7d1a 100%);
  color: #fff;
  font-weight: 800;
  padding: 14px 22px;
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(239, 125, 26, 0.22);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.banner-formacion:hover .banner-formacion__button {
  transform: translateY(-2px);
}

.banner-formacion__visual {
  position: relative;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.banner-formacion__glow {
  position: absolute;
  width: 320px;
  height: 220px;
  border-radius: 30px;
  background: rgba(255,255,255,0.28);
  filter: blur(2px);
  transform: rotate(-8deg);
  box-shadow: 0 14px 38px rgba(239, 125, 26, 0.12);
}

.banner-formacion__card {
  position: absolute;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(239, 125, 26, 0.12);
  border-radius: 24px;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.10);
  backdrop-filter: blur(6px);
}

.banner-formacion__card--main {
  width: 270px;
  min-height: 170px;
  padding: 22px 20px;
  transform: rotate(-6deg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.banner-formacion__card--side {
  right: 10px;
  bottom: 6px;
  width: 185px;
  padding: 16px 14px;
  transform: rotate(6deg);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bf-card__icon {
  font-size: 2.2rem;
  line-height: 1;
}

.bf-card__text strong {
  display: block;
  color: #111827;
  font-size: 1.2rem;
  margin-bottom: 4px;
}

.bf-card__text small {
  display: block;
  color: #6b7280;
  font-size: 0.95rem;
  line-height: 1.5;
}

.bf-mini {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff7ef;
  color: #9a4d12;
  font-size: 0.88rem;
  font-weight: 700;
  border: 1px solid rgba(239, 125, 26, 0.10);
  box-sizing: border-box;
}

/* separador más integrado luego del banner */
.divider {
  background: transparent;
  border-top: 1px solid rgba(230, 120, 42, 0.10);
  border-bottom: 1px solid rgba(230, 120, 42, 0.10);
  padding: 18px 0 22px;
  text-align: center;
}

.divider__title {
  margin: 0;
  font-size: 21px;
  color: #1f2937;
}

/* =========================================
   RESPONSIVE BANNER FORMACION
========================================= */
@media (max-width: 991px) {
  .banner-formacion {
    grid-template-columns: 1fr;
    padding: 26px 22px;
  }

  .banner-formacion__content h2 {
    font-size: 1.95rem;
  }

  .banner-formacion__visual {
    min-height: 230px;
    margin-top: 6px;
  }

  .banner-formacion__card--main {
    width: 245px;
    min-height: 155px;
  }

  .banner-formacion__card--side {
    width: 170px;
    right: 6px;
  }
}

@media (max-width: 640px) {
  .banner-formacion {
    padding: 22px 16px;
    border-radius: 22px;
  }

  .banner-formacion__tag {
    font-size: 0.84rem;
  }

  .banner-formacion__content h2 {
    font-size: 1.7rem;
  }

  .banner-formacion__lead {
    font-size: 0.98rem;
  }

  .banner-formacion__pills {
    flex-direction: column;
    align-items: stretch;
  }

  .banner-formacion__pills span,
  .banner-formacion__button {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  .banner-formacion__visual {
    min-height: 210px;
  }

  .banner-formacion__glow {
    width: 240px;
    height: 170px;
  }

  .banner-formacion__card--main {
    width: 210px;
    min-height: 138px;
    padding: 18px 16px;
  }

  .banner-formacion__card--side {
    width: 145px;
    padding: 12px 10px;
    right: 0;
    bottom: 0;
  }

  .bf-mini {
    font-size: 0.8rem;
    padding: 8px 9px;
  }
}

/* =========================================
   CURSOS / FORMACIÓN
========================================= */
.formacion-page{
  padding-bottom: 48px;
}

.formacion-hero{
  padding: 44px 0 22px;
}

.formacion-hero__box{
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.20), transparent 28%),
    radial-gradient(circle at 84% 82%, rgba(255,255,255,0.14), transparent 30%),
    linear-gradient(135deg, #fff7f1 0%, #ffe7d1 52%, #ffc98f 100%);
  border: 1px solid rgba(239,125,26,0.18);
  border-radius: 32px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
  padding: 38px 34px;
}

.formacion-badge{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  background: rgba(255,255,255,0.85);
  color:#c76612;
  font-size:.92rem;
  font-weight:800;
  margin-bottom:14px;
}

.formacion-badge--light{
  background: rgba(255,255,255,0.18);
  color: #fff;
}

.formacion-hero__box h1{
  margin:0 0 12px;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  line-height:1.03;
  color:#111827;
}

.formacion-hero__box p{
  margin:0;
  max-width: 860px;
  font-size:1.04rem;
  line-height:1.75;
  color:#4b5563;
}

.formacion-hero__pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}

.formacion-hero__pills span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(255,255,255,0.86);
  border:1px solid rgba(239,125,26,0.12);
  color:#9a4d12;
  font-size:.92rem;
  font-weight:700;
}

.formacion-notice{
  padding: 4px 0 8px;
}

.formacion-notice__card{
  background: rgba(255,255,255,0.88);
  border-left: 6px solid #ef7d1a;
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(0,0,0,.05);
  padding: 18px 20px;
}

.formacion-notice__card strong{
  display:block;
  margin-bottom:6px;
  color:#111827;
  font-size:1rem;
}

.formacion-notice__card p{
  margin:0;
  color:#5b6574;
  line-height:1.7;
}

.formacion-destacados,
.formacion-proximamente{
  padding: 24px 0 12px;
}

.formacion-head{
  max-width: 760px;
  margin: 0 0 18px;
}

.formacion-head h2{
  margin:0 0 8px;
  font-size:2rem;
  line-height:1.08;
  color:#111827;
}

.formacion-head p{
  margin:0;
  color:#6b7280;
  line-height:1.65;
}

.formacion-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.formacion-card{
  background: rgba(255,255,255,0.92);
  border:1px solid rgba(239,125,26,0.14);
  border-radius:24px;
  box-shadow:0 14px 34px rgba(15,23,42,.06);
  padding:22px 20px;
}

.formacion-card--activa{
  border-color: rgba(239,125,26,0.22);
}

.formacion-card--empty{
  background: linear-gradient(180deg, #fffaf5 0%, #fff 100%);
}

.formacion-card__top{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.formacion-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:800;
}

.formacion-chip--tipo{
  background:#fff3e7;
  color:#b45309;
}

.formacion-chip--estado{
  background:#f3f4f6;
  color:#4b5563;
}

.formacion-chip--estado.activa{
  background:#dcfce7;
  color:#166534;
}

.formacion-card h3{
  margin:0 0 10px;
  font-size:1.18rem;
  color:#111827;
  line-height:1.2;
}

.formacion-card p{
  margin:0 0 14px;
  color:#5b6574;
  line-height:1.7;
}

.formacion-meta{
  margin:0 0 18px;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
  color:#374151;
  font-size:.95rem;
}

.formacion-actions{
  margin-top:auto;
}

.btn-formacion{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:12px 18px;
  border-radius:14px;
  font-weight:800;
  font-size:.96rem;
  line-height:1.2;
  text-decoration:none;
  border:1px solid transparent;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.btn-formacion:hover{
  transform: translateY(-2px);
}

.btn-formacion--primary{
  background: linear-gradient(180deg, #ff912e 0%, #ef7d1a 100%);
  color:#fff;
  box-shadow:0 10px 22px rgba(239,125,26,.22);
}

.btn-formacion--secondary{
  background:#fff;
  color:#d96b08;
  border-color:#ffd7bf;
}

.formacion-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.formacion-list__item{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:16px;
  align-items:center;
  background: rgba(255,255,255,0.90);
  border:1px solid rgba(239,125,26,0.12);
  border-radius:22px;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
  padding:18px 20px;
}

.formacion-list__chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:10px;
}

.formacion-list__main h3{
  margin:0 0 8px;
  font-size:1.08rem;
  color:#111827;
}

.formacion-list__main p{
  margin:0 0 10px;
  color:#5b6574;
  line-height:1.7;
}

.formacion-list__meta{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  color:#374151;
  font-size:.92rem;
}

.formacion-cta{
  padding: 28px 0 10px;
}

.formacion-cta__box{
  background: linear-gradient(135deg, #e6782a 0%, #ef7d1a 50%, #ff9c45 100%);
  border-radius:30px;
  box-shadow:0 18px 42px rgba(15,23,42,.10);
  padding:30px 28px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap:18px;
  align-items:center;
}

.formacion-cta__content h2{
  margin:0 0 10px;
  color:#fff;
  font-size:2rem;
  line-height:1.08;
}

.formacion-cta__content p{
  margin:0;
  color:#fff7ef;
  line-height:1.7;
  max-width:700px;
}

.formacion-cta__actions .btn-formacion--primary{
  background:#fff;
  color:#e6782a;
  box-shadow:none;
}

@media (max-width: 980px){
  .formacion-grid{
    grid-template-columns: 1fr 1fr;
  }

  .formacion-cta__box{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px){
  .formacion-grid{
    grid-template-columns: 1fr;
  }

  .formacion-list__item{
    grid-template-columns: 1fr;
  }

  .formacion-list__side,
  .formacion-list__side .btn-formacion,
  .formacion-actions .btn-formacion,
  .formacion-cta__actions .btn-formacion{
    width:100%;
  }

  .formacion-hero__box,
  .formacion-cta__box{
    padding:24px 18px;
    border-radius:24px;
  }

  .formacion-head h2,
  .formacion-cta__content h2{
    font-size:1.7rem;
  }

  .formacion-hero__pills{
    flex-direction:column;
  }
}


/* ===========================
   QUICK MENU / SECCIONES
   BLOQUE FINAL UNICO
   =========================== */
.quick-menu{
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 1200;
}

.quick-menu__btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  color: #fff !important;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}

.quick-menu__btn:hover{
  background: rgba(255,255,255,.26);
}

.quick-menu__btn:active{
  transform: translateY(1px);
}

.quick-menu__icon,
.quick-menu__label,
.quick-menu__caret{
  color: #fff !important;
}

.quick-menu__caret{
  font-size: 12px;
  line-height: 1;
  opacity: .9;
}

.quick-menu__dropdown{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 250px;
  background: #fff !important;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
  padding: 8px;
  z-index: 1300;
  overflow: hidden;             /* CLAVE */
  box-sizing: border-box;       /* CLAVE */
}

.quick-menu__dropdown[hidden]{
  display: none !important;
}

.quick-menu__item,
.quick-menu__dropdown a,
.quick-menu__dropdown a:link,
.quick-menu__dropdown a:visited{
  display: block !important;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  box-sizing: border-box;       /* CLAVE */
  text-decoration: none !important;
  color: #24324a !important;
  background: transparent !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.quick-menu__item:hover,
.quick-menu__dropdown a:hover,
.navbar .quick-menu__dropdown a:hover{
  background: #f4f6f8 !important;
  color: #111827 !important;
}

.quick-menu__item:focus,
.quick-menu__dropdown a:focus{
  outline: none;
  background: #f4f6f8 !important;
  color: #111827 !important;
}

@media (max-width: 900px){
  .quick-menu__btn{
    height: 38px;
    padding: 0 12px;
  }

  .quick-menu__label{
    font-size: 14px;
  }
}

@media (max-width: 640px){
  .quick-menu__btn{
    padding: 0 12px;
    gap: 6px;
  }

  .quick-menu__label{
    display: none;
  }

  .quick-menu__caret{
    display: none;
  }

  .quick-menu__dropdown{
    min-width: 220px;
  }
}

/* =========================
   FIX OVERFLOW MOBILE
   ========================= */
*,
*::before,
*::after{
  box-sizing: border-box;
}

img,
iframe,
video{
  max-width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px){

  /* evita desbordes horizontales generales */
  html, body{
    overflow-x: hidden;
  }

  /* contenedores principales */
  .container,
  .page-wrap,
  .section,
  .courses-section,
  .courses-grid,
  .course-card,
  .panel-card,
  .cta-card{
    max-width: 100%;
    min-width: 0;
  }

  /* cards */
  .course-card,
  .panel-card,
  .cta-card{
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    overflow: hidden;
  }

  /* botones dentro de cards */
  .course-card .btn,
  .panel-card .btn,
  .cta-card .btn,
  .course-card a.btn,
  .panel-card a.btn,
  .cta-card a.btn{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: block;
    box-sizing: border-box;
  }

  /* textos largos */
  .course-card *,
  .panel-card *,
  .cta-card *{
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

/* =========================================================
   CURSOS / FORMACIÓN PÚBLICA
========================================================= */

.cursos-page{
  padding-bottom: 48px;
}

.cursos-hero{
  padding: 34px 0 18px;
}

.cursos-hero__box{
  max-width: 980px;
  margin: 0 auto;
  padding: 34px 30px;
  border-radius: 30px;
  text-align: center;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,0.24), transparent 28%),
    radial-gradient(circle at 86% 82%, rgba(255,255,255,0.14), transparent 30%),
    linear-gradient(135deg, #fff7f1 0%, #ffe7d1 52%, #ffc98f 100%);
  border: 1px solid rgba(239,125,26,0.18);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.cursos-badge{
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.82);
  color: #d96b08;
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 14px;
}

.cursos-hero__box h1{
  margin: 10px 0 12px;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.04;
  color: #111827;
}

.cursos-hero__box p{
  max-width: 760px;
  margin: 0 auto;
  color: #5b6574;
  font-size: 1.04rem;
  line-height: 1.72;
}

.cursos-listado{
  padding: 12px 0 10px;
}

.cursos-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.curso-card{
  padding: 24px 22px;
  border-radius: 24px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.curso-card__badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom: 10px;
}

.curso-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

.curso-pill--tipo{
  background:#fff1e8;
  color:#a44b11;
}

.curso-pill--open{
  background:#dcfce7;
  color:#166534;
}

.curso-pill--closed{
  background:#fee2e2;
  color:#b91c1c;
}

.curso-pill--done{
  background:#e0f2fe;
  color:#0369a1;
}

.curso-pill--featured{
  background:#fef3c7;
  color:#92400e;
}

.curso-card__title{
  margin:0 0 10px;
  font-size:1.45rem;
  line-height:1.15;
  color:#111827;
}

.curso-card__desc{
  margin:0;
  color:#4b5563;
  line-height:1.68;
  font-size:1rem;
}

.curso-card__meta{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px 18px;
}

.curso-meta-item{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.curso-meta-item strong{
  font-size:.9rem;
  color:#1f2937;
}

.curso-meta-item span{
  color:#5b6574;
  line-height:1.5;
}

.curso-card__actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  margin-top: 4px;
}

.curso-cert-note{
  display:inline-block;
  color:#6b7280;
  font-size:.93rem;
  line-height:1.55;
}

.cursos-empty{
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 24px;
  text-align:center;
}

.cursos-empty h2{
  margin:0 0 8px;
  color:#111827;
}

.cursos-empty p{
  margin:0;
  color:#5b6574;
  line-height:1.7;
}

@media (max-width: 900px){
  .cursos-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px){
  .cursos-hero__box{
    padding: 24px 18px;
    border-radius: 24px;
  }

  .cursos-hero__box h1{
    font-size: 1.95rem;
  }

  .curso-card{
    padding: 20px 16px;
  }

  .curso-card__meta{
    grid-template-columns: 1fr;
  }

  .curso-card__actions{
    align-items:stretch;
  }

  .curso-card__actions .btn-insc,
  .curso-card__actions .btn-beca{
    width:100%;
  }
}