/*
Theme Name: Kadence Child - Wallaby
Theme URI: https://www.mt-global.com
Description: Child theme de Kadence con la paleta de colores, tipografias, layout y estilos de formulario del diseno Wallaby (Montserrat / Raleway). Replica index.html sobre Kadence + Elementor Free.
Author: Wallaby by MTGlobal
Template: kadence
Version: 1.2.1
Text Domain: kadence-child-wallaby
*/

:root{
  --mint:#00fabe;
  --teal:#3ca096;
  --deep-teal:#2d6e7d;
  --gray:#ebebeb;
  --navy:#1e323c;

  /* estados de formulario */
  --error:#ff6e64;        /* color de error de marca (bordes, iconos, texto sobre navy) */
  --error-ink:#b12f25;    /* mismo tono oscurecido: texto de error legible sobre fondo claro */

  /* ancho del contenedor del diseno original (1240px con 40px de padding) */
  --wallaby-container:1240px;
  --wallaby-gutter:40px;
}

/* NO sobrescribir aqui --global-palette1..9 de Kadence.
   Esas variables son semanticas, no una lista de colores de marca:
     palette3 -> texto mas fuerte / color de foco en inputs
     palette5 -> color del texto del cuerpo y de los campos de formulario
     palette7..9 -> fondos
   Asignarles la paleta de marca por posicion deja el texto ilegible en todo
   el sitio (p.ej. palette5 = #ebebeb -> texto gris claro sobre blanco).

   La paleta de marca se configura en:
     Apariencia > Personalizar > Colores > Paleta global
   Y los colores globales de Elementor en:
     Elementor > Ajustes del sitio > Colores globales
   (Elementor NO lee las variables de Kadence: tiene su propio sistema.) */

/* OJO: aqui NO se pone overflow-x:hidden en body.
   En index.html si esta, pero en WordPress romperia el header pegajoso
   (Personalizar > Header > Sticky) de Kadence: overflow-x:hidden en html/body
   invalida position:sticky en todos los descendientes.
   No hace falta: lo unico que se sale del ancho es el circulo decorativo del
   hero, y .wallaby-hero ya lo recorta con su propio overflow:hidden. */
body{
  font-family:'Raleway',sans-serif;
  color:var(--navy);
}

h1,h2,h3,h4,h5,h6,
.wallaby-hero-title,
.wallaby-section-title,
.elementor-button,
.wallaby-logo-text{
  font-family:'Montserrat',sans-serif;
}

.wallaby-hero-text,
.wallaby-hero-text p{
  font-family:'Raleway',sans-serif;
}

/* ============================================================
   HEADER / LOGO  (Kadence Header Builder)
   ============================================================ */
.site-header,
.site-header-wrap,
.site-header-row-container-inner,
#masthead{
  background:var(--navy);
}

/* Logo definitivo (PNG con texto en blanco -> pensado para fondo oscuro) */
.site-branding img.custom-logo,
.site-branding .custom-logo-link img{
  max-height:100px;
  width:auto;
  height:auto;
}

.main-navigation ul li > a,
.header-navigation ul li > a{
  color:#fff;
  font-family:'Raleway',sans-serif;
  font-size:.88rem;
  font-weight:400;
  text-transform:lowercase;
}
.main-navigation ul li > a:hover,
.header-navigation ul li > a:hover{
  color:var(--mint);
}

/* ---------- Menu movil: off-canvas nativo de Kadence ----------
   No hace falta JS propio: Kadence ya lo trae y es accesible. Aqui solo se
   le da la piel de la marca. Selectores tomados del markup real que genera
   Kadence: #mobile-drawer.popup-drawer-side-right. */
.mobile-toggle-open-container .menu-toggle-open,
.mobile-toggle-open-container .menu-toggle-open .menu-toggle-icon{
  color:#fff;
}
.mobile-toggle-open-container .menu-toggle-open:hover .menu-toggle-icon{
  color:var(--mint);
}

