/*
Theme Name: Astra Child
Theme URI: https://deaeconomizadores.com/
Description: Child theme for Astra
Author: DEA
Author URI: https://deaeconomizadores.com/
Template: astra
Version: 1.0.0
Text Domain: astra-child
*/

/* =========================
   GLOBAL
   ========================= */
html, body{
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
.wp-block-heading {
  text-transform: none !important;
}

html {
  scroll-behavior: smooth;
}
/* -------------------------------------------------
   SECCION 1 HERO (CLASE CONTENEDORA hero-total)
   ------------------------------------------------- */

/* =========================
   HERO — MOBILE FIRST (no rompe) + Desktop layout
   Requiere:
   - Eyebrow clase: .hero-eyebrow (Spectra heading)
   - Fila layout: .hero-row
   - Media: .hero-media
   - Texto: .hero-text
   - H1 wrapper: .hero-h1
   - H2 wrapper: .hero-h2
   - CTA wrapper: .hero-cta
   ========================= */


/* -------------------------------------------------
   0) ALTURA / PADDING BASE (mobile + desktop)
   ------------------------------------------------- */

/* ✅ En mobile NO forzamos vh (rompe en pantallas bajas).
   Usamos padding elástico para “aire” consistente. */
.hero-total{
  min-height: auto;
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(56px, 8vw, 96px);
}


/* -------------------------------------------------
   1) SPACING BASE (mobile + desktop)
   ------------------------------------------------- */

/* Reset suave de márgenes internos de Spectra */
.hero-text .wp-block-uagb-container{
  margin: 0 !important;
}

/* H1 */
.hero-section .hero-text .hero-h1{
  margin: 0 0 28px 0 !important;
  line-height: 1.22 !important;
}

/* H2 */
.hero-section .hero-text .hero-h2{
  margin: 0 0 34px 0 !important;
  opacity: .92 !important;
}

/* CTA */
.hero-section .hero-text .hero-cta{
  margin: 0 !important;
  justify-self: start !important;
}

/* Letter-spacing eyebrow */
.hero-eyebrow .uagb-heading-text{
  letter-spacing: 0.03em;
}


/* -------------------------------------------------
   2) MOBILE / TABLET LAYOUT (<= 991px)
   ------------------------------------------------- */

@media (max-width: 991px){

  /* Layout general: apilar y centrar */
  .hero-section .hero-row{
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 28px !important;
    text-align: center !important;
  }

  /* Eyebrow: sin grid raro ni nudges */
  .hero-eyebrow{
    max-width: 980px !important;
    margin: 0 auto 16px !important;
    display: block !important;
    text-align: center !important;
  }

  .hero-eyebrow .uagb-heading-text{
    transform: none !important;
  }

  /* Media: sin padding-left */
  .hero-section .hero-media{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding-left: 0 !important;
    flex: 0 0 auto !important;
  }

  /* Imagen: control claro en mobile */
  .hero-section .hero-media img{
    max-width: 240px !important;
    height: auto !important;
    transform: none !important;       /* ✅ no rotate/translate en mobile */
    margin: 0 auto !important;
  }

  /* Texto: centrado y sin padding-right */
  .hero-section .hero-text{
    max-width: 640px !important;
    padding-right: 0 !important;

    display: grid !important;
    align-content: center !important;
    justify-items: center !important;
    text-align: center !important;
  }

  /* Si el contenedor real del texto es flex (Spectra) */
  .hero-section .hero-text.uagb-layout-flex{
    align-items: center !important;
  }

  /* CTA centrado */
  .hero-section .hero-text.uagb-layout-flex .hero-cta{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .hero-section .hero-cta a.uagb-infobox-cta-link.wp-block-button__link{
    justify-content: center !important;
  }
}


/* -------------------------------------------------
   3) DESKTOP LAYOUT (>= 992px) — tu sistema con variables
   ------------------------------------------------- */

@media (min-width: 992px){

  /* ✅ En desktop sí podés usar altura hero */
  .hero-total{
    min-height: 85vh;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* Variables del hero */
  :root{
    --hero-max: 1200px;
    --hero-media: 430px;
    --hero-gap: 64px;
    --hero-inner-left: 40px;
    --hero-img-shift-x: 18px;
  }

  /* Eyebrow / marca (grid y nudge solo desktop) */
  .hero-eyebrow{
    max-width: var(--hero-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 88px !important;
    margin-bottom: 10px !important;

    display: grid !important;
    grid-template-columns: var(--hero-media) minmax(0, 1fr) !important;
    column-gap: var(--hero-gap) !important;
    align-items: end !important;

    --eyebrow-nudge-x: -120px;
  }

  .hero-eyebrow .uagb-heading-text{
    grid-column: 1 !important;

    justify-self: center !important;
    text-align: center !important;

    margin: 0 !important;
    display: inline-block !important;

    transform: translateX(
      calc(
        (var(--hero-inner-left, 0px) * 0.5) +
        (var(--hero-img-shift-x, 0px) * 0.5) +
        var(--eyebrow-nudge-x)
      )
    ) !important;
  }

  /* Layout general del hero */
  .hero-section .hero-row{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--hero-gap) !important;
  }

  .hero-section .hero-media{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding-left: var(--hero-inner-left) !important;
    flex: 0 0 var(--hero-media) !important;
  }

  /* Imagen con tu look */
  .hero-section .hero-media img.uag-image-1622{
    margin-top: 0 !important;
    max-width: 300px !important;
    height: auto !important;
    transform: translateX(var(--hero-img-shift-x)) translateY(-6px) rotate(-8deg) scale(0.92) !important;
    transform-origin: center !important;
  }

  .hero-section .hero-text{
    flex: 1 1 auto !important;
    max-width: 720px !important;
    padding-right: 64px !important;

    display: grid !important;
    grid-auto-flow: row !important;
    row-gap: 0 !important;
    align-content: center !important;
    justify-items: start !important;
    text-align: left !important;
  }

  /* CTA centrado (si lo querés así) */
  .hero-section .hero-text.uagb-layout-flex .hero-cta{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .hero-section .hero-cta a.uagb-infobox-cta-link.wp-block-button__link{
    justify-content: center !important;
  }
}


/* -------------------------------------------------
   4) HERO — SPACING FIX (Spectra / UAGB real)
   ------------------------------------------------- */

/* El contenedor real del texto del hero es FLEX: columna + gap */
.hero-section .hero-text.uagb-layout-flex{
  flex-direction: column !important;
  justify-content: center !important;
  gap: clamp(18px, 2.2vw, 38px) !important;
}

/* Sacamos márgenes internos que Spectra meta en wrappers */
.hero-section .hero-text.uagb-layout-flex > *{
  margin: 0 !important;
}

/* H1 real */
.hero-section .hero-text .hero-h1 h1{
  margin: 0 !important;
  line-height: 1.22 !important;
}

/* H2 real */
.hero-section .hero-text .hero-h2 h2{
  margin: 0 !important;
  opacity: .92 !important;
}

/* CTA sin margen extra del infobox */
.hero-section .hero-text .hero-cta,
.hero-section .hero-text .hero-cta .uagb-infobox-margin-wrapper{
  margin: 0 !important;
}

/* =========================
   HERO CTA — asegurar estilos en Spectra Info Box
   ========================= */

/* Botón real del infobox */
.hero-section .hero-cta a.uagb-infobox-cta-link.wp-block-button__link{
  background-color: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;

  /* importante: Spectra a veces cambia display/padding */
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease !important;
}

/* Ícono normal */
.hero-section .hero-cta a.uagb-infobox-cta-link.wp-block-button__link svg{
  fill: #ffffff !important;
  transition: fill 0.25s ease !important;
}

/* Hover / focus */
.hero-section .hero-cta a.uagb-infobox-cta-link.wp-block-button__link:hover,
.hero-section .hero-cta a.uagb-infobox-cta-link.wp-block-button__link:focus{
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}

/* Ícono hover */
.hero-section .hero-cta a.uagb-infobox-cta-link.wp-block-button__link:hover svg,
.hero-section .hero-cta a.uagb-infobox-cta-link.wp-block-button__link:focus svg{
  fill: #000000 !important;
}





/* =========================
  Seccion 2*/

/* =========================
   TÍTULO DE SECCIÓN (Spectra Advanced Heading)
   ========================= */

/* Wrapper del heading */
.beneficios-section .wp-block-uagb-advanced-heading.beneficios-title,
.video-section .wp-block-uagb-advanced-heading.video-title{
  max-width: 780px !important;
  margin: 0 auto clamp(38px, 3.4vw, 58px) !important;
  padding: 0 !important;
  text-align: center !important;
}

/* H2 */
.beneficios-section .wp-block-uagb-advanced-heading.beneficios-title > h2.uagb-heading-text,
.video-section .wp-block-uagb-advanced-heading.video-title > h2.uagb-heading-text{
  margin: 0 !important;
  text-align: center !important;

  font-size: clamp(2.15rem, 3.1vw, 2.7rem) !important;
  font-weight: 750 !important;
  line-height: 1.10 !important;
  letter-spacing: -0.018em !important;

  color: #0f172a !important;
}

/* Subrayado */
.beneficios-section .wp-block-uagb-advanced-heading.beneficios-title > h2.uagb-heading-text::after,
.video-section .wp-block-uagb-advanced-heading.video-title > h2.uagb-heading-text::after{
  content: "" !important;
  display: block !important;

  width: 86px !important;
  height: 3px !important;
  margin: 18px auto 0 !important;
  border-radius: 999px !important;

  background: linear-gradient(
    90deg,
    rgba(30,90,168,0),
    rgba(30,90,168,0.85),
    rgba(30,90,168,0)
  ) !important;

  opacity: 0.95 !important;
}

/* =========================
   BOTÓN OVERLAY
   ========================= */

.video-play-btn {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.video-play-btn::before {
  content: "▶";
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background-color: rgba(255, 0, 0, 0.75);;
  color: #ffffff;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.video-card.is-playing .video-play-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.video-card .video-play-btn,
.video-card .video-play-btn:hover,
.video-card .video-play-btn:focus,
.video-card .video-play-btn:active {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

.video-section .video-card{
  position: relative;          /* CLAVE: para que el botón absolute se ancle acá */
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 18px;
  overflow: hidden;            /* CLAVE: el radio recorta el video/overlay */
  background: #fff;
}

.video-section .video-card video{
  display: block;
  width: 100%;
  height: auto;
}


.video-section .video-card video{
  display: block;
  width: 100%;
  height: auto;
  max-height: 60vh;      /* probá 55vh si todavía queda alto */
  object-fit: contain;   /* evita recorte si hay límite de altura */
}
.video-section .video-card{
  max-width: 820px;  /* probá 760/820/900 según look */
  margin-left: auto;
  margin-right: auto;
}

.video-section .video-card{
  max-width: 820px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
}
.video-section .video-card video{
  display: block;
  width: 100%;
  height: 100%;
  max-height: 60vh;
  object-fit: cover; /* <-- esto elimina las franjas */
}


/* Siempre mano en toda el área del video */
.video-section .video-card{
  cursor: pointer;
}

/* Por si el navegador decide cursor propio sobre <video> */
.video-section .video-card video{
  cursor: pointer;
}

/* Overlay solo cuando está pausado */
.video-section .video-card:not(.is-playing)::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.18);
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 2;
}

/* Cuando reproduce, desaparece */
.video-section .video-card.is-playing::after{
  opacity: 0;
}


/* ==================================================
   UAGB / SPECTRA – FORM MESSAGES (SUCCESS + ERROR)
   Ordenado, sin solapamientos, sin fantasmas
   ================================================== */

/* -------------------------
   SUCCESS MESSAGE
   ------------------------- */

.uagb-forms-success-message,
.uagb-forms-success-message-b81bac18{
  width: 100% !important;
  text-align: center !important;
  margin-top: 12px !important;
}

.uagb-forms-success-message span,
.uagb-forms-success-message-b81bac18 span{
  display: inline-block !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

/* -------------------------
   FAILED MESSAGE (VISIBLE)
   ------------------------- */

.uagb-forms-failed-message:not(.uagb-forms-submit-message-hide),
.uagb-forms-failed-message-b81bac18:not(.uagb-forms-submit-message-hide){
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  margin: 14px auto 0 !important;
}

.uagb-forms-failed-message:not(.uagb-forms-submit-message-hide) span,
.uagb-forms-failed-message-b81bac18:not(.uagb-forms-submit-message-hide) span{
  display: inline-block !important;
  text-align: center !important;
}

/* -------------------------
   MENSAJE FANTASMA (HIDE)
   ------------------------- */

.uagb-forms-submit-message-hide{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* =========================
   ERROR OVERLAY (debug)
   ========================= */

.video-card.dea-play-failed::after {
  content: attr(data-dea-play-error);
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  font-size: 14px;
  z-index: 10000;
}

/* =========================
   HERO – PRODUCT IMAGE (balance)
   ========================= */

img.uag-image-1622 {
  filter: brightness(0.85) contrast(0.88) saturate(0.88);
  transform: scale(0.92);
  transform-origin: center;
}

/* =========================
   HERO – COPY SUPPORT
   ========================= */

.hero-copy {
  position: relative;
  z-index: 2;
}

.hero-copy::before {
  content: "";
  position: absolute;
  inset: -80px -120px;
  border-radius: 999px;
  background: radial-gradient(
    ellipse at left center,
    rgba(0, 0, 0, 0.42) 0%,
    rgba(0, 0, 0, 0.28) 35%,
    rgba(0, 0, 0, 0) 75%
  );
  filter: blur(18px);
  z-index: -1;
  pointer-events: none;
}

/* =========================
   VIDEO SECTION BACKGROUND
   ========================= */

/* =========================
   vacio
   ========================= */

/* =========================
   HERO LAYOUT (desktop) – FIX definitivo
   ========================= */

@media (min-width: 992px) {
  .hero-section .hero-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 70px !important;
  }

  .hero-section .hero-media .wp-block-uagb-image.alignleft {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-section .hero-media {
    flex: 0 0 430px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding-left: 60px !important;
  }

  .hero-section .hero-media img.uag-image-1622 {
    max-width: 300px !important;
    height: auto !important;
    margin-top: 10px !important;
    transform: translateX(35px) rotate(-8deg) scale(0.92) !important;
    transform-origin: center !important;
  }

  .hero-section .hero-text {
    flex: 1 1 auto !important;
    max-width: 760px !important;
    padding-right: 80px !important;
    margin-left: auto !important;
    transform: translateX(-60px) !important; /* texto un poco a la izquierda */
  }
}

/* ==============================================================================================================================================================================
   																									 DEA BENEFICIOS (Sección 3)
   Contenedor con clase: .beneficios-section
   =============================================================================================================================================================================== */

/* ======================================================================
   DEA BENEFICIOS (Sección 3) — CSS LIMPIO Y ÚNICO
   Contenedor: .beneficios-section
   HTML: .dea-grid > .dea-card > (.dea-card__content + .dea-card__meta)
   ====================================================================== */

/* =========================
   0) SECTION WRAPPER
   ========================= */
.beneficios-section{
  padding-top: clamp(44px, 4.6vw, 72px) !important;
  padding-bottom: clamp(95px, 9vw, 165px) !important;

  background: linear-gradient(
    to bottom,
    rgba(246, 251, 255, 0) 0%,
    rgba(246, 251, 255, 0.55) 25%,
    rgba(246, 251, 255, 0.85) 55%,
    rgba(246, 251, 255, 0) 100%
  ) !important;
}

/* Wrapper interno Astra/Spectra */
.beneficios-section .uagb-container-inner-blocks-wrap,
.beneficios-section .wp-block-group__inner-container{
  max-width: 1320px !important;
  width: min(1320px, 92vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =========================
   1) TÍTULO DE SECCIÓN (Spectra Advanced Heading)
   ========================= */

/* No tocar H2 genéricos: solo headings que NO sean el de Spectra */
.beneficios-section .wp-block-heading,
.beneficios-section h2:not(.uagb-heading-text){
  text-align: center !important;
  max-width: 980px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: clamp(30px, 3vw, 52px) !important;
  line-height: 1.15 !important;
}

/* Wrapper del heading (controla el aire real) */
.beneficios-section .wp-block-uagb-advanced-heading.beneficios-title{
  max-width: 780px !important;
  margin: 0 auto clamp(38px, 3.4vw, 58px) !important;
  padding: 0 !important;
  text-align: center !important;
}

/* H2 del heading */
.beneficios-section .wp-block-uagb-advanced-heading.beneficios-title > h2.uagb-heading-text{
  margin: 0 !important;
  text-align: center !important;

  font-size: clamp(2.15rem, 3.1vw, 2.7rem) !important;
  font-weight: 750 !important;
  line-height: 1.10 !important;
  letter-spacing: -0.018em !important;

  color: #0f172a !important;
}

/* Subrayado */
.beneficios-section .wp-block-uagb-advanced-heading.beneficios-title > h2.uagb-heading-text::after{
  content: "" !important;
  display: block !important;

  width: 86px !important;
  height: 3px !important;
  margin: 18px auto 0 !important;
  border-radius: 999px !important;

  background: linear-gradient(
    90deg,
    rgba(30,90,168,0),
    rgba(30,90,168,0.85),
    rgba(30,90,168,0)
  ) !important;

  opacity: 0.95 !important;
}

/* =========================
   2) GRID
   ========================= */
.beneficios-section .dea-grid{
  width: min(1120px, 92vw) !important;
  margin: 0 auto !important;

  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(22px, 2.3vw, 36px) !important;

  align-items: stretch !important;
  justify-items: stretch !important;
}

/* =========================
   3) CARDS
   - Meta pegado abajo
   - Descripción negra / meta azul
   ========================= */
.beneficios-section .dea-icon{ display: none !important; }

.beneficios-section .dea-card{
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;

  padding: clamp(30px, 2.6vw, 42px) !important;
  padding-bottom: clamp(92px, 7.2vw, 106px) !important; /* reserva meta + línea */

  border-radius: 26px !important;

  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.95), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(241,247,255,0.95) 100%) !important;

  border: 1px solid rgba(30, 90, 168, 0.10) !important;

  box-shadow:
    0 20px 60px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.90) !important;

  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

/* Content wrapper: centra el pill; el texto vuelve a ancho completo */
.beneficios-section .dea-card__content{
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Pill (título de cada card) — SOLO dentro de la card */
.beneficios-section .dea-card .dea-title{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 auto !important;
  padding: 12px 18px !important;
  border-radius: 16px !important;

  font-size: 0.98rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;

  color: rgba(15, 23, 42, 0.92) !important;
  border: 1px solid rgba(30, 90, 168, 0.18) !important;

  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,0.90), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, rgba(235,244,255,0.95) 0%, rgba(214,230,255,0.85) 100%) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 10px 22px rgba(15, 23, 42, 0.08) !important;
}

/* Texto descriptivo */
.beneficios-section .dea-card .dea-content{
  width: 100% !important;
  text-align: left !important;

  margin-top: 20px !important;

  font-size: 1.05rem !important;
  line-height: 1.75 !important;
  letter-spacing: 0 !important;

  color: rgba(15, 23, 42, 0.78) !important;
}

.beneficios-section .dea-card .dea-content p{
  margin: 0 !important;
}
.beneficios-section .dea-card .dea-content p + p{
  margin-top: 14px !important;
}

/* META (footer azul) pegado abajo */
.beneficios-section .dea-card__meta{
  position: absolute !important;
  left: clamp(30px, 2.6vw, 42px) !important;
  right: clamp(30px, 2.6vw, 42px) !important;
  bottom: 44px !important; /* distancia fija a la línea */
  text-align: left !important;
}

.beneficios-section .dea-card__meta span{
  display: inline-block !important;

  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;

  color: rgba(30, 90, 168, 0.90) !important;
}

/* Línea inferior */
.beneficios-section .dea-card::after{
  content: "" !important;
  position: absolute !important;

  left: clamp(30px, 2.6vw, 42px) !important;
  right: clamp(30px, 2.6vw, 42px) !important;
  bottom: 26px !important;

  height: 3px !important;
  border-radius: 999px !important;

  background: linear-gradient(
    90deg,
    rgba(30, 90, 168, 0.25),
    rgba(30, 90, 168, 1),
    rgba(30, 90, 168, 0.25)
  ) !important;

  opacity: 1 !important;
}

/* =========================
   4) FEATURED (card del medio) — desktop
   ========================= */
@media (min-width: 992px){
  .beneficios-section .dea-card{
    min-height: 340px !important;
  }

  .beneficios-section .dea-card--featured{
    transform: translateY(-10px) scale(1.02) !important;
    border-color: rgba(30, 90, 168, 0.18) !important;

    box-shadow:
      0 26px 75px rgba(15, 23, 42, 0.18),
      0 0 0 4px rgba(30, 90, 168, 0.05) !important;
  }

  .beneficios-section .dea-card--featured .dea-title{
    background:
      radial-gradient(circle at 30% 20%, rgba(255,255,255,0.70), rgba(255,255,255,0) 60%),
      linear-gradient(180deg, rgba(30, 90, 168, 0.16) 0%, rgba(30, 90, 168, 0.08) 100%) !important;

    border-color: rgba(30, 90, 168, 0.26) !important;
  }
}

/* =========================
   5) HOVER (desktop)
   ========================= */
@media (hover:hover) and (pointer:fine){
  .beneficios-section .dea-card:hover{
    transform: translateY(-8px) !important;

    box-shadow:
      0 28px 85px rgba(15, 23, 42, 0.16),
      0 0 0 8px rgba(30, 90, 168, 0.06) !important;

    border-color: rgba(30, 90, 168, 0.16) !important;
  }

  .beneficios-section .dea-card:hover .dea-title{
    border-color: rgba(30, 90, 168, 0.26) !important;
  }
}

/* =========================
   6) MOBILE
   ========================= */
@media (max-width: 920px){
  .beneficios-section .dea-grid{
    width: min(620px, 92vw) !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .beneficios-section .dea-card{
    border-radius: 22px !important;
  }
}
.beneficios-section .wp-block-uagb-advanced-heading.beneficios-title{
  margin-bottom: clamp(20px, 2.2vw, 120px) !important;
}


 /* ===========================================================================================================================================================================
   																					SECCIÓN 4 – Avales (Carrusel)
   Scope: SOLO .avales-section
   =========================================================================================================================================================================== */

.dea-avales{
  padding-top: clamp(64px, 8vw, 120px); !important
}


/* 0) Aislar para no afectar otras secciones */
.avales-section,
.avales-section *{
  box-sizing: border-box;
}

/* Wrapper del heading */
.beneficios-section .wp-block-uagb-advanced-heading.beneficios-title,
.dea-avales .wp-block-uagb-advanced-heading.avales-title{
  max-width: 780px !important;
  margin: 0 auto clamp(38px, 3.4vw, 58px) !important;
  padding: 0 !important;
  text-align: center !important;
}

/* H2 */
.beneficios-section .wp-block-uagb-advanced-heading.beneficios-title > h2.uagb-heading-text,
.dea-avales .wp-block-uagb-advanced-heading.avales-title > h2.uagb-heading-text{
  margin: 0 !important;
  text-align: center !important;

  font-size: clamp(2.15rem, 3.1vw, 2.7rem) !important;
  font-weight: 750 !important;
  line-height: 1.10 !important;
  letter-spacing: -0.018em !important;

  color: #0f172a !important;
}

/* Subrayado */
.beneficios-section .wp-block-uagb-advanced-heading.beneficios-title > h2.uagb-heading-text::after,
.dea-avales .wp-block-uagb-advanced-heading.avales-title > h2.uagb-heading-text::after{
  content: "" !important;
  display: block !important;

  width: 86px !important;
  height: 3px !important;
  margin: 18px auto 0 !important;
  border-radius: 999px !important;

  background: linear-gradient(
    90deg,
    rgba(30,90,168,0),
    rgba(30,90,168,0.85),
    rgba(30,90,168,0)
  ) !important;

  opacity: 0.95 !important;
}


/* 1) Wrapper variables */
.avales-section .dea-trust{
  --dea-trust-bg: transparent;
  --dea-trust-text: #0f172a;
  --dea-trust-muted: rgba(15, 23, 42, 0.68);
  --dea-trust-border: rgba(15, 23, 42, 0.10);
  --dea-trust-card-bg: rgba(255,255,255,0.94);

  --dea-trust-shadow: 0 12px 40px rgba(15,23,42,0.10);
  --dea-trust-radius: 20px;

  /* Aire real entre cards */
  --dea-trust-gap: 30px;

  /* fallback; JS lo pisa en el track */
  --duration: 60s;

  background: var(--dea-trust-bg);
  padding: 26px 16px 62px !important;
}

/* Header interno oculto */
.avales-section .dea-trust__header{ display:none !important; }

/* --- Anti-recorte por wrappers Astra/UAGB (solo dentro de avales) --- */
.avales-section .wp-block-uagb-container,
.avales-section .uagb-container-inner-blocks-wrap,
.avales-section .wp-block-group__inner-container,
.avales-section .ast-container,
.avales-section .wp-block{
  max-height: none !important;
  height: auto !important;

  /* ✅ importante: NO forzar overflow visible en todo (puede romper layouts).
     Sólo evitamos el recorte vertical. */
  overflow-y: visible !important;
}

/* 2) Marquee (viewport) */
.avales-section .dea-trust__marquee{
  position: relative;

  /* recorte del carrusel */
  overflow: hidden !important;

  width: min(1500px, 96vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;

  /* aire vertical para que NO se corte la card protagonista */
  padding-top: 44px !important;
  padding-bottom: 22px !important;

  /* aire lateral para sombras/scale + flechas */
  padding-left: 54px !important;
  padding-right: 54px !important;

  max-height: none !important;
  height: auto !important;
}

/* Fade edges (fallback si no hay mask) */
.avales-section .dea-trust__marquee::before,
.avales-section .dea-trust__marquee::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 64px;
  pointer-events:none;
  z-index: 2;
  opacity: .95;
}

.avales-section .dea-trust__marquee::before{
  left:0;
  background: linear-gradient(to right,
    rgba(246,251,255,1) 0%,
    rgba(246,251,255,.85) 35%,
    rgba(246,251,255,0) 100%
  );
}

.avales-section .dea-trust__marquee::after{
  right:0;
  background: linear-gradient(to left,
    rgba(246,251,255,1) 0%,
    rgba(246,251,255,.85) 35%,
    rgba(246,251,255,0) 100%
  );
}

/* Si el navegador soporta mask, queda MUCHO más fino */
@supports (mask-image: linear-gradient(#000, transparent)){
  .avales-section .dea-trust__marquee::before,
  .avales-section .dea-trust__marquee::after{
    display:none !important;
  }

  .avales-section .dea-trust__marquee{
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0px,
      #000 70px,
      #000 calc(100% - 70px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0px,
      #000 70px,
      #000 calc(100% - 70px),
      transparent 100%
    );
  }
}

/* 3) Track */
.avales-section .dea-trust__track{
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap !important;

  gap: var(--dea-trust-gap);
  width: max-content;

  /* ✅ limpio: esto ayuda a que cycleWidth sea exacto */
  margin: 0 !important;
  padding: 6px 0 !important; /* aire para sombras */

  /* ✅ nudge default (lo mueve el JS de flechas) */
  --nudge: 0px;

  /* JS setea --duration y --cycleWidth acá */
  animation: deaTrustScroll var(--duration) linear infinite;
  will-change: transform;

  /* no recortar sombras internas */
  overflow: visible !important;
}

/* ✅ Scroll SIN hueco + con nudge manual */
@keyframes deaTrustScroll{
  from{ transform: translate3d(var(--nudge, 0px), 0, 0); }
  to  { transform: translate3d(calc(var(--nudge, 0px) - var(--cycleWidth, 50%)), 0, 0); }
}

/* ✅ Pausa SOLO con hover (NO focus-within, así click en flechas no pausa por foco) */
.avales-section .dea-trust__marquee:hover .dea-trust__track{
  animation-play-state: paused;
}

/* =========================
   CARDS (más angostas + más altas + fuentes más grandes)
   ========================= */
.avales-section .dea-trust__card{
  width: clamp(420px, 34vw, 560px) !important;
  min-height: 320px !important;

  padding: 34px 34px 24px !important;

  border-radius: var(--dea-trust-radius);
  border: 1px solid var(--dea-trust-border);
  background: var(--dea-trust-card-bg);
  box-shadow: var(--dea-trust-shadow);

  display: flex;
  flex-direction: column;
  gap: 16px;

  flex: 0 0 auto; /* no shrink */

  opacity: .56;

  transform: translateZ(0);
  transform-origin: center center;

  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    opacity  .45s cubic-bezier(.2,.8,.2,1),
    box-shadow .55s cubic-bezier(.2,.8,.2,1),
    border-color .55s cubic-bezier(.2,.8,.2,1),
    background .55s cubic-bezier(.2,.8,.2,1) !important;
}

/* Protagonista */
.avales-section .dea-trust__card.is-center{
  opacity: 1;
  transform: translateY(-10px) scale(1.045) !important;

  border-color: rgba(30, 90, 168, 0.34);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(244,249,255,0.96));

  position: relative;
  z-index: 3;

  box-shadow:
    0 28px 90px rgba(15, 23, 42, 0.22),
    0 0 0 10px rgba(30, 90, 168, 0.08) !important;
}

.avales-section .dea-trust__track.has-center .dea-trust__card:not(.is-center){
  position: relative;
  z-index: 1;
  opacity: .56;
}

/* Top row */
.avales-section .dea-trust__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
}

/* Logo */
.avales-section .dea-trust__logo{
  display:inline-flex;
  align-items:center;
  gap: 10px;
}

.avales-section .dea-trust__logoMedia{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 40px;
}

.avales-section img.dea-trust__logoImg{
  display:block !important;
  height: 40px !important;
  width: auto !important;
  max-width: 260px !important;
  object-fit: contain !important;
  filter: grayscale(1);
  opacity: .9;
}

.avales-section .dea-trust__card.is-center img.dea-trust__logoImg{
  opacity: 1;
  filter: grayscale(.1);
}

/* Fallback pill */
.avales-section .dea-trust__logoMark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 36px !important;
  padding: 0 14px !important;
  border-radius: 999px;
  border: 1px solid var(--dea-trust-border);
  font-weight: 750;
  font-size: 13px !important;
  letter-spacing: .2px;
  color: rgba(15,23,42,.9);
  background: rgba(255,255,255,.75);
}

/* Badge */
.avales-section .dea-trust__badge{
  font-size: 13px !important;
  color: rgba(2,132,199,.95);
  border: 1px solid rgba(2,132,199,.18);
  background: rgba(2,132,199,.06);
  padding: 9px 13px !important;
  border-radius: 999px;
  white-space: nowrap;
}

.avales-section .dea-trust__card.is-center .dea-trust__badge{
  border-color: rgba(2,132,199,.34);
  background: rgba(2,132,199,.12);
}

/* Content */
.avales-section .dea-trust__content h4{
  margin: 0;
  color: var(--dea-trust-text);
  font-size: 22px !important;
  font-weight: 850 !important;
  line-height: 1.25;
  letter-spacing: -0.2px;
}

.avales-section .dea-trust__content p{
  margin: 10px 0 0;
  color: var(--dea-trust-muted);
  font-size: 17px !important;
  line-height: 1.75 !important;
}

.avales-section .dea-trust__card--quote .dea-trust__quote{
  color: rgba(15,23,42,.78);
  font-style: italic;
}

/* Meta */
.avales-section .dea-trust__meta{
  margin-top: auto;
  padding-top: 18px !important;
  border-top: 1px solid rgba(15,23,42,.08);
}

.avales-section .dea-trust__meta span{
  color: rgba(15,23,42,.55);
  font-size: 14px !important;
}

/* =========================
   Flechas de navegación (Avales)
   ========================= */

.avales-section .dea-trust__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

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

  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.88);
  box-shadow: 0 12px 34px rgba(15,23,42,.16);

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

  font-size: 28px;
  line-height: 1;
  color: rgba(15,23,42,.88);

  cursor: pointer;
  user-select: none;

  opacity: .82;
  transition: transform .20s ease, opacity .20s ease, box-shadow .20s ease, background .20s ease;
}



/* 🎚️ Toggle de flechas – ajuste fino desktop */
@media (min-width: 901px) {
  #dea-avales .dea-trust__navRow {
    opacity: 0.85;                 /* más liviano visualmente */
    transition: opacity .25s ease;
  }

  /* Un poco más presente en hover */
  #dea-avales .dea-trust__navRow:hover {
    opacity: 1;
  }
}

