/*
Theme Name: Exertio child
Theme URI: https://www.tudominio.com/
Description: Tema hijo para Exertio
Version: 1.0.0
Author: cedav95
Author URI: https://www.tudominio.com/
Template: exertio
*/

/* SOLUCIÓN PARA EL MENÚ DESPLEGABLE */
.sb-header {
    position: relative;
    z-index: 9999 !important;
}
.btn-theme-secondary{
    color:white !important;

}
.btn-theme{
    border: 1px solid #dd3333;
     background-color: #dd3333;
    color: #f9f9f9;
}

/* Footer social media icons - SVG hover effects */
.fr-footer .fr-footer-icons ul li a svg:hover {
    background-color: #fe696a !important;
    border-color: #fe696a !important;
}

.btn.btn-dark{
    color: rgb(255, 255, 255) !important;
}


/* ===== QvaClick: Fix orden móvil en .about-us-grids ===== */
@media (max-width: 991.98px){
  /* La 2ª fila es la que contiene los 6 bloques */
  .about-us-grids > .container > .row:nth-of-type(2){
    display: flex !important;
    flex-wrap: wrap !important;
  }

  /* Que cada columna ocupe ancho completo en móvil */
  .about-us-grids > .container > .row:nth-of-type(2) > [class*="col-"]{
    width: 100% !important;
  }

  /* ORDEN deseado: 1,2,4,3,5,6  (IMG,TXT,IMG,TXT,IMG,TXT) */
  .about-us-grids > .container > .row:nth-of-type(2) > [class*="col-"]:nth-child(1){ order: 1 !important; } /* IMG 01 */
  .about-us-grids > .container > .row:nth-of-type(2) > [class*="col-"]:nth-child(2){ order: 2 !important; } /* TXT 01 */
  .about-us-grids > .container > .row:nth-of-type(2) > [class*="col-"]:nth-child(4){ order: 3 !important; } /* IMG 02 */
  .about-us-grids > .container > .row:nth-of-type(2) > [class*="col-"]:nth-child(3){ order: 4 !important; } /* TXT 02 */
  .about-us-grids > .container > .row:nth-of-type(2) > [class*="col-"]:nth-child(5){ order: 5 !important; } /* IMG 03 */
  .about-us-grids > .container > .row:nth-of-type(2) > [class*="col-"]:nth-child(6){ order: 6 !important; } /* TXT 03 */

  /* Aire y robustez visual */
  .about-us-grids .about-grid-margin{ margin-bottom: 14px !important; }
  .about-us-grids .about-grid-content{ margin-bottom: 28px !important; }
  .about-us-grids img{ display: block !important; width: 100% !important; height: auto !important; }
}

/* ===== QvaClick Dashboard: layout móvil (NO toca tamaño del avatar) ===== */
@media (max-width: 991.98px){

  /* Usuario + botón a la izquierda */
  nav.navbar.fixed-top.d-flex.flex-row .navbar-menu-wrapper{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0;
  }

  /* Fila compacta */
  nav.navbar.fixed-top.d-flex.flex-row .navbar-menu-wrapper .navbar-nav.navbar-nav-right{
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    margin-bottom: 0;
  }

  /* Orden */
  nav.navbar.fixed-top.d-flex.flex-row .navbar-menu-wrapper .nav-item.nav-profile{ order: 1; }
  nav.navbar.fixed-top.d-flex.flex-row .navbar-menu-wrapper .nav-btn-post{
    order: 2;
    display: inline-flex !important;
    align-items: center;
    margin-right: 0 !important;
  }
  nav.navbar.fixed-top.d-flex.flex-row .navbar-toggler-right{
    order: 3;
    position: static !important;
    margin-left: auto !important;
    transform: none !important;
  }

  /* Oculta meta del perfil para no empujar, pero NO tocamos el <img> */
  nav.navbar.fixed-top.d-flex.flex-row .navbar-nav-right .nav-profile-meta{
    display: none !important;
  }

  /* Oculta el botón de minimizar (no es el menú móvil) */
  nav.navbar.fixed-top.d-flex.flex-row .navbar-brand-inner-wrapper
    .navbar-toggler[data-toggle="minimize"]{
      display: none !important;
  }
}

