/*!
 * AAL — adaptation layer over the Opklim template.
 *
 * Loaded LAST so it always wins. Two jobs:
 *
 *   1. Neutralise the template's overlap geometry. Several Opklim sections
 *      are built to be overlapped by the block that follows them
 *      (.cta-one has 455px of bottom padding and -375px of margin so a
 *      contact form can sit on top of it). We reuse those sections
 *      standalone, so that geometry has to be undone.
 *
 *   2. Add the few AAL-specific blocks the template has no equivalent for:
 *      the typographic logo, the ES/EN switcher, the figures band, the
 *      jurisdictions list and the placeholder body.
 *
 * The template's own palette was rebranded in place by _rebrand.py in this
 * directory: Opklim's red and gold both became AAL gold, its near-black
 * surfaces became AAL navy, and Oxygen became Poppins. Re-run that script
 * after replacing any template stylesheet; it skips this file.
 */

:root {
    --aal-navy: #18234d;
    --aal-navy-light: #273158;
    --aal-gold: #cba052;
    --aal-ink: #1f2430;
    --aal-muted: #5f6675;
    --aal-hairline: #e6e8ee;
}

/*
 * Line-height. The template sets `body { line-height: 26px }` — a fixed
 * pixel value, not a ratio — so every large text inherits a 26px leading
 * and the lines print on top of each other. Anything set above ~30px needs
 * its own ratio.
 */
h1,
h2,
h3,
h4,
h5,
h6,
.slider-one__title,
.block-title__title,
.cta-one__title,
.inner-banner__title,
.aal-stats__value {
    line-height: 1.18;
}

/*
 * Safety net for .sr-only. The template ships Bootstrap 4.3.1, which does
 * define it, but the class is one deprecation away from disappearing and
 * every skip-link on the site depends on it.
 */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ------------------------------------------------------------------
 * Logo — typographic lockup until Nyko delivers the AAL monogram SVG.
 * ------------------------------------------------------------------ */
.aal-logo {
    display: inline-block;
    line-height: 1;
    text-decoration: none;
}

.aal-logo__mark {
    display: block;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    transition: color 0.4s ease;
}

.aal-logo__name {
    display: block;
    margin-top: 6px;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.aal-logo:hover .aal-logo__mark {
    color: var(--aal-gold);
}

/* The sticky bar is white, so the lockup has to flip to navy there. */
.stricky-fixed .aal-logo__mark {
    color: var(--aal-navy);
}

.stricky-fixed .aal-logo__name {
    color: var(--aal-muted);
}

/* ------------------------------------------------------------------
 * Navigation.
 *
 * AAL has seven flat sections with long Spanish labels ("Estructuras
 * Internacionales"), where Opklim had six short English ones. At the
 * template's 16px bold the bar wrapped to a second line and dropped the
 * logo out of alignment, so the type comes down and the header gets a
 * wider container of its own.
 * ------------------------------------------------------------------ */
.site-header .container,
.topbar-one .container,
.topbar-two .container {
    max-width: 1560px;
}

.header-navigation ul.navigation-box > li {
    margin-left: 24px;
}

.header-navigation ul.navigation-box > li:first-child {
    margin-left: 0;
}

.header-navigation ul.navigation-box > li > a {
    font-size: 14px;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/*
 * The logo and the right-hand box are absolutely positioned, so the menu
 * has to reserve room for both with padding. Opklim reserved 565px on the
 * right of header-one for a phone plus a "book an appointment" button, and
 * only 88px on header-two for two icons. We carry the phone on both and no
 * button, so both numbers are wrong and the menu was landing on the logo.
 */
@media (min-width: 1200px) {
    /* header-one parks its logo at left:70px, header-two at left:15px. */
    .site-header__header-one .main-navigation {
        padding-left: 250px;
        padding-right: 220px;
    }

    .site-header__header-two .header-navigation .main-navigation {
        padding-left: 195px;
        padding-right: 265px;
    }
}

/* With the phone hidden, the menu takes back the right-hand room. */
@media (max-width: 1499px) {
    .site-header__header-one .main-navigation,
    .site-header__header-two .header-navigation .main-navigation {
        padding-right: 30px;
    }
}

/* Interior header sits on white, so the lockup and the menu go navy. */
.site-header__header-two .aal-logo__mark {
    color: var(--aal-navy);
}

.site-header__header-two .aal-logo__name {
    color: var(--aal-muted);
}

.site-header__header-two .header-phone {
    color: var(--aal-navy);
}

.site-header__header-two .header-navigation ul.navigation-box > li,
.site-header__header-two .header-navigation ul.navigation-box > li + li {
    padding: 38px 0;
    margin-left: 24px;
}

.site-header__header-two .header-navigation ul.navigation-box > li > a {
    font-size: 14px;
}

/* topbar-two is white, so its contents need ink rather than white type. */
.topbar-two .aal-lang__link {
    color: var(--aal-ink);
}

.topbar-two__link {
    font-size: 13px;
}

/* Below this the phone competes with the menu for room; the menu wins. */
@media (max-width: 1499px) {
    .header-phone {
        display: none;
    }
}

/* ------------------------------------------------------------------
 * ES / EN switcher.
 * ------------------------------------------------------------------ */
.aal-lang {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 22px;
}

.aal-lang__link {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: inherit;
    opacity: 0.65;
    transition: all 0.4s ease;
}

.aal-lang__link:hover {
    opacity: 1;
    color: var(--aal-gold);
}

.aal-lang__link--active {
    opacity: 1;
    color: var(--aal-gold);
}

.aal-lang__sep {
    opacity: 0.35;
    font-size: 12px;
}

/* ------------------------------------------------------------------
 * Preloader — failsafe only. The effect itself is the template's and is
 * NOT modified: same white full-screen cover, same rotating icon, same
 * fadeOut from theme.js.
 *
 * What this adds is a way out. The overlay is `position: fixed` at
 * z-index 9999 over the whole page, and the only thing that removes it is
 * jQuery. If the scripts fail — blocked, a CDN-less network hiccup, a JS
 * error earlier in theme.js — the visitor is left staring at a blank white
 * screen with the site fully rendered underneath it. On a positioning site
 * for a law firm that is the worst failure mode available, and deferring
 * the scripts widens the window.
 *
 * So: after 8s the overlay removes itself in CSS. theme.js normally fades
 * it out in well under a second, so this never fires on a healthy load and
 * nothing about the visible effect changes. Delete this rule to go back to
 * "JavaScript or nothing".
 * ------------------------------------------------------------------ */
.preloader {
    animation: aal-preloader-failsafe 0s linear 8s forwards;
}

@keyframes aal-preloader-failsafe {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/*
 * The firm asked for the AAL monogram in place of the template's scales
 * (2026-09-24). Same flip animation as the template; the mark is wider than
 * the old square icon, so it gets a fixed width.
 */
.preloader span > img {
    width: 96px;
    height: auto;
}

/* Movement that only decorates stops for those who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
    .preloader span > img {
        animation: none;
    }
}

/* ------------------------------------------------------------------
 * Hero.
 *
 * The template package ships PLACEHOLDER slide images (flat grey plates
 * reading "1920 × 850") — the demo photographs are not part of the
 * download. A navy veil over the slide keeps the white type readable and
 * makes the placeholder read as designed rather than broken, and it stays
 * useful once the client delivers the real photograph.
 * ------------------------------------------------------------------ */
/*
 * THE HERO JUMPS — three causes, stacked. All three are fixed here rather
 * than in theme.js, which the port rules say we do not rewrite.
 *
 * 1. Owl's own base CSS is `.owl-carousel { display: none }` until the
 *    script adds .owl-loaded. So the hero occupies ZERO height on first
 *    paint and then snaps to full height when the script runs — a textbook
 *    layout shift, and deferring the scripts (which the load budget wants)
 *    makes the empty state last longer, not shorter. The fix is to reserve
 *    the exact final height from the first paint: show the carousel and its
 *    first slide before Owl touches them, and hide the rest.
 *
 * 2. The template hangs the slide height on padding alone
 *    (322px top + 245px bottom + whatever the copy adds), so a slide with a
 *    three-line intro is taller than one with two. Owl then resizes the
 *    stage on every transition and the whole banner grows and shrinks —
 *    dragging the thumbnails, which are positioned against the bottom edge,
 *    up and down with it. Equal min-height on every slide, content centred,
 *    ends it: the copy can now change length without moving anything.
 *
 * 3. What read as "something odd in the transitions" was causes 1 and 2, not
 *    the transition itself: during `animateOut: 'slideOutDown'` both slides
 *    are on screen at once, so two slides of DIFFERENT heights were sliding
 *    over each other. With the heights equal, the template's drop-and-fade
 *    plays exactly as it was designed to.
 *
 *    NOTHING about the motion is changed here. The template's effects are
 *    what the client approved: `slideOutDown` / `fadeIn`, the 7s autoplay,
 *    the 1s easing, the thumbnails and the arrows all stay untouched. Only
 *    the geometry underneath them is fixed.
 */
/*
 * The slide carries the background, the section does not. During
 * `slideOutDown` the outgoing slide travels off the bottom while the
 * incoming one is still fading up from zero opacity, so for about half a
 * second the page's white body showed through the hero and it flashed
 * white. The template hides this behind photographs that fill the frame;
 * our placeholder plates do not.
 *
 * Painting the section itself navy — the same colour the slides sit on —
 * closes the gap. The animation is untouched: same drop, same fade, same
 * timing.
 */
.slider-one {
    background-color: var(--aal-navy);
}

.slider-one__carousel:not(.owl-loaded) {
    display: block;
}

.slider-one__carousel:not(.owl-loaded) > .slider-one__slide + .slider-one__slide {
    display: none;
}

.slider-one__slide {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 820px;
    /* Room for the absolutely positioned overlay header at the top, and for
       the thumbnails that hang past the bottom edge. */
    padding-top: 180px;
    padding-bottom: 180px;
}

@media (max-width: 991px) {
    .slider-one__slide {
        min-height: 620px;
        padding-top: 140px;
        padding-bottom: 160px;
    }
}

@media (max-width: 575px) {
    .slider-one__slide {
        min-height: 520px;
        padding-top: 120px;
        padding-bottom: 120px;
    }
}

.slider-one__slide::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(
        to right,
        rgba(24, 35, 77, 0.92) 0%,
        rgba(24, 35, 77, 0.78) 50%,
        rgba(24, 35, 77, 0.5) 100%
    );
}

/* The slide is a flex row now, so its one child has to claim the width. */
.slider-one__slide .container {
    position: relative;
    z-index: 2;
    width: 100%;
}

/*
 * .slider-one__title is a <p> rather than a heading (the H1 belongs to the
 * page, not to a slide that changes), so it does not inherit the heading
 * line-height and has to be given one.
 */
.slider-one__title {
    max-width: 860px;
    line-height: 1.14;
}

.slider-one__tag-line {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--aal-gold);
}

.slider-one__text {
    max-width: 620px;
    line-height: 1.7;
}

/*
 * Interior banner: the Nyko design's veil — navy on the left, clearing in
 * the middle, gold on the right under the /AL mark. It lives here, not in
 * the photo, so any image the firm uploads gets the same treatment.
 */
.inner-banner:before {
    /* Stops sampled from Nyko's "FILTER 1 - BLUE & GOLD" (2026-09-30). */
    background: linear-gradient(90deg,
        rgba(25, 36, 78, 0.75) 0%,
        rgba(42, 47, 78, 0.65) 20%,
        rgba(74, 70, 79, 0.61) 40%,
        rgba(115, 98, 80, 0.62) 60%,
        rgba(159, 129, 81, 0.67) 80%,
        rgba(199, 157, 82, 0.75) 100%);
    opacity: 1;
}

/* Thumbnails: tint them navy so the placeholder plates read as slide chips. */
.slider-one .owl-theme .owl-dots .owl-dot span {
    background-color: var(--aal-navy-light);
    background-blend-mode: multiply;
}

/* ------------------------------------------------------------------
 * Section geometry corrections.
 * ------------------------------------------------------------------ */

/*
 * .cta-one is designed with a form overlapping its lower half. Used on its
 * own, its 455px of bottom padding and negative margin have to go.
 */
.cta-one {
    padding-top: 100px;
    padding-bottom: 100px;
    margin-bottom: 0;
}

.cta-one__title {
    margin-bottom: 30px;
}

.aal-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    margin-top: 10px;
}

