/* ====== CONVENIOS (plantilla específica) ====== */
/* Header */
.page-template-page-convenios-php .custom-header {
  background-color: white; /* solo en página convenios */
  position: absolute;
}
.page-template-page-convenios-php .nav-menu li a {
  color: #033840;
}
.page-template-page-convenios-php .nav-menu li.current-menu-item a {
  background-color: #033840 !important;
  color: white !important;
}
.page-template-page-convenios-php .nav-menu li a:hover {
  background-color: #0e00da !important;
  color: white !important;
}
.page-template-page-convenios-php .login-icon a,
.page-template-page-convenios-php .cart-icon a,
.page-template-page-convenios-php .nav-menu li a[href*="/contacto"]::before {
  color: #033840;
}
.page-template-page-convenios-php .login-icon a:hover,
.page-template-page-convenios-php .cart-icon a:hover,
.page-template-page-convenios-php .nav-menu li a[href*="/contacto"]:hover {
  background-color: #0e00da !important;
  color: white;
}

/* Hero Section */
.convenios-hero {
  background-image: url('../images/colab3.webp'); /* 👈 cámbiala si usas otra ruta */
  background-size: cover;
  background-position: center;
  min-height: 75vh; /* ocupa toda la pantalla */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
  color: white;
  position: relative;
}

.page-template-page-convenios-php .convenios-hero .hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(16, 9, 116, 0.7); /* oscuro, ajusta a gusto */
  opacity: 0.85;
  z-index: 1;
}

/* Contenido Hero */
.page-template-page-convenios-php .convenios-hero .hero-content {
  position: relative;
  z-index: 2;
  max-width: 1400px;
    margin: 0;
  text-align: center;
}

.page-template-page-convenios-php .convenios-hero h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-align: center;
}

.page-template-page-convenios-php .convenios-hero p {
  font-size: 22px;
  margin-bottom: 5rem;
  margin-top: 0.5rem;
  text-align: center;
}

