/* ==========================================================
   FILÓ RENDEIRA — MOBILE EXPERT
   Ajustes focados em celular: leitura, ritmo, toque e performance visual.
   ========================================================== */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video {
  max-width: 100%;
}

/* Área de toque mínima mais confortável */
a,
button,
input,
select,
textarea,
[role="button"] {
  -webkit-tap-highlight-color: rgba(201, 143, 155, .18);
}

/* ------------------------------
   TABLET / MOBILE GERAL
------------------------------ */
@media (max-width: 900px) {
  body {
    font-size: 15.5px;
  }

  /* Menos espaçamento vertical para a home não parecer longa demais */
  section,
  .fr-editorial-section,
  .fr-collection-focus,
  .fr-support-section,
  .fr-portfolio-hero-v9,
  .fr-portfolio-occasion-links,
  .fr-occasion-mini {
    padding-top: clamp(2.8rem, 7vw, 4.4rem) !important;
    padding-bottom: clamp(2.8rem, 7vw, 4.4rem) !important;
  }

  /* Header mais compacto */
  header,
  .site-header,
  .main-header,
  nav {
    max-width: 100%;
  }

  header .container,
  header .max-w-7xl,
  header > div {
    min-height: auto !important;
  }

  /* Layouts de duas colunas viram uma coluna com respiro menor */
  .fr-editorial-wrap,
  .fr-collection-head,
  .fr-support-head,
  .fr-portfolio-hero-wrap,
  .fr-occasion-mini-wrap {
    grid-template-columns: 1fr !important;
    gap: 1.45rem !important;
  }

  /* Títulos: fortes, mas sem ocupar a tela inteira */
  #hero h1,
  .hero-title,
  .fr-model-title,
  .fr-portfolio-hero-copy h1 {
    font-size: clamp(2.35rem, 10.5vw, 4.1rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -.045em !important;
    max-width: 100% !important;
    text-wrap: balance;
  }

  .fr-editorial-copy h2,
  .fr-collection-focus h2,
  .fr-support-section h2,
  .fr-portfolio-occasion-head h2,
  .fr-occasion-mini h2,
  section h2 {
    font-size: clamp(2rem, 9vw, 3.35rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -.04em !important;
    text-wrap: balance;
  }

  h3,
  .fr-portfolio-card-v9 h3,
  .fr-lookbook-card h3,
  .fr-support-card h3 {
    font-size: clamp(1.35rem, 6.2vw, 2rem) !important;
    line-height: 1.12 !important;
  }

  p,
  .fr-model-subtitle,
  .fr-portfolio-hero-copy p,
  .fr-editorial-copy p,
  .fr-collection-head p,
  .fr-support-head p,
  .fr-portfolio-occasion-head p,
  .fr-occasion-mini p {
    font-size: .98rem !important;
    line-height: 1.62 !important;
  }

  .fr-mini-label,
  .fr-kicker-pill,
  [class*="kicker"],
  [class*="eyebrow"] {
    font-size: .68rem !important;
    letter-spacing: .16em !important;
  }

  /* Botões mais fáceis de tocar */
  .fr-primary-btn,
  .fr-secondary-btn,
  .fr-card-btn,
  .btn,
  .button,
  button,
  a[class*="btn"] {
    min-height: 46px;
    touch-action: manipulation;
  }

  .fr-portfolio-hero-actions,
  .hero-actions,
  .cta-actions {
    gap: .7rem !important;
  }

  /* Imagens hero e cards com altura controlada */
  .fr-hero-frame {
    border-radius: 1.5rem !important;
    padding: .55rem !important;
  }

  .fr-hero-carousel,
  .fr-hero-carousel img,
  .hero-carousel,
  .hero-carousel img {
    border-radius: 1.15rem !important;
  }

  .fr-hero-carousel,
  .hero-carousel,
  .hero-carousel-shell {
    min-height: auto !important;
    max-height: 520px !important;
  }

  .hero-carousel img,
  .fr-hero-carousel img,
  #hero img {
    max-height: 520px !important;
    object-fit: cover !important;
  }

  /* Composição "Uma peça..." menos alta no celular */
  .fr-editorial-mosaic {
    min-height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }

  .fr-mosaic-card,
  .fr-mosaic-card.one,
  .fr-mosaic-card.two,
  .fr-mosaic-card.three {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 260px !important;
    border-radius: 1.25rem !important;
  }

  .fr-mosaic-card.one {
    grid-column: 1 / -1;
    height: 340px !important;
  }

  .fr-mosaic-note {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    grid-column: 1 / -1;
    margin: 0 !important;
    border-radius: 1.25rem !important;
    padding: 1rem !important;
  }

  .fr-mosaic-note strong {
    font-size: 1.25rem !important;
  }

  /* Lookbook com altura menor */
  .fr-lookbook-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .fr-lookbook-card,
  .fr-lookbook-card.big {
    min-height: 390px !important;
    border-radius: 1.35rem !important;
  }

  .fr-lookbook-card div {
    left: 1rem !important;
    right: 1rem !important;
    bottom: 1rem !important;
  }

  /* Cards de apoio e portfólio mais compactos */
  .fr-support-grid,
  .fr-portfolio-grid-v9,
  .fr-portfolio-occasion-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .fr-support-card {
    min-height: auto !important;
    border-radius: 1.35rem !important;
    padding: 1.15rem !important;
  }

  .fr-portfolio-card-v9 {
    border-radius: 1.35rem !important;
  }

  .fr-portfolio-card-img {
    aspect-ratio: 4 / 4.35 !important;
  }

  .fr-portfolio-card-body {
    padding: 1rem !important;
  }

  .fr-portfolio-card-desc {
    min-height: auto !important;
    font-size: .94rem !important;
    line-height: 1.5 !important;
  }

  .fr-portfolio-card-actions {
    gap: .55rem !important;
  }

  .fr-card-btn {
    font-size: .84rem !important;
    min-height: 44px !important;
    padding: .68rem .75rem !important;
  }

  /* Topo do portfólio mais leve no celular */
  .fr-portfolio-hero-visual {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    min-height: auto !important;
    gap: .75rem !important;
  }

  .fr-portfolio-hero-img,
  .fr-portfolio-hero-img.main,
  .fr-portfolio-hero-img.side.top,
  .fr-portfolio-hero-img.side.mid,
  .fr-portfolio-hero-img.side.bottom {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 230px !important;
    border-radius: 1.25rem !important;
  }

  .fr-portfolio-hero-img.main {
    grid-column: 1 / -1;
    height: 340px !important;
  }

  .fr-portfolio-hero-note {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    width: 100% !important;
    grid-column: 1 / -1;
    border-radius: 1.25rem !important;
    padding: 1rem !important;
  }

  .fr-portfolio-hero-note strong {
    font-size: 1.25rem !important;
  }

  /* Orçamento mais usável no celular */
  #orcamento {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #form-orcamento,
  #orcamento form {
    width: 100% !important;
  }

  #form-orcamento .grid,
  #form-orcamento [class*="grid-cols"],
  #orcamento form .grid,
  #orcamento form [class*="grid-cols"] {
    grid-template-columns: 1fr !important;
  }

  #form-orcamento input,
  #form-orcamento select,
  #form-orcamento textarea {
    min-height: 48px !important;
    font-size: 16px !important; /* evita zoom automático no iPhone */
    border-radius: 1rem !important;
  }

  #form-orcamento label,
  #form-orcamento .form-label,
  #form-orcamento legend {
    font-size: .78rem !important;
    line-height: 1.25 !important;
  }

  #form-orcamento small,
  #form-orcamento .helper-text,
  #form-orcamento .field-help,
  #form-orcamento p {
    font-size: .86rem !important;
    line-height: 1.45 !important;
  }

  #form-orcamento textarea {
    min-height: 130px !important;
  }

  #form-orcamento button,
  #orcamento button,
  #form-orcamento [type="submit"] {
    width: 100%;
    min-height: 50px !important;
  }

  /* Rodapé e seções finais mais compactos */
  footer {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
}