.aal-btn--outline {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.aal-btn--outline:hover {
    background-color: #fff;
    color: var(--aal-navy);
    border-color: #fff;
}

/*
 * .service-one carries 255px of bottom padding for the block that overlaps
 * it on the template's home page. We use it standalone.
 */
.aal-service--plain {
    padding-top: 100px;
    padding-bottom: 100px;
}

.aal-service--top {
    padding-top: 100px;
    padding-bottom: 60px;
}

/*
 * The client's requirement: the three boxes are the same width AND the same
 * height, even when one text is shorter. The template did not do this.
 */
.aal-service--plain .inner-container .row,
.aal-service--top .row {
    display: flex;
    flex-wrap: wrap;
}

.aal-service--plain .inner-container .row > [class*='col-'],
.aal-service--top .row > [class*='col-'] {
    display: flex;
}

.service-one__single {
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
}

.aal-service--top .service-one__single {
    margin-bottom: 30px;
    border: 1px solid var(--aal-hairline);
    background-color: #fff;
    transition: all 0.4s ease;
}

.aal-service--top .service-one__single:hover {
    border-color: var(--aal-gold);
    transform: translateY(-6px);
    box-shadow: 0 18px 40px -24px rgba(24, 35, 77, 0.45);
}

/*
 * The template separates these cards with a rule between columns
 * (.service-one [class*=col-] + [class*=col-] { border-left }), because in
 * Opklim they sit unframed inside one white panel. Ours are framed one by
 * one, so the rule is a second border floating beside the first.
 *
 * Only the --top variant: on La Firma the cards ARE unframed inside the
 * template's .inner-container, and there the rule is doing its job.
 */
.aal-service--top [class*='col-'] + [class*='col-'] {
    border-left: 0;
    border-top: 0;
}

.block-title--center {
    text-align: center;
    max-width: 860px;
    margin: 0 auto 50px;
}

.aal-note {
    border-left: 2px solid var(--aal-gold);
    padding-left: 20px;
    font-style: italic;
}

/* ------------------------------------------------------------------
 * Figures band — three data points of equal weight. The .counter class
 * on the value is the template's own; counterUp animates it on scroll.
 * ------------------------------------------------------------------ */
.aal-stats {
    background-color: var(--aal-navy);
    padding: 80px 0;
}

.aal-stats__single {
    text-align: center;
    padding: 20px 10px;
}

.aal-stats__value {
    margin: 0;
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.aal-stats__label {
    margin: 14px 0 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--aal-gold);
}

.aal-stats__detail {
    margin: 8px 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}

/* ------------------------------------------------------------------
 * Jurisdictions — names in text, never inside an image.
 * ------------------------------------------------------------------ */
.aal-jurisdictions {
    padding: 90px 0 100px;
    border-top: 1px solid var(--aal-hairline);
}

.aal-jurisdictions__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin: 0;
}

.aal-jurisdictions__list li {
    border: 1px solid var(--aal-hairline);
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 500;
    color: var(--aal-navy);
    transition: all 0.4s ease;
}

.aal-jurisdictions__list li:hover {
    border-color: var(--aal-gold);
    color: var(--aal-gold);
}

/* ------------------------------------------------------------------
 * Team grid.
 *
 * The template's .team-one carries no vertical padding of its own (on the
 * home page it sits between two blocks that supply it), and its cards
 * assume a photograph. Ours are navy plates with the lawyer's initials
 * until the firm delivers the portraits.
 * ------------------------------------------------------------------ */
.aal-team {
    padding: 100px 0 60px;
}

.aal-team .block-title--center {
    margin-bottom: 60px;
}

.aal-team .team-one__image > img {
    display: block;
    height: auto;
}

/* The name is the link to the profile; it must not read as body text. */
.team-one__name a {
    color: inherit;
    transition: color 0.4s ease;
}

.team-one__name a:hover {
    color: var(--aal-gold);
}

/*
 * The white panel that slides over a portrait on hover is the template's
 * effect and is kept. Opklim fills it with social accounts, a personal
 * email and a direct line; the firm publishes none of those, so ours
 * carries the areas the lawyer practises and the link to their profile.
 */
.aal-team__areas-label {
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--aal-gold);
}

.aal-team__areas {
    margin: 0;
    padding: 0 24px;
}

.aal-team__areas li + li {
    margin-top: 10px;
}

.aal-team__areas a {
    font-size: 14px;
    line-height: 1.5;
    color: var(--aal-navy);
    transition: color 0.4s ease;
}

.aal-team__areas a:hover {
    color: var(--aal-gold);
}

/*
 * "Ver perfil" reuses the template's .team-one__contact, and takes the
 * hairline that Opklim gives .team-one__social when something sits above
 * it. The :first-child case is a lawyer with no areas yet: no rule, because
 * there is nothing to separate it from.
 */