.eg-convenio-intro .container {  max-width: 1200px; margin: 0 auto; }
.eg-convenio-intro h2 {   padding: 5rem 2rem 0 3rem; background-color: #fff; }
.eg-convenio-intro p {   padding: 0 3rem 0 3rem; }

/* Alerts */
.eg-alert { padding: .9rem 1rem; border-radius: 10px; margin-top: 1rem; font-weight: 600; }
.eg-alert-success { background: #e8f6f0; color: #0b6a4e; border: 1px solid #bfe6d7; }
.eg-alert-error { background: #fdecea; color: #b42318; border: 1px solid #f4c7c3; }


/* ===== Beneficios (CONVENIOS) ===== */
.page-template-page-convenios-php .beneficios-convenios-section,
.page-template-page-convenio-php  .beneficios-convenios-section{
  padding: 2rem 2rem 6rem;
  background-color: #fff;
  text-align: center;
}

.page-template-page-convenios-php .beneficios-convenios-title,
.page-template-page-convenio-php  .beneficios-convenios-title{
  font-size: 40px;
  font-weight: 500;
  margin-bottom: 3rem;
  color: #022e47;
}
.page-template-page-convenios-php .beneficios-convenios-title .highlight,
.page-template-page-convenio-php  .beneficios-convenios-title .highlight{
  color: #44dfdf;
}

.page-template-page-convenios-php .beneficios-convenios-grid,
.page-template-page-convenio-php  .beneficios-convenios-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
  gap: 1.2rem;
  max-width: 1250px;
  margin: 0 auto;
}

.page-template-page-convenios-php .beneficio-convenio-card,
.page-template-page-convenio-php  .beneficio-convenio-card{
  background-color: #fff;
  padding: 2rem .5rem;
  border-radius: 1.5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.122);
  transition: all .3s ease;
}

.page-template-page-convenios-php .icon-beneficio-convenio,
.page-template-page-convenio-php  .icon-beneficio-convenio{
  width: 70px;
  height: 70px;
  margin-bottom: 1rem;
}

.page-template-page-convenios-php .beneficio-convenio-card p,
.page-template-page-convenio-php  .beneficio-convenio-card p{
  font-size: 15px;
  color: #022e47;
  font-weight: 500;
}

.page-template-page-convenios-php .beneficio-convenio-title,
.page-template-page-convenio-php  .beneficio-convenio-title{
  margin: .2rem 0 .5rem;
  font-size: 15px;
  color: #022e47;
  font-weight: 700;
}

/* Hover */
.page-template-page-convenios-php .beneficio-convenio-card:hover,
.page-template-page-convenio-php  .beneficio-convenio-card:hover{
  background:
    radial-gradient(circle at top left, #44dfdf 10%, transparent 50%),
    radial-gradient(circle at bottom right, #44dfdf 20%, transparent 50%),
    radial-gradient(circle at center, #0e00da 10%, transparent 90%),
    #04262b;
  color: #fff;
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0,0,0,.2);
}
.page-template-page-convenios-php .beneficio-convenio-card:hover p,
.page-template-page-convenio-php  .beneficio-convenio-card:hover p,
.page-template-page-convenios-php .beneficio-convenio-card:hover .beneficio-convenio-title,
.page-template-page-convenio-php  .beneficio-convenio-card:hover .beneficio-convenio-title,
.page-template-page-convenios-php .beneficio-convenio-card:hover .icon-beneficio-convenio,
.page-template-page-convenio-php  .beneficio-convenio-card:hover .icon-beneficio-convenio{
  filter: brightness(0) invert(1);
}
/* Texto intermedio Convenios */
.page-template-page-convenios-php .convenios-intro-text,
.page-template-page-convenio-php  .convenios-intro-text {
  padding: 2rem 1rem 0;
  text-align: center;
  background: #fff;
}

.page-template-page-convenios-php .convenios-intro-text p,
.page-template-page-convenio-php  .convenios-intro-text p {
  font-size: 26px;
  font-weight: 600;
  color: #11c1bb; /* turquesa */
  max-width: 950px;
  margin: 4rem auto;
  line-height: 1.5;
}

/* ====== CONVENIOS: contenedor del form ====== */
.eg-convenio-form-wrap .container { max-width: 1100px; margin: 0 auto; }

/* Tarjeta/inputs (reutiliza tus estilos base) */

/* Ajuste proporción del aside azul vs campos */
.eg-convenio-slider .eg-form-card {
  display: grid;
  grid-template-columns: 80px 1fr; /* antes era 260px */
  border: 1px solid rgba(3,56,64,.06);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(3,56,64,.08);
  background: #fff;
}

.eg-convenio-slider .eg-form-aside {
  background: linear-gradient(135deg, #0e00da 0%, #44dfdf 100%);
  min-height: 100%;
}
.eg-convenio-slider .eg-form-fields {
  padding: 2rem 2.5rem;
}

.eg-convenio-form h3 { margin: .5rem 0 .5rem; color: #033840; }
.eg-convenio-form label { display: block; margin-bottom: 0.5rem; }
.eg-convenio-form label span { display: block; font-weight: 600; margin-bottom: .35rem; }
.eg-convenio-form input,
.eg-convenio-form select,
.eg-convenio-form textarea {
  width: 100%; border: 1px solid #dbe1e4; border-radius: 10px; padding: .75rem .9rem; background: #fff; height: 30px;
}

.eg-convenio-form textarea { resize: vertical; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.block { display: block; }
.eg-actions { display: flex; align-items: center; gap: 1rem; margin-top: .5rem; }
.eg-btn {
  background: #033840; color: #fff; border: 0; border-radius: 999px;
  padding: .85rem 1.5rem; cursor: pointer; transition: transform .04s ease;
}
.eg-btn:active { transform: translateY(1px); }
.eg-honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }


/* ====== Tabs (pastilla deslizante arriba) ====== */
.eg-convenio-slider .eg-tab-rail{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1fr;
  border:1px solid rgba(3,56,64,.08);
  border-radius:14px;
  padding:4px;
  background:#f7fafb;
  margin:0 0 1rem 0;
}
.eg-convenio-slider .eg-tab-btn{
  appearance:none; border:0; background:transparent;
  padding:.8rem 1rem; border-radius:12px;
  font-weight:600; color:#033840; cursor:pointer; z-index:1;
}
.eg-convenio-slider .eg-tab-btn.is-active{ color:#fff; }
.eg-convenio-slider .eg-tab-indicator{
  position:absolute; inset:4px; width:calc(50% - 4px);
  border-radius:12px; background:#033840;
  box-shadow:0 6px 18px rgba(3,56,64,.25), inset 0 0 0 1px rgba(255,255,255,.1);
  transform:translateX(0%); transition:transform .35s ease;
}
/* mover pastilla a la derecha cuando el tab "personal" está activo (JS agrega .is-personal) */
.eg-convenio-slider .eg-tab-rail.is-personal .eg-tab-indicator{ transform:translateX(100%); }

/* ====== Slider tipo login (tarjeta que se mueve) ====== */
.eg-convenio-slider .eg-login-shell{
  position:relative; width:100%; max-width:1100px; margin:0 auto 2rem;
  min-height:660px;
}
.eg-convenio-slider .eg-bluebg{
  position:absolute; top:32px; left:0; right:0; height:456px;
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(3,56,64,.06);
  border-radius:16px; box-shadow:0 8px 32px rgba(3,56,64,.08);
  padding:1rem;
}
.eg-convenio-slider .eg-bluebg .eg-box{
  width:50%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:1.2rem;
  color:#033840;
}
.eg-convenio-slider .eg-switch-btn{
  margin-top:.75rem; padding:.7rem 1.2rem; border-radius:999px;
  border:2px solid #033840; background:#fff; color:#033840; font-weight:700; cursor:pointer;
}
.eg-convenio-slider .eg-switch-btn:hover{ background:#033840; color:#fff; }

/* Tarjeta blanca que se desplaza */
.eg-convenio-slider .eg-formBx{
  position:absolute; inset:0 auto 0 0; width:50%; height:100%;
  background:#fff; border-radius:16px; box-shadow:0 12px 36px rgba(3,56,64,.12);
  overflow:auto; transition:left .45s ease; left:0;
}
.eg-convenio-slider .eg-formBx.active{ left:50%; }

/* Cada panel dentro de la tarjeta */
.eg-convenio-slider .eg-form{
  position:absolute; top:0; left:0; width:100%; height:100%;
  padding:1.6rem;  transition:.35s;
}
.eg-convenio-slider .signinForm{ left:0; }
.eg-convenio-slider .signupForm{ left:100%; }
.eg-convenio-slider .eg-formBx.active .signinForm{ left:-100%; }
.eg-convenio-slider .eg-formBx.active .signupForm{ left:0; }

/* Ajustes de tus tarjetas dentro del slider */
.eg-convenio-slider .eg-form-card{ border-radius:16px; }
.eg-convenio-slider .eg-form-aside{ min-height:520px; }

textarea[name="mensaje"] {
  height: 70px !important;
}
/* Oculta scrollbars dentro de la tarjeta deslizante */
.eg-convenio-slider .eg-formBx {
  /* sigue pudiendo desplazarse, pero sin mostrar barras */
  -ms-overflow-style: none;     /* IE/Edge */
  scrollbar-width: none;        /* Firefox */
}
.eg-convenio-slider .eg-formBx::-webkit-scrollbar { /* Chrome/Safari */
  display: none;
}

/* Por si quedara una barra global por el slide */
body.page-template-page-convenios-php { overflow-x: hidden; }
/* ===========================
   RESPONSIVE – CONVENIOS
   (añadir al final del archivo)
   =========================== */

/* === ≤ 1280px: reduce tipografías y contenedores anchos === */
@media (max-width: 1280px) {
  .page-template-page-convenios-php .convenios-hero h1 { font-size: 2.6rem; }
  .page-template-page-convenios-php .convenios-hero p { font-size: 20px; }

  .eg-convenio-intro .container { max-width: 1000px; }
  .page-template-page-convenios-php .beneficios-convenios-grid,
  .page-template-page-convenio-php  .beneficios-convenios-grid{
    max-width: 1000px;
  }
}

/* === ≤ 1024px (tablets horizontales): 3 columnas beneficios, tarjeta más compacta === */
@media (max-width: 1024px) {
  .page-template-page-convenios-php .beneficios-convenios-title,
  .page-template-page-convenio-php  .beneficios-convenios-title{
    font-size: 34px;
    margin-bottom: 2rem;
  }

  .page-template-page-convenios-php .beneficios-convenios-grid,
  .page-template-page-convenio-php  .beneficios-convenios-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .eg-convenio-slider .eg-form-card{
    grid-template-columns: 120px 1fr; /* antes 80 / 1fr en desktop reducido */
  }
  .eg-convenio-slider .eg-form-fields{ padding: 1.5rem; }
  .eg-convenio-slider .eg-form-aside{ min-height: 460px; }
}

/* === ≤ 900px: hero más bajo y texto más legible === */
@media (max-width: 900px) {
  .convenios-hero{ min-height: 60vh; padding: 0 16px; }
  .page-template-page-convenios-php .convenios-hero h1 { font-size: 2.2rem; }
  .page-template-page-convenios-php .convenios-hero p  { font-size: 18px; margin-bottom: 3rem; }
}

/* === ≤ 768px (tablets verticales / móviles grandes) === */
@media (max-width: 768px) {
  /* Intro */
  .eg-convenio-intro h2 { padding: 3.5rem 1.5rem 0 1.5rem; }
  .eg-convenio-intro p  { padding: 0 1.5rem; }

  /* Beneficios: 2 columnas */
  .page-template-page-convenios-php .beneficios-convenios-grid,
  .page-template-page-convenio-php  .beneficios-convenios-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
  }
  .page-template-page-convenios-php .beneficio-convenio-card,
  .page-template-page-convenio-php  .beneficio-convenio-card{
    padding: 1.4rem .9rem;
  }
  .page-template-page-convenios-php .icon-beneficio-convenio,
  .page-template-page-convenio-php  .icon-beneficio-convenio{
    width: 58px; height: 58px;
  }
  .page-template-page-convenios-php .beneficio-convenio-title,
  .page-template-page-convenio-php  .beneficio-convenio-title{
    font-size: 14px;
  }
  .page-template-page-convenios-php .beneficio-convenio-card p,
  .page-template-page-convenio-php  .beneficio-convenio-card p{
    font-size: 14px;
  }

  /* Texto intermedio */
  .page-template-page-convenios-php .convenios-intro-text p,
  .page-template-page-convenio-php  .convenios-intro-text p{
    font-size: 20px;
    margin: 2rem auto 3rem;
    padding: 0 1rem;
  }

  /* Slider tipo login: apilar bloques azules y tarjeta a ancho completo */
  .eg-convenio-slider .eg-login-shell{ min-height: 980px; }
  .eg-convenio-slider .eg-bluebg{
    position: static;
    height: auto;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }
  .eg-convenio-slider .eg-bluebg .eg-box{ width: 100%; height: auto; }

  .eg-convenio-slider .eg-formBx{
    position: relative;
    width: 100%;
    height: auto;
    left: 0 !important;              /* fuerza a ocupar 100% */
    transform: none !important;
    overflow: visible;                /* sin scroll interno en móviles */
    box-shadow: 0 8px 28px rgba(3,56,64,.08);
    margin-top: 1rem;
  }
  /* Ambos paneles visibles en flujo vertical (opcional) */
  .eg-convenio-slider .eg-form{
    position: relative;
    width: 100%;
    height: auto;
    left: 0 !important; top: 0 !important;
    padding: 1.2rem;
  }
  .eg-convenio-slider .signinForm,
  .eg-convenio-slider .signupForm{ margin-bottom: 1rem; }

  /* Tarjeta de formulario: aside arriba, campos abajo */
  .eg-convenio-slider .eg-form-card{
    grid-template-columns: 1fr;
  }
  .eg-convenio-slider .eg-form-aside{
    min-height: 140px;
    order: -1; /* aside primero */
  }
  .eg-convenio-form label span{ font-size: .95rem; }
  .eg-convenio-form input,
  .eg-convenio-form select,
  .eg-convenio-form textarea{
    height: 44px;                    /* inputs más altos para touch */
    font-size: 15px;
  }
  .eg-convenio-form textarea{ min-height: 110px; }

  .grid-2{ grid-template-columns: 1fr; } /* 2→1 columna en móviles */
  .eg-actions{ flex-direction: column; align-items: stretch; }
  .eg-btn{ width: 100%; padding: 1rem 1.25rem; }
  
  /* Tabs: indicador ocupa 50% y texto más pequeño */
  .eg-convenio-slider .eg-tab-btn{ padding: .7rem .8rem; font-size: .95rem; }
  .eg-convenio-slider .eg-tab-indicator{ width: calc(50% - 4px); }
}

/* === ≤ 560px (móviles) === */
@media (max-width: 560px) {
  .page-template-page-convenios-php .convenios-hero h1 { font-size: 1.9rem; }
  .page-template-page-convenios-php .convenios-hero p  { font-size: 16px; margin-bottom: 2rem; }

  /* Beneficios: 1 columna */
  .page-template-page-convenios-php .beneficios-convenios-grid,
  .page-template-page-convenio-php  .beneficios-convenios-grid{
    grid-template-columns: 1fr;
  }

  /* Padding global más compacto */
  .page-template-page-convenios-php .beneficios-convenios-section,
  .page-template-page-convenio-php  .beneficios-convenios-section{
    padding: 1.5rem 1rem 3rem;
  }
  .eg-convenio-form-wrap .container{ padding: 0 1rem; }

  /* Hero overlay un poco más claro para legibilidad del texto */
  .page-template-page-convenios-php .convenios-hero .hero-overlay{
    background: rgba(16, 9, 116, 0.55);
  }
}

/* === ≤ 380px: micro-ajustes tipográficos y espacios === */
@media (max-width: 380px) {
  .page-template-page-convenios-php .beneficios-convenios-title,
  .page-template-page-convenio-php  .beneficios-convenios-title{
    font-size: 28px;
  }
  .eg-convenio-form h3{ font-size: 1.05rem; }
  .eg-convenio-form label span{ font-size: .9rem; }
}

/* ===== Utilidad opcional para “una sola label más grande” =====
   Agrega class="label--xl" a ESA label, sin afectar las demás. */
.label--xl span{ font-size: 50px !important; line-height: 1.1; }
/* Selects legibles */
.eg-convenio-form select {
  color:#033840;           /* asegúrate que no esté en blanco */
  background:#fff;
  border:1px solid rgba(3,56,64,.15);
  border-radius:8px;
  padding: 0rem .3rem;
  width:100%;
  appearance:auto;         /* por si algún reset lo dejó sin nativo */
}

/* Placeholder (option vacío) con color más tenue */
.eg-convenio-form select:invalid { color:#7a8a8e; }

/* Asegura que las opciones tengan color */
.eg-convenio-form option { color:#033840; }