/* =====================================================
   LIVIA – custom.css (LIMPIO Y CONSOLIDADO)
   - Sin duplicados
   - Comparativa (module-4) estable y alineada
   - FAB único (bola -> botón) con icono SIEMPRE visible (desktop)
   - Mobile: sin FAB + comparativa oculta + logos al final + sin banda blanca
===================================================== */

/* =====================================================
   VARIABLES DE LAYOUT
===================================================== */
:root{
  --livia-max: 1200px;
  --livia-gutter: clamp(16px, 4vw, 64px);
  --livia-lead: 22px;
  --livia-lead-lh: 1.45;
  --livia-soft-line: #e5e5e5;
  --livia-blue: #2730F5;
}

/* Para que los anclajes no queden tapados por header */
#features, #uses, #contact, #comparison-accordion, #comparison{
  scroll-margin-top: 120px;
}

/* =====================================================
   VIDEO: OCULTAR CONTROLES POR DEFECTO + HOVER
===================================================== */
.hover-controls::-webkit-media-controls{
  opacity: 0;
  transition: opacity 0.25s ease;
}
.hover-controls::-webkit-media-controls-enclosure{
  opacity: 0;
  transition: opacity 0.25s ease;
}
.hover-controls:hover::-webkit-media-controls,
.hover-controls:hover::-webkit-media-controls-enclosure{
  opacity: 1;
}

/* Firefox */
.hover-controls{ --controls-opacity: 0; }
.hover-controls:hover{ --controls-opacity: 1; }
.hover-controls::-moz-media-controls{
  opacity: var(--controls-opacity);
  transition: opacity 0.25s ease;
}

