/* =============================================================
   Lotes Perú — portal público (módulo inmolotes)
   Paleta oficial (afinamiento/Colores.pdf):
     #072418 verde oscuro · #009a01 verde · #7ec72c verde claro · #fd9b0a naranja
   Tipografías: Noland (titulares) · Montserrat (texto)
   ============================================================= */

/* ---------- Tipografías ---------- */
@font-face { font-family: 'Noland'; src: url('../fonts/noland/noland-regular.woff2') format('woff2');  font-weight: 400; font-display: swap; }
@font-face { font-family: 'Noland'; src: url('../fonts/noland/noland-semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Noland'; src: url('../fonts/noland/noland-bold.woff2') format('woff2');     font-weight: 700; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat/montserrat-regular.woff2') format('woff2');   font-weight: 400; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat/montserrat-medium.woff2') format('woff2');    font-weight: 500; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat/montserrat-semibold.woff2') format('woff2');  font-weight: 600; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat/montserrat-bold.woff2') format('woff2');      font-weight: 700; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat/montserrat-extrabold.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat/montserrat-black.woff2') format('woff2');     font-weight: 900; font-display: swap; }

:root {
    --verde-osc: #072418;
    --verde: #009a01;
    --verde-claro: #7ec72c;
    --naranja: #fd9b0a;
    --gris-bg: #f2f7f0;
    --texto: #1f2a24;
    --texto-suave: #5b6b62;
    --radio: 18px;
    --ancho: 1200px;
    --sombra: 0 10px 30px rgba(7, 36, 24, .10);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    color: var(--texto); background: #fff; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: 'Noland', 'Montserrat', sans-serif; margin: 0; line-height: 1.1; font-weight: 700; }
.pt-wrap { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
.pt-seccion { padding: 64px 0; }
.pt-titulo { font-size: 40px; color: var(--verde-osc); }
.pt-subtitulo { margin-top: 8px; color: var(--texto-suave); font-size: 15px; }
.pt-centrado { text-align: center; }
.pt-sr {
    position: absolute; left: 0; top: auto; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* ---------- Botones ---------- */
.pt-btn {
    display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer;
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px;
    padding: 12px 22px; border-radius: 999px; transition: transform .15s ease, filter .15s ease;
}
.pt-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.pt-btn-naranja { background: var(--naranja); color: #fff; }
/* Páginas legales (/terminos, /privacidad): texto enriquecido del admin, legible y acotado */
.pt-legal-zona { padding: 48px 0 64px; }
.pt-legal { max-width: 860px; margin: 0 auto; font-size: 15px; line-height: 1.7; color: var(--texto); }
.pt-legal h1, .pt-legal h2, .pt-legal h3 { font-family: 'Montserrat', sans-serif; color: var(--verde-osc); margin: 28px 0 10px; line-height: 1.25; }
.pt-legal h2 { font-size: 22px; } .pt-legal h3 { font-size: 18px; }
.pt-legal p { margin: 0 0 14px; } .pt-legal ul, .pt-legal ol { margin: 0 0 14px 22px; }
.pt-legal a { color: var(--verde-osc); text-decoration: underline; }
.pt-legal img { max-width: 100%; height: auto; }
.pt-legal table { border-collapse: collapse; width: 100%; margin: 0 0 14px; }
.pt-legal td, .pt-legal th { border: 1px solid #e3e9e5; padding: 8px 10px; }
.pt-legal-vacio { max-width: 860px; margin: 0 auto; text-align: center; color: var(--texto-suave); }
/* Continuar en WhatsApp tras el registro (verde de la marca de WhatsApp) */
.pt-btn-wa { background: #25d366; color: #fff; margin-top: 8px; }
.pt-btn-verde { background: var(--verde); color: #fff; }
.pt-btn-oscuro { background: var(--verde-osc); color: #fff; }
.pt-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* =============================================================
   1. Cabecera
   ============================================================= */
.pt-header { background: #fff; position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 rgba(7, 36, 24, .07); }
.pt-header .pt-wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 78px; }
.pt-logo img { height: 38px; width: auto; }
.pt-nav { display: flex; align-items: center; gap: 28px; }
.pt-nav a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--verde-osc); }
.pt-nav a::before { content: ''; width: 11px; height: 11px; background: var(--verde-claro); border-radius: 2px; }
.pt-nav a:hover { color: var(--verde); }
.pt-nav a.activo::before { background: var(--naranja); }
.pt-burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.pt-burger span { display: block; width: 24px; height: 2px; background: var(--verde-osc); margin: 5px 0; }

/* =============================================================
   2. Hero + buscador
   ============================================================= */
/* El banner ya trae su propio degradado, el lote 3D y la familia: el CSS solo lo encuadra */
.pt-hero { position: relative; background: var(--verde-osc) center right/cover no-repeat; overflow: hidden; }
.pt-hero::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(7, 36, 24, .45) 0%, rgba(7, 36, 24, 0) 45%);
}
.pt-hero-inner { position: relative; z-index: 2; min-height: 480px; display: flex; align-items: center; padding: 56px 0 120px; }
.pt-hero h1 { font-size: 54px; color: #fff; max-width: 560px; }
.pt-hero-badge {
    display: inline-block; margin-top: 22px; background: var(--naranja); color: #fff;
    font-weight: 700; font-size: 15px; padding: 10px 22px; border-radius: 6px;
}
/* Buscador: pisa el hero por abajo. La banda pinta el fondo verde sutil de borde a
   borde; el degradado deja transparentes los 74px que la caja monta sobre el hero. */
.pt-buscador-banda {
    position: relative; z-index: 4; margin-top: -74px;
    background: linear-gradient(180deg, transparent 74px, var(--gris-bg) 74px);
}
.pt-buscador-zona { position: relative; }
.pt-buscador { max-width: 940px; margin: 0 auto; }
.pt-buscador-listado { max-width: 100%; margin-top: 18px; }
.pt-buscador-tab {
    display: inline-block; background: var(--verde); color: #fff; font-weight: 700; font-size: 13px;
    padding: 8px 20px; border-radius: 8px 8px 0 0;
}
.pt-buscador-caja {
    background: #fff; border-radius: 0 14px 14px 14px; box-shadow: var(--sombra);
    padding: 16px 18px 10px;
}
.pt-buscador-fila { display: flex; align-items: center; gap: 14px; }
.pt-campo { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.pt-campo + .pt-campo { border-left: 1px solid #e5eae7; padding-left: 14px; }
.pt-campo svg { width: 20px; height: 20px; fill: var(--verde-osc); flex: none; }
.pt-campo input {
    width: 100%; border: 0; outline: 0; font-family: inherit; font-size: 14px; color: var(--texto); padding: 10px 0;
}
.pt-campo input::placeholder { color: #9aa8a1; }
/* Selects de la fila (departamento / provincia): mismo look que los inputs */
.pt-campo-select select {
    width: 100%; border: 0; outline: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 14px; color: var(--texto); padding: 10px 0;
}
.pt-campo-select select:disabled { color: #9aa8a1; cursor: not-allowed; }

/* ---------- Select con panel propio (el desplegable nativo desentona) ---------- */
.pt-select { position: relative; flex: 1; min-width: 0; }
/* El nativo queda oculto pero vivo: es el que viaja en el formulario */
.pt-select > select {
    position: absolute; width: 1px; height: 1px; opacity: 0;
    pointer-events: none; margin: 0; padding: 0; border: 0;
}
.pt-select-btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: none; border: 0; cursor: pointer; text-align: left;
    font-family: inherit; font-size: 14px; color: var(--texto); padding: 10px 0;
}
.pt-select-btn:disabled { cursor: not-allowed; }
.pt-select-btn:disabled .pt-select-texto { color: #c3cdc7; }
.pt-select-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-select-placeholder { color: #9aa8a1; }
/* Doble clase: la regla genérica .pt-campo svg (iconos de 20px) le ganaba al chevron */
.pt-select .pt-select-flecha { width: 12px; height: 8px; flex: none; color: #9aa8a1; transition: transform .18s ease; }
.pt-select.abierta .pt-select-flecha { transform: rotate(180deg); color: var(--verde); }
/* Variante "caja" (panel avanzado): el gatillo lleva su propio borde */
.pt-select-caja .pt-select-btn {
    border: 1px solid #e0e7e3; border-radius: 8px; padding: 9px 12px;
    font-size: 13px; background: #fff; min-width: 200px;
}
.pt-select-caja.abierta .pt-select-btn, .pt-select-caja .pt-select-btn:focus-visible { border-color: var(--verde); }
.pt-select-menu {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
    min-width: 100%; max-height: 300px; overflow-y: auto; display: none;
    background: #fff; border: 1px solid #e7eee9; border-radius: 12px; padding: 6px;
    box-shadow: 0 14px 34px rgba(7, 36, 24, .16);
    scrollbar-width: thin; scrollbar-color: #cfdad2 transparent;
}
.pt-select-menu::-webkit-scrollbar { width: 6px; }
.pt-select-menu::-webkit-scrollbar-thumb { background: #cfdad2; border-radius: 999px; }
.pt-select.abierta .pt-select-menu { display: block; animation: pt-select-abrir .16s ease; }
@keyframes pt-select-abrir { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.pt-select-op {
    position: relative; padding: 9px 34px 9px 12px; border-radius: 8px; cursor: pointer;
    font-size: 14px; color: var(--texto); white-space: nowrap;
}
.pt-select-caja .pt-select-op { font-size: 13px; }
.pt-select-op.resaltada { background: var(--gris-bg); }
.pt-select-op.vacia { color: #9aa8a1; }
.pt-select-op.activa { color: var(--verde); font-weight: 700; }
/* Check de la opción elegida, dibujado en CSS para no meter más SVG */
.pt-select-op.activa::after {
    content: ''; position: absolute; right: 14px; top: 50%;
    width: 9px; height: 5px; border-left: 2px solid var(--verde); border-bottom: 2px solid var(--verde);
    transform: translateY(-70%) rotate(-45deg);
}
.pt-buscador button[type=submit] { padding: 14px 26px; font-size: 13px; letter-spacing: .04em; border-radius: 8px; }
.pt-avanzado {
    margin-top: 4px; background: none; border: 0; padding: 6px 0; cursor: pointer;
    font-family: inherit; font-size: 12px; font-weight: 600; color: var(--texto-suave);
}
/* Nº de filtros avanzados activos, para que no pasen desapercibidos con el panel cerrado */
.pt-avanzado-badge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px;
    padding: 0 4px; margin-left: 4px; border-radius: 999px;
    background: var(--verde); color: #fff; font-size: 10px; font-weight: 700;
}
/* El display propio le gana al [hidden] del navegador: hay que apagarlo a mano */
.pt-avanzado-badge[hidden] { display: none; }
.pt-avanzado-panel { display: none; padding: 14px 0 8px; border-top: 1px solid #eef2f0; margin-top: 8px; }
.pt-avanzado-panel.abierto { display: block; }
.pt-avanzado-grid { display: flex; align-items: flex-end; gap: 26px; flex-wrap: wrap; }
.pt-avanzado-grupo { display: flex; flex-direction: column; gap: 6px; }
.pt-avanzado-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-suave); }
.pt-avanzado-panel select {
    font-family: inherit; font-size: 13px; padding: 9px 12px; border: 1px solid #e0e7e3;
    border-radius: 8px; color: var(--texto); background: #fff; min-width: 200px; outline: 0;
}
.pt-rango { display: flex; align-items: center; gap: 8px; }
.pt-rango input {
    width: 108px; font-family: inherit; font-size: 13px; padding: 9px 12px;
    border: 1px solid #e0e7e3; border-radius: 8px; color: var(--texto); outline: 0;
    -moz-appearance: textfield; appearance: textfield;
}
.pt-rango input::-webkit-outer-spin-button, .pt-rango input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pt-rango input:focus, .pt-avanzado-panel select:focus { border-color: var(--verde); }
.pt-rango input::placeholder { color: #9aa8a1; }
.pt-rango-sep { color: #9aa8a1; }
.pt-avanzado-limpiar { margin-left: auto; padding: 9px 0; font-size: 12px; font-weight: 600; color: var(--texto-suave); text-decoration: underline; }
.pt-avanzado-limpiar:hover { color: var(--verde-osc); }
/* Chips del listado: cada filtro activo se quita con un clic */
.pt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pt-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
    background: #fff; border: 1px solid #dfe8e2; border-radius: 999px;
    font-size: 12px; font-weight: 600; color: var(--verde-osc);
}
.pt-chip span { color: #9aa8a1; font-size: 14px; line-height: 1; }
.pt-chip:hover { border-color: var(--verde); }
.pt-chip:hover span { color: var(--verde); }
.pt-chip-limpiar { background: none; border-color: transparent; text-decoration: underline; color: var(--texto-suave); }

/* =============================================================
   3. Departamentos (carrusel) + inmobiliarias
   ============================================================= */
.pt-zona-verde { background: var(--gris-bg); padding: 96px 0 56px; }
.pt-carrusel { position: relative; }
.pt-carrusel-pista {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px;
    overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory;
    padding-bottom: 6px; scrollbar-width: none;
}
.pt-carrusel-pista::-webkit-scrollbar { display: none; }
.pt-carrusel-pista > * { scroll-snap-align: start; }
.pt-flecha {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--naranja); color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(7, 36, 24, .2);
}
.pt-flecha svg { width: 14px; height: 14px; fill: currentColor; }
.pt-flecha-izq { left: -34px; }
.pt-flecha-der { right: -34px; }
.pt-flecha[hidden] { display: none; }

/* Sin marco: el velo verde superior ya hace de cabecera; un borde del mismo
   color duplicaba el verde (pedido del cliente 2026-08-20). */
.pt-dep {
    position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10; display: block;
    box-shadow: 0 8px 20px rgba(7, 36, 24, .12);
}
.pt-dep img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.pt-dep:hover img { transform: scale(1.04); }
.pt-dep::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, var(--verde) 0%, rgba(0, 154, 1, .92) 26%, rgba(0, 154, 1, .55) 48%, rgba(0, 154, 1, 0) 72%);
}
/* Cinta "LOTES EN": pestaña ámbar colgada del borde superior, texto en verde
   oscuro y con sombra propia (referencia del cliente) */
.pt-dep-etiqueta {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 3;
    background: linear-gradient(180deg, #ffb640, var(--naranja)); color: var(--verde-osc);
    font-size: 13px; font-weight: 800; letter-spacing: .12em; white-space: nowrap;
    padding: 8px 26px 9px; border-radius: 0 0 12px 12px;
    box-shadow: 0 4px 10px rgba(7, 36, 24, .28);
}
/* Sans redondeada limpia como en la referencia (Noland lleva contorno tipo sticker) */
.pt-dep-nombre {
    position: absolute; left: 12px; right: 12px; top: 17%; z-index: 3; text-align: center;
    font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 33px; color: #fff;
    text-shadow: 0 2px 6px rgba(7, 36, 24, .22);
}
/* La referencia no muestra el contador: se conserva solo para lectores de pantalla */
.pt-dep-total {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.pt-inmobiliarias { margin-top: 72px; }
.pt-inmo-pista { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 72px) / 4); gap: 24px; }
.pt-inmo {
    background: #fff; border-radius: 14px; box-shadow: 0 6px 18px rgba(7, 36, 24, .10);
    height: 74px; display: flex; align-items: center; justify-content: center; padding: 12px 18px;
}
.pt-inmo img { max-height: 100%; width: auto; object-fit: contain; }
.pt-dots { display: flex; gap: 7px; justify-content: center; margin-top: 22px; }
.pt-dots[hidden] { display: none; }
.pt-dot { width: 9px; height: 9px; border-radius: 50%; background: #cfd9d3; border: 0; padding: 0; cursor: pointer; }
.pt-dot.activo { background: var(--verde-claro); }

/* =============================================================
   4. Lotes en venta
   ============================================================= */
/* Carrusel de cuatro: el hueco es de 24px como en los demás, porque el JS calcula el
   salto con esa medida y con otra se iría desviando tarjeta a tarjeta. */
.pt-lotes { margin-top: 34px; }
.pt-lotes-pista { grid-auto-columns: calc((100% - 72px) / 4); }
.pt-lote {
    background: var(--verde-claro); border-radius: 16px; overflow: hidden; position: relative;
    /* cqw: las tipografías escalan con el ANCHO de la tarjeta (4, 2 o 1 columna) */
    container-type: inline-size;
    box-shadow: 0 8px 22px rgba(7, 36, 24, .12); display: flex; flex-direction: column;
    transition: transform .18s ease;
}
.pt-lote:hover { transform: translateY(-4px); }
/* Las medidas van en % del ancho de la tarjeta (--pt-lote-w): la misma pieza se pinta a
   4, 2 o 1 columna y las proporciones del diseño se mantienen en las tres. */
.pt-lote-head { padding: 11% 8% 4% 13%; color: #fff; }
.pt-lote-nombre {
    font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform: uppercase;
    font-size: clamp(13px, 5.4cqw, 21px); letter-spacing: .02em; line-height: 1.15;
    /* Una sola línea: un nombre largo se corta con puntos suspensivos en vez de
       partirse en dos y descuadrar la altura de la cabecera. */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pt-lote-area {
    font-family: 'Montserrat', sans-serif; font-size: clamp(26px, 12cqw, 46px); font-weight: 800;
    margin: 0 0 2.5%; line-height: 1; color: var(--verde-osc);   /* el negro de la paleta */
}
.pt-lote-ubi {
    display: inline-flex; align-items: center; gap: 7px; background: var(--verde-osc); color: #fff;
    font-size: clamp(10px, 4.2cqw, 16px); font-weight: 700; padding: .3em .7em; border-radius: 7px;
}
.pt-lote-ubi svg { width: 1em; height: 1em; fill: currentColor; flex: none; }
/* La foto va enmarcada (con aire a los lados) y el logo se apoya en su esquina, saliéndose */
.pt-lote-foto { position: relative; aspect-ratio: 1.385 / 1; margin: 0; }
.pt-lote-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 20cqw 0 0; }
/* La marca ocupa la MITAD del ancho de la tarjeta (3x de 6x), en tres cuadrados de lado x
   (x = 1/6 del ancho): cuarto de disco de radio x · cuadrado lleno · cuarto de disco. */
.pt-lote-logo {
    position: absolute; right: 0; top: 0; width: 50%; height: 16.666cqw;
    /* Una mascara por cuadrado: el 1.o conserva el cuarto de disco centrado en su esquina
       SUPERIOR DERECHA (masa arriba-derecha) y el 3.o el centrado en su esquina INFERIOR
       IZQUIERDA (masa abajo-izquierda); el del medio va entero. Con border-radius no se
       podria: las esquinas recortadas de los extremos son INTERIORES a la banda.
       Dos trampas ya pisadas: las posiciones en % reparten el SOBRANTE (de ahi
       left/center/right) y closest-side desde una esquina da radio 0 (de ahi farthest-side).
       Y una tercera: el rectangulo central va ANCHO (40%) para SOLAPARSE con los discos —
       a tope (33.34 + 33.34 + 33.34) el redondeo a pixeles dejaba una columna sin cubrir
       y la foto se asomaba como una rayita vertical en algunos anchos de tarjeta. Los
       arcos ya rozan el borde en esa franja, asi que el solape no cambia la silueta. */
    -webkit-mask:
        radial-gradient(circle farthest-side at 100% 0, #000 99%, rgba(0,0,0,0) 100%) left top / 33.34% 100% no-repeat,
        linear-gradient(#000 0 0) center top / 40% 100% no-repeat,
        radial-gradient(circle farthest-side at 0 100%, #000 99%, rgba(0,0,0,0) 100%) right top / 33.34% 100% no-repeat;
    -webkit-mask-composite: source-over;
    mask:
        radial-gradient(circle farthest-side at 100% 0, #000 99%, rgba(0,0,0,0) 100%) left top / 33.34% 100% no-repeat,
        linear-gradient(#000 0 0) center top / 40% 100% no-repeat,
        radial-gradient(circle farthest-side at 0 100%, #000 99%, rgba(0,0,0,0) 100%) right top / 33.34% 100% no-repeat;
    mask-composite: add;
    background: #fff; filter: drop-shadow(0 3px 7px rgba(7, 36, 24, .28)); display: flex;
    align-items: center; justify-content: center; padding: 0 6% 0 9%; overflow: hidden;
}
.pt-lote-logo img { width: 100%; height: 52%; object-fit: contain; }
/* Pie: una sola barra partida por una DIAGONAL, no dos píldoras */
/* --corte = cuánto se inclina la diagonal. El precio se SOLAPA ese mismo valor para que
   su borde izquierdo y el borde derecho del naranja sean la misma línea; si no, los dos
   cortes quedan paralelos y dejan una franja de fondo entre ellos. */
.pt-lote-pie { display: flex; align-items: stretch; margin: 1.2% 6% 12.5%; gap: 0; --corte: 7cqw; }
.pt-lote-cat {
    flex: 1; background: var(--naranja); color: #fff; font-weight: 600; min-width: 0;
    font-size: clamp(11px, 5cqw, 18px); padding: .3em 1.1em; line-height: 1.25; display: flex; align-items: center;
    border-radius: 8px 0 0 8px;
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--corte)) 100%, 0 100%);
}
.pt-lote-cat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-lote-precio {
    background: var(--verde-osc); color: #fff; font-weight: 700; white-space: nowrap;
    font-size: clamp(11px, 5cqw, 18px); padding: .3em .8em .3em 1.4em; line-height: 1.25; display: flex; align-items: center;
    border-radius: 0 8px 8px 0;
    margin-left: calc(-1 * var(--corte));
    clip-path: polygon(var(--corte) 0, 100% 0, 100% 100%, 0 100%);
}
.pt-lotes-mas { margin-top: 34px; text-align: center; }

/* =============================================================
   5. Beneficios ("¡Tu mejor inversión esta aquí!")
   ============================================================= */
/* Las dos columnas viven DENTRO del wrap. El margen negativo calculado con
   100vw sacaba la foto de la retícula (y bajo 1200px cambiaba de signo: a 900px
   la imagen medía 726px y se salía de la página). */
.pt-beneficios {
    display: grid; grid-template-columns: minmax(0, 37%) minmax(0, 1fr);
    gap: clamp(28px, 3.6vw, 52px); align-items: center;
}
/* El bitmap trae un tercio de verde vacío sobre las cabezas: se recorta por arriba
   (object-position abajo) para que el titular y la familia se lean como un bloque.
   La esquina grande del diseño la pone el CSS, porque el recorte se come la del PNG. */
.pt-beneficios-foto {
    position: relative; overflow: hidden; aspect-ratio: 8 / 9;
    border-radius: var(--radio) clamp(36px, 5vw, 72px) var(--radio) var(--radio);
}
/* balance reparte las palabras entre las líneas: sin él, en los anchos donde el
   titular no cabe de una, la última palabra queda colgando sola (viuda). */
.pt-beneficios-foto h2 {
    position: absolute; top: 7%; left: 8%; right: 22%; z-index: 2;
    font-size: clamp(20px, 2.3vw, 32px); color: var(--verde-osc);
    text-wrap: balance; text-wrap: pretty; text-wrap: balance;
}
.pt-beneficios-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.pt-tarjetas { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 20px); }
.pt-tarjeta {
    display: flex; align-items: center; gap: clamp(14px, 1.6vw, 20px);
    border-radius: 14px; padding: clamp(20px, 2.3vw, 28px) clamp(20px, 2.2vw, 28px);
}
.pt-tarjeta img { width: clamp(48px, 4.4vw, 62px); height: clamp(48px, 4.4vw, 62px); flex: none; }
.pt-tarjeta h3 { font-size: clamp(18px, 1.75vw, 24px); }
/* Sin justificar: a este ancho y tamaño el justificado abre ríos entre palabras. */
.pt-tarjeta p { margin: 6px 0 0; font-size: 13px; line-height: 1.55; }
/* Las tres alineadas por la derecha: la oscura marca el borde y las otras dos
   se recogen por la izquierda. Escalonar por ambos lados dejaba el remate roto. */
.pt-tarjeta-naranja { background: var(--naranja); color: #fff; margin-left: 4%; }
.pt-tarjeta-naranja h3, .pt-tarjeta-naranja p { color: var(--verde-osc); }   /* título y descripción del mismo verde */
.pt-tarjeta-oscura { background: var(--verde-osc); color: #fff; }
.pt-tarjeta-oscura h3 { color: #fff; }
.pt-tarjeta-verde { background: var(--verde); color: #fff; margin-left: 4%; }
.pt-tarjeta-verde h3 { color: #fff; }   /* Plusvalía en blanco sobre el verde */

/* =============================================================
   6. Testimonios
   ============================================================= */
/* Carrusel, no rejilla: los testimonios los agrega el admin y pueden ser más de tres. */
.pt-testimonios { margin-top: 40px; }
.pt-testi-pista { align-items: stretch; }
.pt-testi-pista .pt-testimonio { height: 100%; }
.pt-testimonio {
    background: var(--verde); border-radius: 16px; overflow: hidden; padding-bottom: 18px;
    box-shadow: 0 8px 22px rgba(7, 36, 24, .12);
}
.pt-testimonio-foto { position: relative; aspect-ratio: 1 / 1; }
.pt-testimonio-foto img { width: 100%; height: 100%; object-fit: cover; }
.pt-testimonio-play {
    position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .12); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.pt-testimonio-play svg { width: 22px; height: 22px; fill: #fff; margin-left: 4px; }
.pt-testimonio-ficha {
    background: #fff; border-radius: 12px; margin: -26px 18px 0; position: relative; z-index: 2;
    padding: 16px 18px; text-align: center; box-shadow: 0 6px 16px rgba(7, 36, 24, .12);
}
.pt-testimonio-ficha h3 { font-family: 'Montserrat', sans-serif; font-size: 15px; color: var(--verde-osc); }
.pt-testimonio-ficha p { font-size: 11.5px; color: var(--texto-suave); text-align: justify; margin: 8px 0 12px; }
.pt-testimonio-tag {
    display: inline-flex; align-items: center; gap: 5px; background: var(--naranja); color: #fff;
    font-size: 10px; font-weight: 600; padding: 4px 12px; border-radius: 999px;
}
.pt-testimonio-tag svg { width: 9px; height: 9px; fill: currentColor; }
/* El play es <button> cuando abre el reproductor y <a> cuando cae al enlace externo:
   los dos tienen que verse igual. */
button.pt-testimonio-play { padding: 0; font: inherit; }
.pt-testimonio-play:hover { background: rgba(255, 255, 255, .28); transform: scale(1.06); }
.pt-testimonio-play { transition: background .15s ease, transform .15s ease; }

/* --- Modal de vídeo del testimonio (reproductor de academy, marco de Lotes Perú) --- */
.pt-sin-scroll { overflow: hidden; }
.pt-video-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; }
.pt-video-modal[hidden] { display: none; }
.pt-video-fondo { position: absolute; inset: 0; background: rgba(7, 36, 24, .82); backdrop-filter: blur(2px); }
.pt-video-caja {
    position: relative; width: 100%; max-width: 900px; max-height: calc(100vh - 48px); overflow-y: auto;
    background: #fff; border-radius: var(--radio); box-shadow: 0 24px 60px rgba(7, 36, 24, .45);
}
/* Cabecera en una línea, como la ficha del testimonio: foto · nombre · ubicación */
.pt-video-cabecera {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 22px 14px; border-bottom: 1px solid #eef2f0;
}
.pt-video-foto { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; background: var(--gris-bg); }
/* Nombre y ubicación SIEMPRE en la misma línea: lo que no cabe se trunca con puntos
   suspensivos (primero cede la ubicación; el nombre solo si pasa del 60% del hueco). */
.pt-video-quien { display: flex; align-items: center; gap: 12px; flex-wrap: nowrap; min-width: 0; flex: 1 1 auto; }
.pt-video-quien h3 {
    font-family: 'Noland', 'Montserrat', sans-serif; font-size: 22px; color: var(--verde-osc);
    /* El nombre manda: no se encoge mientras no pase del 70% del hueco. La ubicación
       se queda con el resto y es la que cede. */
    flex: 0 0 auto; min-width: 0; max-width: 70%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pt-video-tag { flex: 0 1 auto; min-width: 0; }
.pt-video-tag svg { flex: none; }
.pt-video-tag > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-video-cerrar { margin-left: auto; }
.pt-video-cerrar {
    flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: pointer;
    background: var(--gris-bg); color: var(--verde-osc); display: flex; align-items: center; justify-content: center;
    transition: background .15s ease;
}
.pt-video-cerrar:hover { background: var(--verde-claro); }
.pt-video-cerrar svg { width: 14px; height: 14px; fill: currentColor; }
.pt-video-cuerpo { padding: 0 22px 18px; }
.pt-video-cuerpo .nx-player { border-radius: 12px; overflow: hidden; }
@media (max-width: 900px) {
    .pt-video-modal { padding: 12px; }
    .pt-video-cabecera, .pt-video-cuerpo { padding-left: 14px; padding-right: 14px; }
    .pt-video-quien h3 { font-size: 18px; }
    .pt-video-foto { width: 44px; height: 44px; }
    /* En pantalla estrecha la ubicación se queda al lado del nombre y se trunca: más
       pequeña y con menos separación para que quepa el mayor texto posible. */
    .pt-video-quien { gap: 6px; }
    .pt-video-tag { font-size: 9px; padding: 3px 9px; gap: 4px; }
    .pt-video-tag svg { width: 8px; height: 8px; }
}

/* =============================================================
   7. Feria inmobiliaria
   ============================================================= */
/* La galería mide 3 celdas y la celda tiene TOPE: a partir de ~1600 px la cuadrícula deja de
   crecer y todo el ancho extra se lo queda el texto. Con un porcentaje fijo pasaba lo contrario
   —el padding izquierdo crece con la ventana— y en pantallas grandes el titular quedaba
   estrangulado en 280 px mientras las fotos llegaban a 512. En laptop (1440) sale idéntico que
   antes: 20vw = 288 px, el mismo tamaño que daba el 60 %.
   minmax(0,1fr): sin esto la columna crece con el track del carrusel y desborda la página. */
.pt-feria {
    display: grid; align-items: center; background: var(--gris-bg);
    --pt-feria-celda: min(20vw, 320px);
    grid-template-columns: minmax(0, 1fr) calc(3 * var(--pt-feria-celda));
}
/* Padding derecho = aire entre el titular y la cuadrícula. Crece SOLO por encima de 1440 px
   (en laptop se queda en los 40 px de siempre): sin esto, en pantallas grandes el titular se
   estira hasta rozar la primera columna de fotos. */
.pt-feria-texto {
    padding: 64px max(40px, calc((100vw - 1440px) * .12)) 64px max(40px, calc((100vw - var(--ancho)) / 2 + 24px));
}
.pt-feria-texto h2 { font-size: 38px; color: var(--verde-osc); }
.pt-feria-texto p { color: var(--texto-suave); font-size: 14px; margin: 14px 0 18px; max-width: 380px; }
.pt-feria-fecha { font-family: 'Noland', sans-serif; font-size: 26px; color: var(--verde-osc); font-weight: 700; }
.pt-feria-lugar {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
    background: linear-gradient(90deg, var(--verde-claro), rgba(126, 199, 44, .15));
    color: var(--verde-osc); font-size: 13px; font-weight: 700; padding: 8px 20px 8px 14px; border-radius: 999px;
}
.pt-feria-lugar svg { width: 13px; height: 13px; fill: currentColor; }
.pt-feria-dir { margin: 8px 0 22px; font-size: 11.5px; color: var(--texto-suave); font-weight: 600; }
/* Carrusel de fotos: ventana fija de 3 columnas × 2 filas, celdas cuadradas para que la
   composición salga simétrica. Las filas se desplazan de derecha a izquierda en bucle, así
   que con más de 6 fotos se acaban viendo todas sin cambiar la retícula. La celda mide un
   tercio de la columna derecha del grid (1fr de un 40% / 1fr sobre el ancho de la ventana). */
.pt-feria-fotos { position: relative; min-height: 380px; height: 100%; min-width: 0; }
.pt-feria-carrusel { display: flex; flex-direction: column; overflow: hidden; height: 100%; width: 100%; }
/* El giro lo lleva portal.js: avanza UNA columna cada pocos segundos y se detiene alineado,
   así la retícula se ve cuadrada y simétrica casi todo el tiempo (un desplazamiento continuo
   dejaría siempre columnas partidas por el borde). */
.pt-feria-fila { display: flex; width: max-content; transform: translateX(0); }
/* align-self:start — sin esto el flex estira la foto a la altura de la fila y deja de ser cuadrada */
.pt-feria-foto {
    flex: 0 0 var(--pt-feria-celda); width: var(--pt-feria-celda); height: auto;
    aspect-ratio: 1 / 1; object-fit: cover; display: block; align-self: start;
}
.pt-feria-fotos img.pt-feria-hoja { position: absolute; z-index: 2; width: 190px; height: auto; object-fit: contain; }
/* Las hojas enmarcan la cuadrícula por esquinas opuestas: el follaje de las dos apunta
   hacia el centro, así que ninguna necesita espejarse. */
.pt-feria-hoja-1 { top: -48px; left: -52px; }
/* Pegada al borde derecho: no puede sobresalir (right negativo) o saca scroll horizontal,
   porque esta columna llega justo al filo de la ventana.
   El ancho lo fija la regla de arriba (más específica: `.pt-feria-fotos img.pt-feria-hoja`);
   declararlo aquí no tendría efecto — el `width: 110px` que había nunca llegó a aplicarse. */
.pt-feria-hoja-2 { bottom: -48px; right: 0; }

/* =============================================================
   8. Formulario "comercializa tu aquí"
   ============================================================= */
/* scroll-margin-top: al llegar por el ancla (#pt-contacto, el botón de la feria) el header
   sticky de 78 px se comía la primera línea del rótulo. */
.pt-contacto { background: var(--verde); position: relative; overflow: hidden; scroll-margin-top: 90px; }
/* El adorno es el isotipo de la marca asomando POR DETRÁS de la tarjeta: colgado de
   ella y no de la sección, para que acompañe su esquina en cualquier ancho. */
.pt-contacto-der { position: relative; }
.pt-contacto-der::before {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    background: url('../img/isotipo.webp') center/contain no-repeat;
    aspect-ratio: 161 / 185; height: 86%; width: auto;
    left: 50%; top: 50%;
    transform: translate(calc(-50% + clamp(32px, 5.2vw, 88px)), calc(-50% + clamp(3px, 0.7vw, 11px)));
}
.pt-contacto-inner {
    position: relative; z-index: 2; display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 41%);
    gap: clamp(20px, 3vw, 48px); align-items: center;
    padding: clamp(44px, 5vw, 72px) 24px 0;
}
/* La foto se apoya en el borde inferior y sale por el izquierdo hasta el filo de la
   ventana, como en el diseño. El calc se acota con min/max: sin eso, por debajo del
   ancho de la retícula cambia de signo y empuja la foto hacia dentro (lección 48). */
.pt-contacto-izq { position: relative; align-self: end; }
.pt-contacto-izq > img {
    display: block; height: clamp(290px, 36vw, 530px); width: auto; position: relative; z-index: 1;
    margin-left: max(-170px, min(-24px, calc((100vw - var(--ancho)) / -2 - 24px)));
    margin-bottom: -1px;
}
/* El rótulo monta sobre la foto, no va detrás en su propia columna */
.pt-lettering {
    /* Anclado a la DERECHA de su columna, no a la izquierda: así mantiene su distancia
       con la tarjeta y el aire sobrante queda entre el personaje y el rótulo. Al revés,
       en pantallas medianas se pegaba al hombre y dejaba un hueco enorme al lado del
       formulario. */
    position: absolute; z-index: 2; right: clamp(12px, 2.4vw, 44px);
    top: clamp(20px, 3.5vw, 68px);
}
.pt-lettering span {
    display: block; font-family: 'Noland', sans-serif; font-weight: 700; color: var(--verde-osc);
    line-height: .92; text-transform: lowercase; transform: rotate(-7deg); transform-origin: left center;
}
/* Efecto rótulo: paint-order pone el trazo DEBAJO del relleno; sin él, el borde se
   come la letra. "comercializa" y "aquí" van en blanco con filo oscuro, y "tu" al revés. */
.pt-lettering .l1, .pt-lettering .l3 {
    color: #fff;
    -webkit-text-stroke: clamp(9px, 1.25vw, 18px) var(--verde-osc);
    paint-order: stroke fill;
    text-shadow: 0 clamp(4px, 0.5vw, 7px) 0 rgba(7, 36, 24, .30);
}
.pt-lettering .l1 { font-size: clamp(33px, 4.5vw, 66px); }
.pt-lettering .l2 {
    font-size: clamp(21px, 2.9vw, 41px); color: var(--verde-osc); margin-left: 1.6em;
    -webkit-text-stroke: clamp(7px, 0.95vw, 14px) var(--verde-claro); paint-order: stroke fill;
    text-shadow: 0 clamp(3px, 0.35vw, 5px) 0 rgba(7, 36, 24, .28);
}
.pt-lettering .l3 { font-size: clamp(44px, 5.9vw, 86px); margin-left: .5em; }
.pt-lettering .l4 {
    display: inline-block; transform: rotate(-7deg); background: var(--naranja); color: #fff;
    font-family: 'Montserrat', sans-serif; font-size: clamp(10px, 0.95vw, 13.5px); font-weight: 700;
    text-transform: uppercase; padding: 8px 22px; border-radius: 999px;
    margin: clamp(14px, 1.6vw, 24px) 0 0 clamp(20px, 3vw, 46px); line-height: 1.2; white-space: nowrap;
    box-shadow: 0 6px 14px rgba(7, 36, 24, .22);
}
.pt-form-card {
    background: #fff; border-radius: clamp(20px, 2.2vw, 32px);
    padding: clamp(26px, 2.6vw, 38px) clamp(24px, 2.6vw, 40px);
    box-shadow: 0 18px 40px rgba(7, 36, 24, .18);
    margin: clamp(10px, 2vw, 28px) 0 clamp(44px, 5vw, 72px);
}
.pt-form-card h2 { font-size: 26px; color: var(--verde-osc); text-align: center; }
.pt-form-card > p { text-align: center; font-size: 13px; color: var(--texto-suave); margin: 6px 0 22px; }
.pt-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pt-form-grid .pt-col-2 { grid-column: span 2; }
.pt-form-card input[type=text], .pt-form-card input[type=tel] {
    width: 100%; border: 0; background: #f1f4f2; border-radius: 8px; padding: 13px 16px;
    font-family: inherit; font-size: 13px; color: var(--texto); outline: 0;
}
.pt-form-card input::placeholder { color: #9aa8a1; }
.pt-form-card input:focus { box-shadow: 0 0 0 2px rgba(0, 154, 1, .35); }
.pt-tel { display: flex; gap: 10px; }
.pt-tel-code {
    display: flex; align-items: center; gap: 6px; background: #f1f4f2; border-radius: 8px;
    padding: 0 14px; font-size: 13px; font-weight: 600; color: var(--texto-suave); flex: none;
}
.pt-tel-bandera {
    width: 20px; height: 14px; border-radius: 2px; display: inline-block;
    background: linear-gradient(90deg, #d91023 0 33.3%, #fff 33.3% 66.6%, #d91023 66.6% 100%);
}
.pt-check { display: flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--texto-suave); margin-top: 4px; }
.pt-check input { margin-top: 2px; accent-color: var(--verde); }
/* Enlaces a Términos/Privacidad: mismo color y sin subrayado (tampoco en hover); solo el cursor delata el enlace */
.pt-check-link, .pt-check-link:hover, .pt-check-link:focus { color: inherit; text-decoration: none; cursor: pointer; }
.pt-form-envio { text-align: center; margin-top: 18px; }
.pt-form-msg { font-size: 12.5px; font-weight: 600; margin-top: 12px; text-align: center; min-height: 18px; }
.pt-form-msg.ok { color: var(--verde-osc); }
.pt-form-msg.error { color: #c2410c; }

/* =============================================================
   9. Pie
   ============================================================= */
.pt-footer { background: var(--verde-osc); color: #fff; padding: 46px 0 22px; }
.pt-footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; }
.pt-footer img.pt-footer-logo { height: 34px; width: auto; margin-bottom: 18px; }
.pt-footer-dato { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 8px; }
.pt-footer-dato svg { width: 15px; height: 15px; fill: var(--verde-claro); flex: none; }
.pt-footer h4 { font-family: 'Montserrat', sans-serif; font-size: 14px; margin-bottom: 12px; }
.pt-footer ul { list-style: none; margin: 0; padding: 0; }
.pt-footer li { margin-bottom: 7px; font-size: 13px; }
.pt-footer li a:hover { color: var(--verde-claro); }
.pt-footer .verde-claro a { color: var(--verde-claro); }
.pt-redes { display: flex; gap: 10px; margin: 8px 0 16px; }
.pt-redes a {
    width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--verde-claro);
    display: flex; align-items: center; justify-content: center;
}
.pt-redes svg { width: 14px; height: 14px; fill: var(--verde-claro); }
.pt-footer-copy {
    border-top: 1px solid rgba(255, 255, 255, .16); margin-top: 30px; padding-top: 16px;
    text-align: center; font-size: 12.5px;
}
.pt-footer-copy strong { font-weight: 700; }

/* =============================================================
   Eventos: portada de sección, listado y ficha
   ============================================================= */
.pt-portada { position: relative; background: var(--verde-osc) center/cover no-repeat; }
.pt-portada::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(7, 36, 24, .78) 0%, rgba(0, 154, 1, .72) 100%);
}
.pt-portada-inner { position: relative; z-index: 2; padding: 74px 24px 66px; }
.pt-portada h1 { font-size: 48px; color: #fff; }
.pt-portada p { max-width: 640px; margin: 16px 0 0; color: rgba(255, 255, 255, .92); font-size: 14.5px; text-align: justify; }
.pt-miga { margin-top: 22px; font-size: 14px; font-weight: 700; color: #fff; display: flex; gap: 8px; align-items: center; }
.pt-miga a:hover { color: var(--verde-claro); }
.pt-miga strong, .pt-miga a:last-of-type { color: var(--verde-claro); }
.pt-miga span { opacity: .7; font-weight: 400; }

.pt-eventos-zona { background: var(--gris-bg); padding: 72px 0; }
.pt-eventos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.pt-evento {
    background: #fff; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
    box-shadow: 0 8px 24px rgba(7, 36, 24, .10); transition: transform .18s ease;
}
.pt-evento:hover { transform: translateY(-4px); }
.pt-evento-foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.pt-evento-foto img { width: 100%; height: 100%; object-fit: cover; }
.pt-evento-cuerpo { padding: 20px 22px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pt-evento-cuerpo h3 { font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 700; color: var(--verde-osc); line-height: 1.3; }
.pt-evento-cuerpo h3 a:hover { color: var(--verde); }
.pt-evento-fecha { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; color: var(--verde-osc); }
.pt-evento-lugar { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto-suave); }
.pt-evento-lugar svg { width: 12px; height: 12px; fill: var(--verde); flex: none; }
.pt-evento-cta { margin-top: 6px; padding: 9px 20px; font-size: 13px; border-radius: 8px; }

.pt-evento-ficha { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }
.pt-evento-imagen { width: 100%; border-radius: 16px; box-shadow: var(--sombra); }
.pt-evento-texto { margin-top: 24px; font-size: 15px; color: var(--texto); line-height: 1.7; text-align: justify; }
.pt-evento-datos {
    background: var(--gris-bg); border-radius: 16px; padding: 26px 24px;
    display: flex; flex-direction: column; gap: 18px; position: sticky; top: 100px;
}
.pt-evento-dato { display: flex; flex-direction: column; gap: 2px; }
.pt-evento-dato-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--verde); }
.pt-evento-dato strong { font-family: 'Montserrat', sans-serif; font-size: 15px; color: var(--verde-osc); }
.pt-evento-dato-extra { font-size: 13px; color: var(--texto-suave); }

/* =============================================================
   Nosotros
   ============================================================= */
.pt-nos-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 0; }
.pt-nos-hero-texto { padding: 70px 56px 70px max(40px, calc((100vw - var(--ancho)) / 2 + 24px)); }
.pt-nos-hero-texto h1 { font-size: 44px; color: var(--verde-osc); max-width: 560px; }
.pt-nos-hero-texto p { color: var(--texto-suave); font-size: 14.5px; line-height: 1.75; text-align: justify; max-width: 620px; margin: 0 0 18px; }
.pt-nos-separador { width: 140px; height: auto; margin: 22px 0 26px; }
.pt-miga-oscura { color: var(--verde-osc); margin: 0 0 18px; }
.pt-miga-oscura strong { color: var(--verde-claro); }
.pt-miga-oscura a { color: var(--verde-osc); }
.pt-nos-hero-foto { height: 100%; min-height: 460px; }
.pt-nos-hero-foto img { width: 100%; height: 100%; object-fit: cover; }

.pt-nos-bloque { padding: 90px 0 110px; }
.pt-nos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

/* Formas decorativas del diseño detrás de la tarjeta del formulario */
.pt-nos-form { position: relative; padding: 26px 0 40px 26px; }
.pt-nos-forma { position: absolute; z-index: 0; display: block; }
.pt-nos-forma-oscura {
    top: 0; left: 0; width: 200px; height: 130px; background: var(--verde-osc);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 42% 100%);
}
.pt-nos-forma-clara { right: -30px; top: 46%; width: 150px; height: 200px; background: var(--verde-claro); border-radius: 0 22px 0 0; }
.pt-nos-forma-base { left: 60px; bottom: 0; right: -18px; height: 200px; background: var(--verde-osc); border-radius: 0 0 100px 0; }
.pt-nos-form .pt-form-card { position: relative; z-index: 2; }
.pt-form-card-claro { background: #eef5ef; }
.pt-form-card-claro input[type=text], .pt-form-card-claro input[type=tel], .pt-form-card-claro .pt-tel-code { background: #fff; }

.pt-nos-ventajas { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 34px; }
.pt-nos-ventaja { display: flex; gap: 22px; align-items: flex-start; }
.pt-nos-ventaja img { width: 104px; height: 104px; flex: none; }
.pt-nos-ventaja h3 { font-family: 'Montserrat', sans-serif; font-size: 22px; font-weight: 800; color: var(--verde-osc); }
.pt-nos-ventaja p { margin: 8px 0 0; font-size: 13.5px; color: var(--texto-suave); line-height: 1.6; text-align: justify; }

/* =============================================================
   Ficha de proyecto
   ============================================================= */
.pt-pr-barra { background: #fff; border-bottom: 1px solid #eef2f0; }
.pt-pr-barra-inner { display: flex; align-items: center; gap: 18px; padding: 12px 24px; }
.pt-pr-devlogo {
    width: 116px; height: 52px; flex: none; background: #fff; border: 1px solid #eef2f0;
    border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 6px;
}
.pt-pr-devlogo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pt-pr-titulo { flex: 1; min-width: 0; }
.pt-pr-etiqueta { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--verde-claro); }
.pt-pr-titulo h1 { font-family: 'Montserrat', sans-serif; font-size: 19px; font-weight: 800; color: var(--verde-osc); text-transform: uppercase; }
.pt-pr-titulo h1 span { font-weight: 500; text-transform: none; color: var(--texto-suave); }
/* Cabecera de celular: nace oculta; el media de 760px la enciende y apaga la barra */
.pt-pr-cab-movil { display: none; }
.pt-pr-categoria {
    display: inline-flex; align-items: center; gap: 8px; flex: none; background: var(--verde);
    color: #fff; font-size: 12px; font-weight: 700; padding: 8px 16px; border-radius: 4px;
}
.pt-pr-categoria svg { width: 13px; height: 13px; fill: currentColor; }

/* Galería: la primera foto manda, las otras dos la acompañan */
/* Pista de la galería: 3 paneles iguales con snap; rota sola (portal.js) */
.pt-pr-galeria-pista {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 6px) / 3); gap: 3px;
    overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.pt-pr-galeria-pista::-webkit-scrollbar { display: none; }
.pt-pr-galeria-pista > * { scroll-snap-align: start; }
/* Con 1 o 2 fotos los paneles se reparten el ancho completo */
.pt-pr-galeria-1 { grid-auto-columns: 100%; }
.pt-pr-galeria-2 { grid-auto-columns: calc((100% - 3px) / 2); }
.pt-pr-galeria-1 .pt-pr-foto { height: 380px; }
.pt-pr-foto { display: block; height: 300px; overflow: hidden; }
.pt-pr-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.pt-pr-foto:hover img { transform: scale(1.04); }
.pt-pr-tira { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 10px; padding-bottom: 10px; background: var(--gris-bg); }
.pt-pr-miniaturas { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.pt-pr-miniaturas::-webkit-scrollbar { display: none; }
.pt-pr-miniaturas img { width: 108px; height: 62px; object-fit: cover; border-radius: 6px; }
/* La miniatura de la foto que encabeza la pista se marca en verde */
.pt-pr-miniaturas a { border-radius: 8px; border: 2px solid transparent; padding: 1px; flex: none; }
.pt-pr-miniaturas a.activa { border-color: var(--verde); }

/* ---------- Lightbox de la galería (clic en una foto de la ficha) ---------- */
.pt-lightbox {
    position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center;
    padding: 48px 92px 34px; background: rgba(7, 36, 24, .94);
}
/* El display propio le gana al [hidden] del navegador: hay que apagarlo a mano */
.pt-lightbox[hidden] { display: none; }
.pt-lb-marco { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; min-width: 0; }
.pt-lb-marco img {
    max-width: 100%; max-height: calc(100vh - 150px); object-fit: contain;
    border-radius: 10px; animation: pt-lb-foto .18s ease;
}
@keyframes pt-lb-foto { from { opacity: 0; } to { opacity: 1; } }
.pt-lb-marco figcaption {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    margin-top: 12px; color: #fff; font-size: 13px; font-weight: 600;
}
.pt-lb-contador { opacity: .7; font-weight: 500; flex: none; }
.pt-lb-cerrar {
    position: absolute; top: 14px; right: 20px; z-index: 2; background: none; border: 0; cursor: pointer;
    color: #fff; font-size: 38px; line-height: 1; padding: 6px; opacity: .85;
}
.pt-lb-cerrar:hover { opacity: 1; }
.pt-lb-flecha {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .14); color: #fff;
    display: flex; align-items: center; justify-content: center; transition: background .15s ease;
}
.pt-lb-flecha:hover { background: var(--verde); }
.pt-lb-flecha svg { width: 16px; height: 22px; }
.pt-lb-izq { left: 24px; }
.pt-lb-der { right: 24px; }
.pt-pr-acciones { display: flex; gap: 10px; flex: none; }
.pt-pr-accion {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    background: var(--verde); color: #fff; border-radius: 8px; width: 74px; height: 62px;
    font-size: 11px; font-weight: 600; text-align: center; line-height: 1.25;
}
.pt-pr-accion:hover { filter: brightness(1.06); }
.pt-pr-accion svg { width: 20px; height: 20px; fill: currentColor; }

.pt-pr-cuerpo { display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: start; }
.pt-pr-desde { font-size: 15px; font-weight: 700; color: var(--verde-claro); }
.pt-pr-precio { font-family: 'Montserrat', sans-serif; font-size: 40px; font-weight: 800; color: var(--verde-osc); line-height: 1.1; }
.pt-pr-ubicacion { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; color: var(--texto); }
.pt-pr-ubicacion svg { width: 15px; height: 15px; fill: var(--naranja); flex: none; }
.pt-pr-ubicacion a { color: var(--naranja); font-weight: 700; }

.pt-pr-bloque { margin-top: 34px; padding-top: 28px; border-top: 1px solid #eef2f0; }
.pt-pr-h2 { font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 800; color: var(--verde-osc); margin-bottom: 14px; }
.pt-pr-dev {
    display: inline-flex; align-items: center; justify-content: center; background: #fff;
    border: 1px solid #eef2f0; border-radius: 10px; box-shadow: 0 6px 16px rgba(7, 36, 24, .08);
    padding: 12px 20px; min-height: 74px;
}
.pt-pr-dev img { max-height: 52px; width: auto; object-fit: contain; }
.pt-pr-texto { font-size: 14px; color: var(--texto-suave); line-height: 1.75; text-align: justify; margin: 0 0 14px; }
.pt-pr-docs-btn { margin-top: 4px; padding: 10px 20px; font-size: 13px; border-radius: 6px; }
.pt-pr-docs { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.pt-pr-docs a { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--verde-osc); font-weight: 600; }
.pt-pr-docs a:hover { color: var(--verde); }
.pt-pr-docs svg { width: 15px; height: 15px; fill: var(--naranja); flex: none; }
.pt-pr-docs span { color: var(--texto-suave); font-weight: 400; font-size: 12px; }

.pt-pr-carac { display: flex; flex-wrap: wrap; gap: 22px 34px; margin-bottom: 22px; }
.pt-pr-carac-item { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--verde-osc); }
.pt-pr-carac-item i { font-size: 18px; color: var(--verde-osc); }
.pt-pr-carac-item small { color: var(--texto-suave); font-weight: 400; }

.pt-pr-lotes { display: flex; flex-wrap: wrap; gap: 16px; }
.pt-pr-lote { border: 2px solid var(--naranja); border-radius: 10px; padding: 14px 22px; min-width: 190px; }
.pt-pr-lote span { display: block; font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; color: var(--verde-osc); }
.pt-pr-lote strong { font-family: 'Montserrat', sans-serif; font-size: 26px; font-weight: 800; color: var(--verde-osc); }

.pt-pr-video { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; }
.pt-pr-video img { width: 100%; height: 100%; object-fit: cover; }
/* Sin capa de color encima: la miniatura se ve tal cual; el play, relleno y con sombra, es el foco */
.pt-pr-play {
    position: absolute; inset: 0; margin: auto; width: 96px; height: 96px; border-radius: 50%; z-index: 2;
    background: var(--verde); border: 4px solid #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 10px rgba(255, 255, 255, .18);
    transition: transform .2s ease, box-shadow .2s ease;
}
.pt-pr-video:hover .pt-pr-play { transform: scale(1.08); box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 0 14px rgba(255, 255, 255, .22); }
.pt-pr-play svg { width: 38px; height: 38px; fill: #fff; margin-left: 6px; }

.pt-pr-mapa { height: 340px; border-radius: 12px; overflow: hidden; z-index: 1; background: #e9efe9; }
.pt-pr-mapa iframe { display: block; width: 100%; height: 100%; border: 0; }
.pt-pr-mapa-btn { margin-top: 14px; padding: 10px 20px; font-size: 13px; border-radius: 6px; }
.pt-pr-compartir { display: flex; align-items: center; gap: 10px; margin-top: 34px; padding-top: 22px; border-top: 1px solid #eef2f0; }
.pt-pr-compartir span { font-size: 12.5px; color: var(--texto-suave); margin-right: 4px; }
.pt-pr-compartir a {
    width: 30px; height: 30px; border-radius: 50%; background: var(--naranja);
    display: flex; align-items: center; justify-content: center;
}
.pt-pr-compartir svg { width: 15px; height: 15px; fill: #fff; }

/* Tarjeta del agente */
.pt-pr-agente {
    border: 2px solid var(--verde); border-radius: 20px; padding: 28px 26px; text-align: center;
    position: sticky; top: 100px; background: #fff;
}
.pt-pr-agente-logo { width: 168px; margin: 0 auto; }
.pt-pr-agente-tag { font-family: 'Noland', sans-serif; font-size: 15px; color: var(--verde-osc); margin: 6px 0 20px; }
.pt-pr-agente-datos { display: flex; align-items: center; gap: 12px; text-align: left; margin-bottom: 18px; }
.pt-pr-agente-foto { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex: none; }
/* Representante: el icono es el LOGO de la empresa desarrolladora (contain, sobre blanco);
   sin logo, un círculo con la inicial de la marca */
.pt-pr-agente-foto-logo { object-fit: contain; background: #fff; border: 1px solid #e3e9e5; padding: 4px; }
.pt-pr-agente-foto-inicial { display: inline-flex; align-items: center; justify-content: center; background: var(--verde-claro); color: var(--verde-osc); font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 22px; }
/* min-width:0 en el hijo flex para que el nombre pueda recortarse con elipsis en una sola línea */
.pt-pr-agente-info { min-width: 0; flex: 1 1 auto; }
.pt-pr-agente-datos strong { display: block; font-family: 'Montserrat', sans-serif; font-size: 15px; color: var(--verde-osc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-pr-agente-badges { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.pt-pr-badge-pro { background: var(--verde-claro); color: var(--verde-osc); font-size: 10px; font-weight: 800; padding: 3px 10px; border-radius: 4px; }
.pt-pr-badge-ok { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--texto-suave); }
.pt-pr-badge-ok svg { width: 12px; height: 12px; fill: var(--verde-osc); }
.pt-pr-agente form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.pt-pr-agente input[type=text], .pt-pr-agente input[type=tel] {
    width: 100%; border: 1px solid #e3e9e5; background: #fff; border-radius: 6px; padding: 12px 14px;
    font-family: inherit; font-size: 13px; color: var(--texto); outline: 0;
}
.pt-pr-agente input:focus { border-color: var(--verde); }
.pt-pr-agente .pt-btn { justify-content: center; }

/* =============================================================
   Listado público de proyectos
   ============================================================= */
.pt-listado-head { background: var(--gris-bg); padding: 40px 0; }
.pt-listado-head h1 { font-size: 36px; color: var(--verde-osc); }
.pt-listado-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.pt-paginacion { display: flex; gap: 8px; justify-content: center; margin-top: 36px; }
.pt-paginacion a, .pt-paginacion span {
    min-width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center;
    justify-content: center; font-size: 13px; font-weight: 600; background: var(--gris-bg); color: var(--verde-osc);
}
.pt-paginacion .activo { background: var(--verde); color: #fff; }
.pt-vacio { text-align: center; padding: 60px 20px; color: var(--texto-suave); }
.pt-vacio h3 { font-size: 24px; color: var(--verde-osc); margin-bottom: 8px; }

/* =============================================================
   Responsive
   ============================================================= */
/* Con menos de 1268px ya no cabe la flecha fuera de la retícula: se mete dentro, o
   asoma por el borde derecho y saca 10px de scroll horizontal a toda la página. */
@media (max-width: 1268px) {
    .pt-flecha-izq { left: -8px; }
    .pt-flecha-der { right: -8px; }
}
@media (max-width: 1080px) {
    .pt-listado-grid { grid-template-columns: repeat(2, 1fr); }
    .pt-lotes-pista { grid-auto-columns: calc((100% - 24px) / 2); }
    .pt-carrusel-pista { grid-auto-columns: calc((100% - 24px) / 2); }
    .pt-inmo-pista { grid-auto-columns: calc((100% - 24px) / 2); }
    .pt-beneficios { grid-template-columns: 1fr; gap: 34px; }
    .pt-beneficios-foto { max-width: 460px; margin: 0 auto; }
    /* En celular la foto se muestra entera (sin recorte) y el titular va centrado
       y algo más abajo, para que no quede flotando pegado al borde. */
    .pt-beneficios-foto { aspect-ratio: auto; border-radius: var(--radio); }
    .pt-beneficios-foto img { height: auto; }
    /* Caja al 60% + balance: el titular cae siempre en dos filas equilibradas,
       sin depender de que el tamaño justo no quepa de una. */
    .pt-beneficios-foto h2 {
        top: 12%; left: 20%; right: 20%; text-align: center;
        font-size: clamp(23px, 6vw, 30px);
    }
    .pt-tarjeta-naranja, .pt-tarjeta-verde { margin: 0; }
    .pt-eventos-grid { grid-template-columns: repeat(2, 1fr); }
    .pt-nos-hero { grid-template-columns: 1fr; }
    .pt-nos-hero-texto { padding: 48px 24px; }
    .pt-nos-hero-foto { min-height: 320px; }
    .pt-nos-grid { grid-template-columns: 1fr; gap: 48px; }
    .pt-pr-cuerpo { grid-template-columns: 1fr; gap: 40px; }
    .pt-pr-agente { position: static; }
    .pt-pr-galeria-pista { grid-auto-columns: calc((100% - 3px) / 2); }
    .pt-nos-form { padding: 0; }
    .pt-nos-forma { display: none; }
    .pt-evento-ficha { grid-template-columns: 1fr; }
    .pt-evento-datos { position: static; }
    /* En móvil la sección pasa a una columna y la ventana baja a 2 fotos por fila */
    .pt-feria { grid-template-columns: 1fr; --pt-feria-celda: 50vw; }
    .pt-feria-texto { padding: 48px 24px; }
    .pt-feria-fotos { min-height: 0; }
    .pt-contacto-inner { grid-template-columns: 1fr; }
    /* Más aire arriba: el header es sticky y se come los primeros 78px de la sección */
    .pt-contacto-inner { padding-top: clamp(60px, 9vw, 88px); }
    .pt-contacto-der::before { height: 88%; }
    .pt-contacto-izq { display: flex; align-items: flex-end; justify-content: center; gap: clamp(4px, 2vw, 22px); }
    .pt-contacto-izq > img { height: clamp(230px, 30vw, 330px); margin-left: 0; }
    .pt-lettering { position: static; padding-bottom: clamp(14px, 3vw, 38px); }
    .pt-hero::after { background: linear-gradient(90deg, rgba(7, 36, 24, .85), rgba(7, 36, 24, .45)); }
}
@media (max-width: 760px) {
    /* column-reverse: el rotulo (segundo en el HTML) sube encima de la foto */
    .pt-contacto-izq { flex-direction: column-reverse; align-items: center; }
    /* En móvil el rótulo va CENTRADO y DERECHO: en escritorio se apoya en la diagonal del
       personaje, pero apilado en una columna estrecha la inclinación y los márgenes
       escalonados lo dejaban descolgado a la izquierda. */
    /* Las clases .l2/.l3/.l4 traen su propio margin y su rotación: hay que igualar
       especificidad o el reset del span no las toca. */
    .pt-lettering { padding-bottom: 4px; text-align: center; }
    .pt-lettering span,
    .pt-lettering .l1, .pt-lettering .l2, .pt-lettering .l3, .pt-lettering .l4 {
        transform: none; margin-left: 0; margin-right: 0;
    }
    /* Sin la fila de separación el personaje se apoya en la tarjeta del formulario, y el
       margen negativo lo monta un poco encima para que quede realmente pegado. */
    .pt-contacto-inner { row-gap: 0; }
    .pt-contacto-izq > img { margin-bottom: -10px; }
    /* En móvil no hay hueco fuera de la pista: las flechas se meten dentro y algo más
       pequeñas, pero centradas en la tarjeta igual que en escritorio. */
    .pt-flecha { width: 30px; height: 30px; }
    .pt-flecha svg { width: 12px; height: 12px; }
    .pt-flecha-izq { left: 6px; }
    .pt-flecha-der { right: 6px; }
    .pt-titulo { font-size: 30px; }
    .pt-hero h1 { font-size: 36px; }
    /* El titular y su badge van centrados en celular */
    .pt-hero-inner > div { width: 100%; text-align: center; }
    .pt-nav { display: none; }
    /* El CTA "Ver proyectos" sobra en celular: Proyectos ya vive en el menú hamburguesa */
    .pt-header .pt-btn-naranja { display: none; }
    .pt-nav.abierto {
        display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
        position: absolute; top: 78px; left: 0; right: 0; background: #fff; padding: 18px 24px;
        box-shadow: 0 10px 20px rgba(7, 36, 24, .12);
    }
    .pt-burger { display: block; }
    .pt-header .pt-wrap { position: relative; }
    .pt-buscador-fila { flex-direction: column; align-items: stretch; }
    .pt-campo + .pt-campo { border-left: 0; border-top: 1px solid #e5eae7; padding-left: 0; padding-top: 8px; }
    .pt-listado-grid, .pt-eventos-grid { grid-template-columns: 1fr; }
    .pt-portada h1 { font-size: 32px; }
    .pt-nos-hero-texto h1 { font-size: 30px; }
    .pt-nos-form { padding: 0; }
    .pt-nos-forma { display: none; }
    .pt-nos-ventaja img { width: 64px; height: 64px; }
    .pt-pr-galeria-pista { grid-auto-columns: 100%; }
    /* Panel CUADRADO en celular: el alto es igual al ancho de la pantalla
       (doble clase para ganarle al height fijo de .pt-pr-galeria-1) */
    .pt-pr-galeria-pista .pt-pr-foto { height: auto; aspect-ratio: 1 / 1; }
    /* Lightbox en celular: menos marco y flechas más discretas */
    .pt-lightbox { padding: 54px 14px 20px; }
    .pt-lb-flecha { width: 38px; height: 38px; }
    .pt-lb-izq { left: 8px; }
    .pt-lb-der { right: 8px; }
    .pt-lb-marco img { max-height: calc(100vh - 120px); }
    /* La barra superior sobra en celular (la desarrolladora ya sale en el cuerpo):
       el nombre y la categoría se muestran en la cabecera móvil bajo la galería */
    .pt-pr-barra { display: none; }
    .pt-pr-cab-movil { display: block; margin-bottom: 18px; }
    .pt-pr-cab-nombre {
        font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 800;
        text-transform: uppercase; color: var(--verde-osc); line-height: 1.25;
    }
    .pt-pr-cab-nombre span { font-weight: 500; text-transform: none; color: var(--texto-suave); }
    .pt-pr-cab-movil .pt-pr-categoria { margin-top: 10px; }
    .pt-pr-tira { flex-direction: column; align-items: stretch; }
    /* Bajo las miniaturas: botones "ghost" al estilo de los grandes portales
       (Zillow y cia.): fondo blanco, borde fino, texto oscuro e icono de marca.
       Una línea cada uno, repartiéndose LA MISMA FILA; el texto escala un punto
       en pantallas angostas para no quebrar nunca. */
    .pt-pr-acciones { justify-content: center; }
    .pt-pr-accion {
        flex: 1 1 0; flex-direction: row; gap: 8px; width: auto; height: auto;
        padding: 11px 10px; border-radius: 10px; white-space: nowrap;
        font-size: clamp(11.5px, 3.4vw, 13px); font-weight: 700;
        background: #fff; color: var(--verde-osc); border: 1px solid #dfe8e2;
        box-shadow: 0 2px 8px rgba(7, 36, 24, .06);
    }
    .pt-pr-accion svg { width: 16px; height: 16px; fill: var(--verde); }
    .pt-pr-precio { font-size: 32px; }
    .pt-carrusel-pista, .pt-inmo-pista, .pt-lotes-pista { grid-auto-columns: 100%; }
    .pt-form-grid { grid-template-columns: 1fr; }
    .pt-form-grid .pt-col-2 { grid-column: span 1; }
    .pt-footer-grid { grid-template-columns: 1fr 1fr; }
}