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


/* Deshabilitar la opción de expandir (resize) para todos los campos de textarea */
textarea {
    resize: none !important;
}




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


/* ============================
   Dropdowns mismo ancho
   ============================ */
.same-dd .elementor-nav-menu--main .sub-menu{
  width: 300px !important;
  min-width: 250px !important;
}

/* Cada item ocupa todo el ancho */
.same-dd .elementor-nav-menu--main .sub-menu > li,
.same-dd .elementor-nav-menu--main .sub-menu > li > a{
  width: 100% !important;
  box-sizing: border-box;
}



/* ============================
   Excepción solo para APRENDE > PODCAST
   ============================ */
.same-dd .elementor-nav-menu--main .menu-item-927 > .sub-menu{
  width: 170px !important;
  min-width: 170px !important;
}

.same-dd .elementor-nav-menu--main .menu-item-927 > .sub-menu > li,
.same-dd .elementor-nav-menu--main .menu-item-927 > .sub-menu > li > a{
  width: 100% !important;
}






/* GROW SUAVE SOLO EN EL ITEM PRINCIPAL */
.menu-grow-soft .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-item{
  display: inline-flex;
  align-items: center;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
  transform-origin: center center;
  will-change: transform;
}

.menu-grow-soft .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-item:hover{
  transform: scale(1.03);
}
















/* =========================================================
   JUSTIFICAR LISTADO DE ICONOS
   ========================================================= */

.icon-list-justify .elementor-icon-list-item{
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.icon-list-justify .elementor-icon-list-icon{
  flex: 0 0 auto;
  margin-top: 2px;
}

.icon-list-justify .elementor-icon-list-text{
  display: block;
  flex: 1;
  text-align: justify;
}








/* =========================================
   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;
}







/* Share Buttons: íconos más juntos (solo donde pongas .share-compact) */
.share-compact .elementor-grid{
  --grid-column-gap: 0px; /* <-- ajusta este valor */
  --grid-row-gap: 3px;
   /* o flex-start si los quieres pegados a la izquierda */
}

/* Por si Elementor mete márgenes extra en items/botones */
.share-compact .elementor-grid-item,
.share-compact .elementor-share-btn{
  margin: -4px !important;
}






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







/* Ocultar flechas (spinners) en input type="number" — Teléfono */
input[name="form_fields[edad]"]::-webkit-outer-spin-button,
input[name="form_fields[edad]"]::-webkit-inner-spin-button,
input[name="form_fields[audiencia]"]::-webkit-outer-spin-button,
input[name="form_fields[audiencia]"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

input[name="form_fields[edad]"],
input[name="form_fields[audiencia]"]{
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield;
}








/* FORMULARIO SUSCRIBIRSE ANIMACIÓN DE 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: 12px;
}

/* 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 */
/* =========================================
   FIX: Campo MENSAJE (textarea) - evitar que el texto se monte en el label
   Solo afecta .elementor-field-group-mensaje
========================================= */

/* Label en reposo arriba (ya lo tenías) */
.float .elementor-field-group-mensaje > .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{
  padding-top: 27px !important;   /* ajusta 32–44 */
  padding-bottom: 12px !important;
}

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

  .float .elementor-field-group-mensaje textarea.elementor-field-textual{
    padding-top: 27px !important; /* ajusta 36–48 */
    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: 12px;   /* 👈 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 */
  }
}






/* CUANDO TENEMOS WIDGET CON BANDERAS EN TEL */
/* =========================================
   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-phone input#form-field-phone::placeholder{
  opacity: 0 !important;
}
.float .elementor-field-group-telefono input#form-field-telefono::placeholder{
  opacity: 0 !important;
}
.float .elementor-field-group-phone input#form-field-phone::-webkit-input-placeholder{ opacity: 0 !important; }
.float .elementor-field-group-phone input#form-field-phone::-moz-placeholder{ opacity: 0 !important; }
.float .elementor-field-group-phone input#form-field-phone:-ms-input-placeholder{ opacity: 0 !important; }
.float .elementor-field-group-telefono input#form-field-telefono::-webkit-input-placeholder{ opacity: 0 !important; }
.float .elementor-field-group-telefono input#form-field-telefono::-moz-placeholder{ opacity: 0 !important; }
.float .elementor-field-group-telefono input#form-field-telefono:-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-phone > .elementor-field-label,
.float .elementor-field-group-telefono > .elementor-field-label{
  left: 55px !important; /* ajusta 58–78 */
}


/* 3) Mantener ese left cuando sube (focus/filled) */
.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.is-focus > .elementor-field-label,
.float .elementor-field-group-telefono.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-phone input#form-field-phone,
.float .elementor-field-group-telefono input#form-field-telefono{
  padding-left: 51px !important; /* ajusta 70–92 */
}

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

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


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










/* HOVER VIDEOS */
/* =========================================
   Video hover overlay (debajo del icono play)
   Clase: video-hover
   ========================================= */

.video-hover{
  position: relative;
  overflow: hidden;
  border-radius: 16px; /* ajusta */
}

/* Asegura stacking correcto */
.video-hover .elementor-wrapper{
  position: relative;
}

/* La imagen overlay de Elementor */
.video-hover .elementor-custom-embed-image-overlay{
  position: relative;
}

/* Overlay oscuro (debajo del play) */
.video-hover .elementor-custom-embed-image-overlay::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 1;              /* 👈 debajo del play */
  pointer-events: none;
}

/* El botón play por encima */
.video-hover .elementor-custom-embed-play{
  position: absolute;      /* Elementor ya lo usa, pero lo reforzamos */
  z-index: 2;              /* 👈 arriba del overlay */
}

/* Hover */
.video-hover:hover .elementor-custom-embed-image-overlay::after{
  opacity: 1;
}

/* =========================================
   Icono de play con efecto grow
   ========================================= */

/* Animamos SOLO el icono (svg), no el contenedor */
.video-hover .elementor-custom-embed-play svg{
  transition: transform 0.35s ease;
  transform-origin: center;
}

/* Hover: zoom del icono */
.video-hover:hover .elementor-custom-embed-play svg{
  transform: scale(1.12); /* ajusta 1.08 – 1.18 */
}









/* ================================
   Animación botón Donar
   ================================ */

@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;
}








/* =========================================
   PARCHE IPHONE / SAFARI SOLO RESPONSIVE
   Evita movimiento lateral sin afectar desktop
   ========================================= */

@media (max-width: 1024px) {
  @supports (-webkit-touch-callout: none) {

    html,
    body {
      width: 100%;
      max-width: 100%;
      overflow-x: clip !important;
    }

    body,
    #page,
    .site,
    .site-content,
    .site-main,
    .elementor,
    .elementor-section,
    .elementor-container,
    .elementor-widget-wrap,
    .e-con,
    .e-flex,
    .elementor-location-header,
    .elementor-location-footer {
      max-width: 100%;
      overflow-x: clip;
      box-sizing: border-box;
    }

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

    img,
    video,
    iframe,
    canvas {
      max-width: 100%;
      height: auto;
      display: block;
    }

    svg {
      max-width: none;
      height: auto;
      display: inline-block;
    }

    .elementor-widget,
    .elementor-widget-container,
    .swiper,
    .swiper-wrapper,
    .swiper-slide,
    .elementor-button-wrapper,
    .elementor-icon-wrapper {
      max-width: 100%;
      min-width: 0;
    }

    .elementor-widget-wrap > *,
    .e-con > *,
    .elementor-container > * {
      max-width: 100%;
    }
  }
}