/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* ============================================================
   CRITERIO UNO — estilos de soporte para el Theme Builder (Xpro)
   y los widgets nativos de Elementor. Complementa (no sustituye)
   los controles de estilo del propio editor visual.
   ============================================================ */

:root {
  --c1-ink: #102A43;
  --c1-cream: #F6F3EC;
  --c1-cobalt: #2357D9;
  --c1-teal: #0F766E;
  --c1-slate: #52606D;
  --c1-white: #FFFFFF;
  --c1-ink-12: rgba(16,42,67,.12);
  --c1-ink-20: rgba(16,42,67,.2);
  --c1-cream-16: rgba(246,243,236,.16);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body { background: var(--c1-cream); }

a { transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease; }

:focus-visible { outline: 2px solid var(--c1-cobalt); outline-offset: 3px; }

/* ---- Saltar al contenido ---- */
.c1-skip-link {
  position: absolute; top: -48px; left: 16px; z-index: 10000;
  background: var(--c1-ink); color: var(--c1-cream);
  padding: 12px 20px; border-radius: 11px; font-weight: 600; text-decoration: none;
  transition: top 200ms ease;
}
.c1-skip-link:focus { top: 16px; }

/* ============================================================
   HEADER
   ============================================================ */
.c1-header { position: sticky; top: 0; z-index: 500; transition: box-shadow 200ms ease, border-color 200ms ease; border-bottom: 1px solid transparent; }
.c1-header.is-scrolled { border-bottom-color: var(--c1-ink-12); box-shadow: 0 1px 2px rgba(16,42,67,.06); }

.c1-brand { font-family: 'IBM Plex Sans', sans-serif !important; font-weight: 600 !important; color: var(--c1-ink) !important; text-decoration: none !important; font-size: 1.25rem !important; }

.c1-nav { display: none; }
@media (min-width: 1025px) {
  .c1-nav { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; }
  .c1-nav a {
    position: relative; display: inline-flex; align-items: center; height: 80px;
    font-family: 'Inter', sans-serif; font-weight: 500; font-size: .9375rem;
    color: var(--c1-ink); text-decoration: none;
  }
  .c1-nav a::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 22px; height: 2px;
    background: var(--c1-cobalt); transform: scaleX(0); transition: transform 200ms ease;
  }
  .c1-nav a:hover::after, .c1-nav a.is-active::after { transform: scaleX(1); }
  .c1-nav a.is-active { color: var(--c1-cobalt); }
}

.c1-header-cta { display: none; }
@media (min-width: 1025px) { .c1-header-cta { display: inline-flex !important; } }

/* Menú móvil: técnica CSS-only con checkbox oculto (sin JS) */
.c1-burger { display: inline-flex; }
@media (min-width: 1025px) { .c1-burger { display: none !important; } }

.c1-burger-label {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--c1-ink-20); border-radius: 11px;
  cursor: pointer; background: transparent; padding: 0;
}
.c1-burger-label svg { width: 22px; height: 22px; pointer-events: none; }
.c1-burger-icon-close { display: none; }

.c1-mobile-panel {
  position: fixed; inset: 0; z-index: 999; background: var(--c1-cream);
  flex-direction: column; padding: 16px 24px 32px;
  transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  display: none;
}
.c1-mobile-panel.is-open { display: flex; opacity: 1; pointer-events: auto; transform: translateY(0); }

#c1-menu-btn[aria-expanded="true"] .c1-burger-icon-open { display: none; }
#c1-menu-btn[aria-expanded="true"] .c1-burger-icon-close { display: block; }

body.c1-menu-open { overflow: hidden; }

