/* =========================================
   EXTREME ELÉTRICA — MOBILE FIXES
   Correções completas para dispositivos móveis
   Garante: sem overflow, sem corte, placeholders
   centralizados, todos elementos visíveis
   ========================================= */

/* ── 1. RESET GLOBAL ANTI-OVERFLOW ─────────── */
html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

* {
  box-sizing: border-box;
  max-width: 100%;
}

img, video, svg, iframe {
  max-width: 100%;
  height: auto;
}

/* ── 2. CONTAINER SEGURO ────────────────────── */
.container {
  width: 100%;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* ── 3. SVG PLACEHOLDER — CENTRALIZAÇÃO ──────── */
.features__img-wrap svg,
.features__img-wrap .feature-illustration,
.portfolio__placeholder svg,
.portfolio__placeholder,
[class*="placeholder"] {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.features__img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.features__img-wrap svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
}

/* ── 4. PRELOADER ────────────────────────────── */
#preloader {
  padding: 0 20px;
}

.preloader__inner {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  align-items: center;
}

.preloader__logo-wrap {
  align-items: center;
  text-align: center;
}

.preloader__bar {
  max-width: 100%;
}

/* ── 5. HEADER — altura ajustada para logo maior ── */
:root {
  --header-h: 90px;
}

#header {
  width: 100%;
  left: 0;
  right: 0;
  height: 90px;
}

.header__inner {
  width: 100%;
  overflow: hidden;
}

