/**
 * Componentes UI — Fortunna Lusitanos Theme
 *
 * Todos os componentes reutilizáveis do design system v5:
 *  - Navegação global (nav sticky, logo, links, mobile menu)
 *  - Footer (grid 4 colunas, social, copyright, assinatura MA Media)
 *  - Botões (champanhe, noir, ghost, outline — 2 tamanhos)
 *  - Eyebrow labels e tipografia de apoio
 *  - Cards (cavalos, artigos)
 *  - Badges de estado (disponível, reservado, vendido)
 *  - Paginação
 *  - Formulários (inputs, selects, checkboxes, textareas)
 *  - Trefoil SVG (ornamento de marca)
 *  - Section dividers
 *  - Reveal animations
 *  - Utilitários de spacing e display
 *
 * @package FortunnaLusitanosTheme
 * @since   1.0.0
 */

/* ════════════════════════════════════════════════════════════════════════════
   NAVEGAÇÃO GLOBAL
════════════════════════════════════════════════════════════════════════════ */

.nav {
    position:   fixed;
    top:        0;
    left:       0;
    right:      0;
    z-index:    var(--fl-z-nav);
    height:     var(--fl-nav-h);
    display:    flex;
    align-items: center;
    background: transparent;          /* explícito — evita herança acidental */
    backdrop-filter: none;
    transition: var(--fl-nav-transition);
}

/* Estado scrolled — fundo branco com blur */
.nav.is-scrolled {
    background:       var(--fl-nav-bg-scrolled);
    backdrop-filter:  var(--fl-nav-backdrop);
    -webkit-backdrop-filter: var(--fl-nav-backdrop);
    box-shadow:       var(--fl-nav-shadow);
}

/* Modo transparente: páginas com hero escuro (ex: ficha do cavalo).
   Activado via body[data-nav="transparent"] no PHP.
   Enquanto NÃO está scrolled, o nav fica sem fundo sobre a foto. */
/* Fundo noir no body — impede que o branco do body apareça atrás do nav transparente */
body.has-dark-hero {
    background: var(--fl-noir);
}

body.has-dark-hero .nav:not(.is-scrolled) {
    background:      transparent;
    backdrop-filter: none;
    box-shadow:      none;
}

.nav__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1.5rem;
    width:           100%;
    max-width:       var(--fl-max-w);
    margin-inline:   auto;
    padding-inline:  var(--fl-pad);
}

/* ── Logótipo ── */

.nav__logo {
    display:         flex;
    flex-direction:  column;
    gap:             3px;
    transition:      opacity var(--fl-transition);
    flex-shrink:     0;
    text-decoration: none;
}

.nav__logo:hover { opacity: .75; }

.nav__logo-img {
    max-height: 50px;
    width: auto;
    object-fit: contain;
}
@media (max-width: 768px) {
    .nav__logo-img { max-height: 38px; }
}

.nav__logo-name {
    font-family:    var(--fl-font-heading);
    font-size:      14px;
    font-weight:    600;
    letter-spacing: var(--fl-tracking-spread);
    text-transform: uppercase;
    color:          var(--fl-white);
    line-height:    1;
    transition:     color 0.5s;
}

.nav.is-scrolled .nav__logo-name { color: var(--fl-noir); }

.nav__logo-sub {
    font-family:    var(--fl-font-body);
    font-size:      11px;
    font-weight:    var(--fl-weight-light);
    letter-spacing: var(--fl-tracking-spread);
    text-transform: uppercase;
    color:          rgba(253, 252, 250, 0.60);
    transition:     color 0.5s;
}

.nav.is-scrolled .nav__logo-sub { color: var(--fl-stone); }

/* ── Links de navegação ── */

