/*
Theme Name: Hub Child
Theme URI: http://hub.liquid-themes.com/
Author: Liquid Themes
Author URI: https://themeforest.net/user/liquidthemes
Template: hub
Description: Smart, Powerful and Unlimited Customizable WordPress Theme.
Version: 1.0
License: GNU General Public License
License URI: license.txt
Text Domain: hub-child
Tags: responsive, retina, rtl-language-support, blog, portfolio, custom-colors, live-editor
*/

/* ============================================================
   OMEGA SUR — child theme styles
   Fuente única: Cairo (self-hosted) — Regular 400 / SemiBold 600 / Bold 700
   ============================================================ */

/* ---- Fuentes self-hosted ---- */
@font-face {
  font-family: 'Cairo';
  src: url('fonts/cairo-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('fonts/cairo-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cairo';
  src: url('fonts/cairo-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---- Design tokens ---- */
:root {
  /* Colores principales */
  --color-texto:       #231F20;
  --color-blanco:      #FFFFFF;
  --color-gris:        #707070;
  --color-amarillo:    #F8C523;
  --color-azul-medio:  #3D7CC9;
  --color-rosa:        #F26178;
  --color-azul-oscuro: #003595;
  --color-rojo:        #EC1C24;
  --color-negro:       #000000;
  --color-cafe-oscuro: #211915;
  --color-fondo-claro: #FAFAFA;

  /* Tipografía */
  --fuente-principal: 'Cairo', sans-serif;

  /* Escala tipográfica (del XD) */
  --texto-xs:  14px;
  --texto-sm:  18px;
  --texto-md:  20px;
  --texto-lg:  21px;
  --texto-xl:  23px;
  --texto-2xl: 40px;
  --texto-3xl: 50px;

  /* Espaciado base */
  --espacio-base: 8px;

  /* Breakpoints */
  --bp-mobile: 768px;
  --bp-tablet: 1024px;
}

/* ---- Reset / base ---- */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ============================
   ESPACIO LIBRE — #seccion-espacio-libre
   2 columnas: imagen (íconos integrados) | texto + pasos + botón WA
   ============================ */

#seccion-espacio-libre {
  padding: 80px 0;
  background: var(--color-fondo-claro);
}

.espacio-row {
  display: flex;
  align-items: center;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.espacio-col-imagen {
  flex: 0 0 48%;
}

.espacio-col-texto {
  flex: 1;
}

.espacio-imagen-foto img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.espacio-titulo {
  font-family: var(--fuente-principal);
  font-weight: 400;
  font-size: var(--texto-3xl);
  line-height: 1.1;
  color: var(--color-azul-oscuro);
  margin: 0 0 24px;
}

.espacio-titulo strong {
  font-weight: 700;
}

.espacio-descripcion {
  font-family: var(--fuente-principal);
  font-weight: 400;
  font-size: var(--texto-lg);
  line-height: 1.35;
  color: var(--color-azul-oscuro);
  margin: 0 0 32px;
}

.espacio-descripcion strong {
  font-weight: 700;
}

.espacio-como-titulo {
  font-family: var(--fuente-principal);
  font-weight: 400;
  font-size: var(--texto-2xl);
  color: var(--color-azul-oscuro);
  margin: 0 0 24px;
}

.espacio-pasos {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
}

.espacio-pasos {
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
}

.espacio-paso {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-family: var(--fuente-principal);
  font-weight: 400;
  font-size: var(--texto-sm);
  line-height: 1.4;
  color: var(--color-azul-oscuro);
  margin-bottom: 0;
}

.espacio-paso-indicador {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  flex-shrink: 0;
}

.espacio-paso-num {
  width: 36px;
  height: 36px;
  border: 2px solid var(--color-azul-medio);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--texto-sm);
  color: var(--color-azul-medio);
  line-height: 1;
  background: #fff;
  flex-shrink: 0;
}

.espacio-paso-conector {
  width: 2px;
  flex: 1;
  min-height: 16px;
  margin: 4px 0;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--color-azul-medio) 0, var(--color-azul-medio) 5px,
    transparent 5px, transparent 10px
  );
}

.espacio-paso-texto {
  padding-top: 6px;
  padding-bottom: 20px;
}

.espacio-boton {
  display: inline-block;
  background: var(--color-rosa);
  color: var(--color-blanco);
  font-family: var(--fuente-principal);
  font-weight: 700;
  font-size: var(--texto-md);
  padding: 14px 32px;
  border-radius: 40px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.espacio-boton:hover {
  opacity: 0.88;
  color: var(--color-blanco);
}

@media (max-width: 768px) {
  #espacio-libre {
    padding: 48px 0;
  }

  .espacio-titulo {
    font-size: 32px;
  }

  .espacio-como-titulo {
    font-size: 26px;
  }
}

/* fin ESPACIO LIBRE */