/* 
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 */






/* ESTILOS SHORTCODES PAGOS ACEPTADOS Y RECHAZADOS */
.short-msg .elementor-shortcode{
  text-align: center;
}

.short-msg .elementor-shortcode h2{
  color: #fff !important;
  margin: 0;
  text-align: center;
  font-weight: 400;
}

.short-msg .elementor-shortcode > p:first-of-type{
  color: #fff !important;
  text-align: center;
  font-weight: 600;
  margin: 0 0 14px 0;
}

.short-msg .elementor-shortcode > p:not(:first-of-type){
  color: #fff !important;
  text-align: center;
  margin: 0 0 8px 0;
  font-size: 20px;
}





/* QUITAR BORDER EL FOCUS EN FORMULARIOS clase CSS: no-focus-line*/
/* SOLO formularios con la clase no-focus-line */
.no-focus-line .elementor-form input:focus,
.no-focus-line .elementor-form textarea:focus,
.no-focus-line .elementor-form select:focus,
.no-focus-line .elementor-field-group input:focus,
.no-focus-line .elementor-field-group textarea:focus,
.no-focus-line .elementor-field-group select:focus {
  outline: none !important;
  box-shadow: none !important;
}






/* =========================================
   QUITAR FLECHAS EN INPUT NUMBER
========================================= */

/* Chrome, Safari, Edge, Opera */
.float input[type="number"]::-webkit-outer-spin-button,
.float input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.float input[type="number"]{
  -moz-appearance: textfield;
  appearance: textfield;
}








/* ANIMACIÓN DE FORMULARIOS FLOAT LABELS */
/* =========================================
   Floating Label (Elementor Form)
   Clase widget: float
   Estructura: label + input dentro de .elementor-field-group
   ========================================= */

.float .elementor-field-group{
  position: relative;
}

/* Deja espacio arriba para el label cuando "sube" */
.float .elementor-field-textual{
  padding-top: 18px !important;
}

/* LABEL como placeholder (sobre el input) */
.float .elementor-field-group > .elementor-field-label{
  position: absolute;
  left: 20px;                 /* ajusta si tu input tiene padding diferente */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  margin: 0 !important;
  opacity: .75;
  line-height: 1;
  transition: top .18s ease, transform .18s ease, opacity .18s ease, font-size .18s ease;
  z-index: 2;
}

/* Placeholder visible por defecto */
.float .elementor-field-textual::placeholder{
  opacity: 1;
  transition: opacity .15s ease;
}

/* Al enfocar o cuando hay texto: label sube */
.float .elementor-field-group.is-focus > .elementor-field-label,
.float .elementor-field-group.is-filled > .elementor-field-label{
  top: 3px;
  transform: translateY(0);
  opacity: 1;
  font-size: 14px;
}

/* Al enfocar o con texto: ocultar placeholder para que no choque */
.float .elementor-field-group.is-focus .elementor-field-textual::placeholder,
.float .elementor-field-group.is-filled .elementor-field-textual::placeholder{
  opacity: 0;
}



/* SUBIR LABEL DE MENSAJE */
/* SUBIR LABEL DE MENSAJE */
/* =========================================
   FIX: Campo MENSAJE (textarea) - evitar que el texto se monte en el label
   Solo afecta .elementor-field-group-mensaje y .elementor-field-group-mensaje_contacto
========================================= */

/* Label en reposo arriba */
.float .elementor-field-group-mensaje > .elementor-field-label,
.float .elementor-field-group-mensaje_contacto > .elementor-field-label{
  top: 14px !important;                 
  transform: translateY(0) !important;  
}

/* Dar MÁS espacio arriba dentro del textarea */
.float .elementor-field-group-mensaje textarea.elementor-field-textual,
.float .elementor-field-group-mensaje_contacto textarea.elementor-field-textual{
  padding-top: 27px !important;
  padding-bottom: 12px !important;
}

/* Responsive */
@media (max-width: 767px){
  .float .elementor-field-group-mensaje > .elementor-field-label,
  .float .elementor-field-group-mensaje_contacto > .elementor-field-label{
    top: 14px !important;
    transform: translateY(0) !important;
  }

  .float .elementor-field-group-mensaje textarea.elementor-field-textual,
  .float .elementor-field-group-mensaje_contacto textarea.elementor-field-textual{
    padding-top: 27px !important;
    padding-bottom: 12px !important;
  }
}



/* RESPONSIVE DE LOS LABELS FLOTANTES EN FORMULARIO DE FOOTER SUSCRIBETE */
/* =========================================
   Floating Label (RESPONSIVE fine-tune)
   Solo móvil/tablet
   ========================================= */