/* ===== QvaClick Dashboard: Sidebar en flujo normal (sin scrollbar propio) ===== */
@media (max-width: 991.98px){

  /* Sidebar offcanvas en modo "flow": oculto por defecto, sin transform ni fixed */
  #sidebar.sidebar-offcanvas{
    display: none !important;           /* oculto cuando no está "activo" */
    position: static !important;        /* quita fixed/absolute */
    transform: none !important;         /* cancela translateX del offcanvas */
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;            /* SIN altura fija */
    overflow: visible !important;       /* SIN scroll interno */
    box-shadow: none !important;
    border-top: 1px solid rgba(0,0,0,.06);
    background: #fff;
  }

  /* Cuando esté abierto, muéstralo como bloque normal */
  body.qv-s-open #sidebar.sidebar-offcanvas{
    display: block !important;
  }

  /* Mientras el sidebar esté abierto, el navbar NO es fixed */
  body.qv-s-open nav.navbar.fixed-top{
    position: static !important;
  }

  /* No empujes el layout con márgenes pensados para navbar fixed */
  body.qv-s-open .page-body-wrapper,
  body.qv-s-open .main-panel,
  body.qv-s-open .content-wrapper{
    margin-top: 0 !important;
    margin-left: 0 !important; /* por si el offcanvas del tema intentaba empujar el main */
  }
}


/* ===== QvaClick: Fix solapamiento/aire del título (.style-text) en cards de proyectos =====
   - Da espacio controlable entre el texto previo (lista) y el título
   - Evita que el título quede tapado por floats/overflows
   - No altera clases ni layout general
*/

/* Variables de ajuste rápido */
:root{
  --qv-style-text-gap: 10px;   /* espacio entre la <ul> y .style-text */
  --qv-style-text-pad: 2px;    /* colchón superior dentro de .style-text */
}

.fr-latest2-content-box .fr-latest2-rating{
  overflow: visible !important;  /* por si el contenedor recorta el título */
}

/* Asegura separación de la lista previa y normaliza margen */
.fr-latest2-content-box .fr-latest2-rating > ul{
  margin: 0 0 var(--qv-style-text-gap) !important;
  padding: 0;
  list-style: none;
}

/* El título (style-text) despega de cualquier float y sube por encima si hay overlays */
.fr-latest2-content-box .fr-latest2-rating .style-text{
  margin-top: var(--qv-style-text-gap) !important;
  padding-top: var(--qv-style-text-pad) !important;
  clear: both;                 /* clave si hay floats en el bloque de arriba */
  position: relative; 
  z-index: 1;                  /* por si hay sombras o pseudo-elementos cubriéndolo */
}

/* Legibilidad del enlace del título sin cambiar su “look & feel” del tema */
.fr-latest2-content-box .fr-latest2-rating .style-text a{
  display: block;              /* evita que se monte con elementos inline cercanos */
  line-height: 1.35;
  /*opcional: si quieres cortar a 2 líneas en móvil, descomenta:*/
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  
}

/* Pequeño respiro al icono del check, por si estaba “pisando” el texto */
.fr-latest2-content-box .fr-latest2-rating i.fa{
  margin-right: .4rem;
}


/* ========= QvaClick · Contact Form 7 — Estilo sutil + botón secundario =========
   - Sin negritas en labels ni botón.
   - Espaciados coherentes y foco accesible.
   - Botón "Enviar" con look de botón secundario (outline).
   - Ajusta variables para encajar con tu paleta.
=============================================================================== */

.wpcf7-form{
  /* Paleta/variables (ajústalas a tu marca/tema) */
  --qv-label: #4b5563;           /* color de etiquetas (gris medio, sin negrita) */
  --qv-text: #111827;           /* color de texto de campos */
  --qv-placeholder: #9ca3af;    /* placeholder suave */
  --qv-border: #d1d5db;         /* borde de inputs */
  --qv-bg: #fff;                /* fondo de inputs */
  --qv-focus: #2563eb;          /* color del anillo de foco (sutil) */

  --qv-radius: 10px;            /* radios de inputs */
  --qv-gap: 16px;               /* separación entre filas (p) */
  --qv-field-gap: 10px;         /* separación label → campo */
  --qv-pad-y: 12px;             /* padding vertical inputs */
  --qv-pad-x: 14px;             /* padding horizontal inputs */

  /* “Botón secundario” (outline) — ajusta a tu secundario real si quieres */
  --btn-sec-color: #dd3333;     /* gris “secondary” estilo Bootstrap */
  --btn-sec-border: #dd3333;
  --btn-sec-bg: transparent;
  --btn-sec-hover-bg: #dd3333;
  --btn-sec-hover-color: #fff;
}

