/*
 * portada.css - Redisenio de la portada de Los Arcos Inmobiliaria.
 *
 * Todo va prefijado `pa-` a proposito. La hoja convive con app-saas.min.css
 * (Bootstrap), estilo.css e inmobiliaria.css, que ya se pisan entre ellas: el
 * prefijo garantiza que nada de aqui se filtre a las otras seis paginas ni al
 * reves. Cuando el sistema se generalice al sitio entero (fase 2) esta hoja se
 * convierte en la base y las otras se retiran.
 *
 * La paleta sale de los tokens que ya existian en customHeader.css
 * (--los-arcos-primary / --los-arcos-secundary); aqui solo se derivan los
 * matices que hacian falta, sin inventar colores de marca nuevos.
 */

.pa-body {
    --pa-primary: #2A5779;
    --pa-primary-deep: #17344a;
    --pa-primary-ink: #0d2233;
    --pa-gold: #C6AB7C;
    --pa-gold-soft: #e3d3b6;
    --pa-cream: #f7f4ef;
    --pa-paper: #ffffff;
    --pa-ink: #14202b;
    --pa-muted: #63727f;
    --pa-line: rgba(20, 32, 43, .12);
    --pa-line-light: rgba(255, 255, 255, .18);

    --pa-ease: cubic-bezier(.22, 1, .36, 1);
    --pa-radius: 18px;
    --pa-gutter: clamp(1.25rem, 5vw, 4.5rem);

    /* Alto de la barra de navegacion. portada.js lo mide y lo reescribe; este
       valor es el de arranque para que el hero no salte al cargar. */
    --pa-nav: 116px;

    background: var(--pa-paper);
    color: var(--pa-ink);
    overflow-x: hidden;
}

.pa-body ::selection {
    background: var(--pa-gold);
    color: var(--pa-primary-ink);
}

/*
  El ancla del hero apunta a #pa-destacadas; sin esto el salto lo dejaria
  debajo de la barra pegajosa.

  Deliberadamente NO se pone `scroll-behavior: smooth`: el desplazamiento suave
  del navegador y el `pin` de ScrollTrigger se pelean por la posicion del
  scroll y la seccion anclada da tirones.
*/
.pa-body {
    scroll-padding-top: var(--pa-nav);
}

.pa-main {
    /* Anula el `min-height: 100dvh` y el display de rejilla que customHeader.css
       le pone a #toDown pensando en las paginas antiguas. */
    min-height: 0;
    display: block;
}

.pa-wrap {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: var(--pa-gutter);
}

/* ------------------------------------------------------------------ *
 *  Tipografia                                                         *
 * ------------------------------------------------------------------ */

.pa-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3.75rem);
    line-height: 1.06;
    letter-spacing: -.015em;
    margin: 0 0 1rem;
    color: var(--pa-primary-ink);
}

.pa-title--light {
    color: #fff;
}

.pa-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1.1rem;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--pa-muted);
}

.pa-eyebrow--light {
    color: var(--pa-gold-soft);
}

.pa-eyebrow__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pa-gold);
    flex: none;
}

/* Cada linea que parte SplitText va en una ventana con `overflow: hidden`,
   para que el texto entre deslizandose desde debajo del recorte. */
.pa-line-mask {
    display: block;
    overflow: hidden;
}

/* ------------------------------------------------------------------ *
 *  Botones y enlaces                                                  *
 * ------------------------------------------------------------------ */

.pa-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: 1rem 1.75rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    overflow: hidden;
    transition: color .35s var(--pa-ease), border-color .35s var(--pa-ease),
                transform .35s var(--pa-ease);
}

.pa-btn--sm {
    padding: .75rem 1.3rem;
    font-size: .72rem;
}

/* El relleno que sube al pasar el raton es un pseudoelemento y no un cambio de
   background, para que la transicion sea de transform y no repinte. */
.pa-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    transform: translateY(101%);
    transition: transform .45s var(--pa-ease);
}

.pa-btn > * {
    position: relative;
    z-index: 1;
}

.pa-btn:hover::after,
.pa-btn:focus-visible::after {
    transform: translateY(0);
}

.pa-btn--solid {
    background: var(--pa-gold);
    color: var(--pa-primary-ink);
}

.pa-btn--solid::after {
    background: var(--pa-primary-ink);
}

.pa-btn--solid:hover,
.pa-btn--solid:focus-visible {
    color: var(--pa-gold);
}

.pa-btn--ghost {
    background: transparent;
    border-color: currentColor;
    color: #fff;
}

.pa-btn--ghost::after {
    background: #fff;
}

.pa-btn--ghost:hover,
.pa-btn--ghost:focus-visible {
    color: var(--pa-primary-ink);
}

/* Sobre fondo claro el fantasma necesita tinta oscura. */
.pa-section .pa-btn--ghost {
    color: var(--pa-primary-ink);
}

.pa-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--pa-primary);
    border-bottom: 1px solid var(--pa-gold);
    padding-bottom: .3rem;
    transition: gap .3s var(--pa-ease), color .3s var(--pa-ease);
}

.pa-link:hover {
    gap: .95rem;
    color: var(--pa-primary-ink);
}

/* ------------------------------------------------------------------ *
 *  Barra de navegacion                                                *
 * ------------------------------------------------------------------ */

/*
  Flota sobre el hero, de modo que la foto ocupa la pantalla entera. `fixed` y
  no `sticky`: tiene que esconderse y reaparecer segun la direccion del scroll,
  y eso lo hace portada.js moviendola en Y.
*/
.pa-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    transition: background-color .45s var(--pa-ease),
                backdrop-filter .45s var(--pa-ease),
                box-shadow .45s var(--pa-ease);
}

/* Fuera del hero la barra se apoya sobre el contenido y necesita fondo. */
.pa-nav.is-solid {
    background: rgba(13, 34, 51, .88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 var(--pa-line-light);
}

.pa-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding: clamp(1rem, 2.2vh, 1.6rem) var(--pa-gutter);
    transition: padding .45s var(--pa-ease);
}

.pa-nav.is-solid .pa-nav__inner {
    padding-block: .8rem;
}

/*
  El logo se dimensiona por ALTO y con `width: auto`: la imagen declara sus
  medidas reales (1366x551) para que el navegador reserve el hueco, y el alto de
  aqui es el que manda. Poner un ancho fijo lo deformaria en cuanto se retoque
  el archivo.
*/
.pa-nav__logo {
    display: block;
    text-decoration: none;
    line-height: 0;
    flex: none;
}

.pa-nav__logo img {
    display: block;
    height: 32px;
    width: auto;
    transition: height .45s var(--pa-ease);
}

/* Al compactarse la barra, el logo encoge con ella. */
.pa-nav.is-solid .pa-nav__logo img {
    height: 26px;
}

.pa-nav__links {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2.8vw, 2.6rem);
}

.pa-nav__link {
    text-decoration: none;
    color: rgba(255, 255, 255, .82);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: color .3s var(--pa-ease);
}

.pa-nav__link:hover {
    color: var(--pa-gold);
}

