.elementor-55 .elementor-element.elementor-element-7567a64{--display:flex;--min-height:360px;--justify-content:center;--border-radius:0px 0px 0px 0px;}.elementor-55 .elementor-element.elementor-element-7567a64:not(.elementor-motion-effects-element-type-background), .elementor-55 .elementor-element.elementor-element-7567a64 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://benalmadenarentboat.com/wp-content/uploads/2026/04/imagen_2026-04-26_175742485.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-55 .elementor-element.elementor-element-34b714b{--display:flex;--border-radius:20px 20px 20px 20px;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}.elementor-55 .elementor-element.elementor-element-34b714b:not(.elementor-motion-effects-element-type-background), .elementor-55 .elementor-element.elementor-element-34b714b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#00000085;}.elementor-55 .elementor-element.elementor-element-6e5dba2{--spacer-size:5px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-55 .elementor-element.elementor-element-9b121ca{text-align:center;}.elementor-55 .elementor-element.elementor-element-9b121ca .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:50px;font-weight:700;color:#FFFFFF;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-55 .elementor-element.elementor-element-b2f8916{text-align:center;font-family:"Poppins", Sans-serif;font-weight:500;color:#FFFFFF;}.elementor-55 .elementor-element.elementor-element-3acfac3{--display:flex;}.elementor-55 .elementor-element.elementor-element-5b0708d{--spacer-size:10px;}.elementor-55 .elementor-element.elementor-element-98e471e{--display:flex;--border-radius:0px 0px 0px 0px;}.elementor-55 .elementor-element.elementor-element-98e471e:not(.elementor-motion-effects-element-type-background), .elementor-55 .elementor-element.elementor-element-98e471e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://benalmadenarentboat.com/wp-content/uploads/2026/04/imagen_2026-04-23_171505030.png");background-repeat:no-repeat;background-size:cover;}.elementor-55 .elementor-element.elementor-element-6346a5b{--spacer-size:10px;}.elementor-55 .elementor-element.elementor-element-683b7fc{--display:flex;--border-radius:20px 20px 20px 20px;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}.elementor-55 .elementor-element.elementor-element-683b7fc:not(.elementor-motion-effects-element-type-background), .elementor-55 .elementor-element.elementor-element-683b7fc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFFBD;}.elementor-55 .elementor-element.elementor-element-509cff7{text-align:center;}.elementor-55 .elementor-element.elementor-element-509cff7 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:50px;font-weight:700;text-shadow:0px 0px 100px rgba(0,0,0,0.3);color:#134a60;}.elementor-55 .elementor-element.elementor-element-0b78b3d{--spacer-size:20px;}:root{--page-title-display:none;}/* Start custom CSS for container, class: .elementor-element-34b714b *//* Estado normal del contenedor */
.elementor-55 .elementor-element.elementor-element-34b714b {
    /* Especificamos las propiedades exactas para evitar animaciones al cargar */
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
                box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    
    backface-visibility: hidden;
    transform: scale(1); /* Definimos el estado inicial base */
}

/* Efecto al pasar el ratón (Hover) */
.elementor-55 .elementor-element.elementor-element-34b714b:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    z-index: 99;
}
/* =========================================================
   HOVER TARJETA - SEGURO EN DESKTOP Y NEUTRO EN MÓVIL
   Elementor: usar en CSS personalizado con ".elementor-55 .elementor-element.elementor-element-34b714b"
========================================================= */

/* Estado normal */
.elementor-55 .elementor-element.elementor-element-34b714b {
  transition:
    transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;

  backface-visibility: hidden;
  transform: scale(1);
  will-change: transform;
}

/* Hover solo en dispositivos con ratón real */
@media (hover: hover) and (pointer: fine) {
  .elementor-55 .elementor-element.elementor-element-34b714b:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
    z-index: 99;
  }
}