/* Oculta campos ocultos de CF7 */
.wpcf7-form .hidden-fields-container{ display:none; }

/* Filas con separación coherente */
.wpcf7-form p{ margin: 0 0 var(--qv-gap) 0; }

/* Label: sin negrita, color sutil */
.wpcf7-form label{
  display:block;
  font-weight: 400;             /* sin negritas */
  color: var(--qv-label);
  margin-bottom: 0;             /* el espacio va en el wrap */
}

/* Espacio entre el texto del label y el campo */
.wpcf7-form label .wpcf7-form-control-wrap{
  display:block;
  margin-top: var(--qv-field-gap);
}
/* fallback por si algún campo no usa el wrap */
.wpcf7-form label > input,
.wpcf7-form label > textarea,
.wpcf7-form label > select{
  display:block;
  margin-top: var(--qv-field-gap);
}

/* Inputs/textarea: estilo limpio */
.wpcf7-form .wpcf7-form-control.wpcf7-text,
.wpcf7-form .wpcf7-form-control.wpcf7-email,
.wpcf7-form .wpcf7-form-control.wpcf7-textarea{
  width:100%;
  background: var(--qv-bg);
  color: var(--qv-text);
  border: 1px solid var(--qv-border);
  border-radius: var(--qv-radius);
  padding: var(--qv-pad-y) var(--qv-pad-x);
  line-height: 1.45;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  box-shadow: 0 0 0 0 transparent;
}
.wpcf7-form ::placeholder{ color: var(--qv-placeholder); opacity:.95; }

/* Foco accesible pero discreto */
.wpcf7-form .wpcf7-form-control:focus{
  outline: none;
  border-color: var(--qv-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--qv-focus) 20%, transparent);
}

/* Textarea: altura mínima y resize vertical */
.wpcf7-form .wpcf7-textarea{ min-height: 140px; resize: vertical; }

/* Validación: borde y mensaje sutiles */
.wpcf7-form .wpcf7-not-valid{
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, #ef4444 18%, transparent) !important;
}
.wpcf7-form .wpcf7-not-valid-tip{
  display:block; margin-top:6px; font-size:12px; color:#ef4444;
}

/* Botón "Enviar" con estilo de botón secundario (outline), sin negrita */
.wpcf7-form .wpcf7-submit{
  appearance: none;
  display: inline-flex; align-items:center; justify-content:center;
  padding: 10px 18px;
  border-radius: 9999px;
  border: 1px solid var(--btn-sec-border);
  background: var(--btn-sec-bg);
  color: var(--btn-sec-color);
  font-weight: 400;            /* sin negrita */
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .05s ease, box-shadow .15s ease;
  box-shadow: 0 2px 8px color-mix(in srgb, #000 10%, transparent);
}
.wpcf7-form .wpcf7-submit:hover{
  background: var(--btn-sec-hover-bg);
  color: var(--btn-sec-hover-color);
}
.wpcf7-form .wpcf7-submit:active{ transform: translateY(1px); }

/* Spinner junto al botón */
.wpcf7-form .wpcf7-spinner{ margin-left:10px; position:relative; top:2px; }

/* Mensaje de respuesta con estética neutra */
.wpcf7-form .wpcf7-response-output{
  margin:12px 0 0; padding:10px 12px; border-radius: var(--qv-radius);
  border:1px solid var(--qv-border); color: var(--qv-label); background:#fff;
}

/* Responsivo fino: botón full width opcional en móvil */
@media (max-width:575.98px){
  .wpcf7-form{ --qv-gap:14px; --qv-pad-y:11px; --qv-pad-x:14px; }
  /* si prefieres que NO sea 100%, comenta la línea siguiente */
  .wpcf7-form .wpcf7-submit{ width:100%; }
}


/* ===== QvaClick: Alinear tres cards lado a lado ===== */
.cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* Espaciado entre las cards */
  gap: 16px; /* Espaciado opcional */
}