/*
  Ventana con recorte que muestra una de las dos copias del texto. Al pasar el
  raton sube el bloque entero: sale la primera copia y entra la segunda, que es
  la misma palabra, de modo que el efecto se ve como un giro y no como un
  cambio de texto.
*/
.pa-roll {
    display: block;
    position: relative;
    overflow: hidden;
    height: 1.2em;
}

.pa-roll > span {
    display: block;
    height: 1.2em;
    line-height: 1.2em;
    transition: transform .45s var(--pa-ease);
}

.pa-nav__link:hover .pa-roll > span,
.pa-nav__link:focus-visible .pa-roll > span {
    transform: translateY(-100%);
}

.pa-nav__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: none;
}

.pa-nav__cta {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1.25rem;
    border-radius: 999px;
    border: 1px solid var(--pa-gold);
    color: var(--pa-gold);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .35s var(--pa-ease), color .35s var(--pa-ease);
}

.pa-nav__cta:hover {
    background: var(--pa-gold);
    color: var(--pa-primary-ink);
}

/* --------------------------- hamburguesa -------------------------- */

.pa-burger {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--pa-line-light);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
}

.pa-burger__linea {
    position: absolute;
    left: 50%;
    width: 18px;
    height: 1.5px;
    margin-left: -9px;
    background: #fff;
    transition: transform .4s var(--pa-ease), opacity .3s var(--pa-ease);
}

.pa-burger__linea:first-child {
    top: 18px;
}

.pa-burger__linea:last-child {
    bottom: 18px;
}

.pa-burger.is-open .pa-burger__linea:first-child {
    transform: translateY(4px) rotate(45deg);
}

.pa-burger.is-open .pa-burger__linea:last-child {
    transform: translateY(-4px) rotate(-45deg);
}

/* ------------------------- panel de movil ------------------------- */

/*
  Arranca cerrado con `visibility: hidden`, no con `display: none`: asi los
  enlaces siguen existiendo para quien navegue con teclado o lector una vez
  abierto, y GSAP puede animar el panel sin tener que forzar un reflow.
*/
.pa-menu {
    position: fixed;
    inset: 0;
    z-index: 880;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6rem var(--pa-gutter) 3rem;
    background: var(--pa-primary-ink);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transition: visibility .5s, opacity .5s var(--pa-ease), clip-path .6s var(--pa-ease);
}

.pa-menu.is-open {
    visibility: visible;
    opacity: 1;
    clip-path: inset(0 0 0 0);
}

.pa-menu__links {
    display: flex;
    flex-direction: column;
}

.pa-menu__links a {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: .7rem 0;
    font-family: 'Playfair Display', serif;
    /* `nav a` de customHeader.css pone versales a todo enlace de navegacion.
       Aqui los nombres van grandes y en Playfair: en versales pierden la caja
       alta que les da la forma. */
    text-transform: none;
    letter-spacing: -.01em;
    font-weight: 700;
    font-size: clamp(2rem, 9vw, 3.25rem);
    line-height: 1.1;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid var(--pa-line-light);
    transition: color .3s var(--pa-ease), padding-left .35s var(--pa-ease);
}

.pa-menu__links a:hover {
    color: var(--pa-gold);
    padding-left: .5rem;
}

.pa-menu__links span {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    font-size: .7rem;
    letter-spacing: .12em;
    color: var(--pa-gold);
}

.pa-menu__pie {
    margin-top: 2.5rem;
}

.pa-menu__titulo {
    margin: 0 0 .75rem;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--pa-gold);
}

.pa-menu__zonas {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 2rem;
}

.pa-menu__zonas a {
    padding: .45rem 1rem;
    border: 1px solid var(--pa-line-light);
    border-radius: 999px;
    font-size: .82rem;
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    transition: background .3s var(--pa-ease), color .3s var(--pa-ease),
                border-color .3s var(--pa-ease);
}

.pa-menu__zonas a:hover {
    background: var(--pa-gold);
    border-color: var(--pa-gold);
    color: var(--pa-primary-ink);
}

.pa-menu__tel {
    display: block;
    margin-bottom: .45rem;
    font-size: 1.05rem;
    color: #fff;
    text-decoration: none;
}

.pa-menu__tel:hover {
    color: var(--pa-gold);
}

/* El correo es mas largo que un telefono y a 1.05rem se sale en pantallas de
   360 px. */
.pa-menu__tel--correo {
    font-size: .92rem;
    word-break: break-word;
}

/* Mientras el panel esta abierto el fondo no debe poder desplazarse. */
.pa-body.pa-sin-scroll {
    overflow: hidden;
}

/* ------------------------------------------------------------------ *
 *  Cabecera de pagina interior                                        *
 * ------------------------------------------------------------------ */

/*
  Lo que en la portada es el hero a pantalla completa, en el resto del sitio es
  esta banda corta: sitúa dónde estás y da paso al contenido sin robarle una
  pantalla entera. Deja arriba el hueco de la barra, que flota por encima.
*/
.pa-pagehead {
    position: relative;
    padding: calc(var(--pa-nav) + clamp(2.5rem, 7vh, 4.5rem)) var(--pa-gutter)
             clamp(2.5rem, 7vh, 4.5rem);
    background: var(--pa-primary-ink);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

.pa-pagehead__inner {
    position: relative;
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
}

.pa-pagehead__title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(2.1rem, 5.5vw, 3.75rem);
    line-height: 1.06;
    letter-spacing: -.015em;
    margin: 0;
    color: #fff;
    max-width: 20ch;
}

.pa-pagehead__title em {
    font-style: italic;
    color: var(--pa-gold);
}

.pa-pagehead__lead {
    max-width: 52ch;
    margin: 1rem 0 0;
    font-size: clamp(1rem, 1.5vw, 1.12rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, .78);
}

/* La marca a sangre, recortada por el borde, como en el pie. Decorativa. */
.pa-pagehead__marca {
    position: absolute;
    right: -.04em;
    bottom: -.3em;
    z-index: 0;
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(5rem, 16vw, 13rem);
    line-height: .78;
    letter-spacing: -.03em;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px rgba(198, 171, 124, .16);
    user-select: none;
    pointer-events: none;
}

/* ------------------------------------------------------------------ *
 *  Migas y filtros                                                    *
 * ------------------------------------------------------------------ */

.pa-migas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.1rem;
    font-size: .8rem;
    color: rgba(255, 255, 255, .55);
}

.pa-migas a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    transition: color .3s var(--pa-ease);
}

.pa-migas a:hover {
    color: var(--pa-gold);
}

.pa-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: clamp(2rem, 4vh, 3rem);
}

.pa-filtros a {
    padding: .5rem 1.15rem;
    border: 1px solid var(--pa-line);
    border-radius: 999px;
    font-size: .82rem;
    color: var(--pa-muted);
    text-decoration: none;
    transition: background .3s var(--pa-ease), color .3s var(--pa-ease),
                border-color .3s var(--pa-ease);
}

.pa-filtros a:hover {
    border-color: var(--pa-primary-ink);
    color: var(--pa-primary-ink);
}

