/*
 * Conectamos8 — Custom CSS
 * Child theme para GeneratePress
 * conectamos8.tech
 */

/* ── Inter Font (fallback import si Google Fonts tarda) ──── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

/* ── GLOBAL ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body, .site {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 17px;
  line-height: 1.65;
  color: #1A1A1A;
}

h1,h2,h3,h4,h5,h6,.wp-block-heading {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

img { height: auto; max-width: 100%; }
a   { transition: color 0.15s ease; }

/* ── HEADER ──────────────────────────────────────────────── */
.site-header, #masthead {
  background-color: #1F3864 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08);
}

.site-title a, .site-title a:visited,
.wp-block-site-title a {
  color: #FFFFFF !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 20px;
}

.main-navigation a, .nav-primary a,
.wp-block-navigation a {
  color: rgba(255,255,255,0.85) !important;
  font-size: 14px;
}

.main-navigation a:hover, .nav-primary a:hover,
.wp-block-navigation a:hover {
  color: #FFFFFF !important;
}

/* Mobile menu toggle */
.menu-toggle { color: #FFFFFF !important; border-color: rgba(255,255,255,0.35) !important; }

/* Header CTA button */
.header-cta a, .nav-cta-button a, .wp-block-navigation .nav-cta a {
  background-color: #993C1D !important;
  color: #FFFFFF !important;
  padding: 8px 18px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
}
.header-cta a:hover, .nav-cta-button a:hover { opacity: 0.88 !important; }

/* ── HERO PILL ───────────────────────────────────────────── */
.hero-pill {
  display: inline-block !important;
  background: rgba(93,202,165,0.15) !important;
  border: 1px solid rgba(93,202,165,0.45) !important;
  color: #5DCAA5 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 5px 16px !important;
  border-radius: 20px !important;
  margin-bottom: 20px !important;
}

/* ── SECTION UTILITIES ───────────────────────────────────── */
.section-xl  { padding-top: 80px !important; padding-bottom: 80px !important; }
.section-lg  { padding-top: 64px !important; padding-bottom: 64px !important; }
.section-md  { padding-top: 48px !important; padding-bottom: 48px !important; }
.w-narrow    { max-width: 680px; margin-left: auto; margin-right: auto; }
.w-medium    { max-width: 880px; margin-left: auto; margin-right: auto; }
.text-center { text-align: center !important; }

/* ── PROOF / STATS BAR ───────────────────────────────────── */
.stats-bar .wp-block-column {
  border-right: 1px solid rgba(255,255,255,0.2);
  text-align: center;
  padding: 4px 16px;
}
.stats-bar .wp-block-column:last-child { border-right: none; }

/* ── SERVICE CARDS ───────────────────────────────────────── */
.service-card {
  border: 1px solid #E0E7EF !important;
  border-radius: 12px !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
  height: 100%;
}
.service-card:hover {
  box-shadow: 0 8px 24px rgba(31,56,100,0.12) !important;
  transform: translateY(-3px) !important;
}

/* ── STEP NUMBERS ────────────────────────────────────────── */
.step-number {
  font-size: 72px;
  font-weight: 700;
  color: rgba(255,255,255,0.12);
  line-height: 1;
  display: block;
  margin-bottom: 8px;
}

/* ── CATEGORY CARDS ──────────────────────────────────────── */
.category-card {
  background: #FFFFFF;
  border: 1px solid #E5EBF5;
  border-radius: 12px;
  text-align: center;
  transition: all 0.2s ease;
}
.category-card:hover {
  border-color: #1F3864;
  box-shadow: 0 4px 16px rgba(31,56,100,0.10);
  transform: translateY(-2px);
}

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-q {
  font-weight: 600 !important;
  color: #1F3864 !important;
  font-size: 17px !important;
  margin: 0 0 8px !important;
}
.faq-a { color: #444 !important; line-height: 1.7 !important; margin: 0 !important; }
.faq-item {
  border-bottom: 1px solid #E5EBF5;
  padding: 20px 0;
}
.faq-item:last-child { border-bottom: none; }

/* ── BLOG GRID ───────────────────────────────────────────── */
.wp-block-post-template { gap: 24px !important; }
.blog-card { border: 1px solid #E5EBF5; border-radius: 12px; overflow: hidden; }
.blog-card:hover { box-shadow: 0 4px 16px rgba(31,56,100,0.10); }
.wp-block-post-terms a {
  display: inline-block;
  background: #EEF3FB;
  color: #1F3864;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  text-decoration: none;
}

/* ── BUTTONS ─────────────────────────────────────────────── */
.wp-block-button__link {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
}
.wp-block-button__link:hover {
  opacity: 0.90 !important;
  transform: translateY(-1px) !important;
}

/* ── CONTACT FORM (Fluent Forms) ─────────────────────────── */
.fluentform .ff-el-form-control {
  border: 1px solid #D0D8E8 !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  padding: 10px 14px !important;
  transition: border-color 0.15s !important;
  width: 100%;
}
.fluentform .ff-el-form-control:focus {
  border-color: #1F3864 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(31,56,100,0.12) !important;
}
.fluentform .ff-btn-submit {
  background-color: #993C1D !important;
  color: #FFFFFF !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 12px 32px !important;
  border: none !important;
  font-size: 15px !important;
  cursor: pointer !important;
}
.fluentform .ff-btn-submit:hover { opacity: 0.88 !important; }

/* ── FOOTER ──────────────────────────────────────────────── */
.site-footer, #colophon {
  background-color: #1F3864 !important;
  color: rgba(255,255,255,0.75) !important;
}
.site-footer a { color: rgba(255,255,255,0.70) !important; text-decoration: none !important; }
.site-footer a:hover { color: #FFFFFF !important; }
.footer-bottom {
  background-color: #152848;
  color: rgba(255,255,255,0.45);
  font-size: 13px;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}

/* ── RANK MATH FAQ ───────────────────────────────────────── */
.rank-math-faq-block .rank-math-faq-item {
  border-bottom: 1px solid #E5EBF5;
  padding: 20px 0;
}
.rank-math-faq-block .rank-math-question h3 {
  color: #1F3864 !important;
  font-size: 17px !important;
  margin: 0 !important;
}
.rank-math-faq-block .rank-math-answer {
  color: #444;
  line-height: 1.7;
  margin-top: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE CONECTAMOS8 v3 — Sistema completo
   Breakpoints:
     max-width: 1024px  Tablet
     max-width: 782px   Mobile (WordPress native)
     max-width: 480px   Small mobile
     max-width: 360px   XS mobile
   ============================================================ */

/* ── TABLET (=<1024px) ──────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Hero: H1 un poco mas pequeno */
  .wp-block-cover h1 { font-size: 40px !important; }

  /* Headings de seccion */
  .wp-block-group.alignfull h2.wp-block-heading { font-size: 30px !important; }

  /* Section padding suave */
  .wp-block-group.alignfull { padding-left: 32px !important; padding-right: 32px !important; }
}

/* ── MOBILE (=<782px) ───────────────────────────────────────── */
@media (max-width: 782px) {

  /* == HERO ================================================== */
  .wp-block-cover {
    min-height: 100svh !important;
    padding: 48px 20px 40px !important;
  }
  .wp-block-cover h1 {
    font-size: 26px !important;
    line-height: 1.22 !important;
    margin-bottom: 14px !important;
  }
  .hero-pill {
    font-size: 9px !important;
    padding: 4px 12px !important;
    margin-bottom: 14px !important;
  }
  .wp-block-cover p:not(.hero-pill) {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  /* Botones del hero: apilados, centrados, ancho completo */
  .wp-block-cover .wp-block-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 340px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .wp-block-cover .wp-block-button { width: 100% !important; }
  .wp-block-cover .wp-block-button__link {
    display: block !important;
    text-align: center !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
  }

  /* Proof bar del hero: 4 items -> 2x2 */
  .proof-bar,
  .wp-block-cover .stats-bar {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  .proof-bar .wp-block-column,
  .wp-block-cover .stats-bar .wp-block-column {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    box-sizing: border-box !important;
    border-right: none !important;
    padding: 14px 8px !important;
    text-align: center !important;
  }
  .proof-bar .wp-block-column:nth-child(1),
  .proof-bar .wp-block-column:nth-child(2) {
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  }
  .proof-bar .wp-block-column:nth-child(3),
  .proof-bar .wp-block-column:nth-child(4) {
    border-bottom: none !important;
  }

  /* == STATS BAR TEAL (isStackedOnMobile:false) ============== */
  .stats-bar .wp-block-columns {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .stats-bar .wp-block-column {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    border-right: none !important;
    padding: 16px 12px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  .stats-bar .wp-block-column:nth-child(1),
  .stats-bar .wp-block-column:nth-child(2) {
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    margin-bottom: 0 !important;
  }
  .stats-bar h3.wp-block-heading { font-size: 30px !important; }
  .stats-bar p { font-size: 12px !important; }

  /* == HEADINGS GLOBALES ==================================== */
  .wp-block-group.alignfull h2.wp-block-heading {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }
  .wp-block-group.alignfull h3.wp-block-heading {
    font-size: 17px !important;
  }
  /* H1 en paginas interiores (no hero) */
  .wp-block-group.alignfull h1.wp-block-heading {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }

  /* == SECTION PADDING ===================================== */
  .wp-block-group.alignfull {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Reducir padding vertical */
  .wp-block-group.alignfull[style*="padding-top:80px"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .wp-block-group.alignfull[style*="padding-top:72px"] {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
  .wp-block-group.alignfull[style*="padding-top:64px"] {
    padding-top: 36px !important;
    padding-bottom: 28px !important;
  }
  .wp-block-group.alignfull[style*="padding-top:52px"] {
    padding-top: 36px !important;
  }

  /* == HOW IT WORKS steps ================================== */
  .step-number {
    font-size: 48px !important;
    color: rgba(255,255,255,0.08) !important;
    margin-bottom: 4px !important;
  }

  /* == FAQ ================================================= */
  .faq-item { padding: 16px 0 !important; }
  .faq-q { font-size: 15px !important; line-height: 1.4 !important; }
  .faq-a { font-size: 14px !important; }

  /* == BLOG GRID =========================================== */
  .wp-block-post-featured-image img {
    width: 100% !important;
    height: auto !important;
  }

  /* == CONTACT SECTION: 2 cols -> 1 col =================== */
  .wp-block-column[style*="flex-basis:38%"],
  .wp-block-column[style*="flex-basis:62%"] {
    flex-basis: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* == FOOTER ============================================== */
  .wp-block-group[style*="background-color:#1F3864"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* 4 columnas -> 1 columna en mobile */
  .wp-block-group[style*="background-color:#1F3864"] > .wp-block-columns:first-of-type {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .wp-block-group[style*="background-color:#1F3864"] > .wp-block-columns:first-of-type > .wp-block-column {
    flex-basis: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 24px !important;
    padding-bottom: 24px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }
  .wp-block-group[style*="background-color:#1F3864"] > .wp-block-columns:first-of-type > .wp-block-column:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  /* Barra legal del footer -> columna */
  .wp-block-group[style*="background-color:#1F3864"] > .wp-block-columns:not(:first-of-type) {
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 16px !important;
  }
  .wp-block-group[style*="background-color:#1F3864"] > .wp-block-columns:not(:first-of-type) .wp-block-column {
    flex-basis: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* == BOTONES GLOBALES ==================================== */
  .wp-block-buttons:not(.wp-block-cover .wp-block-buttons) {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .wp-block-buttons:not(.wp-block-cover .wp-block-buttons) .wp-block-button {
    width: 100% !important;
  }
  .wp-block-buttons:not(.wp-block-cover .wp-block-buttons) .wp-block-button__link {
    text-align: center !important;
    padding: 13px 20px !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
}

/* ── SMALL MOBILE (=<480px) ─────────────────────────────────── */
@media (max-width: 480px) {

  /* HERO */
  .wp-block-cover { padding: 36px 16px 32px !important; }
  .wp-block-cover h1 { font-size: 22px !important; }
  .hero-pill { font-size: 9px !important; }

  /* Headings */
  .wp-block-group.alignfull h2.wp-block-heading { font-size: 20px !important; }
  .wp-block-group.alignfull h3.wp-block-heading { font-size: 16px !important; }
  .wp-block-cover .wp-block-heading,
  .stats-bar .wp-block-heading { font-size: 24px !important; }

  /* Step numbers */
  .step-number { font-size: 38px !important; }

  /* CTA seccion coral */
  .wp-block-group[style*="background-color:#993C1D"] h2.wp-block-heading {
    font-size: 20px !important;
  }
  .wp-block-group[style*="background-color:#993C1D"] p {
    font-size: 15px !important;
  }

  /* FOOTER minimo */
  .wp-block-group[style*="background-color:#1F3864"] {
    padding: 32px 16px 20px !important;
  }
  .footer-col-title { font-size: 12px !important; margin-bottom: 12px !important; }
  .footer-nav-list a { font-size: 13px !important; }

  /* CONTACT */
  .contact-checklist li { font-size: 14px !important; }

  /* Sections padding global */
  .wp-block-group.alignfull {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .wp-block-group.alignfull[style*="padding-top:80px"],
  .wp-block-group.alignfull[style*="padding-top:48px"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* Service cards: mas padding interno */
  .service-card { padding: 24px 20px !important; }

  /* FAQ */
  .faq-q { font-size: 14px !important; }
  .faq-a { font-size: 13px !important; }
}

/* ── XS MOBILE (=<360px) ────────────────────────────────────── */
@media (max-width: 360px) {
  body { font-size: 15px; line-height: 1.6; }
  .wp-block-cover { padding: 28px 12px !important; }
  .wp-block-cover h1 { font-size: 19px !important; line-height: 1.2 !important; }
  .wp-block-group.alignfull h2.wp-block-heading { font-size: 18px !important; }
  .wp-block-group.alignfull { padding-left: 12px !important; padding-right: 12px !important; }
  .wp-block-button__link { font-size: 13px !important; padding: 12px 14px !important; }
  .stats-bar h3.wp-block-heading { font-size: 22px !important; }
  .step-number { font-size: 32px !important; }
}

/* ══════════════════════════════════════════════════════════════
   SANGRIA HORIZONTAL — Padding lateral para todas las secciones
   Evita que el texto quede pegado a los bordes de la pantalla.

   Tecnica: clamp(min, fluido, max)
     - clamp(24px, 6vw, 80px) da:
         400px viewport  ->  24px  (minimo)
         768px viewport  ->  46px
         1024px viewport ->  61px
         1200px viewport ->  72px
         1333px+         ->  80px  (maximo)

   Por que no usa !important:
     Los bloques de footer tienen "padding: 52px 40px 28px" como
     inline style (mas especifico que una clase CSS), por lo que
     sus 40px horizontales prevalecen sin necesidad de excepcion.
     Solo en las media queries se usa !important para reducir a
     valores menores en smartphones.
   ============================================================== */

.wp-block-group.alignfull {
  padding-left: clamp(24px, 6vw, 80px);
  padding-right: clamp(24px, 6vw, 80px);
  box-sizing: border-box;
}

/* El Cover (hero) ya centra su contenido internamente */
.wp-block-cover {
  box-sizing: border-box;
}

/* Limitar el ancho de lectura en pantallas muy anchas (>1400px) */
.wp-block-group.alignfull > .wp-block-heading,
.wp-block-group.alignfull > .wp-block-paragraph {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* Columnas y grupos internos: centrar pero sin limitar */
.wp-block-group.alignfull > .wp-block-columns,
.wp-block-group.alignfull > .wp-block-separator {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}