/*
Theme Name: BeandImmo
Theme URI: https://beandimmo.com
Author: beand
Description: Tema propio de BeandImmo — hecho a medida para el sitio, con el mismo lenguaje visual que la aplicación (vidrio, naranja de marca #FF5400, plano de arquitecto). Sin frameworks, sin dependencias, sin constructores de páginas.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
License: Propietario
Text Domain: beandimmo
*/

/* ============================================================
   Tokens — los mismos de la app (app/src/styles.css)
   ============================================================ */
:root {
  --ink: #16333E;
  --accent: #FF5400;
  --accent-soft: rgba(255, 84, 0, 0.14);
  --ok: #2E9E6B;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --bg: #EDF2F4;
  --bg-glow-a: rgba(31, 78, 95, 0.13);
  --bg-glow-b: rgba(255, 84, 0, 0.09);
  --bg-glow-c: rgba(73, 167, 194, 0.10);
  --surface: rgba(255, 255, 255, 0.60);
  --surface-solid: #FFFFFF;
  --text: #16333E;
  --muted: #5E7078;
  --tint: #1F4E5F;
  --tint-soft: rgba(31, 78, 95, 0.10);
  --line: rgba(22, 51, 62, 0.10);
  --shadow: 0 1px 2px rgba(22, 51, 62, 0.05), 0 8px 28px rgba(22, 51, 62, 0.09);
  --shadow-float: 0 12px 40px rgba(22, 51, 62, 0.22);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --blur: 20px;
}

:root[data-theme='dark'] {
  --bg: #0C1A20;
  --bg-glow-a: rgba(156, 199, 216, 0.10);
  --bg-glow-b: rgba(255, 84, 0, 0.07);
  --bg-glow-c: rgba(73, 167, 194, 0.08);
  --surface: rgba(31, 78, 95, 0.30);
  --surface-solid: #14262E;
  --text: #E9F1F4;
  --muted: #8FAAB4;
  --tint: #9CC7D8;
  --tint-soft: rgba(156, 199, 216, 0.13);
  --line: rgba(233, 241, 244, 0.09);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 10px 32px rgba(0, 0, 0, 0.35);
  --shadow-float: 0 14px 44px rgba(0, 0, 0, 0.55);
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --ok: #3FD9A4;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100dvh;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* atmósfera: los mismos orbes que respiran detrás del vidrio en la app */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 12% 8%, var(--bg-glow-a), transparent 60%),
    radial-gradient(48vw 42vh at 88% 4%, var(--bg-glow-b), transparent 62%),
    radial-gradient(52vw 46vh at 72% 92%, var(--bg-glow-c), transparent 64%);
}
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ============================================================
   Plano de arquitecto de fondo (solo escritorio, como el login)
   ============================================================ */
.bi-bg { display: none; }
@media (min-width: 900px) and (min-height: 620px) {
  .bi-bg {
    display: block; position: fixed; inset: 0; z-index: -1;
    pointer-events: none; overflow: hidden; opacity: 0.62;
  }
  .bi-bg iframe {
    width: 100%; height: 100%; border: 0; display: block;
    transform: translateX(8%) scale(1.06); transform-origin: center;
  }
  .bi-bg-fade {
    position: absolute; inset: 0; display: block;
    background:
      linear-gradient(to bottom, var(--bg) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 16%,
                      transparent 44%, transparent 74%, color-mix(in srgb, var(--bg) 90%, transparent) 100%),
      radial-gradient(520px 430px at 50% 48%, var(--bg) 0%,
                      color-mix(in srgb, var(--bg) 74%, transparent) 54%, transparent 84%),
      linear-gradient(to right, var(--bg) 0%, transparent 24%);
  }
}
:root[data-theme='dark'] .bi-bg { opacity: 0.3; }
:root[data-theme='dark'] .bi-bg iframe { filter: invert(1) hue-rotate(180deg) saturate(0.8); }

/* ============================================================
   Estructura
   ============================================================ */
.bi-layout {
  position: relative; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center;
  padding: 22px 0 0;
}
.bi-top {
  width: 100%; max-width: 1100px; padding: 0 22px;
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
}
.bi-main {
  margin: auto; width: 100%; max-width: 520px; padding: 26px 26px 10px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  animation: bi-rise 0.7s var(--ease) both;
}
@keyframes bi-rise { from { opacity: 0; transform: translateY(14px); } }
.bi-logo { display: block; height: 58px; width: auto; margin-bottom: 20px; }
.bi-logo-dark { display: none; }
:root[data-theme='dark'] .bi-logo-light { display: none; }
:root[data-theme='dark'] .bi-logo-dark { display: block; }

