/* ==========================================================================
   blog-vcg.css — capa de marca VCG sobre el tema CMS Elevate de HubSpot
   Se carga en blog.vcgconsulting.mx desde Site header HTML.
   Fuente de los valores: vcg-site/src/assets/styles.css
   NO usar clases hasheadas de Elevate (p.ej. hs-elevate-card--blog_1wj8d_1):
   cambian en cada build del tema.
   ========================================================================== */

/* ============ 1. TIPOGRAFÍA ============ */

/* Los 17 tokens de fuente de Elevate.
   Space Grotesk para títulos y citas; Inter para todo lo demás.
   Fuente: styles.css:38 (h1..h4) y styles.css:26,33 (cuerpo). */
:root{
  --hsElevate--h1__font: 'Space Grotesk';
  --hsElevate--h2__font: 'Space Grotesk';
  --hsElevate--h3__font: 'Space Grotesk';
  --hsElevate--h4__font: 'Space Grotesk';
  --hsElevate--h5__font: 'Space Grotesk';
  --hsElevate--h6__font: 'Space Grotesk';
  --hsElevate--display1__font: 'Space Grotesk';
  --hsElevate--display2__font: 'Space Grotesk';
  --hsElevate--quotes__font: 'Space Grotesk';

  --hsElevate--body__font: 'Inter';
  --hsElevate--button--primary__font: 'Inter';
  --hsElevate--button--secondary__font: 'Inter';
  --hsElevate--button--accent__font: 'Inter';
  --hsElevate--button--tertiary__font: 'Inter';
  --hsElevate--formLabel__font: 'Inter';
  --hsElevate--captions__font: 'Inter';
  --hsElevate--tag__font: 'Inter';
}

/* Elevate no expone token de letter-spacing, así que va por clase.
   Fuente: styles.css:38 */
.hs-elevate-h1, .hs-elevate-h2, .hs-elevate-h3,
.hs-elevate-h4, .hs-elevate-h5, .hs-elevate-h6,
.hs-elevate-display-1, .hs-elevate-display-2,
h1, h2, h3, h4{
  letter-spacing:-.02em;
  line-height:1.08;
  font-weight:600;
}
/* ============ 2. BOTONES ============ */

/* Botón primario: gradiente cyan + glow. Fuente: styles.css:60-61 */
:root{
  --hsElevate--button--primary__backgroundColor: transparent;
  --hsElevate--button--primary__textColor: #04201f;
  --hsElevate--button--primary__hover--textColor: #04201f;
}

.hs-elevate-button--primary{
  background-image: linear-gradient(120deg,#00a3a3 0%,#14e0c4 100%);
  color:#04201f;
  box-shadow:0 14px 34px -14px rgba(0,163,163,.7);
  border-color:transparent;
  transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s;
}
.hs-elevate-button--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 44px -14px rgba(0,163,163,.85);
  color:#04201f;
}

/* Secundario y accent: contorno teal, hover hacia cyan.
   Fuente: styles.css:62-63 (patrón de .btn-ghost) */
:root{
  --hsElevate--button--secondary__hover--borderColor: #009b95;
  --hsElevate--button--secondary__hover--textColor: #009b95;
  --hsElevate--button--accent__hover--borderColor: #14e0c4;
  --hsElevate--button--accent__hover--textColor: #009b95;
}
.hs-elevate-button--secondary,
.hs-elevate-button--accent{
  transition:transform .25s cubic-bezier(.2,.7,.3,1),border-color .25s,color .25s;
}
.hs-elevate-button--secondary:hover,
.hs-elevate-button--accent:hover{
  transform:translateY(-2px);
}
/* ============ 3. TARJETAS DE POST ============ */

/* Espejo del componente .post del sitio. Fuente: styles.css:331-332
   Se redefinen las 4 variantes de tarjeta porque Elevate las asigna
   inline por módulo y no se sabe de antemano cuál usa cada listado. */