#dea-avales .dea-trust__navRow {
  backdrop-filter: blur(4px);
}

.avales-section .dea-trust__trackWrap {
  padding-top: 26px;
}
.avales-section .dea-trust__nav {
  opacity: .75;
}

.avales-section .dea-trust__nav:hover {
  opacity: .95;
}


/* ✅ evita que el click deje “focus” y te pause por comportamiento raro de algunos temas */
.avales-section .dea-trust__nav:focus{ outline: none; }
.avales-section .dea-trust__nav:focus-visible{
  outline: 3px solid rgba(30,90,168,.30);
  outline-offset: 3px;
}

.avales-section .dea-trust__nav--prev{ left: 10px; }
.avales-section .dea-trust__nav--next{ right: 10px; }

.avales-section .dea-trust__nav:hover{
  opacity: 1;
  background: rgba(255,255,255,.98);
  transform: translateY(-50%) scale(1.07);
  box-shadow: 0 18px 46px rgba(15,23,42,.22);
}

/* Responsive */
@media (max-width: 900px){
  .avales-section .dea-trust__marquee{
    padding-left: 44px !important;
    padding-right: 44px !important;
    padding-top: 36px !important;
    padding-bottom: 18px !important;
  }

  .avales-section .dea-trust__card{
    width: clamp(320px, 84vw, 520px) !important;
    min-height: 300px !important;
  }

  .avales-section .dea-trust__nav{
    width: 38px;
    height: 38px;
    font-size: 22px;
  }
  .avales-section .dea-trust__nav--prev{ left: 8px; }
  .avales-section .dea-trust__nav--next{ right: 8px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .avales-section .dea-trust__track{
    animation-duration: 0.001s !important;
  }

  .avales-section .dea-trust__card,
  .avales-section .dea-trust__card.is-center{
    transform: none !important;
    opacity: 1 !important;
  }
}
/* =========================
   Flechas – más contraste (invertidas)
   ========================= */
.avales-section .dea-trust__nav{
  background: rgba(15,23,42,.88);          /* oscuro */
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.95);            /* ícono blanco */
  box-shadow:
    0 14px 36px rgba(15,23,42,.22),
    0 0 0 6px rgba(30,90,168,.08);         /* halo suave */
  opacity: .92;
}

