@charset "UTF-8";
/*
  Página: Dispositivos (novo layout v3 — Figma node 4238-5316)
  Segue os tokens e padrões adotados em clinicas-e-consultorios.css
*/

/* =========================================
   1. VARIÁVEIS GLOBAIS
   ========================================= */
:root {
  --color-dark: #072b31;
  --color-light: #e6eee1;
  --color-teal: #2f5854;
  --color-botanico: #2a554e;
  --color-text-muted: #51585e;
  --color-line: rgba(7, 43, 49, 0.25);
  --color-brand-50: #ebfff8;
  --color-white: #ffffff;

  /* Fontes */
  --font-aeonik-light: "Aeonik Light", sans-serif;
  --font-aeonik-regular: "Aeonik Regular", sans-serif;
  --font-aeonik-italic: "Aeonik Italic", sans-serif;
  --font-aeonik-bold: "Aeonik Bold", sans-serif;
  --font-feature-regular: "Feature Deck Regular", serif;
  --font-feature-cond-regular: "Feature Deck Cond Regular", serif;
  --font-feature-bold: "Feature Deck Cond Bold", serif;

  --max-content-width: 1440px;
}

/* =========================================
   2. FONTES
   ========================================= */
@font-face {
  font-family: "Aeonik Regular";
  src: url("fonts/aeonik/Aeonik-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aeonik Italic";
  src: url("fonts/aeonik/Aeonik-RegularItalic.otf") format("opentype");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Aeonik Light";
  src: url("fonts/aeonik/Aeonik-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aeonik Bold";
  src: url("fonts/aeonik/Aeonik-Bold.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Feature Deck Regular";
  src: url("fonts/feature/FeatureDeck-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Feature Deck Cond Regular";
  src: url("fonts/feature/FeatureDeckCondensed-Regular.otf") format("opentype");
  font-stretch: condensed;
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Feature Deck Cond Bold";
  src: url("fonts/feature/FeatureDeckCondensed-Bold.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* =========================================
   3. BASE
   ========================================= */
#dispositivos {
  background-color: var(--color-white);
  overflow-x: hidden;
}

#dispositivos *,
#dispositivos *::before,
#dispositivos *::after {
  box-sizing: border-box;
}

#dispositivos p,
#dispositivos h1,
#dispositivos h2,
#dispositivos h3,
#dispositivos dl,
#dispositivos dt,
#dispositivos dd {
  margin: 0;
  padding: 0;
  color: var(--color-dark);
}

#dispositivos .content {
  width: 100%;
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: 0 42px;
}

/* =========================================
   4. HERO
   ========================================= */
#dispositivos .disp-hero {
  margin-top: 69px;
  min-height: 850px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 72px 42px 56px;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}

#dispositivos .disp-hero h1 {
  font-family: var(--font-feature-cond-regular);
  font-weight: 400;
  font-size: 74px;
  line-height: 0.97;
  letter-spacing: 0;
  color: var(--color-teal);
  max-width: 1100px;
}


#dispositivos .disp-hero p {
  margin-top: auto;
  font-family: var(--font-aeonik-regular);
  font-size: 22px;
  line-height: 32px;
  letter-spacing: 0.5px;
  color: var(--color-teal);
  max-width: 760px;
}

/* =========================================
   5. INTRO (Dispositivos portáteis e versáteis)
   ========================================= */
#dispositivos .disp-intro {
  padding: 110px 0;
}

#dispositivos .disp-intro .content {
  display: flex;
  align-items: center;
  gap: 80px;
}

#dispositivos .disp-intro-text {
  flex: 1 1 50%;
  max-width: 588px;
}

#dispositivos .disp-intro-text h2 {
  font-family: var(--font-feature-regular);
  font-weight: 400;
  font-size: 70px;
  line-height: 76px;
  letter-spacing: 0.5px;
  color: var(--color-botanico);
  margin-bottom: 40px;
}