.nav__links {
    display: flex;
    gap:     2.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav__link {
    font-family:    var(--fl-font-body);
    font-size:      10.5px;
    font-weight:    var(--fl-weight-light);
    letter-spacing: var(--fl-tracking-ultra);
    text-transform: uppercase;
    color:          rgba(253, 252, 250, 0.68);
    transition:     color var(--fl-transition);
    position:       relative;
    text-decoration: none;
}

.nav.is-scrolled .nav__link  { color: rgba(20, 18, 16, 0.6); }
.nav__link:hover              { color: var(--fl-champagne); }
.nav.is-scrolled .nav__link:hover { color: var(--fl-noir); }

/* Underline animado */
.nav__link::after {
    content:          '';
    position:         absolute;
    bottom:           -3px;
    left:             0;
    width:            0;
    height:           1px;
    background:       var(--fl-champagne);
    transition:       width 0.32s var(--fl-ease);
}

.nav__link:hover::after,
.nav__link.is-active::after { width: 100%; }

/* ── Área direita da nav ── */

.nav__right {
    display:     flex;
    align-items: center;
    gap:         1.75rem;
}

/* ── Seletor de idioma (1.7.0) ──────────────────────────────────────────
   .fl-lang  → botão compacto (globo + "EN") com lista suspensa
   .fl-langs → códigos em linha (PT · EN · FR · DE) — desktop opcional e mobile
   Cores: claras sobre o hero (nav transparente), escuras com .is-scrolled. */

.nav__langs {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
}

.fl-lang {
    position: relative;
}

.fl-lang__btn {
    display:         inline-flex;
    align-items:     center;
    gap:             0.45rem;
    padding:         0.5rem 0.15rem;
    font-family:     var(--fl-font-heading);
    font-size:       11px;
    letter-spacing:  0.16em;
    line-height:     1;
    color:           rgba(253, 252, 250, 0.72);
    cursor:          pointer;
    list-style:      none;
    user-select:     none;
    transition:      color var(--fl-transition);
}
.fl-lang__btn::-webkit-details-marker { display: none; }
.fl-lang__btn::marker                 { content: ''; }

.fl-lang__btn:hover,
.fl-lang[open] .fl-lang__btn        { color: var(--fl-champagne); }
.nav.is-scrolled .fl-lang__btn      { color: rgba(20, 18, 16, 0.65); }
.nav.is-scrolled .fl-lang__btn:hover,
.nav.is-scrolled .fl-lang[open] .fl-lang__btn { color: var(--fl-noir); }

.fl-lang__btn:focus-visible {
    outline:        1px solid var(--fl-champagne);
    outline-offset: 4px;
}

.fl-lang__globe { flex-shrink: 0; opacity: 0.85; }

.fl-lang__chev {
    width:        5px;
    height:       5px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform:    translateY(-2px) rotate(45deg);
    transition:   transform 0.3s var(--fl-ease);
}
.fl-lang[open] .fl-lang__chev { transform: translateY(1px) rotate(-135deg); }

.fl-lang__menu {
    position:    absolute;
    top:         calc(100% + 0.9rem);
    right:       -0.75rem;
    min-width:   190px;
    margin:      0;
    padding:     0.45rem 0;
    list-style:  none;
    background:  var(--fl-noir);
    text-align:  left;
    border:      1px solid var(--fl-champagne-border-lt);
    box-shadow:  0 18px 40px rgba(20, 18, 16, 0.28);
    z-index:     calc(var(--fl-z-nav) + 1);
    animation:   fl-lang-in 0.32s var(--fl-ease);
}
/* Seta a ligar a lista ao botão */
.fl-lang__menu::before {
    content:      '';
    position:     absolute;
    top:          -5px;
    right:        1.5rem;
    width:        9px;
    height:       9px;
    background:   var(--fl-noir);
    border-left:  1px solid var(--fl-champagne-border-lt);
    border-top:   1px solid var(--fl-champagne-border-lt);
    transform:    rotate(45deg);
}

.fl-lang__menu li { margin: 0; }

@keyframes fl-lang-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.fl-lang__opt {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1.5rem;
    padding:         0.7rem 1.25rem;
    font-family:     var(--fl-font-body);
    font-size:       13px;
    letter-spacing:  0.04em;
    color:           rgba(253, 252, 250, 0.78);
    text-decoration: none;
    transition:      color var(--fl-transition), background var(--fl-transition);
}
a.fl-lang__opt:hover,
a.fl-lang__opt:focus-visible {
    color:      var(--fl-white);
    background: rgba(216, 202, 175, 0.08);
    outline:    none;
}
.fl-lang__opt--current         { color: var(--fl-champagne); cursor: default; }
.fl-lang__opt--current .fl-lang__opt__name::before {
    content:       '';
    display:       inline-block;
    width:         4px;
    height:        4px;
    margin-right:  0.6rem;
    border-radius: 50%;
    background:    var(--fl-champagne);
    vertical-align: middle;
}

.fl-lang__opt__code {
    font-family:    var(--fl-font-heading);
    font-size:      10px;
    letter-spacing: 0.16em;
    color:          rgba(216, 202, 175, 0.55);
}

/* Códigos em linha */
.fl-langs {
    display:     flex;
    align-items: center;
    margin:      0;
    padding:     0;
    list-style:  none;
}
.fl-langs li {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
    margin:      0;
    white-space: nowrap;
}
.fl-langs li + li::before {
    content:    '';
    display:    inline-block;
    width:      1px;
    height:     9px;
    margin:     0 0.6rem;
    background: rgba(253, 252, 250, 0.22);
    vertical-align: middle;
}
.nav.is-scrolled .fl-langs li + li::before { background: var(--fl-linen); }

.fl-langs__item {
    position:        relative;
    font-family:     var(--fl-font-heading);
    font-size:       11px;
    letter-spacing:  0.16em;
    line-height:     1;
    color:           rgba(253, 252, 250, 0.55);
    text-decoration: none;
    padding:         0.4rem 0;
    transition:      color var(--fl-transition);
}
a.fl-langs__item:hover          { color: var(--fl-champagne); }
.fl-langs__item--current        { color: var(--fl-champagne); }
.fl-langs__item--current::after {
    content:    '';
    position:   absolute;
    left:       0;
    right:      0.16em; /* compensa o letter-spacing */
    bottom:     0;
    height:     1px;
    background: currentColor;
}
.nav.is-scrolled .fl-langs__item         { color: var(--fl-stone); }
.nav.is-scrolled a.fl-langs__item:hover,
.nav.is-scrolled .fl-langs__item--current { color: var(--fl-noir); }

@media (prefers-reduced-motion: reduce) {
    .fl-lang__menu, .fl-lang__chev { animation: none; transition: none; }
}


/* CTA da nav */
.nav__cta {
    font-family:    var(--fl-font-heading);
    font-size:      var(--fl-btn-font-size);
    font-weight:    400;
    letter-spacing: var(--fl-btn-letter-spacing);
    text-transform: uppercase;
    padding:        0.55rem 1.4rem;
    border:         1.5px solid var(--fl-champagne-border);
    color:          var(--fl-champagne);
    transition:     all var(--fl-transition);
    text-decoration: none;
    display:        inline-block;
}

.nav.is-scrolled .nav__cta  { color: rgba(20, 18, 16, 0.7); }
.nav__cta:hover {
    background:    var(--fl-champagne);
    color:         var(--fl-noir);
    border-color:  var(--fl-champagne);
}

/* ── Burger (mobile) ── */

.nav__burger {
    display:         none;
    flex-direction:  column;
    gap:             5px;
    padding:         4px;
    background:      none;
    border:          none;
    cursor:          pointer;
}

.nav__burger span {
    display:    block;
    height:     1px;
    background: var(--fl-white);
    transition: background 0.5s;
}

.nav__burger span:nth-child(1) { width: 22px; }
.nav__burger span:nth-child(2) { width: 14px; }

.nav.is-scrolled .nav__burger span { background: var(--fl-noir); }

/* ── Compensação Admin Bar WordPress ─────────────────────────────────────── */
/* WordPress injécta html { margin-top: 32px } quando admin bar está visível. */
/* O nav fixo precisa de compensar esse offset para não ficar por baixo da bar. */

.admin-bar .nav {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .nav { top: 46px; }
}

/* Variável dinâmica — usada em calc() nos heróis */
.admin-bar                          { --fl-admin-bar-h: 32px; }
@media screen and (max-width: 782px) {
    .admin-bar                      { --fl-admin-bar-h: 46px; }
}


/* ════════════════════════════════════════════════════════════════════════════
   MOBILE MENU (overlay)
════════════════════════════════════════════════════════════════════════════ */

.mmenu {
    position:        fixed;
    inset:           0;
    background:      var(--fl-noir);
    z-index:         var(--fl-z-mmenu);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    justify-content: safe center; /* 1.7.0: em ecrãs baixos rola em vez de cortar */
    gap:             1.75rem;
    overflow-y:      auto;
    padding-block:   4.5rem 2.5rem;
    opacity:         0;
    pointer-events:  none;
    visibility:      hidden; /* fora do Tab e dos leitores de ecrã quando fechado */
    transition:      opacity 0.45s var(--fl-ease), visibility 0s linear 0.45s;
}

.mmenu.is-open {
    opacity:        1;
    pointer-events: all;
    visibility:     visible;
    transition:     opacity 0.45s var(--fl-ease);
}

.mmenu__close {
    position:       absolute;
    top:            1.75rem;
    right:          var(--fl-pad);
    font-family:    var(--fl-font-heading);
    font-size:      12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          rgba(253, 252, 250, 0.55);
    cursor:         pointer;
    transition:     color var(--fl-transition);
    background:     none;
    border:         none;
}
.mmenu__close:hover { color: var(--fl-champagne); }

.mmenu__link {
    font-family:    var(--fl-font-heading);
    font-size:      clamp(1.8rem, 6.5vw, 2.8rem);
    font-weight:    600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--fl-white);
    transition:     color var(--fl-transition);
    text-decoration: none;
}
.mmenu__link:hover { color: var(--fl-champagne); }