.aal-team__profile {
    font-weight: 600;
    color: var(--aal-navy);
}

.aal-team__areas + .aal-team__profile {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--aal-hairline);
}

.aal-team__profile i {
    margin-left: 6px;
    font-size: 12px;
}

/* ------------------------------------------------------------------
 * Lawyer profile page.
 *
 * The template has no single-member page — team-member.html is a gallery of
 * grid variants — so this composes the portrait and the copy from the
 * template's own type scale.
 * ------------------------------------------------------------------ */
.team-details {
    padding: 100px 0;
}

.aal-profile__image img {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 992px) {
    .aal-profile__content {
        padding-left: 50px;
    }
}

@media (max-width: 991px) {
    .aal-profile__content {
        margin-top: 40px;
    }
}

.aal-profile__role {
    margin: 0 0 30px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--aal-gold);
}

.aal-profile__heading {
    margin: 0 0 20px;
    font-size: 20px;
    font-weight: 700;
    color: var(--aal-navy);
}

.aal-profile__areas {
    margin: 0 0 40px;
}

.aal-profile__areas li + li {
    margin-top: 12px;
}

.aal-profile__areas a {
    color: var(--aal-ink);
    transition: color 0.4s ease;
}

.aal-profile__areas a:hover {
    color: var(--aal-gold);
}

/* Shown while the firm has not sent this lawyer's profile data. */
.aal-profile__pending {
    margin-bottom: 40px;
    padding-left: 25px;
    border-left: 3px solid var(--aal-gold);
}

.aal-profile__pending-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.8;
    color: var(--aal-muted);
}

.aal-profile__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}

.aal-profile__back {
    font-size: 14px;
    font-weight: 600;
    color: var(--aal-navy);
    border-bottom: 1px solid var(--aal-hairline);
    transition: all 0.4s ease;
}

.aal-profile__back:hover {
    color: var(--aal-gold);
    border-bottom-color: var(--aal-gold);
}

/* ------------------------------------------------------------------
 * Placeholder body for the sections whose copy has not arrived.
 * ------------------------------------------------------------------ */
.aal-placeholder {
    padding: 120px 0;
}

/*
 * The tight variant closes a page that already has copy above it
 * (Contexto, Rankings), where the full 120px reads as a gap.
 */
.aal-placeholder--tight {
    padding: 70px 0 100px;
    border-top: 1px solid var(--aal-hairline);
}

.aal-placeholder__eyebrow {
    margin: 0 0 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--aal-gold);
}

.aal-placeholder__text {
    max-width: 620px;
    margin: 0 auto 36px;
    font-size: 18px;
    line-height: 1.8;
    color: var(--aal-muted);
}

/* ------------------------------------------------------------------
 * Footer trims. The mockup's footer has four columns of links; the
 * template's copy block sat wider.
 * ------------------------------------------------------------------ */
.footer-widget__logo {
    display: inline-block;
    margin-bottom: 26px;
}

.site-footer__social .aal-lang {
    margin-left: 0;
}

@media (max-width: 991px) {
    .aal-stats__value {
        font-size: 48px;
    }

    .aal-lang {
        margin-left: 0;
    }
}

/* ------------------------------------------------------------------
 * Reduced motion.
 *
 * The template has no notion of it: WOW.js hides every .wow element and
 * only reveals it by playing an animate.css keyframe on scroll. For a
 * visitor who asked for less motion that is not just unwanted, it is a
 * failure mode — if the reveal never fires, the content stays invisible.
 * So show everything and animate nothing.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .wow,
    .wow.animated {
        visibility: visible !important;
        animation-name: none !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}

/* ==================================================================
 * NYKO FINAL DESIGN (Sep 2026) — the layer the static mockup
 * (public/maqueta) introduced. Everything below is scoped to aal-*
 * classes, so the pages already built on the real site are untouched.
 * Colours come from the tokens at the top of this file.
 * ================================================================== */

/* ------------------------------------------------------------------
 * Skip link: invisible until focused by keyboard.
 * ------------------------------------------------------------------ */
.aal-skip {
    position: absolute;
    top: -60px;
    left: 16px;
    z-index: 10000;
    padding: 10px 18px;
    background-color: var(--aal-navy);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    transition: top 0.3s ease;
}

.aal-skip:focus {
    top: 12px;
    color: #fff;
}

/* ------------------------------------------------------------------
 * Top bar — email, address, ES/EN (and social, once the firm sends it),
 * right-aligned as in the design.
 * ------------------------------------------------------------------ */
.aal-topbar .container {
    display: block;
}

.aal-topbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 30px;
    font-size: 13px;
    font-weight: 500;
}

.aal-topbar__link {
    color: inherit;
    transition: color 0.4s ease;
}

.aal-topbar__link:hover {
    color: var(--aal-gold);
}

.aal-topbar__link i {
    margin-right: 8px;
    color: var(--aal-gold);
}

.aal-topbar .aal-lang {
    margin-left: 0;
}

.topbar-one.aal-topbar {
    padding: 14px 0;
    color: #fff;
}

.topbar-two.aal-topbar {
    color: var(--aal-navy);
    font-weight: 500;
}

@media (max-width: 767px) {
    .aal-topbar__inner {
        justify-content: center;
        gap: 6px 18px;
        font-size: 12px;
    }
}

/* ------------------------------------------------------------------
 * Header — the AAL logo (two versions) and the template's togglers.
 * ------------------------------------------------------------------ */
.aal-brand img {
    display: block;
    width: auto;
    height: 62px;
}

.aal-header .aal-brand__dark,
.aal-header.site-header__header-two .aal-brand__light,
.aal-header .stricky-fixed .aal-brand__light {
    display: none;
}

.aal-header.site-header__header-two .aal-brand__dark,
.aal-header .stricky-fixed .aal-brand__dark {
    display: block;
}

.aal-header .stricky-fixed .aal-brand img {
    height: 50px;
}

/* The pinned clone of the overlay header is white, like the interior one. */
.site-header__header-one .stricky-fixed {
    background-color: #fff;
}

.site-header__header-one .stricky-fixed .navigation-box > li > a {
    color: var(--aal-navy);
}

.aal-header .header-navigation .container .right-side-box {
    display: flex;
    gap: 22px;
}

.site-header__header-one.aal-header .header__search {
    color: #fff;
}

/* On the white pinned clone the icons turn navy. Scoped one class deeper
   than the white rule above: at equal weight the later white one won and
   the icons vanished, white on white, until hovered. */
.site-header__header-one.aal-header .stricky-fixed .header__search {
    color: var(--aal-navy);
}

.site-header__header-one.aal-header .stricky-fixed .header__search:hover {
    color: var(--aal-gold);
}

.aal-header .header__search:hover {
    color: var(--aal-gold);
}

@media (min-width: 1200px) {
    .aal-header.site-header__header-one .main-navigation,
    .aal-header.site-header__header-two .header-navigation .main-navigation {
        padding-left: 200px;
        padding-right: 110px;
    }

    .aal-header .header-navigation ul.navigation-box {
        display: flex;
        justify-content: flex-end;
    }

    .aal-header .header-navigation ul.navigation-box > li,
    .aal-header.site-header__header-two .header-navigation ul.navigation-box > li + li {
        margin-left: 34px;
    }
}

@media (max-width: 1199px) {
    .aal-brand img {
        height: 48px;
    }

    .aal-header .header-navigation .container .right-side-box {
        right: 60px;
    }
}

/* ------------------------------------------------------------------
 * Search popup.
 * ------------------------------------------------------------------ */
/* ------------------------------------------------------------------
 * Hero: the header floats over it, so the copy needs the room below.
 * ------------------------------------------------------------------ */
.aal-hero .slider-one__slide {
    padding-top: 220px;
}

.aal-hero .slider-one__tag-line {
    margin-bottom: 22px;
}

/* ------------------------------------------------------------------
 * Section helpers.
 * ------------------------------------------------------------------ */
.aal-lead {
    max-width: 820px;
    margin: 0 0 50px;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.55;
    color: var(--aal-navy);
}

.aal-lead.text-center,
.text-center > .aal-lead {
    margin-left: auto;
    margin-right: auto;
}

.aal-section-title {
    margin: 0 0 40px;
    font-size: 30px;
    font-weight: 700;
    color: var(--aal-navy);
}

.aal-block-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 40px;
    margin-bottom: 50px;
}

.aal-block-top .block-title {
    margin-bottom: 0;
}

.aal-statement {
    margin: 30px 0 0;
    padding: 6px 0 6px 24px;
    border-left: 3px solid var(--aal-gold);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--aal-navy);
}

