@import url("https://fonts.googleapis.com/css2?family=Michroma&display=swap");
/* Hallmark · skin (tema Gárate & Niedbalski sobre la web de propiedades de Omniventa)
 * La IDENTIDAD vive aquí, en el tema: ondas y filo naranjo del sitio 2011, sombras
 * profundas, y la portada de cada propiedad degradándose tras la cabecera de su ficha.
 * El plugin detecta este archivo (omniventa-skin.css) y lo carga solo con este tema. */

/* Los SVG de las ondas llevan hex fijo: fondos anclados al MISMO hex para que
   la curva y el plano calcen sin costura (un delta de 1 unidad se nota). */
.pw-body.pw-skin { background: #f4f6f8; }
.pw-skin .pw-footer { background: #132030; }

/* ── Ondas: la firma del 2011. La gramática original no son ripples parejos,
   es UNA curva S grande y asimétrica por transición, con la LÍNEA naranja
   delgada flotando separada — cruza la cresta blanca en vez de bordearla. ── */

/* Regla del original: la línea naranja SIEMPRE viaja por el lado OSCURO del
   borde (dentro del navy arriba; bajo la onda blanca, sobre la foto, abajo).
   Y la onda superior lleva una banda gris clara con sombra entre navy y foto. */

/* Cabeza del hero — tres capas separadas como el original:
   1) banda gris clara EN CUÑA (nace fina a la izq, se abre a la derecha) — vive
      en el ::after del velo, DEBAJO del navy;
   2) navy bajando en curva, con sombra propia que cae SOBRE la banda gris;
   3) línea naranja sobre el navy: pegada a su borde a la izq, despegándose
      hacia la derecha. Delgada (2px), como el original. */
/* PERFIL MAESTRO — el gesto real del 2011 es UNA GRAN DIAGONAL, no ondulitas:
   arriba, el navy se hunde profundo a la IZQUIERDA y sube en un solo barrido
   hacia la DERECHA (con un pequeño asentamiento al final); abajo, el espejo
   exacto. Juntas forman la "lente": foto pellizcada a la izq, abierta a la der.
   Las ondas corren EN FASE (paralelas), no en espejo. El perfil aprobado es el
   del pie: alto a la izquierda, hundiéndose hacia el centro-derecha y
   asentándose al final — TODAS lo comparten.
   E (todas) = M0,26 C360,8 700,74 1000,80 C1200,84 1330,74 1440,66 */
.pw-skin .pw-header { background: #132030; border-bottom: none; box-shadow: none; }
.pw-skin .pw-hero-veil::after {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 104px; z-index: 2;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,28 C360,11 700,80 1000,90 C1200,96 1330,88 1440,84 L1440,0 L0,0 Z' fill='%23dfe3e7'/%3E%3C/svg%3E") top / 100% 104px no-repeat;
}
.pw-skin .pw-hero::before {
    content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 104px; z-index: 3;
    filter: drop-shadow(0 4px 5px rgba(10, 20, 32, 0.38));
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,23 C360,4 700,66 1000,70 C1200,72 1330,62 1440,52' fill='none' stroke='%23e05a12' stroke-width='2'/%3E%3C/svg%3E") top / 100% 104px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C360,8 700,74 1000,80 C1200,84 1330,74 1440,66 L1440,0 L0,0 Z' fill='%23132030'/%3E%3C/svg%3E") top / 100% 104px no-repeat;
}

/* Pie del hero: la crema sube en UNA curva amplia; la línea naranja hace UN
   solo cruce calmado — nace sobre el gris claro a la izq, acompaña la curva y
   termina sobre la foto a la derecha. Delgada (2px). */
.pw-skin .pw-hero { border-bottom: none; }
.pw-skin .pw-hero::after {
    /* Onda inferior: crece hacia arriba con el scroll (parallax) hasta juntarse
       con la superior. La curva va arriba del elemento y el papel rellena abajo. */
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: calc(104px + var(--pw-up, 0px)); z-index: 2;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,38 C360,20 700,82 1000,74 C1200,72 1330,62 1440,52' fill='none' stroke='%23e05a12' stroke-width='2'/%3E%3C/svg%3E") top / 100% 104px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C360,8 700,74 1000,80 C1200,84 1330,74 1440,66 L1440,100 L0,100 Z' fill='%23f4f6f8'/%3E%3C/svg%3E") top / 100% 104px no-repeat,
        linear-gradient(#f4f6f8, #f4f6f8) 0 103px / 100% calc(100% - 103px) no-repeat;
}

/* Onda del pie: navy sube en S amplia; la línea naranja DENTRO del navy,
   justo bajo la onda blanca (como el footer 2011) */
/* Onda del pie: MISMO perfil E' que el pie del hero (navy en vez de foto) */
.pw-skin .pw-footer { position: relative; border-top: none; margin-top: 120px; }
.pw-skin .pw-footer::before {
    content: ""; position: absolute; left: 0; right: 0; top: -103px; height: 104px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,35 C360,17 700,83 1000,89 C1200,93 1330,83 1440,75' fill='none' stroke='%23e05a12' stroke-width='2'/%3E%3C/svg%3E") bottom / 100% 104px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C360,8 700,74 1000,80 C1200,84 1330,74 1440,66 L1440,100 L0,100 Z' fill='%23132030'/%3E%3C/svg%3E") bottom / 100% 104px no-repeat;
}

@media (max-width: 720px) {
    .pw-skin .pw-hero-veil::after { height: 56px; background-size: 100% 56px; }
    .pw-skin .pw-hero::before { height: 56px; background-size: 100% 56px, 100% 56px; }
    .pw-skin .pw-hero::after { height: calc(72px + var(--pw-up, 0px)); background-size: 100% 72px, 100% 72px, 100% calc(100% - 71px); background-position: top, top, 0 71px; }
    .pw-skin .pw-footer::before { top: -55px; height: 56px; background-size: 100% 56px, 100% 56px; }
}

/* El hero respira más alto con las ondas, y la tarjeta libra ambas crestas */
.pw-skin .pw-hero { min-height: clamp(420px, 60vh, 640px); }
.pw-skin .pw-hero-in { z-index: 3; padding-top: 110px; padding-bottom: 150px; }
@media (max-width: 720px) { .pw-skin .pw-hero-in { padding-top: 70px; padding-bottom: 90px; } }

/* ── Sombras con cuerpo (el 2011 tenía relieve; el 2026 lo insinúa) ── */
.pw-skin .pw-hero-card { box-shadow: 0 24px 60px oklch(20% 0.05 240 / 0.45), 0 4px 14px oklch(20% 0.05 240 / 0.25); }
.pw-skin .pw-card { box-shadow: 0 3px 14px oklch(30% 0.05 245 / 0.10); }
.pw-skin .pw-card:hover { box-shadow: 0 16px 36px oklch(30% 0.05 245 / 0.22); }
.pw-skin .pw-header { box-shadow: 0 3px 16px oklch(20% 0.04 240 / 0.35); }

/* ── Ficha: misma onda de cabecera que la portada (navy + cuña gris + línea),
   sobre la foto de la propiedad que recibe degradándose ── */
.pw-skin main.pw-single::after {
    content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
    width: 100vw; height: 104px; z-index: -1;
    filter: drop-shadow(0 4px 5px rgba(10, 20, 32, 0.30));
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,23 C360,4 700,66 1000,70 C1200,72 1330,62 1440,52' fill='none' stroke='%23e05a12' stroke-width='2'/%3E%3C/svg%3E") top / 100% 104px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C360,8 700,74 1000,80 C1200,84 1330,74 1440,66 L1440,0 L0,0 Z' fill='%23132030'/%3E%3C/svg%3E") top / 100% 104px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,28 C360,11 700,80 1000,90 C1200,96 1330,88 1440,84 L1440,0 L0,0 Z' fill='%23dfe3e7'/%3E%3C/svg%3E") top / 100% 104px no-repeat;
}
.pw-skin main.pw-single { position: relative; z-index: 0; padding-top: 120px; }
/* Con la galería real arriba (tendencia PI/Houm), la foto-fondo difuminada
   sobra: la onda navy cae directo sobre el papel y la galería manda */
.pw-skin main.pw-single::before { display: none; }
.pw-skin main.pw-single::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 100vw; height: 360px; z-index: -1;
    background-image: var(--pw-foto); background-size: cover; background-position: center 30%;
    opacity: 0.18; /* suave: el título y el precio deben leerse encima sin esfuerzo */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #0008 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #0008 55%, transparent 100%);
}
.pw-skin .pw-foto-main img { box-shadow: 0 14px 38px oklch(25% 0.05 240 / 0.30); }

/* Chip-título del listado como la píldora naranja del 2011 */
.pw-skin .pw-titulo-listado { position: relative; }
.pw-skin .pw-titulo-listado::after { width: 84px; }

/* ── 1.3.1: lo que sí se quedó del rediseño ── */
/* Título del listado: la píldora naranja del 2011 que nace del borde izquierdo */
.pw-skin .pw-titulo-listado { display: inline-block; background: #d9531a; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; font-size: clamp(1.15rem, 2.4vw, 1.6rem); line-height: 1; padding: 10px 22px 9px; margin: 12px 0 18px; border-radius: 999px; box-shadow: 0 4px 12px rgba(217,83,26,0.30); }
.pw-skin .pw-titulo-listado::after { display: none; }
/* Titular de portada (si está escrito en Ajustes → Web pública) sobre la tarjeta naranja */
.pw-skin .pw-hero-copy { margin-bottom: 18px; max-width: 560px; }
.pw-skin .pw-hero-h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 4.6vw, 3.2rem); line-height: 1; text-transform: uppercase; letter-spacing: 0.4px; color: #fff; text-shadow: 0 2px 14px rgba(10,20,32,0.55); }
.pw-skin .pw-hero-sub { color: #eef2f6; text-shadow: 0 1px 8px rgba(10,20,32,0.55); }
/* Franja de contacto al pie del listado (navy, teléfono naranjo) */
.pw-skin .pw-contacto { background: #132030; box-shadow: 0 16px 40px rgba(10,20,32,0.25); }
.pw-skin .pw-contacto-fono { color: #f3a06b; }

/* ── Parallax del hero (omniventa-skin.js escribe las variables al hacer scroll) ── */
.pw-skin .pw-hero-img { transform: translateY(var(--pw-img, 0px)); will-change: transform; }
.pw-skin .pw-hero-copy { transform: translateY(var(--pw-copy, 0px)); opacity: var(--pw-fade, 1); will-change: transform, opacity; }
.pw-skin .pw-hero-card { transform: translateY(var(--pw-card, 0px)); opacity: var(--pw-fade, 1); will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
    .pw-skin .pw-hero::after { height: 104px; }
    .pw-skin .pw-hero-img, .pw-skin .pw-hero-copy, .pw-skin .pw-hero-card { transform: none; opacity: 1; }
}

/* ── Resultados de búsqueda (sin hero): la onda de cabecera de las fichas sobre el listado ── */
.pw-skin.pw-buscando main.pw-wrap { position: relative; z-index: 0; padding-top: 58px; } /* la píldora sube al hueco bajo la onda (lado izquierdo, donde la onda es baja) */
.pw-skin.pw-buscando main.pw-wrap::after {
    content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
    width: 100vw; height: 104px; z-index: -1;
    filter: drop-shadow(0 4px 5px rgba(10, 20, 32, 0.30));
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,23 C360,4 700,66 1000,70 C1200,72 1330,62 1440,52' fill='none' stroke='%23e05a12' stroke-width='2'/%3E%3C/svg%3E") top / 100% 104px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C360,8 700,74 1000,80 C1200,84 1330,74 1440,66 L1440,0 L0,0 Z' fill='%23132030'/%3E%3C/svg%3E") top / 100% 104px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,28 C360,11 700,80 1000,90 C1200,96 1330,88 1440,84 L1440,0 L0,0 Z' fill='%23dfe3e7'/%3E%3C/svg%3E") top / 100% 104px no-repeat;
}
.pw-skin .pw-filtros-busqueda { background: #fff; border: 1px solid #dfe3e7; border-radius: 999px; padding: 6px; }
.pw-skin .pw-filtros-busqueda select { border: none; background: transparent; padding: 10px 14px; border-right: 1px solid #e3e7ec; }
.pw-skin .pw-filtros-busqueda select:last-of-type { border-right: none; }
.pw-skin .pw-filtros-volver { padding: 0 14px; color: #132030; font-weight: 600; text-decoration: none; }
@media (max-width: 720px) {
    .pw-skin.pw-buscando main.pw-wrap { padding-top: 62px; }
    .pw-skin.pw-buscando main.pw-wrap::after { height: 56px; background-size: 100% 56px, 100% 56px, 100% 56px; }
    .pw-skin .pw-filtros-busqueda { border-radius: 16px; flex-direction: column; align-items: stretch; }
    .pw-skin .pw-filtros-busqueda select { border-right: none; border-bottom: 1px solid #e3e7ec; }
    .pw-skin .pw-filtros-volver { margin: 8px 0 4px; text-align: center; }
}

/* ── Parallax v2: el hero queda fijo bajo la cabecera y el CONTENIDO sube por
   encima llevando la onda inferior en su borde → sin vacío, las ondas se juntan ── */
.pw-skin .pw-hero { position: sticky; top: var(--pw-header, 80px); z-index: 0; }
.pw-skin .pw-hero::after { display: none; } /* la onda inferior ahora la lleva el contenido */
.pw-skin:not(.pw-buscando) main.pw-wrap:not(.pw-single) { position: relative; z-index: 2; padding-top: 24px; }
.pw-skin:not(.pw-buscando) main.pw-wrap:not(.pw-single)::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
    background: #f4f6f8; z-index: -1;
}
.pw-skin:not(.pw-buscando) main.pw-wrap:not(.pw-single)::after {
    content: ""; position: absolute; top: -103px; left: 50%; width: 100vw; height: 104px; transform: translateX(-50%); z-index: -1;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,38 C360,20 700,82 1000,74 C1200,72 1330,62 1440,52' fill='none' stroke='%23e05a12' stroke-width='2'/%3E%3C/svg%3E") bottom / 100% 104px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C360,8 700,74 1000,80 C1200,84 1330,74 1440,66 L1440,100 L0,100 Z' fill='%23f4f6f8'/%3E%3C/svg%3E") bottom / 100% 104px no-repeat;
}
.pw-skin .pw-footer { z-index: 2; }
@media (max-width: 720px) {
    .pw-skin:not(.pw-buscando) main.pw-wrap:not(.pw-single)::after { top: -71px; height: 72px; background-size: 100% 72px, 100% 72px; }
}

/* ── Parallax v2.1: la foto se funde a navy mientras el contenido la cubre; lo que
   quede a la vista en páginas cortas se integra con la cabecera (sin foto cortada) ── */
.pw-skin .pw-hero-veil::before { content: ""; position: absolute; inset: 0; background: #132030; opacity: var(--pw-veil, 0); z-index: 1; }
.pw-skin .pw-hero-img { transform: translateY(var(--pw-img, 0px)) scale(1.08); } /* margen para el desplazamiento: nunca asoma un borde */
@media (prefers-reduced-motion: reduce) { .pw-skin .pw-hero-veil::before { display: none; } }

/* El fondo claro del listado llega hasta la onda del pie: el hero fijo nunca asoma entre ambos */
.pw-skin:not(.pw-buscando) main.pw-wrap:not(.pw-single)::before { bottom: -121px; }
/* En móvil el pie también deja 120px de margen: el fondo claro debe cubrirlos completos, si no el
   hero fijo (navy + foto) asoma como franja entre el contenido y la onda */
@media (max-width: 720px) { .pw-skin:not(.pw-buscando) main.pw-wrap:not(.pw-single)::before { bottom: -121px; } }

/* ── "← Volver a la búsqueda": píldora naranja del 2011 ("VOLVER A: …"), en el hueco
   blanco bajo la onda de cabecera (posición absoluta: no empuja la galería) ── */
.pw-skin .pw-volver { position: absolute; top: 56px; left: 0; margin: 0; background: #d9531a; color: #fff; border: none; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.3px; font-weight: 700; font-size: 1.05rem; line-height: 1; padding: 9px 18px 8px; border-radius: 999px; box-shadow: 0 4px 12px rgba(217,83,26,0.30); z-index: 3; }
.pw-skin .pw-volver:hover { color: #fff; background: #e05a12; transform: translateY(-1px); }
@media (max-width: 720px) { .pw-skin .pw-volver { top: 40px; font-size: 0.78rem; padding: 7px 14px 6px; } }

/* La ficha nunca usa el layout de resultados (aunque lleve ?op=): galería a 120px de la onda */
.pw-skin main.pw-wrap.pw-single { padding-top: 120px; }
/* Portada: la píldora "Últimas propiedades" sube al hueco bajo la onda, como en la ficha y en resultados */
.pw-skin:not(.pw-buscando) main.pw-wrap:not(.pw-single) { padding-top: 0; }
.pw-skin:not(.pw-buscando) main.pw-wrap:not(.pw-single) > .pw-titulo-listado:first-child,
.pw-skin:not(.pw-buscando) main.pw-wrap:not(.pw-single) .pw-titulo-listado { margin-top: -34px; position: relative; z-index: 3; }
@media (max-width: 720px) { .pw-skin:not(.pw-buscando) main.pw-wrap:not(.pw-single) .pw-titulo-listado { margin-top: -14px; } }

/* ── Ficha en pantallas chicas: sin onda (no sobra espacio) y "Volver" ARRIBA de la
   galería, en flujo normal, con su margen; en escritorio la onda y la píldora absoluta ── */
@media (max-width: 900px) {
    .pw-skin main.pw-wrap.pw-single { padding-top: 14px; }
    .pw-skin main.pw-single::after { display: none; }
    .pw-skin .pw-volver { position: static; display: inline-flex; margin: 0 0 12px; }
}

/* ── Letrero VENDIDA / ARRENDADA sobre la foto de la tarjeta: banda diagonal azul
   semitransparente con texto blanco y sombra sólida naranja, como el sitio 2011 ── */
.pw-skin .pw-card-img { overflow: hidden; }
.pw-skin .pw-letrero {
    left: -25%; right: -25%; width: auto; top: 50%; transform: translateY(-50%) rotate(-32deg);
    background: rgba(31, 78, 140, 0.72); border-radius: 0; box-shadow: none;
    /* Michroma: la cuadrada extendida tipo Eurostile del logo; sin cursiva, como el 2011 */
    font-family: "Michroma", "Eurostile", "Bank Gothic", var(--font-display), sans-serif; font-style: normal; font-weight: 400; text-transform: uppercase;
    font-size: clamp(1.15rem, 2.3vw, 1.7rem); letter-spacing: 2px; line-height: 1; padding: 12px 0; text-align: center;
    color: #fff; text-shadow: 3px 3px 0 #e05a12;
}
.pw-skin .pw-card-precios .pw-letrero-mini { background: rgba(31, 78, 140, 0.85); }