.mmenu__langs {
    margin-top:  1.25rem;
    padding-top: 1.5rem;
    border-top:  1px solid rgba(216, 202, 175, 0.18);
}

.fl-langs--mobile li + li::before {
    height: 12px;
    margin: 0 1rem;
    background: rgba(253, 252, 250, 0.18);
}

.fl-langs--mobile .fl-langs__item {
    display:   inline-block;
    font-size: 13px;
    padding:   0.75rem 0.35rem; /* área de toque ≥ 40px */
    color:     rgba(253, 252, 250, 0.55);
}
.fl-langs--mobile .fl-langs__item--current::after { left: 0.35rem; right: calc(0.35rem + 0.16em); bottom: 0.45rem; }

/* ════════════════════════════════════════════════════════════════════════════
   FOOTER (1.5.8 — minimal centrado)
   1. Faixa de convite  2. Marca · menu · contactos · redes  3. Base + craft by
════════════════════════════════════════════════════════════════════════════ */

.site-footer {
    background: var(--fl-noir);
    color:      var(--fl-footer-link-color);
    border-top: 1px solid var(--fl-footer-border);
}

/* ── 1. Faixa de convite ── */

.footer__cta {
    border-bottom: 1px solid var(--fl-footer-border);
}

.footer__cta-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             2rem;
    padding-block:   clamp(2.5rem, 5vw, 3.75rem);
}

.footer__cta-eyebrow {
    margin:         0 0 .6rem;
    font-family:    var(--fl-font-heading);
    font-size:      11px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color:          var(--fl-champagne);
}

.footer__cta-title {
    margin:         0;
    font-family:    var(--fl-font-heading);
    font-size:      clamp(1.4rem, 2.6vw, 2.1rem);
    font-weight:    400;
    letter-spacing: .03em;
    line-height:    1.15;
    color:          var(--fl-white);
}

.footer__cta-btn { flex-shrink: 0; }

/* ── 2. Bloco central ── */

.footer__main {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            1.75rem;
    padding-block:  clamp(3rem, 6vw, 4.5rem) clamp(2.25rem, 4vw, 3rem);
    text-align:     center;
}

.footer__brand {
    display:         inline-flex;
    flex-direction:  column;
    align-items:     center;
    text-decoration: none;
    transition:      opacity var(--fl-transition);
}
.footer__brand:hover { opacity: .75; }

.footer__logo-img {
    display:    block;
    width:      auto;
    max-width:  220px;
    max-height: 72px;
    object-fit: contain;
}

.footer__logo-name {
    font-family:    var(--fl-font-heading);
    font-size:      18px;
    font-weight:    600;
    letter-spacing: var(--fl-tracking-spread);
    text-transform: uppercase;
    color:          var(--fl-white);
}

/* Menu numa linha, separado por pontos champanhe */
.footer__menu {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             .5rem 0;
    margin:          0;
    padding:         0;
    list-style:      none;
}

.footer__menu li {
    display:     flex;
    align-items: center;
}

.footer__menu li + li::before {
    content:       '';
    width:         3px;
    height:        3px;
    margin-inline: 1.15rem;
    border-radius: 50%;
    background:    var(--fl-champagne);
    opacity:       .55;
}

.footer__menu a {
    font-family:     var(--fl-font-heading);
    font-size:       12px;
    letter-spacing:  .2em;
    text-transform:  uppercase;
    color:           var(--fl-white);
    text-decoration: none;
    transition:      color var(--fl-transition);
}
.footer__menu a:hover,
.footer__menu .current-menu-item > a { color: var(--fl-champagne); }

/* Contactos numa linha */
.footer__contact {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    align-items:     center;
    gap:             .4rem 0;
    font-family:     var(--fl-font-body);
    font-size:       14px;
    font-style:      normal;
    font-weight:     var(--fl-weight-light);
    color:           var(--fl-footer-link-color);
}
.footer__contact a {
    color:           inherit;
    text-decoration: none;
    border:          0;
    transition:      color var(--fl-transition);
}
.footer__contact a:hover { color: var(--fl-champagne); }

/* Separador ponto (contactos, legal, assinatura) */
.footer__dot {
    display:        inline-block;
    width:          3px;
    height:         3px;
    margin-inline:  .9rem;
    border-radius:  50%;
    background:     currentColor;
    opacity:        .45;
    vertical-align: middle;
}

/* Redes sociais */
.footer__social {
    display:         flex;
    justify-content: center;
    gap:             .75rem;
}

.footer__slink {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           38px;
    height:          38px;
    border:          1px solid rgba(216, 202, 175, .28);
    border-radius:   50%;
    color:           var(--fl-footer-link-color);
    transition:      border-color var(--fl-transition), color var(--fl-transition);
}
.footer__slink:hover {
    border-color: var(--fl-champagne);
    color:        var(--fl-champagne);
}
.footer__slink svg {
    width:  16px;
    height: 16px;
}

/* ── 3. Base ── */

.footer__bottom {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            .6rem;
    padding-block:  1.5rem clamp(1.75rem, 3vw, 2.25rem);
    border-top:     1px solid var(--fl-footer-border);
    text-align:     center;
}

.footer__legal,
.footer__sign {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: center;
    align-items:     center;
    margin:          0;
    font-family:     var(--fl-font-body);
    font-size:       12px;
    font-weight:     var(--fl-weight-light);
    letter-spacing:  .04em;
    color:           rgba(253, 252, 250, 0.55);
}

.footer__legal a {
    color:           inherit;
    text-decoration: none;
    transition:      color var(--fl-transition);
}
.footer__legal a:hover { color: var(--fl-champagne); }

.footer__badge {
    font-size:      11px;
    letter-spacing: .15em;
    white-space:    nowrap;
}

