/*
Theme Name: Tatjana Wellem · Mediterranean Properties
Theme URI: https://tatjanawellem.com
Author: Proyecto Tatjana Wellem
Description: Tema a medida para la inmobiliaria Tatjana Wellem (Delta del Ebro / L'Ampolla). Incluye el tipo de contenido "Propiedad", campos a medida, listado y ficha, mapa Leaflet y un puente que genera window.PROPS desde WordPress para reutilizar el front-end existente.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: tatjana-wellem
*/

/* ═══ Paleta (v2.35.4) ═══════════════════════════════════════════════════
   Estas variables duplicaban las de assets/css/site.css con otro nombre:
   --blue era --BD, --gold era --Y, --mut era --M, --blue-l era --BL. El mismo
   color definido dos veces en dos archivos distintos, así que cambiarlo en uno
   dejaba la web con dos tonos. Fue lo que pasó con las etiquetas del
   certificado energético en julio.

   Ahora apuntan a las de site.css, que es la hoja principal y carga antes. Se
   conservan los NOMBRES para no tener que reescribir las 28 apariciones de
   este archivo, pero el valor ya vive en un solo sitio: si cambia la marca,
   se toca site.css y punto.

   El valor tras la coma es la RESERVA: si site.css no llegara a cargar —fallo
   de red, caché corrupta, un plugin que lo desencole— la variable quedaría
   vacía y los botones saldrían transparentes. Con la reserva, la web sigue
   con sus colores aunque falte la hoja principal.                          */