@media (max-width: 767px){

  /* 1) Más espacio arriba para que el cursor/texto no quede pegado al label */
  .float .elementor-field-textual{
    padding-top: 24px !important;  /* 👈 sube/baja: 22–28 */
    padding-bottom: 10px !important; /* opcional: más “aire” */
  }

  /* 2) Transición más suave (menos brusca) */
  .float .elementor-field-group > .elementor-field-label{
    transition:
      top .28s cubic-bezier(.2,.8,.2,1),
      transform .28s cubic-bezier(.2,.8,.2,1),
      opacity .22s ease,
      font-size .28s cubic-bezier(.2,.8,.2,1);
  }

  /* 3) Cuando sube: que suba un poco más (más separación visual) */
  .float .elementor-field-group.is-focus > .elementor-field-label,
  .float .elementor-field-group.is-filled > .elementor-field-label{
    top: 3px;          /* 👈 más arriba (antes 7px). Prueba 2–5 */
    font-size: 14px;   /* 👈 el tamaño que ya te gustó (ajustable) */
  }

  /* 4) (Opcional) En reposo, bajar un poquito el label para que se sienta centrado */
  .float .elementor-field-group > .elementor-field-label{
    top: 54%;          /* 👈 50% era perfecto en desktop; en móvil a veces se ve mejor 52–56 */
  }
}


/* =========================================
   FLOATING LABEL - AJUSTES SOLO CAMPO TELÉFONO
   Widget: .float
   Group wrapper: .elementor-field-group-telefono
   Input: #form-field-telefono
========================================= */

/* 1) Ocultar placeholder SOLO del input teléfono */
.float .elementor-field-group-telefono input#form-field-telefono::placeholder,
.float .elementor-field-group-phone input#form-field-phone::placeholder,
.float .elementor-field-group-telefono_factura input#form-field-telefono_factura::placeholder{
  opacity: 0 !important;
}
.float .elementor-field-group-telefono input#form-field-telefono::-webkit-input-placeholder,
.float .elementor-field-group-phone input#form-field-phone::-webkit-input-placeholder,
.float .elementor-field-group-telefono_factura input#form-field-telefono_factura::-webkit-input-placeholder{ opacity: 0 !important; }

.float .elementor-field-group-telefono input#form-field-telefono::-moz-placeholder,
.float .elementor-field-group-phone input#form-field-phone::-moz-placeholder,
.float .elementor-field-group-telefono_factura input#form-field-telefono_factura::-moz-placeholder{ opacity: 0 !important; }

.float .elementor-field-group-telefono input#form-field-telefono:-ms-input-placeholder,
.float .elementor-field-group-phone input#form-field-phone:-ms-input-placeholder,
.float .elementor-field-group-telefono_factura input#form-field-telefono_factura:-ms-input-placeholder{ opacity: 0 !important; }

/* 2) Mover el LABEL a la derecha para que no se monte con la bandera */
.float .elementor-field-group-telefono > .elementor-field-label,
.float .elementor-field-group-phone > .elementor-field-label,
.float .elementor-field-group-telefono_factura > .elementor-field-label{
  left: 55px !important; /* ajusta 58–78 */
}

/* 3) Mantener ese left cuando sube (focus/filled) */
.float .elementor-field-group-telefono.is-focus > .elementor-field-label,
.float .elementor-field-group-telefono.is-filled > .elementor-field-label,
.float .elementor-field-group-phone.is-focus > .elementor-field-label,
.float .elementor-field-group-phone.is-filled > .elementor-field-label,
.float .elementor-field-group-telefono_factura.is-focus > .elementor-field-label,
.float .elementor-field-group-telefono_factura.is-filled > .elementor-field-label{
  left: 55px !important;
}

/* 4) Dar espacio al texto del input para no quedar debajo de la bandera */
.float .elementor-field-group-telefono input#form-field-telefono,
.float .elementor-field-group-phone input#form-field-phone,
.float .elementor-field-group-telefono_factura input#form-field-telefono_factura{
  padding-left: 51px !important; /* ajusta 70–92 */
}

