/* ═══════════════════════════════════════════════════════════════════════════
   CAPA DE TEMA — tres direcciones de diseño para ELEGIR (07-sep-2026).

   javi: «se ve cutre, hay que dar un salto de calidad, más atractiva y
   profesional», con referencias de inmobiliarias de Bali de gama alta: serif
   de display, mayúsculas espaciadas, verde oliva profundo en bloques, fondo
   hueso, fotos grandes redondeadas, mucho aire, números enormes.

   Esta hoja SOLO se carga con `?tema=a|b|c` en la URL (base.html), así que
   producción no cambia hasta que javi elija por número — que es la única forma
   que ha funcionado con los cambios de aspecto. Cuando elija, lo que gane pasa
   a estilo.css/paginas.css por capas (fuentes → titulares → etiquetas →
   tamaños → color) y esta hoja se borra.

   Lo que el mapeo dijo que se veía barato, y que las tres direcciones corrigen:
     · tipografía de sistema sin carácter → fuentes propias autoalojadas (OFL)
     · Consolas como etiqueta en 65 reglas → una sans tranquila, sin monospace
     · ~50 reglas a 8,5-10 px → etiquetas a 11-12 px con aire
     · 134 bordes de 1 px → superficies con contraste y sombra suave
     · --marca y --lima iguales → un oliva profundo de BLOQUE y un verde de acento
     · fotos pequeñas con borde → grandes, redondeadas, sin borde
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Cormorant Garamond";src:url("/estatico/fuentes/cormorant-garamond.woff2") format("woff2");
  font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("/estatico/fuentes/playfair-display.woff2") format("woff2");
  font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("/estatico/fuentes/manrope.woff2") format("woff2");
  font-weight:200 800;font-style:normal;font-display:swap}

/* ── Común a las tres: lo que corrige lo «cutre» sin decidir la personalidad ── */
html[data-tema]{
  --d:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* La mono deja de ser etiqueta: solo queda para números tabulares. */
  --m:"Manrope",system-ui,sans-serif;
  --r:18px;
  --linea:rgba(31,29,24,.09); --linea2:rgba(31,29,24,.18);
  --sombra-f:rgba(31,29,24,.12);
}
html[data-tema] body{font-size:16.5px;line-height:1.6}
html[data-tema] .mono{letter-spacing:0;font-variant-numeric:tabular-nums}

/* Etiquetas: de Consolas 8,5-10 px a una sans pequeña, espaciada y con aire. */
html[data-tema] .kicker,html[data-tema] .bloque-t,html[data-tema] .card-zona,
html[data-tema] .art-cat,html[data-tema] .campo label,html[data-tema] .roi span,
html[data-tema] .rail-l,html[data-tema] .mo-etiq,html[data-tema] .medio-tag,
html[data-tema] .fo-num,html[data-tema] .tl-cab{
  font-family:var(--d);font-size:11px;letter-spacing:.16em;font-weight:600}
html[data-tema] .kicker{font-size:11.5px;letter-spacing:.22em}
html[data-tema] .chip{font-family:var(--d);font-size:10px;letter-spacing:.1em;font-weight:700;
  padding:5px 9px;border-radius:7px}
html[data-tema] .lang,html[data-tema] .visitas{font-family:var(--d);font-size:11.5px;letter-spacing:.06em}

/* Superficies: menos caja, más plano. */
html[data-tema] .card{border-color:transparent;box-shadow:0 1px 0 var(--linea),0 14px 34px -22px var(--sombra-f);
  border-radius:var(--r)}