/* Assinatura MA Media — "craft by" */
.footer__ma-signature {
    display:     inline-flex;
    align-items: center;
    gap:         0.4rem;
    font-size:   10px;
    white-space: nowrap;
}
.footer__ma-signature img {
    display:        inline-block;
    vertical-align: middle;
    flex-shrink:    0;
}
.footer__ma-signature a {
    color:      inherit;
    transition: opacity var(--fl-transition);
}
.footer__ma-signature a:hover { opacity: 0.6; }

/* Copyright longo: em ecrãs médios fica numa linha e os links legais na seguinte */
@media (max-width: 1100px) {
    .footer__legal > span:first-child { flex-basis: 100%; margin-bottom: .35rem; }
    .footer__dot--lead { display: none; }
}

@media (max-width: 768px) {
    .footer__cta-inner {
        flex-direction: column;
        text-align:     center;
    }
}

@media (max-width: 560px) {
    /* Menu e contactos em coluna: sem pontos */
    .footer__menu,
    .footer__contact { flex-direction: column; align-items: center; gap: .7rem; }
    .footer__menu li + li::before,
    .footer__contact .footer__dot { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   BOTÕES
════════════════════════════════════════════════════════════════════════════ */

.btn {
    display:         inline-flex;
    align-items:     center;
    gap:             0.65rem;
    font-family:     var(--fl-font-heading);
    font-size:       var(--fl-btn-font-size);
    font-weight:     400;
    letter-spacing:  var(--fl-btn-letter-spacing);
    text-transform:  uppercase;
    padding:         var(--fl-btn-padding-y) var(--fl-btn-padding-x);
    transition:      var(--fl-btn-transition);
    white-space:     nowrap;
    text-decoration: none;
    cursor:          pointer;
    border:          none;
    line-height:     1;
}

/* Ícone SVG inline */
.btn svg {
    width:           13px;
    height:          13px;
    flex-shrink:     0;
    fill:            none;
    stroke:          currentColor;
    stroke-width:    1.5;
    stroke-linecap:  round;
    transition:      transform 0.3s var(--fl-ease);
}

.btn:hover svg { transform: translateX(5px); }

/* Seta sem SVG (texto) */
.btn--arrow::after {
    content:    '→';
    transition: transform 0.3s var(--fl-ease), margin-left 0.3s var(--fl-ease);
    display:    inline-block;
}

.btn--arrow:hover::after { transform: translateX(5px); }

/* ── Variantes de botão ── */

/* Champanhe — CTA principal */
.btn-champ {
    background:   var(--fl-champagne);
    color:        var(--fl-noir);
    border:       var(--fl-btn-border-width) solid var(--fl-champagne);
}
.btn-champ:hover {
    background:   #C4B596;
    border-color: #C4B596;
    color:        var(--fl-noir);
}

/* Noir — CTA secundário */
.btn-noir {
    background:  var(--fl-noir);
    color:       var(--fl-white);
    border:      var(--fl-btn-border-width) solid var(--fl-noir);
}
.btn-noir:hover {
    background:  var(--fl-noir-mid);
    border-color: var(--fl-noir-mid);
}

/* Ghost sobre fundo escuro */
.btn-ghost {
    background:  transparent;
    color:       rgba(253, 252, 250, 0.72);
    border:      var(--fl-btn-border-width) solid rgba(253, 252, 250, 0.22);
}
.btn-ghost:hover {
    border-color: rgba(253, 252, 250, 0.55);
    color:        var(--fl-white);
}

/* Outline sobre fundo claro */
.btn-outline {
    background:  transparent;
    color:       var(--fl-noir);
    border:      var(--fl-btn-border-width) solid rgba(20, 18, 16, 0.25);
}
.btn-outline:hover {
    background:  var(--fl-noir);
    color:       var(--fl-white);
    border-color: var(--fl-noir);
}

/* ── Tamanhos ── */

.btn-sm {
    font-size:  var(--fl-btn-font-size-sm);
    padding:    var(--fl-btn-padding-y-sm) var(--fl-btn-padding-x-sm);
}

.btn-full { width: 100%; justify-content: center; }

/* ── Estado desactivado ── */

.btn:disabled,
.btn[disabled] {
    opacity:        0.45;
    cursor:         not-allowed;
    pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   EYEBROW LABELS — tipografia de apoio
════════════════════════════════════════════════════════════════════════════ */

.fl-eyebrow {
    font-family:    var(--fl-font-heading);
    font-size:      var(--fl-eyebrow-size);
    font-weight:    400;
    letter-spacing: var(--fl-eyebrow-tracking);
    text-transform: uppercase;
    color:          var(--fl-eyebrow-color);
    filter:         brightness(0.82);
    display:        block;
}

.fl-eyebrow--white { color: rgba(216, 202, 175, 0.70); filter: none; }
.fl-eyebrow--dark  { color: var(--fl-eyebrow-on-light); filter: none; } /* fundos claros — era 2,9:1 */
.fl-eyebrow--stone { color: var(--fl-stone); filter: none; }

/* ════════════════════════════════════════════════════════════════════════════
   TREFOIL SVG — ornamento de marca
════════════════════════════════════════════════════════════════════════════ */

.fl-trefoil { display: block; }
.fl-trefoil--sm { width: 32px; height: 32px; }
.fl-trefoil--md { width: 48px; height: 48px; }
.fl-trefoil--lg { width: 72px; height: 72px; }
.fl-trefoil--center { margin-inline: auto; }

/* ════════════════════════════════════════════════════════════════════════════
   SECTION DIVIDER com ornamento
════════════════════════════════════════════════════════════════════════════ */

.sec-div {
    display:     flex;
    align-items: center;
    gap:         1.25rem;
    margin:      var(--fl-divider-margin);
}

.sec-div__line {
    flex:       1;
    height:     1px;
    background: var(--fl-divider-color);
}

.sec-div__title {
    font-family:    var(--fl-font-heading);
    font-size:      10px;
    font-weight:    600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color:          var(--fl-noir);
    white-space:    nowrap;
}

.sec-div--white .sec-div__line  { background: rgba(253, 252, 250, 0.12); }
.sec-div--white .sec-div__title { color: rgba(253, 252, 250, 0.5); }

/* ════════════════════════════════════════════════════════════════════════════
   CARD DE CAVALO
════════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   HORSE CARD — baseado no mockup v5_Cavalos.html
   SOLUÇÃO DEFINITIVA para imagens:
     aspect-ratio:3/4 na própria <img>, não no container.
     height:100% nunca funciona em replaced elements (img) quando o
     pai tem apenas aspect-ratio sem height explícito (CSS spec §10.5).
     Com aspect-ratio + width:100% + height:auto na IMG, a imagem
     define a sua altura. O container acompanha. Simples e fiável.
═══════════════════════════════════════════════════════════ */

.hcard {
    background:     var(--fl-white);
    position:       relative;
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    border:         var(--fl-card-border);
    transition:     box-shadow .4s var(--fl-ease-soft),
                    transform  .4s var(--fl-ease),
                    border-color .35s;
    cursor:         pointer;
}

.hcard:hover {
    box-shadow:   0 8px 40px rgba(20,18,16,.1);
    transform:    translateY(-3px);
    border-color: var(--fl-champagne-border);
}

.hcard::before {
    content:          '';
    position:         absolute;
    top: 0; left: 0; right: 0;
    height:           2px;
    background:       var(--fl-champagne);
    z-index:          4;
    transform:        scaleX(0);
    transform-origin: left;
    transition:       transform .45s var(--fl-ease);
}
.hcard:hover::before { transform: scaleX(1); }

/* ── FOTO ── */

.hcard__photo {
    display:         block;        /* <a> ou <div> */
    position:        relative;
    overflow:        hidden;
    background:      var(--fl-noir);
    flex-shrink:     0;
    text-decoration: none;
    line-height:     0;            /* remove gap inline sob a imagem */
}

/* Se um plugin envolver a img em <a>/<figure>/<p> */
.hcard__photo > a,
.hcard__photo > figure,
.hcard__photo > p {
    display:     block;
    line-height: 0;
}

/*
 * aspect-ratio na <img> — NÃO no container.
 * width:100% + height:auto + aspect-ratio:3/4 → a img define a sua altura.
 * O container .hcard__photo acompanha (fluxo normal).
 * object-fit:cover garante o crop correcto.
 */
.hcard__photo img {
    display:         block;
    width:           100%;
    height:          auto;
    aspect-ratio:    3 / 4;
    object-fit:      cover;
    object-position: center;
    transition:      transform .8s var(--fl-ease), filter .5s;
    filter:          var(--fl-img-filter-card);
}

.hcard:hover .hcard__photo img {
    transform: scale(1.05);
    filter:    var(--fl-img-filter-hover);
}

/* <picture> do cartão (1.5.10) — imagem de computador + telemóvel */
.hcard__picture { display: block; }

/* Telemóvel (cartão a toda a largura): 4:5 em vez de 3:4 — menos alto.
   A imagem "Telemóvel" do cavalo deve vir já em 4:5, com a cabeça ao centro. */
@media (max-width: 640px) {
    .hcard__photo img { aspect-ratio: 4 / 5; }
}

/* Overlay gradiente */
.hcard__photo-overlay {
    position:       absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:     linear-gradient(to top, rgba(20,18,16,.75) 0%, rgba(20,18,16,.05) 45%, transparent 100%);
    z-index:        1;
    pointer-events: none;
}

/* ── Etiquetas sobre a foto (1.5.7) ──
   Placa noir única que agrupa estado + Reprodutor(a): um só bloco no canto,
   linhas separadas por um filete champanhe. A cor do estado fica só no ponto.
   line-height explícito: .hcard__photo tem line-height:0 (gap da img) e as
   etiquetas herdavam-no — ficavam com 13px de altura e sem margem. */
.fl-tags {
    position:        absolute;
    top:             1rem;
    left:            1rem;
    z-index:         3;
    display:         inline-flex;
    flex-direction:  column;
    align-items:     flex-start;
    max-width:       calc(100% - 4.5rem);   /* não toca na seta (34px + 1rem) */
    padding:         .55rem .8rem;
    background:      var(--fl-tag-bg);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    line-height:     1.25;
    pointer-events:  none;
}

.fl-tag {
    display:        flex;
    align-items:    center;
    gap:            .55rem;
    font-family:    var(--fl-font-heading);
    font-size:      10px;
    font-weight:    400;
    letter-spacing: .16em;
    text-transform: uppercase;
    color:          var(--fl-tag-color);
    white-space:    nowrap;
}

/* 2.ª etiqueta em diante: filete por cima, mesma placa */
.fl-tag + .fl-tag {
    align-self:  stretch;
    margin-top:  .45rem;
    padding-top: .45rem;
    border-top:  1px solid var(--fl-tag-rule);
}

.fl-tag__dot {
    flex-shrink:   0;
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    var(--fl-tag-dot, currentColor);
}

.fl-tag--avail  { --fl-tag-dot: var(--fl-tag-avail); }
.fl-tag--reserv { --fl-tag-dot: var(--fl-tag-reserv); }
.fl-tag--sold   { --fl-tag-dot: var(--fl-tag-sold); }
.fl-tag--own    { --fl-tag-dot: var(--fl-tag-own); }
.fl-tag--prep   { --fl-tag-dot: var(--fl-tag-prep); }

/* Reprodutor(a): anel champanhe em vez de ponto cheio — é uma qualidade, não um estado */
.fl-tag--repro .fl-tag__dot {
    background: transparent;
    border:     1px solid var(--fl-tag-own);
}

/* Variante ficha do cavalo (hero): em linha, fora da foto do cartão */
.fl-tags--hero {
    position:       static;
    flex-direction: row;
    align-items:    center;
    max-width:      none;
    margin-bottom:  1rem;
    padding:        .5rem .95rem;
}
.fl-tags--hero .fl-tag { font-size: 11px; letter-spacing: .2em; }
.fl-tags--hero .fl-tag + .fl-tag {
    align-self:   auto;
    margin:       0 0 0 .9rem;
    padding:      0 0 0 .9rem;
    border-top:   0;
    border-left:  1px solid var(--fl-tag-rule);
}

/* Classes antigas (blocos ≤ 1.1.27, child themes): mesmo visual, uma etiqueta */
.hcard__status,
.hcard__repro {
    position:       absolute;
    top:            1rem;
    left:           1rem;
    z-index:        3;
    font-family:    var(--fl-font-heading);
    font-size:      10px;
    font-weight:    400;
    letter-spacing: .16em;
    line-height:    1.25;
    text-transform: uppercase;
    padding:        .45rem .8rem;
    background:     var(--fl-tag-bg);
    color:          var(--fl-tag-color);
    border:         0;
}
.hcard__repro { top: 3.2rem; }

/* Seta no canto */
.hcard__arrow {
    position:        absolute;
    top:             1rem;
    right:           1rem;
    z-index:         3;
    width:           34px;
    height:          34px;
    border-radius:   50%;
    border:          1px solid rgba(216,202,175,.4);
    display:         flex;
    align-items:     center;
    justify-content: center;
    opacity:         0;
    transition:      opacity .3s, background .3s;
    text-decoration: none;
    background:      transparent;
}
.hcard:hover .hcard__arrow     { opacity: 1; }
.hcard__arrow:hover             { background: var(--fl-champagne); border-color: var(--fl-champagne); }
.hcard__arrow svg               { width: 12px; height: 12px; stroke: var(--fl-champagne); fill: none; stroke-width: 1.5; stroke-linecap: round; transition: stroke .3s; }
.hcard__arrow:hover svg         { stroke: var(--fl-noir); }

/* Info flutuante */
.hcard__photo-info {
    position: absolute;
    bottom:   0; left: 0; right: 0;
    padding:  1.2rem 1.25rem .9rem;
    z-index:  2;
}

.hcard__breed {
    font-family:    var(--fl-font-body);
    font-size:      10px;
    font-weight:    400;
    letter-spacing: .18em;
    text-transform: uppercase;
    color:          rgba(216,202,175,.85);
}

.hcard__name {
    font-family:    var(--fl-font-heading);
    font-size:      clamp(1.15rem, 1.8vw, 1.55rem);
    font-weight:    600;
    color:          var(--fl-white);
    line-height:    1.05;
    margin-top:     .2rem;
    letter-spacing: var(--fl-tracking-heading);
}

/* Body do card */
.hcard__body {
    padding:     1.2rem 1.25rem 1.4rem;
    border-top:  var(--fl-border);
    display:     flex;
    flex-direction: column;
    flex:        1;
}

/* Meta row */
.hcard__meta {
    display:       flex;
    flex-wrap:     wrap;
    gap:           0;
    margin-bottom: 1rem;
}

.hcard__meta-item {
    flex:          1;
    display:       flex;
    flex-direction: column;
    gap:           0.25rem;
    padding-right: 1rem;
    border-right:  var(--fl-border);
}

.hcard__meta-item:last-child  { border-right: none; padding-right: 0; padding-left: 1rem; flex: unset; }
.hcard__meta-item:first-child { padding-left: 0; }

.hcard__meta-label {
    font-family:    var(--fl-font-heading);
    font-size:      10px;
    font-weight:    400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--fl-noir-light);
}

.hcard__meta-val {
    font-family: var(--fl-font-body);
    font-size:   14px;
    font-weight: 400;
    color:       var(--fl-noir);
}

/* Nível badge */
.hcard__level {
    display:        inline-block;
    font-family:    var(--fl-font-heading);
    font-size:      10px;
    font-weight:    400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding:        0.3rem 0.85rem;
    background:     var(--fl-champagne-pale);
    color:          var(--fl-noir-light);
    border:         1px solid var(--fl-champagne-border);
    margin-bottom:  1rem;
}

/* Rodapé do card */
.hcard__footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-top:      auto;
}

.hcard__cta {
    font-family:    var(--fl-font-heading);
    font-size:      11px;
    font-weight:    400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    display:        inline-flex;
    align-items:    center;
    gap:            0.45rem;
    color:          var(--fl-noir);
    transition:     gap 0.3s, color 0.3s;
    text-decoration: none;
}

.hcard__cta::after { content: '→'; transition: transform 0.3s; }
.hcard:hover .hcard__cta { color: var(--fl-noir); gap: 0.7rem; }

.hcard__pedigree {
    font-family:   var(--fl-font-body);
    font-size:     11px;
    font-weight:   var(--fl-weight-light);
    font-style:    italic;
    color:         var(--fl-noir-light);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    max-width:     55%;
}

/* ════════════════════════════════════════════════════════════════════════════
   CARD DE ARTIGO (blogue)
════════════════════════════════════════════════════════════════════════════ */

.acard {
    background:     var(--fl-white);
    border:         var(--fl-card-border);
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    transition:     border-color 0.35s, box-shadow 0.35s, transform 0.35s var(--fl-ease);
}

.acard:hover {
    border-color: var(--fl-champagne-border);
    box-shadow:   var(--fl-shadow-lg);
    transform:    translateY(-3px);
}

.acard__photo {
    position:   relative;
    overflow:   hidden;
    background: var(--fl-noir);
}

.acard__photo img {
    filter:     var(--fl-img-filter-card);
    transition: transform 0.7s var(--fl-ease);
    aspect-ratio: 16/10;
}

.acard:hover .acard__photo img { transform: scale(1.05); filter: var(--fl-img-filter-hover); }

/* Inset frame */
.acard__photo::after {
    content:      '';
    position:     absolute;
    inset:        8px;
    border:       1px solid rgba(216, 202, 175, 0.22);
    z-index:      2;
    pointer-events: none;
    transition:   border-color 0.3s;
}

.acard:hover .acard__photo::after { border-color: rgba(216, 202, 175, 0.45); }

/* Badge de categoria sobre foto */
.acard__cat-badge {
    position:       absolute;
    bottom:         0.85rem;
    left:           0.9rem;
    z-index:        3;
    font-family:    var(--fl-font-heading);
    font-size:      11px;
    font-weight:    400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding:        0.32rem 0.85rem;
    color:          var(--fl-noir);
}

.acard__cat-badge--criacao   { background: var(--fl-champagne); }
.acard__cat-badge--treino    { background: rgba(216,202,175,.82); }
.acard__cat-badge--eventos   { background: rgba(176,168,152,.9); color: var(--fl-white); }
.acard__cat-badge--coudelaria{ background: rgba(68,61,53,.9); color: var(--fl-champagne); }
.acard__cat-badge--psl       { background: rgba(20,18,16,.85); color: var(--fl-champagne); }

.acard__body {
    padding:        1.5rem 1.5rem 1.75rem;
    display:        flex;
    flex-direction: column;
    flex:           1;
}

.acard__meta {
    display:       flex;
    align-items:   center;
    gap:           0.75rem;
    margin-bottom: 0.85rem;
}

.acard__date,
.acard__read {
    font-family:  var(--fl-font-body);
    font-size:    11px;
    font-weight:  var(--fl-weight-light);
    color:        var(--fl-stone);
}

.acard__dot {
    width:         2px;
    height:        2px;
    border-radius: 50%;
    background:    var(--fl-stone);
    flex-shrink:   0;
}

.acard__title {
    font-family:    var(--fl-font-heading);
    font-size:      clamp(0.95rem, 1.4vw, 1.15rem);
    font-weight:    600;
    color:          var(--fl-noir);
    letter-spacing: 0.03em;
    line-height:    var(--fl-leading-snug);
    margin-bottom:  0.85rem;
}

.acard__title a { transition: color var(--fl-transition); text-decoration: none; color: inherit; }
.acard__title a:hover { color: var(--fl-noir-light); }

.acard__excerpt {
    font-family:   var(--fl-font-body);
    font-size:     13.5px;
    font-weight:   var(--fl-weight-light);
    color:         rgba(20, 18, 16, 0.68); /* era .58 (4,5:1 com peso 300) */
    line-height:   var(--fl-leading-relaxed);
    flex:          1;
    margin-bottom: 1.25rem;
}

.acard__footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding-top:     1.1rem;
    border-top:      var(--fl-border);
}