:root{
  --hsElevate--card--variant1__backgroundColor: #ffffff;
  --hsElevate--card--variant2__backgroundColor: #ffffff;
  --hsElevate--card--variant3__backgroundColor: #ffffff;
  --hsElevate--card--variant4__backgroundColor: #ffffff;

  --hsElevate--card--variant1__borderColor: #e2e8ee;
  --hsElevate--card--variant2__borderColor: #e2e8ee;
  --hsElevate--card--variant3__borderColor: #e2e8ee;
  --hsElevate--card--variant4__borderColor: #e2e8ee;

  --hsElevate--card--variant1__borderRadius: 28px;
  --hsElevate--card--variant2__borderRadius: 28px;
  --hsElevate--card--variant3__borderRadius: 28px;
  --hsElevate--card--variant4__borderRadius: 28px;

  --hsElevate--card--variant1__textColor: #0a192f;
  --hsElevate--card--variant2__textColor: #0a192f;
  --hsElevate--card--variant3__textColor: #0a192f;
  --hsElevate--card--variant4__textColor: #0a192f;
}

.hs-elevate-card--blog{
  border-radius:28px;
  background-color:#ffffff;
  border:1px solid #e2e8ee;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(10,25,47,.04),0 12px 34px -18px rgba(10,25,47,.22);
  transition:transform .28s,box-shadow .28s,border-color .28s;
}
.hs-elevate-card--blog:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 70px -30px rgba(0,102,102,.5);
  border-color:transparent;
}

/* El título de la tarjeta: mismo tamaño y ritmo que .post h3 (styles.css:339) */
.hs-elevate-card--blog__heading{
  font-size:1.16rem;
  line-height:1.25;
  letter-spacing:-.02em;
}
/* ============ 4. LINKS Y CUERPO DEL POST ============ */

/* Links por tipo de sección. Fuente: styles.css (teal-600 / teal-500 / cyan-400) */
:root{
  --hsElevate--section--lightSection--1--link__fontColor: #006666;
  --hsElevate--section--lightSection--2--link__fontColor: #006666;
  --hsElevate--section--darkSection--1--link__fontColor: #14e0c4;
  --hsElevate--section--darkSection--2--link__fontColor: #14e0c4;
}