html[data-tema] .card:hover{border-color:transparent;box-shadow:0 1px 0 var(--linea),0 26px 50px -22px var(--sombra-f)}
html[data-tema] .card-img{aspect-ratio:4/3}
html[data-tema] .card-b{padding:18px 20px 20px}
html[data-tema] .card h3{font-size:17.5px;letter-spacing:-.015em;line-height:1.3}
html[data-tema] .precio{font-family:var(--d);font-size:23px;font-weight:700;letter-spacing:-.03em}
html[data-tema] .roi b{font-family:var(--d);font-weight:700}
html[data-tema] .tira b{font-family:var(--d);font-weight:700;font-size:30px;letter-spacing:-.03em}
html[data-tema] section{padding:112px 0}
html[data-tema] .hero h1{font-size:clamp(42px,5.4vw,78px);line-height:1.02;margin:16px 0 22px}
html[data-tema] .lead{font-size:clamp(16px,1.35vw,19px);line-height:1.6}
html[data-tema] .btn{font-weight:600;padding:12px 22px;letter-spacing:.01em}
html[data-tema] .btn-p{border-color:transparent;box-shadow:0 8px 20px -12px var(--sombra-f)}
html[data-tema] .hero-media{border-radius:26px}
html[data-tema] .miniatura{border-radius:12px;width:104px;height:72px}
html[data-tema] .cc{border-color:transparent;box-shadow:0 1px 0 var(--linea),0 12px 30px -24px var(--sombra-f);padding:20px 22px}
html[data-tema] .cc b{font-size:38px;letter-spacing:-.03em}
html[data-tema] .cc span{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
html[data-tema] .ficha-r{border-color:transparent;box-shadow:0 1px 0 var(--linea),0 20px 44px -26px var(--sombra-f);border-radius:22px}
html[data-tema] .art{border-color:transparent;box-shadow:0 1px 0 var(--linea),0 14px 34px -22px var(--sombra-f);border-radius:var(--r)}
html[data-tema] .art h2{font-size:21px;line-height:1.25}
html[data-tema] .art p{font-size:14.5px}
html[data-tema] .nav-links{font-size:14.5px;gap:28px;font-weight:500}
html[data-tema] .moneda{border-color:var(--linea2)}
html[data-tema] .moneda .mo{font-family:var(--d);font-weight:600}
html[data-tema] .capa{font-weight:600}
html[data-tema] .campo{border-radius:14px}
html[data-tema] .campo select,html[data-tema] .campo input{font-size:15px}
html[data-tema] .anunciante b{font-size:16px}
html[data-tema] .legal{border-radius:16px;overflow:hidden}

/* ── A · «Oliva y serif» — la más cercana a las referencias ─────────────────
   Cormorant Garamond en titulares (fina, contraste alto, aire de villa),
   Manrope en todo lo demás, oliva profundo para los bloques y el botón
   principal, verde de acento para lo que se lee (precio, enlaces). */
html[data-tema="a"]{
  --noche:#F1EDE4; --roca:#FBF9F4; --roca2:#F4F0E7; --roca3:#E6E0D3;
  --velo-nav:rgba(241,237,228,.94); --velo-barra:rgba(241,237,228,.6);
  --marca:#46553F; --marca2:#374532; --lima:#4F6B3E; --lima2:#3B5230;
  --lav1:rgba(70,85,63,.07); --lav2:rgba(70,85,63,.13);
  --brasa:#9A5A1E;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
}
html[data-tema="a"] h1,html[data-tema="a"] h2,html[data-tema="a"] .h-xl,html[data-tema="a"] .h-l,
html[data-tema="a"] .h-m,html[data-tema="a"] .card h3,html[data-tema="a"] .art h2,
html[data-tema="a"] .publicar-caja b,html[data-tema="a"] .cc b,html[data-tema="a"] .precio,
html[data-tema="a"] .tira b{font-family:var(--serif);font-weight:600;letter-spacing:-.01em}
html[data-tema="a"] h1,html[data-tema="a"] h2{font-weight:500;letter-spacing:-.005em;line-height:1.04}
html[data-tema="a"] .hero h1{font-size:clamp(46px,6vw,88px);font-weight:500}
html[data-tema="a"] .hero h1 em{font-style:italic;font-weight:500;color:var(--lima)}
html[data-tema="a"] .card h3{font-size:22px;font-weight:600;line-height:1.15;margin:6px 0 12px}
html[data-tema="a"] .art h2{font-size:26px;font-weight:600;line-height:1.12}
html[data-tema="a"] .art-grande h2{font-size:32px}
html[data-tema="a"] .precio{font-size:30px;font-weight:600}
html[data-tema="a"] .cc b{font-size:46px;font-weight:500}
html[data-tema="a"] .tira b{font-size:38px;font-weight:500}
html[data-tema="a"] .kicker{color:var(--lima);font-weight:600}
html[data-tema="a"] .kicker::before{background:var(--lima)}
html[data-tema="a"] nav.solid{background:var(--velo-nav)}
html[data-tema="a"] .btn-p{background:var(--marca);color:#fff}
html[data-tema="a"] .btn-p:hover{background:var(--marca2);box-shadow:0 0 0 6px var(--lav2)}
html[data-tema="a"] .chip.dest{background:var(--marca)}
html[data-tema="a"] .publicar-caja{background:var(--marca);color:#fff;border-color:transparent;border-radius:24px;padding:34px 38px}
html[data-tema="a"] .publicar-caja b{color:#fff;font-size:30px;font-weight:500}
html[data-tema="a"] .publicar-caja .kicker{color:rgba(255,255,255,.72)}
html[data-tema="a"] .publicar-caja .kicker::before{background:rgba(255,255,255,.5)}
html[data-tema="a"] .publicar-caja p{color:rgba(255,255,255,.82)}
html[data-tema="a"] .publicar-caja .btn-p{background:#fff;color:var(--marca)}
html[data-tema="a"] .ficha-r{background:var(--roca)}
html[data-tema="a"] .anunciante .anun-logo{background:var(--marca);color:#fff;border-radius:12px}
html[data-tema="a"] .cc.destaca{background:var(--marca);border-color:transparent}
html[data-tema="a"] .cc.destaca b,html[data-tema="a"] .cc.destaca span,html[data-tema="a"] .cc.destaca i{color:#fff}
html[data-tema="a"] .cc.destaca span{color:rgba(255,255,255,.78)}
html[data-tema="a"] .cc.destaca i{color:rgba(255,255,255,.62)}

/* ── B · «Editorial» — más contraste, más negro, serif fuerte ────────────────
   Playfair Display pesada en titulares, dorado apagado en etiquetas y
   filetes, fondo hueso más claro. Menos «villa», más «revista». */
html[data-tema="b"]{
  --noche:#F5F2EB; --roca:#FFFDF8; --roca2:#F3EFE6; --roca3:#E7E1D4;
  --velo-nav:rgba(245,242,235,.95); --velo-barra:rgba(245,242,235,.6);
  --tinta:#171512; --marca:#1F2A1E; --marca2:#0F150F; --lima:#3E6236; --lima2:#2C4726;
  --lav1:rgba(31,42,30,.06); --lav2:rgba(31,42,30,.12);
  --brasa:#A0742F;
  --serif:"Playfair Display",Georgia,serif;
}
html[data-tema="b"] h1,html[data-tema="b"] h2,html[data-tema="b"] .h-xl,html[data-tema="b"] .h-l,
html[data-tema="b"] .h-m,html[data-tema="b"] .card h3,html[data-tema="b"] .art h2,
html[data-tema="b"] .publicar-caja b,html[data-tema="b"] .cc b,html[data-tema="b"] .precio,
html[data-tema="b"] .tira b{font-family:var(--serif);font-weight:600;letter-spacing:-.02em}
html[data-tema="b"] h1,html[data-tema="b"] h2{line-height:1.06}
html[data-tema="b"] .hero h1{font-size:clamp(42px,5.4vw,80px);font-weight:700}
html[data-tema="b"] .hero h1 em{font-style:italic;font-weight:500;color:var(--brasa)}
html[data-tema="b"] .card h3{font-size:19px;font-weight:600;line-height:1.22}
html[data-tema="b"] .art h2{font-size:23px;font-weight:600;line-height:1.18}
html[data-tema="b"] .art-grande h2{font-size:28px}
html[data-tema="b"] .precio{font-size:26px;font-weight:700}
html[data-tema="b"] .cc b{font-size:42px;font-weight:600}
html[data-tema="b"] .tira b{font-size:34px;font-weight:600}
html[data-tema="b"] .kicker,html[data-tema="b"] .bloque-t,html[data-tema="b"] .card-zona,
html[data-tema="b"] .art-cat{color:var(--brasa)}
html[data-tema="b"] .kicker::before{background:var(--brasa)}
html[data-tema="b"] .btn-p{background:var(--marca);color:#fff}
html[data-tema="b"] .btn-p:hover{background:var(--marca2);box-shadow:0 0 0 6px var(--lav2)}
html[data-tema="b"] .chip.dest{background:var(--marca)}
html[data-tema="b"] .publicar-caja{background:var(--marca);color:#fff;border-color:transparent;border-radius:22px;padding:34px 38px}
html[data-tema="b"] .publicar-caja b{color:#fff;font-size:28px}
html[data-tema="b"] .publicar-caja .kicker{color:var(--brasa)}
html[data-tema="b"] .publicar-caja p{color:rgba(255,255,255,.8)}
html[data-tema="b"] .publicar-caja .btn-p{background:#fff;color:var(--marca)}
html[data-tema="b"] .anunciante .anun-logo{background:var(--marca);color:#fff;border-radius:12px}
html[data-tema="b"] .cc.destaca{background:var(--marca);border-color:transparent}
html[data-tema="b"] .cc.destaca b,html[data-tema="b"] .cc.destaca span,html[data-tema="b"] .cc.destaca i{color:#fff}
html[data-tema="b"] .cc.destaca span{color:var(--brasa)}

/* ── C · «Ligero» — sin serif: el salto sin cambiar de voz ───────────────────
   Manrope en todo, más grande y más claro, oliva y crema, fotos grandes.
   La opción más segura para quien vea la serif como «de agencia de viajes». */
html[data-tema="c"]{
  --noche:#F0ECE3; --roca:#FAF8F3; --roca2:#F3EFE6; --roca3:#E5DFD2;
  --velo-nav:rgba(240,236,227,.94); --velo-barra:rgba(240,236,227,.6);
  --marca:#4A5A44; --marca2:#3A4835; --lima:#4E6C3C; --lima2:#3A5230;
  --lav1:rgba(74,90,68,.07); --lav2:rgba(74,90,68,.13);
}
html[data-tema="c"] h1,html[data-tema="c"] h2,html[data-tema="c"] h3{font-weight:700;letter-spacing:-.03em}
html[data-tema="c"] .hero h1{font-size:clamp(42px,5.2vw,76px);line-height:1.02}
html[data-tema="c"] .hero h1 em{color:var(--lima)}
html[data-tema="c"] .card h3{font-size:18.5px;font-weight:700}
html[data-tema="c"] .art h2{font-size:22px;font-weight:700}
html[data-tema="c"] .precio{font-size:24px;font-weight:800}
html[data-tema="c"] .cc b{font-size:40px;font-weight:700}
html[data-tema="c"] .btn-p{background:var(--marca);color:#fff}
html[data-tema="c"] .btn-p:hover{background:var(--marca2);box-shadow:0 0 0 6px var(--lav2)}
html[data-tema="c"] .chip.dest{background:var(--marca)}
html[data-tema="c"] .publicar-caja{background:var(--marca);color:#fff;border-color:transparent;border-radius:24px;padding:34px 38px}
html[data-tema="c"] .publicar-caja b{color:#fff;font-size:26px}
html[data-tema="c"] .publicar-caja .kicker{color:rgba(255,255,255,.72)}
html[data-tema="c"] .publicar-caja .kicker::before{background:rgba(255,255,255,.5)}
html[data-tema="c"] .publicar-caja p{color:rgba(255,255,255,.82)}
html[data-tema="c"] .publicar-caja .btn-p{background:#fff;color:var(--marca)}
html[data-tema="c"] .anunciante .anun-logo{background:var(--marca);color:#fff;border-radius:12px}
html[data-tema="c"] .cc.destaca{background:var(--marca);border-color:transparent}
html[data-tema="c"] .cc.destaca b,html[data-tema="c"] .cc.destaca span,html[data-tema="c"] .cc.destaca i{color:#fff}
html[data-tema="c"] .cc.destaca span{color:rgba(255,255,255,.78)}

/* ── Móvil: los espejos de paginas.css (≤760) con los tamaños nuevos ───────── */
@media (max-width:760px){
  html[data-tema] section{padding:72px 0}
  html[data-tema] .hero h1{font-size:clamp(36px,10vw,48px)}
  html[data-tema] .card-img{aspect-ratio:4/3}
  html[data-tema] .precio{font-size:22px}
  html[data-tema] .cc b{font-size:34px}
  html[data-tema="a"] .cc b{font-size:40px}
  html[data-tema] .hero-media{border-radius:20px}
}