/* ==========================================================
   PMA STUDIO — Pixel-perfect skin over UIkit (Figma 1920px)
   Only brand tokens + component overrides. UIkit handles layout.
   ========================================================== */

/* --- Tokens --- */
:root {
    --pma-ink: #2B2B2B;
    --pma-ink-2: #2B2B2B;
    --pma-muted: #8A8A8A;
    --pma-line: #2B2B2B;
    --pma-bg: #FFFFFF;
    --pma-dark: #2B2B2B;

    --pma-ease-out: cubic-bezier(.22,1,.36,1);
    --pma-ease-in-out: cubic-bezier(.76,0,.24,1);

    --pma-font: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* --- Reset / base --- */
* { border-radius: 0 !important; }
::selection { color: #fff; background: var(--pma-ink); }

html, body {
    font-family: var(--pma-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: var(--pma-ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body { overflow-x: hidden; }

p { font-size: 16px; line-height: 1.5; color: var(--pma-ink); margin: 0 0 16px; }
h1, h2, h3, h4, h5, h6 { color: var(--pma-ink); margin: 0; font-weight: 500; line-height: 1.05; letter-spacing: -.01em; text-transform: uppercase; }
a { color: inherit; text-decoration: none; transition: opacity .2s, color .2s; }
a:hover { text-decoration: none; opacity: .65; }
ul, li { list-style: none; padding: 0; margin: 0; }
img { display: block; max-width: 100%; height: auto; }
strong, b { font-weight: 600; }
hr { margin: 0; }

/* UIkit container width override to match Figma (1720px canvas content) */
.uk-container { box-sizing: border-box; }
.uk-container-xlarge { max-width: 1760px; }
.uk-container-expand { padding-left: clamp(24px, 5vw, 100px); padding-right: clamp(24px, 5vw, 100px); }

/* UIkit sections → Figma vertical rhythm */
.uk-section          { padding-top: 80px;  padding-bottom: 80px; }
.uk-section-small    { padding-top: 40px;  padding-bottom: 40px; }
.uk-section-large    { padding-top: 120px; padding-bottom: 120px; }
.uk-section-xlarge   { padding-top: 160px; padding-bottom: 160px; }
@media (max-width: 959.98px) {
    .uk-section          { padding-top: 56px;  padding-bottom: 56px; }
    .uk-section-large    { padding-top: 80px;  padding-bottom: 80px; }
    .uk-section-xlarge   { padding-top: 96px;  padding-bottom: 96px; }
}

/* ==========================================================
   TEXT BUILD — animacion "construccion por lineas"
   Cualquier [data-build] revela su texto linea a linea.
   El JS (pma-text-build.js) parte el texto y anima los inner.
   ========================================================== */
/* Antes de que el JS procese: el texto se ve normal (sin FOUC).
   Cuando el JS lo procesa anade .is-built y toma el control. */
.pma-build__line {
    display: block;
    overflow: hidden;
}
.pma-build__line-inner {
    display: block;
    will-change: transform;
}
/* Si no hay JS, el texto sigue siendo legible con normalidad. */

/* ==========================================================
   TYPOGRAPHY SCALE (Figma exact)
   ========================================================== */
.pma-display   { font-size: clamp(72px, 9.5vw, 180px); font-weight: 500; line-height: .95;  letter-spacing: -.02em; text-transform: uppercase; }
.pma-h1        { font-size: clamp(48px, 6vw, 112px); font-weight: 500; line-height: 1.0;  letter-spacing: -.02em; text-transform: uppercase; }
.pma-h2        { font-size: clamp(56px, 4vw, 144px); font-weight: 400; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }
.pma-h3        { font-size: clamp(32px, 3.2vw, 56px);  font-weight: 500; line-height: 1.1;  letter-spacing: -.01em; text-transform: uppercase; }
.pma-h4        { font-size: clamp(22px, 1.8vw, 32px);  font-weight: 500; line-height: 1.2;  letter-spacing: -.005em; text-transform: uppercase; }
.pma-h5        { font-size: 18px; font-weight: 500; line-height: 1.25; text-transform: uppercase; }

.pma-lead      { font-size: clamp(32px, 3.2vw, 72px); font-weight: 400; line-height: 1.1; letter-spacing: -.015em; text-transform: uppercase; }
.pma-intro     { font-size: clamp(18px, 1.5vw, 24px); font-weight: 400; line-height: 1.45; }
.pma-body      { font-size: 16px; font-weight: 400; line-height: 1.55; }
.pma-small     { font-size: 14px; font-weight: 400; line-height: 1.5; }

.pma-eyebrow   { font-size: 11px; font-weight: 500; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--pma-ink); }
.pma-label     { font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--pma-ink); }
.pma-caption   { font-size: 11px; font-weight: 400; line-height: 1.4; color: var(--pma-muted); }
.pma-nav-link  { font-size: 13px; font-weight: 500; line-height: 1; letter-spacing: .08em; text-transform: uppercase; }

/* ==========================================================
   DARK SECTION
   ========================================================== */
.pma-dark { background: var(--pma-dark); color: #fff; }
.pma-dark h1, .pma-dark h2, .pma-dark h3, .pma-dark h4, .pma-dark h5, .pma-dark h6,
.pma-dark p, .pma-dark a, .pma-dark span, .pma-dark li, .pma-dark label, .pma-dark small { color: #fff; }
.pma-dark a:hover { color: rgba(255,255,255,.65); }

/* ==========================================================
   SEPARATORS — 1px, spans the container
   ========================================================== */
.pma-rule { border: 0; border-top: 1px solid var(--pma-line); width: 100%; }
.pma-rule--light { border-top-color: rgba(255,255,255,.25); }
.pma-dark .pma-rule { border-top-color: rgba(255,255,255,.25); }

/* ==========================================================
   HEADER / NAV
   ========================================================== */
.pma-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 980;
    background: transparent;
    padding: 0px !important;
    transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.pma-nav .uk-navbar-left, .pma-nav .uk-navbar-right { min-height: 44px; }
/* El logo lleva su separacion superior como padding REAL (no 'top', que
   no ocupa espacio y haria que el logo se salga del nav blanco). Asi la
   altura del nav crece con el logo y este queda dentro en ambos estados. */
.pma-nav .uk-logo { padding: 20px 0; display: flex; align-items: center; }
.pma-nav .uk-logo img { height: 38px; width: auto; display: block; }
/* Dos logos apilados, uno visible a la vez segun el estado del nav.
   El --light va absoluto SOBRE el --dark (mismo padding del contenedor). */
.pma-nav .uk-logo { position: relative; }
.pma-nav__logo { transition: opacity .3s ease; }
.pma-nav__logo--light {
    position: absolute;
    top: 50%; left: 0;
    transform: translateY(-50%);
    opacity: 0;
}

.pma-nav .uk-navbar-nav { gap: 44px; }
.pma-nav .uk-navbar-nav > li > a {
    font-size: 13px; font-weight: 500; letter-spacing: .08em;
    text-transform: uppercase; color: #fff;
    min-height: auto; padding: 6px 0; line-height: 1;
    position: relative;
}
.pma-nav .uk-navbar-nav > li > a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
    height: 1px; background: currentColor;
    transform: scaleX(0); transform-origin: left;
    transition: transform .3s var(--pma-ease-out);
}
.pma-nav .uk-navbar-nav > li > a:hover::after { transform: scaleX(1); }

/* Active link — L brackets on top-left and bottom-right corners */
.pma-nav .uk-navbar-nav > li.uk-active > a { position: relative; }
.pma-nav .uk-navbar-nav > li.uk-active > a::before,
.pma-nav .uk-navbar-nav > li.uk-active > a::after {
    content: "";
    position: absolute;
    width: 8px; height: 8px;
    background: none;
    transform: none;
    pointer-events: none;
}
.pma-nav .uk-navbar-nav > li.uk-active > a::before {
    top: 0px;
    left: -7px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
}
.pma-nav .uk-navbar-nav > li.uk-active > a::after {
    bottom: 0px;
    right: -7px;
    left: auto;
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

.pma-nav.menu-white-bg,
.pma-nav.uk-active {
    background: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,.06);
    padding: 16px 0;
    border-bottom: 1px solid #2b2b2b;
}
.pma-nav.menu-white-bg .uk-navbar-nav > li > a,
.pma-nav.uk-active .uk-navbar-nav > li > a { color: var(--pma-ink); }

/* ---- HOME: nav sobre hero ----
   Mientras el hero ocupa la pantalla (body.is-hero-active), forzamos que el nav
   sea transparente, con logo blanco y texto blanco, independientemente de la
   clase uk-active que UIkit sticky pueda estar aplicando durante el scroll del pin. */
body.is-hero-active .pma-nav,
body.is-hero-active .pma-nav.menu-white-bg,
body.is-hero-active .pma-nav.uk-active {
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: 0 !important;
    padding: 0 !important;
}
body.is-hero-active .pma-nav .uk-navbar-nav > li > a,
body.is-hero-active .pma-nav .uk-navbar-toggle,
body.is-hero-active .pma-nav .pma-lang { color: #fff !important; }
body.is-hero-active .pma-nav__logo--dark  { opacity: 0; }
body.is-hero-active .pma-nav__logo--light { opacity: 1; }

/* ==========================================================
   PRELOADER SIMPLE DE PAGINA (fondo dark + logo centrado)
   - Paginas interiores: en cada carga.
   - Home: solo visitas repetidas (la 1a vez se ve el intro del hero).
   ========================================================== */
.pma-page-preloader {
    position: fixed; inset: 0; z-index: 9998;
    background: #2B2B2B;
    display: flex; align-items: center; justify-content: center;
    opacity: 1; visibility: visible;
    transition: opacity .55s ease, visibility .55s;
}
.pma-page-preloader.is-done {
    opacity: 0; visibility: hidden; pointer-events: none;
}
.pma-page-preloader__logo {
    width: clamp(54px, 6vw, 82px);
    animation: pmaPagePreloader 1.4s ease-in-out infinite;
}
.pma-page-preloader__logo img {
    width: 100%; height: auto; display: block;
}
@keyframes pmaPagePreloader {
    0%, 100% { opacity: .35; transform: scale(.96); }
    50%      { opacity: 1;   transform: scale(1); }
}

/* ---- Cookies hold: oculta el modal mientras el hero hace su intro ----
   stay-creative.js fuerza display:block al modal en cuanto carga. Mientras
   el body tenga is-cookies-hold, lo forzamos invisible con opacity+pointer-events
   (no usamos visibility para no bloquear la transicion). Al quitar la clase,
   el modal aparece con fade+slide-up suave. */
#cookieMessageWrapper {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
body.is-cookies-hold #cookieMessageWrapper {
    opacity: 0 !important;
    transform: translateY(12px) !important;
    pointer-events: none !important;
}

.pma-lang {
    font-size: 13px; font-weight: 500; letter-spacing: .08em;
    text-transform: uppercase; display: inline-flex; align-items: center; gap: 4px;
}
.pma-lang::after { content: "▾"; font-size: 8px; opacity: .6; }

.pma-nav .uk-navbar-toggle { color: #fff; min-height: 44px; padding: 0; }
.pma-nav.menu-white-bg .uk-navbar-toggle,
.pma-nav.uk-active .uk-navbar-toggle { color: var(--pma-ink); }

/* Offcanvas mobile */
.uk-offcanvas-bar.pma-dark { background: var(--pma-dark); padding: 40px 30px; }
.uk-offcanvas-bar .uk-nav > li > a {
    font-size: 28px; font-weight: 500; letter-spacing: -.01em;
    text-transform: uppercase; color: #fff; padding: 10px 0;
}

/* ==========================================================
   HERO — estructura unificada preloader + slides
   Los corchetes son elementos persistentes que respiran entre 2 tamanos:
   - Contraidos (tamano monograma del preloader)  → ~110px
   - Expandidos (tamano marco del texto)          → ~50-70vw
   La transicion entre estos dos estados es lo que vertebra toda la coreografia.
   ========================================================== */

.pma-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 640px;
    overflow: hidden;
    background: #2B2B2B; /* color del preloader — se ve mientras entran las imagenes */
    margin-top: -80px;
    color: #fff;
    will-change: transform, opacity;
}
/* Evita FOUC: oculta el hero hasta que JS tome el control */
html.js .pma-hero:not(.is-ready) { visibility: hidden; }

/* Capa 1: fondo del preloader (gris oscuro) — se desvanece al final del intro */
.pma-hero__loader-bg {
    position: absolute; inset: 0;
    background: #2B2B2B;
    z-index: 2;
    pointer-events: none;
    will-change: opacity;
}

/* Capa 2: slides (imagenes) */
.pma-hero__track {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.pma-hero__slide {
    position: absolute; inset: -1px;  /* -1px evita filete por redondeo subpixel */
    width: calc(100% + 2px); height: calc(100% + 2px);
    overflow: hidden;
    clip-path: inset(0 0 0 0);
    will-change: clip-path;
}
.pma-hero__media {
    position: absolute; inset: 0;
    overflow: hidden;
}
.pma-hero__bg {
    position: absolute;
    inset: -6%;
    background-size: cover;
    background-position: center;
    will-change: transform;
}
.pma-hero__tint {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 62%, rgba(0,0,0,.55) 100%);
    pointer-events: none;
    z-index: 2;
}

/* Capa 3: FRAME — contenedor logico donde viven corchetes y contenido.
   Ocupa toda la pantalla; los corchetes se posicionan con inset variable
   (JS los desplaza desde el centro hasta las esquinas del texto/logo). */
.pma-hero__frame {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    will-change: opacity;
}
.pma-hero__frame-inner {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 110px;
    height: 110px;
    display: flex; align-items: center; justify-content: center;
    will-change: width, height;
}

/* Corchetes — SVG piezas corporativas. Tamano responsive coherente con el texto.
   Controlado desde JS solo para el cambio de estado monograma <-> logo <-> slide. */
.pma-hero__bracket {
    position: absolute;
    width: clamp(48px, 4vw, 88px);
    height: clamp(48px, 4vw, 88px);
    display: block;
    pointer-events: none;
    will-change: transform, opacity, width, height;
}
.pma-hero__bracket img {
    width: 100%; height: 100%;
    display: block;
    object-fit: contain;
}
.pma-hero__bracket--tl { top: 0; left: 0; transform-origin: top left; }
.pma-hero__bracket--br { bottom: 0; right: 0; transform-origin: bottom right; }

/* Wordmark (logo PMA STUDIO sin corchetes) dentro del frame.
   Proporciones exactas del logo corporativo: 82.43% x 65.3% del frame. */
.pma-hero__wordmark {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 82.43%;
    height: 65.3%;
    overflow: hidden;
    opacity: 0;
    will-change: transform, opacity;
}
.pma-hero__wordmark img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    will-change: transform;
}

/* Titulos de cada slide: una sola linea, tamano responsive. */
.pma-hero__titles {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    display: flex; align-items: center; justify-content: center;
}
.pma-hero__title {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    opacity: 0;
    white-space: nowrap;
}
.pma-hero__title-text {
    display: flex; align-items: baseline;
    gap: 0.35em;
    font-family: var(--pma-font);
    font-weight: 500;
    font-size: clamp(32px, 4vw, 104px);
    line-height: 1;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
}
.pma-hero__mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: baseline;
    padding: 0.06em 0;
}
.pma-hero__mask > span {
    display: inline-block;
    will-change: transform;
    white-space: nowrap;
}
@media (max-width: 639.98px) {
    /* En movil permite 2 lineas en caso de titulos largos */
    .pma-hero__title { white-space: normal; text-align: center; }
    .pma-hero__title-text { flex-wrap: wrap; justify-content: center; gap: 0 0.3em; }
}

/* UI fija del hero: contador + scroll cta */
.pma-hero__ui {
    position: absolute; inset: 0;
    z-index: 6;
    pointer-events: none;
    padding: 0 clamp(24px, 5vw, 100px) clamp(28px, 4vh, 44px);
}
.pma-hero__counter {
    position: absolute;
    top: auto; bottom: clamp(28px, 4vh, 44px);
    left: clamp(24px, 5vw, 100px);
    font-size: 11px; letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
    color: #fff;
    display: inline-flex; align-items: center; gap: 8px;
    opacity: .85;
}
.pma-hero__counter-sep { opacity: .45; }

/* Dots de navegacion del hero — centrados abajo */
.pma-hero__dots {
    position: absolute;
    bottom: clamp(30px, 4vh, 46px);
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    gap: 12px;
    pointer-events: auto;
}
.pma-hero__dot {
    width: 30px; height: 2px;
    padding: 0; border: 0;
    background: rgba(255,255,255,.32);
    cursor: pointer;
    transition: background .4s ease, width .4s cubic-bezier(.22,1,.36,1);
}
.pma-hero__dot:hover { background: rgba(255,255,255,.6); }
.pma-hero__dot.is-active {
    background: #fff;
    width: 46px;
}

.pma-hero__scroll-cta {
    position: absolute;
    bottom: clamp(28px, 4vh, 44px);
    right: clamp(24px, 5vw, 100px);
    color: #fff;
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 14px;
    pointer-events: auto;
    opacity: .9;
    transition: opacity .4s ease, font-size .5s cubic-bezier(.22,1,.36,1),
                letter-spacing .5s cubic-bezier(.22,1,.36,1),
                gap .5s cubic-bezier(.22,1,.36,1);
}
.pma-hero__scroll-cta:hover { opacity: 1; }
.pma-hero__scroll-text { display: inline-block; }
.pma-hero__scroll-line {
    display: inline-block;
    width: 44px; height: 1px;
    background: #fff;
    opacity: .8;
    animation: pmaScrollHint 2.4s ease-in-out infinite;
    transform-origin: left center;
    transition: width .5s cubic-bezier(.22,1,.36,1);
}
.pma-hero__scroll-arrow {
    display: inline-block;
    font-size: 14px; line-height: 1;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    transform: translateX(-6px);
    transition: opacity .4s ease, max-width .5s cubic-bezier(.22,1,.36,1),
                transform .5s cubic-bezier(.22,1,.36,1);
}
@keyframes pmaScrollHint {
    0%, 100% { transform: scaleX(1); opacity: .4; }
    50%      { transform: scaleX(1.3); opacity: 1; }
}

/* Estado pulsante: se activa cuando el usuario llega al ultimo slide.
   El "Scroll to explore" se vuelve mas grande, pulsa y muestra una flecha. */
.pma-hero__scroll-cta.is-pulsing {
    font-size: 14px;
    letter-spacing: .2em;
    gap: 18px;
    animation: pmaScrollPulse 1.8s ease-in-out infinite;
}
.pma-hero__scroll-cta.is-pulsing .pma-hero__scroll-line {
    width: 56px;
}
.pma-hero__scroll-cta.is-pulsing .pma-hero__scroll-arrow {
    opacity: 1;
    max-width: 30px;
    transform: translateX(0);
    animation: pmaScrollArrow 1.8s ease-in-out infinite;
}
@keyframes pmaScrollPulse {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
@keyframes pmaScrollArrow {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(5px); }
}

@media (max-width: 639.98px) {
    .pma-hero__title-text { font-size: clamp(34px, 10vw, 56px); }
    .pma-loader__wordmark  { font-size: clamp(38px, 11vw, 64px); }
}

/* ==========================================================
   CTA BUTTON (outlined, arrow top-right, bottom-left label)
   ========================================================== */
.pma-cta {
    position: relative;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
    width: 100%;
    min-height: 72px;
    padding: 18px 22px 18px 30px;
    box-sizing: border-box;
    border: 1px solid var(--pma-ink);
    background: transparent;
    color: var(--pma-ink);
    text-decoration: none;
    font-family: inherit;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.pma-cta:hover { background: var(--pma-ink); color: #fff; text-decoration: none; opacity: 1; }
.pma-cta__label {
    display: block;
    font-size: 10px; font-weight: 500;
    letter-spacing: .12em; line-height: 1;
    text-transform: uppercase; opacity: .6;
    margin-bottom: 8px;
    color: inherit;
}
.pma-cta__text,
.pma-cta > span:not(.pma-cta__label):not(.pma-cta__arrow):not(.pma-arrow) {
    display: block;
    font-size: 14px; font-weight: 500;
    letter-spacing: .08em; line-height: 1.1;
    text-transform: uppercase;
    color: inherit;
}
.pma-cta__arrow,
.pma-cta .pma-arrow {
    position: absolute; top: 16px; right: 18px;
    width: 14px; height: 14px;
    display: inline-block;
    transition: transform .25s var(--pma-ease-out);
    color: inherit;
}
.pma-cta__arrow svg,
.pma-cta .pma-arrow svg,
.pma-cta__arrow img,
.pma-cta .pma-arrow img { width: 100%; height: 100%; display: block; }
.pma-cta:hover .pma-cta__arrow,
.pma-cta:hover .pma-arrow { transform: translate(3px, -3px); }
.pma-cta:hover .pma-arrow img,
.pma-cta:hover .pma-cta__arrow img { filter: invert(1); }

/* Compact variant — for small CTAs like "view all" */
.pma-cta--sm { min-height: 56px; padding: 15px; }
.pma-cta--sm .pma-cta__arrow { top: 12px; right: 14px; width: 12px; height: 12px; }

/* Dark context */
.pma-dark .pma-cta,
.pma-cta--dark { border-color: #fff; color: #fff; }
.pma-dark .pma-cta .pma-arrow img,
.pma-dark .pma-cta .pma-cta__arrow img,
.pma-cta--dark .pma-arrow img,
.pma-cta--dark .pma-cta__arrow img { filter: invert(1); }
.pma-dark .pma-cta:hover,
.pma-cta--dark:hover { background: #fff; color: var(--pma-ink); }
.pma-dark .pma-cta:hover .pma-arrow img,
.pma-dark .pma-cta:hover .pma-cta__arrow img,
.pma-cta--dark:hover .pma-arrow img,
.pma-cta--dark:hover .pma-cta__arrow img { filter: none; }

/* Form submit button — same pattern */
.pma-btn {
    position: relative;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
    width: 100%;
    min-height: 64px;
    padding: 16px 22px;
    box-sizing: border-box;
    border: 1px solid var(--pma-ink);
    background: transparent;
    color: var(--pma-ink);
    font-family: inherit;
    font-size: 14px; font-weight: 500; letter-spacing: .08em; line-height: 1.1;
    text-transform: uppercase; text-align: left;
    cursor: pointer; text-decoration: none;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.pma-btn::after {
    content: ""; position: absolute; top: 14px; right: 16px;
    width: 14px; height: 14px;
    background: url('/assets/front_img/arrow-up-right.svg') center/contain no-repeat;
    transition: transform .25s var(--pma-ease-out), filter .25s ease;
}
.pma-btn:hover { background: var(--pma-ink); color: #fff; text-decoration: none; }
.pma-btn:hover::after { transform: translate(3px, -3px); filter: invert(1); }
.pma-dark .pma-btn { border-color: #fff; color: #fff; }
.pma-dark .pma-btn::after { filter: invert(1); }
.pma-dark .pma-btn:hover { background: #fff; color: var(--pma-ink); }
.pma-dark .pma-btn:hover::after { filter: none; }

/* Inline read-more link */
.pma-link {
    font-size: 11px; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase;
    color: inherit; text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 0;
    border-bottom: 1px solid currentColor;
    transition: gap .25s var(--pma-ease-out), opacity .2s;
}
.pma-link:hover { gap: 12px; opacity: 1; text-decoration: none; }
.pma-link svg { width: 11px; height: 11px; }

/* Small pill button (cookies etc.) */
.pma-btn--sm {
    display: inline-flex; align-items: center; justify-content: center;
    height: 34px; padding: 0 16px;
    border: 1px solid #fff; background: transparent; color: #fff;
    font-family: inherit;
    font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
    cursor: pointer; text-decoration: none;
    transition: background .2s ease, color .2s ease;
}
.pma-btn--sm:hover { background: #fff; color: var(--pma-ink); text-decoration: none; }
.pma-btn--sm.is-solid { background: #fff; color: var(--pma-ink); }
.pma-btn--sm.is-solid:hover { background: transparent; color: #fff; }

/* ==========================================================
   PROJECT CARD — image 4:5 + outline bar below
   ========================================================== */
.pma-card { display: block; text-decoration: none; color: inherit; }
.pma-card:hover { text-decoration: none; opacity: 1; }
.pma-card__img {
    position: relative; width: 100%;
    padding-bottom: 125%;               /* 4:5 */
    overflow: hidden; background: #F5F5F5;
}
.pma-card__img img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s var(--pma-ease-out);
}
.pma-card:hover .pma-card__img img { transform: scale(1.03); }

.pma-card__bar {
    position: relative;
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 64px;
    padding: 14px 18px;
    margin-top: 8px;
    border: 1px solid var(--pma-ink);
    color: var(--pma-ink);
    transition: background .25s ease, color .25s ease;
}
.pma-card__cat {
    display: block;
    font-size: 10px; font-weight: 500;
    letter-spacing: .12em; line-height: 1;
    text-transform: uppercase; opacity: .55;
    margin-bottom: 6px; color: inherit;
}
.pma-card__name {
    display: block;
    font-size: 15px; font-weight: 500;
    letter-spacing: .04em; line-height: 1.1;
    text-transform: uppercase; color: inherit;
}
.pma-card__arrow {
    position: absolute; top: 12px; right: 14px;
    width: 12px; height: 12px;
    transition: transform .25s var(--pma-ease-out);
}
.pma-card__arrow img, .pma-card__arrow svg { width: 100%; height: 100%; display: block; transition: filter .25s ease; }
.pma-card:hover .pma-card__bar { background: var(--pma-ink); color: #fff; }
.pma-card:hover .pma-card__arrow { transform: translate(3px, -3px); }
.pma-card:hover .pma-card__arrow img { filter: invert(1); }

/* Card on dark section */
.pma-dark .pma-card__bar,
.pma-card--dark .pma-card__bar { border-color: #fff; color: #fff; }
.pma-dark .pma-card__arrow img,
.pma-card--dark .pma-card__arrow img { filter: invert(1); }
.pma-dark .pma-card:hover .pma-card__bar,
.pma-card--dark:hover .pma-card__bar { background: #fff; color: var(--pma-ink); }
.pma-dark .pma-card:hover .pma-card__bar .pma-card__cat,
.pma-dark .pma-card:hover .pma-card__bar .pma-card__name,
.pma-card--dark:hover .pma-card__bar .pma-card__cat,
.pma-card--dark:hover .pma-card__bar .pma-card__name { color: var(--pma-ink); }
.pma-dark .pma-card:hover .pma-card__arrow img,
.pma-card--dark:hover .pma-card__arrow img { filter: none; }

/* Quote card (used in grid with callout) */
.pma-quote {
    display: flex; flex-direction: column; justify-content: center;
    padding: 40px 32px;
    border: 1px solid var(--pma-ink);
    min-height: 100%;
    text-align: center;
}
.pma-quote__text { font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--pma-ink); margin: 0 0 16px; }
.pma-quote__author {
    display: inline-block;
    background: var(--pma-ink); color: #fff;
    padding: 8px 16px;
    font-size: 10px; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase;
    align-self: flex-start;
}

/* ==========================================================
   ARTICLE CARD — image 4:3, text below
   ========================================================== */
.pma-acard { display: block; text-decoration: none; color: var(--pma-ink); }
.pma-acard:hover { text-decoration: none; opacity: 1; }
.pma-acard__img {
    position: relative; width: 100%;
    padding-bottom: 75%;                /* 4:3 */
    overflow: hidden; background: #F5F5F5;
    margin-bottom: 18px;
}
.pma-acard__img img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s var(--pma-ease-out);
}
.pma-acard:hover .pma-acard__img img { transform: scale(1.03); }
.pma-acard__date { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--pma-muted); margin-bottom: 8px; }
.pma-acard__title { font-size: 15px; font-weight: 500; letter-spacing: .04em; line-height: 1.2; text-transform: uppercase; margin: 0 0 10px; }
.pma-acard__excerpt { font-size: 12px; line-height: 1.5; color: var(--pma-muted); margin: 0 0 14px; }

/* ==========================================================
   TEAM CARD — hereda de .pma-card pero con retrato 3:4 + bio overlay
   ========================================================== */
.pma-tcard .pma-card__img {
    padding-bottom: 133%;                                  /* 3:4 en equipo */
    border: 1px solid transparent;
    transition: border-color .25s ease;
}
.pma-tcard:hover .pma-card__img { border-color: var(--pma-ink); }
.pma-tcard .pma-card__img img { filter: grayscale(1); transition: transform .6s var(--pma-ease-out), filter .4s; }
.pma-tcard:hover .pma-card__img img { filter: grayscale(0); }

/* Barra inferior más estrecha en equipo */
.pma-tcard .pma-card__bar { min-height: 48px; padding: 10px 14px; }
.pma-tcard .pma-card__cat { margin-bottom: 3px; }
.pma-tcard .pma-card__arrow { top: 10px; right: 12px; }

/* Overlay blanco al hover que tapa la foto y muestra la bio */
.pma-tcard__overlay {
    position: absolute; inset: 0;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    padding: 28px 24px;
    opacity: 0;
    transition: opacity .35s var(--pma-ease-out);
    pointer-events: none;
    z-index: 2;
}
.pma-tcard__bio {
    margin: 0;
    font-size: 13px; line-height: 1.55;
    color: var(--pma-ink);
    text-align: center;
    max-height: 100%;
    overflow: hidden;
}
.pma-tcard--has-bio:hover .pma-tcard__overlay { opacity: 1; }
.pma-tcard--has-bio:hover .pma-card__img img { transform: none; }

/* Team callout card (sustainability) */
.pma-tcallout {
    display: flex; flex-direction: column; justify-content: center;
    padding: 40px 32px;
    border: 1px solid var(--pma-ink);
    min-height: 100%;
    text-align: center;
}
.pma-tcallout__eyebrow { font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--pma-muted); margin-bottom: 14px; }
.pma-tcallout__text { font-size: 13px; line-height: 1.5; color: var(--pma-ink); margin-bottom: 20px; }
.pma-tcallout__name { display: inline-block; background: var(--pma-ink); color: #fff; padding: 8px 16px; font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; align-self: flex-start; }

/* ==========================================================
   ABOUT — full-width image, dark overlay, centered text
   ========================================================== */
.pma-about {
    position: relative;
    min-height: 600px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    padding: 120px 24px;
}
.pma-about__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.pma-about__overlay { position: absolute; inset: 0; background: rgba(26,26,26,.55); }
.pma-about__content { position: relative; z-index: 2; max-width: 820px; text-align: center; color: #fff; }
.pma-about__content p { color: #fff; font-size: clamp(20px, 2vw, 28px); line-height: 1.45; font-weight: 400; margin: 0 0 28px; }
.pma-about__content strong { font-weight: 600; }

/* ==========================================================
   ACCORDION — services (UIkit uk-accordion override)
   ========================================================== */
.pma-accordion { border-top: 1px solid var(--pma-ink); }
.pma-accordion > li { border-bottom: 1px solid var(--pma-ink); margin: 0; }
.pma-accordion.uk-accordion > :nth-child(n+2) { margin-top: 0; }
.pma-accordion .uk-accordion-title {
    position: relative;
    display: flex; align-items: center; justify-content: space-between;
    font-size: clamp(20px, 1.9vw, 28px);
    font-weight: 500;
    letter-spacing: -.005em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--pma-ink);
    padding: 26px 0;
    text-decoration: none;
}
.pma-accordion .uk-accordion-title::before { display: none; }
.pma-accordion .uk-accordion-title::after {
    content: "+";
    font-size: 40px; font-weight: 300;
    line-height: 1; color: var(--pma-ink);
    margin-left: 20px; flex-shrink: 0;
    transition: transform .3s var(--pma-ease-out);
}
.pma-accordion > li.uk-open > .uk-accordion-title::after { content: "−"; transform: rotate(0deg); }
.pma-accordion .uk-accordion-content {
    margin: 0; padding: 0 0 32px;
    font-size: 14px; line-height: 1.6;
}
.pma-accordion .pma-accordion__list {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px;
    margin-top: 8px; margin-left: 48px;
}
.pma-accordion .pma-accordion__list li {
    font-size: 12px; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase;
    padding: 10px 0; border-top: 1px solid rgba(26,26,26,.15);
}
.pma-accordion .pma-accordion__list li:first-child,
.pma-accordion .pma-accordion__list li:nth-child(2) { border-top: 0; }
.pma-accordion__num { display: inline-block; font-variant-numeric: tabular-nums; margin-right: 12px; }
@media (max-width: 639.98px) { .pma-accordion .pma-accordion__list { grid-template-columns: 1fr; margin-left: 0; } }

/* Services — two-column grid inside accordion */
.pma-service-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
    margin-left: 48px;
}
.pma-service-grid__intro {
    font-size: 15px;
    line-height: 1.6;
    color: var(--pma-ink);
    max-width: 420px;
}
.pma-service-grid__intro p { margin: 0 0 12px; }
.pma-service-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pma-service-list li {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 18px 0;
    border-top: 1px solid var(--pma-ink);
    color: var(--pma-ink);
}
@media (max-width: 959.98px) {
    .pma-service-grid { grid-template-columns: 1fr; gap: 32px; margin-left: 0; }
    .pma-service-grid__intro { max-width: none; }
}

/* Services — page header underline */
.pma-services-header { padding-bottom: 40px !important; border-bottom: 1px solid var(--pma-ink); }

/* Related projects — dark background covers only upper zone (behind imgs) */
.pma-related { position: relative; }
.pma-related__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--pma-dark);
    z-index: 0;
    pointer-events: none;
    height: 70%;
}
.pma-related__inner { position: relative; z-index: 1; }
.pma-related--dark .pma-eyebrow,
.pma-related--dark .pma-h2 { color: #fff; }
.pma-related--dark .pma-rule { border-top-color: rgba(255,255,255,.25); }

/* ==========================================================
   FILTERS — dropdown style (Projects)
   ========================================================== */
.pma-filters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 24px 0 0; border-bottom: 1px solid var(--pma-ink); }
.pma-filter-group { position: relative; }
.pma-filter-group__label {
    display: block; font-size: 10px; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--pma-ink); opacity: .5; margin-bottom: 10px;
}
.pma-filter-group__toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 26px 0; min-height: 72px;
    background: transparent; border: 0; border-top: 1px solid var(--pma-ink);
    font-family: inherit;
    font-size: 14px; font-weight: 500;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--pma-ink); cursor: pointer;
}
/* Indicador: esquina en L (corchete corporativo) en vez de flecha */
.pma-filter-group__toggle::after {
    content: "";
    width: 11px; height: 11px;
    flex-shrink: 0;
    border-bottom: 2px solid var(--pma-ink);
    border-right: 2px solid var(--pma-ink);
    transition: transform .3s var(--pma-ease-out);
}
.pma-filter-group__toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}
.pma-filter-group__menu {
    padding: 16px 0;
    min-width: 240px; background: #fff;
    border: 1px solid var(--pma-ink);
}
.pma-filter-group__menu label {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 18px;
    font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
    cursor: pointer;
}
.pma-filter-group__menu label:hover { background: rgba(0,0,0,.04); }
.pma-filter-group__menu input { margin: 0; accent-color: var(--pma-ink); }
/* Filtros en movil: compactos al maximo. Una columna, sin gap entre
   grupos (cada uno separado solo por su borde), botones de poca altura
   y label integrado pegado. */
@media (max-width: 639.98px) {
    .pma-filters {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 8px 0 0;
    }
    .pma-filter-group__label {
        font-size: 9px;
        margin-bottom: 0;
        padding-top: 12px;
        opacity: .45;
    }
    .pma-filter-group__toggle {
        min-height: 0;
        padding: 8px 0 14px;
        font-size: 15px;
        border-top: 0;        /* el label ya separa visualmente */
    }
    /* Linea divisoria fina entre grupos */
    .pma-filter-group + .pma-filter-group .pma-filter-group__label {
        border-top: 1px solid rgba(43,43,43,.18);
    }
}

/* ==========================================================
   FORM
   ========================================================== */
.pma-form label {
    display: block;
    font-size: 12px; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--pma-ink); opacity: .6;
    margin-bottom: 8px;
}
.pma-form input[type="text"],
.pma-form input[type="email"],
.pma-form input[type="tel"],
.pma-form textarea {
    width: 100%; box-sizing: border-box;
    padding: 10px 0; font-family: inherit;
    font-size: 15px; color: var(--pma-ink);
    background: transparent;
    border: 0; border-bottom: 1px solid var(--pma-ink);
    outline: none;
    transition: border-color .2s;
}
.pma-form input:focus,
.pma-form textarea:focus { border-bottom-color: var(--pma-ink); }
.pma-form input::placeholder,
.pma-form textarea::placeholder { color: rgba(26,26,26,.35); }
.pma-form textarea { min-height: 100px; resize: vertical; }
.pma-form .uk-checkbox { border-color: var(--pma-ink); }
.pma-form small { font-size: 11px; color: var(--pma-ink); line-height: 1.4; /* display: block; */ }
.pma-form small a { text-decoration: underline; }
.pma-form .custom-alert-box { border-bottom-color: #c0392b !important; }

/* Dark form */
.pma-dark .pma-form label { color: rgba(255,255,255,.6); }
.pma-dark .pma-form input,
.pma-dark .pma-form textarea { color: #fff; border-bottom-color: rgba(255,255,255,.3); }
.pma-dark .pma-form input::placeholder,
.pma-dark .pma-form textarea::placeholder { color: rgba(255,255,255,.3); }
.pma-dark .pma-form input:focus,
.pma-dark .pma-form textarea:focus { border-bottom-color: #fff; }
.pma-dark .pma-form small { color: rgba(255,255,255,.6); }
.pma-dark .pma-form small a { color: #fff; }

/* ==========================================================
   SECTION HEADER (title + cta right)
   ========================================================== */
.pma-section-head { margin-bottom: 56px; }
.pma-section-head__title h2 { margin: 0; }
.pma-section-head__cta { margin-top: 12px; width: 100%; }
.pma-section-head__cta .pma-cta,
.pma-section-head__cta .pma-cta--sm { width: 100%; max-width: none; }

@media (max-width: 639.98px) {
    .pma-section-head__cta { margin-top: 0; }
}

/* ==========================================================
   CLIENTS / PARTNERS LOGO GRID
   ========================================================== */
.pma-logos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px 32px;
    align-items: center;
}
.pma-logos > div { display: flex; align-items: center; justify-content: center; padding: 20px; min-height: 80px; }
.pma-logos img { max-height: 60px; width: auto; filter: grayscale(1); opacity: .8; transition: opacity .3s; }
.pma-logos img:hover { opacity: 1; }
@media (max-width: 959.98px) { .pma-logos { grid-template-columns: repeat(3, 1fr); gap: 32px 20px; } }
@media (max-width: 639.98px) { .pma-logos { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; } }

/* ==========================================================
   LOGOS SLIDER (UIkit uk-slider para partners / clients)
   ========================================================== */
.pma-logos-slider { position: relative; }
.pma-logos__item {
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    min-height: 80px;
}
.pma-logos__item img {
    max-height: 75px;
    width: auto;
    filter: grayscale(1);
    opacity: 1;
    transition: opacity .3s, filter .3s;
}
.pma-logos__item a:hover img,
.pma-logos__item:hover img { opacity: 1; filter: grayscale(0); }

/* ==========================================================
   PROJECT DETAIL
   ========================================================== */
.pma-project-hero { position: relative; }
.pma-project-hero__media {
    position: relative; width: 100%;
    height: min(70vh, 720px);
    background-size: cover; background-position: center;
    overflow: hidden;
}

/* Breadcrumb de regreso */
.pma-project-back {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 11px; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--pma-ink);
    margin-bottom: clamp(24px, 3vw, 40px);
}
.pma-project-back__arrow { display: inline-block; }
.pma-project-back:hover { opacity: .7; }

/* ==========================================================
   BRACKETS — corchete TL + corchete BR decorativos
   Clase reutilizable: aplicar .pma-bracketed al elemento
   y se dibujarán los dos SVG en las esquinas opuestas.
   Variables tunables:
     --bracket-size : tamaño del corchete (px)
     --bracket-inset: separación al borde (px)
   ========================================================== */
.pma-bracketed {
    position: relative;
    --bracket-size: 40px;
    --bracket-inset: 0px;
}
.pma-bracketed::before,
.pma-bracketed::after {
    content: "";
    position: absolute;
    width: var(--bracket-size);
    height: var(--bracket-size);
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}
.pma-bracketed::before {
    top: var(--bracket-inset);
    left: var(--bracket-inset);
    background-image: url("/assets/front_img/arrow-up-left.svg");
}
.pma-bracketed::after {
    bottom: var(--bracket-inset);
    right: var(--bracket-inset);
    background-image: url("/assets/front_img/arrow-bottom-right.svg");
}

/* Título gigante del detalle de proyecto, enmarcado por corchetes.
   display: block + width: fit-content → ocupa su propia línea pero los corchetes
   se ciñen al ancho real del texto, no al del contenedor. */
.pma-project-title {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 clamp(32px, 4vw, 64px);
    padding: clamp(12px, 1.2vw, 20px) clamp(14px, 1.4vw, 24px);
    font-size: clamp(48px, 6vw, 112px);
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: .95;
    text-transform: uppercase;
    color: var(--pma-ink);
    --bracket-size: .32em;
}
/* Peso visual del corchete: aumentamos el trazo del SVG con un filtro.
   Como los SVG son outlines finos, los engordamos con drop-shadow 0 0 simulando stroke. */
.pma-project-title.pma-bracketed::before,
.pma-project-title.pma-bracketed::after {
    filter:
        drop-shadow(1px 0 0 var(--pma-ink))
        drop-shadow(-1px 0 0 var(--pma-ink))
        drop-shadow(0 1px 0 var(--pma-ink))
        drop-shadow(0 -1px 0 var(--pma-ink));
}

/* Metadata como lista con líneas separadoras (dl semántica) */
.pma-meta { margin: 0; padding: 0; }
.pma-meta__row {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 24px;
    align-items: baseline;
    padding: 14px 0;
    border-top: 1px solid var(--pma-line);
}
.pma-meta__row:last-child { border-bottom: 1px solid var(--pma-line); }
.pma-meta dt {
    margin: 0;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pma-muted);
}
.pma-meta dd {
    margin: 0;
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pma-ink);
    text-align: right;
}

/* Galería del detalle de proyecto: altura uniforme + background-image via uk-img.
   uk-img en un elemento no-<img> inyecta data-src como background-image. */
.pma-gallery { --pma-gallery-h: clamp(360px, 46vw, 640px); }
.pma-gallery .pma-gallery__item {
    display: block;
    overflow: hidden;
    width: 100%;
    height: var(--pma-gallery-h);
    background-color: #F5F5F5;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform .6s var(--pma-ease-out);
}
.pma-gallery .pma-gallery__item:hover { transform: scale(1.02); }
/* Los bloques de texto comparten altura con las fotos para alinear filas */
.pma-gallery__text { min-height: var(--pma-gallery-h); }
@media (max-width: 639.98px) {
    .pma-gallery { --pma-gallery-h: 260px; }
    .pma-gallery__text { min-height: auto; }
}

/* Bloques de texto dentro de la galería: centrados verticalmente */
.pma-gallery__text {
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(32px, 6vw, 80px) clamp(24px, 4vw, 64px);
    height: 100%;
    min-height: 240px;
    text-align: left;
}
.pma-gallery__text > * { max-width: 52ch; }
.pma-gallery__text-title {
    font-size: clamp(22px, 2.2vw, 36px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.01em;
    text-transform: uppercase;
    margin: 0 0 16px;
    color: var(--pma-ink);
}
.pma-gallery__text-subtitle {
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.3;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pma-muted);
    margin: 0 0 24px;
}
.pma-gallery__text-body,
.pma-gallery__text-body p {
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: 1.5;
    color: var(--pma-ink);
    margin: 0 0 16px;
}
.pma-gallery__text-body p:last-child { margin-bottom: 0; }
.pma-gallery__text-body strong,
.pma-gallery__text-body b { font-weight: 600; }
.pma-gallery__text-body em,
.pma-gallery__text-body i { font-style: italic; }

@media (max-width: 639.98px) {
    .pma-gallery__text { padding: 32px 0; }
}

/* ==========================================================
   CONTACT PAGE — address + map
   ========================================================== */
.pma-contact-info p { font-size: 14px; line-height: 1.55; margin: 0 0 6px; }
.pma-contact-info a { color: var(--pma-ink); text-decoration: none; }
.pma-contact-info a:hover { opacity: .6; }

.pma-map { width: 100%; height: 520px; background: #F2F2F2; overflow: hidden; position: relative; }
.pma-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ==========================================================
   FOOTER
   ========================================================== */
.pma-footer { background: #fff; padding: 96px 0 32px; position: relative; border-top: 1px solid #2B2B2B; }
.pma-footer__left { display: flex; gap: 28px; flex-wrap: wrap; }
.pma-footer__logo img { width: 100%; max-width: 140px; height: auto; display: block; }
.pma-footer__social { display: flex; gap: 10px; }
.pma-footer__social a {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--pma-ink);
    border: 1px solid var(--pma-ink);
}
.pma-footer__social a:hover { opacity: .5; }

.pma-footer__label { display: block; font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--pma-muted); margin-bottom: 14px; }
.pma-footer__badges { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.pma-footer__badges img { max-height: 35px; width: auto; }

.pma-footer__contact p { font-size: 13px; line-height: 1.55; color: var(--pma-ink); margin: 0 0 2px; }
.pma-footer__contact a { color: inherit; }

.pma-footer__bottom {
    display: flex; justify-content: space-between; align-items: center; gap: 24px;
    padding-top: 24px; margin-top: 48px;
    border-top: 1px solid var(--pma-ink);
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--pma-muted);
}
.pma-footer__bottom a { color: var(--pma-muted); margin-left: 18px; }
.pma-footer__bottom a:hover { color: var(--pma-ink); opacity: 1; }

@media (max-width: 959.98px) {
    .pma-footer { padding: 64px 0 24px; }
    .pma-footer__bottom { flex-direction: column; align-items: flex-start; }
    .pma-footer__bottom a { margin-left: 0; margin-right: 16px; }
}

/* ==========================================================
   ARTICLE DETAIL
   ========================================================== */
.pma-article { max-width: 820px; margin: 0 auto; }
.pma-article p { font-size: 15px; line-height: 1.7; margin: 0 0 18px; }
.pma-article h2 { font-size: clamp(18px, 1.5vw, 22px); margin: 40px 0 14px; }
.pma-article h3 { font-size: 15px; margin: 28px 0 10px; }

/* ==========================================================
   UTILITIES
   ========================================================== */
.pma-stack-sm > * + * { margin-top: 16px; }
.pma-stack > * + * { margin-top: 32px; }
.pma-stack-lg > * + * { margin-top: 64px; }

.pma-divider-top { border-top: 1px solid var(--pma-ink); padding-top: 40px; }
.pma-divider-bottom { border-bottom: 1px solid var(--pma-ink); padding-bottom: 40px; }

/* ==========================================================
   RESPONSIVE — ajustes consolidados tablet / movil
   Breakpoints alineados con UIkit:
     @s = 640px  @m = 960px  @l = 1200px  @xl = 1600px
   Para overrides "hacia abajo" usamos max-width al valor del
   breakpoint inferior - 1px (959.98 / 639.98), como hace UIkit.
   ========================================================== */

/* ---- Nav desktop en pantallas L medianas (1200-1400px): gap mas ajustado.
   El nav desktop solo se ve a partir de @l (1200px); por debajo es offcanvas. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .pma-nav .uk-navbar-nav { gap: 30px; }
}

/* ---- TABLET y abajo (< @m, 960px) ---- */
@media (max-width: 959.98px) {
    /* Hero: el texto del titulo un punto mas contenido */
    .pma-hero__title-text { font-size: clamp(34px, 6vw, 76px); }

    /* CTA: algo mas compacto */
    .pma-cta { min-height: 64px; padding: 16px 20px 16px 26px; }

    /* About: menos padding vertical */
    .pma-about { min-height: 480px; padding: 90px 24px; }

    /* Mapa de contacto mas bajo */
    .pma-map { height: 420px; }

    /* Quote / callouts: menos padding */
    .pma-quote, .pma-tcallout { padding: 36px 28px; }
}

/* ---- MOVIL y abajo (< @s, 640px) ---- */
@media (max-width: 639.98px) {
    /* Tipografia: bajar minimos para que no desborde en pantallas estrechas */
    .pma-display { font-size: clamp(46px, 13vw, 72px); }
    .pma-h1      { font-size: clamp(36px, 10vw, 56px); }
    .pma-h2      { font-size: clamp(34px, 9vw, 52px); }
    .pma-h3      { font-size: clamp(26px, 7vw, 40px); }
    .pma-lead    { font-size: clamp(24px, 6.5vw, 40px); }

    /* Cabecera de paginas interiores: reducir el aire vertical excesivo
       del titulo. uk-section-xlarge da 96px+; en movil basta mucho menos. */
    .uk-section-xlarge { padding-top: 40px; padding-bottom: 32px; }
    /* La seccion que contiene los filtros, pegada al titulo: sin tanto aire */
    .uk-section:has(.pma-filters) { padding-top: 8px; padding-bottom: 24px; }
    .pma-filters { padding-top: 0; }

    /* Hero: titulo mas pequeno + corchetes mas discretos */
    .pma-hero__title-text { font-size: clamp(30px, 8.5vw, 48px); }
    .pma-hero__bracket { width: clamp(34px, 9vw, 52px); height: clamp(34px, 9vw, 52px); }

    /* Hero UI inferior: reorganizar para que counter + dots + scroll-cta
       no se amontonen. Counter arriba en la zona inferior, dots abajo,
       scroll-cta se oculta (el scroll natural ya invita a bajar). */
    .pma-hero__counter {
        bottom: auto; top: clamp(88px, 14vh, 120px);
        left: clamp(20px, 6vw, 40px);
    }
    .pma-hero__dots { bottom: clamp(26px, 5vh, 40px); }
    .pma-hero__scroll-cta { display: none; }

    /* About: padding reducido */
    .pma-about { min-height: 380px; padding: 56px 20px; }
    .pma-about__content p { font-size: clamp(18px, 5vw, 24px); }

    /* Mapa de contacto: altura compacta */
    .pma-map { height: 300px; }

    /* CTA: mas compacto */
    .pma-cta { min-height: 58px; padding: 14px 16px 14px 20px; }

    /* Quote / callouts: padding minimo */
    .pma-quote, .pma-tcallout { padding: 28px 20px; }

    /* Footer: aire entre columnas apiladas */
    .pma-footer { padding: 56px 0 24px; }
    .pma-footer .uk-grid > * + * { margin-top: 36px; }
    .pma-footer__badges img { max-height: 30px; }

    /* Section head: el CTA debajo del titulo con aire */
    .pma-section-head__cta { margin-top: 24px; }

    /* Cards de proyecto: barra inferior mas compacta */
    .pma-card__bar { min-height: 56px; padding: 12px 14px; }
}