/* ============ HERO ============ */
.uttor-hero {
  overflow: hidden;
  position: relative;
  min-height: 100vh;
}

/* Forzar el row principal a centrar verticalmente */
.uttor-hero > .et_pb_row,
.uttor-hero .et_pb_row_0 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh;
  margin: 0 auto !important;
  padding: 0 !important;
}

.uttor-hero .et_pb_row_0 .et_pb_column {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px;
  text-align: center;
}

.uttor-hero video,
.uttor-hero .et-pb-background-video video {
  transform: scale(1.08);
  will-change: transform;
}

/* Pre-título */
.uttor-hero-pretitle .et_pb_module_header {
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: #f5f3ef !important;
  font-weight: 400 !important;
  margin: 0 !important;
  position: relative;
  z-index: 3;
}

/* Título UTTOR */
.uttor-hero-title .et_pb_module_header {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(80px, 14vw, 220px) !important;
  line-height: 0.95 !important;
  font-weight: 300 !important;
  color: #f5f3ef !important;
  letter-spacing: -2px !important;
  margin: 0 !important;
  position: relative;
  z-index: 3;
}

.uttor-hero-title .et_pb_module_header .char {
  display: inline-block;
}

/* Subtítulo */
.uttor-hero-subtitle .et_pb_module_header {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-size: clamp(20px, 2.5vw, 32px) !important;
  color: #f5f3ef !important;
  font-weight: 400 !important;
  margin: 0 !important;
  position: relative;
  z-index: 3;
}

/* El Row del indicador Scroll va abajo absoluto */
.uttor-hero .et_pb_row_1 {
  position: absolute !important;
  bottom: 40px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 5;
}

.uttor-scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #f5f3ef;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.uttor-scroll-line {
  width: 1px;
  height: 60px;
  background: rgba(245, 243, 239, 0.2);
  position: relative;
  overflow: hidden;
}

.uttor-scroll-line::before {
  content: '';
  position: absolute;
  top: -60px;
  left: 0;
  width: 100%;
  height: 60px;
  background: #b8a06a;
  animation: scrollPulse 2.2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%   { transform: translateY(0); }
  100% { transform: translateY(120px); }
}

/* Estados de animación (solo si JS activo) */
.js-ready .uttor-hero-pretitle,
.js-ready .uttor-hero-subtitle {
  opacity: 0;
}