#dispositivos .disp-intro-text p {
  font-family: var(--font-aeonik-regular);
  font-size: 22px;
  line-height: 32px;
  letter-spacing: 0.5px;
  color: var(--color-text-muted);
}

#dispositivos .disp-intro-text p + p {
  margin-top: 24px;
}

#dispositivos .disp-intro-img {
  flex: 1 1 50%;
  max-width: 710px;
}

#dispositivos .disp-intro-img img {
  width: 100%;
  height: 597px;
  object-fit: cover;
  border-radius: 0 0 0 180px;
  display: block;
}

/* =========================================
   6. DISPOSITIVOS (acordeão horizontal)
   ========================================= */
#dispositivos .disp-devices {
  padding: 0 0 110px;
}

#dispositivos .disp-accordion {
  display: flex;
  gap: 16px;
  align-items: stretch;
}

#dispositivos .disp-device {
  position: relative;
  min-height: 560px;
  background-color: var(--color-light);
  border-radius: 0 0 80px 0;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  /* grow:0 shrink:0 basis:224 — animar somente flex-grow garante transição suave
     (flex-basis: auto não é animável). */
  flex: 0 0 224px;
  cursor: pointer;
  transition: flex-grow 0.45s ease;
}

#dispositivos .disp-device.is-open {
  flex-grow: 1;
  cursor: default;
}

/* coluna principal: logo (topo) + render (base) */
#dispositivos .disp-device-main {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 52px 16px 0;
}

#dispositivos .disp-device.is-open .disp-device-main {
  flex: 0 0 345px;
  width: 345px;
  padding: 52px 0 0 0;
}

#dispositivos .disp-device-toggle {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: inherit;
  display: flex;
  justify-content: center;
}

#dispositivos .disp-device.is-open .disp-device-toggle {
  justify-content: flex-start;
  padding-left: 35px;
}

#dispositivos .disp-device-logo {
  height: 36px;
  width: auto;
  display: block;
}

#dispositivos .disp-device-visual {
  flex: 1;
  min-height: 0;
  margin-top: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

#dispositivos .disp-device-visual img {
  display: block;
  width: 116%;
  max-width: none;
  max-height: 360px;
  height: auto;
  object-fit: contain;
  transition: width 0.45s ease, max-width 0.45s ease, max-height 0.45s ease;
}

#dispositivos .disp-device.is-open .disp-device-visual {
  align-items: center;
}

#dispositivos .disp-device.is-open .disp-device-visual img {
  width: auto;
  max-width: 345px;
  max-height: 360px;
}

/* coluna de informações (somente quando aberto) */
#dispositivos .disp-device-info {
  display: none;
}

/* O conteúdo só é renderizado depois que a largura termina de expandir
   (classe .is-revealed adicionada via JS). Assim o texto já nasce na largura
   final, sem reflow/“pulo” de altura durante a transição. */
#dispositivos .disp-device.is-open.is-revealed .disp-device-info {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 55px 56px 48px 0;
  animation: disp-info-in 0.35s ease both;
}

@keyframes disp-info-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

#dispositivos .disp-device-title {
  font-family: var(--font-feature-bold);
  font-weight: 700;
  font-size: 40px;
  line-height: 46px;
  letter-spacing: 0.5px;
  color: var(--color-dark);
  margin-bottom: 36px;
  max-width: 520px;
}

#dispositivos .disp-specs {
  margin: 0;
}

#dispositivos .disp-spec {
  padding: 8px 0;
  border-top: 1px solid var(--color-line);
}

#dispositivos .disp-spec dt,
#dispositivos .disp-spec dd {
  display: inline;
  font-size: 22px;
  line-height: 32px;
  letter-spacing: 0.5px;
  color: var(--color-dark);
}

#dispositivos .disp-spec dt {
  font-family: var(--font-aeonik-bold);
  font-weight: 700;
}

#dispositivos .disp-spec dd {
  font-family: var(--font-aeonik-regular);
}

