/* La imagen aprobada vive en el HTML y se carga con prioridad alta. El loader
   puede seguir protegiendo el estado de la tienda, pero no se deja una capa
   rosa intermedia esperando una confirmación remota del hero. */
html.tt-initializing body.tt-home-premium{background:#FFFFFF!important}

.tt-home-premium{overflow-x:clip;background:#FFFFFF!important;min-height:100svh}
.tt-home-premium .container{width:min(100%,1280px)}

/* El header de desktop/tablet es fixed y, por eso, queda fuera del flujo:
   sin este margen, el hero arranca en y=0 y el header queda superpuesto
   sobre su parte superior. margin-top reserva ese espacio empujando TODO
   el hero hacia abajo (imagen, picture, media, contenido, botones) sin
   tocar su height/min-height — el hero conserva el alto completo que ya
   tenía (100svh/min-height de arriba) y el total pasa a ser altura del
   header + altura completa del hero, nunca menos.
   769px porque ahí es donde .tt-header deja de tener display:none (ver
   styles.css) — es el mismo corte que usan .tt-breadcrumb y .login-page
   para el mismo problema. --header-h es la única fuente de verdad (se
   define y redefine únicamente en styles.css); mobile no recibe ningún
   margen porque no usa este header. */
@media (min-width: 769px) {
  body.tt-home-premium .tt-hero {
    margin-top: var(--header-h);
  }
}

/* En tableta el header fijo ya queda reservado por el margen del hero.
   No sumar también el padding global del body: dejaba una franja vacía
   entre el header y el banner. */
@media (min-width: 768px) and (max-width: 1024px) {
  body.tt-home-premium {
    padding-top: 0 !important;
  }
}

/* Header y cookies de Inicio: fondos realmente sólidos. Estas reglas viven en
   la última hoja del home y usan selectores de alta especificidad para que ni
   el esquema publicado, ni estados de scroll, ni transparencias heredadas
   puedan volverlos translúcidos. */
html body.tt-home-premium #tt-header-desktop-tablet.tt-header,
html body.tt-home-premium #tt-header-desktop-tablet.tt-header.scrolled{
  background:#FFFFFF!important;
  background-color:#FFFFFF!important;
  opacity:1!important;
  filter:none!important;
  mix-blend-mode:normal!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border-bottom:1px solid #FDECF2!important;
  box-shadow:0 2px 18px rgba(248,170,202,.10)!important;
}
html body.tt-home-premium #tt-privacy-consent.tt-privacy-consent{
  background:#FFFFFF!important;
  background-color:#FFFFFF!important;
  opacity:1!important;
  filter:none!important;
  mix-blend-mode:normal!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  isolation:isolate!important;
  border:1px solid rgba(248,170,202,.12)!important;
  box-shadow:0 24px 64px rgba(38,24,30,.14),0 2px 8px rgba(38,24,30,.05)!important;
}
html body.tt-home-premium #tt-privacy-consent .tt-privacy-btn-primary{
  background:var(--tt-accent,var(--color-brand-primary, #F8AACA))!important;
  background-color:var(--tt-accent,var(--color-brand-primary, #F8AACA))!important;
  border-color:var(--tt-accent,var(--color-brand-primary, #F8AACA))!important;
  color:#222222!important;
  opacity:1!important;
}
html body.tt-home-premium #tt-privacy-consent .tt-privacy-btn-secondary{
  background:#FFFFFF!important;
  background-color:#FFFFFF!important;
  border-color:var(--tt-accent,var(--color-brand-primary, #F8AACA))!important;
  color:var(--color-text-primary,#222222)!important;
  opacity:1!important;
}

/* El hero puede recibir PNG/WebP con transparencia desde el panel. Toda la
   cadena visual usa un respaldo sólido para que nunca se vea el contenido de
   atrás ni aparezcan zonas transparentes en desktop, tablet o mobile. */
.tt-home-premium .tt-hero,
.tt-home-premium .tt-hero-media,
.tt-home-premium .tt-hero-media picture,
.tt-home-premium .tt-hero-img{
  background:#FFFFFF!important;
  background-color:#FFFFFF!important;
}
/* No usar una foto de muestra detrás del <img>: si la imagen publicada tarda
   un frame en decodificar, esa segunda foto es el origen del parpadeo. */
.tt-home-premium .tt-hero-media{
  background-image:none!important;
}
/* El hero no tiene estados de entrada ni capas de respaldo visibles: la
   portada estática del HTML es la primera y única composición que se pinta. */
.tt-home-premium .tt-hero-media{
  visibility:visible!important;
  opacity:1!important;
}
.tt-home-premium .tt-hero-media picture{
  width:100%;
  height:100%;
  overflow:hidden;
}
/* El tamaño y la posición se leen de las variables que configura Super Admin
   para cada dispositivo. No se fija contain/cover acá: desktop, tablet y
   mobile deben respetar de forma independiente su selección publicada. */
body.tt-home-premium #tt-hero-img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:var(--tt-hero-fit-desktop,cover)!important;
  object-position:var(--tt-hero-pos-desktop,center center)!important;
  transform:scale(var(--tt-hero-scale-desktop,1))!important;
  transform-origin:var(--tt-hero-pos-desktop,center center)!important;
}
@media(max-width:1023px){
  body.tt-home-premium #tt-hero-img{
    object-fit:var(--tt-hero-fit-tablet,cover)!important;
    object-position:var(--tt-hero-pos-tablet,center center)!important;
    transform:scale(var(--tt-hero-scale-tablet,1))!important;
    transform-origin:var(--tt-hero-pos-tablet,center center)!important;
  }
}
@media(max-width:768px){
  body.tt-home-premium #tt-hero-img{
    object-fit:var(--tt-hero-fit-mobile,cover)!important;
    object-position:var(--tt-hero-pos-mobile,center center)!important;
    transform:scale(var(--tt-hero-scale-mobile,1))!important;
    transform-origin:var(--tt-hero-pos-mobile,center center)!important;
  }
}
/* El botón secundario del hero no puede depender de un token transparente:
   siempre se ve como botón real sobre cualquier foto. */
body.tt-home-premium .tt-hero-actions .tt-btn-outline{
  background:#FFFFFF!important;
  background-color:#FFFFFF!important;
  border-color:var(--tt-accent,var(--color-brand-primary, #F8AACA))!important;
  color:var(--color-text-primary,#222222)!important;
  box-shadow:0 8px 24px rgba(38,24,30,.12)!important;
  opacity:1!important;
}
body.tt-home-premium .tt-hero-actions .tt-btn-outline:hover,
body.tt-home-premium .tt-hero-actions .tt-btn-outline:focus-visible{
  background:var(--tt-accent,var(--color-brand-primary, #F8AACA))!important;
  background-color:var(--tt-accent,var(--color-brand-primary, #F8AACA))!important;
  color:#222222!important;
}
.tt-home-premium .tt-trust-bar,
.tt-home-premium .section-sm,
.tt-home-premium .tt-collections-section,
.tt-home-premium .tt-products-section,
.tt-home-premium .tt-reviews-section,
.tt-home-premium .tt-footer{min-height:0}
.tt-home-premium .tt-trust-grid,.tt-home-premium .tt-collections-grid,.tt-home-premium #products-grid,.tt-home-premium .tt-reviews-grid{gap:clamp(14px,2.2vw,28px)}
.tt-home-premium .tt-collections-grid,
.tt-home-premium #products-grid{min-height:0}
.tt-home-premium .tt-collections-grid > .tt-coll-card{
  position:relative;
  z-index:1;
  pointer-events:auto;
  cursor:pointer;
}
.tt-home-premium .tt-collections-grid > .tt-coll-card > *{
  pointer-events:none;
}
.tt-home-premium [data-img-slot] img,.tt-home-premium .tt-coll-card-img img,.tt-home-premium .tt-card-img img{width:100%;height:100%;object-fit:contain}
.tt-home-premium .tt-editorial-img img,.tt-home-premium .tt-watch-feature-img img{object-fit:cover}
.tt-home-motion{opacity:0;transform:translateY(30px) scale(.985);filter:blur(6px);transition:opacity .62s ease,transform .62s cubic-bezier(.22,.61,.36,1),filter .62s ease;transition-delay:var(--tt-delay,0ms);will-change:opacity,transform,filter}
.tt-home-motion.is-visible{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
.tt-scroll-up .tt-home-motion:not(.is-visible){transform:translateY(-28px) scale(.985)}
.tt-home-motion.tt-home-hero{opacity:1;filter:blur(0);transform:none}
.tt-home-premium .tt-footer,.tt-home-premium .tt-footer *{color:#222222!important;opacity:1!important;text-shadow:none!important}
.tt-home-premium .tt-footer a{color:#222222!important;text-decoration-color:var(--color-brand-primary, #F8AACA)!important}
.tt-home-premium .tt-footer a:hover{color:var(--color-text-primary,#222222)!important}
.tt-home-premium .tt-footer a.tt-footer-wa,.tt-home-premium .tt-footer a.tt-footer-wa *{color:#222222!important;text-decoration-color:transparent!important}
.tt-home-premium .tt-footer a.tt-footer-wa:hover{color:#222222!important}
.tt-home-premium .tt-footer-col-title,.tt-home-premium .tt-footer-brand,.tt-home-premium .tt-footer-logo,.tt-home-premium .tt-footer h2,.tt-home-premium .tt-footer h3{color:#222222!important;font-weight:800!important;opacity:1!important}
.tt-home-premium .tt-footer-brand strong,.tt-home-premium .tt-footer-logo strong{font-weight:900!important;color:#222222!important}
@media(max-width:768px){.tt-home-premium .section{padding:56px 0}.tt-home-premium .section-sm{padding:42px 0}.tt-home-premium .tt-trust-grid,.tt-home-premium .tt-collections-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tt-home-motion{transform:translateY(22px) scale(.99)}}
@media(max-width:380px){.tt-home-premium .section{padding:44px 0}.tt-home-premium .section-sm{padding:34px 0}}
@media(max-height:520px) and (orientation:landscape){.tt-home-premium .tt-hero-content{padding-top:86px;padding-bottom:38px}}
@media(prefers-reduced-motion:reduce){.tt-home-motion,.tt-home-motion.is-visible{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}}

/* =============================================================
   PARTE 2B — continuidad visual completa del Inicio
   ============================================================= */

/* Mientras la fuente real de colecciones responde, no dejamos un texto pequeño
   flotando dentro de una sección prácticamente vacía. El estado ocupa una
   superficie estable y legible; cuando llegan las colecciones, el renderer lo
   reemplaza por las tarjetas reales sin alterar navegación ni datos. */
body.tt-home-premium .tt-collections-grid:has(> .tt-phase4-collections-state){
  grid-template-columns:minmax(0,1fr)!important;
}
body.tt-home-premium .tt-collections-grid > .tt-phase4-collections-state{
  min-height:clamp(190px,24vw,300px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:clamp(24px,4vw,42px)!important;
  border:1px solid var(--color-card-border,#FDECF2);
  border-radius:24px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,246,250,.96)),
    var(--color-background-surface,#FFFFFF);
  box-shadow:0 12px 34px rgba(248,170,202,.08);
  color:var(--color-text-secondary,#222222)!important;
  font-size:.86rem!important;
  font-weight:600;
  line-height:1.6;
}
body.tt-home-premium .tt-collections-grid > .tt-phase4-collections-state--info::before{
  content:"";
  width:34px;
  height:34px;
  border:3px solid var(--color-progress-track,#FDECF2);
  border-top-color:var(--color-progress-fill,var(--color-brand-primary, #F8AACA));
  border-radius:50%;
  animation:tt-home-collections-spin .8s linear infinite;
}
body.tt-home-premium .tt-collections-grid > .tt-phase4-collections-state--error{
  border-color:color-mix(in srgb,var(--color-brand-primary,var(--color-brand-primary, #F8AACA)) 28%,#FFFFFF);
}
@keyframes tt-home-collections-spin{to{transform:rotate(360deg)}}

@media(max-width:768px){
  body.tt-home-premium .tt-collections-grid > .tt-phase4-collections-state{
    min-height:180px;
    border-radius:18px;
  }
}

@media(prefers-reduced-motion:reduce){
  body.tt-home-premium .tt-collections-grid > .tt-phase4-collections-state--info::before{
    animation:none;
  }
}

/* =============================================================
   JERARQUÍA HOME — recorrido visual y de compra
   El DOM conserva la lógica existente; estas reglas solo ordenan el peso
   visual de cada bloque y mantienen el mismo lenguaje en todos los viewports.
   ============================================================= */
body.tt-home-premium .tt-trust-bar {
  position: relative;
  z-index: 1;
  padding: clamp(18px, 2.4vw, 30px) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-card-border, #FDECF2) 72%, transparent);
}

body.tt-home-premium .tt-trust-grid {
  max-width: 1120px;
  margin-inline: auto;
  align-items: stretch;
}

body.tt-home-premium .tt-trust-item {
  min-height: 84px;
  padding: 14px clamp(10px, 1.8vw, 22px);
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--color-card-border, #FDECF2) 80%, transparent);
  border-radius: 0;
  box-shadow: none;
}

body.tt-home-premium .tt-trust-item:last-child { border-right: 0; }
body.tt-home-premium .tt-trust-icon { margin-bottom: 8px; }
body.tt-home-premium .tt-trust-title { font-size: .78rem; letter-spacing: .06em; }
body.tt-home-premium .tt-trust-desc { font-size: .72rem; line-height: 1.45; }

body.tt-home-premium .tt-collection-carousel {
  padding-block: clamp(58px, 7vw, 96px);
}

body.tt-home-premium #look-section {
  padding-block: clamp(54px, 7vw, 92px);
  background: var(--tt-section-gradient, none) var(--tt-section-background, #FDECF2) !important;
  border-block: 1px solid color-mix(in srgb, var(--color-card-border, #FDECF2) 70%, transparent);
}

body.tt-home-premium .tt-look-header,
body.tt-home-premium .tt-reviews-header {
  max-width: 680px;
  margin-inline: auto;
}

body.tt-home-premium .tt-editorial,
body.tt-home-premium .tt-watch-feature {
  max-width: 1180px;
  margin-inline: auto;
  border: 1px solid var(--color-card-border, #FDECF2);
  border-radius: clamp(18px, 2vw, 28px);
  overflow: hidden;
  box-shadow: 0 16px 42px rgba(92, 37, 57, .07);
}

body.tt-home-premium .tt-home-random-products {
  background: linear-gradient(180deg, rgba(252,240,245,.72), rgba(255,255,255,.96));
  border-block: 1px solid color-mix(in srgb, var(--color-card-border, #FDECF2) 70%, transparent);
}

body.tt-home-premium .tt-home-random-products-header { margin-bottom: clamp(22px, 3vw, 34px); }
body.tt-home-premium .tt-home-random-products-header .tt-section-desc { margin: 0 auto; text-align: center; }
body.tt-home-premium .tt-home-random-products-grid {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  padding: 4px 4px 14px;
}
body.tt-home-premium .tt-home-random-products-grid > * { scroll-snap-align: start; min-width: 0; }
body.tt-home-premium .tt-home-random-products-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

body.tt-home-premium .tt-editorial-content,
body.tt-home-premium .tt-watch-feature-content {
  padding: clamp(30px, 5vw, 72px);
}

body.tt-home-premium .tt-editorial-title,
body.tt-home-premium .tt-watch-title {
  max-width: 15ch;
  text-wrap: balance;
}

body.tt-home-premium .tt-editorial-desc,
body.tt-home-premium .tt-watch-desc {
  max-width: 48ch;
  line-height: 1.75;
}

body.tt-home-premium .tt-reviews-section {
  padding-block: clamp(54px, 7vw, 90px);
}

@media (max-width: 900px) {
  body.tt-home-premium .tt-trust-item {
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-card-border, #FDECF2) 80%, transparent);
  }
  body.tt-home-premium .tt-trust-item:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (min-width: 769px) and (max-width: 960px) {
  body.tt-home-premium .tt-home-random-products-grid { grid-auto-columns: minmax(230px, 42vw); }
}

@media (max-width: 768px) {
  body.tt-home-premium .tt-trust-bar { padding-block: 10px; }
  body.tt-home-premium .tt-trust-grid { gap: 0; }
  body.tt-home-premium .tt-trust-item { min-height: 72px; padding: 12px 8px; }
  body.tt-home-premium .tt-trust-title { font-size: .7rem; }
  body.tt-home-premium .tt-trust-desc { font-size: .66rem; }
  body.tt-home-premium .tt-editorial,
  body.tt-home-premium .tt-watch-feature { border-radius: 18px; }
  body.tt-home-premium .tt-editorial-content,
  body.tt-home-premium .tt-watch-feature-content { padding: 32px 22px; }
  body.tt-home-premium .tt-editorial-desc,
  body.tt-home-premium .tt-watch-desc { line-height: 1.65; }
  body.tt-home-premium .tt-home-random-products-grid { grid-auto-columns: minmax(230px, 78vw); gap: 14px; }
  body.tt-home-premium .tt-home-random-products-actions { margin-top: 18px; }
}

/* Hero editorial Tintin. La imagen sigue siendo la elegida y recortada en
   Super Admin para desktop/laptop, tablet y mobile (variables --tt-hero-*). */
html body.tt-home-premium .tt-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-areas: "content media";
  grid-template-rows: auto;
  aspect-ratio: auto;
  align-items: center;
  gap: clamp(28px, 5vw, 76px);
  min-height: clamp(520px, 70svh, 760px);
  height: auto !important;
  padding: clamp(32px, 5vw, 72px) clamp(24px, 7vw, 104px) !important;
  overflow: clip;
  color: #222222;
  background: #FFFFFF !important;
}

html body.tt-home-premium .tt-hero .tt-hero-content {
  grid-area: content;
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  height: auto !important;
  min-height: 0;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 590px;
  margin: 0;
  padding: 0 !important;
  color: #222222 !important;
  pointer-events: auto;
}

html body.tt-home-premium .tt-hero-eyebrow {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  margin: 0 0 clamp(16px, 2vw, 24px);
  color:var(--color-text-primary,#222222);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.4;
}

html body.tt-home-premium .tt-hero-title {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  color: #222222 !important;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(3rem, 6.3vw, 6.3rem);
  font-weight: 650;
  letter-spacing: -.065em;
  line-height: .98;
  text-align: left;
  text-shadow: none;
  text-wrap: balance;
  clip: auto !important;
  white-space: normal !important;
  border: 0 !important;
}

html body.tt-home-premium .tt-hero-title-line--accent {
  display: block;
  margin: .08em 0 0;
  color:var(--color-text-primary,#222222);
  font: inherit;
  letter-spacing: inherit;
}

html body.tt-home-premium .tt-hero-subtitle {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  max-width: 40ch;
  padding: 0 !important;
  overflow: visible !important;
  margin: clamp(20px, 2.5vw, 30px) 0 0;
  color: #222222 !important;
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  line-height: 1.7;
  clip: auto !important;
  white-space: normal !important;
  border: 0 !important;
}

html body.tt-home-premium .tt-hero-actions {
  display: flex !important;
  position: static !important;
  align-items: center;
  gap: clamp(16px, 2vw, 24px);
  width: auto !important;
  height: auto !important;
  margin: clamp(26px, 3vw, 36px) 0 0 !important;
  pointer-events: auto;
}

html body.tt-home-premium .tt-hero-actions .tt-btn.tt-hero-cta {
  display: inline-flex !important;
  position: static !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 190px;
  min-height: 54px;
  padding: 0 26px !important;
  border: 1px solid var(--color-brand-primary, #F8AACA) !important;
  border-radius: 999px;
  color:#222222 !important;
  background: var(--color-brand-primary, #F8AACA) !important;
  box-shadow: 0 10px 24px rgba(248,170,202, .16) !important;
  font-size: .98rem !important;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

html body.tt-home-premium .tt-hero-actions .tt-btn.tt-hero-cta:hover,
html body.tt-home-premium .tt-hero-actions .tt-btn.tt-hero-cta:focus-visible {
  color:#222222 !important;
  background: var(--color-brand-primary, #F8AACA) !important;
  box-shadow: 0 12px 28px rgba(248,170,202, .24) !important;
}

html body.tt-home-premium .tt-hero-actions .tt-hero-link {
  display: inline-flex !important;
  position: static !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-height: 44px;
  color:var(--color-text-primary,#222222) !important;
  font-size: .94rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #E8B9C9;
  text-underline-offset: 5px;
  white-space: nowrap;
  opacity: 1 !important;
}

html body.tt-home-premium .tt-hero-media {
  grid-area: media;
  position: relative !important;
  inset: auto !important;
  justify-self: stretch;
  align-self: center;
  width: 100% !important;
  min-width: 0;
  min-height: 0;
  height: auto !important;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border: 1px solid rgba(248,170,202, .1);
  border-radius: clamp(24px, 3vw, 40px);
  background: #FDECF2 !important;
  box-shadow: 0 24px 56px rgba(92, 37, 57, .12);
}

html body.tt-home-premium .tt-hero-media picture,
html body.tt-home-premium .tt-hero-media .tt-hero-img {
  display: block;
  width: 100%;
  height: 100%;
}

html body.tt-home-premium .tt-hero-media .tt-hero-img {
  object-fit: var(--tt-hero-fit-desktop, cover) !important;
  object-position: var(--tt-hero-pos-desktop, center center) !important;
  transform: scale(var(--tt-hero-scale-desktop, 1)) !important;
  transform-origin: var(--tt-hero-pos-desktop, center center) !important;
}

@media (min-width: 768px) and (max-width: 1120px) {
  html body.tt-home-premium .tt-hero {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
    gap: clamp(22px, 3vw, 38px);
    min-height: 0;
    height: auto !important;
    padding: 36px clamp(24px, 4vw, 48px);
  }
  html body.tt-home-premium .tt-hero-title { font-size: clamp(2.8rem, 6vw, 4.8rem); }
  html body.tt-home-premium .tt-hero-media {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
  html body.tt-home-premium .tt-hero-media .tt-hero-img {
    object-fit: var(--tt-hero-fit-tablet, cover) !important;
    object-position: var(--tt-hero-pos-tablet, center center) !important;
    transform: scale(var(--tt-hero-scale-tablet, 1)) !important;
    transform-origin: var(--tt-hero-pos-tablet, center center) !important;
  }
}

@media (max-width: 767px), (max-width: 1120px) and (orientation: portrait) {
  html body.tt-home-premium .tt-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "content" "media";
    grid-template-rows: auto auto !important;
    gap: 26px;
    min-height: 0;
    height: auto !important;
    padding: clamp(32px, 8vw, 54px) 20px clamp(36px, 8vw, 56px) !important;
  }
  html body.tt-home-premium .tt-hero-content { max-width: 720px; }
  html body.tt-home-premium .tt-hero-eyebrow { margin-bottom: 14px; font-size: .68rem; }
  html body.tt-home-premium .tt-hero-title {
    font-size: clamp(2.8rem, 11vw, 5.2rem);
    line-height: .99;
  }
  html body.tt-home-premium .tt-hero-subtitle {
    max-width: 36ch;
    margin-top: 17px;
    font-size: 1rem;
  }
  html body.tt-home-premium .tt-hero-actions {
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 23px !important;
  }
  html body.tt-home-premium .tt-hero-actions .tt-btn.tt-hero-cta {
    min-width: 176px;
    min-height: 50px;
  }
  html body.tt-home-premium .tt-hero-media {
    width: 100% !important;
    min-height: 0;
    height: auto !important;
    aspect-ratio: 4 / 5;
    border-radius: 24px;
  }
  html body.tt-home-premium .tt-hero-media .tt-hero-img {
    object-fit: var(--tt-hero-fit-mobile, cover) !important;
    object-position: var(--tt-hero-pos-mobile, center center) !important;
    transform: scale(var(--tt-hero-scale-mobile, 1)) !important;
    transform-origin: var(--tt-hero-pos-mobile, center center) !important;
  }
}

@media (min-width: 768px) and (max-width: 1120px) and (orientation: portrait) {
  html body.tt-home-premium .tt-hero-media {
    justify-self: center;
    width: min(100%, 560px) !important;
    aspect-ratio: 3 / 4;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.tt-home-premium .tt-hero-actions .tt-btn.tt-hero-cta { transition: none !important; }
}

/* HERO A PANTALLA COMPLETA.
   El hero ocupa exactamente la primera pantalla (alto visible menos el
   encabezado fijo) y se arma con piezas sueltas: fondo degradado en CSS,
   rótulo "Bienvenida tintina" vectorial (.tt-hero-welcome), foto en su
   tarjeta (.tt-hero-media) y contenido editable en HTML.

   Cada disposición se dibujó sobre un lienzo de referencia y todas sus
   medidas van en la unidad --u, que es el menor entre "ancho disponible /
   ancho del lienzo" y "alto disponible / alto del lienzo". Así la
   composición completa escala para entrar en ancho Y en alto: nada queda
   cortado y la sección siguiente recién aparece al hacer scroll. Los textos
   tienen un mínimo legible; si en una ventana muy baja no entran, la sección
   crece en vez de recortar.

   · Desktop/laptop y tablet horizontal: rótulo y contenido a la izquierda,
     foto a la derecha.
   · Tablet vertical y celular: rótulo, foto y contenido apilados y centrados;
     el contenido queda debajo del borde inferior de la tarjeta. */
html body.tt-home-premium .tt-hero {
  --tt-hero-top: var(--header-h, 72px);
  --tt-hero-h: calc(100vh - var(--tt-hero-top));
  --u: min(calc(100vw / 1440), calc(var(--tt-hero-h) / 715));
  isolation: isolate;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "welcome media" "content media";
  grid-template-rows: auto auto !important;
  align-content: center;
  align-items: center;
  gap: 0 calc(36 * var(--u));
  min-height: var(--tt-hero-h) !important;
  padding: calc(20 * var(--u)) max(calc(52 * var(--u)), calc((100% - 1600 * var(--u)) / 2)) calc(20 * var(--u)) max(calc(73 * var(--u)), calc((100% - 1600 * var(--u)) / 2)) !important;
}
@supports (height: 100svh) {
  html body.tt-home-premium .tt-hero { --tt-hero-h: calc(100svh - var(--tt-hero-top)); }
}
/* El sistema global de superficies deja .tt-hero transparente: el degradado
   del banner vive en esta capa propia, detrás de todo el contenido. */
html body.tt-home-premium .tt-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(98deg, #FFD2E7 0%, #FFD2E7 26%, #FBBAE0 52%, #FCCDEA 78%, #FDE0F5 100%);
}
html body.tt-home-premium .tt-hero-welcome {
  grid-area: welcome;
  z-index: 2;
  position: relative;
  justify-self: start;
  align-self: end;
  width: calc(671 * var(--u));
  height: auto;
  max-width: none;
  margin: 0 0 0 calc(-6 * var(--u));
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
/* !important en caja y tamaño: hero-bienvenida-inicio.css los fijaba con
   !important para la composición anterior (imagen a todo el ancho). */
html body.tt-home-premium .tt-hero-media {
  grid-area: media;
  justify-self: end;
  align-self: center;
  width: calc(581 * var(--u)) !important;
  aspect-ratio: 718 / 744 !important;
  border: 0;
  border-radius: calc(30 * var(--u)) !important;
  box-shadow: none;
}
html body.tt-home-premium .tt-hero .tt-hero-content {
  grid-area: content;
  z-index: 2;
  box-sizing: border-box;
  justify-self: start;
  align-self: start;
  align-items: flex-start;
  width: 100% !important;
  max-width: calc(665 * var(--u)) !important;
  margin: calc(30 * var(--u)) 0 0 !important;
  padding: 0 !important;
  text-align: left;
}
html body.tt-home-premium .tt-hero-eyebrow {
  justify-content: flex-start;
  margin-bottom: calc(13 * var(--u));
  font-size: max(10.5px, calc(12.2 * var(--u)));
}
html body.tt-home-premium .tt-hero-title {
  font-size: max(24px, calc(46 * var(--u)));
  line-height: 1.06;
  text-align: left;
}
/* El gris del subtítulo no se lee sobre el degradado rosa: dentro del
   banner usa el color principal de texto. */
html body.tt-home-premium .tt-hero-subtitle {
  margin-top: calc(18 * var(--u)) !important;
  color: var(--color-text-primary, #222222) !important;
  font-size: max(14px, calc(22 * var(--u))) !important;
  text-align: left;
}
html body.tt-home-premium .tt-hero-actions {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: calc(8 * var(--u)) calc(26 * var(--u));
  margin-top: calc(28 * var(--u)) !important;
}
html body.tt-home-premium .tt-hero-actions .tt-btn.tt-hero-cta {
  min-width: 0;
  height: max(44px, calc(55 * var(--u))) !important;
  min-height: 0 !important;
  padding: 0 max(18px, calc(29 * var(--u))) !important;
  font-size: max(12.5px, calc(15.5 * var(--u))) !important;
}
html body.tt-home-premium .tt-hero-actions .tt-hero-link {
  font-size: max(12.5px, calc(20 * var(--u))) !important;
  text-decoration-color: rgba(34,34,34, .55);
}

/* Tablet horizontal — lienzo de referencia 1014 × 676. */
@media (min-width: 768px) and (max-width: 1120px) and (orientation: landscape) {
  html body.tt-home-premium .tt-hero {
    --u: min(calc(100vw / 1014), calc(var(--tt-hero-h) / 676));
    /* Ancho del conjunto centrado. En ventanas muy bajas la foto se achica con
       la altura, pero la columna de textos conserva 360 px: los textos ya
       están en su tamaño mínimo y, más angosta, sumarían renglones. */
    --tt-hero-comp: max(calc(1100 * var(--u)), calc(360px + 471 * var(--u)));
    column-gap: calc(22 * var(--u));
    padding: calc(16 * var(--u)) max(calc(42 * var(--u)), calc((100% - var(--tt-hero-comp)) / 2)) calc(16 * var(--u)) max(calc(51 * var(--u)), calc((100% - var(--tt-hero-comp)) / 2)) !important;
  }
  html body.tt-home-premium .tt-hero::before {
    background: linear-gradient(180deg, #FFD2E7 0%, #FFD2E7 10%, #F7A0CE 25%, #FCBFE2 50%, #FDD5EF 75%, #FDE6F8 90%, #FDEDFB 100%);
  }
  html body.tt-home-premium .tt-hero-welcome { width: calc(428 * var(--u)); margin-left: calc(-5 * var(--u)); }
  html body.tt-home-premium .tt-hero-media {
    width: calc(449 * var(--u)) !important;
    aspect-ratio: 677 / 923 !important;
    border-radius: calc(22 * var(--u)) !important;
  }
  html body.tt-home-premium .tt-hero .tt-hero-content {
    max-width: max(360px, calc(446 * var(--u))) !important;
    margin-top: calc(22 * var(--u)) !important;
  }
  html body.tt-home-premium .tt-hero-eyebrow { margin-bottom: calc(10 * var(--u)); font-size: max(10px, calc(11 * var(--u))); }
  html body.tt-home-premium .tt-hero-title { font-size: max(20px, calc(32.8 * var(--u))); }
  html body.tt-home-premium .tt-hero-subtitle { margin-top: calc(13 * var(--u)) !important; font-size: max(13px, calc(17 * var(--u))) !important; }
  html body.tt-home-premium .tt-hero-actions { gap: calc(6 * var(--u)) calc(18 * var(--u)); margin-top: calc(20 * var(--u)) !important; }
  html body.tt-home-premium .tt-hero-actions .tt-btn.tt-hero-cta {
    height: max(44px, calc(48 * var(--u))) !important;
    padding: 0 max(16px, calc(24 * var(--u))) !important;
    font-size: max(12px, calc(14 * var(--u))) !important;
  }
  html body.tt-home-premium .tt-hero-actions .tt-hero-link { font-size: max(12px, calc(15 * var(--u))) !important; }
}

/* Tablet vertical y celular: una sola columna centrada. El rótulo monta
   apenas sobre el borde superior de la tarjeta, como en el arte original. */
@media (max-width: 767px),
       (min-width: 768px) and (max-width: 1120px) and (orientation: portrait) {
  html body.tt-home-premium .tt-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "welcome" "media" "content";
    grid-template-rows: auto auto auto !important;
    justify-items: center;
    gap: 0;
  }
  html body.tt-home-premium .tt-hero-welcome { justify-self: center; align-self: auto; }
  html body.tt-home-premium .tt-hero-media { justify-self: center; }
  html body.tt-home-premium .tt-hero .tt-hero-content {
    justify-self: center;
    align-items: center;
    max-width: none !important;
    text-align: center;
  }
  html body.tt-home-premium .tt-hero-eyebrow { justify-content: center; }
  html body.tt-home-premium .tt-hero-title,
  html body.tt-home-premium .tt-hero-subtitle { text-align: center; }
  html body.tt-home-premium .tt-hero-actions { justify-content: center; }
}

/* Tablet vertical — lienzo de referencia 810 × 1100. */
@media (min-width: 768px) and (max-width: 1120px) and (orientation: portrait) {
  html body.tt-home-premium .tt-hero {
    --u: min(calc(100vw / 810), calc(var(--tt-hero-h) / 1100));
    padding: calc(40 * var(--u)) calc(32 * var(--u)) calc(36 * var(--u)) !important;
  }
  html body.tt-home-premium .tt-hero::before {
    background: linear-gradient(180deg, #FFD2E7 0%, #FFD2E7 10%, #F9A2D2 25%, #FBB8E0 50%, #FDD2EF 75%, #FDE4F7 90%, #FEEFFD 100%);
  }
  html body.tt-home-premium .tt-hero-welcome { width: calc(560 * var(--u)); margin: 0 0 calc(-18 * var(--u)); }
  html body.tt-home-premium .tt-hero-media {
    width: calc(566 * var(--u)) !important;
    aspect-ratio: 755 / 842 !important;
    border-radius: calc(20 * var(--u)) !important;
  }
  html body.tt-home-premium .tt-hero .tt-hero-content { margin-top: calc(22 * var(--u)) !important; }
  html body.tt-home-premium .tt-hero-eyebrow { margin-bottom: calc(9 * var(--u)); font-size: max(10px, calc(12 * var(--u))); }
  html body.tt-home-premium .tt-hero-title { font-size: max(20px, calc(30 * var(--u))); }
  html body.tt-home-premium .tt-hero-subtitle { margin-top: calc(10 * var(--u)) !important; font-size: max(13px, calc(17 * var(--u))) !important; }
  html body.tt-home-premium .tt-hero-actions { gap: calc(6 * var(--u)) calc(22 * var(--u)); margin-top: calc(16 * var(--u)) !important; }
  html body.tt-home-premium .tt-hero-actions .tt-btn.tt-hero-cta {
    height: max(44px, calc(48 * var(--u))) !important;
    padding: 0 max(18px, calc(26 * var(--u))) !important;
    font-size: max(12.5px, calc(14.5 * var(--u))) !important;
  }
  html body.tt-home-premium .tt-hero-actions .tt-hero-link { font-size: max(12.5px, calc(15 * var(--u))) !important; }
}

/* Celular — lienzo de referencia 380 × 646 (deja lugar para un subtítulo de
   dos renglones). No hay encabezado arriba; abajo flotan la barra de
   navegación y, 16 px por encima, el botón de WhatsApp. La composición se
   calcula sobre el alto visible menos esa franja (barra + 52 px), así los
   botones del hero nunca quedan debajo de ninguno de los dos, y el fondo
   llega hasta el borde de la pantalla.

   Rótulo y foto comparten la fila "art", que ocupa lo que sobra de la
   primera pantalla después de los textos. Los textos tienen un tamaño mínimo
   legible, así que en pantallas bajas la única pieza que se achica es el
   arte (rótulo y foto juntos, en la misma proporción). Las dos piezas van
   posicionadas dentro de esa fila para que su tamaño natural no la estire.
   Recién por debajo de 112 px de arte la sección crece en vez de achicar. */
@media (max-width: 767px) {
  html body.tt-home-premium .tt-hero {
    --tt-hero-top: 0px;
    --tt-hero-nav: calc(var(--tt-mobile-nav-clearance, 100px) + 52px);
    --u: min(calc(100vw / 380), calc((var(--tt-hero-h) - var(--tt-hero-nav)) / 646));
    grid-template-areas: "art" "content";
    grid-template-rows: minmax(112px, calc(420 * var(--u))) auto !important;
    height: auto !important;
    min-height: 0 !important;
    /* La composición termina después de sus acciones; la barra flotante
       conserva su propia reserva global y no infla el banner. */
    padding: calc(18 * var(--u)) 20px 24px !important;
  }
  html body.tt-home-premium .tt-hero::before {
    background: linear-gradient(180deg, #FFD2E7 0%, #FFD2E7 10%, #F79ECD 25%, #FAB6DD 50%, #FCCFEB 75%, #FCDFF3 90%, #FDEAF9 100%);
  }
  html body.tt-home-premium .tt-hero-welcome {
    grid-area: art;
    position: absolute;
    left: 50%;
    bottom: min(74.1%, calc(311.5 * var(--u)));
    width: auto;
    height: min(25.9%, calc(108.9 * var(--u)));
    margin: 0;
    transform: translateX(-50%);
  }
  html body.tt-home-premium .tt-hero-media {
    grid-area: art;
    position: absolute !important;
    inset: auto auto 0 50% !important;
    width: auto !important;
    height: min(77.2%, calc(324.5 * var(--u))) !important;
    aspect-ratio: 787 / 798 !important;
    border-radius: calc(13 * var(--u)) !important;
    transform: translateX(-50%);
  }
  html body.tt-home-premium .tt-hero .tt-hero-content { margin-top: calc(14 * var(--u)) !important; }
  html body.tt-home-premium .tt-hero-eyebrow { margin-bottom: calc(6 * var(--u)); font-size: max(9.5px, calc(10.5 * var(--u))); }
  html body.tt-home-premium .tt-hero-title { font-size: max(18px, calc(24 * var(--u))); line-height: 1.08; }
  html body.tt-home-premium .tt-hero-subtitle { margin-top: calc(6 * var(--u)) !important; font-size: max(12px, calc(14 * var(--u))) !important; }
  html body.tt-home-premium .tt-hero-actions { gap: 2px 8px; margin-top: calc(14 * var(--u)) !important; }
  html body.tt-home-premium .tt-hero-actions .tt-btn.tt-hero-cta {
    height: max(44px, calc(46 * var(--u))) !important;
    padding: 0 max(12px, calc(18 * var(--u))) !important;
    font-size: max(11.5px, calc(13 * var(--u))) !important;
  }
  html body.tt-home-premium .tt-hero-actions .tt-hero-link { font-size: max(11.5px, calc(13 * var(--u))) !important; }
}
/* Celular acostado: la pantalla es tan baja que apilar arte y textos no entra.
   El arte pasa a la izquierda y los textos a la derecha, en una sola fila que
   ocupa la primera pantalla. --tt-hero-art es el alto del conjunto rótulo +
   foto: todo el alto de la fila, sin pasarse del ancho de su columna. */
@media (max-width: 767px) and (orientation: landscape) and (max-height: 479px) {
  html body.tt-home-premium .tt-hero {
    --tt-hero-art: min(100%, calc((100vw - 56px) * .53));
    grid-template-columns: minmax(0, .7fr) minmax(0, 1fr);
    grid-template-areas: "art content";
    grid-template-rows: minmax(112px, 1fr) !important;
    column-gap: 16px;
    padding: 10px 20px var(--tt-hero-nav) !important;
  }
  html body.tt-home-premium .tt-hero-welcome {
    bottom: calc(var(--tt-hero-art) * .741);
    height: calc(var(--tt-hero-art) * .259);
  }
  html body.tt-home-premium .tt-hero-media { height: calc(var(--tt-hero-art) * .772) !important; }
  html body.tt-home-premium .tt-hero .tt-hero-content { align-self: center; margin-top: 0 !important; }
}
/* Entre 768 y 1024 px el encabezado fijo de tablet mide 84 px. */
@media (min-width: 768px) and (max-width: 1024px) {
  html body.tt-home-premium .tt-hero { --tt-hero-top: 84px; }
}

/* Rosa solicitado para la bienvenida y el titular. El contorno oscuro
   mantiene las letras legibles sobre el fondo claro. */
html body.tt-home-premium .tt-hero-title,
html body.tt-home-premium .tt-hero-title .tt-hero-title-line {
  color: #FFD2E7 !important;
  -webkit-text-stroke: 1px #222222;
  paint-order: stroke fill;
  text-shadow: 0 1px 1px rgba(34, 34, 34, .35);
}

/* Banners originales completos; los enlaces coinciden con el arte entregado. */
html body.tt-home-premium #hero[data-tt-banner] {
  display:block!important; position:relative!important; width:100%!important;
  height:auto!important; min-height:0!important; max-height:none!important;
  padding:0!important; margin:0!important; overflow:hidden!important;
  background:#FFF0F7!important;
}
html body.tt-home-premium #hero[data-tt-banner]::before { display:none!important; }
html body.tt-home-premium #hero[data-tt-banner] .tt-hero-welcome { display:none!important; }
html body.tt-home-premium #hero[data-tt-banner] .tt-hero-media {
  position:relative!important; inset:auto!important; width:100%!important;
  height:auto!important; min-height:0!important; max-width:none!important;
  aspect-ratio:1280/600!important; margin:0!important; padding:0!important;
  border:0!important; border-radius:0!important; box-shadow:none!important; transform:none!important;
}
html body.tt-home-premium #hero[data-tt-banner] picture { display:block; width:100%; height:100%; }
html body.tt-home-premium #hero[data-tt-banner] #tt-hero-img {
  display:block!important; width:100%!important; height:100%!important;
  max-width:none!important; object-fit:var(--tt-hero-fit-desktop,contain)!important; transform:scale(var(--tt-hero-scale-desktop,1))!important;
  border-radius:0!important;
}
html body.tt-home-premium #hero[data-tt-banner] .tt-hero-content { position:absolute!important; inset:0!important; width:100%!important; height:100%!important; max-width:none!important; margin:0!important; padding:0!important; pointer-events:none; }
html body.tt-home-premium #hero[data-tt-banner] :is(.tt-hero-title,.tt-hero-eyebrow,.tt-hero-subtitle) { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip-path:inset(50%); margin:0!important; padding:0!important; }
html body.tt-home-premium #hero[data-tt-banner] .tt-hero-actions { display:contents!important; }
html body.tt-home-premium #hero[data-tt-banner] .tt-hero-actions a {
  position:absolute!important; display:block!important; pointer-events:auto;
  font-size:0!important; color:transparent!important; background:transparent!important;
  border:0!important; box-shadow:none!important; padding:0!important; margin:0!important;
  min-width:0!important; min-height:44px!important; transform:none!important;
}
html body.tt-home-premium #hero[data-tt-banner] .tt-hero-cta { left:13%!important; top:60%!important; width:29%!important; height:9%!important; }
html body.tt-home-premium #hero[data-tt-banner] .tt-hero-link { left:17%!important; top:76%!important; width:21%!important; height:10%!important; }
html body.tt-home-premium #hero[data-tt-banner] .tt-hero-actions a:focus-visible { outline:3px solid #222!important; outline-offset:2px; }
@media(min-width:768px) and (max-width:1120px) {
  html body.tt-home-premium #hero[data-tt-banner] .tt-hero-media { aspect-ratio:1536/1024!important; }
  html body.tt-home-premium #hero[data-tt-banner] #tt-hero-img { object-fit:var(--tt-hero-fit-tablet,contain)!important; transform:scale(var(--tt-hero-scale-tablet,1))!important; }
  html body.tt-home-premium #hero[data-tt-banner] .tt-hero-cta { left:9%!important; top:55%!important; width:35%!important; height:8%!important; }
  html body.tt-home-premium #hero[data-tt-banner] .tt-hero-link { left:14%!important; top:74%!important; width:24%!important; height:9%!important; }
}
@media(max-width:767px) {
  html body.tt-home-premium #hero[data-tt-banner] .tt-hero-media { aspect-ratio:1024/1366!important; }
  html body.tt-home-premium #hero[data-tt-banner] #tt-hero-img { object-fit:var(--tt-hero-fit-mobile,contain)!important; transform:scale(var(--tt-hero-scale-mobile,1))!important; }
  html body.tt-home-premium #hero[data-tt-banner] .tt-hero-content { position:relative!important; inset:auto!important; height:auto!important; padding:16px!important; }
  html body.tt-home-premium #hero[data-tt-banner] .tt-hero-actions { display:flex!important; flex-wrap:wrap; justify-content:center; gap:12px; }
  html body.tt-home-premium #hero[data-tt-banner] .tt-hero-actions a { position:static!important; display:flex!important; align-items:center; justify-content:center; width:auto!important; height:auto!important; min-height:44px!important; padding:12px 16px!important; font-size:14px!important; color:#222!important; }
  html body.tt-home-premium #hero[data-tt-banner] .tt-hero-cta { background:#F8AACA!important; border-radius:24px!important; }
}
/* El rosa claro del archivo continúa hasta el comienzo del bloque rosa intenso. */
html body.tt-home-premium #hero[data-tt-banner]::after {
  content:""; position:absolute; inset:0; background:#FFF0F7; z-index:-1; pointer-events:none;
}
html body.tt-home-premium #hero[data-tt-banner] + .tt-trust-bar {
  --tt-section-start:#FFF0F7!important;
  --tt-flow-fade:90px;
}
@media(min-width:1025px) {
  html body.tt-home-premium #hero[data-tt-banner] { margin-top:var(--header-h,88px)!important; }
}
@media(min-width:768px) and (max-width:1024px) {
  html body.tt-home-premium #hero[data-tt-banner] { margin-top:84px!important; }
}