#mobile-drawer .drawer-overlay{
  background:rgba(15,26,32,.6);
}
#mobile-drawer .drawer-inner{
  background:var(--navy);
  box-shadow:-20px 0 50px rgba(0,0,0,.35);
}
#mobile-drawer .drawer-header .drawer-toggle,
#mobile-drawer .menu-toggle-close{
  color:#fff;
}
#mobile-drawer .drawer-header .drawer-toggle:hover,
#mobile-drawer .menu-toggle-close:hover{
  color:var(--mint);
}
#mobile-drawer .mobile-navigation ul li a{
  color:#fff;
  font-family:'Raleway',sans-serif;
  font-size:1.05rem;
  font-weight:400;
  text-transform:lowercase;
  padding:15px 2px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
#mobile-drawer .mobile-navigation ul li a:hover,
#mobile-drawer .mobile-navigation ul li.current-menu-item > a{
  color:var(--mint);
}
/* el boton "let's talk" si se anade al drawer */
#mobile-drawer .kadence-button,
#mobile-drawer .button{
  width:100%;
  margin-top:24px;
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn-mint .elementor-button,
.elementor-button.btn-mint,
.wallaby-btn-mint .elementor-button{
  background:var(--mint) !important;
  color:var(--navy) !important;
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.02em;
  border:none;
  border-radius:30px !important;
  padding:.85rem 1.9rem !important;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn-mint .elementor-button:hover,
.elementor-button.btn-mint:hover,
.wallaby-btn-mint .elementor-button:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,250,190,.35);
}

.btn-outline-mint .elementor-button,
.elementor-button.btn-outline-mint,
.wallaby-btn-outline .elementor-button{
  background:transparent !important;
  color:var(--mint) !important;
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  font-size:.85rem;
  border:1.5px solid var(--mint) !important;
  border-radius:30px !important;
  padding:.85rem 1.9rem !important;
  transition:background .2s ease, color .2s ease;
}
.btn-outline-mint .elementor-button:hover,
.elementor-button.btn-outline-mint:hover,
.wallaby-btn-outline .elementor-button:hover{
  background:var(--mint) !important;
  color:var(--navy) !important;
}

/* ============================================================
   HERO
   La imagen sangra hasta el borde derecho e inferior de la seccion,
   con el corte redondeado unicamente en la esquina superior izquierda.
   ============================================================ */
.wallaby-hero{
  position:relative;
  overflow:hidden;
  background:var(--navy);
  min-height:660px;
  padding:0 !important;
}
.wallaby-hero > .elementor-container{
  min-height:660px;
  align-items:center;
}

/* circulo decorativo teal (equivale a .hero-decor del HTML).
   Entra suavemente desde la izquierda al cargar. Se hace con @keyframes y no
   con el sistema de scroll reveal porque es un pseudo-elemento e
   IntersectionObserver no puede observarlo. Da igual: esta siempre visible al
   cargar, asi que no hace falta esperar al scroll. */
.wallaby-hero::before{
  content:"";
  position:absolute;
  left:-160px;
  top:110px;
  width:340px;
  height:340px;
  border-radius:50%;
  background:var(--teal);
  opacity:0;
  z-index:0;
  pointer-events:none;
  animation:wallaby-decor-in 1.3s cubic-bezier(.16,.84,.44,1) .15s forwards;
}
@keyframes wallaby-decor-in{
  from{opacity:0; transform:translateX(-110px);}
  to{opacity:.9; transform:translateX(0);}
}
@media (prefers-reduced-motion:reduce){
  .wallaby-hero::before{animation:none; opacity:.9;}
}

/* --- columna de texto --- */
.wallaby-hero-textcol{
  position:relative;
  z-index:2;
  /* alinea el texto con el contenedor de 1240px del diseno original */
  padding-left:max(var(--wallaby-gutter), calc((100vw - var(--wallaby-container)) / 2 + var(--wallaby-gutter)));
  padding-right:var(--wallaby-gutter);
  padding-top:36px;
  padding-bottom:36px;
}
.wallaby-hero-textcol > .elementor-widget-wrap,
.wallaby-hero-textcol > .elementor-column-wrap{
  max-width:460px;
  padding:0 !important;
}