/* =====================================================
   ISOTIPO / LOGO
===================================================== */
.logo .orb{
  width: 50px;
  height: 50px;
  display: inline-block;
  background-image: url("https://livia-landingpage.uve-group.com/wp-content/uploads/webp/ico-livia.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50px 50px;
}

.logo-link{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* =====================================================
   BOTONES
===================================================== */
.btn-primary,
button[type="submit"]{
  border-radius: 10px;
}

/* =====================================================
   MÓDULO 4 – AJUSTE LOGO TABLA
===================================================== */
.header-cell.livia > .logo > a.logo-link > span.logo-text{
  padding-left: 1.5em;
}

/* =====================================================
   MÓDULO 5 – FEATURES PRINCIPALES
===================================================== */
.module-5{
  margin: 120px auto 24px auto;
}

/* =====================================================
   MÓDULO 6 – CASOS DE USO
===================================================== */
.content-6{
  width: 100%;
  margin: 0 auto;
}
.open-video-modal{
  margin-top: 14px;
  display: inline-block;
}

/* =====================================================
   MÓDULO 8 – FORMULARIO (base)
===================================================== */
section.module-8,
section.module-8 .inner{
  width: 100%;
  margin: 0 auto;
}

/* =====================================================
   MÓDULO 9 – FEATURES EXTRA + FIX overflow de imágenes
===================================================== */
.module-9{
  width: 100%;
  padding: 0 30px;
  margin: 0 auto 120px auto;
}

.module-9 .feature-card.right.bis{
  background: linear-gradient(180deg, #5A5AC9 0%, #5151E6 100%);
}
.module-9 .feature-card.center.bis{
  background: linear-gradient(180deg, #E3EFFF 0%, #BBC4F5 100%);
}
.module-9 .feature-card.left.bis{
  background: linear-gradient(180deg, #51519C 0%, #1A2842 100%);
}

.module-9 .feature-card.right h3,
.module-9 .feature-card.right p{
  color: #ffffff;
}
.module-9 .feature-card.center h3,
.module-9 .feature-card.center p{
  color: #000000;
}

.module-9 .feature-card{
  overflow: hidden; /* recorta lo que sobresale */
}
.module-9 .feature-card .image-container{
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.module-9 .feature-card img{
  max-width: 100% !important;
  width: 100% !important; /* pisa el 120% del HTML */
  height: auto !important;
  display: block;
}

@media screen and (max-width: 1100px){
  .module-9{
    margin: 80px auto;
    padding: 0 20px;
  }
}

/* =====================================================
   FOOTER
===================================================== */
footer,
footer .inner{
  width: 100%;
  margin: 0 auto;
}

/* =====================================================
   BADGE "NUEVO" (ELIMINADO)
===================================================== */
.badge-new{
  display: none !important;
}

/* =====================================================
   VIDEO MODAL
===================================================== */
.video-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}
.video-modal.active{ display: block; }

.video-modal-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
}

.video-modal-content{
  position: relative;
  max-width: 900px;
  margin: 6vh auto;
  background: #000;
  border-radius: 16px;
  padding: 16px;
  z-index: 2;
}

.video-modal-content video{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.video-modal-close{
  position: absolute;
  top: -14px;
  right: -14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #000;
  font-size: 26px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}

@media (max-width: 768px){
  .video-modal-content{ margin: 10vh 16px; }
}

/* =====================================================
   LIMPIEZA – TOGGLE VIEJO (no se usa)
===================================================== */
.comparison-controls,
.comparison-toggle,
.comparison-collapsible{
  display: none !important;
}

/* =====================================================
   COMPARATIVA (details/summary) – BASE LIMPIA
===================================================== */
.comparison-accordion summary{ list-style: none; }
.comparison-accordion summary::-webkit-details-marker{ display: none; }

.module-4{
  padding-left: var(--livia-gutter);
  padding-right: var(--livia-gutter);
  box-sizing: border-box;
}

.module-4 .comparison-accordion{
  max-width: var(--livia-max);
  margin-left: auto;
  margin-right: auto;
  border-top: 1px solid var(--livia-soft-line);
  border-bottom: 1px solid var(--livia-soft-line);
  padding: 22px 0;
  box-sizing: border-box;
}

.comparison-accordion__summary{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  user-select: none;
  padding: 8px 0 18px 0;
}

.comparison-accordion__title{
  font-size: var(--livia-lead);
  line-height: var(--livia-lead-lh);
  font-weight: 700;
  color: #111;
  margin: 0;
}

.comparison-accordion__icon{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--livia-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  transition: transform 260ms ease, filter 260ms ease;
}

.comparison-accordion__icon-svg{
  width: 18px;
  height: 18px;
  display: block;
}
.comparison-accordion__icon svg polyline{ stroke: #fff; }

.comparison-accordion[open] .comparison-accordion__icon{
  transform: rotate(180deg);
  filter: brightness(0.95);
}

.comparison-accordion__content{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 420ms ease, opacity 240ms ease;
}
.comparison-accordion[open] .comparison-accordion__content{
  max-height: 5000px;
  opacity: 1;
}

/* =====================================================
   TABLA COMPARATIVA (module-4) – GRID 3 columnas estable
===================================================== */
.module-4 .comparison-table{
  max-width: var(--livia-max);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

/* Cabecera + filas */
.module-4 .table-header,
.module-4 .table-row{
  display: grid !important;
  grid-template-columns: minmax(220px, 1.1fr) minmax(360px, 1.4fr) minmax(260px, 1.2fr);
  column-gap: 56px;
  align-items: start !important;
}

.module-4 .table-header{
  padding: 10px 40px 18px 40px;
}

.module-4 .header-cell.others p{
  margin: 0;
  font-weight: 700;
}

.module-4 .table-row{
  padding: 28px 40px;
  margin: 0 !important;
  border-radius: 0 !important;
}

.module-4 .table-row.row-color{ background: #f3f3f3; }
.module-4 .table-row.no-row-color{ background: #ffffff; }

.module-4 .header-cell,
.module-4 .cell{
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
}

.module-4 .cell p{
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  white-space: normal !important;
  word-break: normal !important;
}
.module-4 .cell p span{
  display: inline !important;
  white-space: normal !important;
}

.module-4 .cell.feature,
.module-4 .cell.feature p{
  font-weight: 700 !important;
}

.module-4 .comparison-table .highlight{
  font-weight: 800 !important;
}

/* =====================================================
   FIX FORMULARIO (#contact) – por si el tema lo colapsa
===================================================== */
section#contact.module-8,
section.module-8#contact{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
  position: relative;
  z-index: 2;
}

section#contact .inner{
  display: flex;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
}

section#contact .form-livia{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
  position: relative;
  z-index: 3;
}

section#contact form,
section#contact #contact-form{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

section#contact .form-livia,
section#contact form{
  width: 100% !important;
  min-width: 0 !important;
}

@media (max-width: 900px){
  section#contact .inner{ flex-direction: column; }
}

/* =====================================================
   FORM: checkbox con aire
===================================================== */
#contact .checkbox-group{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 14px;
}
#contact .checkbox-group input[type="checkbox"]{
  margin: 3px 0 0 0;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  accent-color: var(--livia-blue, #2730F5);
}
#contact .checkbox-group label{
  line-height: 1.4;
  margin: 0;
}
#contact button[type="submit"]{
  margin-top: 18px;
}

/* =====================================================
   APROVECHA – Key points
===================================================== */
.module-3-advantage .advantage-keypoints{
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.4;
  color: #111;
}
.module-3-advantage .advantage-keypoints strong{
  font-weight: 700;
}
.module-3-advantage .advantage-keypoints .sep{
  margin: 0 12px;
  color: rgba(0,0,0,0.35);
}

/* =====================================================
   CTA – Ocultar botones repetidos (dejamos solo el FAB)
===================================================== */
.module-3-why .button,
.module-3-advantage .button{
  display: none !important;
}

/* =====================================================
   FAB (DESKTOP) – bola -> botón
===================================================== */
.livia-fab{
  position: fixed;
  right: clamp(14px, 2.2vw, 28px);
  bottom: clamp(14px, 2.2vw, 28px);
  z-index: 9999;

  height: 56px;
  width: 56px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #2B2BF6;
  color: #fff !important;
  text-decoration: none;

  box-shadow: 0 18px 40px rgba(43,43,246,0.25);
  overflow: hidden;

  padding: 0;
  gap: 0;

  transition: width 240ms ease, padding 240ms ease, box-shadow 240ms ease, transform 160ms ease;
}

.livia-fab__icon{
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 56px;
  line-height: 0;
  color: #fff !important;
  position: relative;
}

/* Texto oculto en bola */
.livia-fab__text{
  white-space: nowrap;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .01em;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(-6px);
  transition: max-width 220ms ease, opacity 160ms ease, transform 160ms ease;
}

/* Hover: botón */
.livia-fab:hover{
  width: 260px;
  padding: 0 18px 0 10px;
  justify-content: flex-start;
  gap: 12px;
  box-shadow: 0 22px 54px rgba(43,43,246,0.32);
  transform: translateY(-1px);
}
.livia-fab:hover .livia-fab__text{
  max-width: 260px;
  opacity: 1;
  transform: translateX(0);
}
.livia-fab:active{
  transform: translateY(0);
}

/* Bombilla por máscara (blindado) */
a.livia-fab,
a.livia-fab *{
  color: #fff !important;
}

.livia-fab__icon::before{
  content: "" !important;
  display: block !important;
  width: 22px;
  height: 22px;
  opacity: 1 !important;
  visibility: visible !important;
  background-color: #fff !important;

  -webkit-mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-repeat: no-repeat !important;
  mask-position: center !important;
  mask-size: contain !important;

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2018h6'/%3E%3Cpath%20d='M10%2022h4'/%3E%3Cpath%20d='M8.5%2014.2c-1.2-1-2.5-2.6-2.5-4.7A6%206%200%200%201%2012%203a6%206%200%200%201%206%206.5c0%202.1-1.3%203.7-2.5%204.7-.9.8-1.5%201.6-1.5%202.8V18H10v-1.9c0-1.2-.6-2-1.5-2.9Z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2018h6'/%3E%3Cpath%20d='M10%2022h4'/%3E%3Cpath%20d='M8.5%2014.2c-1.2-1-2.5-2.6-2.5-4.7A6%206%200%200%201%2012%203a6%206%200%200%201%206%206.5c0%202.1-1.3%203.7-2.5%204.7-.9.8-1.5%201.6-1.5%202.8V18H10v-1.9c0-1.2-.6-2-1.5-2.9Z'/%3E%3C/svg%3E") !important;
}

/* =====================================================
   LOGOS UVE/ISO: DESKTOP vs MOBILE (según tu HTML)
===================================================== */
.img-footer--mobile{ display: none; }
.img-footer--desktop{
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 18px;
}

/* =====================================================
   MOBILE FINAL (≤768px) – ÚNICO BLOQUE
===================================================== */
@media (max-width: 768px){

  /* 1) Quitar FAB en mobile */
  .livia-fab{ display:none !important; }

  /* 2) Module-6 apilado + botón vídeo con aire */
  .module-6 .content-6{
    padding-left: 16px;
    padding-right: 16px;
  }
  .module-6 .img-text{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-left: 0 !important;
    width: 100%;
  }
  .module-6 .img-text img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }
  .module-6 .open-video-modal{
    display: block !important;
    width: 100% !important;
    max-width: 340px !important;
    margin: 18px 0 18px 0 !important;
  }

  /* 3) Keypoints en columna */
  .module-3-advantage .advantage-keypoints{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .module-3-advantage .advantage-keypoints .sep{
    display: none !important;
  }

  /* 4) Ocultar comparativa en mobile */
  #comparison,
  #comparison-accordion,
  .module-4{
    display:none !important;
    visibility:hidden !important;
    height:0 !important;
    overflow:hidden !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* 5) Ajuste separaciones */
  .module-5{ margin: 64px auto 18px auto !important; }
  .module-9{ margin: 64px auto !important; padding: 0 16px !important; }
  .module-5 .features-grid,
  .module-9 .features-grid{ gap: 18px !important; }
  .module-5 .feature-card,
  .module-9 .feature-card{ margin: 0 !important; }

  /* 6) Contact en columna */
  #contact .inner{
    display:flex !important;
    flex-direction:column !important;
    gap: 20px !important;
  }
  #contact .text{ margin:0 !important; }
  #contact .form-livia{ margin:0 !important; }

  /* Logos: desktop OFF, mobile ON */
  .img-footer--desktop{ display: none !important; }
  .img-footer--mobile{
    display: flex !important;
    gap: 18px !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 18px !important;
  }
  .img-footer--mobile img{
    max-height: 36px !important;
    width: auto !important;
    display: block !important;
  }

  /* 7) Banda blanca: fondo + footer + spacers + pseudo-elementos */
  html, body{ background: #000 !important; }
  #page, #content, main{ background: #000 !important; }
  #contact.module-8{ background: #000 !important; }

  footer, #footer-module, .site-footer, .footer, .footer-wrap{
    background: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .wp-block-spacer, .spacer, .elementor-spacer, .uagb-spacer,
  .wp-block-separator, hr{
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  #contact::before, #contact::after,
  #contact .inner::before, #contact .inner::after{
    content:none !important;
    display:none !important;
  }
  /* === HERO BLOBS: asegurar render en Chrome + Safari === */
#hero.hero {
  position: relative;
  overflow: hidden; /* si quieres que no se salgan del hero */
}

/* contenedores de blobs */
#hero .background-blob,
#hero .background-blob-2,
#hero .background-blob-3 {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
}

/* los círculos */
#hero .pulser {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 999px;

  /* clave: Safari + Chrome */
  -webkit-filter: blur(80px);
  filter: blur(80px);

  opacity: 0.55;
  transform: translateZ(0); /* ayuda a Chrome a componer */
  will-change: transform, opacity;
  mix-blend-mode: normal; /* si tenías blend raro, Chrome a veces “desaparece” */
  animation: liviaBlobFloat 10s ease-in-out infinite;
}

