/* =============================================================
   TINTIN — Mantenimiento integral de la página principal
   Se carga globalmente, pero todos los selectores quedan limitados a Inicio.
   ============================================================= */

body.tt-home-premium {
  background: var(--color-background-page, #FFFFFF) !important;
  color: var(--color-text-primary, #222222) !important;
  overflow-x: clip;
}

/* Durante la preparación inicial no se permite que colores, tamaños o fondos
   cambien mediante transiciones visibles. */
body.tt-home-premium:not(.tt-home-runtime-ready) *,
body.tt-home-premium:not(.tt-home-runtime-ready) *::before,
body.tt-home-premium:not(.tt-home-runtime-ready) *::after {
  transition-duration: 0s !important;
  animation-delay: 0s !important;
}

body.tt-home-premium .tt-hero,
body.tt-home-premium .tt-hero-media {
  background-color: var(--color-brand-secondary, #F8AACA);
}

body.tt-home-premium .tt-hero {
  isolation: isolate;
  overflow: hidden;
}

body.tt-home-premium .tt-hero-media {
  position: relative;
  inset: auto;
  z-index: 0;
  background-image: none !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

body.tt-home-premium .tt-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: var(--color-brand-secondary, #F8AACA);
}

/* home-fit aporta un color sólido detrás de imágenes transparentes, pero el
   <picture> cubría también la imagen local del contenedor mientras el hero
   administrado cargaba. El fondo sigue en el <img>; la capa intermedia queda
   transparente para que el fallback responsive siempre sea visible. */
body.tt-home-premium .tt-hero-media picture {
  background: transparent !important;
}

body.tt-home-premium .tt-hero-content,
body.tt-home-premium .tt-hero-title,
body.tt-home-premium .tt-hero-subtitle {
  color: var(--color-text-inverse, #FFFFFF) !important;
  text-shadow: 0 2px 18px color-mix(in srgb, var(--color-brand-primary-hover, var(--color-brand-primary, #F8AACA)) 54%, transparent);
}

body.tt-home-premium .tt-hero-content {
  position: relative;
  z-index: 2;
}

body.tt-home-premium .tt-trust-bar,
body.tt-home-premium .tt-collections-section,
body.tt-home-premium .tt-look-section,
body.tt-home-premium .tt-products-section,
body.tt-home-premium .tt-reviews-section {
  background-color: var(--color-background-page, #FFFFFF) !important;
  background-image: none !important;
}

body.tt-home-premium .tt-editorial,
body.tt-home-premium .tt-watch-feature,
body.tt-home-premium .tt-review-card,
body.tt-home-premium .tt-product-card,
body.tt-home-premium .tt-look-card,
body.tt-home-premium .tt-trust-item {
  background-color: var(--color-background-surface, #FFFFFF) !important;
  border-color: var(--color-card-border, #FDECF2) !important;
  color: var(--color-text-primary, #222222) !important;
}

body.tt-home-premium .tt-section-title,
body.tt-home-premium .tt-editorial-title,
body.tt-home-premium .tt-watch-title,
body.tt-home-premium .tt-trust-title,
body.tt-home-premium .tt-review-name,
body.tt-home-premium .tt-product-name {
  color: var(--color-text-title, #222222) !important;
}

body.tt-home-premium .tt-section-sub,
body.tt-home-premium .tt-editorial-eyebrow,
body.tt-home-premium .tt-watch-eyebrow,
body.tt-home-premium .tt-product-price,
body.tt-home-premium .tt-review-stars {
  color:var(--color-text-primary,#222222) !important;
}

body.tt-home-premium .tt-section-desc,
body.tt-home-premium .tt-editorial-desc,
body.tt-home-premium .tt-watch-desc,
body.tt-home-premium .tt-trust-desc,
body.tt-home-premium .tt-review-text,
body.tt-home-premium .tt-review-product {
  color: var(--color-text-secondary, #222222) !important;
}

body.tt-home-premium .tt-btn {
  background-color: var(--color-button-primary-background, var(--color-brand-primary, #F8AACA));
  border-color: var(--color-button-primary-border, var(--color-brand-primary, #F8AACA));
  color: var(--color-button-primary-text, #FFFFFF) !important;
}

body.tt-home-premium .tt-btn-outline {
  background-color: var(--color-button-secondary-background, #FFFFFF);
  border-color: var(--color-button-secondary-border, var(--color-brand-primary, #F8AACA));
  color: var(--color-button-secondary-text, var(--color-brand-primary, #F8AACA)) !important;
}

body.tt-home-premium .tt-btn:focus-visible,
body.tt-home-premium a:focus-visible,
body.tt-home-premium button:focus-visible {
  outline: 3px solid var(--color-button-primary-focus-ring, rgba(248,170,202, .24));
  outline-offset: 3px;
}

/* Las secciones de contenido remoto siempre reservan espacio y muestran un
   estado comprensible, evitando huecos o saltos de layout. */
body.tt-home-premium #products-grid,
body.tt-home-premium #look-grid {
  min-height: 280px;
  align-content: start;
}

/* Control de recuperación del error de carga: objetivo táctil mínimo. */
body.tt-home-premium #products-grid [data-products-retry] {
  min-height: 44px;
}

body.tt-home-premium .tt-img-placeholder,
body.tt-home-premium .tt-coll-card-img,
body.tt-home-premium .tt-product-img,
body.tt-home-premium .tt-look-card-img {
  background-color: var(--color-skeleton-base, #FDECF2) !important;
}

body.tt-home-premium .tt-img-placeholder img,
body.tt-home-premium .tt-coll-card-img img,
body.tt-home-premium .tt-product-img img,
body.tt-home-premium .tt-look-card-img img {
  display: block;
  max-width: 100%;
}

body.tt-home-premium .tt-footer {
  background: var(--color-background-footer, #FFFFFF) !important;
  color: var(--color-text-primary, #222222) !important;
  border-top: 1px solid var(--color-border-primary, #FDECF2);
}

body.tt-home-premium .tt-footer a,
body.tt-home-premium .tt-footer-col-title,
body.tt-home-premium .tt-footer-bottom,
body.tt-home-premium .tt-footer-tagline {
  color: var(--color-text-primary, #222222) !important;
}

body.tt-home-premium .tt-footer-wa {
  background: var(--color-button-whatsapp-background, #0D8043) !important;
  color: var(--color-button-whatsapp-text, #FFFFFF) !important;
}

body.tt-home-premium .tt-footer-wa *,
body.tt-home-premium .tt-wa-float * {
  color: var(--color-button-whatsapp-text, #FFFFFF) !important;
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1120px) {
  body.tt-home-premium .tt-editorial,
  body.tt-home-premium .tt-watch-feature {
    min-width: 0;
  }

  body.tt-home-premium #products-grid,
  body.tt-home-premium #look-grid {
    min-height: 240px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  body.tt-home-premium {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  body.tt-home-premium .tt-look-actions {
    width: 100%;
  }

  body.tt-home-premium .tt-look-actions .tt-btn {
    width: 100%;
    min-height: 48px;
  }

  body.tt-home-premium #products-grid,
  body.tt-home-premium #look-grid {
    min-height: 210px;
  }
}

@media (max-width: 360px) {
  body.tt-home-premium .tt-section-title,
  body.tt-home-premium .tt-editorial-title,
  body.tt-home-premium .tt-watch-title {
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* #tt-loader queda afuera a propósito: su spinner señala "todavía estoy
     cargando" (estado del sistema), no es una animación decorativa — apagarlo
     hace que el loader se vea congelado/roto en vez de simplemente sobrio. */
  body.tt-home-premium *:not(#tt-loader):not(#tt-loader *),
  body.tt-home-premium *::before,
  body.tt-home-premium *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  body.tt-home-premium #tt-loader .tt-loader-spinner::before,
  body.tt-home-premium #tt-loader .tt-loader-spinner::after {
    animation-duration: 1.6s !important;
    animation-iteration-count: infinite !important;
  }
}