/* La zona que se esta viendo: no lleva a ninguna parte nueva, y decirlo evita
   que se pulse esperando un cambio. */
.pa-filtros a.is-activa {
    background: var(--pa-primary-ink);
    border-color: var(--pa-primary-ink);
    color: var(--pa-gold);
}

/* ------------------------------------------------------------------ *
 *  Ficha de propiedad y de plaza                                      *
 * ------------------------------------------------------------------ */

.pa-ficha {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}

.pa-ficha__etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.25rem 0 0;
}

/* En la cabecera oscura las etiquetas van sueltas, no sobre la foto: sin
   `position: absolute`, que es lo que hacen dentro de una tarjeta. */
.pa-pagehead .pa-card__tag {
    position: static;
}

.pa-card__tag--neutro {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.pa-pagehead__accion {
    margin: 1.5rem 0 0;
}

.pa-ficha__galeria .carousel-inner {
    border-radius: var(--pa-radius);
    overflow: hidden;
    background: var(--pa-cream);
}

.pa-ficha__galeria img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.pa-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: .6rem;
    margin: 0 0 1.25rem;
}

.pa-dato {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: .9rem .75rem;
    background: var(--pa-cream);
    border-radius: 12px;
    text-align: center;
}

.pa-dato .mdi {
    font-size: 1.25rem;
    line-height: 1;
    color: var(--pa-gold);
}

.pa-dato dt {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.1;
    color: var(--pa-primary-ink);
}

.pa-dato dd {
    margin: .25rem 0 0;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pa-muted);
}

.pa-btn--bloque {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-bottom: .6rem;
}

.pa-ficha__descripcion {
    margin-top: clamp(2.5rem, 5vh, 4rem);
    max-width: 72ch;
}

/* La descripcion es HTML redactado a mano en el catalogo: listas, negritas y
   saltos. Se le da ritmo sin tocar su marcado. */
.pa-prosa {
    color: var(--pa-muted);
    line-height: 1.8;
}

.pa-prosa p {
    margin: 0 0 1rem;
}

.pa-prosa ul,
.pa-prosa ol {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.pa-prosa li {
    margin-bottom: .4rem;
}

.pa-prosa strong {
    color: var(--pa-primary-ink);
}

/* El video y la descripcion de la plaza comparten fila: el video es vertical y
   estrecho, y la descripcion llena el resto en vez de dejar hueco. */
.pa-plaza__cierre {
    display: grid;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}

.pa-plaza__cierre .pa-ficha__descripcion {
    margin-top: 0;
}

/* El video de la plaza: vertical, como los reels que publica la marca. */
.pa-plaza__video {
    position: relative;
    aspect-ratio: 9 / 16;
    width: 100%;
    max-width: 340px;
    margin-inline: auto;
    border-radius: var(--pa-radius);
    overflow: hidden;
    background: var(--pa-primary-ink);
    border: 1px solid var(--pa-line);
}

.pa-plaza__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ------------------------------------------------------------------ *
 *  Bloques de texto (Historia, Mision, Vision, Valores)               *
 * ------------------------------------------------------------------ */

/*
  Van centrados, titulos, textos y listas incluidos. No es una preferencia
  estetica: es una regla del proyecto (AGENTS.md §4) y por eso estos bloques no
  heredan la alineacion a la izquierda del resto del sitio.
*/
.pa-bloque {
    display: flex;
    flex-direction: column;
    padding: clamp(1.75rem, 3vw, 2.75rem);
    background: var(--pa-paper);
    border: 1px solid var(--pa-line);
    border-radius: var(--pa-radius);
    text-align: center;
}

.pa-bloque--ancho {
    margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}

.pa-bloque__title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1.15;
    margin: 0 0 1.25rem;
    color: var(--pa-primary-ink);
}

.pa-bloque__texto {
    margin-inline: auto;
    max-width: 68ch;
    color: var(--pa-muted);
    line-height: 1.8;
}

.pa-bloque__texto p {
    margin: 0 0 1rem;
}

.pa-bloque__texto p:last-child {
    margin-bottom: 0;
}

/* La frase que cierra la historia: es la conclusion, no un parrafo mas. */
.pa-bloque__cierre {
    margin-top: 1.5rem;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    font-style: italic;
    line-height: 1.5;
    color: var(--pa-primary);
}

/*
  Las tres al mismo alto, sin huecos entre ellas. Con `align-items: start` cada
  una tomaba el suyo -Vision es corta, Valores larga- y la fila quedaba
  escalonada. `stretch` las iguala a la mas alta y el `height: 100%` de la
  tarjeta hace que el borde llegue abajo del todo.
*/
.pa-triada {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
    align-items: stretch;
}

.pa-triada .pa-bloque {
    height: 100%;
}

.pa-valores {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    color: var(--pa-muted);
    line-height: 1.75;
}

.pa-valores li + li {
    margin-top: 1.1rem;
}

.pa-valores strong {
    display: block;
    margin-bottom: .2rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: .74rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pa-gold);
}

/* ------------------------------------------------------------------ *
 *  Tarjetas de contacto                                               *
 * ------------------------------------------------------------------ */

.pa-contactos {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* Las tres en una fila y con la misma proporcion. Con `auto-fit` salia un dos
   mas uno en tablet; aqui es una columna hasta que caben las tres de verdad. */
@media (min-width: 900px) {
    .pa-contactos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.pa-contacto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--pa-paper);
    border: 1px solid var(--pa-line);
    border-radius: var(--pa-radius);
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: border-color .4s var(--pa-ease), box-shadow .4s var(--pa-ease),
                transform .4s var(--pa-ease);
}

/* Solo las que son enlace reaccionan al puntero: la de «Llámanos» es un
   contenedor con varias vias dentro, no un destino. */
a.pa-contacto:hover {
    border-color: var(--pa-gold);
    box-shadow: 0 24px 48px -28px rgba(20, 32, 43, .45);
    transform: translateY(-4px);
}

.pa-contacto__icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--pa-cream);
    color: var(--pa-primary);
    font-size: 1.2rem;
}

a.pa-contacto:hover .pa-contacto__icon {
    background: var(--pa-gold);
    color: var(--pa-primary-ink);
}

.pa-contacto__title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.35rem;
    margin: .3rem 0 0;
    color: var(--pa-primary-ink);
}

.pa-contacto__dato {
    margin: 0;
    font-weight: 600;
    color: var(--pa-primary);
    word-break: break-word;
}

.pa-contacto__nota {
    margin: 0;
    font-size: .88rem;
    color: var(--pa-muted);
}

.pa-contacto__vias {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .4rem;
}

.pa-contacto__vias a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    font-weight: 600;
    color: var(--pa-primary-ink);
    text-decoration: none;
    transition: color .3s var(--pa-ease);
}

.pa-contacto__vias a:hover {
    color: var(--pa-gold);
}

.pa-contacto__vias i {
    color: var(--pa-primary);
}

.pa-contacto__redes {
    margin-top: 1rem;
}

/* El fragmento `multimedia` trae su propio `container` de Bootstrap, que aqui
   aniade un ancho y unos margenes que no hacen falta. */