/* Elementor pone las clases personalizadas en el wrapper del widget,
   no en la etiqueta interna -> hay que apuntar a las dos. */
.wallaby-hero-title,
.wallaby-hero-title .elementor-heading-title,
h1.wallaby-hero-title{
  color:#fff;
  font-size:2.7rem;
  font-weight:300;
  line-height:1.25;
  margin:0 0 22px;
}
.wallaby-hero-title .accent{
  color:var(--mint);
  font-weight:700;
}
.wallaby-hero-text,
.wallaby-hero-text p{
  color:#d3dde0;
  font-size:.95rem;
  line-height:1.75;
  font-weight:300;
  max-width:430px;
  /*margin:0 0 34px;*/
}

/* --- columna de imagen --- */
.wallaby-hero-imgcol{
  position:relative;
  z-index:1;
  align-self:stretch;
}
.wallaby-hero-imgcol > .elementor-widget-wrap,
.wallaby-hero-imgcol > .elementor-column-wrap{
  width:100%;
  min-height:660px;
  padding:0 !important;
  overflow:hidden;
  border-radius:700px 0 0 0;
  /* la imagen de fondo se elige desde Elementor:
     Columna > Estilo > Fondo > Clasico > Imagen.
     Mientras no haya imagen se ve este degradado como placeholder; en cuanto
     se asigna una en Elementor, su CSS (mas especifico) gana. */
  background-image:linear-gradient(150deg,var(--deep-teal) 0%,var(--teal) 100%);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
/* fallback si se prefiere un widget Imagen en vez de fondo de columna */
.wallaby-hero-imgcol img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ============================================================
   DESTINOS
   ============================================================ */
.wallaby-destinations{
  background:var(--gray);
}
.wallaby-section-title,
.wallaby-section-title .elementor-heading-title,
h2.wallaby-section-title{
  font-size:1.6rem;
  font-weight:600;
  color:var(--navy);
  margin:0 0 32px;
}

.wallaby-card-col > .elementor-widget-wrap,
.wallaby-card-col > .elementor-column-wrap{
  position:relative;
  padding:0 !important;
  border-radius:20px;
  overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:0 12px 30px rgba(30,50,60,.12);
  /* imagen elegida desde Elementor:
     Columna > Estilo > Fondo > Clasico > Imagen (placeholder hasta entonces) */
  background-image:linear-gradient(160deg,var(--deep-teal) 0%,var(--teal) 100%);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
.wallaby-cards,
.wallaby-cards > .e-con-inner{
  --gap: 26px;
  --row-gap: 26px;
  --column-gap: 26px;
}

/* que el overlay se posicione respecto a la tarjeta y no respecto al widget */
.wallaby-card-col .elementor-widget,
.wallaby-card-col .elementor-widget-html{
  position:static;
}
.wallaby-card-col img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* el overlay va dentro de un widget HTML, posicionado en absoluto
   -> no depende del DOM interno de Elementor */
.card-overlay,
.wallaby-card .card-overlay{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:2;
  padding:50% 22px 26px;
  background:linear-gradient(180deg, rgba(30,50,60,0) 0%, rgba(30,50,60,.8) 70%, rgba(30,50,60,1) 100%);
}
.card-overlay h3{
  color:#fff;
  font-size:1.25rem;
  font-weight:700;
  text-transform:lowercase;
  margin:0 0 4px;
  line-height:1.2;
}
.card-overlay p{
  color:#fff;
  font-size:.8rem;
  font-weight:400;
  letter-spacing:.01em;
  margin:0;
}

/* ============================================================
   FORMULARIOS — Contact Form 7
   En Elementor Free se inserta con el widget "Shortcode":
   [contact-form-7 id="..."]
   Sobre fondo oscuro (navy), anade la clase "wallaby-form-dark"
   al widget en Avanzado > Clases CSS.
   ============================================================ */
.wpcf7{
  font-family:'Raleway',sans-serif;
}
.wpcf7 form{
  margin:0;
}
.wpcf7 form > p{
  margin:0 0 22px;
}

/* Kadence ya trae box-sizing:border-box global, pero lo fijamos aqui tambien
   para no depender del tema padre: sin esto el width:100% + padding hace que
   los campos se salgan de su columna. */
.wpcf7 input,
.wpcf7 select,
.wpcf7 textarea,
.wf-row,
.wf-field{
  box-sizing:border-box;
}

/* --- etiquetas de campo --- */
.wpcf7 label,
.wpcf7 .wf-field > label{
  display:block;
  font-family:'Montserrat',sans-serif;
  font-size:14px;
  font-weight:700;
  color:var(--navy);
  margin-bottom:8px;
}

/* --- campos --- */
.wpcf7 .wpcf7-form-control-wrap{
  display:block;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea{
  width:100%;
  display:block;
  font-family:'Raleway',sans-serif;
  font-size:.92rem;
  font-weight:400;
  line-height:1.5;
  color:var(--navy);
  background:#fff;
  border:1.5px solid #cfd8db;
  border-radius:12px;
  padding:.8rem 1.1rem;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  -webkit-appearance:none;
  appearance:none;
}
.wpcf7 textarea{
  min-height:150px;
  resize:vertical;
}
.wpcf7 ::placeholder{
  color:#8fa1a8;
  opacity:1;
}

/* flecha propia para los <select> (se quita la nativa con appearance:none) */
.wpcf7 select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231e323c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1.1rem center;
  padding-right:2.6rem;
}

/* --- foco --- */
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus{
  outline:none;
  border-color:var(--mint);
  box-shadow:0 0 0 3px rgba(0,250,190,.25);
}

/* autorrelleno de Chrome: evita el amarillo del navegador */
.wpcf7 input:-webkit-autofill,
.wpcf7 textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--navy);
  -webkit-box-shadow:0 0 0 1000px #fff inset;
  caret-color:var(--navy);
}

