/*
 Theme Name:   Wee See Child Theme
 Theme URI:    http://weseemarketing.com/
 Description:  Agency Branding 2025
 Author:       Alekpow
 Author URI:   www.linkedin.com/in/alejandroalbisu
 Template:     Divi
 Version:      4.18.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         Grey, Blue, one-columns, responsive-layout, accessibility-ready
 Text Domain:  WeSeeChildTheme
*/

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css");

/* ===================
   VARIABLES GLOBALES
====================== */
:root {
  --color-primary: #2A2957;
  --color-secondary-1: #7EBEC5;
  --color-secondary-2: #2C6B96;
  --color-accent: #7ebec5;
  --color-neutral-light: #F8F8F2;
  --color-neutral-dark: #1E1E1E;
}

/* ===================
   ESTILOS GENERALES
====================== */
body {
  background-color: var(--color-neutral-light);
  color: var(--color-neutral-dark);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1.8;
}

.et_pb_text p {
  font-size: 18px;
  line-height: 1.6;
}


/* ===================
   HEADINGS
====================== */
/* Base para módulos de texto y cabeceras de módulo */
.et_pb_module_header,
.et_pb_text h1,
.et_pb_text h2,
.et_pb_text h3 {
  color: var(--color-primary);
  font-weight: 980;
  line-height: 1em;
  letter-spacing: -0.08em;
}

/* H1 dentro de Divi */
.et_pb_text h1,
.et_pb_module_header h1 {
  color: var(--color-secondary-2);
  font-size: 60px;
}

/* H2 dentro de Divi */
.et_pb_text h2,
.et_pb_module_header h2 {
  color: var(--color-secondary-2);
  font-size: 56px;
  line-height: 0.9em;
}

/* H3 dentro de Divi */
.et_pb_text h3,
.et_pb_module_header h3 {
  font-size: 40px;
  line-height: 1.9em;
}

/* H4 dentro de Divi */
.et_pb_text h4,
.et_pb_module_header h4 {
  font-size: 38px;
  font-weight: 750;
}

/* H5 dentro de Divi */
.et_pb_text h5,
.et_pb_module_header h5 {
  font-family: 'Courier Prime', monospace;
  font-size: 18px;
  letter-spacing: 0.03em;
}

/* H6 dentro de Divi */
.et_pb_text h6,
.et_pb_module_header h6 {
  font-size: 18px;
}

@media (max-width: 574px) {
  body { font-size: 14px; }
  .et_pb_text h1,
  .et_pb_module_header h1 {
    font-size: 35px;
    padding-bottom: 20px;
  }
  .et_pb_text h2,
  .et_pb_module_header h2 {
    font-size: 28px;
    padding-bottom: 20px;
  }
  .et_pb_text h3,
  .et_pb_module_header h3 {
    font-size: 25px;
    padding-bottom: 20px;
  }
}

/* ================================
   AJUSTES GENERALES PARA SLIDER HERO
=============================== */
/* 1. Altura mínima en dispositivos móviles */
@media only screen and (max-width: 767px) {
  .et_pb_fullwidth_slider,
  .et_pb_fullwidth_slider_0,
  .et_pb_slider .et_pb_slide {
    height: auto !important;
    min-height: 480px !important;
  }

  .et_pb_slider .et_pb_slide:first-child {
    display: block !important;
  }
}

/* ================================
   Enlaces dentro de bloques de texto de Divi
=============================== */

.et_pb_text a,
.et_pb_module_header a {
  color: #366db4;
  text-decoration: none;
}

.et_pb_text a:hover,
.et_pb_module_header a:hover {
  color: var(--color-accent);
}

/* ===================
   BOTONES DIVI - Unificado Child Theme
====================== */

/* Estado normal - aplica a todos los tipos de botones Divi */
a.et_pb_button,
a.et_pb_promo_button,
a.et_pb_pricing_table_button,
a.et_pb_more_button {
  background-color: #e2e6ea !important;  /* color de fondo */
  color: #212529 !important;             /* color del texto */
  border: 1px solid #dae0e5 !important;  /* borde */
  border-radius: 0.25rem !important;        /* bordes redondeados */
  text-decoration: none !important;      /* quitar subrayado */
  cursor: pointer;
}