/* ============ FIX TÍTULO UTTOR ============ */
.uttor-hero-title,
.uttor-hero-title .et_pb_heading_container,
.uttor-hero-title .et_pb_module_header {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

.uttor-hero-title .et_pb_module_header {
  color: #f5f3ef !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(80px, 14vw, 220px) !important;
  line-height: 1 !important;
  font-weight: 300 !important;
  letter-spacing: -2px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
  position: relative;
  z-index: 4;
  white-space: nowrap;
}

/* SplitType crea div.char por defecto. Forzamos inline-block */
.uttor-hero-title .et_pb_module_header .char,
.uttor-hero-title .et_pb_module_header > div {
  display: inline-block !important;
  color: #f5f3ef !important;
  vertical-align: baseline;
  line-height: 1;
}

/* Por si DIVI o algún módulo pone overflow:hidden y corta */
.uttor-hero,
.uttor-hero .et_pb_row_0,
.uttor-hero .et_pb_row_0 .et_pb_column {
  overflow: visible !important;
}

/* El overflow:hidden del hero solo lo dejamos en el contenedor del video */
.uttor-hero {
  overflow: hidden !important;
}



/* ============ BRAND ============ */
.uttor-brand {
  background: #f5f3ef !important;
  min-height: 100vh;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 80px 0 !important;
  position: relative;
  overflow: hidden;
}

.uttor-brand > .et_pb_row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

.uttor-brand .et_pb_column {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 32px !important;
  width: 100% !important;
  text-align: center;
}

/* Logo wrapper - SIN ningún filter aquí. El JS controla todo */
.uttor-brand-logo {
  margin: 0 auto !important;
  text-align: center !important;
  width: auto !important;
  max-width: 320px !important;
  will-change: filter, opacity, transform;
}

.uttor-brand-logo .et_pb_image_wrap {
  display: inline-block !important;
  width: 100% !important;
}

/* Logo img - SIN filter. El logo ya es blanco o se ve sobre fondo claro */
.uttor-brand-logo img {
  width: 100% !important;
  max-width: 320px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Línea dorada decorativa debajo del logo */
.uttor-brand-logo::after {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  background: #b8a06a;
  margin: 32px auto 0;
  opacity: 0.6;
}

/* Subtítulo dorado */
.uttor-brand-subtitle .et_pb_module_header {
  font-family: 'Cormorant Garamond', serif !important;
  font-style: italic !important;
  font-size: clamp(24px, 3vw, 38px) !important;
  font-weight: 400 !important;
  color: #b8a06a !important;
  text-align: center !important;
  margin: 0 !important;
  letter-spacing: 1px;
}

/* Tagline en gris oscuro sobre fondo claro */
.uttor-brand-tagline .et_pb_text_inner p {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(15px, 1.2vw, 18px) !important;
  color: #4a4a4a !important;
  text-align: center !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .uttor-brand-logo,
  .uttor-brand-logo img {
    max-width: 220px !important;
  }
}


/* ============ TRANSICIÓN BRAND → SERVICIOS ============ */
.uttor-brand {
  transition: background-color 0.3s ease;
  will-change: background-color;
}

.uttor-servicios {
  transition: background-color 0.3s ease;
  will-change: background-color, transform;
}

/* El track de las tarjetas: estado inicial ligeramente desplazado a la derecha */
.uttor-servicios-track {
  will-change: transform;
}

/* Línea decorativa al final del brand (preludio al scroll horizontal) */
.uttor-brand-end-line {
  width: 1px !important;
  height: 60px !important;
  margin: 80px auto 0 !important;
  position: relative;
  overflow: hidden;
  background: transparent !important;
}

.uttor-brand-end-line::before {
  content: '';
  position: absolute;
  top: -60px;
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(180deg, transparent, #b8a06a);
  animation: scrollPulse 2.5s ease-in-out infinite;
}

.uttor-brand-end-line .et_pb_divider_internal {
  display: none !important;
}


/* ============ SERVICIOS · TARJETAS Y SCROLL HORIZONTAL ============ */
.uttor-servicios {
  position: relative;
  overflow: hidden;
  background: #f5f3ef !important;
  padding: 0 !important;
}

/* El Row se convierte en pista horizontal */
.uttor-servicios-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  max-width: none !important;
  gap: 40px;
  padding: 0 8vw;
  margin: 0 !important;
  will-change: transform;
  align-items: center;
  min-height: 100vh;
}

/* Cada columna se convierte en tarjeta de ancho fijo */
.uttor-servicios-track > .et_pb_column {
  flex: 0 0 70vw !important;
  max-width: 70vw !important;
  margin: 0 !important;
  width: 70vw !important;
  padding: 0 !important;
}

/* Estilos de la tarjeta */
.uttor-card {
  position: relative;
  height: 80vh;
  min-height: 600px;
  overflow: hidden;
  background: #0a0a0a;
  margin: 0 !important;
}

/* Imagen de fondo */
.uttor-card .et_pb_main_blurb_image {
  position: absolute !important;
  inset: 0 !important;
  margin: 0 !important;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}

.uttor-card .et_pb_main_blurb_image img,
.uttor-card .et_pb_main_blurb_image .et_pb_image_wrap {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.uttor-card .et_pb_main_blurb_image img {
  object-fit: cover;
  filter: grayscale(100%) brightness(0.7);
  transition: filter 1s ease, transform 1.2s ease;
}

.uttor-card:hover .et_pb_main_blurb_image img {
  filter: grayscale(40%) sepia(20%) brightness(0.85);
  transform: scale(1.05);
}

/* Overlay degradado para legibilidad del texto */
.uttor-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(10,10,10,0.85) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Número decorativo */
.uttor-card-01::after { content: '01'; }
.uttor-card-02::after { content: '02'; }
.uttor-card-03::after { content: '03'; }

.uttor-card::after {
  position: absolute;
  top: 40px;
  left: 40px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 80px;
  color: #f5f3ef;
  z-index: 3;
  line-height: 1;
  font-weight: 300;
}

/* Contenedor del contenido de texto */
.uttor-card .et_pb_blurb_container {
  position: absolute !important;
  bottom: 40px;
  left: 40px;
  right: 40px;
  z-index: 3;
  text-align: left !important;
}

/* Título */
.uttor-card .et_pb_module_header {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(32px, 3vw, 48px) !important;
  color: #f5f3ef !important;
  font-weight: 300 !important;
  margin: 0 0 16px !important;
  line-height: 1.1 !important;
}

.uttor-card .et_pb_module_header em {
  font-style: italic;
  color: #b8a06a;
}

/* Descripción */
.uttor-card .et_pb_blurb_description {
  color: #c8c5c0;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  max-width: 380px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.uttor-card:hover .et_pb_blurb_description {
  opacity: 1;
  transform: translateY(0);
}

/* MOBILE: convertir a scroll vertical normal */
@media (max-width: 980px) {
  .uttor-servicios-track {
    flex-direction: column !important;
    width: 100% !important;
    padding: 60px 6vw !important;
    gap: 30px;
    min-height: auto;
  }
  .uttor-servicios-track > .et_pb_column {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .uttor-card {
    height: 70vh;
    min-height: 500px;
  }
  .uttor-card .et_pb_blurb_description {
    opacity: 1;
    transform: none;
  }
}


/* ============ FIX BLURB DIVI 5 ============ */

/* El blurb_content envuelve todo. Forzarlo a ocupar 100% */
.uttor-card .et_pb_blurb_content {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: visible !important;
}

/* Imagen wrapper completo */
.uttor-card .et_pb_main_blurb_image {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  z-index: 1 !important;
  display: block !important;
}

.uttor-card .et_pb_image_wrap,
.uttor-card .et_pb_only_image_mode_wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

/* Imagen real */
.uttor-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  filter: grayscale(100%) brightness(0.7);
  transition: filter 1s ease, transform 1.2s ease;
}

.uttor-card:hover img {
  filter: grayscale(40%) sepia(20%) brightness(0.85);
  transform: scale(1.05);
}

/* Forzar visibilidad de título y descripción 
   (DIVI 5 a veces los oculta cuando detecta "image mode") */
.uttor-card .et_pb_module_header,
.uttor-card .et_pb_blurb_description {
  display: block !important;
  visibility: visible !important;
}

/* Si DIVI 5 envuelve el texto en otro contenedor, lo posicionamos */
.uttor-card .et_pb_blurb_content > div:not(.et_pb_main_blurb_image),
.uttor-card .et_pb_blurb_container {
  position: absolute !important;
  bottom: 40px !important;
  left: 40px !important;
  right: 40px !important;
  z-index: 4 !important;
  text-align: left !important;
  background: transparent !important;
}


/* ============ DIFERENCIA / STATS ============ */


/* Encabezado de la sección diferencia */
.uttor-diferencia .et_pb_text:first-of-type p {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: #b8a06a !important;
  text-align: center !important;
  margin-bottom: 16px !important;
}

.uttor-diferencia h2.et_pb_module_header {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(36px, 5vw, 64px) !important;
  font-weight: 300 !important;
  color: #f5f3ef !important;
  text-align: center !important;
  max-width: 900px;
  margin: 0 auto 24px !important;
  line-height: 1.1 !important;
}

.uttor-diferencia h2.et_pb_module_header em {
  font-style: italic;
  color: #b8a06a;
}

.uttor-diferencia .uttor-section-subtitle p {
  font-family: 'Inter', sans-serif !important;
  font-size: 17px !important;
  color: #8a8a8a !important;
  text-align: center !important;
  max-width: 700px;
  margin: 0 auto 80px !important;
  line-height: 1.7 !important;
}

.uttor-diferencia {
  background: #0a0a0a !important;
  padding: 120px 0 !important;
  position: relative;
}

.uttor-stats-row {
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
}

.uttor-stats-row > .et_pb_column {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  padding: 0 30px !important;
  gap: 20px !important;
}

/* Líneas divisorias verticales animables */
@media (min-width: 981px) {
  .uttor-stats-row > .et_pb_column:not(:last-child) {
    position: relative;
    border-right: none !important; /* quitar el border-right anterior */
    --line-scale: 0; /* variable CSS controlada por GSAP */
  }
  
  .uttor-stats-row > .et_pb_column:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: #2a2a2a;
    transform: scaleY(var(--line-scale, 1));
    transform-origin: center;
    pointer-events: none;
  }
}

/* Valor grande (número o texto principal) */
.uttor-stat-value .et_pb_module_header {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 300 !important;
  font-size: clamp(36px, 4vw, 64px) !important;  /* ↓ reducido de 84px a 64px */
  color: #b8a06a !important;
  line-height: 1 !important;
  margin: 0 !important;
  text-align: center !important;
  white-space: nowrap;  /* ← evita que se rompa en dos líneas */
}

.uttor-stat-value .et_pb_module_header .stat-num {
  color: #f5f3ef !important;
}

/* Prefijo/sufijo dorado: "N°", "°", "%" */
.uttor-stat-eafn .et_pb_module_header,
.uttor-stat-degrees .et_pb_module_header,
.uttor-stat-independence .et_pb_module_header {
  position: relative;
}

/* Color dorado al "Multi", "EAFN N°", "°", "%" cuando no son el número */
.uttor-stat-value .et_pb_module_header {
  color: #b8a06a !important;
}

.uttor-stat-value .et_pb_module_header .stat-num {
  color: #f5f3ef !important;
}

/* Etiqueta pequeña debajo */
.uttor-stat-label .et_pb_module_header {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: #8a8a8a !important;
  max-width: 180px;
  margin: 0 auto !important;
  line-height: 1.6 !important;
  text-align: center !important;
}


.uttor-section-divider {
  margin: 0 auto 40px !important;
  max-width: 100px !important;
}

.uttor-section-divider .et_pb_divider_internal {
  border-top-color: #b8a06a !important;
}

/* Mobile: stack vertical */
@media (max-width: 980px) {
  .uttor-stats-row {
    flex-direction: column !important;
    gap: 40px !important;
  }
  .uttor-stats-row > .et_pb_column {
    width: 100% !important;
    padding-bottom: 40px !important;
    border-right: none !important;
    border-bottom: 1px solid #2a2a2a;
  }
  .uttor-stats-row > .et_pb_column:last-child {
    border-bottom: none;
  }
}


/* ============ CTA · ESTILOS Y ESTADOS INICIALES ============ */
.uttor-cta {
  position: relative;
  overflow: hidden;
}

/* Asegurar que el contenido va sobre el fondo */
.uttor-cta .et_pb_row {
  position: relative;
  z-index: 2;
}

/* Estados iniciales para animación */
.js-ready .uttor-cta-title,
.js-ready .uttor-cta-subtitle,
.js-ready .uttor-cta-button {
  opacity: 0;
}

/* Título: cursiva dorada */
.uttor-cta-title .et_pb_module_header em {
  font-style: italic;
  color: #b8a06a;
}

/* Botón magnético con fill animado */
.uttor-magnetic-btn {
  position: relative;
  display: inline-block !important;
  transition: transform 0.3s ease;
}

.uttor-magnetic-btn .et_pb_button {
  position: relative !important;
  overflow: hidden !important;
  z-index: 1;
  isolation: isolate;
  transition: color 0.4s ease !important;
}

/* Fondo deslizante al hover (sustituye el background-color por uno animado) */
.uttor-magnetic-btn .et_pb_button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #f5f3ef;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
  z-index: -1;
}

.uttor-magnetic-btn .et_pb_button:hover::before {
  transform: translateY(0);
}

.uttor-magnetic-btn .et_pb_button:hover {
  color: #0a0a0a !important;
}

/* Quita la flecha de DIVI en el botón si interfiere visualmente */
.uttor-magnetic-btn .et_pb_button:hover::after {
  display: none !important;
}