.acard__link {
    font-family:    var(--fl-font-heading);
    font-size:      11px;
    font-weight:    400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color:          var(--fl-noir-light);
    filter:         brightness(0.82);
    display:        inline-flex;
    align-items:    center;
    gap:            0.35rem;
    transition:     gap 0.3s, filter 0.3s;
    text-decoration: none;
}

.acard__link::after { content: '→'; }
.acard:hover .acard__link { gap: 0.65rem; filter: brightness(1); }

/* ════════════════════════════════════════════════════════════════════════════
   PAGINAÇÃO
════════════════════════════════════════════════════════════════════════════ */

.pagination {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0.35rem;
    padding-block:   clamp(2.5rem, 5vw, 4rem);
}

.pag-btn {
    font-family:     var(--fl-font-heading);
    font-size:       11px;
    font-weight:     400;
    letter-spacing:  0.10em;
    width:           var(--fl-pag-btn-size);
    height:          var(--fl-pag-btn-size);
    display:         flex;
    align-items:     center;
    justify-content: center;
    border:          var(--fl-pag-btn-border);
    color:           var(--fl-stone);
    transition:      all 0.25s var(--fl-ease-soft);
    text-decoration: none;
    background:      transparent;
    cursor:          pointer;
}

.pag-btn:hover { border-color: var(--fl-champagne-border); color: var(--fl-noir); }