.aal-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    font-size: 14px;
    font-weight: 600;
    color: var(--aal-navy);
    border-bottom: 1px solid var(--aal-hairline);
    transition: all 0.4s ease;
}

.aal-back:hover {
    color: var(--aal-gold);
    border-bottom-color: var(--aal-gold);
}

.aal-list {
    margin: 0 0 10px;
    padding-left: 18px;
}

.aal-list li {
    margin-bottom: 8px;
    line-height: 1.6;
}

.aal-list li::marker {
    color: var(--aal-gold);
}

.aal-list a {
    color: var(--aal-navy);
    text-decoration: underline;
    text-decoration-color: rgba(203, 160, 82, 0.6);
    text-underline-offset: 3px;
    transition: color 0.4s ease;
}

.aal-list a:hover {
    color: var(--aal-gold);
}

.aal-list--check {
    padding-left: 0;
    list-style: none;
}

.aal-list--check li {
    position: relative;
    padding-left: 26px;
}

.aal-list--check li::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 0;
    width: 10px;
    height: 10px;
    background-color: var(--aal-gold);
}

.aal-btn--ghost {
    background-color: transparent;
    border: 1px solid var(--aal-navy);
    color: var(--aal-navy);
}

.aal-btn--ghost:hover {
    background-color: var(--aal-navy);
    color: #fff;
}

.aal-cta__actions--left {
    justify-content: flex-start;
}

/* ------------------------------------------------------------------
 * Interior banner — the design's /AL watermark on the right.
 * ------------------------------------------------------------------ */
.aal-banner {
    overflow: hidden;
}

/* The monogram of Ajustes, an <img> so the firm can change or remove it. */
.aal-banner__mark {
    position: absolute;
    top: 8%;
    right: -2%;
    width: 44%;
    height: 110%;
    object-fit: contain;
    object-position: right center;
    /* The filter draws the letters as a light veil, not gold: the gold mark
       turned white, at the strength sampled from it. */
    filter: brightness(0) invert(1);
    opacity: 0.3;
    pointer-events: none;
}

/*
 * On a phone the banner is narrow and tall: `contain` in a 44%-wide box
 * shrank the mark to a stamp. Sized by the banner's height instead, and
 * left to run off the right edge, as it does on desktop.
 */
@media (max-width: 767px) {
    .aal-banner__mark {
        top: 30%;
        right: auto;
        left: 38%;
        width: auto;
        max-width: none;
        height: 60%;
    }
}

.aal-banner .container {
    position: relative;
    z-index: 2;
}

/*
 * The template pins these backgrounds (background-attachment: fixed) for a
 * parallax. Mobile browsers repaint a fixed background only when a touch
 * scroll ends: the copy moves, the photo stays, then it jumps. On touch
 * screens, narrow screens and reduced motion the photo scrolls with the page.
 */
@media (hover: none), (max-width: 991px), (prefers-reduced-motion: reduce) {
    .inner-banner,
    .testimonials-two,
    .cta-one,
    .service-one__bg,
    .case-four__top {
        background-attachment: scroll;
    }
}

/* ------------------------------------------------------------------
 * La Firma.
 * ------------------------------------------------------------------ */
.aal-about {
    padding: 120px 0 100px;
}

.aal-about__brand img {
    display: block;
    width: 100%;
    max-width: 380px;
    height: auto;
    margin: 0 auto;
}

@media (max-width: 991px) {
    .aal-about__brand {
        margin-bottom: 50px;
    }

    .aal-about__brand img {
        max-width: 260px;
    }
}

.aal-figures {
    padding: 40px 0 100px;
}

.aal-figures--ruled {
    padding: 100px 0;
    border-top: 1px solid var(--aal-hairline);
}

.aal-figures .fact-three__title {
    font-size: 64px;
    line-height: 1.1;
}

.aal-figures__detail {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--aal-muted);
}

/* Cómo trabajamos: three boxes, equal width and height. */
.aal-how .inner-container .row {
    display: flex;
    flex-wrap: wrap;
}

.aal-how .inner-container .row > [class*='col-'] {
    display: flex;
}

.aal-how__single {
    width: 100%;
    height: 100%;
}

.aal-how .service-one__title {
    line-height: 1.35;
}

/* Áreas on navy: the design's photo keeps its height inside the grid. */
.aal-areas-home .case-two__image img {
    display: block;
    width: 100%;
    height: auto;
}

.aal-areas-home .aal-area .case-two__box-title a {
    color: #fff;
}

.aal-areas-home .aal-area .case-two__box-title a:hover {
    color: var(--aal-gold);
}

.aal-partners {
    padding-bottom: 80px;
}

.aal-latest {
    padding: 100px 0 60px;
    border-top: 1px solid var(--aal-hairline);
}

.aal-latest--tight {
    padding-top: 80px;
}

/* ------------------------------------------------------------------
 * Lawyer cards (team-one) — the portrait keeps its proportion.
 * ------------------------------------------------------------------ */
.aal-lawyer .team-one__image > a > img {
    display: block;
    width: 100%;
    height: auto;
}

.aal-lawyer {
    margin-bottom: 40px;
}

.aal-lawyer .team-one__designation {
    color: var(--aal-gold);
    font-weight: 500;
}

/* ------------------------------------------------------------------
 * Abogados: lead + filter, groups with the design's gold rule.
 * ------------------------------------------------------------------ */
.aal-lawyers {
    padding-top: 90px;
}

.aal-lawyers__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px 40px;
    margin-bottom: 50px;
}

.aal-lawyers__top .aal-lead {
    margin-bottom: 0;
}

.aal-filter__select {
    min-width: 290px;
    padding: 13px 48px 13px 18px;
    border: 1px solid var(--aal-gold);
    border-radius: 0;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2318234d' d='M6 8 0 0h12z'/%3E%3C/svg%3E") no-repeat right 18px center;
    -webkit-appearance: none;
    appearance: none;
    font-size: 15px;
    font-weight: 500;
    color: var(--aal-navy);
    cursor: pointer;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.aal-filter__select:focus {
    outline: none;
    border-color: var(--aal-navy);
    box-shadow: 0 0 0 3px rgba(203, 160, 82, 0.35);
}

.aal-group {
    margin-bottom: 30px;
}

.aal-group--empty {
    display: none;
}

.aal-group__title {
    position: relative;
    display: inline-block;
    margin: 0 0 40px;
    padding-bottom: 12px;
    font-size: 26px;
    font-weight: 700;
    color: var(--aal-navy);
}

.aal-group__title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60%;
    height: 4px;
    background-color: var(--aal-gold);
}

.aal-filter__empty {
    font-size: 17px;
    color: var(--aal-muted);
}

/* ------------------------------------------------------------------
 * Lawyer profile.
 * ------------------------------------------------------------------ */
.aal-profile {
    padding: 110px 0 100px;
}

.aal-profile__photo img {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 992px) {
    .aal-profile__photo {
        position: sticky;
        top: 120px;
    }
}

.aal-profile__role {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--aal-gold);
}

.aal-profile__name {
    margin: 0 0 12px;
    font-size: 46px;
    font-weight: 700;
    color: var(--aal-ink);
}

.aal-profile__summary {
    margin: 0 0 24px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--aal-ink);
}

.aal-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 24px;
}

.aal-chip {
    display: inline-block;
    padding: 7px 16px;
    background-color: var(--aal-navy);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #fff;
    transition: background-color 0.4s ease, transform 0.4s ease;
}

.aal-chip:hover {
    background-color: var(--aal-gold);
    color: #fff;
    transform: translateY(-2px);
}

.aal-profile__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    margin: 0 0 24px;
    font-size: 15px;
}

.aal-profile__contact i {
    margin-right: 8px;
    color: var(--aal-gold);
}

.aal-profile__contact a {
    color: var(--aal-ink);
}

.aal-profile__contact a:hover {
    color: var(--aal-gold);
}

.aal-profile__actions {
    margin-bottom: 40px;
    gap: 14px;
}

.aal-profile__actions .thm-btn i {
    margin-right: 8px;
}

.aal-profile__section {
    margin-bottom: 30px;
}

.aal-profile__section p {
    font-size: 16px;
    line-height: 1.8;
}

.aal-profile__heading {
    margin-bottom: 12px;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.aal-profile__publications {
    padding-top: 30px;
    border-top: 4px solid transparent;
    border-image: linear-gradient(to right, var(--aal-gold) 70px, transparent 70px) 1;
}

.aal-profile__heading--gold {
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--aal-gold);
}

/* ------------------------------------------------------------------
 * Practice areas index.
 * ------------------------------------------------------------------ */