/* --- error de campo --- */
.wpcf7 .wpcf7-not-valid{
  border-color:var(--error) !important;
  box-shadow:0 0 0 3px rgba(255,110,100,.18);
}
.wpcf7 .wpcf7-not-valid-tip{
  display:block;
  font-family:'Raleway',sans-serif;
  font-size:.78rem;
  font-weight:500;
  line-height:1.4;
  /* sobre fondo claro se usa el tono oscurecido: #ff6e64 sobre blanco
     se queda en 2.6:1 de contraste y no es legible */
  color:var(--error-ink);
  margin-top:7px;
}

/* --- mensaje de respuesta del formulario --- */
.wpcf7 form .wpcf7-response-output{
  margin:24px 0 0;
  padding:.9rem 1.2rem;
  border:1.5px solid;
  border-radius:12px;
  font-family:'Raleway',sans-serif;
  font-size:.85rem;
  line-height:1.5;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output{
  border-color:var(--error);
  background:rgba(255,110,100,.1);
  color:var(--error-ink);
}
.wpcf7 form.spam .wpcf7-response-output{
  border-color:#e0a53f;
  background:rgba(224,165,63,.1);
  color:#8a6420;
}
.wpcf7 form.sent .wpcf7-response-output{
  border-color:var(--teal);
  background:rgba(60,160,150,.12);
  color:var(--deep-teal);
}

/* --- casillas y radios ---
   OJO: en casillas y radios, CF7 envuelve el texto en su propio <label>.
   Hay que resetear ahi el estilo de etiqueta de campo (Montserrat en
   mayusculas), o la politica de privacidad sale GRITANDO EN MAYUSCULAS. */
.wpcf7 .wpcf7-list-item{
  display:block;
  margin:0 1.4rem 0 0;
}
.wpcf7 .wpcf7-list-item label{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin:0;
  font-family:'Raleway',sans-serif;
  font-size:.85rem;
  font-weight:400;
  line-height:1.5;
  letter-spacing:normal;
  text-transform:none;
  color:var(--navy);
  cursor:pointer;
}
.wpcf7 .wpcf7-list-item-label{
  flex:1;
}
.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"]{
  width:1.05rem;
  height:1.05rem;
  margin:.15rem 0 0;
  padding:0;
  accent-color:var(--teal);
  flex:0 0 auto;
  cursor:pointer;
}
.wpcf7 .wpcf7-acceptance .wpcf7-list-item{
  margin:0;
}