/* Móvil: sin zoom para evitar cortes */
@media (max-width: 767px) {
  .elementor-55 .elementor-element.elementor-element-34b714b {
    transform: none !important;
    transition:
      box-shadow 0.25s ease,
      background 0.25s ease !important;
  }

  .elementor-55 .elementor-element.elementor-element-34b714b:hover,
  .elementor-55 .elementor-element.elementor-element-34b714b:active,
  .elementor-55 .elementor-element.elementor-element-34b714b:focus {
    transform: none !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12) !important;
    z-index: auto !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-17bd38b *//* =========================================================
   FAQ MASTER + FAQ ITEMS
   Estilo limpio, moderno, liquid glass
========================================================= */

.faq-master-wrap{
  font-family: "Poppins", sans-serif;
}

/* quitar marcador nativo */
.faq-master summary::-webkit-details-marker,
.faq-barco-pro .faq-item summary::-webkit-details-marker{
  display: none;
}

.faq-master summary,
.faq-barco-pro .faq-item summary{
  list-style: none;
}

/* =========================================================
   BLOQUE PRINCIPAL
========================================================= */

.faq-master{
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.34);
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.07),
    inset 0 1px 0 rgba(255,255,255,0.75);
}

.faq-master::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.24) 0%,
      rgba(255,255,255,0.08) 48%,
      rgba(255,255,255,0.03) 100%);
  pointer-events: none;
}

/* CABECERA PRINCIPAL MÁS GRANDE */
.faq-master > summary{
  position: relative;
  cursor: pointer;
  padding: 30px 82px 30px 30px;
  font-family: "Poppins", sans-serif;
  font-size: clamp(26px, 3.2vw, 40px);
  font-weight: 700;
  line-height: 1.15;
  color: #111111;
  letter-spacing: -0.02em;
  z-index: 2;
}

.faq-master > summary::after{
  content: "+";
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.40);
  border: 1px solid rgba(255,255,255,0.58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.70),
    0 4px 12px rgba(0,0,0,0.05);
  color: #111111;
  font-size: 28px;
  font-weight: 400;
}

.faq-master[open] > summary::after{
  content: "–";
}

.faq-master-content{
  position: relative;
  z-index: 2;
  padding: 0 22px 22px 22px;
}

/* =========================================================
   GRID INTERIOR 2 COLUMNAS
========================================================= */

.faq-barco-pro{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

/* =========================================================
   ITEMS INTERIORES
========================================================= */

.faq-barco-pro .faq-item{
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.30);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow:
    0 8px 22px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.68);
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    background 0.28s ease;
}

.faq-barco-pro .faq-item::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.20) 0%,
      rgba(255,255,255,0.06) 50%,
      rgba(255,255,255,0.02) 100%);
  pointer-events: none;
}

.faq-barco-pro .faq-item:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.38);
  box-shadow:
    0 12px 28px rgba(0,0,0,0.07),
    inset 0 1px 0 rgba(255,255,255,0.80);
}

.faq-barco-pro .faq-item summary{
  position: relative;
  cursor: pointer;
  padding: 20px 58px 20px 20px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  color: #111111;
  z-index: 2;
}

.faq-barco-pro .faq-item summary::after{
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.40);
  border: 1px solid rgba(255,255,255,0.58);
  color: #111111;
  font-size: 20px;
  font-weight: 400;
}

.faq-barco-pro .faq-item[open] summary::after{
  content: "–";
}

.faq-barco-pro .faq-content{
  position: relative;
  z-index: 2;
  padding: 0 20px 20px 20px;
}