.aal-areas {
    padding: 100px 0 70px;
}

.aal-area .case-two__box-title a {
    color: var(--aal-navy);
    transition: color 0.4s ease;
}

.aal-area .case-two__box-title a:hover {
    color: var(--aal-gold);
}

/* ------------------------------------------------------------------
 * Detail pages (area, jurisdiction, publication).
 * ------------------------------------------------------------------ */
.aal-detail {
    padding: 100px 0 60px;
}

@media (min-width: 992px) {
    .aal-detail .blog-one__classic-content {
        padding-right: 30px;
    }
}

.aal-detail .blog-one__classic-content .blog-one__single {
    align-items: stretch;
}

/* The template gives the image width: 100% but no height, so the height
   attribute (there to reserve the space) was taken in pixels and the photo
   stretched to fit the column. */
.aal-detail .blog-one__image-inner > img {
    display: block;
    height: auto;
}

.aal-detail__photo {
    display: block;
    width: 100%;
    height: auto;
}

.aal-detail__title {
    margin: 0 0 12px;
    font-size: 38px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--aal-ink);
}

.aal-detail__lead {
    margin: 0 0 34px;
    font-size: 18px;
    line-height: 1.65;
    color: var(--aal-muted);
}

.aal-detail__heading {
    margin: 32px 0 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--aal-navy);
}

.aal-detail .blog-one__text {
    font-size: 16px;
    line-height: 1.85;
}

.aal-detail__related {
    margin: 36px 0 0;
    font-weight: 600;
}

.aal-detail__related a {
    color: var(--aal-gold);
    transition: color 0.4s ease;
}

.aal-detail__related a:hover {
    color: var(--aal-navy);
}

.aal-detail__related i {
    margin-left: 8px;
}

.aal-people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}

.aal-person {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid var(--aal-hairline);
    transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease;
}

.aal-person:hover {
    border-color: var(--aal-gold);
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -20px rgba(24, 35, 77, 0.5);
}

.aal-person img {
    width: 56px;
    height: 60px;
    object-fit: cover;
    object-position: top;
}

.aal-person strong {
    display: block;
    font-size: 15px;
    color: var(--aal-navy);
}

.aal-person small {
    display: block;
    font-size: 13px;
    color: var(--aal-gold);
}

/* Sidebar */
.aal-sidebar .sidebar__title {
    font-size: 20px;
}

.aal-sidebar__current a {
    color: var(--aal-gold);
    font-weight: 600;
}

.aal-sidebar .aal-filter__select {
    width: 100%;
    min-width: 0;
}

.aal-sidebar .sidebar__post-image-inner img {
    width: 95px;
    height: 66px;
    object-fit: cover;
}

/* ------------------------------------------------------------------
 * Estructuras Internacionales.
 * ------------------------------------------------------------------ */
.aal-structures {
    padding: 100px 0 90px;
}

.aal-structures__intro {
    max-width: 900px;
    margin-bottom: 70px;
}

.aal-structures__intro .aal-lead {
    margin-bottom: 20px;
}

.aal-structures__body {
    font-size: 17px;
    line-height: 1.8;
}

.aal-jurisdiction {
    margin-bottom: 50px;
}

.aal-jurisdiction .blog-one__image,
.aal-jurisdiction .blog-one__image-inner {
    width: 100%;
}

.aal-jurisdiction .blog-one__image-inner img {
    display: block;
    width: 100%;
    height: auto;
}

.aal-jurisdiction .blog-one__title {
    color: var(--aal-ink);
}

/* Not a link: the template's hover (photo fading out) would promise one. */
.aal-jurisdiction:hover .blog-one__image-inner > img {
    opacity: 1;
    transform: none;
}

/* Split closing (navy text + skyline) */
.aal-split {
    display: flex;
    flex-wrap: wrap;
    min-height: 460px;
}

.aal-split__text,
.aal-split__image {
    flex: 1 1 50%;
    min-width: 320px;
}

.aal-split__text {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 90px 60px;
    background-color: var(--aal-navy);
    color: #fff;
}

.aal-split__inner {
    max-width: 520px;
}

.aal-split__title {
    margin: 0 0 24px;
    font-size: 32px;
    font-weight: 700;
    color: #fff;
}

.aal-split__info {
    margin: 0 0 30px;
}

.aal-split__info li {
    margin-bottom: 8px;
    font-size: 17px;
}

.aal-split__info i {
    width: 22px;
    margin-right: 10px;
    color: var(--aal-gold);
}

.aal-split__info a {
    color: #fff;
}

.aal-split__info a:hover {
    color: var(--aal-gold);
}

.aal-split__image {
    min-height: 320px;
    background-size: cover;
    background-position: center;
}

/* ------------------------------------------------------------------
 * Closing band (cta-one) — phone line and contact row.
 * ------------------------------------------------------------------ */
.aal-closing {
    position: relative;
    background-size: cover;
    background-position: center;
    /* the template's thumbnails multiply the photo by the ground colour */
    background-blend-mode: normal;
}

.aal-closing::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--aal-navy);
    opacity: 0.86;
}

.aal-closing .container {
    position: relative;
    z-index: 1;
}

.aal-closing .cta-one__phone {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 24px;
    padding: 18px 0;
    margin-bottom: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* The phone reads at the size of the email and address under it, not as a
   headline (client review, 2026-10-05). Scoped under .cta-one__phone to beat
   the template's ".cta-one__phone a" (44px, bold). */
.aal-closing__label {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

.cta-one__phone .aal-closing__phone {
    margin-left: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--aal-gold);
}

.aal-closing__phone:hover {
    color: #fff;
}

.aal-closing__info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 30px;
    margin: 0 0 30px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
}

.aal-closing__info i {
    margin-right: 8px;
    color: var(--aal-gold);
}

.aal-closing__info a {
    color: inherit;
}

/* ------------------------------------------------------------------
 * Contexto.
 * ------------------------------------------------------------------ */
.aal-insights {
    padding: 100px 0 80px;
}

.aal-post-item {
    width: 100%;
}

.aal-post .blog-one__image-inner img {
    display: block;
    width: 100%;
    height: auto;
}

.aal-post .blog-one__title a {
    color: var(--aal-ink);
}

.aal-post .blog-one__title a:hover {
    color: var(--aal-gold);
}

.aal-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.aal-author {
    display: flex;
    gap: 26px;
    margin: 10px 0 60px;
    padding: 30px;
    border: 1px solid var(--aal-hairline);
    border-top: 3px solid var(--aal-gold);
}

.aal-author__photo img {
    display: block;
    width: 110px;
    height: auto;
}

.aal-author__label {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--aal-gold);
}

.aal-author__name {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
}

.aal-author__name a {
    color: var(--aal-navy);
}

.aal-author__role {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--aal-muted);
}

.aal-author__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
}

.aal-author .aal-back {
    margin-top: 16px;
}

@media (max-width: 575px) {
    .aal-author {
        flex-direction: column;
    }
}

/* Newsletter (Contexto only) */
.aal-newsletter .mailchimp-one__title {
    color: #fff;
}

.aal-form-message {
    margin: 14px 0 0;
    min-height: 1.5em;
    font-size: 15px;
    color: #f3c7c7;
}

.aal-form-message--success {
    color: var(--aal-gold);
    font-weight: 500;
}

.aal-contact .aal-form-message--success {
    padding: 14px 18px;
    background-color: #faf6ee;
    border-left: 3px solid var(--aal-gold);
    color: var(--aal-navy);
}

/* ------------------------------------------------------------------
 * Reconocimientos.
 * ------------------------------------------------------------------ */
/*
 * Rankings, Alianzas and Asociaciones get one treatment (client, 2026-10-08):
 * white tiles of one size on one line, each logo in its own colours. The
 * columns are the same in the three groups, so a tile is as wide in a row of
 * two logos as in a row of five.
 */
.aal-recognitions {
    padding: 90px 0;
}

/* Consecutive groups read as one section. */
.aal-recognitions + .aal-recognitions {
    padding-top: 0;
}

.aal-recognitions .block-title {
    margin-bottom: 40px;
}

/* The lead is plain text with the gold bar, as on La Firma. */
.aal-recognitions .block-title__text-one {
    max-width: 680px;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
}

.aal-recognitions .block-title__text-one + .block-title__text-one {
    margin-top: 12px;
}

.aal-logos {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
}

.aal-logos__item {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid var(--aal-hairline);
}

/*
 * The box every logo is fitted into, the same in every tile: a wordmark
 * reaches its width, a seal its height. That leaves a long wordmark lower
 * than a round seal, which is what makes them look the same size.
 */
