/* ==========================================================================
   Gosén Soluciones Inmobiliarias — Hoja de estilos del sitio
   Valores tomados literalmente de los prototipos de diseño (hi-fi).
   Las secciones únicas de cada página usan estilos en línea (fidelidad
   exacta); aquí viven la base, los componentes generados por JS (hero,
   propiedades, galería), los estilos de formulario y el responsive.
   ========================================================================== */

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #FFFFFF; }
body { font-family: 'Manrope', system-ui, sans-serif; color: #1a1a1a; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: #BC1406; text-decoration: none; }
a:hover { color: #FC402D; }
::selection { background: #BC1406; color: #fff; }
input, textarea, button { font-family: inherit; }
input:focus, textarea:focus { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Foco visible accesible para controles interactivos por teclado */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 2px solid #FC402D; outline-offset: 2px;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  transition: background .3s, box-shadow .3s;
  background: linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,0));
}
.site-header--inner { background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,0)); }
.site-header.scrolled,
.site-header--solid { background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.07); }
.site-header--solid { box-shadow: 0 1px 0 rgba(0,0,0,.06); }

.site-header .burger {
  width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.55);
  background: transparent; cursor: pointer; display: flex; flex-direction: column;
  gap: 5px; align-items: center; justify-content: center;
}
.site-header .burger span { display: block; width: 20px; height: 2px; background: #fff; }
.site-header.scrolled .burger,
.site-header--solid .burger { border-color: #e2dad4; }
.site-header.scrolled .burger span,
.site-header--solid .burger span { background: #111; }

/* ---------- Menú overlay ---------- */
.menu-overlay {
  position: fixed; inset: 0; z-index: 1000; background: #111;
  transition: opacity .35s, visibility .35s; opacity: 0; visibility: hidden;
  overflow-y: auto;
}
.menu-overlay.is-open { opacity: 1; visibility: visible; }
.menu-link {
  font-family: 'Playfair Display', serif; font-size: clamp(28px,5vw,52px);
  color: #fff; line-height: 1.12; font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,.08); padding: 14px 0;
}
.menu-link:hover { color: #FC402D; }
.menu-link.is-active { color: #FC402D; }

/* ---------- Botones (hover del prototipo) ---------- */
.btn-red:hover { background: #FC402D !important; }
.btn-outline-hero:hover { background: #fff !important; color: #111 !important; }
.btn-outline-red:hover { background: #BC1406 !important; color: #fff !important; }
.btn-wa:hover { background: #1eb658 !important; }
.link-underline:hover { color: #FC402D !important; }
.social-contact:hover { background: #BC1406 !important; }
.social-footer:hover { background: #BC1406 !important; border-color: #BC1406 !important; }
.footer-link:hover { color: #fff !important; }

/* ---------- Hero (inicio) ---------- */
.hero-slide {
  position: absolute; inset: 0; background-size: cover;
  background-position: center 30%; opacity: 0; transition: opacity 1.2s ease;
}
.hero-slide.is-active { opacity: 1; }
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px;
  border: 1px solid rgba(255,255,255,.4); background: rgba(17,17,17,.18); color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.hero-arrow:hover { background: rgba(188,20,6,.9); border-color: transparent; }
.hero-arrow--prev { left: 24px; }
.hero-arrow--next { right: 24px; }
.hero-arrow .chev { display: block; width: 11px; height: 11px; }
.hero-arrow--prev .chev { border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); margin-left: 4px; }
.hero-arrow--next .chev { border-right: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(45deg); margin-right: 4px; }
.hero-dots { position: absolute; bottom: 30px; right: 40px; display: flex; gap: 9px; }
.hero-dot { cursor: pointer; border: none; padding: 0; height: 7px; width: 7px; background: rgba(255,255,255,.5); transition: width .3s, background .3s; }
.hero-dot.is-active { width: 26px; background: #fff; }

/* ---------- Cards de propiedad ---------- */
.prop-card { background: #fff; border: 1px solid #ece6e1; display: flex; flex-direction: column; }
.prop-card:hover { border-color: #d9cfc8; }
.prop-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #efeae6; }
.prop-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .28s ease; }
.prop-img.is-active { opacity: 1; }
.prop-badge { position: absolute; top: 12px; left: 12px; background: rgba(17,17,17,.82); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .1em; padding: 5px 9px; }
.prop-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: none; background: rgba(255,255,255,.86); color: #111; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.prop-arrow:hover { background: #BC1406; }
.prop-arrow--prev { left: 8px; }
.prop-arrow--next { right: 8px; }
.prop-arrow .chev { display: block; width: 7px; height: 7px; }
.prop-arrow--prev .chev { border-left: 2px solid #111; border-bottom: 2px solid #111; transform: rotate(45deg); margin-left: 3px; }
.prop-arrow--next .chev { border-right: 2px solid #111; border-top: 2px solid #111; transform: rotate(45deg); margin-right: 3px; }
.prop-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.prop-dot { cursor: pointer; border: none; padding: 0; width: 6px; height: 6px; background: rgba(255,255,255,.75); transition: all .3s; }
.prop-dot.is-active { width: 16px; background: #BC1406; }
.prop-body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.prop-title { font-size: 14px; font-weight: 800; letter-spacing: .02em; color: #161616; margin: 0 0 5px; line-height: 1.25; }
.prop-district { display: flex; align-items: center; gap: 6px; color: #8a827c; font-size: 12.5px; font-weight: 600; letter-spacing: .03em; margin-bottom: 14px; }
.prop-district .dot { width: 5px; height: 5px; background: #BC1406; border-radius: 50%; }
.prop-cta { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #e0d8d2; color: #161616; padding: 11px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.prop-cta:hover { background: #BC1406; color: #fff; border-color: #BC1406; }
.prop-cta img { width: 15px; height: 15px; }

/* ---------- Galería (inicio) ---------- */
.gallery-cell { overflow: hidden; background: #efeae6; border: 1px solid #ece6e1; aspect-ratio: 4/3; }
.gallery-cell img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   FORMULARIOS
   ========================================================================== */
/* Opciones tipo radio-card (claro — inicio) */
.opt-radio { display: flex; align-items: center; gap: 11px; text-align: left; padding: 15px 16px; border: 1.5px solid #ded5cf; background: #fff; cursor: pointer; font-size: 14.5px; font-weight: 600; color: #2a2825; width: 100%; }
.opt-radio .radio { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #cabfb7; background: #fff; }
.opt-radio.is-selected { border-color: #BC1406; background: #fbf4f3; }
.opt-radio.is-selected .radio { border-color: #BC1406; background: radial-gradient(circle,#BC1406 0 40%,#fff 46%); }

/* Opciones tipo radio-card (oscuro — necesidad en Valorización) */
.opt-need { display: flex; align-items: center; gap: 10px; text-align: left; padding: 14px; border: 1.5px solid rgba(255,255,255,.18); background: #1e1e1e; cursor: pointer; font-size: 13.5px; font-weight: 600; color: #d8d3ce; line-height: 1.25; width: 100%; }
.opt-need .radio { flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%; border: 2px solid #6a645e; background: #1e1e1e; }
.opt-need.is-selected { border-color: #FC402D; background: rgba(252,64,45,.14); color: #fff; }
.opt-need.is-selected .radio { border-color: #FC402D; background: radial-gradient(circle,#FC402D 0 40%,#1e1e1e 46%); }

/* Chips (oscuro — tipo de inmueble en Valorización) */
.opt-chip { padding: 11px 16px; border: 1.5px solid rgba(255,255,255,.18); background: #1e1e1e; color: #d8d3ce; cursor: pointer; font-size: 13.5px; font-weight: 700; }
.opt-chip.is-selected { border-color: #FC402D; background: #BC1406; color: #fff; }

/* Casilla de autorización */
.privacy-box { flex: 0 0 auto; width: 20px; height: 20px; border: 1.5px solid #cabfb7; background: #fff; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 800; margin-top: 1px; }
.privacy-box.is-checked { border-color: #BC1406; background: #BC1406; }
.privacy-box--dark { border-color: #6a645e; background: #1e1e1e; }
.privacy-box--dark.is-checked { border-color: #FC402D; background: #BC1406; }
.privacy-box.is-checked::after { content: "✓"; }

/* Mensajes de error por campo */
.field-error { display: none; color: #BC1406; font-size: 12.5px; font-weight: 600; margin-top: 6px; }
.field-error.is-visible { display: block; }
.form-dark .field-error { color: #FC402D; }
.has-error { border-color: #BC1406 !important; }
.form-dark .has-error { border-color: #FC402D !important; }
.privacy-box.has-error { border-color: #BC1406; }
.privacy-box--dark.has-error { border-color: #FC402D; }

/* Aviso técnico / error del formulario */
.form-notice { display: none; margin-top: 18px; font-size: 12.5px; font-weight: 600; line-height: 1.5; padding: 11px 14px; border: 1px solid #ece6e1; background: #faf8f6; color: #8a827c; }
.form-notice.is-visible { display: block; }
.form-notice.is-error { border-color: #f0d3cf; background: #fdf3f2; color: #BC1406; }
.form-dark .form-notice { border-color: rgba(255,255,255,.18); background: #1e1e1e; color: #b8b2ac; }
.form-dark .form-notice.is-error { border-color: rgba(252,64,45,.45); background: rgba(252,64,45,.10); color: #FC402D; }

/* Foco de inputs por formulario */
.form-light input:focus, .form-light textarea:focus { border-color: #BC1406; }
.form-dark input:focus, .form-dark textarea:focus { border-color: #FC402D; }
.form-dark input::placeholder, .form-dark textarea::placeholder { color: #7a746e; }

/* Botón de envío en carga */
.btn-next.is-loading { opacity: .72; cursor: default; }

/* ==========================================================================
   RESPONSIVE — móvil (<=700px). Reglas portadas de los prototipos y
   ALCANCADAS por página para evitar colisiones entre home e interiores.
   ========================================================================== */
@media (max-width: 700px) {
  /* ---- Común ---- */
  .m-headwrap { padding: 0 16px !important; }

  /* ---- INICIO (.page-home) ---- */
  .page-home .m-hero { height: auto !important; min-height: 0 !important; }
  .page-home .m-herobody { min-height: 72vh; padding: 110px 22px 44px !important; }
  .page-home .m-herobody > div { max-width: 100% !important; }
  .page-home .m-hero h1 { font-size: clamp(32px,9vw,44px) !important; }
  .page-home .m-hslide { background-position: center !important; }
  .page-home .m-hslide-0 { background-image: url('../assets/mobile/hero1.webp') !important; }
  .page-home .m-hslide-1 { background-image: url('../assets/mobile/hero0.webp') !important; }
  .page-home .m-hslide-2 { background-image: url('../assets/mobile/hero2.webp') !important; }
  .page-home .m-heroarrow { display: none !important; }
  .page-home .m-btnrow { flex-direction: column !important; align-items: stretch !important; }
  .page-home .m-btnrow a { justify-content: center !important; width: 100% !important; }
  .page-home .m-btnrow-center a { text-align: center; }
  .page-home .m-btnrow div { justify-content: center; }
  .page-home .m-jorge { grid-template-columns: 1fr !important; padding: 0 22px !important; gap: 34px !important; }
  .page-home .m-jorge > div:first-child { max-width: 340px; margin: 0 auto; }
  .page-home .m-trust { grid-template-columns: 1fr !important; padding: 26px 22px !important; gap: 22px !important; }
  .page-home .m-trust > div { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.14); padding: 16px 0 !important; }
  .page-home .m-trust > div:last-child { border-bottom: none; }
  .page-home .m-props { grid-template-columns: 1fr !important; gap: 20px !important; }
  .page-home .m-gal { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .page-home .m-comp { grid-template-columns: 1fr !important; gap: 26px !important; }
  .page-home .m-comp2 { max-width: 420px; }
  .page-home .m-testi { grid-template-columns: 1fr !important; }
  .page-home .m-testi > img { min-height: 0 !important; height: 360px !important; }
  .page-home .m-contact { grid-template-columns: 1fr !important; padding: 0 22px !important; gap: 30px !important; }
  .page-home .m-contact > div:first-child { max-width: 320px; margin: 0 auto; }
  .page-home .m-footer { grid-template-columns: 1fr !important; gap: 32px !important; text-align: left; }
  .page-home section { padding-left: 0 !important; padding-right: 0 !important; }
  .page-home section > div { padding-left: 22px !important; padding-right: 22px !important; }

  /* ---- INTERIORES + VALORIZACIÓN (.page-inner) ---- */
  .page-inner .site-header .m-headwrap > a > img { height: 40px !important; }
  .page-inner section { padding-left: 0 !important; padding-right: 0 !important; }
  .page-inner section > div { padding-left: 22px !important; padding-right: 22px !important; }
  .page-inner section div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 22px !important; }
  .page-inner section div[style*="grid-template-columns"] > img { height: auto !important; min-height: 0 !important; aspect-ratio: 4/3 !important; object-fit: cover !important; }
  .page-inner section h1 { font-size: clamp(30px,8.5vw,44px) !important; }
  .page-inner footer > div > div[style*="grid-template-columns"] { gap: 30px !important; }
}