.pa-contacto__redes .container {
    max-width: none;
    padding: 0;
}

.pa-contacto__redes a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0 .5rem;
    font-size: .8rem;
    color: var(--pa-muted);
    text-decoration: none;
    transition: color .3s var(--pa-ease);
}

.pa-contacto__redes a:hover {
    color: var(--pa-gold);
}

/* ------------------------------------------------------------------ *
 *  Mapas                                                              *
 * ------------------------------------------------------------------ */

.pa-mapas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.pa-mapas__title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
    margin: 0 0 .3rem;
    color: var(--pa-primary-ink);
}

.pa-mapas__nota {
    margin: 0 0 1.1rem;
    font-size: .88rem;
    color: var(--pa-muted);
}

.pa-mapa {
    position: relative;
    aspect-ratio: 16 / 10;
    width: 100%;
    border-radius: var(--pa-radius);
    overflow: hidden;
    border: 1px solid var(--pa-line);
    background: var(--pa-cream);
}

.pa-mapa iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ------------------------------------------------------------------ *
 *  Telon de carga                                                     *
 * ------------------------------------------------------------------ */

.pa-loader[hidden] {
    display: none;
}

.pa-loader {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
}

.pa-loader__panel {
    position: absolute;
    left: 0;
    right: 0;
    height: 50.5%;
    background: var(--pa-primary-ink);
}

.pa-loader__panel--top {
    top: 0;
}

.pa-loader__panel--bottom {
    bottom: 0;
}

.pa-loader__core {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
}

.pa-loader__marca {
    display: block;
    height: clamp(44px, 9vw, 64px);
    width: auto;
}

.pa-loader__bar {
    width: min(260px, 50vw);
    height: 2px;
    background: rgba(255, 255, 255, .18);
    overflow: hidden;
}

.pa-loader__fill {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--pa-gold);
    transform: scaleX(0);
    transform-origin: left center;
}

.pa-loader__num {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: var(--pa-gold-soft);
    letter-spacing: .3em;
}

/* ------------------------------------------------------------------ *
 *  Hero                                                               *
 * ------------------------------------------------------------------ */

/* Pantalla completa: la barra flota encima, no le resta alto. El padding
   superior reserva su sitio para que el titular no quede debajo. */
.pa-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: calc(var(--pa-nav) + clamp(2rem, 8vh, 5rem)) var(--pa-gutter) clamp(2rem, 6vh, 4rem);
    overflow: hidden;
    background: var(--pa-primary-ink);
    isolation: isolate;
}

.pa-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.pa-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Encuadre alto: la marca de agua impresa en la foto queda por debajo del
       corte y la arqueria, que es lo que vale la pena ver, en el centro. */
    object-position: 60% 38%;
    opacity: 0;
}

.pa-hero__img.is-active {
    opacity: 1;
}

/*
  El velo hace dos cosas: da contraste al titular sobre cualquiera de las tres
  fotos y apaga la marca de agua que las fotos del catalogo traen impresa abajo
  a la izquierda, justo donde caen las cifras.
*/
.pa-hero__veil {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top, rgba(13, 34, 51, .97) 0%, rgba(13, 34, 51, .78) 32%, rgba(13, 34, 51, .3) 100%),
        linear-gradient(to right, rgba(13, 34, 51, .88) 0%, rgba(13, 34, 51, .35) 48%, rgba(13, 34, 51, 0) 78%);
}

.pa-hero__inner {
    position: relative;
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    color: #fff;
}

.pa-hero__eyebrow {
    color: var(--pa-gold-soft);
}

.pa-hero__title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(2.4rem, 7.2vw, 6rem);
    line-height: 1.02;
    letter-spacing: -.02em;
    margin: 0 0 1.25rem;
    color: #fff;
    max-width: 16ch;
}

.pa-hero__title em {
    font-style: italic;
    color: var(--pa-gold);
}

.pa-hero__lead {
    max-width: 46ch;
    margin: 0 0 2.25rem;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.65;
    color: rgba(255, 255, 255, .82);
}

.pa-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin-bottom: clamp(2.5rem, 7vh, 4.5rem);
}

.pa-hero__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1.5rem clamp(1.5rem, 4vw, 3.5rem);
    margin: 0;
    padding-top: 1.75rem;
    border-top: 1px solid var(--pa-line-light);
}

.pa-stat__num {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(1.9rem, 3.4vw, 2.9rem);
    line-height: 1;
    color: var(--pa-gold);
    margin: 0 0 .35rem;
}

/* La cifra que no es un numero ("Desde 2024") no lleva contador y a tamanio de
   titular se comia a las otras dos. Va un escalon por debajo. */
.pa-stat__num[data-plain="true"] {
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    padding-block: .35rem;
}

.pa-stat__label {
    margin: 0;
    font-size: .78rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
}

.pa-hero__scroll {
    position: relative;
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-top: 2rem;
    text-decoration: none;
    font-size: .7rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}

.pa-hero__scroll-line {
    display: block;
    width: 64px;
    height: 1px;
    background: rgba(255, 255, 255, .35);
    overflow: hidden;
    position: relative;
}

.pa-hero__scroll-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--pa-gold);
    transform-origin: left center;
    animation: pa-scroll-cue 2.2s var(--pa-ease) infinite;
}

@keyframes pa-scroll-cue {
    0%   { transform: scaleX(0); transform-origin: left center; }
    45%  { transform: scaleX(1); transform-origin: left center; }
    55%  { transform: scaleX(1); transform-origin: right center; }
    100% { transform: scaleX(0); transform-origin: right center; }
}

/* ------------------------------------------------------------------ *
 *  Cinta de zonas                                                     *
 * ------------------------------------------------------------------ */

.pa-marquee {
    overflow: hidden;
    background: var(--pa-primary-ink);
    border-top: 1px solid var(--pa-line-light);
    padding: 1.35rem 0;
}

.pa-marquee__track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.pa-marquee__group {
    display: flex;
    align-items: center;
    flex: none;
}

.pa-marquee__group > span {
    display: inline-flex;
    align-items: center;
}

.pa-marquee__group a,
.pa-marquee__group span span {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    white-space: nowrap;
    transition: color .3s var(--pa-ease);
}

.pa-marquee__group a:hover {
    color: var(--pa-gold);
}

.pa-marquee__sep {
    display: inline-block;
    margin: 0 clamp(1rem, 3vw, 2.5rem);
    font-size: .55em;
    font-style: normal;
    color: var(--pa-gold);
}

/* ------------------------------------------------------------------ *
 *  Secciones                                                          *
 * ------------------------------------------------------------------ */

.pa-section {
    padding: clamp(4.5rem, 12vh, 9rem) 0;
}

.pa-section--tint {
    background: var(--pa-cream);
}

.pa-head {
    max-width: 62ch;
    margin-bottom: clamp(2.5rem, 6vh, 4rem);
}

.pa-head__lead {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--pa-muted);
    margin: 0 0 1.5rem;
}

/* ------------------------------------------------------------------ *
 *  Tarjetas de propiedad                                              *
 * ------------------------------------------------------------------ */

