/* Variables de Colores y Fuente del Cliente */
:root {
  --color-primary: #008eb3 ;
  --color-secondary: #0F6AA6;
  --color-accent: #f99001   ;
  --color-dark: #111827;
  --color-white: #FFFFFF;
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}


/* Aplicar fuente Inter a toda la página con mayor especificidad */
* {
  font-family: var(--font-main) !important;
}

html, body {
  font-family: var(--font-main) !important;
}

/* Asegurar que Inter se aplique a todos los elementos de texto */
h1, h2, h3, h4, h5, h6,
p, span, div, a, li, button, input, label, textarea,
.banner-one__title,
.banner-one__text-1,
.image-generator-tools__title,
.image-generator-tools__title-2,
.image-generator-tools__text,
.art-and-image-tool__title,
.art-and-image-tool__text,
.pricing-one__price,
.pricing-one__tagline,
.section-title h2,
.section-title h4,
.hiw__title,
.hiw__subtitle,
.hiw__heading,
.hiw__text,
.footer-widget__about-text,
.main-footer__bottom-text {
  font-family: var(--font-main) !important;
}

/* Pesos de fuente específicos para emular el diseño de la imagen */
.banner-one__title {
  font-weight: 900 !important;
  letter-spacing: -0.05em !important;
  line-height: 1.1 !important;
}

.text-gradient-brand {
  font-weight: 900 !important;
  letter-spacing: -0.05em !important;
}

.image-generator-tools__title {
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
}

.image-generator-tools__title-2 {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
}