/* Estado hover - todos los botones Divi */
a.et_pb_button:hover,
a.et_pb_promo_button:hover,
a.et_pb_pricing_table_button:hover,
a.et_pb_more_button:hover {
  background-color: #FFFFFF !important;  /* fondo hover */
  color: #212529 !important;             /* color del texto */
  border-color: #212529 !important;      /* borde hover */
}

/* ===================
   SECCIONES
====================== */
.section-alternate,
.et_pb_section.section-alternate,
.et_pb_section.custom-dark-section {
  background-color: var(--color-secondary-2);
  color: var(--color-neutral-light);
}

/* ===================
   SECCIÓN CLIENTES
====================== */
.clientes {
  padding-bottom: 10rem;
}

.bg-degradado {
  background-image: linear-gradient(#2c6b96, #7EBEC5);
  border-radius: 25px;
}

.clientes-flex {
  margin: 0;
  padding: 3rem 1rem;
  gap: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-evenly;
  align-content: center;
}

.clientes-flex a {
  flex: 1 1 12rem;
  min-height: 20vh;
  max-height: calc(80vh - 0.5rem);
}

.clientes p {
  font-weight: 600;
  color: #ffffff;
  text-align: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.padt-1rem {
  margin-top: 5em;
}

@media (min-width: 768px) {
  .clientes-flex a { 
    flex: 1 1 14rem; 
  }
}

@media (min-width: 992px) {
  .clientes-flex a { 
    flex: 1 1 18rem; 
  }
}

@media (min-width: 1200px) {
  .clientes-flex a {
    flex: 1 1 16rem;
    margin: 0 -19px -19px;
  }
  .clientes-last-row { 
    flex: 0.2 1 16rem; 
  }
  .clientes-last-row-rigth { 
    margin-right: -22rem; 
  }
  .clientes-last-row-left { 
    margin-left: -22rem; 
  }
}

/* Desktop / default */
.clientes-img {
  object-fit: cover;
  width: 70%;
  height: 100%;
}

/* ===================
   MOBILE AJUSTADO
====================== */
@media (max-width: 767px) {

  .clientes-flex {
    gap: 0.5rem;              /* ↓ menos separación entre filas */
    padding: 1.5rem 1rem;     /* ↓ menos padding vertical */
    align-items: center;
  }

  .clientes-flex a {
    flex: 1 1 45%;
    max-width: 48%;

    min-height: 0 !important; /* 🔥 CLAVE */
    height: auto;

    padding: 0.25rem 0;       /* compacto */
  }

  .clientes-img {
    width: 100%;
    max-height: 42px;         /* controla altura visual real */
    height: auto;
    object-fit: contain;
    display: block;           /* evita espacios inline */
  }
}

/* ===================
   FOOTER SECTION
====================== */
footer {
  background-color: var(--color-neutral-light);
  color: var(--color-neutral-dark);
  text-align: center;
  font-size: 16px;
}

footer .glyphicon,
footer .fa,
footer i {
  font-size: 20px;
  margin: 0 20px 10px 0;
  color: var(--color-primary);
}

/* Navegación del footer */
#nav_menu-2 {
  display: inline-block;
  position: relative;
}

#nav_menu-2 ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#nav_menu-2 li {
  position: relative;
  padding-left: 1.5rem;
  text-align: left;
}

#nav_menu-2 li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: bold;
}

#nav_menu-2 li a {
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: var(--color-neutral-dark);
  transition: all 0.3s ease;
}

#nav_menu-2 li a:hover {
  background-color: var(--color-primary);
  color: var(--color-neutral-light);
}

/* ===============================
   FORMULARIO CONTACTO – RADIO & CHECK
   Color seleccionado y focus
================================ */

/* Color del texto de las opciones */
.et_pb_contact_field_options label {
  color: #ffffff !important;
}

/* Círculo / checkbox base */
.et_pb_contact_field_options label::before {
  border-color: #ffffff !important;
}

/* 🔥 ITEM SELECCIONADO */
.et_pb_contact_field_options input:checked + label::before {
  background-color: #7EBEC5 !important;
  border-color: #7EBEC5 !important;
}

/* 🔥 TEXTO del item seleccionado */
.et_pb_contact_field_options input:checked + label {
  color: #7EBEC5 !important;
}

/* 🔥 FOCUS (teclado / tab) */
.et_pb_contact_field_options input:focus + label::before {
  box-shadow: 0 0 0 2px rgba(126, 190, 197, 0.6);
  border-color: #7EBEC5 !important;
}