.pa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

.pa-card {
    position: relative;
}

/*
  Variante de los listados: la tarjeta no es un <a> envolvente sino un
  contenedor con el enlace del titulo estirado por encima. Asi el boton del mapa
  puede vivir dentro sin anidar un boton dentro de un enlace.

  Se reconoce por el elemento en lugar de por una clase aparte porque las dos
  variantes son la misma tarjeta: lo unico que cambia es quien lleva el borde.
*/
article.pa-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--pa-paper);
    border: 1px solid var(--pa-line);
    border-radius: var(--pa-radius);
    overflow: hidden;
    transition: border-color .4s var(--pa-ease), box-shadow .4s var(--pa-ease);
}

article.pa-card:hover {
    border-color: var(--pa-gold);
    box-shadow: 0 24px 48px -28px rgba(20, 32, 43, .45);
}

article.pa-card:hover .pa-card__media img {
    transform: scale(1.06);
}

.pa-card__enlace {
    color: inherit;
    text-decoration: none;
}

/* Cubre la tarjeta entera: se puede pulsar en cualquier sitio y sigue siendo un
   enlace de verdad, con su URL y su menu contextual. */
.pa-card__enlace::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
}

.pa-card__enlace:focus-visible {
    outline: 2px solid var(--pa-gold);
    outline-offset: 3px;
}

/* Por encima del enlace estirado, o seria imposible pulsarlo. */
.pa-card__mapa {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 1;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--pa-line);
    border-radius: 50%;
    background: var(--pa-paper);
    color: var(--pa-primary);
    cursor: pointer;
    transition: background .35s var(--pa-ease), color .35s var(--pa-ease),
                border-color .35s var(--pa-ease);
}

.pa-card__mapa:hover,
.pa-card__mapa:focus-visible {
    background: var(--pa-primary-ink);
    border-color: var(--pa-primary-ink);
    color: var(--pa-gold);
}

/* Sitio para el boton, que flota sobre la esquina del cuerpo. */
article.pa-card .pa-card__body {
    padding-right: 4.25rem;
}

.pa-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    background: var(--pa-paper);
    border: 1px solid var(--pa-line);
    border-radius: var(--pa-radius);
    overflow: hidden;
    transition: border-color .4s var(--pa-ease), box-shadow .4s var(--pa-ease);
}

.pa-card__link:hover {
    border-color: var(--pa-gold);
    box-shadow: 0 24px 48px -28px rgba(20, 32, 43, .45);
}

.pa-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--pa-cream);
}

.pa-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--pa-ease);
}

.pa-card__link:hover .pa-card__media img {
    transform: scale(1.06);
}

.pa-card__tag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: .4rem .85rem;
    border-radius: 999px;
    background: var(--pa-gold);
    color: var(--pa-primary-ink);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.pa-card__tag.is-off {
    background: #b23b3b;
    color: #fff;
}

.pa-card__body {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1.5rem 1.5rem 1.25rem;
    flex: 1;
}

.pa-card__zone {
    margin: 0;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pa-gold);
}

.pa-card__title {
    font-family: 'Playfair Display', serif;
    font-size: 1.22rem;
    line-height: 1.3;
    margin: 0;
    color: var(--pa-primary-ink);
}

.pa-card__loc {
    margin: 0;
    font-size: .9rem;
    color: var(--pa-muted);
}

.pa-card__price {
    margin: auto 0 0;
    padding-top: 1rem;
    font-size: .95rem;
    font-weight: 700;
    color: var(--pa-primary);
}

.pa-card__arrow {
    position: absolute;
    right: 1.25rem;
    bottom: 1.15rem;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--pa-primary-ink);
    color: var(--pa-gold);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .35s var(--pa-ease), transform .35s var(--pa-ease);
}

.pa-card__link:hover .pa-card__arrow,
.pa-card__link:focus-visible .pa-card__arrow {
    opacity: 1;
    transform: translateY(0);
}

/* ------------------------------------------------------------------ *
 *  Showcase de video                                                  *
 * ------------------------------------------------------------------ */

.pa-showcase {
    background: var(--pa-primary-ink);
    color: #fff;
}

/*
  El bloque se queda pegado arriba mientras el scroll recorre la seccion, y
  portada.js va cambiando la propiedad activa segun el avance. Es igual en
  movil que en escritorio: lo unico que cambia es como se reparten las tres
  piezas y cuanto scroll ocupa cada propiedad.

  Es `position: sticky` y no el `pin` de ScrollTrigger a proposito: el pin
  envuelve el elemento en un contenedor que inserta y retira del DOM en cada
  refresco, y con las imagenes cargando en diferido acababa lanzando un
  NotFoundError al sacar dos veces el mismo nodo. El sticky nativo da el mismo
  efecto sin tocar el arbol, y ademas se mueve mas suave.

  El alto extra sale de `--pa-pasos`, que emite la plantilla con el numero de
  propiedades, y de `--pa-paso`, que es cuanto scroll cuesta cada una.
*/
.pa-showcase {
    --pa-paso: 55svh;
    height: calc(100svh + var(--pa-pasos, 6) * var(--pa-paso));
}

.pa-showcase__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    display: flex;
    align-items: center;
    padding: 0;
}

.pa-showcase__grid {
    display: grid;
    width: 100%;
    gap: clamp(1rem, 5vw, 4rem);
    align-content: center;
    grid-template-areas:
        "titulo"
        "player"
        "thumbs";
}

.pa-showcase__aside { grid-area: titulo; }
.pa-showcase__player { grid-area: player; }
.pa-thumbs { grid-area: thumbs; }

/*
  Sin `min-width: 0` estas dos columnas se estiran hasta caber su contenido en
  lugar de recortarlo: un elemento de rejilla arranca con `min-width: auto`, asi
  que la tira de miniaturas en movil -seis de 220 px- empujaba la columna hasta
  1368 px y sacaba un scroll horizontal a toda la pagina. El `overflow-x: auto`
  de la lista no servia de nada mientras su contenedor pudiera crecer.
*/
.pa-showcase__aside,
.pa-showcase__player {
    min-width: 0;
}