#dispositivos .disp-btn {
  align-self: flex-start;
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-teal);
  color: var(--color-brand-50);
  font-family: var(--font-aeonik-regular);
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.5px;
  text-decoration: none;
  padding: 10px 22px;
  border-radius: 40px;
  transition: background-color 0.25s ease;
}

#dispositivos .disp-btn:hover,
#dispositivos .disp-btn:focus-visible {
  background-color: var(--color-dark);
}

/* =========================================
   7. VANTAGENS
   ========================================= */
#dispositivos .disp-vantagens {
  padding: 0 0 120px;
}

#dispositivos .disp-vantagens h2 {
  font-family: var(--font-feature-regular);
  font-weight: 400;
  font-size: 70px;
  line-height: 76px;
  letter-spacing: 0.5px;
  color: var(--color-botanico);
  text-align: center;
  margin-bottom: 64px;
}

#dispositivos .disp-vantagens-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px 141px;
}

#dispositivos .disp-vantagem {
  width: 224px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

#dispositivos .disp-vantagem img {
  width: 140px;
  height: 140px;
  display: block;
}

#dispositivos .disp-vantagem p {
  font-family: var(--font-aeonik-regular);
  font-size: 22px;
  line-height: 32px;
  letter-spacing: 0.5px;
  color: var(--color-dark);
  text-align: center;
}

/* =========================================
   8. CTA (formulário "Quer ser um parceiro Hilab?")
   ========================================= */
#dispositivos .disp-cta {
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
  padding: 90px 0;
}

#dispositivos .disp-cta .content {
  display: flex;
  justify-content: flex-start;
}

#dispositivos .disp-cta .lf-inline-wrapper,
#dispositivos .disp-cta .lf-container {
  margin: 0;
  max-width: 588px;
}

/* foto exibida acima do formulário apenas no mobile (<=764px) */
#dispositivos .disp-cta-photo {
  display: none;
}

/* =========================================
   9. RESPONSIVO
   ========================================= */
@media screen and (max-width: 1200px) {
  #dispositivos .disp-hero h1 {
    font-size: 72px;
  }
  #dispositivos .disp-device.is-open .disp-device-main {
    flex-basis: 300px;
    width: 300px;
  }
  #dispositivos .disp-device-title {
    font-size: 34px;
    line-height: 40px;
  }
  #dispositivos .disp-device.is-open .disp-device-info {
    padding: 48px 32px 40px 0;
  }
}

@media screen and (max-width: 1024px) {
  #dispositivos .disp-intro .content {
    gap: 48px;
  }
  #dispositivos .disp-intro-text h2,
  #dispositivos .disp-vantagens h2 {
    font-size: 56px;
    line-height: 60px;
  }
  #dispositivos .disp-intro-img img {
    height: 460px;
    border-radius: 0 0 0 120px;
  }
  #dispositivos .disp-vantagens-grid {
    gap: 40px 60px;
  }
}