.aal-logos__frame {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;
    padding: 26px 22px;
}

.aal-logos__img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.aal-logos__name {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--aal-navy);
    text-align: center;
}

.aal-logos__detail {
    margin: 0;
    padding: 14px 18px 18px;
    border-top: 1px solid var(--aal-hairline);
    font-size: 13px;
    line-height: 1.5;
    color: var(--aal-navy);
    text-align: center;
}

@media (max-width: 991px) {
    .aal-logos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* On a phone, two to a row: one per row is a screen of scrolling per logo. */
@media (max-width: 575px) {
    .aal-recognitions {
        padding: 60px 0;
    }

    .aal-recognitions .block-title {
        margin-bottom: 28px;
    }

    .aal-logos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .aal-logos__frame {
        height: 110px;
        padding: 16px 12px;
    }

    .aal-logos__name {
        font-size: 13px;
    }

    .aal-logos__detail {
        padding: 10px 10px 12px;
        font-size: 11px;
    }
}

/* ------------------------------------------------------------------
 * Contacto.
 * ------------------------------------------------------------------ */
.aal-contact {
    padding: 100px 0;
}

.aal-label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--aal-navy);
}

.aal-select {
    width: 100%;
    height: 55px;
    padding: 0;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2318234d' d='M6 8 0 0h12z'/%3E%3C/svg%3E") no-repeat right 4px center;
    -webkit-appearance: none;
    appearance: none;
    font-size: 15px;
    color: var(--aal-ink);
}

.aal-contact input:focus,
.aal-contact textarea:focus,
.aal-select:focus {
    outline: none;
    border-bottom-color: var(--aal-gold);
}

span.aal-field-error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #b3261e;
}

input.aal-field-error,
textarea.aal-field-error,
select.aal-field-error {
    border-bottom-color: #b3261e;
}

.aal-is-loading {
    opacity: 0.7;
    cursor: progress;
}

.aal-contact address {
    margin: 0;
    font-style: normal;
}

.aal-map {
    position: relative;
    line-height: 0;
}

.aal-map iframe {
    display: block;
    width: 100%;
    height: 440px;
    border: 0;
    filter: grayscale(0.25);
}

.aal-map__link {
    position: absolute;
    left: 24px;
    bottom: 24px;
    padding: 12px 18px;
    background-color: var(--aal-navy);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
}

.aal-map__link:hover {
    background-color: var(--aal-gold);
    color: #fff;
}

.aal-map__link i {
    margin-right: 6px;
    color: var(--aal-gold);
}

.aal-map__link:hover i {
    color: #fff;
}

/* ------------------------------------------------------------------
 * Search and 404.
 * ------------------------------------------------------------------ */
.aal-search,
.aal-not-found {
    padding: 100px 0;
}

.aal-search__form {
    max-width: 720px;
    margin: 0 0 30px;
}

.aal-not-found .aal-search__form {
    margin: 0 auto 30px;
}

.aal-search__status {
    font-size: 16px;
    color: var(--aal-muted);
}

.aal-search__results {
    max-width: 820px;
    margin-top: 30px;
}

.aal-search__result {
    padding: 26px 0;
    border-bottom: 1px solid var(--aal-hairline);
}

.aal-search__type {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--aal-gold);
}

.aal-search__title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
}

.aal-search__title a {
    color: var(--aal-navy);
}

.aal-search__title a:hover {
    color: var(--aal-gold);
}

.aal-search__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
}

.aal-not-found__code {
    margin: 0;
    font-size: 140px;
    font-weight: 700;
    line-height: 1;
    color: var(--aal-gold);
}

/* ------------------------------------------------------------------
 * Footer.
 * ------------------------------------------------------------------ */
.aal-footer__logo img {
    display: block;
    width: 190px;
    height: auto;
}

.aal-footer .footer-widget__title {
    font-size: 18px;
}

.aal-footer__address {
    font-style: normal;
}

.aal-footer__bottom .site-footer__social {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* The template's grid spacing is sized for a blog archive, not for five
   cards under a heading. */
.aal-structures .blog-one__grid {
    padding-top: 0;
    margin-top: 0;
}

.aal-structures .blog-one__grid .blog-one__single {
    margin-bottom: 50px;
}

.aal-detail .aal-person strong {
    color: var(--aal-navy);
}

.aal-detail .blog-one__meta > span {
    margin-left: 14px;
    font-size: 13px;
    color: var(--aal-muted);
}

.aal-detail .blog-one__subtitle {
    margin-top: 34px;
}

/* The template only styles input[type=text]; email gets the same line so
   mobile keyboards can still switch to the email layout. */
.case-form-one__field input[type=email] {
    display: block;
    width: 100%;
    height: 46px;
    border: none;
    border-bottom: 1px solid #dddddd;
    outline: none;
    background-color: transparent;
    color: #666666;
    font-size: 14px;
}

.aal-contact .case-form-one__field textarea {
    padding-left: 0;
}

.aal-footer .footer-widget__text,
.aal-footer__address {
    color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 575px) {
    .aal-hero .slider-one__title {
        font-size: 36px;
    }

    .aal-hero .slider-one__slide {
        padding-top: 150px;
    }

    .aal-profile__name {
        font-size: 36px;
    }

    .aal-detail__title {
        font-size: 30px;
    }
}

/* A long option ("Administrativo y Contrataciones Públicas") must not push
   the filter past the screen edge. */
.aal-filter,
.aal-filter__select {
    max-width: 100%;
}

/* Two-up publication cards: the template centres image and text
   vertically (align-items: center), so a short image floats mid-card.
   The image sits at the top, level with the meta line. */
.aal-latest .blog-one__single {
    align-items: flex-start;
}


/*
 * The whole lawyer card is one link to the profile: the name's link
 * stretches over the card. The hover panel's areas are plain text, so there
 * is a single target and a click anywhere lands on the profile.
 */
.aal-lawyer {
    position: relative;
    cursor: pointer;
}

.aal-lawyer .team-one__content,
.aal-lawyer .team-one__name {
    position: static;
}

.aal-lawyer__link::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
}

.aal-lawyer__link:focus-visible {
    outline: none;
}

.aal-lawyer__link:focus-visible::after {
    outline: 2px solid var(--aal-gold);
    outline-offset: 4px;
}

.aal-lawyer .aal-team__areas li {
    font-size: 14px;
    line-height: 1.5;
    color: var(--aal-navy);
}

.aal-lawyer:hover .team-one__name a {
    color: var(--aal-gold);
}

/*
 * Whole-card links (practice areas, jurisdictions): same pattern as the
 * lawyer card. The title's link stretches over the card and nothing else
 * inside is a link, so a click anywhere goes to the one destination.
 */
.aal-card {
    position: relative;
    cursor: pointer;
}

.aal-card .case-two__box-content,
.aal-card .case-two__box-title,
.aal-card .blog-one__content,
.aal-card .blog-one__title {
    position: static;
}

.aal-card__link::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
}

.aal-card__link:focus-visible {
    outline: none;
}

.aal-card__link:focus-visible::after {
    outline: 2px solid var(--aal-gold);
    outline-offset: 4px;
}

.aal-card:hover .aal-card__link {
    color: var(--aal-gold);
}

.aal-card:hover .case-two__box-link,
.aal-card:hover .blog-one__link {
    color: var(--aal-gold);
}

/* Post cards: author and area are text (the card is the link), so the
   template's .blog-one__meta a styling is repeated for spans. Kept on one
   line — the two-up cards are narrow and the name was breaking. */
.aal-post .blog-one__meta span {
    display: flex;
    align-items: center;
    color: #666666;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
}

.aal-post .blog-one__meta span + span::before {
    content: '|';
    position: relative;
    top: -2px;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 16px;
}

.aal-post .blog-one__meta {
    flex-wrap: wrap;
    row-gap: 4px;
}

/* The template's `transition: all` on titles also animates the visibility
   WOW flips on reveal, which can leave the stretched link unclickable for
   the length of the transition. Only the colour needs to animate. */
.aal-card .aal-card__link,
.aal-lawyer .aal-lawyer__link {
    transition: color 0.4s ease;
}

/*
 * Photo hover on whole-card links (publications, jurisdictions).
 *
 * The template's rules hang on `.blog-one__image-inner > a`; on our cards
 * that icon is a span (the card itself is the link), so the same geometry
 * is repeated for it: centred, hidden until the card is hovered.
 *
 * The template also fades the photo to 10% over pure black. Over the navy
 * placeholder plates that read as a broken black box; a navy ground at 20%
 * keeps the effect on brand, and works the same once real photos land.
 * The image is a block, so no inline gap shows the ground as a black strip.
 */