.pa-thumbs {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.pa-thumb {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: .7rem .9rem;
    background: transparent;
    /* customHeader.css pone `text-transform: uppercase` a todo `button`,
       pensando en los botones de accion. Aqui el texto es el nombre de la
       propiedad y en versales se vuelve ilegible. */
    text-transform: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 400;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0 12px 12px 0;
    text-align: left;
    color: rgba(255, 255, 255, .6);
    cursor: pointer;
    transition: background .35s var(--pa-ease), color .35s var(--pa-ease),
                border-color .35s var(--pa-ease);
}

/* En blanco y negro sobre el fondo oscuro las miniaturas se perdian y dejaban
   de cumplir su unica funcion, que es reconocer la propiedad de un vistazo.
   Van en color y lo que distingue a la activa es la opacidad. */
.pa-thumb img {
    width: 72px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    flex: none;
    opacity: .55;
    outline: 1px solid rgba(255, 255, 255, .14);
    outline-offset: -1px;
    transition: opacity .35s var(--pa-ease);
}

.pa-thumb__text {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.pa-thumb__title {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pa-thumb__price {
    font-size: .76rem;
    color: var(--pa-gold-soft);
    opacity: .8;
}

.pa-thumb:hover,
.pa-thumb:focus-visible {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.pa-thumb.is-active {
    background: rgba(198, 171, 124, .14);
    border-left-color: var(--pa-gold);
    color: #fff;
}

.pa-thumb.is-active img,
.pa-thumb:hover img {
    opacity: 1;
    outline-color: rgba(198, 171, 124, .55);
}

.pa-player {
    position: relative;
    aspect-ratio: 9 / 16;
    max-height: 68svh;
    margin-inline: auto;
    width: min(100%, 380px);
    border-radius: 22px;
    overflow: hidden;
    background: #000;
    border: 1px solid var(--pa-line-light);
}

.pa-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.pa-player__info {
    width: min(100%, 380px);
    margin: 1.5rem auto 0;
    text-align: center;
}

.pa-player__title {
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    margin: 0 0 .3rem;
    color: #fff;
}

.pa-player__loc {
    margin: 0 0 .2rem;
    font-size: .88rem;
    color: rgba(255, 255, 255, .6);
}

.pa-player__price {
    margin: 0 0 1.1rem;
    font-weight: 700;
    color: var(--pa-gold);
}

/* ------------------------------------------------------------------ *
 *  Zonas                                                              *
 * ------------------------------------------------------------------ */

.pa-zonas {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--pa-line);
}

.pa-zona {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(1rem, 4vw, 3rem);
    padding: clamp(1.5rem, 3vw, 2.4rem) 0;
    border-bottom: 1px solid var(--pa-line);
    text-decoration: none;
    color: inherit;
    transition: padding-inline .4s var(--pa-ease), color .4s var(--pa-ease);
}

.pa-zona:hover {
    padding-inline: clamp(.5rem, 2vw, 1.5rem);
    color: var(--pa-primary);
}

.pa-zona__num {
    font-family: 'Playfair Display', serif;
    font-size: .95rem;
    color: var(--pa-gold);
}

.pa-zona__name {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.5rem, 4vw, 2.6rem);
    line-height: 1.15;
    color: var(--pa-primary-ink);
}

.pa-zona:hover .pa-zona__name {
    color: var(--pa-primary);
}

.pa-zona__count {
    display: block;
    margin-top: .25rem;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pa-muted);
}

.pa-zona__arrow {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--pa-line);
    color: var(--pa-primary-ink);
    transition: background .4s var(--pa-ease), color .4s var(--pa-ease),
                border-color .4s var(--pa-ease);
}

.pa-zona:hover .pa-zona__arrow {
    background: var(--pa-primary-ink);
    border-color: var(--pa-primary-ink);
    color: var(--pa-gold);
}

/* ------------------------------------------------------------------ *
 *  Servicios                                                          *
 * ------------------------------------------------------------------ */

.pa-servicios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

.pa-servicio {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--pa-paper);
    border: 1px solid var(--pa-line);
    border-radius: var(--pa-radius);
    text-decoration: none;
    color: inherit;
    transition: background .45s var(--pa-ease), transform .45s var(--pa-ease),
                border-color .45s var(--pa-ease);
}

.pa-servicio:hover {
    background: var(--pa-primary-ink);
    border-color: var(--pa-primary-ink);
    transform: translateY(-6px);
}


.pa-servicio__icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--pa-cream);
    color: var(--pa-primary);
    font-size: 1.25rem;
    transition: background .45s var(--pa-ease), color .45s var(--pa-ease);
}

.pa-servicio:hover .pa-servicio__icon {
    background: var(--pa-gold);
    color: var(--pa-primary-ink);
}

.pa-servicio__title {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    margin: 0;
    color: var(--pa-primary-ink);
    transition: color .45s var(--pa-ease);
}

.pa-servicio__text {
    margin: 0;
    flex: 1;
    color: var(--pa-muted);
    line-height: 1.65;
    transition: color .45s var(--pa-ease);
}

.pa-servicio__more {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pa-primary);
    transition: color .45s var(--pa-ease), gap .3s var(--pa-ease);
}

.pa-servicio:hover .pa-servicio__title {
    color: #fff;
}

.pa-servicio:hover .pa-servicio__text {
    color: rgba(255, 255, 255, .78);
}

.pa-servicio:hover .pa-servicio__more {
    color: var(--pa-gold);
    gap: .95rem;
}

/*
  En la portada estas tarjetas son enlaces a /servicios y el vuelco a fondo
  oscuro anuncia que se puede pulsar. Dentro de /servicios ya no llevan a
  ninguna parte, asi que prometerlo seria mentir: se quedan quietas.

  Van AQUI, despues de las reglas que anulan, y no junto a `.pa-servicio:hover`
  como estaban: `.pa-servicio--estatico:hover .pa-servicio__title` y
  `.pa-servicio:hover .pa-servicio__title` tienen la MISMA especificidad -tres
  clases, contando la pseudoclase-, asi que decide el orden. Puestas antes,
  perdian, y el texto seguia volviendose blanco sobre fondo claro.
*/
.pa-servicio--estatico:hover {
    background: var(--pa-paper);
    border-color: var(--pa-line);
    transform: none;
}

.pa-servicio--estatico:hover .pa-servicio__icon {
    background: var(--pa-cream);
    color: var(--pa-primary);
}

.pa-servicio--estatico:hover .pa-servicio__title {
    color: var(--pa-primary-ink);
}

.pa-servicio--estatico:hover .pa-servicio__text {
    color: var(--pa-muted);
}

/* ------------------------------------------------------------------ *
 *  Pie: llamada de cierre + pie, en una sola pieza                    *
 * ------------------------------------------------------------------ */

/*
  La llamada y el pie comparten fondo y no llevan separacion entre ellos: la
  pagina no termina con dos bloques pegados sino con uno solo que va de la
  fotografia velada al azul plano.
*/
.pa-foot {
    position: relative;
    background: var(--pa-primary-ink);
    color: #fff;
}

.pa-cta {
    position: relative;
    overflow: hidden;
    color: #fff;
    isolation: isolate;
}

/* La foto se recorta un 15% mas alta de lo que ocupa la seccion: el parallax la
   desplaza en vertical y sin ese margen dejaria una franja vacia arriba. */
.pa-cta__bg {
    position: absolute;
    top: -8%;
    left: 0;
    width: 100%;
    height: 116%;
    object-fit: cover;
    opacity: .38;
    z-index: -2;
}

/* Velo sobre la foto. Termina opaco en el borde inferior para que la llamada
   se funda con el pie en vez de quedar como un recuadro sobre el. */
.pa-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom,
        rgba(13, 34, 51, .88) 0%,
        rgba(13, 34, 51, .7) 45%,
        rgba(13, 34, 51, .97) 88%,
        var(--pa-primary-ink) 100%);
}

.pa-cta__inner {
    padding-block: clamp(4.5rem, 12vh, 8rem) clamp(3.5rem, 9vh, 6rem);
    text-align: center;
}

