/* ============================================================
   IMPPULSOR v2 — ESTILOS GLOBALES
   ============================================================ */

/* === FUENTE PRINCIPAL === */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&display=swap');

/* === RESETEO SIMPLE === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
input, select, textarea {
    font-family:"Jost", sans-serif;
    font-weight: 300;
    font-size: 16px;
}
html, body {
  font-family: "Jost", sans-serif;
  background-color: #01224D;
  color: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-weight: 300;
  font-size: 16px;
}
/* varios globales */
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="number"]:focus, textarea:focus, select:focus {
    background-color: transparent;
}
b, strong {
    font-weight: 500;
}
/*  */
.no-results.not-found .post-image {
    display: none;
}
/* texto expandible */
.texto-expandible--oculto {
  display: none;
  transition: opacity .3s ease;
}
.texto-expandible--oculto.visible {
  display: block;
  opacity: 1;
}
.texto-expandible__toggle {
  display: inline-block;
  margin-top: 10px;
  color: var(--azul-claro);
  font-weight: 500;
  transition: opacity .2s;
}
.texto-expandible__toggle:hover {
  opacity: .7;
}
/* texto expandible fin */
/* =========================================================
   SISTEMA REVEAL GLOBAL – ANIMACIONES ESCALONADAS
   Soporta: up, left, right, fade, zoom, blur, delay
   Incluye fallback para navegadores antiguos
========================================================= */

@layer animations {

/* ---------------------------------------------------------
   1. BASE ESCALONADA (solo hijos, no el contenedor)
--------------------------------------------------------- */
.reveal :is(
  [class*="grid-"] > *,
  .text,
  .image,
  img,
  a, 
  svg,               
  h1, h2, h3, h4, h5, h6,
  p,
  ul,
  li
) {
  opacity: 0;
  transform: translateX(12px);
  transition: all 1s ease;
  will-change: transform, opacity;
}

.reveal.visible :is(
  [class*="grid-"] > *,
  .text,
  .image,
  img,
  a,  
  svg,              
  h1, h2, h3, h4, h5, h6,
  p,
  ul,
  li
) {
  opacity: 1;
  transform: none;
}


/* Escalonado */
.reveal.visible :is([class*="grid-"] > *:nth-child(2), h1:nth-child(2), h2:nth-child(2), h3:nth-child(2), h4:nth-child(2), h5:nth-child(2), h6:nth-child(2), p:nth-child(2), li:nth-child(2)) {
  transition-delay: .2s;
}
.reveal.visible :is([class*="grid-"] > *:nth-child(3), h1:nth-child(3), h2:nth-child(3), h3:nth-child(3), h4:nth-child(3), h5:nth-child(3), h6:nth-child(3), p:nth-child(3), li:nth-child(3)) {
  transition-delay: .4s;
}
.reveal.visible :is([class*="grid-"] > *:nth-child(4), h1:nth-child(4), h2:nth-child(4), h3:nth-child(4), h4:nth-child(4), h5:nth-child(4), h6:nth-child(4), p:nth-child(4), li:nth-child(4)) {
  transition-delay: .6s;
}


/* ---------------------------------------------------------
   2. VARIANTES DE EFECTO (solo hijos)
--------------------------------------------------------- */

/* Fade simple */
.reveal-fade :is([class*="grid-"] > *, .text, .image, img, a, svg, h1,h2,h3,h4,h5,h6,p,ul,li) {
  transform: none;
  transition: opacity 1s ease;
}

/* Fade-up */
.reveal-up :is([class*="grid-"] > *, .text, .image, img, a, svg, h1,h2,h3,h4,h5,h6,p,ul,li) {
  transform: translateY(20px);
}

/* Fade-left */
.reveal-left :is([class*="grid-"] > *, .text, .image, img, a, svg, h1,h2,h3,h4,h5,h6,p,ul,li) {
  transform: translateX(-20px);
}

/* Fade-right */
.reveal-right :is([class*="grid-"] > *, .text, .image, img, a, svg, h1,h2,h3,h4,h5,h6,p,ul,li) {
  transform: translateX(20px);
}

/* Zoom */
.reveal-zoom :is([class*="grid-"] > *, .text, .image, img, a, svg, h1,h2,h3,h4,h5,h6,p,ul,li) {
  transform: scale(1.05);
}

/* Blur */
.reveal-blur :is([class*="grid-"] > *, .text, .image, img, a, svg, h1,h2,h3,h4,h5,h6,p,ul,li) {
  filter: blur(6px);
}
.reveal-blur.visible :is([class*="grid-"] > *, .text, .image, img, a, svg, h1,h2,h3,h4,h5,h6,p,ul,li) {
  filter: blur(0);
}

/* Delay */
.reveal-delay :is([class*="grid-"] > *, .text, .image, img, a, svg, h1,h2,h3,h4,h5,h6,p,ul,li) {
  opacity: 0;
  transition: opacity 1s ease 0.3s;
}
.reveal-delay.visible :is([class*="grid-"] > *, .text, .image, img, a, svg, h1,h2,h3,h4,h5,h6,p,ul,li) {
  opacity: 1;
}

} /* @layer animations */