/* Hover: un toque más “vivo” */
.avales-section .dea-trust__nav:hover{
  background: rgba(15,23,42,.96);
  opacity: 1;
  box-shadow:
    0 18px 46px rgba(15,23,42,.28),
    0 0 0 8px rgba(30,90,168,.14);
}

/* Active: feedback al click */
.avales-section .dea-trust__nav:active{
  transform: translateY(-50%) scale(0.98);
}

/* Focus visible: accesible y consistente */
.avales-section .dea-trust__nav:focus-visible{
  outline: 3px solid rgba(255,255,255,.55);
  outline-offset: 3px;
}


/* Cursor interactivo en hover */

.avales-section .dea-trust__card.is-center{
  cursor: pointer;
}






/* =========================
   Header de imagen full-width + badge superpuesto
   ========================= */

.avales-section .dea-trust__media{
  position: relative;
  width: calc(100% + 68px);          /* compensa padding 34px + 34px */
  margin: -34px -34px 18px -34px;    /* sube y estira */
  height: 180px;                     /* ajustá si querés más alto */
  overflow: hidden;
  border-radius: 20px 20px 12px 12px;
}

.avales-section .dea-trust__mediaImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Badge overlay */
.avales-section .dea-trust__badge--overlay{
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;

  /* 🔵 Estado normal (NO ganadora): azul */
  backdrop-filter: blur(6px);
  background: rgba(2,132,199,.18);
  border-color: rgba(2,132,199,.35);
  color: rgba(2,132,199,.95);
}