.pa-cta__inner .pa-eyebrow {
    justify-content: center;
}

.pa-cta__title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5.5vw, 4rem);
    line-height: 1.08;
    margin: 0 auto 1rem;
    max-width: 18ch;
    color: #fff;
}

.pa-cta__lead {
    margin: 0 auto 2.25rem;
    max-width: 44ch;
    color: rgba(255, 255, 255, .78);
    font-size: 1.05rem;
}

.pa-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .9rem;
}

/* ---------------------------- el pie ------------------------------ */

.pa-foot__main {
    position: relative;
    padding-top: clamp(2.5rem, 6vh, 4rem);
    overflow: hidden;
}

.pa-foot__grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    /* Deja sitio abajo para que la marca de agua asome entre las columnas y la
       linea legal sin quedar pegada a ninguna de las dos. */
    padding-bottom: clamp(4rem, 12vh, 8rem);
}

.pa-foot__marca {
    display: block;
    height: clamp(38px, 5vw, 48px);
    width: auto;
    margin: 0 0 1.25rem;
}

.pa-foot__claim {
    margin: 0 0 1.75rem;
    max-width: 42ch;
    font-size: .92rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .62);
}

.pa-foot__redes {
    display: flex;
    gap: .6rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pa-foot__redes a {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--pa-line-light);
    color: rgba(255, 255, 255, .8);
    font-size: .95rem;
    text-decoration: none;
    transition: background .35s var(--pa-ease), color .35s var(--pa-ease),
                border-color .35s var(--pa-ease), transform .35s var(--pa-ease);
}

.pa-foot__redes a:hover {
    background: var(--pa-gold);
    border-color: var(--pa-gold);
    color: var(--pa-primary-ink);
    transform: translateY(-3px);
}

.pa-foot__titulo {
    margin: 0 0 1.1rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: .7rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--pa-gold);
}

.pa-foot__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.pa-foot__col a {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    /* customHeader.css pone `text-transform: uppercase` a todo `nav a`,
       pensando en la barra superior. En el pie los nombres de zona van en
       redonda: «La Unión», no «LA UNIÓN». */
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    font-size: .92rem;
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    transition: color .3s var(--pa-ease), padding-left .3s var(--pa-ease);
}

.pa-foot__col a:hover {
    color: var(--pa-gold);
    padding-left: .35rem;
}

.pa-foot__col--contacto i {
    width: 1rem;
    color: var(--pa-gold);
    flex: none;
}

/*
  La marca a sangre, recortada por el borde inferior del pie.

  Va en posicion absoluta y detras del contenido: es un fondo, no una fila mas,
  asi que no aniade altura ni separa las columnas de la linea legal. El recorte
  lo hace el `overflow` del contenedor, no una altura fija, para que no deje
  huecos a ningun ancho.
*/
.pa-foot__gigante {
    position: absolute;
    left: 50%;
    bottom: -.16em;
    transform: translateX(-50%);
    z-index: 0;
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(4rem, 17vw, 15rem);
    line-height: .78;
    letter-spacing: -.03em;
    white-space: nowrap;
    text-align: center;
    color: transparent;
    -webkit-text-stroke: 1px rgba(198, 171, 124, .22);
    user-select: none;
    pointer-events: none;
}

/* Por encima de la marca de agua. */
.pa-foot__grid,
.pa-foot__legal {
    position: relative;
    z-index: 1;
}

.pa-foot__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0 1.5rem;
    border-top: 1px solid var(--pa-line-light);
    font-size: .8rem;
    color: rgba(255, 255, 255, .5);
}

.pa-foot__legal-link {
    color: rgba(255, 255, 255, .5);
    text-decoration: none;
    cursor: pointer;
    transition: color .3s var(--pa-ease);
}

.pa-foot__legal-link:hover {
    color: var(--pa-gold);
}

/* ------------------------------------------------------------------ *
 *  Cursor propio                                                      *
 * ------------------------------------------------------------------ */

.pa-cursor[hidden] {
    display: none;
}

.pa-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 8000;
    pointer-events: none;
}