:root{
  --navy:#132F56;         /* propio: NO es --T (#111d2e)   */
  --navy2:#2b4a66;        /* solo aquí, sin equivalente   */
  --blue:var(--BD,#3A6E9F);       /* #3A6E9F  azul de marca       */
  --blue-l:var(--BL,#EAF4FD);     /* #EAF4FD  azul claro          */
  --gold:var(--Y,#F8CB14);        /* #F8CB14  dorado              */
  --gold-d:#d8b00c;       /* solo aquí                    */
  --ink:#243b52;          /* propio: NO es --T (#111d2e)   */
  --mut:var(--M,#526d87);         /* #526d87  texto atenuado      */
  --line:#dde7f0;         /* solo aquí                    */
  --bg:#f4f8fc;           /* solo aquí                    */
  --serif:'Playfair Display',Georgia,serif;  /* propio: NO es --font-serif */
  --sans:'Inter',-apple-system,Segoe UI,Roboto,Arial,sans-serif;  /* propio: NO es --font-sans */
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--ink);background:#fff;font-size:16px;line-height:1.6}
a{color:var(--blue);text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:var(--serif);color:var(--navy);line-height:1.2}

/* Cabecera */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{font-family:var(--serif);font-style:italic;font-weight:700;color:var(--blue);font-size:24px}
.brand small{display:block;font-family:var(--sans);font-style:normal;font-weight:600;font-size:9px;letter-spacing:2px;color:var(--mut);text-transform:uppercase}
.main-nav{display:flex;gap:22px;align-items:center}
.main-nav a{color:var(--navy2);font-weight:600;font-size:14px}
.main-nav a:hover{color:var(--blue)}
.btn{display:inline-block;background:var(--gold);color:var(--navy);font-weight:700;padding:11px 20px;border-radius:0;text-transform:uppercase;letter-spacing:.5px;font-size:13px;border:0;cursor:pointer}
.btn:hover{background:var(--gold-d)}
.btn-ghost{background:transparent;border:1px solid var(--blue);color:var(--blue)}

/* Hero */
.hero{background:linear-gradient(180deg,var(--blue-l),#fff);padding:64px 0 48px;text-align:center}
.hero h1{font-size:42px;margin:0 0 10px}
.hero p{font-size:18px;color:var(--mut);max-width:680px;margin:0 auto 22px}

/* Rejilla de propiedades */
.sec{padding:54px 0}
.sec-h{text-align:center;margin-bottom:30px}
.sec-h .eyebrow{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--blue);font-weight:700}
.sec-h h2{font-size:32px;margin:6px 0 0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{border:1px solid var(--line);background:#fff;overflow:hidden;transition:.2s;display:flex;flex-direction:column}
.card:hover{box-shadow:0 16px 40px rgba(19,47,86,.12);transform:translateY(-3px)}
.card .ph{aspect-ratio:4/3;background:var(--blue-l) center/cover no-repeat;position:relative}
.card .tag{position:absolute;top:12px;left:12px;background:var(--gold);color:var(--navy);font-size:11px;font-weight:700;padding:3px 10px;text-transform:uppercase}
.card .b{padding:16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.card .b h3{font-size:18px;margin:0}
.card .zona{font-size:13px;color:var(--mut)}
.card .price{font-family:var(--serif);font-size:24px;color:var(--blue);font-weight:700;margin-top:auto}
.card .feats{display:flex;gap:14px;font-size:13px;color:var(--navy2);border-top:1px solid var(--line);padding-top:10px}

/* Filtros */
.filters{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:26px}
.filters select,.filters input{padding:10px 12px;border:1px solid var(--line);font-family:inherit;font-size:14px}

/* Ficha de propiedad */
.prop-head{background:var(--navy);color:#fff;padding:34px 0}
.prop-head h1{color:#fff;font-size:34px;margin:0 0 6px}
.prop-head .zona{color:#cfe0f0}
.prop-head .price{font-family:var(--serif);font-size:32px;color:var(--gold);font-weight:700;margin-top:10px}
.prop-head .wrap{max-width:1180px}
/* ===== Ficha de propiedad — estructura Jelena de la v31 (adaptada de modal a página) =====
   El CSS base .pm / .pm-left / .pm-right / .pm-gal-* vive en assets/css/site.css.
   Aquí solo adaptamos el contenedor de "modal" a "página" y estilamos lo nuevo. */
/* Saltar preloader si ya se vio en esta sesión (evita parpadeo) */
.pl-skip #preloader{display:none!important}
/* ...y el menú/topbar deben verse igualmente (gana a la regla que los oculta sin pl-done) */
html.pl-skip #preloader ~ #topbar,
html.pl-skip #preloader ~ #nav{visibility:visible!important;pointer-events:auto!important}
.tw-ficha{background:#fff}
.tw-ficha .pm-page{max-width:none;margin:0;min-height:auto}
/* galería pegajosa a la derecha: ajustar al alto del nav del tema (74px) en vez de los 90px del modal */
.tw-ficha .pm-gal-wrap{height:calc(100vh - 74px);top:74px}
.tw-ficha .pm-bd{max-height:none;overflow-y:visible}
/* galería SIN fotos: altura moderada (no ocupar toda la pantalla) */
/* galería SIN fotos: altura contenida (no se estira a toda la columna ni se alarga), manteniendo las 2 columnas */
.tw-ficha .pm-gal-wrap.is-empty{height:auto;min-height:0;position:relative;top:0;align-self:start}
.tw-ficha .pm-gal-wrap.is-empty .pm-gal-hero{height:440px;flex:none;min-height:0}
/* placeholder de galería sin fotos */
.pm-gal-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#9fb3c8;background:#0b1a2e;text-align:center;padding:20px}
.pm-gal-empty span{font-size:46px;margin-bottom:10px;opacity:.7}
.pm-gal-empty p{margin:0;font-size:14px;letter-spacing:.05em}
/* secciones extra dentro de la columna de contenido */
.pm-media{margin:26px 0}
.pm-media h3{font-family:'Libre Baskerville',var(--serif);font-size:18px;color:#111d2e;font-weight:400;margin:0 0 12px}
.pm-planos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pm-planos img{width:100%;border:1px solid var(--line);border-radius:6px}
.tw-embed{position:relative;width:100%;padding-top:56.25%;border-radius:10px;overflow:hidden;background:#000}
.tw-embed iframe,.tw-embed video{position:absolute;inset:0;width:100%;height:100%;border:0}
#tw-map,.tw-map{height:340px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
/* certificado energético dentro de la columna de contenido */
.pm-cee{margin:26px 0;padding:18px 20px;border:1px solid var(--line);border-radius:10px;max-width:480px}
.pm-cee h3{margin:0 0 12px;font-family:'Libre Baskerville',var(--serif);font-size:18px;color:#111d2e;font-weight:400}
.pm-cee-row{display:flex;align-items:center;gap:10px;margin:8px 0}
.pm-cee-lbl{width:80px;font-size:13px;color:var(--mut)}
.pm-cee-letra{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;border-radius:5px;font-weight:700;font-size:15px;padding:0 8px}
.pm-cee-val{font-size:13px;color:var(--ink)}
.pm-cee-estado{font-size:14px;color:var(--mut);font-style:italic}
/* ── Escritorio (>1024px): galería ARRIBA a todo el ancho, textos DEBAJO (solo ficha de propiedad, no el modal) ── */
@media(min-width:1025px){
  .tw-ficha .pm{grid-template-columns:1fr;grid-template-rows:auto auto;min-height:auto}
  .tw-ficha .pm-page{grid-template-columns:1fr;grid-template-rows:auto auto}
  .tw-ficha .pm-gal-wrap{grid-column:1;grid-row:1;position:relative;top:auto;height:auto;border-left:none;border-bottom:2px solid #0a1a2a}
  .tw-ficha .pm-gal-hero{height:70vh;max-height:720px;min-height:460px;flex:none}
  .tw-ficha .pm-bd{grid-column:1;grid-row:2;max-height:none;overflow-y:visible;max-width:1180px;margin:0 auto;width:100%}
  /* Botones de contacto: estrechos, apilados y centrados (no a todo el ancho) */
  .tw-ficha .pm-right-btns{flex-direction:column!important;flex-wrap:nowrap!important;align-items:center!important;max-width:380px;margin-left:auto!important;margin-right:auto!important}
  .tw-ficha .pm-right-btns .pm-btn-primary,
  .tw-ficha .pm-right-btns .pm-btn-secondary,
  .tw-ficha .pm-right-btns .pm-btn-wa{width:100%!important;max-width:380px!important;flex:0 0 auto!important}
}
/* ── Responsive: en tablets y móviles (incluido modo escritorio estrecho) apilamos en 1 columna ── */
@media(max-width:1024px){
  .tw-ficha .pm-page{grid-template-columns:1fr;grid-template-rows:auto auto}
  .tw-ficha .pm-gal-wrap{grid-column:1;grid-row:1;position:relative;height:auto;top:auto;border-left:none;border-bottom:2px solid #0a1a2a}
  .tw-ficha .pm-gal-hero{height:auto;aspect-ratio:16/10;flex:none;min-height:0}
  .tw-ficha .pm-gal-wrap.is-empty .pm-gal-hero{aspect-ratio:auto;height:260px}
  .tw-ficha .pm-bd{grid-column:1;grid-row:2}
  .pm-planos{grid-template-columns:1fr}
}

/* Pie */
.site-footer{background:var(--navy);color:#cfe0f0;padding:40px 0;margin-top:50px;font-size:14px}
.site-footer a{color:#fff}
.site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}

@media(max-width:900px){.site-footer .cols{grid-template-columns:1fr}}
@media(max-width:600px){.main-nav{display:none}.hero h1{font-size:32px}.prop-head h1{font-size:26px}.prop-specs{grid-template-columns:1fr 1fr}}

/* ===== Guías de zona ===== */
.guia-hero{background:var(--navy) center/cover no-repeat;color:#fff;padding:90px 0;text-align:center}
.guia-eyebrow{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:700}
.guia-hero h1{color:#fff;font-size:44px;margin:10px 0 8px}
.guia-lema{font-size:19px;color:#e6eef6;max-width:680px;margin:0 auto;font-style:italic}
.guia-body{display:grid;grid-template-columns:1fr 300px;gap:40px;padding:46px 22px}
.guia-main{font-size:17px;line-height:1.8}
.guia-main h2{font-size:26px;margin:28px 0 10px}
.guia-high{background:var(--blue-l);border-left:3px solid var(--gold);padding:20px 22px;align-self:start}
.guia-high h3{font-size:16px;margin:0 0 10px}
.guia-high ul{margin:0;padding-left:18px}.guia-high li{margin:6px 0;font-size:14px;color:var(--navy2)}
/* Hero "Sobre Tatjana": foto de retrato + texto al lado (no toca las guías de zona) */
.guia-hero.is-sobre{background:var(--navy);text-align:left;padding:52px 0}
.guia-hero.is-sobre .sobre-hero-inner{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:center}
.guia-hero.is-sobre .guia-lema{max-width:none;margin:0}
.sobre-hero-photo{margin:0}
.sobre-hero-photo img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 18px 44px rgba(0,0,0,.35)}
@media(max-width:900px){
  .guia-hero.is-sobre{padding:40px 0}
  .guia-hero.is-sobre .sobre-hero-inner{grid-template-columns:1fr;gap:26px;text-align:center}
  .guia-hero.is-sobre .guia-lema{margin:0 auto}
  .sobre-hero-photo{max-width:320px;margin:0 auto;order:-1}
}
.guia-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 22px 40px}
.guia-gal img{aspect-ratio:4/3;object-fit:cover;width:100%}
.guia-cta{background:var(--blue-l);padding:40px 0;text-align:center}
.guia-cta p{font-size:18px;color:var(--navy);max-width:640px;margin:0 auto 18px}
.guia-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.guia-card{border:1px solid var(--line);background:#fff;overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.guia-card:hover{box-shadow:0 16px 40px rgba(19,47,86,.12);transform:translateY(-3px)}
.guia-card-img{aspect-ratio:16/10;background:var(--blue-l) center/cover no-repeat}
.guia-card-b{padding:16px 18px}
.guia-card-b h3{font-size:20px;margin:0 0 6px}
.guia-card-b p{font-size:14px;color:var(--mut);font-style:italic;margin:0 0 10px}
.guia-card-link{color:var(--blue);font-weight:700;font-size:14px}
@media(max-width:900px){.guia-body{grid-template-columns:1fr}.guia-grid,.guia-gal{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.guia-grid,.guia-gal{grid-template-columns:1fr}.guia-hero h1{font-size:32px}}

/* ===== Listado de propiedades con la tarjeta .pc (estilo portada) ===== */
.tw-prop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.tw-prop-grid .tw-item{min-width:0}
.tw-prop-grid .tw-pc{position:relative!important;flex:none!important;width:100%!important;aspect-ratio:4/3!important;color:#fff;text-decoration:none}
@media(max-width:900px){.tw-prop-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.tw-prop-grid{grid-template-columns:1fr}}

/* Enlace de las tarjetas de Zona de la portada hacia su guía */
.ac{position:relative}
.tw-ac-link{position:absolute;inset:0;z-index:3}

/* ===== Selector de idioma de TranslatePress (en el nav) ===== */
.nav-tp-switcher{display:inline-flex;align-items:center}
.nav-tp-switcher .trp-language-switcher{margin:0}
/* aspecto on-brand del desplegable de TranslatePress (si lo usas en modo dropdown) */
.nav-tp-switcher select,.nav-tp-switcher .trp-ls-shortcode-current-language{
  background:transparent;border:1px solid rgba(255,255,255,.25);color:inherit;
  border-radius:6px;padding:4px 8px;font-weight:600;cursor:pointer}