.c1-mobile-panel-top { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.c1-mobile-nav { display: flex; flex-direction: column; margin-top: 24px; }
.c1-mobile-nav a {
  display: flex; align-items: center; min-height: 56px;
  font-family: 'IBM Plex Sans', sans-serif; font-weight: 500; font-size: 1.25rem;
  color: var(--c1-ink); text-decoration: none; border-bottom: 1px solid var(--c1-ink-12);
}
.c1-mobile-cta { margin-top: 24px; }
.c1-mobile-cta .elementor-button { width: 100%; justify-content: center; }

@media (min-width: 1025px) { .c1-mobile-panel { display: none; } }

/* ============================================================
   BOTONES (refuerzo sobre el widget Button nativo)
   ============================================================ */
.c1-btn-primary .elementor-button, .elementor-button.c1-btn-primary {
  background: var(--c1-cobalt) !important; color: #fff !important; border-radius: 11px !important;
  font-family: 'Inter', sans-serif !important; font-weight: 600 !important; box-shadow: none !important;
}
.c1-btn-primary .elementor-button:hover, .elementor-button.c1-btn-primary:hover { background: #1c47b3 !important; }

.c1-btn-secondary .elementor-button, .elementor-button.c1-btn-secondary {
  background: transparent !important; color: var(--c1-ink) !important; border: 1px solid var(--c1-ink-20) !important;
  border-radius: 11px !important; font-family: 'Inter', sans-serif !important; font-weight: 600 !important; box-shadow: none !important;
}
.c1-btn-secondary .elementor-button:hover, .elementor-button.c1-btn-secondary:hover { background: rgba(16,42,67,.04) !important; }

.c1-section-ink .c1-btn-secondary .elementor-button,
.c1-section-ink .elementor-button.c1-btn-secondary { color: #fff !important; border-color: var(--c1-cream-16) !important; }

/* ============================================================
   ETIQUETAS DE SECCIÓN / EYEBROWS
   ============================================================ */
.c1-eyebrow {
  font-family: 'IBM Plex Sans', sans-serif !important; font-weight: 600 !important;
  font-size: .8125rem !important; letter-spacing: .08em !important; text-transform: uppercase !important;
  color: var(--c1-cobalt) !important;
}
.c1-section-ink .c1-eyebrow { color: var(--c1-cream) !important; opacity: .85; }

/* ============================================================
   TARJETAS
   ============================================================ */
.c1-card {
  background: #fff; border: 1px solid var(--c1-ink-12); border-radius: 16px;
  box-shadow: 0 4px 16px rgba(16,42,67,.08);
}
.c1-card-inverse { background: rgba(246,243,236,.06); border: 1px solid var(--c1-cream-16); border-radius: 16px; }

.c1-badge {
  display: inline-flex; align-items: center; font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase; color: #fff;
  background: var(--c1-teal); border-radius: 999px; padding: 4px 10px;
}

.c1-check-item { display: flex; align-items: flex-start; gap: 10px; }
.c1-check-item svg { flex-shrink: 0; color: var(--c1-teal); margin-top: 3px; width: 16px; height: 16px; }

/* ============================================================
   ACORDEÓN (widget nativo Elementor) — refuerzo visual
   ============================================================ */
.c1-faq .elementor-accordion-item { border-bottom: 1px solid var(--c1-ink-12); }
.c1-faq .elementor-tab-title { font-family: 'IBM Plex Sans', sans-serif !important; font-weight: 600 !important; color: var(--c1-ink) !important; }
.c1-faq .elementor-tab-content { color: var(--c1-slate) !important; }
.c1-faq .elementor-accordion-icon { color: var(--c1-cobalt) !important; }

/* ============================================================
   FORMULARIO (JetFormBuilder)
   ============================================================ */
.c1-form-card { background: #fff; border-radius: 18px; box-shadow: 0 4px 16px rgba(16,42,67,.08); padding: 32px; }
.c1-form-card .jet-form-builder__field,
.c1-form-card select,
.c1-form-card textarea,
.c1-form-card input[type="text"],
.c1-form-card input[type="email"],
.c1-form-card input[type="tel"] {
  border-radius: 11px !important; border: 1px solid var(--c1-ink-20) !important; min-height: 46px;
}
.c1-form-card .jet-form-builder__field-label,
.c1-form-card .jet-form-builder__label,
.c1-form-card .jet-form-builder__label-text {
  font-family: 'Inter', sans-serif !important; font-weight: 600 !important; color: var(--c1-ink) !important;
}
.c1-form-card .jet-form-builder__required { color: var(--c1-teal) !important; }
.c1-form-card .jet-form-builder__desc { font-family: 'Inter', sans-serif !important; color: var(--c1-slate) !important; }
.c1-form-card button[type="submit"], .c1-form-card .jet-form-builder__submit-wrap button {
  background: var(--c1-cobalt) !important; color: #fff !important; border-radius: 11px !important; font-weight: 600 !important;
  border: none !important; font-family: 'Inter', sans-serif !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.c1-footer a { color: rgba(246,243,236,.6); text-decoration: none; }
.c1-footer a:hover { color: #fff; text-decoration: underline; }

/* ============================================================
   UTILIDADES
   ============================================================ */
.c1-section-ink,
.c1-section-ink p,
.c1-section-ink li,
.c1-section-ink div,
.c1-section-ink span { color: var(--c1-cream) !important; }
.c1-section-ink h1, .c1-section-ink h2, .c1-section-ink h3, .c1-section-ink h4 { color: #fff !important; }
.c1-section-ink a:not(.elementor-button) { color: rgba(246,243,236,.75); }
.c1-section-ink a:not(.elementor-button):hover { color: #fff; }

/* ============================================================
   LISTAS (widget nativo Icon List) — texto dentro de la paleta
   ============================================================ */
.elementor-icon-list-item { color: var(--c1-ink); }

/* ============================================================
   FILAS DE TARJETAS (Container nativo en flex-direction:row)
   Elementor aplica "width:100%" por defecto a todo contenedor
   hijo (.e-con), lo que fuerza el apilado vertical en filas de
   varias columnas. Forzamos reparto equitativo del espacio.
   ============================================================ */
.c1-row > .e-con-inner > .e-con.e-child {
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
  flex-basis: 0 !important;
  width: auto !important;
  max-width: 100% !important;
}
@media (max-width: 767px) {
  .c1-row > .e-con-inner > .e-con.e-child {
    flex-basis: 100% !important;
  }
}