/* 5) Responsive */
@media (max-width: 767px){
  .float .elementor-field-group-telefono > .elementor-field-label,
  .float .elementor-field-group-telefono.is-focus > .elementor-field-label,
  .float .elementor-field-group-telefono.is-filled > .elementor-field-label,
  .float .elementor-field-group-phone > .elementor-field-label,
  .float .elementor-field-group-phone.is-focus > .elementor-field-label,
  .float .elementor-field-group-phone.is-filled > .elementor-field-label,
  .float .elementor-field-group-telefono_factura > .elementor-field-label,
  .float .elementor-field-group-telefono_factura.is-focus > .elementor-field-label,
  .float .elementor-field-group-telefono_factura.is-filled > .elementor-field-label{
    left: 55px !important;
  }

  .float .elementor-field-group-telefono input#form-field-telefono,
  .float .elementor-field-group-phone input#form-field-telefono_contacto,
  .float .elementor-field-group-telefono_factura input#form-field-telefono_factura{
    padding-left: 51px !important;
  }
}


/* Subir el dropdown por encima de labels/campos */
.float .elementor-field-group-telefono .iti__dropdown-content,
.float .elementor-field-group-phone .iti__dropdown-content,
.float .elementor-field-group-telefono_factura .iti__dropdown-content{
  z-index: 4 !important;
}






/* =========================================
   EXCLUIR MES, AÑO Y RESUMEN DEL FLOAT
========================================= */
.float .elementor-field-group-card_month > .elementor-field-label,
.float .elementor-field-group-card_year > .elementor-field-label,
.float .elementor-field-group-order_summary > .elementor-field-label{
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  opacity: 1 !important;
  display: block !important;
  margin: 0 0 8px 0 !important;
  pointer-events: auto !important;
  z-index: auto !important;
}

/* quitar el espacio extra superior del efecto float solo en esos campos */
.float .elementor-field-group-card_month .elementor-field-textual,
.float .elementor-field-group-card_year .elementor-field-textual,
.float .elementor-field-group-order_summary .elementor-field-textual{
  padding-top: 10px !important;
}

/* por si alguna regla global sigue empujando raro */
.float .elementor-field-group-card_month,
.float .elementor-field-group-card_year,
.float .elementor-field-group-order_summary{
  position: static !important;
}




/* EXCLUIR COMPLETAMENTE RESUMEN DE PRODUCTOS DEL FLOAT */
.float .elementor-field-group-order_summary{
  position: static !important;
}

.float .elementor-field-group-order_summary > .elementor-field-label,
.float .elementor-field-group-order_summary.is-focus > .elementor-field-label,
.float .elementor-field-group-order_summary.is-filled > .elementor-field-label{
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  opacity: 1 !important;
  display: block !important;
  margin: 0 0 8px 0 !important;
  font-size: inherit !important;
  line-height: 1.2 !important;
  pointer-events: auto !important;
  z-index: auto !important;
  transition: none !important;
}

.float .elementor-field-group-order_summary .elementor-field-textual,
.float .elementor-field-group-order_summary textarea.elementor-field-textual{
  padding-top: 12px !important;
}






/* =========================================================
   Elementor Form - cambiar fondo en focus y cuando esté lleno
   Scope: .field-color
========================================================= */

/* 1) Cuando el usuario hace click (focus) */
.field-color input.elementor-field-textual:focus,
.field-color textarea.elementor-field-textual:focus{
  background-color: #c6d7e7 !important;
}

/* 2) Cuando el campo NO está vacío (tiene contenido) */
/* OJO: esto depende de placeholder. Por eso combinamos 2 estrategias: */

/* 2a) Si el campo tiene placeholder, usamos :placeholder-shown */
.field-color input.elementor-field-textual[placeholder]:not(:placeholder-shown),
.field-color textarea.elementor-field-textual[placeholder]:not(:placeholder-shown){
  background-color: #c6d7e7 !important;
}

/* 2b) Si el campo NO tiene placeholder (como email, nombre, etc), lo manejamos con una clase .is-filled desde JS */
.field-color .elementor-field-textual.is-filled{
  background-color: #c6d7e7 !important;
}

/* (Opcional) si quieres que el autofill también se vea igual dentro de este form */
.field-color input.elementor-field-textual:-webkit-autofill,
.field-color textarea.elementor-field-textual:-webkit-autofill{
  -webkit-box-shadow: 0 0 0px 1000px #c6d7e7 inset !important;
}







/* ANIMACIÓN DE BOTONES TIPO REBOTE */
/* ================================
   CTA Header – Animación botón
   ================================ */

@keyframes cta-bounce {
  0%, 80%, 100% {
    transform: translateY(0);
  }

  85% {
    transform: translateY(-6px);
  }

  90% {
    transform: translateY(0);
  }

  95% {
    transform: translateY(-3px);
  }
}

.shake-element {
  animation: cta-bounce 4s cubic-bezier(0.25,0.1,0.25,1) infinite;
  will-change: transform;
}

/* Opcional: pausa al hover */
.shake-element:hover {
  animation-play-state: paused;
}