/* ⚪ Cuando la card es ganadora: blanco + microcontraste */
.avales-section .dea-trust__card.is-center .dea-trust__badge--overlay{
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.92);
  border-color: rgba(2,132,199,.95);
  border-width: 1px;
  color: rgba(0, 0, 0, 1);

  /* microcontraste */
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* Ajuste premium de imagen en cards (sutil, institucional) */
.avales-section .dea-trust__mediaImg{
  filter: saturate(0.95) contrast(1.05);
}


/* =========================================================
   FIX DEFINITIVO — Título beneficios (Spectra)
   Pegarlo al FINAL del CSS (últimas líneas)
   ========================================================= */

/* Wrapper: controla el aire (este es el que manda) */

/* Regla general (por si cambia el ID del bloque) */
.beneficios-section .wp-block-uagb-advanced-heading.beneficios-title{
  margin-bottom: clamp(20px, 2.2vw, 120px) !important;
}

/* Regla más específica (gana contra estilos del bloque Spectra) */
.beneficios-section .wp-block-uagb-advanced-heading.beneficios-title{
  margin-bottom: clamp(36px, 4.2vw, 120px) !important;
}


/*=========================================================================================================================================================================================*/
/*=======================================================================    Mobile   ======================================================================================================*/
/* =========================================================
   MOBILE (<= 991px) — Base + Scale + HERO (final)
   ========================================================= */