/* ── LOGO MAIOR EM TODAS AS TELAS ────────────── */
.logo__img {
  max-height: 110px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

/* ── 6. HERO ──────────────────────────────── */
.hero {
  width: 100%;
  overflow: hidden;
}

.hero__bg {
  width: 100%;
  inset: 0;
}

.hero__grid {
  width: 100%;
}

.hero__content {
  width: 100%;
  max-width: 100%;
}

.hero__title {
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.hero__subtitle {
  max-width: 100%;
}

.hero__stats {
  position: static;
  transform: none;
  display: none;
}

/* ── 7. SECTIONS ────────────────────────────── */
.services,
.features,
.portfolio-prev,
.about-content,
.faq-section,
.local-info,
.cta-section,
.contact-section,
.services-full,
.portfolio-page,
.clients-grid-section,
.clients-testimonials,
.clients-segments,
.subestacao-content,
.subestacao-types,
.before-after-sec,
.clients-stats-band,
.port-hero,
.page-hero {
  width: 100%;
  overflow-x: hidden;
}

/* ── 8. GRIDS ────────────────────────────────── */
.services__grid,
.services-full__grid,
.portfolio__grid,
.portfolio-full__grid,
.features__inner,
.footer__inner,
.contact-inner,
.subestacao-content__grid {
  width: 100%;
}

/* ── 9. CARDS ────────────────────────────────── */
.service-card,
.service-card-lg {
  width: 100%;
  overflow: hidden;
  word-break: break-word;
}

.service-card__desc,
.service-card-lg__desc {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── 10. PORTFOLIO ───────────────────────────── */
.portfolio__item,
.portfolio-card {
  width: 100%;
  overflow: hidden;
}

.portfolio__item-img,
.portfolio-card__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 11. FEATURES BADGE ──────────────────────── */
.features__badge {
  bottom: -12px;
  right: -8px;
}

/* ── 12. FAQ ─────────────────────────────────── */
.faq-list {
  width: 100%;
}

.faq-item {
  width: 100%;
  overflow: hidden;
}

.faq-item summary {
  word-break: break-word;
  padding-right: 52px;
}

/* ── 13. LOCAL INFO ──────────────────────────── */
.local-info__grid {
  word-break: break-word;
  overflow-wrap: break-word;
}

.local-info__col a {
  word-break: break-all;
}

/* ── 14. FOOTER ──────────────────────────────── */
#footer {
  width: 100%;
  overflow: hidden;
}

.footer__inner,
.footer__bottom {
  width: 100%;
}

.footer__copy,
.footer__craft {
  text-align: center;
  font-size: 0.7rem;
}

/* ── 15. CTA SECTION ──────────────────────────── */
.cta-section__title {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ── 16. BOTÕES ──────────────────────────────── */
.btn-primary,
.btn-secondary,
.btn-cta,
.btn-whatsapp,
.btn-submit {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 17. FORMULÁRIOS ─────────────────────────── */
.form-control {
  max-width: 100%;
  width: 100%;
}

/* ── 18. CARROSSEL ───────────────────────────── */
.carousel-3d-wrap,
.carousel-3d-stage {
  width: 100%;
  overflow: hidden;
}

.carousel-3d-track {
  width: 100%;
  max-width: 100vw;
}

/* ── 19. MODAIS ──────────────────────────────── */
.media-modal,
.proj-panel,
.exit-modal {
  inset: 0;
  max-width: 100vw;
  max-height: 100dvh;
  overflow: hidden;
}

/* ── 20. SOCIAL BAR ──────────────────────────── */
.social-bar {
  width: 100%;
  overflow: hidden;
}

/* ── 21. PAGE HERO ───────────────────────────── */
.page-hero {
  overflow: hidden;
}

.page-hero__title,
.page-hero__subtitle {
  word-break: break-word;
  max-width: 100%;
}

/* ── 22. SUBESTAÇÃO ──────────────────────────── */
.subestacao-content__text h2,
.subestacao-content__text h3,
.subestacao-content__text p,
.subestacao-content__text ul li {
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* ── 23. PORT-HERO ───────────────────────────── */
.port-hero {
  overflow: hidden;
}

.port-hero__title,
.port-hero__sub {
  word-break: break-word;
  max-width: 100%;
}

/* ── 24. CLIENTES ────────────────────────────── */
.clients-grid {
  width: 100%;
  overflow: hidden;
}

.client-logo-card {
  overflow: hidden;
}

.client-logo-card img {
  max-width: 100%;
  height: auto;
}

/* ── 25. DEPOIMENTOS ─────────────────────────── */
.testimonials-grid {
  width: 100%;
}

.testimonial-card {
  width: 100%;
  overflow: hidden;
  word-break: break-word;
}

.testimonial-card__footer {
  flex-wrap: wrap;
}

/* ── 26. SEGMENTOS ───────────────────────────── */
.segments-grid {
  width: 100%;
}

.segment-card {
  width: 100%;
  overflow: hidden;
  word-break: break-word;
}

/* ── 27. PAINEL DE PROJETO ───────────────────── */
.proj-panel__drawer {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.proj-panel__body {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── 28. BEFORE/AFTER ────────────────────────── */
.ba-slider {
  max-width: 100%;
  overflow: hidden;
  touch-action: pan-y;
}

.ba-grid {
  width: 100%;
}

/* =========================================
   MOBILE — 768px
   ========================================= */
@media (max-width: 768px) {

  :root {
    --header-h: 80px;
  }

  .container {
    padding: 0 16px;
  }

  /* Logo proporcional no mobile */
  .logo__img {
    max-height: 82px;
    max-width: 180px;
  }

  #header {
    height: 80px;
  }

  /* Hero */
  .hero__content {
    padding-top: 80px;
    padding-bottom: 60px;
    max-width: 100%;
  }

  .hero__title {
    font-size: clamp(2.2rem, 9vw, 3.5rem);
    letter-spacing: -0.02em;
  }

  .hero__subtitle {
    font-size: 0.95rem;
    max-width: 100%;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px;
  }

  .hero__actions .btn-primary,
  .hero__actions .btn-secondary {
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
    padding: 14px 20px;
  }

  .hero__scroll {
    bottom: 16px;
  }

  .section-heading {
    font-size: clamp(1.7rem, 6vw, 2.6rem);
    line-height: 1.12;
    word-break: break-word;
  }

  .services__header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 40px;
    gap: 16px;
  }

  .services__grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .service-card {
    padding: 24px 20px;
  }

  .service-card__arrow {
    bottom: 24px;
    right: 24px;
  }

  .features__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .features__visual {
    display: none;
  }

  .features__list {
    margin-top: 24px;
  }

  .feature-item {
    gap: 16px;
  }

  .portfolio-prev__header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 32px;
    gap: 16px;
  }

  .portfolio__grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .about-content__body {
    font-size: 0.95rem;
  }

  .faq-item summary {
    font-size: 0.92rem;
    padding: 16px 20px;
    padding-right: 50px;
  }

  .faq-item summary::after {
    right: 18px;
  }

  .faq-item > div {
    padding: 0 20px 18px;
    font-size: 0.88rem;
  }

  .local-info__grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 24px 20px;
  }

  .cta-section__title {
    font-size: clamp(1.9rem, 7vw, 3rem);
  }

  .cta-section__subtitle {
    font-size: 0.95rem;
  }

  .cta-section__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .cta-section__actions .btn-primary,
  .cta-section__actions .btn-whatsapp {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .footer__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }

  .footer__desc {
    max-width: 100%;
  }

  .contact-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact-section {
    padding-top: calc(80px + var(--header-h, 80px));
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .form-control {
    font-size: 16px;
    min-height: 50px;
  }

  textarea.form-control {
    min-height: 120px;
  }

  .services-full__grid {
    grid-template-columns: 1fr;
  }

  .service-card-lg {
    padding: 28px 20px;
  }

  .page-hero {
    padding-top: calc(var(--header-h, 80px) + 48px);
    padding-bottom: 56px;
  }

  .page-hero__title {
    font-size: clamp(2rem, 8vw, 3.2rem);
    word-break: break-word;
  }

  .page-hero__subtitle {
    font-size: 0.95rem;
    max-width: 100%;
  }

  .page-hero .btn-primary,
  .page-hero .btn-whatsapp,
  [data-reveal] + [style*="display:flex"] {
    flex-direction: column;
    width: 100%;
  }

  .page-hero a.btn-primary,
  .page-hero a.btn-whatsapp {
    width: 100%;
    justify-content: center;
  }

  .trust-bar__inner {
    flex-wrap: wrap;
  }

  .trust-bar__item {
    min-width: calc(50% - 8px);
    flex: 1 1 40%;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 14px 12px;
  }

  .trust-bar__sep {
    display: none;
  }

  .portfolio-page {
    padding-top: 48px;
  }

  .portfolio-filter {
    gap: 8px;
    margin-bottom: 32px;
  }

  .filter-btn {
    padding: 8px 14px;
    font-size: 0.65rem;
  }

  .portfolio-full__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .port-hero__title {
    font-size: clamp(2.2rem, 8vw, 3.5rem);
    word-break: break-word;
  }

  .port-hero__stats {
    gap: 16px;
    flex-wrap: wrap;
  }

  .port-hero__stat-num {
    font-size: 1.5rem;
  }

  .port-hero__ctas {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .port-hero__ctas .btn-primary,
  .port-hero__cta-video {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .carousel-3d-item {
    flex: 0 0 82vw;
    max-width: 82vw;
    height: 220px;
  }

  .carousel-3d-track {
    padding: 12px 9vw 20px;
  }

  .carousel-3d-nav {
    gap: 16px;
  }

  .clients-grid-section {
    padding-top: 48px;
  }

  .clients-grid-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .clients-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .client-logo-card {
    padding: 20px;
    aspect-ratio: 4 / 3;
  }

  .client-logo-card img {
    max-height: 44px;
  }

  .clients-stats-grid {
    flex-wrap: wrap;
    gap: 0;
  }

  .clients-stat {
    flex: 1 1 50%;
    padding: 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .clients-stat-sep {
    display: none;
  }

  .clients-filter {
    width: 100%;
    justify-content: flex-start;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .segments-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .subestacao-content__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .subestacao-types__grid {
    grid-template-columns: 1fr;
  }

  .subestacao-content__text h2 {
    font-size: 1.5rem;
  }

  .subestacao-content__text h3 {
    font-size: 1.1rem;
  }

  .ba-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .proj-panel__drawer {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    border-left: none;
    border-radius: 0;
    overflow-y: auto;
  }

  .proj-panel__body {
    padding: 24px 16px 48px;
  }

  .proj-panel__metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .proj-panel__gallery {
    aspect-ratio: 16 / 10;
  }

  .media-modal__inner {
    width: 100%;
    margin: 0;
    border-radius: 0;
  }

  .media-modal__close {
    top: 12px;
    right: 12px;
  }

  .exit-modal {
    padding: 16px;
    align-items: flex-end;
  }

  .exit-modal__box {
    max-width: 100%;
    width: 100%;
    border-radius: 16px 16px 0 0;
    padding: 28px 20px 32px;
    margin-bottom: env(safe-area-inset-bottom, 0);
  }

  .whatsapp-float {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    width: 50px;
    height: 50px;
  }

  .social-bar__count {
    display: none;
  }

  .social-bar__cta {
    padding: 0 12px;
  }

  .faq-section__header .section-label,
  .subestacao-types__header .section-label {
    display: flex;
    justify-content: center;
  }

  .contact-info__value {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .portfolio-section-heading {
    flex-wrap: wrap;
    margin-bottom: 32px;
  }

  .portfolio-section-heading__title {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }

  .portfolio-sep {
    margin: 56px 0;
  }

  #scroll-progress {
    z-index: 9998;
  }

  .seg-filter {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 32px;
  }

  .seg-filter__btns {
    width: 100%;
    gap: 8px;
  }

  .seg-btn {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }

  .page-hero__actions {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .page-hero__actions > a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  div[style*="display:flex"][style*="flex-wrap:wrap"] {
    flex-direction: column;
    gap: 12px !important;
    width: 100%;
  }

  div[style*="display:flex"][style*="flex-wrap:wrap"] > a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* =========================================
   MOBILE PEQUENO — 480px
   ========================================= */
@media (max-width: 480px) {

  .container {
    padding: 0 14px;
  }

  /* Logo proporcional em telas muito pequenas */
  .logo__img {
    max-height: 94px;
    max-width: 150px;
  }

  .hero__title {
    font-size: clamp(1.9rem, 10vw, 2.8rem);
  }

  .section-heading {
    font-size: clamp(1.5rem, 7.5vw, 2.2rem);
  }

  .page-hero__title {
    font-size: clamp(1.8rem, 9vw, 2.8rem);
  }

  .cta-section__title {
    font-size: clamp(1.6rem, 8vw, 2.4rem);
  }

  .service-card {
    padding: 20px 16px;
  }

  .service-card-lg {
    padding: 20px 16px;
  }

  .carousel-3d-item {
    flex: 0 0 88vw;
    max-width: 88vw;
    height: 200px;
  }

  .clients-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .local-info__grid {
    padding: 20px 16px;
  }

  .faq-item summary {
    font-size: 0.88rem;
    padding: 14px 16px;
    padding-right: 46px;
  }

  .faq-item summary::after {
    right: 14px;
    font-size: 1.2rem;
  }

  .portfolio-filter {
    gap: 6px;
  }

  .filter-btn {
    padding: 7px 12px;
    font-size: 0.62rem;
  }

  .footer__copy {
    font-size: 0.68rem;
  }

  .proj-panel__metrics {
    grid-template-columns: 1fr;
  }

  .port-hero__stats {
    display: none;
  }

  .btn-primary,
  .btn-secondary,
  .btn-cta {
    padding: 13px 18px;
    font-size: 0.78rem;
  }
}

/* =========================================
   TABLETS — 481px a 1024px
   ========================================= */
@media (min-width: 481px) and (max-width: 1024px) {

  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-full__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .portfolio__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .portfolio-full__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .clients-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .segments-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .features__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .features__visual {
    display: none;
  }

  .carousel-3d-item {
    flex: 0 0 340px;
    height: 230px;
  }
}

/* =========================================
   SAFE AREAS — iPhone notch / Dynamic Island
   ========================================= */
@supports (padding: env(safe-area-inset-bottom)) {
  .whatsapp-float {
    bottom: calc(20px + env(safe-area-inset-bottom));
  }

  @media (max-width: 768px) {
    .whatsapp-float {
      bottom: calc(80px + env(safe-area-inset-bottom));
    }
  }

  .mobile-menu {
    padding-bottom: env(safe-area-inset-bottom);
  }

  #header {
    padding-top: env(safe-area-inset-top);
  }
}

/* =========================================
   ANTI-ZOOM iOS — inputs
   ========================================= */
@media (max-width: 768px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* =========================================
   ACESSIBILIDADE — reduced motion
   ========================================= */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto !important;
  }
}