.bi-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  border: 0.5px solid color-mix(in srgb, var(--accent) 26%, transparent);
  padding: 7px 14px; border-radius: 999px; margin-bottom: 22px;
}
.bi-badge i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  animation: bi-pulse 2s infinite;
}
@keyframes bi-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 84, 0, 0.5); }
  50% { box-shadow: 0 0 0 7px rgba(255, 84, 0, 0); }
}

h1 {
  font-size: clamp(30px, 6.2vw, 46px); line-height: 1.08;
  letter-spacing: -0.035em; font-weight: 700; text-wrap: balance;
}
h1 em { font-style: normal; color: var(--accent); }
.bi-lead {
  margin-top: 16px; font-size: clamp(14.5px, 2.2vw, 16.5px); line-height: 1.6;
  color: var(--muted); max-width: 430px; text-wrap: pretty;
}

/* puntos de valor, en el tono sobrio de la app */
.bi-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.bi-point {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--text);
  background: var(--surface); border: 0.5px solid var(--line);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.5);
  backdrop-filter: blur(var(--blur)) saturate(1.5);
  box-shadow: var(--glass-edge); border-radius: 999px; padding: 8px 14px;
}
.bi-point svg { color: var(--accent); flex: none; }

/* ============================================================
   Aviso de lanzamiento
   ============================================================ */
.bi-form { width: 100%; max-width: 400px; margin-top: 30px; }
.bi-field { display: flex; gap: 9px; }
@media (max-width: 460px) { .bi-field { flex-direction: column; } }
.bi-input {
  flex: 1; min-width: 0; width: 100%;
  border: 0.5px solid var(--line); border-radius: 12px;
  background: color-mix(in srgb, var(--surface-solid) 62%, transparent);
  color: var(--text); font: 400 15px/1 inherit; font-family: inherit;
  padding: 14px 15px; box-shadow: var(--glass-edge);
  transition: box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.bi-input::placeholder { color: var(--muted); opacity: 0.8; }
.bi-input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3.5px var(--accent-soft); background: var(--surface-solid);
}

/* el pill blanco con el anillo que se traza — el CTA de la casa */
.bi-cta {
  flex: none; display: inline-flex; flex-direction: row-reverse;
  align-items: center; justify-content: center; gap: 9px;
  border: 0.5px solid rgba(22, 51, 62, 0.10); border-radius: 13px;
  background: #fff; color: var(--ink);
  font: 600 15px/1 inherit; font-family: inherit; letter-spacing: -0.01em;
  padding: 14px 18px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(22, 51, 62, 0.08);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.bi-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.35); }
.bi-cta:active { transform: translateY(0) scale(0.98); }
.bi-cta .ic { display: inline-flex; width: 24px; height: 24px; flex: none; }
.bi-cta svg { width: 100%; height: 100%; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.bi-cta .ic-track { stroke: rgba(22, 51, 62, 0.16); }
.bi-cta .ic-c { stroke: var(--accent); stroke-dasharray: 95; stroke-dashoffset: 95; transition: stroke-dashoffset 0.5s var(--ease); }
.bi-cta .ic-a { stroke: rgba(22, 51, 62, 0.35); transition: stroke 0.3s; }
.bi-cta:hover .ic-c { stroke-dashoffset: 0; }
.bi-cta:hover .ic-a { stroke: var(--accent); }

.bi-note { margin-top: 11px; font-size: 12px; color: var(--muted); }
.bi-ok, .bi-err {
  display: flex; align-items: center; gap: 9px; text-align: left;
  border-radius: 13px; padding: 13px 15px; font-size: 13.5px; line-height: 1.45;
  border: 0.5px solid transparent;
}
.bi-ok { background: color-mix(in srgb, var(--ok) 13%, transparent); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.bi-err { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.bi-ok svg, .bi-err svg { flex: none; }

/* ============================================================
   Controles (tema e idioma) — mismo patrón que el login
   ============================================================ */
.bi-seg {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px;
  background: var(--surface); border: 0.5px solid var(--line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--glass-edge);
}
.bi-seg button {
  border: 0; background: none; cursor: pointer; color: var(--muted);
  width: 32px; height: 28px; border-radius: 999px; font: 600 12px/1 inherit;
  font-family: inherit; display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.18s ease, color 0.18s ease;
}
.bi-seg button:hover { color: var(--text); }
.bi-seg button.on { background: var(--surface-solid); color: var(--text); box-shadow: var(--shadow); }
.bi-seg.bi-lang button { width: auto; padding: 0 11px; letter-spacing: 0.03em; }

/* ============================================================
   Pie
   ============================================================ */
.bi-foot {
  width: 100%; max-width: 1100px; padding: 26px 22px calc(22px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: center; gap: 8px 18px; flex-wrap: wrap;
  font-size: 12px; color: var(--muted);
}
.bi-foot a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.16s ease, border-color 0.16s ease; }
.bi-foot a:hover { color: var(--accent); border-bottom-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.bi-dot { opacity: 0.4; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}