/* ==========================================================================
HOJA DE ESTILOS PERSONALIZADA
Proyecto: hatchagency.com
Autor: Hans Hatch
Descripción: Estilos visuales y animaciones de texto para identidad gráfica.
Última actualización: 2025-06-23
========================================================================== */

/* ==========================================================================
TIPOGRAFÍA Y ESTILOS DE TEXTO
========================================================================== */

/**

Estilo de texto verde (uso general)

Fuente Montserrat

Color institucional (#76bc21)
*/
.texto-verde {
font-family: 'Montserrat', sans-serif;
color: #76bc21;
display: inline-block;
}

/**
Estilo de texto blanco
*/
.texto-blanco {
font-family: 'Montserrat', sans-serif;
color: #ffffff;
display: inline-block;
}

/**

Estilo de texto con contorno blanco (uso general)

Texto transparente con borde blanco

Ideal para efectos tipo "outline"
*/
.texto-contorno-blanco {
font-family: 'Montserrat', sans-serif !important;
color: transparent !important;
-webkit-text-stroke: 1px white !important;
text-stroke: 1px white !important;
display: inline-block !important;
}



/* ==========================================================================
TIPOGRAFÍA: TAMAÑOS ESTÁNDAR PARA H1 y H2
========================================================================== */
/**

Establece el tamaño base para encabezados H1 y H2 con clases personalizadas.
Desktop: 60px
Mobile: 25px
*/
h1 .texto-verde,
h1 .texto-blanco,
h1 .texto-contorno-blanco,
h2 .texto-verde,
h1 .texto-blanco,
h2 .texto-contorno-blanco {
font-size: 60px;
}

@media (max-width: 768px) {
h1 .texto-verde,
h1 .texto-contorno-blanco,
h2 .texto-verde,
h2 .texto-contorno-blanco {
font-size: 25px;
}
}


/* ==========================================================================
   cita hans hatch
========================================================================== */

.cita-hatch {
  border-left: 5px solid #76bc21;
  padding-left: 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  color: #ffffff;
  max-width: 700px;
  margin: 0 auto;
}

.cita-hatch p {
  margin: 0;
  line-height: 1.6;
  color: #ffffff; /* aseguramos visibilidad */
}

.cita-hatch .resaltado {
  color: #76bc21;
  font-weight: 700;
}

.cita-hatch h2.autor-cita {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}

.cita-hatch h2.autor-cita a {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
}

.cita-hatch h2.autor-cita span {
  color: #bbbbbb;
  font-weight: 400;
}