.cards-container .card {
  flex: 1 1 calc(33.333% - 16px); /* Tres columnas con espacio */
  box-sizing: border-box; /* Incluye padding y border en el ancho */
}

/* Responsivo: apilar cards en pantallas pequeñas */
@media (max-width: 767.98px) {
  .cards-container {
    flex-direction: column; /* Apilar verticalmente */
  }

  .cards-container .card {
    flex: 1 1 100%; /* Cada card ocupa el ancho completo */
  }
}

/* ===== QvaClick: Estilo sutil para todos los métodos de pago ===== */

/* Ocultar radio buttons de todos los métodos */
.wc_payment_methods input[type="radio"] {
    display: none !important;
}

/* Aplicar estilo QvaPay a todos los métodos */
.wc_payment_methods .wc_payment_method label {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-weight: 500 !important;
    padding: 8px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    cursor: pointer !important;
}

/* Hover para todos los métodos */
.wc_payment_methods .wc_payment_method label:hover {
    border-color: #007cba !important;
}

/* Estado seleccionado para todos los métodos */
.wc_payment_methods .wc_payment_method input:checked + label {
    border-color: #007cba !important;
    background: #f0f8ff !important;
}

/* Pequeño respiro/margen entre métodos de pago */
.wc_payment_methods .wc_payment_method {
    margin-bottom: 8px !important;
}

/* Quitar margen del último método */
.wc_payment_methods .wc_payment_method:last-child {
    margin-bottom: 0 !important;
}

/* ===== QvaClick: Espaciado y estilo en checkout - términos y condiciones ===== */

/* Espaciado entre el contenido de términos y el checkbox */
.form-row.place-order .woocommerce-terms-and-conditions-wrapper {
    margin-bottom: 20px !important;
    padding-bottom: 15px !important;
}

/* Espacio adicional entre el contenido de términos/privacidad y el checkbox */
.woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text {
    margin-bottom: 15px !important;
}

.woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions {
    margin-bottom: 15px !important;
}

/* Espaciado del checkbox de términos */
.form-row.validate-required {
    margin-top: 15px !important;
    margin-bottom: 20px !important;
    padding-top: 10px !important;
}

/* Enlace de términos y condiciones permanentemente en rojo */
.woocommerce-terms-and-conditions-link {
    color: #dd3333 !important;
    text-decoration: underline !important;
}

.woocommerce-terms-and-conditions-link:hover {
    color: #aa2222 !important;
    text-decoration: underline !important;
}

/* Estilo mejorado para el texto del checkbox de términos */
.woocommerce-form__label-for-checkbox.checkbox {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    background: linear-gradient(135deg, #f8f9fa, #ffffff) !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 15px 18px !important;
    margin: 10px 0 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.woocommerce-form__label-for-checkbox.checkbox:hover {
    border-color: #dd3333 !important;
    box-shadow: 0 4px 8px rgba(221, 51, 51, 0.1) !important;
    transform: translateY(-1px) !important;
}

/* Checkbox personalizado */
.woocommerce-form__input-checkbox {
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #dee2e6 !important;
    border-radius: 4px !important;
    background: white !important;
    margin: 0 !important;
    position: relative !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.woocommerce-form__input-checkbox:checked {
    background: #dd3333 !important;
    border-color: #dd3333 !important;
}

.woocommerce-form__input-checkbox:checked::after {
    content: '✓' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: white !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

/* Texto del checkbox mejorado */
.woocommerce-terms-and-conditions-checkbox-text {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #495057 !important;
    font-weight: 500 !important;
    flex: 1 !important;
}

/* Asterisco obligatorio con estilo */
.required {
    color: #dd3333 !important;
    font-weight: bold !important;
    font-size: 16px !important;
    margin-left: 4px !important;
}


/*.fr-hero3-main correccion del margen*/
.fr-hero3-main {
    margin-top: 200px !important;
}