.aal-card .blog-one__image-inner {
    background-color: var(--aal-navy);
}

.aal-card .blog-one__image-inner > img {
    display: block;
}

.aal-card .blog-one__image-inner > .blog-one__image-link {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    font-size: 25px;
    color: #fff;
    opacity: 0;
    transform: translate(-50%, -50%) scaleY(0);
    transform-origin: center center;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.aal-card:hover .blog-one__image-inner > img {
    opacity: 0.2;
}

.aal-card:hover .blog-one__image-inner > .blog-one__image-link {
    opacity: 1;
    transform: translate(-50%, -50%) scaleY(1);
}

/* Publication card: the date tab hangs off the photo's bottom edge, where
   the template puts it (it was anchored to the text block before). */
.aal-post .blog-one__image {
    position: relative;
    width: 100%;
}

.aal-post .blog-one__image .blog-one__date {
    top: auto;
    bottom: -20px;
    z-index: 2;
}

/* A single-slide banner is a still banner: Owl still draws one dot for it,
   which would read as a broken carousel. */
.aal-hero--single .owl-dots {
    display: none;
}

/*
 * Áreas on navy (La Firma): the design's giant /AL monogram behind the
 * block, a shade lighter than the ground. A white mark at low opacity gives
 * exactly that shade and keeps the text contrast untouched.
 */
.aal-areas-home {
    position: relative;
    overflow: hidden;
}

.aal-areas-home__mark {
    position: absolute;
    top: -12%;
    right: -14%;
    width: 100%;
    max-width: none;
    height: 132%;
    object-fit: contain;
    object-position: right center;
    filter: brightness(0) invert(1);
    opacity: 0.07;
    pointer-events: none;
}

/* On a phone the block is a tall column: the mark at twice the screen's
   width, the slash and the A whole, the L running off the edge. */
@media (max-width: 767px) {
    /* background-position 30% 40% of a 200%-wide image, as an <img>. */
    .aal-areas-home__mark {
        top: 40%;
        right: auto;
        left: 30%;
        width: 200%;
        height: auto;
        transform: translate(-30%, -40%);
    }
}

.aal-areas-home > .container {
    position: relative;
    z-index: 1;
}

/* ==================================================================
 * LA FIRMA as the Nyko final design draws it ("Propuesta 2 : Home"),
 * adopted in full on 2026-09-24. Scoped to the blocks of that page.
 * ================================================================== */

/* Block titles: the design's lead under a title is plain text with the
   gold bar, not the template's bold italic. */
.aal-about .block-title__text-one,
.aal-areas-home .block-title__text-one,
.aal-approach .block-title__text-one,
.aal-partners .block-title__text-one,
.aal-latest .block-title__text-one,
.aal-appointment .block-title__text-one {
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
}

/* ------------------------------------------------------------------
 * 1 · Carousel — navy slides, the copy from the centre of the banner,
 * thumbnails as plain blocks (white = current, gold = the others) and the
 * arrows as grey discs.
 * ------------------------------------------------------------------ */
.aal-hero__slide--plain {
    background-color: var(--aal-navy);
}

/*
 * A slide with a photo: the stops of Nyko's "FILTER 1 - BLUE & GOLD",
 * mirrored — gold on the left, where there is no copy, and navy deepening
 * to the right under the copy, so white text reads on a bright sky.
 */
.aal-hero .slider-one__slide:not(.aal-hero__slide--plain)::before {
    /* First layer: navy under the overlay header, so the gold logo and the
       menu keep their contrast over a bright sky. */
    background:
        linear-gradient(180deg, rgba(25, 36, 78, 0.7) 0, rgba(25, 36, 78, 0) 260px),
        linear-gradient(90deg,
        rgba(199, 157, 82, 0.6) 0%,
        rgba(115, 98, 80, 0.62) 22%,
        rgba(42, 47, 78, 0.72) 42%,
        rgba(25, 36, 78, 0.8) 100%);
}

/* Below lg the copy spans the whole slide: an even navy veil under it. */
@media (max-width: 991px) {
    .aal-hero .slider-one__slide:not(.aal-hero__slide--plain)::before {
        background:
            linear-gradient(180deg, rgba(25, 36, 78, 0.5) 0, rgba(25, 36, 78, 0) 200px),
            rgba(25, 36, 78, 0.78);
    }
}

.aal-hero__slide--plain::before {
    display: none;
}

@media (min-width: 992px) {
    .aal-hero .slider-one__slide .container {
        padding-left: 36%;
    }
}

.aal-hero .slider-one__title {
    font-size: 38px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.06em;
    max-width: 680px;
}

.aal-hero .slider-one__text {
    font-size: 19px;
    line-height: 1.45;
    max-width: 680px;
}

.aal-hero .owl-theme .owl-dots .owl-dot span {
    width: 110px;
    height: 66px;
    background-color: var(--aal-gold);
    opacity: 1;
}

.aal-hero .owl-theme .owl-dots .owl-dot.active span,
.aal-hero .owl-theme .owl-dots .owl-dot:hover span {
    background-color: #fff;
    opacity: 1;
}

/*
 * A slide with a photo shows it in its thumbnail (aal.js sets the image and
 * the class): navy veil on the others, lifted on the current one and on
 * hover. The gold rule under the current one stays.
 */
.aal-hero .owl-theme .owl-dots .aal-hero__thumb--photo span {
    position: relative;
    background-size: cover;
    background-position: center;
}

.aal-hero .owl-theme .owl-dots .aal-hero__thumb--photo span::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(25, 36, 78, 0.55);
    transition: opacity 0.3s ease;
}

.aal-hero .owl-theme .owl-dots .aal-hero__thumb--photo.active span::after,
.aal-hero .owl-theme .owl-dots .aal-hero__thumb--photo:hover span::after {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .aal-hero .owl-theme .owl-dots .aal-hero__thumb--photo span::after {
        transition: none;
    }
}

.aal-hero .slider-one__nav-left,
.aal-hero .slider-one__nav-right {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #9a9ca3;
    color: #1f2430;
    font-size: 16px;
}

@media (max-width: 991px) {
    .aal-hero .slider-one__title {
        font-size: 30px;
    }

    .aal-hero .slider-one__text {
        font-size: 16px;
    }

    .aal-hero .owl-theme .owl-dots .owl-dot span {
        width: 60px;
        height: 36px;
    }
}

/* ------------------------------------------------------------------
 * 2 · Quiénes somos — pale ground, spaced title, justified text and the
 * short gold rule under it.
 * ------------------------------------------------------------------ */
.aal-about {
    background-color: #f4f7f8;
    padding: 90px 0 150px;
}

.aal-about .block-title {
    margin-bottom: 20px;
}

.aal-about .block-title__title {
    font-size: 30px;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.aal-about .about-one__text {
    font-size: 16px;
    line-height: 1.55;
    text-align: justify;
    color: var(--aal-ink);
}

.aal-about__rule {
    display: block;
    width: 130px;
    height: 5px;
    margin-top: 16px;
    background-color: var(--aal-gold);
}

@media (max-width: 767px) {
    .aal-about .about-one__text {
        text-align: left;
    }
}

/* ------------------------------------------------------------------
 * 3 · Cards over the skyline — they ride up into the pale block above,
 * the photograph shows through a lighter gold, titles in title case.
 * ------------------------------------------------------------------ */
.aal-cards {
    margin-top: -90px;
    padding-bottom: 220px;
}

.aal-cards .service-one__bg {
    top: 90px;
    height: calc(100% - 90px);
    /* The template sets no size: pinned (desktop parallax) it went
       unnoticed; scrolling with the page on a phone, the photo stopped
       short of the section's end. */
    background-size: cover;
    background-repeat: no-repeat;
}

.aal-cards .service-one__bg::before {
    opacity: 0.45;
}

.aal-cards .service-one__icon {
    color: var(--aal-gold);
}

.aal-cards .service-one__title {
    font-size: 17px;
    text-transform: none;
    letter-spacing: 0.02em;
}

.aal-cards .service-one__btn {
    text-transform: none;
}

/* ------------------------------------------------------------------
 * 4 · Áreas on navy — the intro in plain white, the button's label in
 * sentence case.
 * ------------------------------------------------------------------ */
.aal-areas-home .block-title__text-one {
    color: #fff;
}

.aal-areas-home .case-two__more-btn {
    width: 250px;
    padding: 10px 24px;
    font-size: 13px;
    line-height: 1.4;
    text-transform: none;
    text-align: center;
}

/* ------------------------------------------------------------------
 * 5 · Nuestro Enfoque y Forma de Trabajo — white ground (the template's
 * photographic backdrop is a placeholder plate), gold title, gold dots,
 * four figures around the /AL mark.
 * ------------------------------------------------------------------ */
.aal-approach {
    padding: 110px 0 40px;
    background-image: none;
    background-color: #fff;
}

.aal-approach .block-title__title {
    font-size: 40px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: #9b7837;
}

.aal-approach .fact-one__list li {
    padding: 22px 30px 12px 40px;
}

.aal-approach .fact-one__list li:hover {
    background-color: transparent;
}

.aal-approach .fact-one__list li:hover h3,
.aal-approach .fact-one__list li:hover p {
    color: inherit;
}

.aal-approach__dot {
    position: absolute;
    top: 27px;
    left: 8px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--aal-gold);
}