/* ---------------------------------------------------------
   3. FALLBACK AUTOMÁTICO (para navegadores sin :is() / @layer)
   No afecta a los modernos, se ejecuta solo si no se soporta :is()
--------------------------------------------------------- */
@supports not (selector(:is(h1))) {
  .reveal [class*="grid-"] > *,
  .reveal .text,
  .reveal .image,
  .reveal img,
  .reveal a,
  .reveal svg,
  .reveal h1,
  .reveal h2,
  .reveal h3,
  .reveal h4,
  .reveal h5,
  .reveal h6,
  .reveal p,
  .reveal ul,
  .reveal li {
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s ease;
  }
  .reveal.visible [class*="grid-"] > *,
  .reveal.visible .text,
  .reveal.visible .image,
  .reveal.visible img,
  .reveal.visible a,
  .reveal.visible svg,
  .reveal.visible h1,
  .reveal.visible h2,
  .reveal.visible h3,
  .reveal.visible h4,
  .reveal.visible h5,
  .reveal.visible h6,
  .reveal.visible p,
  .reveal.visible ul,
  .reveal.visible li {
    opacity: 1;
    transform: none;
  }
}


/* =========================================================
   FIN - ANIMACIONES GLOBALES – SISTEMA REVEAL
   Compacto, escalonado, y compatible con todas las variantes
========================================================= */
/* =========================================================
   HERO-SOCIAL REVEAL – COMPATIBLE CON LUCIDE
========================================================= */

/* Estado inicial */
.hero-social.reveal :is(a, svg) {
  opacity: 0;
  transition: transform .8s ease, opacity .8s ease;
  will-change: transform, opacity;
}

/* Direcciones */
.hero-social.reveal-up    :is(a, svg) { transform: translateY(25px); }
.hero-social.reveal-down  :is(a, svg) { transform: translateY(-25px); }
.hero-social.reveal-left  :is(a, svg) { transform: translateX(-25px); }
.hero-social.reveal-right :is(a, svg) { transform: translateX(25px); }
.hero-social.reveal-zoom  :is(a, svg) { transform: scale(1.1); }

/* Estado visible (JS agrega .visible) */
.hero-social.reveal.visible :is(a, svg) {
  opacity: .7;
  transform: none;
  
}
.hero-social.reveal.visible :is(a:hover, svg:hover) {
  opacity: 1;
}

/* Pequeño delay para escalonar íconos */
.hero-social.reveal.visible a:nth-of-type(2) { transition-delay: .15s; }
.hero-social.reveal.visible a:nth-of-type(3) { transition-delay: .3s; }



/* =========================================================
   EFECTO AUTOMÁTICO PARA IMÁGENES (fade + blur)
========================================================= */

.reveal img {
  opacity: 0;
  filter: blur(8px);
  transform: scale(1.02);
  transition: opacity 1s ease, filter 1s ease, transform 1s ease;
  will-change: opacity, filter, transform;
}

.reveal.visible img {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}


/* ============================================================
   VARIABLES Y PALETA
   ============================================================ */