.pricing-one__price {
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

.hiw__heading {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.pricing-one__section-title__title {
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

.art-and-image-tool__title {
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

/* Hacer todos los títulos principales más gruesos como en el empaque */
h1, h2, h3 {
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
}

h4 {
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* Texto del hero más grueso */
.banner-one__text-1 {
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.4 !important;
}

/* Optimizar legibilidad del texto */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Botón WhatsApp con nuevos colores */
.btn-whatsapp {
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    border: 2px solid var(--color-primary) !important;
}

.btn-whatsapp:hover {
    background: var(--color-secondary) !important;
    color: var(--color-white) !important;
    border: 2px solid var(--color-secondary) !important;
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* Composición de producto en el hero */
.hero-product {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

.hero-product img {
    max-height: 380px;
    width: auto;
}

@media (max-width: 991px) {
    .hero-product img {
        max-height: 260px;
    }
}

/* Ocultar el switch de "pricing" del template (no aplica) */
.pricing-one__switch-toggle-title-box {
    display: none;
}

/* Fondo degradado animado con nuevos colores */
body {
  background: linear-gradient(135deg, 
    rgba(14, 165, 183, 0.1), 
    rgba(15, 106, 166, 0.08), 
    rgba(245, 158, 11, 0.1),
    rgba(14, 165, 183, 0.12)
  );
  background-size: 300% 300%;
  animation: gradientShift 20s ease infinite;
  background-attachment: fixed;
  background-repeat: no-repeat;
  font-family: var(--font-main) !important;
}

/* Quitar colores sólidos previos */
.page-wrapper, 
.banner-one, 
body {
  background-color: transparent !important;
}

/* Animación del gradiente */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 50% 0%; }
  50%  { background-position: 100% 50%; }
  75%  { background-position: 50% 100%; }
  100% { background-position: 0% 50%; }
}

/* Texto degradado con nuevos colores de marca */
.text-gradient-brand {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

/* Títulos principales con color oscuro */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-dark) !important;
    font-family: var(--font-main) !important;
}

/* =====================
   How It Works (Vertical Layout)
===================== */
.hiw {
  padding: 60px 20px;
  text-align: center;
}

.hiw__title {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 800;
  color: var(--color-dark);
  margin-bottom: 10px;
  font-family: var(--font-main) !important;
}

.hiw__subtitle {
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--color-secondary);
  margin-bottom: 40px;
  font-family: var(--font-main) !important;
}

.hiw__steps--column {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.hiw__step {
  max-width: 500px;
  text-align: center;
}

.hiw__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 15px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 15px rgba(14, 165, 183, 0.3);
  color: var(--color-white);
  font-weight: 700;
  font-family: var(--font-main) !important;
}

.hiw__icon img {
  width: 36px;
  height: 36px;
  filter: brightness(0) invert(1);
}

.hiw__heading {
  font-size: 18px;
  font-weight: bold;
  color: var(--color-dark);
  margin-bottom: 8px;
  font-family: var(--font-main) !important;
}

.hiw__text {
  font-size: 14px;
  color: var(--color-secondary);
  font-family: var(--font-main) !important;
}

/* Acordeón */
.accrodion-content {
    display: none;
    overflow: hidden;
    transition: all 0.3s ease;
}

.accrodion.active .accrodion-content {
    display: block;
}

.accrodion-title h4 {
    color: var(--color-white) !important;
    font-family: var(--font-main) !important;
}

/* Sección de imagen destacada */
.highlight-image {
  text-align: center;
  padding: 50px 20px;
}

.highlight-wrapper {
  max-width: 1280px;
  margin: 0 auto;
}

.highlight-img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(14, 165, 183, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.highlight-img:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 25px rgba(14, 165, 183, 0.3);
}

/* Ajuste para móviles */
@media (max-width: 768px) {
  .highlight-image {
    padding: 30px 10px;
  }

  .highlight-img {
    border-radius: 12px;
  }
}

/* Contenedor de la imagen */
.hiw__image-wrapper {
  padding: 20px;
}

.hiw__image {
  max-width: 100%;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(14, 165, 183, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hiw__image:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 30px rgba(14, 165, 183, 0.3);
}

/* Ajustes responsivos */
@media (max-width: 992px) {
  .hiw__content {
    text-align: center;
    margin-bottom: 20px;
  }
}

/* Forzar centrado del contenido en "How It Works" */
.hiw__content {
  text-align: center; /* Centra todo el contenido */
}

.hiw__steps {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra pasos */
}

.art-and-image-tool__btn-box {
  text-align: center; /* Asegura centrado del botón */
}

/* Ajustes para pantallas grandes */
@media (min-width: 992px) {
  .hiw__content {
    text-align: center; /* Mantiene el centrado en desktop */
  }
}

@media (max-width: 992px) {
  .hiw__content {
    text-align: center;
  }

  .hiw__steps {
    align-items: center;
  }
}

.hiw__image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hiw__image img {
    width: auto;
    height: 600px; /* Fuerza altura de 600px */
    max-width: 100%;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(14, 165, 183, 0.1);
    object-fit: cover; /* Asegura recorte estético */
}

/* Responsivo para pantallas más pequeñas */
@media (max-width: 991px) {
    .hiw__image img {
        width: 100%;
        height: auto; /* En móvil la imagen se adapta */
        max-height: 300px;
    }
}

/* Iconos de beneficios con nuevos colores */
.image-generator-tools__icon {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent)) !important;
    color: var(--color-white) !important;
    border-radius: 15px;
    box-shadow: 0 6px 15px rgba(14, 165, 183, 0.3);
}

/* Títulos de beneficios */
.image-generator-tools__title-2 {
    color: var(--color-dark) !important;
    font-family: var(--font-main) !important;
    font-weight: 600;
}

.image-generator-tools__text {
    color: var(--color-secondary) !important;
    font-family: var(--font-main) !important;
}

/* Pricing cards con nuevos colores */
.pricing-one__single {
    border: 2px solid var(--color-primary) !important;
}

.pricing-one__price {
    color: var(--color-dark) !important;
    font-family: var(--font-main) !important;
}

.pricing-one__tagline {
    color: var(--color-secondary) !important;
    font-family: var(--font-main) !important;
}

/* Enlaces y textos especiales */
a {
    color: var(--color-primary);
    font-family: var(--font-main) !important;
}

a:hover {
    color: var(--color-secondary);
}

/* Banner principal */
.banner-one__title {
    color: var(--color-dark) !important;
    font-family: var(--font-main) !important;
    font-weight: 800;
}

.banner-one__text-1 {
    color: var(--color-secondary) !important;
    font-family: var(--font-main) !important;
}

/* Footer con nuevos colores */
.footer-widget__about-text {
    color: var(--color-white) !important;
    font-family: var(--font-main) !important;
}

.main-footer__bottom-text {
    color: var(--color-white) !important;
    font-family: var(--font-main) !important;
}

/* FAQ section */
.section-title h2 {
    color: var(--color-dark) !important;
    font-family: var(--font-main) !important;
}

.section-title h4 {
    color: var(--color-secondary) !important;
    font-family: var(--font-main) !important;
}

/* Efectos especiales para elementos interactivos */
.thm-btn-three:hover,
.art-and-image-tool__btn:hover {
    background: var(--color-secondary) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(14, 165, 183, 0.3);
    transition: all 0.3s ease;
}

/* Información de Miami con color de acento */
.miami-info {
    color: var(--color-accent) !important;
    font-weight: 600;
    font-family: var(--font-main) !important;
}

/* Asegurar que todos los textos usen Inter */
p, span, div, li, input, button, label {
    font-family: var(--font-main) !important;
}

/* Colores para elementos específicos del template */
.art-and-image-tool__title {
    color: var(--color-dark) !important;
    font-family: var(--font-main) !important;
}

.art-and-image-tool__text {
    color: var(--color-secondary) !important;
    font-family: var(--font-main) !important;
}

.pricing-one__section-title__title {
    color: var(--color-dark) !important;
    font-family: var(--font-main) !important;
}

.image-generator-tools__title {
    color: var(--color-dark) !important;
    font-family: var(--font-main) !important;
}

/* Elementos de lista en pricing */
.pricing-one__points li .text p {
    color: var(--color-dark) !important;
    font-family: var(--font-main) !important;
}

/* Círculos de pricing con color primario */
.circle-box {
    background: var(--color-primary) !important;
}

/* Mejorar visibilidad de elementos */
.container {
    position: relative;
    z-index: 2;
}

/* Imagen destacada con mejor fit */
.highlight-img {
  width: 100%;
  max-height: 400px;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(14, 165, 183, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  object-fit: cover;
}

/* Asegurar que todas las imágenes se mantengan en su contenedor */
img {
    max-width: 100%;
    height: auto;
}

/* Mejorar contraste del header */
.main-header {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(14, 165, 183, 0.1);
}

/* =============================================
   CLASES PARA FUENTE CONDENSADA (ALTA Y ESTRECHA) - APLICAR MANUALMENTE
   ============================================= */

/* Clase para texto condensado normal */
.inter-condensed {
    font-family: 'Inter', sans-serif !important;
    transform: scaleX(0.85) !important;
    transform-origin: center center !important;
    font-stretch: condensed !important;
    letter-spacing: 0.05em !important;
}

/* Clase para títulos condensados */
.inter-condensed-title {
    font-family: 'Inter', sans-serif !important;
    transform: scaleX(0.80) !important;
    transform-origin: center center !important;
    font-stretch: condensed !important;
    letter-spacing: 0.07em !important;
}

/* Clase extra condensada (como el logo) */
.inter-extra-condensed {
    font-family: 'Inter', sans-serif !important;
    transform: scaleX(0.75) !important;
    transform-origin: center center !important;
    font-stretch: extra-condensed !important;
    letter-spacing: 0.15em !important;
}

/* Clase súper condensada (para logos o títulos principales) */
.inter-logo-style {
    font-family: 'Inter', sans-serif !important;
    transform: scaleX(0.70) !important;
    transform-origin: center center !important;
    font-stretch: ultra-condensed !important;
    letter-spacing: 0.20em !important;
    font-weight: 600 !important;
}

.text-accent {
  color: var(--color-accent);
}

.text-primary {
  color: var(--color-primary);
}

.logo-inline {
  height: 1em;              /* igual al tamaño de la tipografía */
  max-height: 40px;         /* evita que se vea demasiado grande en pantallas grandes */
  width: auto;              /* mantiene la proporción original */
  vertical-align: middle;   /* centrado con el texto */
  display: inline-block;
}

/* En pantallas pequeñas (ej: móviles), ajusta aún más */
@media (max-width: 768px) {
  .logo-inline {
    max-height: 28px;  /* se reduce para móviles */
  }
}