/* --- boton de envio (pildora mint, igual que .btn-primary) --- */
.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit{
  width:auto;
  display:inline-block;
  background:var(--mint);
  color:var(--navy);
  font-family:'Montserrat',sans-serif;
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.02em;
  border:none;
  border-radius:30px;
  padding:.85rem 2.2rem;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 18px rgba(0,250,190,.35);
}
.wpcf7 input[type="submit"]:focus-visible,
.wpcf7 .wpcf7-submit:focus-visible{
  outline:2px solid var(--mint);
  outline-offset:3px;
}
.wpcf7 input[type="submit"]:disabled,
.wpcf7 .wpcf7-submit:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.wpcf7 .wpcf7-spinner{
  background-color:var(--teal);
}

/* --- rejilla opcional de 2 columnas ---
   se usa envolviendo los campos en el editor de CF7:
   <div class="wf-row"><div class="wf-field">...</div><div class="wf-field">...</div></div>
   y <div class="wf-row wf-full"> para un campo a todo el ancho. */
.wf-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-bottom:22px;
}
.wf-row.wf-full{
  grid-template-columns:1fr;
}
.wf-field{
  min-width:0;
}
/* CF7 pasa la plantilla del formulario por un autop propio, que puede colar
   <br> y <p> sueltos entre la etiqueta y el campo. Se neutralizan aqui para
   que la rejilla no se descuadre. */
.wf-field br{
  display:none;
}
.wf-field > p{
  margin:0;
}

/* ---------- variante sobre fondo oscuro (navy) ---------- */
.wallaby-form-dark .wpcf7 label,
.wallaby-form-dark .wpcf7 .wf-field > label{
  color:#fff;
}
.wallaby-form-dark .wpcf7 input[type="text"],
.wallaby-form-dark .wpcf7 input[type="email"],
.wallaby-form-dark .wpcf7 input[type="tel"],
.wallaby-form-dark .wpcf7 input[type="url"],
.wallaby-form-dark .wpcf7 input[type="number"],
.wallaby-form-dark .wpcf7 input[type="date"],
.wallaby-form-dark .wpcf7 select,
.wallaby-form-dark .wpcf7 textarea{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.22);
  color:#fff;
}
.wallaby-form-dark .wpcf7 ::placeholder{
  color:#8fa1a8;
}
.wallaby-form-dark .wpcf7 select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
}
.wallaby-form-dark .wpcf7 input:focus,
.wallaby-form-dark .wpcf7 select:focus,
.wallaby-form-dark .wpcf7 textarea:focus{
  background:rgba(255,255,255,.1);
  border-color:var(--mint);
}
.wallaby-form-dark .wpcf7 input:-webkit-autofill,
.wallaby-form-dark .wpcf7 textarea:-webkit-autofill{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 1000px #24404c inset;
  caret-color:#fff;
}
.wallaby-form-dark .wpcf7 .wpcf7-list-item label,
.wallaby-form-dark .wpcf7 .wpcf7-list-item-label{
  color:#d3dde0;
}
/* sobre navy si funciona el #ff6e64 puro: 4.86:1 de contraste */
.wallaby-form-dark .wpcf7 .wpcf7-not-valid-tip{
  color:var(--error);
}
.wallaby-form-dark .wpcf7 form.invalid .wpcf7-response-output,
.wallaby-form-dark .wpcf7 form.unaccepted .wpcf7-response-output,
.wallaby-form-dark .wpcf7 form.payment-required .wpcf7-response-output,
.wallaby-form-dark .wpcf7 form.failed .wpcf7-response-output,
.wallaby-form-dark .wpcf7 form.aborted .wpcf7-response-output{
  border-color:var(--error);
  background:rgba(255,110,100,.14);
  color:var(--error);
}
.wallaby-form-dark .wpcf7 form.sent .wpcf7-response-output{
  border-color:var(--mint);
  background:rgba(0,250,190,.12);
  color:var(--mint);
}