.faq-barco-pro .faq-content p{
  margin: 0;
  color: #1a1a1a;
  font-size: 15px;
  line-height: 1.75;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1024px){
  .faq-master > summary{
    padding: 24px 72px 24px 24px;
    font-size: clamp(22px, 3vw, 32px);
  }

  .faq-master > summary::after{
    right: 20px;
    width: 40px;
    height: 40px;
    font-size: 24px;
  }

  .faq-barco-pro{
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .faq-barco-pro .faq-item summary{
    font-size: 15px;
  }

  .faq-barco-pro .faq-content p{
    font-size: 14.5px;
  }
}

@media (max-width: 767px){
  .faq-master > summary{
    padding: 22px 64px 22px 20px;
    font-size: clamp(21px, 6vw, 30px);
    line-height: 1.15;
  }

  .faq-master > summary::after{
    right: 16px;
    width: 38px;
    height: 38px;
    font-size: 22px;
  }

  .faq-master-content{
    padding: 0 16px 16px 16px;
  }

  .faq-barco-pro{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .faq-barco-pro .faq-item summary{
    padding: 18px 52px 18px 18px;
    font-size: 14.5px;
  }

  .faq-barco-pro .faq-item summary::after{
    right: 14px;
    width: 30px;
    height: 30px;
    font-size: 18px;
  }

  .faq-barco-pro .faq-content{
    padding: 0 18px 18px 18px;
  }

  .faq-barco-pro .faq-content p{
    font-size: 14px;
    line-height: 1.7;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d9a51eb *//* =========================================================
   CONTACTO + MAPA - RESPONSIVE MÓVIL
   Solo hasta 767px
========================================================= */

@media (max-width: 767px) {

  .contenedor-contacto-limpio {
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 12px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
  }

  .tarjeta-blanca-doble {
    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;
    flex-direction: column !important;

    border-radius: 24px !important;
    overflow: hidden !important;

    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow:
      0 16px 36px rgba(0, 35, 60, 0.14),
      inset 0 1px 0 rgba(255,255,255,0.75) !important;
  }

  .bloque-info {
    width: 100% !important;
    max-width: 100% !important;

    padding: 28px 20px 24px 20px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  .bloque-info h2 {
    font-size: 24px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;

    margin: 0 0 24px 0 !important;

    color: #071a2c !important;
    text-align: left !important;
    letter-spacing: -0.4px !important;
  }

  .item-contacto {
    width: 100% !important;

    display: grid !important;
    grid-template-columns: 38px 1fr !important;
    gap: 12px !important;
    align-items: flex-start !important;

    margin: 0 0 18px 0 !important;
    padding: 14px 13px !important;

    border-radius: 18px !important;
    background: rgba(0, 45, 115, 0.045) !important;
    border: 1px solid rgba(0, 45, 115, 0.07) !important;
  }

  .item-contacto:last-child {
    margin-bottom: 0 !important;
  }

  .item-contacto img,
  .item-contacto span.icon {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;

    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    border: 1px solid rgba(0, 45, 115, 0.08) !important;

    font-size: 18px !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .texto-item {
    min-width: 0 !important;
    width: 100% !important;

    font-size: 14.5px !important;
    line-height: 1.55 !important;
    color: #071a2c !important;

    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .enlace-contacto {
    color: #002D73 !important;
    text-decoration: none !important;
    font-weight: 600 !important;

    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .enlace-contacto:hover,
  .enlace-contacto:active {
    color: #E63946 !important;
    text-decoration: none !important;
  }

  .bloque-mapa {
    width: 100% !important;
    max-width: 100% !important;

    min-height: 320px !important;
    height: 320px !important;

    position: relative !important;
    overflow: hidden !important;

    border-top: 1px solid rgba(0, 45, 115, 0.08) !important;
  }

  .bloque-mapa iframe {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    border: 0 !important;
    display: block !important;
  }
}


/* =========================================================
   MÓVIL MUY PEQUEÑO
========================================================= */

@media (max-width: 420px) {

  .contenedor-contacto-limpio {
    padding: 16px 10px !important;
  }

  .tarjeta-blanca-doble {
    border-radius: 22px !important;
  }

  .bloque-info {
    padding: 24px 16px 22px 16px !important;
  }

  .bloque-info h2 {
    font-size: 22px !important;
    margin-bottom: 20px !important;
  }

  .item-contacto {
    grid-template-columns: 34px 1fr !important;
    gap: 10px !important;
    padding: 13px 11px !important;
    border-radius: 16px !important;
  }

  .item-contacto img,
  .item-contacto span.icon {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    font-size: 16px !important;
  }

  .texto-item {
    font-size: 13.6px !important;
    line-height: 1.5 !important;
  }

  .bloque-mapa {
    min-height: 280px !important;
    height: 280px !important;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-683b7fc *//* =========================================================
   TÍTULO FORMULARIO - RESPONSIVE MÓVIL
   Clase: formulario-titulo-glass
   Solo hasta 767px
========================================================= */

@media (max-width: 767px){

  .formulario-titulo-glass{
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    margin: 0 auto !important;

    padding: 22px 16px !important;
    border-radius: 22px !important;

    background: rgba(0, 45, 73, 0.42) !important;
    backdrop-filter: blur(14px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%) !important;

    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow:
      0 14px 32px rgba(0, 24, 48, 0.18),
      inset 0 1px 0 rgba(255,255,255,0.35) !important;

    overflow: hidden !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  .formulario-titulo-glass,
  .formulario-titulo-glass *{
    box-sizing: border-box !important;
  }

  .formulario-titulo-glass .elementor-heading-title{
    margin: 0 !important;

    font-size: clamp(32px, 10vw, 46px) !important;
    line-height: 1.05 !important;
    letter-spacing: -1px !important;

    color: #ffffff !important;
    text-align: center !important;

    text-shadow:
      0 8px 20px rgba(0,0,0,0.22),
      0 2px 8px rgba(0,0,0,0.16) !important;

    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .formulario-titulo-glass .elementor-widget,
  .formulario-titulo-glass .elementor-widget-container{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}


/* Móvil muy pequeño */
@media (max-width: 420px){

  .formulario-titulo-glass{
    width: calc(100% - 18px) !important;
    max-width: calc(100% - 18px) !important;
    padding: 20px 14px !important;
    border-radius: 20px !important;
  }

  .formulario-titulo-glass .elementor-heading-title{
    font-size: clamp(29px, 10vw, 38px) !important;
    line-height: 1.08 !important;
  }
}/* End custom CSS */
/* Start custom CSS for wpforms, class: .elementor-element-f06d262 *//* 1. IMPORTACIÓN Y FUENTE */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

/* 2. LA TARJETA CONTENEDORA (GLASS CARD) */
.wpforms-container {
    font-family: 'Poppins', sans-serif !important;
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 30px !important;
    padding: 40px !important;
    max-width: 650px !important;
    margin: 30px auto !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15) !important;
}

/* 3. CAMPOS DE RELLENAR (EL "CUERPO" DE LAS BURBUJAS) */
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form input[type="number"],
.wpforms-form textarea,
.wpforms-form select {
    /* Fondo más sólido para que se diferencie del fondo de la tarjeta */
    background: rgba(255, 255, 255, 0.85) !important; 
    
    /* Borde más marcado */
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 20px !important;
    
    color: #000000 !important;
    padding: 15px 20px !important;
    font-size: 16px !important;
    height: 55px !important;
    
    /* Sombra interna para dar efecto de relieve/hueco */
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05), 0 5px 15px rgba(0,0,0,0.05) !important;
    transition: all 0.3s ease-in-out !important;
    width: 100% !important;
}

/* Ajuste para el área de mensaje */
.wpforms-form textarea {
    height: auto !important;
    min-height: 120px !important;
}

/* 4. EFECTO AL HACER CLIC (FOCUS) - ¡Aquí es donde más se nota! */
.wpforms-form input:focus,
.wpforms-form textarea:focus,
.wpforms-form select:focus {
    background: #ffffff !important; /* Blanco puro al escribir */
    border-color: #001f3f !important; /* Borde azul marino */
    box-shadow: 0 0 0 4px rgba(0, 31, 63, 0.1) !important; /* Brillo exterior */
    outline: none !important;
    transform: scale(1.01);
}

/* 5. TEXTO DE LAS ETIQUETAS */
.wpforms-form .wpforms-field-label {
    color: #000000 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    margin-bottom: 10px !important;
    display: block !important;
}

/* 6. BOTÓN ENVIAR (AZUL MARINO CON HOVER ROJO) */
.wpforms-submit-container {
    padding-top: 20px !important;
}

.wpforms-form button[type="submit"], 
.wpforms-submit {
    background-color: #001f3f !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    border: none !important;
    height: 55px !important;
    line-height: 55px !important;
    padding: 0 45px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 10px 20px rgba(0, 31, 63, 0.3) !important;
}

.wpforms-form button[type="submit"]:hover {
    background-color: #e60000 !important; /* Rojo */
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 15px 25px rgba(230, 0, 0, 0.4) !important;
}

/* 7. DESPLEGABLE (SELECT) - FLECHA */
.wpforms-form select {
    appearance: none !important;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg%20xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%20width%3D"24"%20height%3D"24"%20viewBox%3D"0%200%2024%2024"><path%20fill%3D"%23000"%20d%3D"M7%2010l5%205%205-5z"%2F><%2Fsvg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
}/* End custom CSS */