.pag-btn.active,
.pag-btn[aria-current="page"] {
    background:  var(--fl-noir);
    color:       var(--fl-white);
    border-color: var(--fl-noir);
}

.pag-btn.arrow { font-size: 12px; }
.pag-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; }

.pag-sep {
    font-family: var(--fl-font-body);
    font-size:   13px;
    color:       var(--fl-stone);
    padding:     0 0.3rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   FORMULÁRIOS
════════════════════════════════════════════════════════════════════════════ */

.fl-field {
    display:        flex;
    flex-direction: column;
    gap:            0.45rem;
    margin-bottom:  1.35rem;
}

.fl-field:last-child { margin-bottom: 0.4rem; }

.fl-label {
    font-family:    var(--fl-font-heading);
    font-size:      11px;
    font-weight:    400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color:          var(--fl-noir-light);
    display:        flex;
    align-items:    center;
    gap:            0.4rem;
}

.fl-required { color: var(--fl-champagne); filter: brightness(0.82); }

.fl-input,
.fl-textarea,
.fl-select {
    font-family:   var(--fl-font-body);
    font-size:     var(--fl-input-font-size);
    font-weight:   var(--fl-weight-light);
    color:         var(--fl-noir);
    background:    transparent;
    border:        none;
    border-bottom: var(--fl-input-border);
    padding:       var(--fl-input-padding);
    width:         100%;
    transition:    var(--fl-input-transition);
    outline:       none;
    -webkit-appearance: none;
    appearance:    none;
    border-radius: 0;
}

.fl-input::placeholder,
.fl-textarea::placeholder { color: var(--fl-stone-dim); }

.fl-input:focus-visible,
.fl-textarea:focus-visible,
.fl-select:focus-visible {
    outline:        2px solid var(--fl-noir);
    outline-offset: 2px;
}

.fl-input:focus,
.fl-textarea:focus,
.fl-select:focus {
    border-bottom-color: var(--fl-champagne);
    box-shadow:          0 2px 0 -1px var(--fl-champagne-pale);
}

.fl-input.has-error,
.fl-textarea.has-error { border-bottom-color: var(--fl-error); }

.fl-textarea { resize: none; min-height: 110px; line-height: var(--fl-leading-relaxed); }

/* Select */
.fl-select-wrap { position: relative; }

.fl-select-wrap::after {
    content:        '';
    position:       absolute;
    right:          0;
    top:            50%;
    transform:      translateY(-50%);
    width:          7px;
    height:         4px;
    background:     var(--fl-stone);
    clip-path:      polygon(0 0, 100% 0, 50% 100%);
    pointer-events: none;
    transition:     background var(--fl-transition);
}

.fl-select-wrap:focus-within::after { background: var(--fl-noir); }

/* Checkbox */
.fl-check {
    display:     flex;
    align-items: flex-start;
    gap:         0.75rem;
    cursor:      pointer;
}

.fl-check input[type="checkbox"] {
    width:        16px;
    height:       16px;
    flex-shrink:  0;
    margin-top:   0.1em;
    accent-color: var(--fl-noir);
    cursor:       pointer;
}

.fl-check-text {
    font-family:  var(--fl-font-body);
    font-size:    12px;
    font-weight:  var(--fl-weight-light);
    color:        rgba(20, 18, 16, 0.68); /* era .55 (4,1:1) */
    line-height:  var(--fl-leading-relaxed);
}

.fl-field-error {
    font-family:  var(--fl-font-body);
    font-size:    11px;
    font-weight:  var(--fl-weight-light);
    color:        var(--fl-error);
    display:      none;
}

.fl-field-error.is-visible { display: block; }

/* Formulário de pesquisa */
.search-form {
    display: flex;
    border-bottom: 1px solid rgba(253,252,250,.35);
}

.search-form__input {
    flex:          1;
    font-family:   var(--fl-font-body);
    font-size:     13px;
    font-weight:   var(--fl-weight-light);
    color:         var(--fl-white);
    background:    transparent;
    border:        none;
    padding:       0.6rem 0; /* foco: anel global :focus-visible (fundo escuro) */
}

.search-form__input::placeholder { color: rgba(253,252,250,.30); }

.search-form__btn {
    display:    flex;
    padding:    0;
    background: transparent;
    border:     none;
    cursor:     pointer;
    transition: opacity var(--fl-transition);
}

.search-form__btn:hover { opacity: 0.65; }

.search-form__btn svg {
    width:         15px;
    height:        15px;
    stroke:        rgba(253,252,250,.45);
    fill:          none;
    stroke-width:  1.5;
    stroke-linecap: round;
}

/* ════════════════════════════════════════════════════════════════════════════
   REVEAL ANIMATIONS
════════════════════════════════════════════════════════════════════════════ */

/* Só esconde quando há JS (classe fl-js posta no <html> em wp_head, ver
   functions.php). Sem JS, ou se o main.js falhar a carregar, o conteúdo
   fica visível em vez de ficar com opacity:0 para sempre. */
.fl-js .fl-reveal {
    opacity:    0;
    transform:  translateY(var(--fl-reveal-distance-y));
    transition: opacity   var(--fl-reveal-dur) var(--fl-reveal-ease),
                transform var(--fl-reveal-dur) var(--fl-reveal-ease);
}

.fl-js .fl-reveal.is-visible { opacity: 1; transform: none; }

.fl-js .fl-reveal--left  { transform: translateX(calc(-1 * var(--fl-reveal-distance-x))); }
.fl-js .fl-reveal--right { transform: translateX(var(--fl-reveal-distance-x)); }
.fl-js .fl-reveal--left.is-visible,
.fl-js .fl-reveal--right.is-visible { transform: none; }

/* Movimento reduzido: mostra logo, sem animação (antes estava em style.css,
   que carrega antes e por isso não tinha efeito) */
@media (prefers-reduced-motion: reduce) {
    .fl-js .fl-reveal,
    .fl-js .fl-reveal--left,
    .fl-js .fl-reveal--right { opacity: 1; transform: none; transition: none; }
}

.fl-reveal-d1 { transition-delay: var(--fl-delay-1); }
.fl-reveal-d2 { transition-delay: var(--fl-delay-2); }
.fl-reveal-d3 { transition-delay: var(--fl-delay-3); }
.fl-reveal-d4 { transition-delay: var(--fl-delay-4); }

/* ════════════════════════════════════════════════════════════════════════════
   UTILITÁRIOS — espaçamento, display, tipografia
════════════════════════════════════════════════════════════════════════════ */

/* Display */
.fl-hidden  { display: none !important; }
.fl-sr-only { clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

/* Flex */
.fl-flex         { display: flex; }
.fl-flex-center  { display: flex; align-items: center; justify-content: center; }
.fl-flex-between { display: flex; align-items: center; justify-content: space-between; }
.fl-flex-col     { display: flex; flex-direction: column; }
.fl-flex-wrap    { flex-wrap: wrap; }

/* Texto */
.fl-text-center { text-align: center; }
.fl-text-right  { text-align: right; }
.fl-text-left   { text-align: left; }

.fl-uppercase {
    font-family:    var(--fl-font-heading);
    letter-spacing: var(--fl-tracking-label);
    text-transform: uppercase;
}

/* Cor */
.fl-text-champagne { color: var(--fl-champagne); }
.fl-text-noir      { color: var(--fl-noir); }
.fl-text-white     { color: var(--fl-white); }
.fl-text-stone     { color: var(--fl-stone); }

.fl-bg-noir        { background: var(--fl-noir); }
.fl-bg-white       { background: var(--fl-white); }
.fl-bg-champagne   { background: var(--fl-champagne-bg); }
.fl-bg-linen       { background: var(--fl-linen); }
.fl-bg-off-white   { background: var(--fl-off-white); }

/* Espaçamento */
.fl-mb-0 { margin-bottom: 0 !important; }
.fl-mt-0 { margin-top:    0 !important; }

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE DOS COMPONENTES
════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .nav__links { display: none; }
    .nav__cta   { display: none; }
    .nav__burger { display: flex; }
}

@media (max-width: 768px) {
    .newsletter-band .newsletter__form { flex-direction: column; }
}

@media (max-width: 560px) {
    .btn { padding: 0.9rem 1.8rem; }
}


/* ── MA Settings: bloco "Informação MA Media" e atalhos (1.5.11) ──────────
   O plugin não traz estilos de frontend; aqui ficam no desenho da Fortunna. */
.mamedia-info-block {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
    font-family:    var(--fl-font-body);
    font-size:      15px;
    font-weight:    var(--fl-weight-light);
    color:          inherit;
}
.mamedia-info-block a,
.mamedia-phone-link,
.mamedia-email-link,
.mamedia-legal-link,
.mamedia-social-link {
    color:           inherit;
    text-decoration: none;
    border-bottom:   1px solid var(--fl-champagne-border);
    transition:      color var(--fl-transition), border-color var(--fl-transition);
}
.mamedia-info-block a:hover,
.mamedia-phone-link:hover,
.mamedia-email-link:hover,
.mamedia-legal-link:hover,
.mamedia-social-link:hover {
    color:        var(--fl-champagne);
    border-color: var(--fl-champagne);
}
.mamedia-info-social,
.mamedia-info-legal,
.mamedia-info-phones,
.mamedia-info-emails {
    display:   flex;
    flex-wrap: wrap;
    gap:       .5rem 1.5rem;
}
.mamedia-phone-label,
.mamedia-email-label {
    margin-right:   .5rem;
    font-family:    var(--fl-font-heading);
    font-size:      10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity:        .7;
}
.mamedia-info-address { font-style: normal; line-height: 1.7; }
.mamedia-info-map iframe { display: block; width: 100%; max-width: 100%; border: 0; }
.mamedia-info-block .mamedia-booking-btn,
.mamedia-booking-btn {
    display:         inline-block;
    padding:         .95rem 2rem;
    font-family:     var(--fl-font-heading);
    font-size:       10px;
    font-weight:     600;
    letter-spacing:  .22em;
    text-transform:  uppercase;
    color:           var(--fl-noir);
    background:      var(--fl-champagne);
    border:          1px solid var(--fl-champagne);
}
.mamedia-info-block .mamedia-booking-btn:hover,
.mamedia-booking-btn:hover { background: transparent; color: var(--fl-champagne); }
/* ── Plugin «Custo de Chamada»: legenda no rodapé e marcadores junto dos números ── */
.footer__custo-chamada { max-width: 60ch; }
.footer__custo-chamada .custo-chamada { margin: 0; line-height: 1.5; }
.footer__custo-chamada .custo-chamada__legend {
    font-size:      11px;
    vertical-align: baseline;
    color:          rgba(253, 252, 250, 0.55);
}
.footer__contact sup,
.flb-contact-item__value sup { font-size: .65em; line-height: 0; }