.hs-elevate-rich-text a{ transition:color .2s; }
.hs-elevate-rich-text a:hover{ color:#009b95; }

/* Ritmo del cuerpo del post. Fuente: styles.css:34 (body line-height:1.6) */
.hs-elevate-rich-text p{ line-height:1.6; }

/* Blockquote con la barra de acento teal del sitio. */
:root{
  --hsElevate--section--lightSection--1--blockquote__accentColor: #006666;
  --hsElevate--section--darkSection--1--blockquote__accentColor: #14e0c4;
}
/* ============ 5. HEADER ============ */

/* El fondo navy y los colores de texto se configuran en los ajustes del
   módulo header de HubSpot (pasos 2-3 de docs/blog-hubspot/instrucciones.md),
   NO aquí: sus tokens están fijados inline en el elemento y una hoja externa
   no los alcanza. Aquí va solo lo que HubSpot no expone. Fuente: styles.css:68-102 */
.hs-elevate-site-header{
  /* !important solo en position: el tema carga (después de blog-vcg.css en
     el <head>) su propia clase hasheada _hs-elevate-site-header_kf6j8_1 con
     position:relative; misma especificidad (una clase), pero por venir
     después en el cascade le gana a esta regla sin el !important. */
  position:sticky !important;
  top:0;
  z-index:50;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hs-elevate-site-header__header-container{
  height:74px;
}

/* Links del menú con el subrayado cyan animado del nav del sitio.
   Fuente: styles.css:91-94 */
.hs-elevate-menu__menu-item-link{
  color:#c6d0dc;
  font-size:.95rem;
  font-weight:500;
  position:relative;
  transition:color .2s;
}
.hs-elevate-menu__menu-item-link:hover{
  color:#ffffff;
}
.hs-elevate-site-header__main-nav .hs-elevate-menu__menu-item-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  height:2px;
  width:0;
  background:#14e0c4;
  transition:width .25s;
}
.hs-elevate-site-header__main-nav .hs-elevate-menu__menu-item-link:hover::after{
  width:100%;
}

/* El logo del header usa la versión negativa (paso manual 2). */
.hs-elevate-site-header__logo{
  height:52px;
  width:auto;
}
/* ============ 6. FOOTER ============ */

/* El fondo #06101f y la variante de sección oscura se configuran en HubSpot
   (paso 4 de docs/blog-hubspot/instrucciones.md). Fuente: styles.css:248-257 */
.hs-elevate-footer{
  border-top:1px solid rgba(255,255,255,.07);
}
.hs-elevate-footer a{
  color:#9fb0c2;
  transition:color .2s;
}
.hs-elevate-footer a:hover{
  color:#4defd8;
}

/* Corrección de contraste (revisión obligatoria de esta task): los links de
   "Aviso de Privacidad" / "Términos y Condiciones" viven dentro de un
   .hs-elevate-rich-text anidado en el footer, y el tema (vía una variable
   --hsElevate--richText__linkColor fijada inline en ese div, que apunta al
   token --hsElevate--section--lightSection--1--link__fontColor: #006666
   de la sección 4) les pinta el color de "sección clara" porque HubSpot no
   marca esta fila del footer como "sección oscura" aunque el fondo se vea
   oscuro por la simulación/paso manual. Sin esta regla el teal #006666 da
   ~2.8:1 de contraste sobre #06101f (falla WCAG AA; nuestro valor da 8.6:1).
   !important necesario: aun con el selector más específico
   (.hs-elevate-footer .hs-elevate-rich-text a), el tema aplica su propia
   regla de "color" con la misma especificidad efectiva desde una hoja que
   se inyecta después de blog-vcg.css, y gana el empate por orden de
   cascada. */
.hs-elevate-footer .hs-elevate-rich-text a{
  color:#9fb0c2 !important;
}
.hs-elevate-footer .hs-elevate-rich-text a:hover{
  color:#4defd8 !important;
}

/* Corrección de contraste (revisión obligatoria de esta task): el texto
   normal del footer (tagline "Consultoría tecnológica..." y la línea de
   copyright/legal, incluyendo el <span> del "© 2026...") vive en el mismo
   .hs-elevate-rich-text y hereda --hsElevate--richText__textColor ->
   --hsElevate--section--lightSection--1__textColor, que es el navy #0a192f
   del sitio (pensado para texto sobre fondo claro). Sobre #06101f eso da
   ~1.1:1 de contraste: prácticamente ilegible. El <p> y el <span> reciben
   su propio color directo del tema (no solo heredado del div), así que hay
   que apuntarles explícitamente uno por uno; mismo mecanismo de empate de
   cascada que el caso de los links de arriba, por eso el !important. */
.hs-elevate-footer .hs-elevate-rich-text,
.hs-elevate-footer .hs-elevate-rich-text p,
.hs-elevate-footer .hs-elevate-rich-text span{
  color:#9fb0c2 !important;
}

/* Iconos sociales: cuadro redondeado que se llena de gradiente al hover.
   Fuente: styles.css:255-256 */
.hs-elevate-social-follow__link{
  width:40px;
  height:40px;
  /* !important solo en border-radius: el tema carga (después de blog-vcg.css
     en el <head>) su propia clase hasheada _hs-elevate-social-follow__link_el603_9
     con border-radius:var(--hsElevate--socialFollowIcon__shape); esa variable
     se fija en var(--hsElevate-circle) (50%) por un style inline en el div
     wrapper .hs-elevate-social-follow (config de forma del módulo en HubSpot),
     así que ni redefiniendo el token en :root se puede vencer. Misma
     especificidad de clase, pero por venir después en el cascade gana sin
     el !important. */
  border-radius:11px !important;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  display:grid;
  place-items:center;
  color:#c6d0dc;
  transition:background .25s,color .25s,border-color .25s;
}
.hs-elevate-social-follow__link:hover{
  background:linear-gradient(120deg,#00a3a3 0%,#14e0c4 100%);
  color:#04201f;
  border-color:transparent;
}

/* Títulos de columna del footer. Fuente: styles.css:250 */
.hs-elevate-footer h5{
  color:#ffffff;
  font-family:'Space Grotesk';
  font-size:.82rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}