.aal-approach .fact-one__list li h3 {
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.4;
    color: var(--aal-ink);
}

.aal-approach .fact-one__list li p {
    font-size: 15px;
    line-height: 1.55;
    color: var(--aal-ink);
}

.aal-approach .fact-one__image img {
    display: block;
    width: 100%;
    height: auto;
}

.aal-approach__mark {
    width: 64px;
    height: auto;
    padding: 6px;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.aal-approach .fact-one__box-sep-x {
    top: 44%;
    width: 100%;
}

.aal-approach .fact-one__box-sep-y {
    left: 50%;
    height: 100%;
}

.aal-approach .fact-one__box-single {
    margin-bottom: 70px;
}

.aal-approach .aal-approach__value {
    margin: 0 0 12px;
    letter-spacing: 0;
    text-transform: none;
    font-size: 56px;
    font-weight: 500;
    line-height: 1;
    color: var(--aal-gold);
}

.aal-approach .aal-approach__label {
    margin: 0;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.3;
    font-size: 14px;
    font-weight: 600;
    color: var(--aal-navy);
}

.aal-approach .aal-approach__detail {
    margin: 6px 0 0;
    letter-spacing: 0;
    text-transform: none;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--aal-navy);
}

/* ------------------------------------------------------------------
 * 6 · Closing + appointment form — the template's own overlap: the band
 * leaves room at its foot and the form's panel rides over it.
 * ------------------------------------------------------------------ */
.aal-closing--form {
    padding-top: 90px;
    padding-bottom: 300px;
    margin-bottom: -220px;
}

.aal-closing .cta-one__title {
    margin-bottom: 36px;
}

.aal-closing .cta-one__phone {
    margin-top: 0;
}

.aal-appointment {
    position: relative;
    z-index: 2;
    padding-bottom: 80px;
}

/* A "#form" link lands with the form clear of the sticky header. */
#form {
    scroll-margin-top: 110px;
}

.aal-appointment .block-title__title {
    font-size: 26px;
    font-weight: 500;
}

.aal-appointment .block-title__text-one {
    border-left: 0;
    padding-left: 0;
    margin-top: 12px;
}

.aal-appointment .case-form-one__field input[type=text],
.aal-appointment .case-form-one__field input[type=tel],
.aal-appointment .case-form-one__field input[type=email] {
    display: block;
    width: 100%;
    height: 57px;
    border: none;
    border-bottom: 1px solid #dddddd;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #666666;
    padding-left: 0;
}

.aal-appointment .case-form-one__btn {
    text-transform: none;
}

/* 7 · 8 — Socios and Publicaciones: button to the right of the lead. */
.aal-partners .block-title__text-one,
.aal-latest .block-title__text-one {
    max-width: 560px;
}

.aal-partners .thm-btn,
.aal-latest .blog-one__more-btn {
    text-transform: none;
}

/* ------------------------------------------------------------------
 * The appointment form on navy (Estructuras' split block): transparent
 * fields, white type, light rules — Opklim's fields are drawn for white.
 * ------------------------------------------------------------------ */
.aal-split__form {
    padding: 0;
    background: none;
}

.aal-split__lead {
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.85);
}

.aal-split__form .case-form-one__field input,
.aal-split__form .case-form-one__field select,
.aal-split__form .case-form-one__field textarea {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #fff;
}

.aal-split__form .case-form-one__field textarea {
    height: 90px;
    padding-top: 14px;
}

.aal-split__form .case-form-one__field select option {
    color: var(--aal-ink);
}

.aal-split__form .case-form-one__field ::placeholder {
    color: rgba(255, 255, 255, 0.75);
    opacity: 1;
}

.aal-split__form .case-form-one__field.text-center {
    text-align: left !important;
}

.aal-split__form .case-form-one__btn {
    text-transform: none;
}

.aal-split__form .aal-form-message {
    color: #fff;
}

/* The template colours text-field placeholders by type; beat it here. */
.aal-split__form .case-form-one__field input[type=text]::placeholder,
.aal-split__form .case-form-one__field input[type=text]::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.75);
}

/* ------------------------------------------------------------------
 * Abogados: Socio junior and Asociados share one row, each heading over
 * the first card of its group. The spacer holds the heading's height on
 * the other cards of that row; once the filter reshuffles the cards the
 * spacers go, so no card is left floating under an empty line.
 * ------------------------------------------------------------------ */
.aal-group--shared .aal-group__title {
    display: block;
    width: max-content;
    max-width: 100%;
    margin-bottom: 30px;
}

.aal-group__title--spacer::after {
    display: none;
}

.aal-group--filtered .aal-group__title--spacer {
    display: none;
}

/* ==================================================================
 * PAGE BUILDER — the blocks the panel assembles. A section that used to be
 * one block of markup can now be two blocks in a row; these keep the
 * spacing the design had between them.
 * ================================================================== */

/* Text followed by the jurisdictions (Estructuras): one section, as before. */
.aal-text-block {
    padding-bottom: 0;
}

.aal-text-block + .aal-structures--grid {
    padding-top: 0;
}

.aal-structures--grid {
    padding-bottom: 26px;
}

.aal-buttons-block {
    padding: 0 0 90px;
}

.aal-buttons-block .aal-detail__related {
    width: 100%;
    margin-top: 0;
}

/* Rich text from the panel's editor (publications): the design's styles. */
.aal-rich p {
    margin: 10px 0 0;
    font-size: 16px;
    line-height: 1.85;
    font-weight: 300;
    color: #666;
}

.aal-rich h2,
.aal-rich h3 {
    margin: 30px 0 10px;
    font-size: 24px;
    color: var(--aal-ink);
}

.aal-rich h3 {
    font-size: 20px;
}

.aal-rich ul {
    margin: 10px 0 0;
    padding-left: 0;
    list-style: none;
}

.aal-rich ul li {
    position: relative;
    margin-bottom: 8px;
    padding-left: 26px;
    line-height: 1.6;
    color: #666;
}

.aal-rich ul li::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 0;
    width: 10px;
    height: 10px;
    background-color: var(--aal-gold);
}

.aal-rich ol {
    margin: 10px 0 0;
    padding-left: 20px;
    color: #666;
}

.aal-rich a {
    color: var(--aal-navy);
    text-decoration: underline;
    text-decoration-color: rgba(203, 160, 82, 0.6);
    text-underline-offset: 3px;
}

.aal-rich blockquote {
    margin: 24px 0;
    padding: 6px 0 6px 24px;
    border-left: 3px solid var(--aal-gold);
    font-weight: 600;
    color: var(--aal-navy);
}

/* An uploaded icon in place of an icon-font glyph. */
.aal-icon-image img,
img.aal-icon-image {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: contain;
}

/* Honeypot of the site's forms: off-screen for people, still in the DOM for bots. */
.aal-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Form-wide errors (Turnstile, too many messages, expired session) on the white
   forms: the same red as the field errors; the pale default is for the dark newsletter band. */
.aal-live-form .aal-form-message:not(.aal-form-message--success) {
    color: #b3261e;
}

.aal-live-form .aal-form-message a {
    color: inherit;
    text-decoration: underline;
}

/* Alpine: hidden until Alpine takes over (the session-expired notice of the forms). */
[x-cloak] {
    display: none !important;
}

/* Cloudflare Turnstile above the send button; empty (no height) in invisible mode. */
.aal-turnstile:not(:empty) {
    margin-bottom: 20px;
}

/* The site's forms (Livewire) sit where the mockup's demo forms sat. */
.aal-live-form {
    position: relative;
}

.aal-is-loading {
    opacity: 0.7;
    cursor: progress;
}

/* Frequently asked questions on an area's page (they feed its FAQPage). */
.aal-faqs__item {
    padding: 18px 0;
    border-bottom: 1px solid var(--aal-hairline);
}

.aal-faqs__question {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--aal-navy);
}