/* =====================================================
   TIPOGRAFÍAS (carpeta fonts)
   ===================================================== */
@font-face{
  font-family:"Source Sans Variable";
  src: url("/fonts/SourceSansVariable-Roman.otf") format("opentype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
/* Alias para títulos (match exacto de tu referencia) */
@font-face{
  font-family:"SourceSansCustom";
  src: url("/fonts/SourceSansVariable-Roman.otf") format("opentype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* =====================================================
   VARIABLES
   ===================================================== */
:root{
  --bg:#ffffff;
  --text:#000000;
  --muted:#000000;
  --border:#e6e6e6;         /* gris claro borde principal */
  --border-2:#cccccc;        /* gris medio */
  --fill-1:#d8d8d6;          /* gris bloques */
  --primary:#51a0d5;         /* azul dado */
  --primary-contrast:#fff;
  --radius:16px;
  --header-h:84px;
  --soft:#f8fafc;
}

/* =====================================================
   RESET + BASE
   ===================================================== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: "Source Sans Variable", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
.container{ width:min(92vw, 1180px); margin-inline:auto }
/* Hero: igualar ancho del nav con Planes */
.hero .container{ width:min(92vw, 720px) }
@media (min-width:1024px){ .hero .container{ width:min(92vw, 960px) } }
@media (min-width:1300px){ .hero .container{ width:min(92vw, 1120px) } }
@media (min-width:1440px){ .hero .container{ width:min(92vw, 1240px) } }
@media (min-width:1600px){ .hero .container{ width:min(92vw, 1360px) } }
section{ scroll-margin-top: calc(var(--header-h) + 12px); }

/* Tipografía utilitaria */
h1,h2,h3,h4,h5,h6,.heading{
  font-family: "Source Sans Variable", system-ui, sans-serif;
  font-variation-settings: "wght" 400; /* títulos Regular 400 */
  font-weight: 400;
  letter-spacing:.1px;
}

/* Párrafos, listas, pequeños — MÁS GRANDES que antes */
p, li, small{
  font-family: "Source Sans Variable", system-ui, sans-serif;
  font-weight: 400;
  font-variation-settings: "wght" 400;
  color: inherit; /* <-- antes #000000; ahora hereda (permitirá blanco en CTA/Footer) */
  /* Subido: antes 14–18, ahora 16–20 para mejor lectura */
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.7;
}

/* =====================================================
   HERO + NAVEGACIÓN  (INTEGRACIÓN banner4.jpg)
   ===================================================== */
.hero{ position:relative }

/* Fondo del banner */
.hero-bg{
  width:100vw;
  margin-left:calc(50% - 50vw);
  min-height: clamp(80vh, 70vh, 82vh); /* bajar imagen del banner */
  background-image:url("/img/banner3.jpg");
  background-size:cover;
  background-position:center 10%;
  background-repeat:no-repeat;
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

/* Barra superior (logo + menú) */
.hero-bar{ position:absolute; inset:0 0 auto 0; z-index:2; height:var(--header-h) }
/* Nav global en global.css */

/* Texto del banner */
.hero-content{
  position:relative; z-index:1; text-align:left; color:#fff;
  padding: clamp(28px, 6vw, 72px) 0 clamp(32px, 8vw, 96px);
}
.hero-title{
  font-family: "ArialRoundedBold", sans-serif;
  font-size: clamp(30px, 5.2vw, 40px);
  line-height: 1.08;
  margin: 0 0 12px;
  text-wrap: balance;
  text-align: left;
  font-weight: 300;
  color: #ffffff;
}
.hero-subtitle{ margin:0; color:rgba(255,255,255,.92) }

/* Tablet vertical (portrait) */
@media (min-width:769px) and (max-width:1366px) and (orientation: portrait){
  .hero-bg{
    min-height: 40vh;
    background-position: center center;
  }
  .hero-content{
    transform: translateY(40px); /* baja SOLO el texto */
  }
}

/* Tablet horizontal (landscape) */
@media (min-width:769px) and (max-width:1366px) and (orientation: landscape){
  .hero-bg{
    min-height: 60vh;
    background-position: center center;
  }
}

/* BANNER EN MÓVIL */
@media (max-width:768px){
  .hero-bg{
    min-height: 60vh;
    background-position: center center;
  }
}

/* HERO - LANDSCAPE / PANTALLAS BAJAS */
@media (max-width:1024px) and (orientation:landscape){
  .hero-content{ padding-top:8px; padding-bottom:20px; text-align:center }
  .hero-title{ font-size: clamp(22px, 4.6vw, 40px); line-height:1.15; margin:0 16px }
  .hero-bg{ min-height:56vh; justify-content:center }
}
@media (max-height:430px) and (orientation:landscape){
  .hero-title{ font-size: clamp(20px, 4.2vw, 34px) }
}

/* Accesibilidad: reducir movimiento */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important }
}

/* =====================================================
   CONTENIDOS
   ===================================================== */
.main{ background:#f7f7f7 }
.intro{ padding: 22px 0 16px }
.intro--alt{ padding-top: 10px }

/* Títulos secciones exactamente con la familia/ligereza solicitada */
.section-kicker,
.help-title,
.benefits-title{
  font-family: "SourceSansCustom", sans-serif !important;
  font-weight: 300 !important;
  font-size: clamp(26px, 3.6vw, 35px) !important;
  color: #51a0d5 !important;
  line-height: 1.15;
  letter-spacing: 0;
  margin: 0 0 30px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  display:block;
}

.intro-grid{
  display:grid; grid-template-columns: 1fr 340px; gap:16px; align-items:start;
  background:#fff; border:1px solid var(--border); border-radius:14px; padding:14px;
}
.intro-text p{ margin:0 0 12px }

/* Tarjeta lateral */
.contact-card{
  background:#fff;
  border:1px solid var(--border-2);
  border-radius:18px;
  padding:18px 16px 16px;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  max-width: 320px; margin-inline:auto;
  position:relative;
}
.contact-media{
  width:120px; height:120px; margin:-56px auto 6px;
  border-radius:999px; overflow:hidden; border:6px solid #fff;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  background:#ddd;
}
.contact-media img{ width:100%; height:100%; object-fit:cover }
.contact-media img[src*="sebas.png"]{ object-position:100% 15%; }
.contact-body{ text-align:center }
.contact-body h3{ margin:6px 0 2px; font-size:18px }
.role{ margin:0 0 12px; color:var(--muted); font-size:13px; line-height:1.35 }

/* CTA igual al archivo (y full width para mejor tapping) */
.btn-primary{
  display:block;
  width:100%;
  background:linear-gradient(180deg, #6ec0ef, var(--primary));
  color:#fff;
  font-weight:400;
  padding:10px 16px;
  border-radius:999px;
  font-size:14px;
  text-align:center;
  box-shadow: 0 6px 14px rgba(81,160,213,.35);
}

/* ¿En qué podemos ayudarte? */
.help{ padding: 12px 0 6px }
.help-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px }
.help-card{
  background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden;
}
.help-card img{ width:100%; height:118px; object-fit:cover; object-position:center }
.help-body{ padding:12px 14px }
.help-body h3{ margin:0 0 6px; font-size:16px; font-weight:400 }
.help-body p{ margin:0; font-size:14px; color:#475569 }

/* Beneficios */
.benefits{ padding: 6px 0 22px }
.benefits-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px }
.benefit{
  background:var(--fill-1); border:1px solid var(--border); border-radius:12px; padding:18px;
  display:grid; place-items:center; text-align:center; min-height:140px;
}
.benefit-ill{ width:64px; height:64px; opacity:.75; margin-bottom:10px }
.benefit-ill img{ width:100%; height:100%; object-fit:contain }
.benefit-text{ margin:0; font-size:14px; color:#334155 }

/* =====================================================
   FOOTER (versión anterior por compatibilidad)
   ===================================================== */
.footer{
  color:#fff; background:var(--primary); margin-top:18px; padding:18px 0;
}
.footer-grid{
  display:grid; grid-template-columns: 1.2fr 1fr auto; align-items:center; gap:16px;
}
.footer-brand{ display:flex; align-items:center; gap:10px }
.footer-brand img{ width:86px; height:auto }
.footer-brand small{ opacity:.95 }
.footer-center{ text-align:center }
.footer-right{ display:grid; justify-items:end; row-gap:6px; text-align:right }
.footer-right .ig{
  display:inline-grid; place-items:center; width:36px; height:36px; border-radius:999px;
  background:rgba(255,255,255,.18); color:#fff;
}
.footer-right small{ opacity:.95 }

/* =====================================================
   RESPONSIVE (mismos breakpoints: 1024 y 640)
   ===================================================== */
@media (max-width:1024px){
  .intro-grid{ grid-template-columns:1fr }
  .help-grid, .benefits-grid{ grid-template-columns:1fr 1fr }
  .hero-content{ padding-top: clamp(28px, 10vh, 120px) }
}
@media (max-width:640px){
  /* Logo (global en complemento.css) */
  .hero-bg{ background-position:center 40% }
  .help-grid, .benefits-grid{ grid-template-columns:1fr }
  .footer-grid{ grid-template-columns:1fr; text-align:center }
  .footer-right{ justify-items:center; text-align:center }
}
/* Menu: unificado con el estilo global */
/* ==== Overrides de miembros (pegar tal cual) ==== */
:root{
  /* Ajusta estos 3 valores a tu gusto */
  --member-btn-bg: #51a0d5;     /* fondo del botón Contáctanos */
  --member-btn-text: #000000;   /* texto del botón */
  --member-text: #000000;       /* color de textos dentro de la tarjeta */
}

/* Botón "Contáctanos" de las tarjetas de miembros */
.contact-card .btn-primary{
  background: var(--member-btn-bg) !important;  /* override al gradiente previo */
  color: var(--member-btn-text) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.12) !important; /* opcional */
  border: none !important;
  font-size: 20px !important;   /* tamaño del texto del botón */
  line-height: 1.2 !important;
}
.contact-card .btn-primary:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* Texto dentro de la tarjeta de miembro */
.contact-card .contact-body,
.contact-card .contact-body h3,
.contact-card .role,
.contact-card .contact-body p{
  color: var(--member-text) !important;
}

/* === BASE SEGURA === */
.intro-grid{
  display: grid;
  gap: 0;
}

/* ===== MÓVIL (<=768px) ===== */
@media (max-width: 768px){
  .intro-grid{
    grid-template-columns: 1fr;
    padding: 0 !important;
    overflow: hidden; /* permite que el gris ocupe 100% sin recortes */
    gap: 24px;        /* espacio razonable entre texto y tarjeta */
  }

  .intro-text{
    background:#fff;
    padding: 16px !important;
    border-radius: 14px 14px 0 0 !important;
    border: 1px solid var(--border, #e6e6e6) !important;
    border-bottom: 0 !important;
  }

  /* IMPORTANTE: deja margen inferior para que “baje” en móvil */
  .contact-card{
    max-width: none !important;
    width: 100% !important;
    /* margen inferior para separar del bloque siguiente */
    margin: 0 0 40px 0 !important;   /* <- aquí se fuerza el “bajar” */
    border-radius: 0 0 14px 14px !important;
    background: #d8d8d6 !important;
    padding: 18px 14px !important;
    border: 1px solid var(--border, #e6e6e6) !important;
    border-top: 0 !important;
  }

  /* algo de respiro por si el siguiente bloque trae poco margen */
  .intro{
    padding-bottom: 12px;  /* ajustable */
  }
}

/* ===== TABLET Y ESCRITORIO (>=769px) ===== */
@media (min-width: 769px){
  .intro-grid{
    grid-template-columns: 1fr 340px;   /* texto | contacto */
    align-items: stretch;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible;                   /* deja que el gris se extienda */
    gap: 0;                              /* columnas pegadas */
  }

  /* Igualar alturas sin JS */
  .intro-text,
  .contact-card{
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* Recuadro blanco SOLO para el texto */
  .intro-text{
    background: #fff !important;
    border: 1px solid var(--border, #e6e6e6) !important;
    border-radius: 14px 0 0 14px !important;
    padding: 22px !important;
  }

  /* Tarjeta gris pegada al borde derecho del viewport */
  .contact-card{
    background: #d8d8d6 !important;
    border: 1px solid var(--border, #e6e6e6) !important;
    border-left: 0 !important;
    border-radius: 0 14px 14px 0 !important;

    width: 100% !important;
    margin: 0 !important;
    padding: 24px 24px !important;

    /* --- FULL-BLEED RIGHT --- */
    margin-right: calc(50% - 50vw) !important;  /* empuja hasta el borde derecho */
  }
}

/* ===== ESCRITORIO (>=1025px): pequeños ajustes ===== */
@media (min-width: 1025px){
  .intro-text{ padding: 24px !important; }
  .contact-card{ padding: 28px 24px !important; }
}

/* === PARCHE FINAL (por si algún estilo previo pisa el margen en móvil) === */
/* Déjalo AL FINAL del archivo para ganar en la cascada. */
@media (max-width: 640px){
  .contact-card{
    margin: 0 0 40px 0 !important;   /* fuerza la bajada en iPhone ancho <= 640 */
    padding-bottom: 28px !important;
  }
}
/* === PARCHE: extender el gris hasta abajo === */
@media (max-width: 768px){
  .contact-card{
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between;  /* empuja el botón al fondo */
    min-height: 100% !important;
  }
}
/* === Desktop only: subir foco del banner === */
@media (min-width: 1025px){
  .hero-bg{
    /* mueve el recorte hacia ARRIBA en escritorio */
    background-position: center 50% !important;
     /* prueba 0%, 2%, 5% */
  }
  
}
/* ==== HERO SLIDER ==== */
.hero-bg{
  position: relative;
  overflow: hidden;
  /* MUY IMPORTANTE: quitar fondo fijo para que se vean los slides */
  background-image: none !important;
}

.hero-slides{
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-slide{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 10%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .9s ease;
}

.hero-slide.is-active{
  opacity: 1;
}

/* Asegura que textos y nav queden arriba */
.hero-content{ position: relative; z-index: 2; }
.hero-bar{ position: absolute; inset: 0 0 auto 0; z-index: 3; }

/* ==== Botón Play/Pause ==== */
.hero-controls{
  position:absolute; right:16px; bottom:14px; z-index:4;
}
.hero-toggle{
  display:inline-grid; place-items:center;
  width:38px; height:38px; border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(0,0,0,.28); color:#fff; cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.hero-toggle:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.38);
  border-color: rgba(255,255,255,.75);
}
.hero-toggle i{ font-size:18px; line-height:1; }
/* ===== POPUP MEJORADO ===== */
.a23-modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.a23-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.a23-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px) saturate(140%);
}
.a23-modal-dialog {
  position: relative;
  width: min(640px, 92vw);
  background: rgba(255,255,255,0.95);
  color: #0f172a;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  padding: clamp(22px, 3vw, 36px);
  transform: translateY(20px) scale(.96);
  transition: transform .35s cubic-bezier(.16,.84,.44,1), opacity .35s ease;
  opacity: 0;
}
.a23-modal.is-open .a23-modal-dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Botón de cerrar */
.a23-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.05);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #000000;
  transition: background .2s ease, transform .2s ease;
}
.a23-modal-close:hover {
  background: rgba(0,0,0,.12);
  transform: rotate(90deg);
}

/* Encabezado */
.a23-modal-header h3 {
  margin: 0 0 6px 0;
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.a23-modal-sub {
  margin: 0 0 20px 0;
  color: #475569;
  font-size: 15px;
  line-height: 1.4;
}

/* Formulario */
.a23-form { display: grid; gap: 16px; }
.a23-field { display: grid; gap: 8px; }
.a23-field label {
  font-size: 14px;
  color: #000000;
  font-weight: 600;
}
.a23-field input,
.a23-field textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  font: inherit;
  background: #fff;
  transition: border .2s ease, box-shadow .2s ease;
}
.a23-field input:focus,
.a23-field textarea:focus {
  border-color: var(--primary, #2563eb);
  box-shadow: 0 0 0 4px rgba(37,99,235,.15);
  outline: none;
}

/* Acciones */
.a23-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 10px;
}
.a23-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  font-size: 15px;
  transition: transform .15s ease, filter .15s ease;
}
.a23-btn:active { transform: scale(.96); }
.a23-btn-primary {
  background: linear-gradient(135deg, var(--primary,#51a0d5), #51a0d5);
  color: var(--primary-contrast,#fff);
  box-shadow: 0 6px 20px rgba(37,99,235,.3);
}
.a23-btn-primary:hover { filter: brightness(1.08); }
.a23-btn-ghost {
  background: transparent;
  border: 1px solid #cbd5e1;
  color: #0f172a;
}
.a23-btn-ghost:hover { background: #f8fafc; }

/* Bloqueo scroll */
body.a23-modal-lock { overflow: hidden; }

/* ==== Beneficios ==== */
.benefits {
  padding: 40px 0;
}
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
}
.benefit {
  padding: 40px 25px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* Fondo distinto para cada tarjeta */
.benefits-grid .benefit:nth-child(1) {
  background: #ffffff; /* gris claro */
}
.benefits-grid .benefit:nth-child(2) {
  background: #e6e6e6; /* otro gris */
}
.benefits-grid .benefit:nth-child(3) {
  background: #d8d8d6; /* gris aún más claro */
}

.benefit-ill {
  width: 120px;
  height: 120px;
  margin-bottom: 20px;
}
.benefit-ill img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.benefit-heading {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
  color: #0f172a;
}
.benefit-text {
  font-size: 15px;
  color: #000000;
  line-height: 1.6;
  margin: 0;
}
/* === Foco de banners SOLO en ORDENADOR (HERO) === */
@media (min-width:1025px){

  /* Variables de foco aplicadas únicamente al contenedor del HERO */
  .hero{
    --focusY-hero-1: 50%;  /* slide 1: banner3.jpg */
    --focusY-hero-2: 50%;  /* slide 2: banner7.png */
  }

  /* HERO: cada slide recibe su foco vertical */
  .hero-slides .hero-slide{
    background-size: cover;
  }
  .hero-slides .hero-slide:nth-child(1){
    background-position: center var(--focusY-hero-1);
  }
  .hero-slides .hero-slide:nth-child(2){
    background-position: center var(--focusY-hero-2);
  }

  /* Importante: sin reglas para .help-grid, no afecta “¿En qué podemos ayudarte?” */
}