/* ------------------------------
   CELULAR PEQUENO
------------------------------ */
@media (max-width: 560px) {
  body {
    font-size: 15px;
  }

  section,
  .fr-editorial-section,
  .fr-collection-focus,
  .fr-support-section,
  .fr-portfolio-hero-v9,
  .fr-portfolio-occasion-links,
  .fr-occasion-mini {
    padding-top: 2.6rem !important;
    padding-bottom: 2.6rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #hero,
  .fr-model-hero {
    padding-top: 2.25rem !important;
    padding-bottom: 2.75rem !important;
    min-height: auto !important;
  }

  #hero h1,
  .hero-title,
  .fr-model-title,
  .fr-portfolio-hero-copy h1 {
    font-size: clamp(2.25rem, 10.8vw, 3.35rem) !important;
    line-height: 1.05 !important;
  }

  .fr-editorial-copy h2,
  .fr-collection-focus h2,
  .fr-support-section h2,
  .fr-portfolio-occasion-head h2,
  .fr-occasion-mini h2,
  section h2 {
    font-size: clamp(2rem, 9.6vw, 2.85rem) !important;
    line-height: 1.06 !important;
  }

  .fr-model-subtitle,
  .fr-portfolio-hero-copy p,
  .fr-editorial-copy p,
  .fr-collection-head p,
  .fr-support-head p,
  .fr-portfolio-occasion-head p,
  .fr-occasion-mini p {
    font-size: .96rem !important;
    line-height: 1.58 !important;
  }

  /* Botões principais ocupam largura total quando estão em grupo */
  .fr-portfolio-hero-actions,
  #hero .flex,
  .hero-actions,
  .cta-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .fr-portfolio-hero-actions a,
  #hero .flex a,
  #hero .flex button,
  .hero-actions a,
  .hero-actions button,
  .cta-actions a,
  .cta-actions button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Cards e imagens ainda menores */
  .fr-mosaic-card,
  .fr-mosaic-card.one,
  .fr-mosaic-card.two,
  .fr-mosaic-card.three,
  .fr-portfolio-hero-img,
  .fr-portfolio-hero-img.main,
  .fr-portfolio-hero-img.side.top,
  .fr-portfolio-hero-img.side.mid,
  .fr-portfolio-hero-img.side.bottom {
    height: 220px !important;
  }

  .fr-mosaic-card.one,
  .fr-portfolio-hero-img.main {
    height: 300px !important;
  }

  .fr-lookbook-card,
  .fr-lookbook-card.big {
    min-height: 345px !important;
  }

  .fr-portfolio-card-img {
    aspect-ratio: 4 / 4.15 !important;
  }

  .fr-portfolio-card-actions {
    flex-direction: row !important;
  }

  .fr-card-btn {
    white-space: normal !important;
  }

  /* Pílulas de ocasião no final da home */
  .fr-occasion-pills {
    gap: .55rem !important;
  }

  .fr-occasion-pills a {
    width: 100%;
    min-height: 44px !important;
    padding: .72rem .9rem !important;
  }

  /* Evita sombras muito pesadas no celular */
  .fr-hero-frame,
  .fr-mosaic-card,
  .fr-lookbook-card,
  .fr-support-card,
  .fr-portfolio-card-v9,
  .fr-portfolio-hero-img {
    box-shadow: 0 14px 38px rgba(83, 51, 42, .09) !important;
  }
}

/* ------------------------------
   CELULAR MUITO ESTREITO
------------------------------ */
@media (max-width: 390px) {
  #hero h1,
  .hero-title,
  .fr-model-title,
  .fr-portfolio-hero-copy h1 {
    font-size: clamp(2.05rem, 10.2vw, 2.85rem) !important;
  }

  .fr-editorial-copy h2,
  .fr-collection-focus h2,
  .fr-support-section h2,
  .fr-portfolio-occasion-head h2,
  .fr-occasion-mini h2,
  section h2 {
    font-size: clamp(1.85rem, 9vw, 2.5rem) !important;
  }

  .fr-card-btn {
    font-size: .78rem !important;
    padding-left: .55rem !important;
    padding-right: .55rem !important;
  }

  .fr-portfolio-card-actions {
    flex-direction: column !important;
  }
}

/* ------------------------------
   PERFORMANCE MOBILE
------------------------------ */
@media (max-width: 768px) {
  .fr-premium-reveal {
    transition-duration: .45s !important;
    transition-delay: 0ms !important;
  }

  .fr-signature-track {
    animation-duration: 48s !important;
  }

  .fr-mosaic-card img,
  .fr-lookbook-card img,
  .fr-portfolio-card-img img,
  .fr-portfolio-hero-img img {
    transition-duration: .45s !important;
  }

  /* Evita efeitos hover “presos” em toque */
  .fr-portfolio-card-v9:hover,
  .fr-support-card:hover,
  .fr-lookbook-card:hover,
  .fr-mosaic-card:hover {
    transform: none !important;
  }

  .fr-portfolio-card-v9:hover img,
  .fr-lookbook-card:hover img,
  .fr-mosaic-card:hover img {
    transform: none !important;
  }
}


/* ==========================================================
   AJUSTE V15 — WHATSAPP FLUTUANTE RESTAURADO
   Mantém o botão flutuante do WhatsApp no site e remove apenas
   o CTA verde que ficava sobreposto aos cards/imagens do portfólio.
   ========================================================== */

.portfolio-whatsapp-cta,
.home-portfolio-grid .portfolio-whatsapp-cta,
#portfolio .portfolio-whatsapp-cta,
#portfolio-destaque .portfolio-whatsapp-cta {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Remove escurecimento/overlay residual causado pelo antigo CTA verde */
.portfolio-card::before,
.portfolio-card::after,
.fr-portfolio-card-v9::before,
.fr-portfolio-card-v9::after,
.home-portfolio-grid .portfolio-card::before,
.home-portfolio-grid .portfolio-card::after {
  pointer-events: none !important;
}

/* Garante que os botões reais dos cards fiquem clicáveis */
.fr-portfolio-card-actions,
.fr-portfolio-card-actions a,
.portfolio-card a,
.portfolio-card button,
.fr-card-btn {
  position: relative;
  z-index: 30;
  pointer-events: auto !important;
}

/* Mantém o botão flutuante do WhatsApp visível no site */
.floating-whatsapp-smart {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* No mobile, o botão flutuante fica menor para não cobrir botões de card */
@media (max-width: 640px) {
  .floating-whatsapp-smart {
    right: .85rem !important;
    bottom: .85rem !important;
    width: 54px !important;
    height: 54px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    justify-content: center !important;
    z-index: 9997 !important;
  }

  .floating-whatsapp-smart span:not(.float-icon) {
    display: none !important;
  }
}