@media (max-width: 991px){

  /* -------------------------
     Base mobile (global)
     ------------------------- */
  .hero-total, .video-section, .beneficios-section, .reconocimientos-section, .form-section{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

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

  /* -------------------------
     Mobile scale (global)
     ------------------------- */
  html{
    font-size: 15px !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body{ line-height: 1.55; }

  h1, .hero-section h1{
    font-size: clamp(1.7rem, 6.2vw, 2.2rem) !important;
    line-height: 1.15 !important;
  }

  h2{
    font-size: clamp(1.35rem, 4.6vw, 1.8rem) !important;
    line-height: 1.15 !important;
  }

  h3{ font-size: clamp(1.15rem, 3.8vw, 1.45rem) !important; }

  /* ======================================================
     HERO — MOBILE (final)
     Objetivo:
     Headline -> Bajada -> CTA (centrado) -> Producto (no compite)
     ====================================================== */

  /* Altura/padding hero (menos aire abajo) */
  .hero-total{
    padding-top: 40px !important;
    padding-bottom: 18px !important;
    min-height: auto;
  }

  /* Layout: apilar y centrar */
  .hero-section .hero-row{
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    text-align: center !important;
  }

  /* Orden: texto arriba, producto abajo */
  .hero-section .hero-text{ order: 1 !important; }
  .hero-section .hero-media{ order: 2 !important; }

  /* 🔧 Asegurar que el bloque de texto tenga ancho completo
     (si no, el H2 queda “centrado” dentro de una caja angosta) */
  .hero-section .hero-text{
    width: 100% !important;
    max-width: 700px !important; /* podés subir a 700 si querés */
  }

  /* Eyebrow */
  .hero-eyebrow .uagb-heading-text{
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.03em;
  }

  /* Headline (fine tuning) */
  .hero-section .hero-text .hero-h1 h1{
    font-size: clamp(1.75rem, 6.6vw, 2.15rem) !important;
    line-height: 1.14 !important;
  }
  .hero-section .hero-text .hero-h1{ margin-bottom: 14px !important; }

  /* Bajada (fine tuning) */
  .hero-section .hero-text .hero-h2{
    margin-top: 10px !important;
    margin-bottom: 20px !important;
    opacity: 0.80 !important;
  }
  .hero-section .hero-text .hero-h2 h2{
    font-size: clamp(1.0rem, 3.9vw, 1.15rem) !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
  }

  /* ✅ FIX: H2 alineado a la izquierda y arrancando en el mismo borde que el H1 */
  .hero-section .hero-text .hero-h2,
  .hero-section .hero-text .hero-h2 *{
    text-align: left !important;
    justify-content: flex-start !important;
  }

  /* -------------------------
     CTA (centrado real)
     Causa previa: bloque hero-cta quedaba en width ~199px a la izquierda
     ------------------------- */

  /* Si el bloque tiene clase hero-cta (Spectra Info Box) */
  .hero-section .hero-text .wp-block-uagb-info-box.hero-cta,
  .hero-section .hero-text .wp-block-uagb-info-box.uagb-block-a1136e67{
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .hero-section .hero-text .hero-cta .uagb-infobox-margin-wrapper,
  .hero-section .hero-text .hero-cta .uagb-ifb-content,
  .hero-section .hero-text .hero-cta .uagb-ifb-button-wrapper.wp-block-button{
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .hero-section .hero-text .hero-cta{
    margin-top: 6px !important;
    margin-bottom: 22px !important;
  }

  .hero-section .hero-text .hero-cta .uagb-ifb-button-wrapper.wp-block-button{
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .hero-section .hero-text .hero-cta a.uagb-infobox-cta-link.wp-block-button__link{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 18px !important;
    border-radius: 14px !important;
  }

  /* -------------------------
     Producto (centrado real + rotación)
     ------------------------- */
  .hero-section .hero-media{
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding-left: 0 !important;
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    text-align: center !important;
  }

  /* Neutralizar alignleft de Spectra en mobile */
  .hero-section .hero-media .wp-block-uagb-image.alignleft,
  .hero-section .hero-media .wp-block-uagb-image.wp-block-uagb-image--align-left{
    float: none !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-section .hero-media .wp-block-uagb-image__figure{
    display: flex !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-section .hero-media img{
    max-width: 130px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    transform: translateX(0px) rotate(16deg) !important;
    transform-origin: center !important;
  }

  /* Evitar margen extra del último hijo del hero */
  .hero-section .hero-row > *:last-child{
    margin-bottom: 0 !important;
  }
}

/* =========================
   HERO — MOBILE: PASS PREMIUM (micro aire + jerarquía + transición)
   ========================= */
@media (max-width: 991px){

  /* 1) Headline: más respiración sin cambiar tamaño */
  .hero-section .hero-text .hero-h1 h1{
    line-height: 1.20 !important;
  }
  .hero-section .hero-text .hero-h1{
    margin-bottom: 18px !important;
  }

  /* 2) Bajada: menos peso visual (acompaña, no compite) */
  .hero-section .hero-text .hero-h2{
    opacity: 0.9 !important;
  }
  .hero-section .hero-text .hero-h2 h2{
    font-weight: 500 !important;
	align-content: left;
  }

  /* 3) CTA: más aire arriba y abajo */
  .hero-section .hero-text .hero-cta{
    margin-top: 12px !important;
    margin-bottom: 30px !important;
  }

  /* 5) Transición al video: separar secciones */
  .video-section{
    padding-top: 34px !important;
  }
}

/* =========================
   HERO — MOBILE: orden real (final)
   Marca -> Producto -> H1/H2 -> CTA
   ========================= */
@media (max-width: 991px){

  .hero-section .hero-row{
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
  }

  /* Rompe el wrapper para poder intercalar elementos */
  .hero-section .hero-text{
    display: contents !important;
  }

  /* 1) Marca / eyebrow (DIV #0) */
  .hero-section .hero-text > .uagb-block-6e26a1fe{
    order: 1 !important;
  }

  /* 2) Producto */
  .hero-section .hero-media{
    order: 2 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 6px !important;
    margin-bottom: 4px !important;
  }

  /* 3) H1 + H2 (DIV #1) */
  .hero-section .hero-text > .uagb-block-f9c48fbe{
    order: 3 !important;
    width: 100% !important;
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* 4) CTA (DIV #2) */
  .hero-section .hero-cta{
    order: 4 !important;
  }
}

/* =========================
   SECCIÓN 2 — MOBILE
   Igualar tamaño al H1 del hero mobile
   ========================= */
@media (max-width: 991px){

  .beneficios-section 
  .wp-block-uagb-advanced-heading.beneficios-title > h2.uagb-heading-text,
  .video-section
  .wp-block-uagb-advanced-heading.video-title > h2.uagb-heading-text{
    font-size: clamp(1.5rem, 5.1vw, 1.85rem) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.015em !important;
  }

}
/* =========================
   VIDEO PLAY BUTTON — MOBILE (premium)
   ========================= */
@media (max-width: 991px){

  .video-play-btn::before{
    width: 56px !important;
    height: 56px !important;
    font-size: 20px !important;

    /* Estética pro */
    background: rgba(255, 0, 0, 0.75) !important; /* dark slate */
    color: #ffffff !important;

    border: 1px solid rgba(255,255,255,0.25) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    box-shadow:
      0 8px 18px rgba(0,0,0,0.35),
      inset 0 0 0 1px rgba(255,255,255,0.08);

    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  /* Micro feedback táctil */
  .video-play-btn:active::before{
    transform: translate(-50%, -50%) scale(0.95);
    box-shadow: 0 6px 14px rgba(0,0,0,0.35);
  }
}

/* =========================
 mobile
   Aire arriba y abajo del video
   ========================= */
@media (max-width: 991px){

  /* Aire general de la sección del video */
  .video-section{
    padding-top: 100px !important;
    padding-bottom: 100px !important;
  }

  /* Separación entre título y video */
  .video-section .video-title{
    margin-bottom: 28px !important;
  }

  /* Un poco de aire debajo del video antes de la próxima sección */
  .video-section .video-card{
    margin-bottom: 12px !important;
  }
}

/* =========================
   VIDEO — MOBILE: Título -> Copy -> Video (gap controlado)
   ========================= */
@media (max-width: 991px){

  /* Evita colapso de márgenes dentro del contenedor de la sección */
  .video-section .uagb-container-inner-blocks-wrap{
    display: flow-root !important;
  }

  /* 1) Título: no empuja con margin-bottom */
  .video-section .wp-block-uagb-advanced-heading.video-title{
    margin-bottom: 0 !important;
  }

  /* 2) Copy: separado del título */
  .video-section .wp-block-uagb-advanced-heading.video-copy{
    margin-top: 80px !important;     /* Título -> Copy */
    margin-bottom: 0 !important;
  }

  /* 3) Video: separado del copy */
  .video-section .video-card{
    margin-top: 18px !important;     /* Copy -> Video */
  }
}
/* =========================
  Seccion 3 Mobile
   ========================= */
@media (max-width: 920px){

  /* Heading sección beneficios — más chico y legible */
  .beneficios-section 
  .wp-block-uagb-advanced-heading.beneficios-title 
  > h2.uagb-heading-text{
    font-size: clamp(1.4rem, 5.4vw, 1.65rem) !important;
    line-height: 1.15 !important;
  }
}
@media (max-width: 920px){

  .beneficios-section 
  .wp-block-uagb-advanced-heading.beneficios-title{
    margin-bottom: 70px !important;
  }

}
/* =========================
   Cards — control de copy por breakpoint
   ========================= */

/* Desktop por defecto */
.copy-mobile,
.meta-mobile{
  display: none !important;
}

/* Mobile */
@media (max-width: 920px){

  .copy-desktop,
  .meta-desktop{
    display: none !important;
  }

  .copy-mobile,
  .meta-mobile{
    display: block !important;
  }

  /* Meta en una sola línea */
  .dea-card__meta .meta-mobile{
    display: inline !important;
  }
}

/* =========================
   DEA BENEFICIOS — FIX duplicación (mobile vs desktop)
   ========================= */

/* Default: desktop */
.beneficios-section .meta-mobile{ display: none !important; }
.beneficios-section .meta-desktop{ display: inline-block !important; }

@media (max-width: 920px){
  .beneficios-section .meta-desktop{ display: none !important; }
  .beneficios-section .meta-mobile{ display: inline-block !important; }
}

/* (Opcional) Copy también, por si te duplica párrafos */
.beneficios-section .copy-mobile{ display: none !important; }
.beneficios-section .copy-desktop{ display: block !important; }

@media (max-width: 920px){
  .beneficios-section .copy-desktop{ display: none !important; }
  .beneficios-section .copy-mobile{ display: block !important; }
}

/* =========================
   FIX DEFINITIVO: meta duplicado
   ========================= */

/* Reset total: por defecto no se ve ningún span */
.beneficios-section .dea-card__meta span{
  display: none !important;
}

/* DESKTOP: mostrar solo el primer span */
@media (min-width: 921px){
  .beneficios-section .dea-card__meta span:first-child{
    display: inline-block !important;
  }
}

/* MOBILE: mostrar solo el segundo span */
@media (max-width: 920px){
  .beneficios-section .dea-card__meta span:last-child{
    display: inline-block !important;
  }
}

/* =========================
   MOBILE: más aire entre cards
   ========================= */
@media (max-width: 920px){
  .beneficios-section .dea-grid{
    gap: 26px !important; /* antes 18px */
  }
}


/* =========================
   Sección 4 (Avales) — Mobile
   Igualar tamaño con sección 2/3
   ========================= */
@media (max-width: 920px){

  .dea-avales 
  .wp-block-uagb-advanced-heading.avales-title 
  > h2.uagb-heading-text{
    font-size: clamp(1.4rem, 5.4vw, 1.65rem) !important;
    line-height: 1.15 !important;
  }

}

/* SOLO para mobile, SOLO sección avales */
@media (max-width: 900px){
  .avales-section,
  .avales-section .wp-block-uagb-container,
  .avales-section .uagb-container-inner-blocks-wrap,
  .avales-section .wp-block-group__inner-container,
  .avales-section .ast-container,
  .avales-section .entry-content{
    overflow: visible !important;
    max-height: none !important;
  }
}
@media (max-width: 900px){

  /* 1) Creá carril lateral para flechas */
  .avales-section .dea-trust__marquee{
    padding-left: 64px !important;
    padding-right: 64px !important;
  }

  /* 2) Hacé la card un toque más angosta para que entre cómoda */
  .avales-section .dea-trust__card{
    width: clamp(300px, 76vw, 480px) !important;
  }

  /* 3) Flechas bien pegadas a los bordes, en el carril */
  .avales-section .dea-trust__nav--prev{ left: 14px; }
  .avales-section .dea-trust__nav--next{ right: 14px; }
}

@media (max-width: 900px){
  .avales-section .dea-trust__nav{
    box-shadow: 0 10px 24px rgba(15,23,42,.18) !important;
  }
}


.avales-section .dea-trust__trackWrap{
  will-change: transform;
  transform: translate3d(0,0,0);
}

@media (max-width: 900px){

  /* 1) Menos carril lateral en mobile (recuperás ancho útil) */
  .avales-section .dea-trust__marquee{
    padding-left: 46px !important;
    padding-right: 46px !important;
  }

  /* 2) Fade/mask más chico en mobile (el gap “percibido” desaparece) */
  @supports (mask-image: linear-gradient(#000, transparent)){
    .avales-section .dea-trust__marquee{
      -webkit-mask-image: linear-gradient(
        to right,
        transparent 0px,
        #000 32px,
        #000 calc(100% - 32px),
        transparent 100%
      ) !important;
      mask-image: linear-gradient(
        to right,
        transparent 0px,
        #000 32px,
        #000 calc(100% - 32px),
        transparent 100%
      ) !important;
    }
  }

  /* Fallback fade (si no hay mask) también más fino */
  .avales-section .dea-trust__marquee::before,
  .avales-section .dea-trust__marquee::after{
    width: 34px !important;
    opacity: .85 !important;
  }

  /* 3) Flechas: que sigan fuera del contenido */
  .avales-section .dea-trust__nav--prev{ left: 10px; }
  .avales-section .dea-trust__nav--next{ right: 10px; }
}

@media (max-width: 900px){
  .avales-section .dea-trust__marquee{
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .avales-section .dea-trust__nav--prev{ left: 6px; }
  .avales-section .dea-trust__nav--next{ right: 6px; }
}
@media (max-width: 900px){
  .avales-section .dea-trust__marquee{
    padding-left: 16px !important;
    padding-right: 16px !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}
@media (max-width: 900px){
  .avales-section .dea-trust__marquee{
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* --- Viewport real: acá va el recorte + mask --- */
.avales-section .dea-trust__viewport{
  position: relative;
  overflow: hidden !important;

  /* el padding lateral del viewport (NO del marquee) */
  padding: 44px 16px 22px !important;

  /* si querés el fade/mask, aplicalo acá */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0px,
    #000 32px,
    #000 calc(100% - 32px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0px,
    #000 32px,
    #000 calc(100% - 32px),
    transparent 100%
  );
}

/* IMPORTANTE: sacale mask al marquee si lo tenías ahí */
.avales-section .dea-trust__marquee{
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* --- Barra superior de navegación (doble botón “largo”) --- */
.avales-section .dea-trust__navRow{
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.88);
  box-shadow: 0 14px 36px rgba(15,23,42,.22);
}

/* Botones: más chicos pero dentro de una “pastilla” más larga */
.avales-section .dea-trust__nav{
  position: static !important;   /* deja de ser absolute */
  transform: none !important;

  width: 40px;
  height: 34px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.95);

  box-shadow: none;
  opacity: 1;
}

/* Hover/active */
.avales-section .dea-trust__nav:hover{
  background: rgba(255,255,255,.14);
}
.avales-section .dea-trust__nav:active{
  transform: none !important;
  filter: brightness(0.95);
}

/* Responsive */
@media (max-width: 900px){
  .avales-section .dea-trust__navRow{ top: 10px; }
  .avales-section .dea-trust__nav{ width: 36px; height: 32px; }
}
/* =========================
   Quitar difuminado lateral en mobile
   ========================= */
@media (max-width: 768px) {
   .avales-section .dea-trust__marquee {
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* por si hubiese fallback con pseudo-elementos */
  .avales-section .dea-trust__marquee::before,
  .avales-section .dea-trust__marquee::after {
    display: none !important;
    opacity: 0 !important;
  }
}

/* =========================
   Avales – Mobile: eliminar difuminado lateral (gradientes ::before/::after)
   ========================= */
@media (max-width: 768px){
 .avales-section .dea-trust__marquee::before,
.avales-section .dea-trust__marquee::after{
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    background: none !important;
  }
}
@media (max-width: 768px){
  .avales-section .dea-trust__viewport::before,
  .avales-section .dea-trust__viewport::after{
    content: none !important;
    display: none !important;
  }
}
/* Avales – Mobile: eliminar mask/fade lateral REAL */
@media (max-width: 768px){
  .avales-section .dea-trust__viewport{
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

/* Por defecto: desktop */
.avales-section .dea-trust__desc--mobile{ display: none !important; }
.avales-section .dea-trust__desc--desktop{ display: block !important; }

/* Mobile: swap */
@media (max-width: 768px){
  .avales-section .dea-trust__desc--desktop{ display: none !important; }
  .avales-section .dea-trust__desc--mobile{ display: block !important; }
}
/* =========================
   Avales – swap de descripción desktop / mobile
   ========================= */

/* Estado base (desktop) */
.avales-section .dea-trust__desc--desktop{
  display: block;
}

.avales-section .dea-trust__desc--mobile{
  display: none;
}

/* Mobile: invertir */
@media (max-width: 768px){
  .avales-section .dea-trust__desc--desktop{
    display: none !important;
  }

  .avales-section .dea-trust__desc--mobile{
    display: block !important;
  }
}

/* =========================
   Avales – Mobile: viewport más ancho
   ========================= */
@media (max-width: 900px){

  .avales-section .dea-trust__viewport{
    /* más ancho útil */
    padding-left: 0 !important;
    padding-right: 0 !important;

    /* opcional: mantener aire vertical */
    padding-top: 36px !important;
    padding-bottom: 18px !important;

    /* quitar mask en mobile para no “comer” ancho */
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}
/* =========================
   Avales – Mobile: carrusel full-bleed (romper container angosto)
   ========================= */
@media (max-width: 900px){

  /* 1) El marquee ocupa toda la pantalla */
  .avales-section .dea-trust__marquee{
    width: 100vw !important;
    max-width: 100vw !important;

    /* full-bleed dentro de container centrado */
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    /* sacar padding que te encajona */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2) Viewport sin padding lateral y sin mask (para no “comer” ancho útil) */
  .avales-section .dea-trust__viewport{
    padding-left: 0 !important;
    padding-right: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

/* Avales – Mobile: quitar margin-bottom del título (UAGB container real) */
@media (max-width: 900px){
  .wp-block-uagb-container.dea-avales
  .wp-block-uagb-advanced-heading.uagb-block-143ada9f.avales-title{
    margin-bottom: 0 !important;
  }
}


/*======================================================================== Seccion 5* ========================================================================*/

/* Contacto – Mobile: reducir aire superior del heading */
@media (max-width: 900px){
  .wp-block-uagb-advanced-heading.uagb-block-0596baf9{
    margin-top: 22px !important;
    padding-top: 0 !important;
  }
}
@media (max-width: 920px){
  .wp-block-uagb-advanced-heading.uagb-block-0596baf9
  > h3.uagb-heading-text{
    font-size: clamp(1.4rem, 5.4vw, 1.65rem) !important;
    line-height: 1.15 !important;
  }

  .wp-block-uagb-advanced-heading.uagb-block-0596baf9
  > p.uagb-desc-text{
    font-size: clamp(1.01rem, 3.9vw, 1.19rem)
 !important;
    line-height: 1.15 !important;
  }
}


/* Formulario – Mobile: casi full width */
@media (max-width: 920px){

  /* wrapper del bloque form */
  .wp-block-uagb-forms.uagb-block-b81bac18{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* el form adentro */
  .wp-block-uagb-forms.uagb-block-b81bac18 form.uagb-forms-main-form{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* opcional: inputs/textarea a full width */
  .wp-block-uagb-forms.uagb-block-b81bac18 .uagb-forms-input{
    width: 100% !important;
    max-width: 100% !important;
  }
}