/* ============================================================
   SCROLL REVEAL
   En Elementor Free se activa anadiendo la clase "wallaby-reveal"
   en Avanzado > Clases CSS (mas wallaby-delay-1/2/3 si se quiere retardo).
   ============================================================ */
[data-reveal],
.wallaby-reveal{
  opacity:0;
  transform:translateY(32px);
  transition:opacity .9s cubic-bezier(.16,.84,.44,1), transform .9s cubic-bezier(.16,.84,.44,1);
  transition-delay:var(--reveal-delay,0s);
  will-change:opacity, transform;
}
[data-reveal-variant="scale"],
.wallaby-reveal-scale{
  transform:translateY(24px) scale(1.04);
}
[data-reveal].is-visible,
.wallaby-reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
[data-reveal-variant="scale"].is-visible,
.wallaby-reveal-scale.is-visible{
  transform:translateY(0) scale(1);
}

.wallaby-delay-1{--reveal-delay:.12s;}
.wallaby-delay-2{--reveal-delay:.24s;}
.wallaby-delay-3{--reveal-delay:.36s;}

@media (prefers-reduced-motion:reduce){
  [data-reveal],
  .wallaby-reveal{transition:none; opacity:1; transform:none;}
}

/* dentro del editor de Elementor no ocultamos nada, o no se ve al editar */
.elementor-editor-active [data-reveal],
.elementor-editor-active .wallaby-reveal{
  opacity:1 !important;
  transform:none !important;
}

/* ============================================================
   RESPONSIVE  (mismos breakpoints que index.html)
   ============================================================ */
@media (max-width:980px){
  .wallaby-hero,
  .wallaby-hero > .elementor-container{
    min-height:0;
  }
  .wallaby-hero .elementor-column{
    width:100% !important;
  }
  .wallaby-hero::before{display:none;}

  /* la imagen pasa arriba, a sangre, con el corte redondeado abajo */
  .wallaby-hero > .elementor-container{
    flex-direction:column-reverse;
    flex-wrap:nowrap;
  }
  .wallaby-hero-imgcol > .elementor-widget-wrap,
  .wallaby-hero-imgcol > .elementor-column-wrap{
    min-height:300px;
    margin:0;
    border-radius:0 0 70px 70px;
    box-shadow:0 20px 40px rgba(0,0,0,.3);
  }
  .wallaby-hero-textcol{
    padding-left:var(--wallaby-gutter);
    padding-right:var(--wallaby-gutter);
    padding-top:32px;
    padding-bottom:44px;
  }
  .wallaby-hero-textcol > .elementor-widget-wrap,
  .wallaby-hero-textcol > .elementor-column-wrap{
    max-width:none;
  }
  .wallaby-hero-text,
  .wallaby-hero-text p{max-width:none;}
}

@media (max-width:767px){
  :root{--wallaby-gutter:22px;}

  .wallaby-hero-title{font-size:2.1rem;}

  /* en movil el hero va sin imagen: solo fondo navy y texto */
  .wallaby-hero-imgcol{display:none !important;}
  .wallaby-hero-textcol{
    padding-top:42px;
    padding-bottom:52px;
  }

  .wallaby-card-col{width:100% !important;}
  .wallaby-cards .wallaby-card-col > .elementor-widget-wrap,
  .wallaby-cards .wallaby-card-col > .elementor-column-wrap{
    margin:0 0 26px !important;
  }
  .wallaby-cards .wallaby-card-col:last-child > .elementor-widget-wrap,
  .wallaby-cards .wallaby-card-col:last-child > .elementor-column-wrap{
    margin-bottom:0 !important;
  }

  /* formularios a una sola columna en movil */
  .wf-row{
    grid-template-columns:1fr;
  }
}