@charset "UTF-8";

/* ============================================================
   Fontes Electrolux Sans
   ============================================================ */
@font-face {
  font-family: "Electrolux Sans";
  src: url("https://content.electrolux.com.br/brasil/electrolux/pacman/v1/esc10/fonts/ElectroluxSans-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Electrolux Sans";
  src: url("https://content.electrolux.com.br/brasil/electrolux/pacman/v1/esc10/fonts/ElectroluxSans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Electrolux Sans";
  src: url("https://content.electrolux.com.br/brasil/electrolux/pacman/v1/esc10/fonts/ElectroluxSans-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Electrolux Sans";
  src: url("https://content.electrolux.com.br/brasil/electrolux/pacman/v1/esc10/fonts/ElectroluxSans-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:host {
    container-type: inline-size;
    display: block;
    box-sizing: border-box
}

:host, :root {
    scroll-behavior: smooth;
    container-type: inline-size
}

:host, :root {
    --color-on-bg-base: #03183f;
    --color-bg-muted-4: #e1e8eb;
    --color-bg-callout: rgba(173, 185, 195, 0.4);
    --color-white: #ffffff;
    --color-gray-200: #e9ecef;

    --font-family: "Electrolux Sans", system-ui, -apple-system, Helvetica, Arial, sans-serif;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-overlay: 40px;

    --page-width: 1440px;
}

*, ::after, ::before {
    box-sizing: border-box
}

body, main {
    margin: 0;
    padding: 0;
    font-variant-ligatures: no-common-ligatures;
    font-family: var(--font-family);
    color: var(--color-on-bg-base);
    background: var(--color-white);
    /* Sem min-width: abaixo de 1440 o desktop é escalado p/ caber (ver módulo 4 do JS).
        O clip da "caixa fantasma" de 1440px e a altura escalada ficam no .page-fit. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
}

p {
  margin: 0;
}

figure {
  margin: 0;
}

/* Conteúdo apenas para leitores de tela (ex.: título de seção sem rótulo visível no design) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Layout principal
   ============================================================ */
/* Wrapper do shrink-to-fit: clipa a caixa de 1440px e recebe a altura
   escalada (H×z) via JS, para o desktop encolhido não reservar espaço
   morto abaixo do footer. Ver módulo 4 do script.js. */
.page-fit {
  overflow: hidden;
}

.page {
  width: var(--page-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
}

/* Espaçamento padrão entre seções (25px), exceto Hero → Callout dark */
.page > * + * {
  margin-top: 0;
}

.page > .hero + .callout-video {
  margin-top: 0;
}

/* ============================================================
   1. Hero / Banner
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 747px;
  background: var(--color-white);
  overflow: hidden;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.hero__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 34px 40px;
  background: linear-gradient(
    to top,
    #03183f 0%,
    rgba(3, 24, 63, 0.65) 50%,
    rgba(3, 24, 63, 0.02) 100%
  );
  color: var(--color-white);
  text-shadow:
    0 2px 2px rgba(86, 105, 115, 0.15),
    0 0 1px rgba(86, 105, 115, 0.45);
}

.hero__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 22px;
}

.hero__label {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  margin: 0;
}

.hero__title {
  font-weight: 600;
  font-size: 56px;
  line-height: 1.1;
  margin: 0;
}

.hero__subtitle {
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  margin: 0;
}

/* Logo Electrolux */
.logo-electrolux {
  width: 158px;
  height: 36px;
  flex-shrink: 0;
  color: var(--color-white);
}

/* ============================================================
   2. Callout dark com vídeo
   ============================================================ */
.callout-video {
  width: 100%;
  background: var(--color-on-bg-base);
  padding: 40px;
}

.callout-video__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.video-embed {
  position: relative;
  width: 716px;
  height: 404px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--color-on-bg-base);
}

.video-embed__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.callout-video__content {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 34px;
  padding: 40px;
  color: var(--color-white);
}

.callout-video__heading {
  font-weight: 600;
  font-size: 32px;
  line-height: 1.1;
  margin: 0;
}

.callout-video__body {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

.callout-features {
  position: relative;
  width: 100%;
  background: var(--color-white);
  padding: 40px 0 40px 40px;
}

/* Viewport do carrossel externo */
.callout-features__viewport {
  width: 100%;
  overflow: hidden;
}

/* Track externo (slides com content + galeria) */
.callout-features__track {
  display: flex;
  width: max-content;
  transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

/* Cada slide externo ocupa exatamente a largura visível
   (page 1440 - 42 padding esquerda = 1398) */
.callout-features__slide {
  flex: 0 0 1398px;
  width: 1398px;
}

/* Layout interno do slide: content à esquerda, galeria à direita */
.callout-features__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  width: 100%;
}

.callout-features__content {
  flex: 1 1 0;
  max-width: 507px;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 34px;
  padding: 40px 44px 40px 0; 
  color: var(--color-on-bg-base);
}


.callout-features__heading {
  font-weight: 600;
  font-size: 32px;
  line-height: 1.1;
  margin: 0;
}

.callout-features__body {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 51px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  border: 1px solid transparent;
  background: transparent;
}

.btn--primary {
  background: var(--color-on-bg-base);
  color: var(--color-white);
  border-color: var(--color-on-bg-base);
}

.btn--secondary {
  background: var(--color-white);
  color: var(--color-on-bg-base);
  border-color: var(--color-on-bg-base);
}

.btn__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn__icon img {
  width: 100%;
  height: 100%;
}

/* ============================================================
   Modal "Saiba mais" (sobre a seção Diferenciais)
   ============================================================ */
.modal {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease;
}

.modal.is-open {
  pointer-events: auto;
  opacity: 1;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(43, 41, 54, 0.5);
  cursor: pointer;
}

.modal__box {
  position: absolute;
  top: 50%;
  left: 84px;
  transform: translateY(-50%) scale(0.96);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 25px 88px 25px 25px;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow:
    0 4px 8px rgba(86, 105, 115, 0.15),
    0 0 1px rgba(86, 105, 115, 0.15);
  max-width: 348px;
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.modal.is-open .modal__box {
  transform: translateY(-50%) scale(1);
}
.modal.is-open .modal__box ul{
  padding-left: 14px;
  margin: 0;
}

.modal__text {
  /* flex: 1 1 auto; */
  width: 247px;
  margin: 0;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-on-bg-base);
}

.modal__close {
  position: absolute;
  right: 10px;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-overlay);
  background: #dfe7ea;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}

.modal__close:hover {
  background: #c4d4d9;
}

.modal__close:active {
  transform: scale(0.95);
}

.modal__close svg {
  width: 21px;
  height: 21px;
  display: block;
}

/* ============================================================
   3. Callout claro com diferenciais + galeria
   ============================================================ */

/* Galeria lateral (display estático — não é mais carrossel) */
.callout-features__gallery {
  position: relative;
  width: 773px;
  height: 369px;
  flex-shrink: 0;
  align-self: center;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.gallery-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  height: 100%;
  transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

/* Setas prev/next — usadas tanto em Diferenciais quanto em Features.
   Posicionadas em relação à seção (.callout-features ou .features). */
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

.gallery-arrow--prev {
  left: 15px;
}

.gallery-arrow--next {
  right: 15px;
}

.gallery-arrow--next img {
  transform: scaleX(-1);
}

.gallery-card {
  height: 350px;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.gallery-card--1 {
  width: 773px;
}

.gallery-card--2 {
  width: 678px;
}

.gallery-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.icon-button-overlay {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-overlay);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}

.icon-button-overlay:hover {
  background: rgba(255, 255, 255, 0.7);
}

.icon-button-overlay img {
  width: 11px;
  height: 16px;
  display: block;
}

/* ============================================================
   4. Features (2 cards lado a lado)
   ============================================================ */
.features {
  position: relative;
  width: 100%;
  padding: 0 0 24px 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Viewport interno: o overflow:hidden fica AQUI (e não em .features)
   para não cortar dentro do padding-left, evitando que um pedaço
   da slide clonada (loop) apareça à esquerda. */
.features__viewport {
  width: 100%;
  overflow: hidden;
}

.features__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: max-content;
  height: 530px;
  transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.feature-card {
  position: relative;
  width: 1140px;
  height: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}

.feature-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.feature-card__text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32px 40px;

  background: linear-gradient(to top, rgba(3, 24, 63, 0.65) 5%, rgba(3, 24, 63, 0.00) 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--color-white);
}

.feature-card__heading {
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
  margin: 0;
}

.feature-card__body {
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  margin: 0;
}

/* ============================================================
   5. Tecnologias
   ============================================================ */
.tecnologias {
  width: 100%;
  background: var(--color-bg-muted-4);
}

.tecnologias__head {
  padding: 24px 72px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
  color: var(--color-on-bg-base);
}

.tecnologias__head h3 {
  font-weight: 600;
  font-size: 32px;
  line-height: 1.1;
  margin: 0;
}

.tecnologias__head p {
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
  margin: 0;
}

.tecnologias__body {
  display: flex;
  align-items: flex-start;
  padding: 16px 40px;
  width: 100%;
  max-height: 510px;
}

.carrossel {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
}

.carrossel__thumbs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.carrossel__thumbs-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  /* Mostra 3 thumbs (3 × ~150px) + uma fresta do 4º; o resto rola na vertical. */
  max-height: 450px;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: var(--radius-sm);
  scrollbar-width: none;        /* Firefox: esconde a barra de rolagem */
  cursor: grab;
}

.carrossel__thumbs-inner::-webkit-scrollbar {
  display: none;                /* WebKit/Blink: esconde a barra de rolagem */
}

.carrossel__thumbs-inner.is-dragging {
  cursor: grabbing;
  user-select: none;            /* não seleciona texto/imagem durante o arrasto */
}

.carrossel__thumbs-inner.is-dragging .carrossel__thumb {
  cursor: grabbing;
}

.carrossel__thumb {
  padding: 6px;
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: border-color 280ms ease;
}

.carrossel__thumb--active {
  border-color: var(--color-on-bg-base);
}

.carrossel__thumb img {
  width: 128px;
  height: 128px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  display: block;
}

.carrossel__chevron {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: background 200ms ease;
}

.carrossel__chevron:hover {
  background: rgba(3, 24, 63, 0.06);
}

.carrossel__chevron img {
  width: 25px;
  height: 25px;
  display: block;
}

.carrossel__chevron--up img {
  transform: rotate(90deg);
}

.carrossel__chevron--down img {
  transform: rotate(-90deg);
}

.carrossel__main {
  width: 450px;
  height: 450px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}

.carrossel__main img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 320ms ease;
}

.carrossel__main img.is-fading {
  opacity: 0;
}

/* Lista de features Tecnologias */
.feature-list {
  flex: 1 1 0;
  min-width: 0;
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: start;
  gap: 8px;
  padding: 0 24px;
  scroll-behavior: auto;
  overflow-x: hidden;
  overflow-y: scroll;
  height: 450px;
  scrollbar-width: none; /* Ocultar barra no Firefox */
  -ms-overflow-style: none; /* Ocultar no Internet Explorer */
}

/* Ocultar barra de rolagem no Chrome, Safari e Edge */
.feature-list::-webkit-scrollbar {
  display: none;
}

.tech-feature {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 20px;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--color-on-bg-base);
  transition: background-color 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tech-feature--active {
  background: var(--color-bg-callout);
}

.tech-feature__title {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.1;
  margin: 0;
}

.tech-feature__body {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  margin: 0;
}

.tech-feature__caret {
  position: absolute;
  left: -14px;
  top: 50%;
  width: 16px;
  height: 12px;
  transform: translateY(-50%) rotate(-90deg);
  opacity: 0;
  transition: opacity 240ms ease;
  pointer-events: none;
}

.tech-feature--active .tech-feature__caret {
  opacity: 1;
}

.tech-feature__caret img {
  width: 100%;
  height: 100%;
  display: block;
}

/* ============================================================
   6. Electrolux Cuida
   ============================================================ */
.cuida {
  background: var(--color-white);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
}

.cuida__inner {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 24px 40px;
}

.cuida__content {
  flex: 1 1 0;
  min-width: 0;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--color-on-bg-base);
}

.cuida__label {
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  margin: 0;
}

.cuida__title {
  font-weight: 600;
  font-size: 32px;
  line-height: 1.1;
  margin: 0;
}

.cuida__body {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

.cuida__body a,
.cuida__link {
  color: inherit;
  text-decoration: underline;
}

.cuida__image {
  position: relative;
  width: 572px;
  height: 297px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #d9d9d9;
  flex-shrink: 0;
}

.cuida__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cuida__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

/* ============================================================
   7. Footer (disclaimer + logo)
   ============================================================ */
.footer {
  width: 100%;
  height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 25px 80px;
}

.footer__divisor {
  width: 100%;
  height: 1px;
  flex-shrink: 0;
  background: var(--color-gray-200);
  margin: 24px 0;
}

.footer__text {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-on-bg-base);
  margin: 0;
  width: 100%;
}

.footer__logo {
  width: 36px;
  height: 36px;
  margin: 30px 0 10px;
}

.footer__logo img {
  width: 100%;
  height: 100%;
}
.mobileOnly {
  display: none;
}
  .desktopOnly {
  display: block;
}

/* ============================================================
   ════════════════════════════════════════════════════════════
   MOBILE / TABLET — overrides até 1078px
   Baseado no design Figma mobile (node 1:3698 — 375×5568)
   Mantém todas as interações (carrossel, modal, fade v2).
   ════════════════════════════════════════════════════════════
   ============================================================ */
/* Layout mobile: assume abaixo de 768px. Entre 768–1440px o desktop é
   escalado proporcionalmente (shrink-to-fit, módulo 4 do JS). */
@media (max-width: 767px) {

  /* Página fluida */
  body {
    min-width: 0;
  }
  .page {
    width: 100%;
    /* garante que o shrink-to-fit não deixe transform/margin residual no mobile */
    transform: none;
    margin-bottom: 0;
  }
  
  .mobileOnly {
    display: block;
  }
  .desktopOnly {
    display: none;
  }

  /* ----- Hero ----- */
  .hero {
    height: 712px;
  }
  /* No desktop, a imagem é wide e a geladeira fica próximo do centro/direita.
     No mobile (crop vertical), centralizar horizontalmente mantém a geladeira visível. */
  .hero__image {
    object-position: top;
    object-fit: cover;
    
    /* object-position: 54% center; */
  }
  .hero__overlay {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 32px 24px;
    background: linear-gradient(
      to top,
      #03183f 0%,
      rgba(3, 24, 63, 0.65) 45%,
      rgba(3, 24, 63, 0) 100%
    );
  }
  .logo-electrolux {
    order: -1; /* logo acima do conteúdo no mobile */
  }
  .hero__content {
    width: 100%;
    padding-right: 46px;
  }
  .hero__title {
    font-size: 32px;
    line-height: 35px;
  }
  .hero__subtitle {
    font-size: 20px;
    line-height: 28px;
  }

  /* ----- Callout dark com vídeo ----- */
  .callout-video {
    padding: 24px 16px;
  }
  .callout-video__inner {
    flex-direction: column;
    gap: 24px;
  }
  .video-embed {
    width: 100%;
    height: 0;
    padding-bottom: 58.6%; /* 201/343 (Figma) */
  }
  .callout-video__content {
    padding: 0;
    gap: 16px;
    text-align: left;
  }
  .callout-video__heading {
    font-size: 32px;
    line-height: 35px;
  }

  /* ----- 3. Diferenciais (v1) ----- */
  .feature-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    object-position: top;
  }


  .callout-features {
    padding: 24px 0 0;
  }
  .callout-features__slide {
    flex: 0 0 100vw;
    width: 100vw;
  }
  .callout-features__inner {
    flex-direction: column;
    gap: 0;
  }
  .callout-features__content {
    order: 2;
    padding: 24px 16px;
    gap: 24px;
  }
  .callout-features__heading {
    font-size: 24px;
    line-height: 28px;
  }
  .callout-features__gallery {
    order: 1;
    width: 100%;
    height: 343px;
    padding-left: 16px;
    border-radius: 0;
    align-self: stretch;
  }
  .gallery-card {
    height: 327px;
  }
  .gallery-card--1,
  .gallery-card--2 {
    width: 327px;
  }
  .button-group {
    gap: 8px;
  }
  .btn {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 156px;
  }

  /* Mobile: sem setas — navegação somente via swipe touch */
  .gallery-arrow {
    display: none;
  }

  /* ----- 4. Features (cards lado a lado) ----- */
  .features {
    padding-left: 16px;
  }
  .features__row {
    height: 684px;
    gap: 8px;
  }
  .feature-card {
    width: 320px;
  }
  .feature-card__text {
    padding: 24px;
    gap: 8px;
  }
  .feature-card__heading {
    font-size: 24px;
    line-height: 28px;
  }
  .feature-card__body {
    font-size: 16px;
    line-height: 22px;
  }

  /* ----- 5. Tecnologias ----- */
  .tecnologias__head {
    padding: 24px 16px;
    gap: 16px;
    text-align: center;
  }
  .tecnologias__head h3 {
    font-size: 24px;
    line-height: 28px;
  }
  .tecnologias__head p {
    white-space: normal;
    font-size: 16px;
  }
  .tecnologias__body {
    flex-direction: column;
    padding: 0;
    gap: 16px;
    overflow: hidden;
    max-height: max-content !important;
  }
  .carrossel {
    flex-direction: column;
    width: 100%;
    gap: 16px;
  }
  

  
  .carrossel__main {
    order: 1;
    width: 100%;
    height: 375px;
    border-radius: 0;
  }
  /* Thumbs no mobile: mesmo padrão visual do .gallery-group do v2 —
     começam em x=16 da esquerda, sliver do próximo aparece na borda
     direita (overflow horizontal natural com scroll por toque). */
  .carrossel__thumbs {
    order: 2;
    align-items: flex-start;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-left: 4px;
    padding-right: 4px;
    gap: 0;
    scrollbar-width: none;
  }
  .carrossel__thumbs::-webkit-scrollbar {
    display: none;
  }
  .carrossel__thumbs-inner {
    flex-direction: row;
    align-items: flex-start;
    overflow: visible;
    gap: 0;
    flex-shrink: 0;
    overflow-x: scroll !important;
  }
  .carrossel__thumb {
    flex-shrink: 0; /* impede a compressão dos 140px no flex-row */
  }
  .carrossel__chevron--up,
  .carrossel__chevron--down {
    display: none; /* chevrons verticais não fazem sentido no scroll horizontal */
  }
  .feature-list {
    width: 100%;
    padding: 20px 16px 20px;
    gap: 0;
    /* Desktop herda flex: 1 1 0 + overflow: hidden — em column flex sem
       altura disponível, isso colapsa para altura 0 e clipa todos os items.
       Resetar para que a lista cresça com seu conteúdo natural. */
    flex: 0 0 auto;
    overflow: visible;
    justify-content: flex-start;
    height: auto;
  }
  .tech-feature {
    max-width: none;
    padding: 16px;
  }
  .tech-feature--active {
    padding: 16px;
  }
  .tech-feature.first-item .tech-feature__caret {
    transform: translateY(-50%) rotate(0deg);
    top: -6px;
    left: 15%;
  }
  .tech-feature.last-item .tech-feature__caret {
    transform: translateY(-50%) rotate(0deg);
    top: -6px;
    right: 15%;
    left: inherit;
  }
  .tech-feature.center-item .tech-feature__caret {
    transform: translateY(-50%) rotate(0deg);
    top: -6px;
    left: calc(50% - 20px);
  }
  .tech-feature:not(:first-child):not(:last-child) .tech-feature__caret {
    transform: translateY(-50%) rotate(0deg);
    top: -6px;
    left: inherit;
  }
  .tech-feature__title {
    font-size: 20px;
  }
  .tech-feature__body {
    font-size: 16px;
    line-height: 24px;
  }

  /* ----- 6. Electrolux Cuida ----- */
  .cuida {
    padding: 0;
    margin-top: 0;
  }
  .cuida__inner {
    flex-direction: column;
    gap: 0;
    padding: 0;
    align-items: stretch;
  }
  .cuida__image {
    order: 1;
    width: 100%;
    height: 160px;
    border-radius: 0;
  }
  .cuida__content {
    order: 2;
    padding: 24px 16px 0;
    gap: 8px;
  }
  .cuida__title {
    font-size: 32px;
    line-height: 35px;
  }

  /* ----- 7. Footer ----- */
  .footer {
    height: auto;
    padding: 0px 16px 0;
  }
  .footer__text {
    font-size: 16px;
    line-height: 22px;
  }

  /* ----- Modal ----- */
  .modal__box {
    left: 50%;
    top: 70%;
    transform: translate(-50%, -50%) scale(0.96);
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
    padding: 24px 88px 24px 24px;
  }
  .modal.is-open .modal__box {
    transform: translate(-50%, -50%) scale(1);
  }
  .modal__text {
    width: auto;
    flex: 1 1 auto;
  }

  /* Quando o carrossel estiver mudando de item, a imagem some com fade */
  .data-carousel-switching .gallery-card--2.mobileOnly {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  /* Quando o carrossel está parado, a imagem aparece com fade */
  .gallery-card--2.mobileOnly {
    opacity: 1;
    transition: opacity 0.3s ease;
  }
}

/* ============================================================
   MOBILE estreito (até 374px) — ajustes finos para iPhone SE etc.
   ============================================================ */
@media (max-width: 374px) {
  .gallery-card--1,
  .gallery-card--2 {
    width: 280px;
  }
  .feature-card {
    width: 280px;
  }
  .carrossel__main {
    height: 320px;
  }
}