/* coloca algunos de forma bonita (ajusta si quieres) */
#hero .background-blob .pulser:nth-child(1) { top: 10%; left: 8%; }
#hero .background-blob .pulser:nth-child(2) { top: 45%; left: 55%; }
#hero .background-blob .pulser:nth-child(3) { top: 60%; left: 20%; }
#hero .background-blob .pulser:nth-child(4) { top: 15%; left: 70%; }

#hero .background-blob-2 .pulser:nth-child(1) { top: 5%;  left: 70%; width: 320px; height: 320px; }
#hero .background-blob-2 .pulser:nth-child(2) { top: 55%; left: 75%; width: 360px; height: 360px; }
#hero .background-blob-2 .pulser:nth-child(3) { top: 70%; left: 5%;  width: 340px; height: 340px; }

#hero .background-blob-3 .pulser:nth-child(1) { top: 30%; left: 35%; width: 300px; height: 300px; opacity: 0.25; }
#hero .background-blob-3 .pulser:nth-child(2) { top: 20%; left: 45%; width: 520px; height: 520px; opacity: 0.18; }
#hero .background-blob-3 .pulser:nth-child(3) { top: 65%; left: 40%; width: 380px; height: 380px; opacity: 0.22; }
#hero .background-blob-3 .pulser:nth-child(4) { top: 10%; left: 15%; width: 380px; height: 380px; opacity: 0.20; }

@keyframes liviaBlobFloat {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(20px,-18px,0) scale(1.05); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

/* Asegurar que el contenido del hero queda por encima */
#hero .mensage {
  position: relative;
  z-index: 1;
}
.uses-extra {
  margin-top: 16px;
  font-weight: 500;
  opacity: 0.9;
}
}