:root {
  --azul-corporativo: #01224D;
  --azul-claro: #0060AE;
  --blanco: #FFFFFF;
  --gris: #F5F5F5;
  --negro: #000000;
  --shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* ============================================================
   CONTENEDORES Y SECCIONES
   ============================================================ */
   .page-header, .sidebar .widget, .site-main>* {
    margin-bottom: 0px;
}
   main, section {
    z-index: 1;
    position: relative;
}

.container,
.content-area {
  width: 1200px;
  max-width: 100%;
  margin: 0 auto !important;
  position: relative;
}

@media (min-width: 768px) and (max-width: 1220px) {
  footer .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

.section {
  padding: 80px 0;
}

.swiper {
    padding-inline: 2px !important;
}

/* ============================================================
   CONTENEDORES DE CONTENIDO (BLOQUES BLANCOS)
   ============================================================ */
.bloque-blanco,
.contenedor-articulo {
  background: var(--blanco);
  color: var(--negro);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow);
}

/* ============================================================
   TIPOGRAFÍA Y TEXTOS
   ============================================================ */
   
h1, h2, h3, h4, h5, h6 {
  color: var(--negro);
  font-weight: 700;
  line-height: 1.3;
}

h1, .titulo-principal {
  font-size: clamp(28px, 3vw, 44px);
  margin-bottom: 24px;
}

h2, .subtitulo-principal {
  font-size: clamp(22px, 2.5vw, 30px);
  margin-bottom: 16px;
}

h3, .subtitulo-secundario {
  font-size: clamp(18px, 2vw, 26px);
  margin-bottom: 12px;
}

p {
  margin-bottom: 16px;
  font-size: 16px;
  color: var(--negro);
  font-weight: 300;
  text-align: justify;
}
ul {
    list-style: none;
    margin: 0;
}
ul, li {
  color: #000;
}

a {
  color: var(--azul-claro);
  text-decoration: none;
  transition: 0.2s ease;
}
a:hover {
  text-decoration: none;
}

/* ============================================================
   BOTONES GLOBALES
   ============================================================ */
   /* botón cuadrado */
.btn-outline { border: 1px solid #fff; color:#fff; text-decoration:none; padding:10px 20px; font-weight:600; transition:.2s ease; }
.btn-outline--square { border-radius: 0; }      /* <- cuadrado */
.btn-outline:hover { background:#fff; color:#001a3a !important; }

@media (max-width: 768px) {
  .btn-outline { padding: 8px 16px; font-size: 14px; }
}


.btn {
  display: inline-block;
  padding: 12px 26px;
  font-weight: 600;
  text-decoration: none;
  font-size: 15px;
  transition: all 0.2s ease;
}

.btn-primario, button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.wp-block-button__link:not(.has-background) {
  background: var(--azul-corporativo);
  color: var(--blanco);
  transition: all 0.3s ease;
}
.btn-primario:hover {
  background: var(--azul-claro);
  color: var(--blanco);
}

.btn-secundario {
  background: var(--gris);
  color: var(--negro);
  transition: all .3s ease;
}
.btn-secundario:hover {
  background: var(--azul-claro);
  color: #fff;
}
button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, a.button:hover, button:focus, html input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, a.button:focus, a.wp-block-button__link:not(.has-background):active, a.wp-block-button__link:not(.has-background):focus, a.wp-block-button__link:not(.has-background):hover {
    color: #ffffff;
    background-color: var(--azul-claro);
}

.header-buttons a.btn {
    border-radius: 50px;
    padding: 6px 32px;
    font-size: 14px;
    font-weight: 400;
}
/* ============================================================
   ACCIONES (descargar, compartir, etc.)
   ============================================================ */
.acciones {
  margin-top: 50px;
  padding-top: 25px;
  border-top: 1px solid #ddd;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
      justify-content: end;
}


.acciones a {
  color: #818181;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}
.acciones a:hover {
  text-decoration: underline;
  color: var(--azul-corporativo);
}

/* ============================================================
   LAYOUT GLOBAL (SIDEBAR + CONTENIDO)
   ============================================================ */
.content-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 60px;
  align-items: start;
      background: #fff;
    padding: 60px;
}

@media (max-width: 992px) {
  .content-layout { grid-template-columns: 260px 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  .content-layout { grid-template-columns: 1fr; }
}

/* === SIDEBAR GLOBAL === */
.sidebar {
  line-height: 1.5;
}

.sidebar h4 {
  margin: 24px 0 12px;
}

.sidebar p,
.sidebar li,
.sidebar a {
  color: var(--negro);
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  margin-bottom: 6px;
}

.sidebar a:hover {
  color: var(--azul-claro);
  text-decoration: none;
}
.sidebar ul li:hover  a {
    color: var(--azul-claro) !important;
}
.sidebar a.autor-linkedin:hover img {
    transform: scale(1.15) !important;
}
.sidebar a.autor-linkedin:hover img {
    transition: .3s;
}


/* === TARJETA DE AUTOR (reutilizable) === */
.autor-card {
    background: var(--blanco);
    color: var(--negro);
    border-radius: var(--radius);
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
}
.autor-card.block {
    display: block;
}
.autor-card:hover {
    cursor: pointer;
}
.autor-card img.autor-foto {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin-bottom: 10px;
} 

.autor-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.autor-card p {
  margin: 4px 0;
  color: #444;
}

.autor-linkedin {
  color: #0A66C2;
  font-weight: 600;
  text-decoration: none;
}
.autor-linkedin:hover { text-decoration: underline; }

/* ============================================================
   MODAL AUTOR (solo Insights)
   ============================================================ */
.autor-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1000;
}
.autor-modal.active { display: block; }

.autor-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

.autor-modal__dialog {
  position: relative;
  z-index: 1;
  max-width: 800px;
  width: calc(100% - 40px);
  margin: 60px auto;
  background: #fff;
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 12px 40px rgba(0,0,0,.15);
  top: 25%;
}

.autor-modal__close {
  position: absolute;
  right: 14px;
  top: 10px;
  border: 0;
  background: none;
  color: #000;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

.autor-modal__header {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}

.autor-foto.grande {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
}


/* ============================================================
   CONTENIDO PRINCIPAL (MAIN)
   ============================================================ */



/* ============================================================
   FIX DE ESTRUCTURA (GeneratePress)
   ============================================================ */
.site-content,
.site-content #content {
  display: block !important;
}

.site.grid-container.container.hfeed {
  padding: 0 !important;
}
.separate-containers .site-main {
    margin: 0;
}
/* ============================================================
   RESPONSIVE GLOBAL
   ============================================================ */


/* === MODO IMPRESIÓN === */
@media print {
  header, footer, .hero-section, .hero-insight, .acciones, .site-footer {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  .content-layout, .contenedor-articulo, article, main {
    width: 100%;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }
}

/* ============================================================
    FORMULARIOS (Contact Form 7)
   ============================================================ */
   span.wpcf7-spinner {
    position: absolute;
    top: 8px;
    right: -8px;
}
   .wpcf7 {
    background-size: cover;
    background-position: center right;
    height: 100%;
}

.wpcf7  form p {
    text-align: left;
}

textarea.wpcf7-textarea {
    height: 100px;
}
.wpcf7 input:not([type=submit]), .wpcf7 select, .wpcf7 textarea {
    width: 100%;
    padding: .75em;
    background: transparent;
    border: none;
    border-bottom: 1px solid #01224D;
    border-radius: 0;
    padding: 5px 0;
    color: #000;
    font-size: 14px;
    font-weight: 400;
    font-family: Jost, sans-serif;
}
    form br {
    display: none;
}
form.wpcf7-form {
    padding: 40px 60px 30px 60px;
}
    h2.h2-title-form {
    color: #006EFF;
    font-size: 40px;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 20px;
}
p.p-header-form {
    color: #061C2C;
    line-height: 27px;
    font-weight: 300;
    margin-bottom: 25px !important;
}
.form__group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
.wpcf7 input[type=checkbox], .wpcf7 input[type=radio] {
    float: left;
    text-align: left;
    width: max-content !important;
    top: 5px;
    position: relative;
    margin-right: 5px;
}
.wpcf7-list-item {
    display: inline-grid;
    margin: 0;
    gap: 10px;
}
.form__submit {
    justify-items: end;
        grid-row: 1;
    grid-column: 2;
}
input.wpcf7-submit.form__button {
    background: var(--azul-corporativo);
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    border-radius: 0;
    min-width: 163px;
}
input.wpcf7-submit.form__button:hover {
    background: var(--azul-claro);
    color: #fff;
}
.wpcf7 form .wpcf7-response-output {
    color: #000;
}

/*  */
@media (max-width: 768px) {
    .form__group {
    display: block;
    }
    form.wpcf7-form {
      padding: 20px 40px 10px 30px;
  }
}
/* ============================================================
    FORMULARIOS (Contact Form 7) fin
   ============================================================ */