.pa-cursor__dot,
.pa-cursor__ring {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.pa-cursor__dot {
    width: 6px;
    height: 6px;
    background: var(--pa-gold);
}

.pa-cursor__ring {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(198, 171, 124, .75);
    transition: width .3s var(--pa-ease), height .3s var(--pa-ease),
                background-color .3s var(--pa-ease);
}

.pa-cursor.is-hot .pa-cursor__ring {
    width: 66px;
    height: 66px;
    background: rgba(198, 171, 124, .14);
}

/* ------------------------------------------------------------------ *
 *  Adaptacion por tamanio                                             *
 * ------------------------------------------------------------------ */

@media (min-width: 992px) {
    /* La galeria manda y los datos la acompanian en una columna estrecha. */
    .pa-ficha {
        grid-template-columns: 1.7fr 1fr;
    }

    /* El video a un lado, el texto al otro. */
    .pa-plaza__cierre {
        grid-template-columns: auto 1fr;
    }

    .pa-plaza__cierre .pa-plaza__video {
        width: 340px;
        margin-inline: 0;
    }

    /* Titulo y lista a la izquierda, reproductor ocupando las dos filas a la
       derecha. */
    .pa-showcase__grid {
        grid-template-columns: 1fr .85fr;
        grid-template-areas:
            "titulo player"
            "thumbs player";
    }

    /* Por alto, igual que en movil: con un ancho fijo mas `max-height` la caja
       se quedaba mas baja de lo que pide la proporcion 9/16 y el reproductor
       aparecia recortado por abajo (salia a 0,75 en vez de 0,5625). */
    .pa-player {
        height: min(62svh, 620px);
        width: auto;
        max-width: 100%;
        max-height: none;
    }
}

@media (max-width: 991.98px) {
    /* Los cinco enlaces y el boton dejan de caber junto al logo: pasan al
       panel, que ya los lleva. */
    .pa-nav__links,
    .pa-nav__cta {
        display: none;
    }

    .pa-burger {
        display: block;
    }

    /* Cuatro columnas no caben; la marca ocupa el ancho y las tres listas se
       reparten lo que queda. */
    .pa-foot__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .pa-foot__brand {
        grid-column: 1 / -1;
    }

    /*
      Miniaturas como indicador, no como lista.

      Antes eran tarjetas de 210 px en una tira que se arrastraba a dedo, y esa
      tira era el scroll horizontal que sobraba: dentro de una seccion que ya se
      recorre con el scroll vertical, arrastrar a los lados para ver el resto es
      un gesto de mas y se pelea con el de la pagina.

      Ahora las seis reparten el ancho disponible y caben siempre. El titulo y
      el precio viven en la ficha que hay bajo el video, asi que aqui sobran: lo
      unico que tiene que decir cada miniatura es cual es y si es la activa.
    */
    .pa-thumbs {
        flex-direction: row;
        gap: .4rem;
        margin-top: 0;
    }

    .pa-thumbs li {
        flex: 1 1 0;
        min-width: 0;
    }

    .pa-thumb {
        flex-direction: column;
        gap: 0;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: transparent;
    }

    .pa-thumb img {
        width: 100%;
        height: 42px;
        opacity: .38;
    }

    .pa-thumb__text {
        display: none;
    }

    .pa-thumb:hover,
    .pa-thumb.is-active {
        background: transparent;
    }

    .pa-thumb.is-active img {
        opacity: 1;
        outline: 2px solid var(--pa-gold);
    }
}

/*
  Hero en pantalla de movil.

  A 390x844 el bloque de antes -titular a tres lineas, dos botones apilados y
  tres cifras en columna- se salia por abajo y obligaba a arrastrar dentro de lo
  que deberia ser una sola pantalla. Aqui se aprieta todo lo justo para que
  quepa sin tocar el tamanio del titular, que es lo que sostiene la pagina.
*/
@media (max-width: 767.98px) {
    /* Cada propiedad cuesta menos scroll: seis pasos de 55svh en un movil son
       muchisimo arrastre para una sola seccion. */
    .pa-showcase {
        --pa-paso: 38svh;
    }

    /*
      El reproductor se dimensiona por ALTO, no por ancho.

      Con `width: min(100%, 380px)` mas un `max-height`, la caja se quedaba mas
      baja de lo que pedia la proporcion 9/16 y el `overflow: hidden` recortaba
      el video por abajo. Aqui el bloque pegado reparte su alto en tres filas
      -titulo, reproductor, miniaturas-, el reproductor se queda con la del
      medio y de ese alto sale su ancho por el `aspect-ratio`. Asi el video
      siempre se ve entero y nada obliga a desplazarse dentro de la seccion.
    */
    .pa-showcase__sticky {
        align-items: stretch;
        padding-top: calc(var(--pa-nav) + .5rem);
        padding-bottom: 1rem;
    }

    .pa-showcase__grid {
        height: 100%;
        /* `minmax(0, 1fr)` y no `1fr`: sin el minimo en cero la fila se estira
           hasta caber el contenido en vez de ceder. */
        grid-template-rows: auto minmax(0, 1fr) auto;
        gap: .9rem;
    }

    .pa-showcase__player {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .pa-player {
        flex: 1 1 auto;
        min-height: 0;
        width: auto;
        max-width: 100%;
        max-height: none;
        margin-inline: auto;
    }

    .pa-player__info {
        flex: none;
        margin-top: .9rem;
    }

    .pa-player__title {
        font-size: 1.1rem;
    }

    .pa-player__price {
        margin-bottom: .8rem;
    }

    /*
      El boton flotante se sube por encima de la fila de miniaturas.

      customHeader.css lo deja a `bottom: 5vh` y `right: 5vh`, que en un movil
      alto son unos 48 px: justo encima de la ultima miniatura del showcase, y
      tapar un control es peor que tapar texto. De paso se aleja de la barra de
      navegacion del navegador, que aparece y desaparece en ese mismo borde.
    */
    .pa-body .floating-button {
        bottom: 6.5rem;
        right: 1.1rem;
    }

    .pa-hero {
        padding-top: calc(var(--pa-nav) + 1.25rem);
        padding-bottom: 1.5rem;
    }

    /* La foto es apaisada y el hueco vertical: hay que centrar el encuadre o se
       ve un recorte lateral sin pies ni cabeza. */
    .pa-hero__img {
        object-position: 50% 45%;
    }

    .pa-hero__eyebrow {
        align-items: flex-start;
        font-size: .66rem;
        margin-bottom: .8rem;
    }

    .pa-hero__eyebrow .pa-eyebrow__dot {
        margin-top: .35em;
    }

    .pa-hero__lead {
        margin-bottom: 1.6rem;
    }

    /* A ancho completo y apilados: en una fila no caben, y asi el area que hay
       que tocar es holgada. */
    .pa-hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: .6rem;
        margin-bottom: 1.75rem;
    }

    .pa-hero__actions .pa-btn {
        justify-content: center;
        padding-block: .85rem;
    }

    /* Dos columnas. Con el minimo de 170 px se quedaba en 364 y no entraba por
       nueve pixeles, asi que las tres cifras caian en columna. */
    .pa-hero__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        padding-top: 1.1rem;
    }

    .pa-stat__num {
        font-size: 1.6rem;
    }

    .pa-stat__num[data-plain="true"] {
        font-size: 1.15rem;
    }

    .pa-stat__label {
        font-size: .66rem;
        letter-spacing: .06em;
    }
}

@media (max-width: 575.98px) {
    .pa-body {
        --pa-nav: 74px;
    }

    .pa-hero {
        justify-content: center;
    }

    .pa-hero__scroll {
        display: none;
    }

    .pa-zona {
        grid-template-columns: auto 1fr;
    }

    .pa-zona__arrow {
        display: none;
    }

    .pa-foot__grid {
        grid-template-columns: 1fr 1fr;
        padding-bottom: clamp(3rem, 9vh, 5rem);
    }

    /* «San Miguel» se partia en dos lineas dentro de la columna estrecha. */
    .pa-foot__col a {
        white-space: nowrap;
    }

    .pa-foot__col--contacto {
        grid-column: 1 / -1;
    }

    .pa-foot__legal {
        flex-direction: column;
        align-items: center;
        gap: .4rem;
        text-align: center;
    }

    /* Mas tenue: en una columna estrecha la marca de agua queda justo detras
       del copyright y a la opacidad de escritorio le restaba legibilidad. */
    .pa-foot__gigante {
        -webkit-text-stroke-color: rgba(198, 171, 124, .14);
    }
}

/*
 * Movimiento reducido. portada.js ya sale antes de animar nada, pero el CSS
 * tiene que apagar ademas lo que se mueve solo: la cinta, el cursor y el
 * indicador de scroll. Y las tres fotos del hero se quedan en la primera, que
 * sin JavaScript nadie va a cruzar.
 */
@media (prefers-reduced-motion: reduce) {
    .pa-hero__scroll-line::after {
        animation: none;
        transform: scaleX(1);
    }

    .pa-cursor {
        display: none !important;
    }

    .pa-card__link:hover .pa-card__media img,
    .pa-servicio:hover {
        transform: none;
    }
}

/* ------------------------------------------------------------------ *
 *  Paginas de error                                                   *
 * ------------------------------------------------------------------ */

.pa-error {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* ------------------------------------------------------------------ *
 *  Enlace de respaldo de los videos                                   *
 * ------------------------------------------------------------------ */

/* Los bloqueadores de anuncios dejan en blanco el reproductor de Facebook;
   este enlace abre el reel en su sitio. Discreto: no compite con el video. */
.pa-plaza__medio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
}

.pa-video-alt {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .85rem;
    color: var(--pa-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pa-video-alt:hover {
    color: var(--pa-gold);
}

/* En bloque para que herede la alineacion de la ficha: centrada en movil,
   a la izquierda en escritorio. */
.pa-player__info .pa-video-alt {
    display: block;
    margin-top: .75rem;
    color: inherit;
    opacity: .75;
}

.pa-video-alt[hidden] {
    display: none;
}