/* Empilha tudo no mobile: cada dispositivo vira um card completo */
@media screen and (max-width: 1080px) {
  #dispositivos .disp-hero {
    min-height: 560px;
    padding: 48px 20px 40px;
  }
  #dispositivos .disp-hero h1 {
    font-size: 48px;
  }
  #dispositivos .disp-hero p {
    font-size: 18px;
    line-height: 26px;
  }

  #dispositivos .content {
    padding: 0 20px;
  }

  #dispositivos .disp-intro {
    padding: 64px 0;
  }
  #dispositivos .disp-intro .content {
    flex-direction: column;
    gap: 40px;
  }
  #dispositivos .disp-intro-text,
  #dispositivos .disp-intro-img {
    max-width: 100%;
    width: 100%;
  }
  #dispositivos .disp-intro-text h2 {
    font-size: 44px;
    line-height: 48px;
    margin-bottom: 24px;
  }
  #dispositivos .disp-intro-text p,
  #dispositivos .disp-intro-text p + p {
    font-size: 18px;
    line-height: 26px;
  }
  #dispositivos .disp-intro-img img {
    height: 300px;
    border-radius: 0 0 0 90px;
  }

  /* cards ocupam a largura total da tela no mobile */
  #dispositivos .disp-devices .content {
    padding-left: 0;
    padding-right: 0;
  }

  /* acordeão -> cards empilhados, todos expandidos */
  #dispositivos .disp-accordion {
    flex-direction: column;
    gap: 24px;
  }
  #dispositivos .disp-device,
  #dispositivos .disp-device.is-open {
    flex: 1 1 auto;
    height: auto;
    flex-direction: column;
    cursor: default;
    border-radius: 0 0 60px 0;
  }
  #dispositivos .disp-device-main,
  #dispositivos .disp-device.is-open .disp-device-main {
    width: 100%;
    flex: 0 0 auto;
    padding: 40px 24px 0;
    align-items: center;
  }
  #dispositivos .disp-device-toggle,
  #dispositivos .disp-device.is-open .disp-device-toggle {
    justify-content: center;
    padding-left: 0;
  }
  #dispositivos .disp-device-visual,
  #dispositivos .disp-device.is-open .disp-device-visual {
    align-items: center;
    margin-top: 16px;
  }
  #dispositivos .disp-device-visual img,
  #dispositivos .disp-device.is-open .disp-device-visual img {
    width: auto;
    max-width: 70%;
    max-height: 260px;
  }
  /* Abaixo de 1080px cada dispositivo é um card autônomo (sem acordeão):
     o conteúdo é sempre visível e em coluna, independente de is-open/is-revealed.
     Os 3 seletores cobrem a especificidade das regras de desktop. */
  #dispositivos .disp-device .disp-device-info,
  #dispositivos .disp-device.is-open .disp-device-info,
  #dispositivos .disp-device.is-open.is-revealed .disp-device-info {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    align-items: flex-start;
    text-align: left;
    padding: 8px 24px 40px;
    animation: none;
  }
  #dispositivos .disp-device-title {
    font-size: 28px;
    line-height: 32px;
    margin-bottom: 24px;
    max-width: 100%;
  }
  /* divisórias internas ocupam 100% da largura do conteúdo */
  #dispositivos .disp-specs {
    width: 100%;
  }
  #dispositivos .disp-spec {
    width: 100%;
    text-align: left;
  }
  #dispositivos .disp-spec dt,
  #dispositivos .disp-spec dd {
    font-size: 18px;
    line-height: 26px;
  }
  #dispositivos .disp-btn {
    align-self: center;
  }

  #dispositivos .disp-vantagens {
    padding: 0 0 72px;
  }
  #dispositivos .disp-vantagens h2 {
    font-size: 40px;
    line-height: 44px;
    margin-bottom: 40px;
  }
  #dispositivos .disp-vantagens-grid {
    gap: 40px;
  }

  #dispositivos .disp-cta {
    padding: 48px 0;
    background-position: center top;
  }
  #dispositivos .disp-cta .content {
    justify-content: center;
  }
}


@media screen and (max-width: 500px) {
  #dispositivos .disp-hero h1 {
    font-size: 36px;
    line-height: 1.1;
  }
  #dispositivos .disp-hero p {
    font-size: 16px;
    line-height: 1.5;
  }
}

/* CTA no mobile (<=764px): foto em cima e formulário ocupando 100% da largura */
@media (max-width: 764px) {
  #dispositivos .disp-cta {
    background-image: none !important;
    padding: 0 0 40px;
  }
  #dispositivos .disp-cta .content {
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
    gap: 0;
  }
  #dispositivos .disp-cta-photo {
    display: block;
    width: 100%;
    height: 340px;
    background-size: cover;
    background-position: 100% center;
    background-repeat: no-repeat;
  }
  #dispositivos .disp-cta .lf-inline-wrapper,
  #dispositivos .disp-cta .lf-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
  #dispositivos .disp-cta .lf-card {
    width: 100%;
    max-width: 100%;
    border-radius: 0 0 40px 40px;
    padding: 32px 24px 40px;
  }
}