/* si el botón transform (sticky header, hover, etc.)  */
.shake-element {
  will-change: transform;
}








/* ALINEACIÓN CARDS BLOGS TODAS DEL MISMO TAMAÑO */
/* =========================================
   Loop Grid posts: igualar imagen/título/extracto + botón alineado
   Clase en el widget Loop Grid: blog-eq
========================================= */

.blog-eq{
  --beq-img-ratio: 16/10;   /* cambia si quieres: 4/3, 3/2, 1/1 */
  --beq-title-lines: 3;     /* máximo líneas de título */
  --beq-exc-lines: 4;       /* máximo líneas del extracto */
}

/* 0) Que el grid estire items a la misma altura */
.blog-eq .elementor-loop-container{
  align-items: stretch;
}

/* 1) Cada loop-item y su contenedor al 100% de alto */
.blog-eq .elementor-loop-container > [data-elementor-type="loop-item"]{
  height: 100%;
}
.blog-eq .elementor-loop-container > [data-elementor-type="loop-item"] .e-con-inner{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 2) Imagen: mismo tamaño para todas (sin deformar) */
.blog-eq .elementor-loop-container > [data-elementor-type="loop-item"] .post-thumbnail{
  overflow: hidden; /* mantiene tu hover/zoom */
}
.blog-eq .elementor-loop-container > [data-elementor-type="loop-item"] .post-thumbnail a{
  display: block;
  width: 100%;
  aspect-ratio: var(--beq-img-ratio);
}
.blog-eq .elementor-loop-container > [data-elementor-type="loop-item"] .post-thumbnail img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 3) Título: mismo “bloque” aunque tenga 1 o 3 líneas */
.blog-eq .elementor-loop-container > [data-elementor-type="loop-item"] .elementor-widget-theme-post-title .elementor-heading-title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--beq-title-lines);
  overflow: hidden;
  min-height: calc(1.25em * var(--beq-title-lines)); /* ajusta si tu line-height es otro */
}

/* 4) Extracto: mismo alto visual (recorta con …) */
.blog-eq .elementor-loop-container > [data-elementor-type="loop-item"] .elementor-widget-theme-post-excerpt{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--beq-exc-lines);
  overflow: hidden;
  min-height: calc(1.55em * var(--beq-exc-lines)); /* ajusta si tu line-height es otro */
}

/* 5) Botón siempre abajo */
.blog-eq .elementor-loop-container > [data-elementor-type="loop-item"] .elementor-widget-button{
  margin-top: auto;
}










/* JUSTIFICAR TEXTO DE WIDGET LISTADO DE ICONOS EN BLOGS */
.justi .elementor-icon-list-text{
  display: block;          /* clave: el span debe comportarse como bloque */
  width: 100%;
  text-align: justify;
  text-justify: inter-word; /* opcional, mejora en algunos navegadores */
}




/* EFECTO GROW EN EL MENU */
.menu-grow-soft li{
  transition: all .3s;
  &:hover{
    transform: scale(1.05);
  }
}






/* HOVER FLECHAS DE CARRUSEL IMAGENES */
/*
/* =========================================
   Hover negro para AMBAS flechas (prev/next)
   Widget class: arrow-hover
========================================= */

.arrow-hover .elementor-swiper-button:hover,
.arrow-hover .elementor-swiper-button:focus,
.arrow-hover .elementor-swiper-button:focus-visible{
  color: #01719F !important; /* cubre la flecha que sí usa currentColor */
}

/* Cubre la flecha que NO usa currentColor (y cualquier SVG interno) */
.arrow-hover .elementor-swiper-button:hover svg path,
.arrow-hover .elementor-swiper-button:hover svg circle,
.arrow-hover .elementor-swiper-button:hover svg rect,
.arrow-hover .elementor-swiper-button:hover svg polygon,
.arrow-hover .elementor-swiper-button:hover svg g,
.arrow-hover .elementor-swiper-button:focus svg path,
.arrow-hover .elementor-swiper-button:focus svg circle,
.arrow-hover .elementor-swiper-button:focus svg rect,
.arrow-hover .elementor-swiper-button:focus svg polygon,
.arrow-hover .elementor-swiper-button:focus svg g,
.arrow-hover .elementor-swiper-button:focus-visible svg path,
.arrow-hover .elementor-swiper-button:focus-visible svg circle,
.arrow-hover .elementor-swiper-button:focus-visible svg rect,
.arrow-hover .elementor-swiper-button:focus-visible svg polygon,
.arrow-hover .elementor-swiper-button:focus-visible svg g{
  fill: #01719F !important;
}