/* HogarNovo — catálogo, ficha de propiedad y perfil del vendedor.
   Se carga después de base.css y solo en esas páginas. */

/* ══ GUARDA CONTRA SCROLL HORIZONTAL ══
   Ningún elemento del sitio público puede empujar la página a lo ancho.
   En móvil un select o una tarjeta que se pase de largo saca la barra
   horizontal y la página se "corre" al arrastrar. */
html, body { max-width: 100%; overflow-x: hidden; }

/* ══ NAV SÓLIDO (páginas sin hero) ══
   El .nav de base.css es position:fixed, pensado para flotar sobre el hero
   del landing. Aquí no hay hero, así que:
     1. el contenido necesita un colchón del alto del nav, o el <h1> queda
        tapado por la barra;
     2. hay que anular el filtro que invierte el logo a blanco — se aplica
        a :not(.is-stuck) para las fotos oscuras del hero, y sobre fondo
        claro dejaba el logo lavado e ilegible.
   ══════════════════════════════════════ */
.nav.is-solid {
  background: var(--paper);
  border-bottom: 1px solid var(--sand-100);
  box-shadow: var(--shadow-sm);
}
.nav.is-solid::before { opacity: 0; }

/* El logo vuelve a su color real. 40px: el logotipo sin eslogan es más
   ancho que el bloque anterior, y a 46px dominaba la barra. */
.nav.is-solid .nav-logo img {
  filter: none;
  height: 40px;
}
.nav.is-solid .nav-links a { color: var(--navy); }
.nav.is-solid .nav-links a:hover { background: var(--sand-100); }
.nav.is-solid .nav-links .nav-cta { color: #fff; }
.nav.is-solid .nav-burger span { background: var(--navy); }

/* Colchón bajo el nav fijo. Sin esto el título de la página queda cortado. */
/* El .nav es position:fixed y flota sobre el contenido. Aquí se reserva
   su altura REAL, medida, no estimada: logo 42px + padding .85rem
   arriba y abajo (13.6px x2) = 69.2px. Con los 60px que había antes el
   título de la página quedaba cortado por debajo de la barra.
   Si cambia la altura del logo o el padding del nav, este valor
   cambia con ellos. */
.site-body { padding-top: 78px; }

@media (max-width: 760px) {
  /* En móvil el logo baja a 34px: 34 + 27.2 = 61.2 */
  .site-body { padding-top: 70px; }
  .nav.is-solid .nav-logo img { height: 34px; }
}

/* ═══════════════════════════════════════════
   CATÁLOGO
   Usa las piezas del landing: .section, .wrap, .section-head,
   .searchbar, .grid-props, .pcard, .pager. Aquí solo va lo que
   el landing no tenía: "Más filtros" y los chips de filtro activo.
   ═══════════════════════════════════════════ */

/* El buscador del landing monta sobre el hero con margen negativo.
   Aquí no hay hero, así que se anula. */
.searchbar { margin-top: 0 !important; }

/* Más filtros: plegado, no ocupa sitio hasta que se pide. */
.sf-mas { grid-column: 1 / -1; margin-top: .2rem; }
.sf-mas summary {
  cursor: pointer; list-style: none;
  font-size: var(--fs-0); font-weight: 600; color: var(--teal-600);
  padding: .5rem 0; display: inline-flex; align-items: center; gap: .35rem;
  min-height: 44px;
}
.sf-mas summary::-webkit-details-marker { display: none; }
.sf-mas summary::after { content: '+'; font-size: var(--fs-2); line-height: 1; }
.sf-mas[open] summary::after { content: '−'; }
.sf-mas summary:hover { color: var(--teal); }
.sf-mas-in {
  display: grid; gap: .7rem; padding-top: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
}

/* Chips del filtro activo: cada uno se quita a sí mismo. */
.cat-chips { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.6rem; }
.cat-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--fs-0); font-weight: 600; color: var(--navy);
  background: var(--sand-50); border: 1px solid var(--sand-200);
  border-radius: 999px; padding: .34rem .7rem; text-decoration: none;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.cat-chip:hover { background: #fff; border-color: var(--coral); color: var(--coral); text-decoration: none; }
.cat-chip svg { opacity: .55; }
.cat-clear { font-size: var(--fs-0); color: var(--ink-faint); margin-left: .3rem; }
.cat-clear:hover { color: var(--coral); }

/* Acciones del modal */
.modal-acts { display: flex; gap: .8rem; margin-top: .3rem; }
.modal-acts .btn { flex: 1; justify-content: center; }

/* Sin resultados */
.cat-empty { text-align: center; padding: 3.4rem 1rem; }
.cat-empty h1, .cat-empty h2, .cat-empty h3 { margin: 0 0 .5rem; }
.cat-empty p { color: var(--ink-soft); margin: 0 0 1.5rem; }
.cat-empty-ico {
  display: inline-grid; place-items: center;
  width: 68px; height: 68px; margin-bottom: 1.1rem;
  border-radius: 50%; background: var(--teal-100); color: var(--teal-600);
}

.pager-gap { color: var(--ink-faint); padding: 0 .3rem; align-self: center; }

/* Tarjeta sin foto */
.pcard-noimg {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--sand-200); background: var(--sand-50);
}
.pcard-title a { color: inherit; text-decoration: none; }
.pcard-title a:hover { color: var(--teal-600); }
.pcard-fav.is-on { color: var(--coral); background: #fff; }
.pcard-fav.is-on svg { fill: var(--coral); }

.ficha-main { min-width: 0; max-width: 100%; }

/* ═══════════════════════════════════════════
   FICHA DE PROPIEDAD
   ═══════════════════════════════════════════ */

.ficha-breadcrumb {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  padding-top: 1.3rem; padding-bottom: 1.1rem;
  font-size: var(--fs-0); color: var(--ink-faint);
}
.ficha-breadcrumb a { color: var(--ink-soft); }
.ficha-breadcrumb .is-current {
  color: var(--ink-faint);
  max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Galería ── */
.ficha-gal { padding-bottom: 1.8rem; }
.ficha-gal-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: .55rem;
  height: clamp(300px, 46vw, 480px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
/* La primera foto ocupa la columna alta: manda sobre el resto. */
.ficha-gal-grid > :first-child { grid-row: span 2; }
.ficha-gal-grid.is-solo { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.ficha-gal-grid.is-solo > :first-child { grid-row: span 1; }

/* La rejilla se adapta al número real de fotos. Con 3 fotos y 3 columnas
   quedaba un hueco vacío a la derecha: la retícula esperaba 5. */
.ficha-gal-grid.is-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.ficha-gal-grid.is-2 > :first-child { grid-row: span 1; }
.ficha-gal-grid.is-3 { grid-template-columns: 2fr 1fr; }
.ficha-gal-grid.is-4 { grid-template-columns: 2fr 1fr 1fr; }
.ficha-gal-grid.is-4 > :nth-child(2) { grid-column: span 2; }

.ficha-gal-item {
  padding: 0; border: 0; cursor: pointer; overflow: hidden;
  background: var(--sand-100); position: relative;
}
.ficha-gal-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s var(--ease-out), filter .3s var(--ease);
}
.ficha-gal-item:hover img { transform: scale(1.04); filter: brightness(.95); }
.ficha-gal-item:focus-visible { outline: 3px solid var(--teal); outline-offset: -3px; }

.ficha-gal-more {
  position: absolute; right: .9rem; bottom: .9rem;
  font: inherit; font-size: var(--fs-0); font-weight: 600;
  color: var(--navy); background: rgba(255,255,255,.94);
  border: 0; border-radius: 999px;
  padding: .55rem 1rem; min-height: 44px;
  cursor: pointer; box-shadow: var(--shadow);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ficha-gal-more:hover { background: #fff; }

.ficha-gal-empty {
  display: grid; place-items: center; gap: .6rem;
  height: clamp(200px, 30vw, 300px);
  background: var(--sand-50); border-radius: var(--radius-lg);
  color: var(--sand-200);
}
.ficha-gal-empty p { margin: 0; color: var(--ink-faint); font-size: var(--fs-1); }

/* ── Layout ── */
.ficha-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 358px;
  gap: 2.6rem;
  align-items: start;
  padding-bottom: 4rem;
}

.ficha-head { margin-bottom: 1.8rem; }
.pcard-tag.is-static {
  position: static; display: inline-block; margin-bottom: .8rem;
}
.ficha-head h1 { margin: 0 0 .5rem; }
.ficha-loc {
  display: flex; align-items: center; gap: .38rem;
  color: var(--ink-soft); font-size: var(--fs-2); margin: 0 0 .9rem;
}
.ficha-price {
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
  font-weight: 600; color: var(--navy);
  line-height: 1; margin: 0;
}
.ficha-price small { font-family: var(--font); font-size: var(--fs-1); font-weight: 500; color: var(--ink-faint); }

/* ── Especificaciones ── */
.ficha-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
  gap: .8rem;
  padding: 1.35rem;
  background: var(--sand-50);
  border-radius: var(--radius);
  margin-bottom: 2.2rem;
}
.ficha-spec { display: grid; justify-items: center; text-align: center; gap: .15rem; }
.ficha-spec svg { color: var(--teal-600); margin-bottom: .2rem; }
.ficha-spec b { font-size: var(--fs-2); font-weight: 700; color: var(--navy); }
.ficha-spec span { font-size: var(--fs-00); color: var(--ink-faint); }

.ficha-block { margin-bottom: 2.2rem; }
.ficha-block h2 { font-size: var(--fs-3); margin: 0 0 .8rem; }
.ficha-block h3 { font-size: var(--fs-2); font-family: var(--font); font-weight: 700; margin: 0 0 .3rem; }
.ficha-desc { color: var(--ink-soft); line-height: 1.75; max-width: 68ch; }
.ficha-nota { font-size: var(--fs-0); color: var(--ink-faint); margin: .6rem 0 0; }

.ficha-aviso {
  display: flex; gap: .9rem;
  padding: 1.15rem 1.25rem;
  background: var(--teal-100);
  border-radius: var(--radius);
  border: 1px solid rgba(0,156,144,.2);
}
.ficha-aviso > svg { color: var(--teal-600); flex-shrink: 0; margin-top: .15rem; }
.ficha-aviso p { margin: 0; font-size: var(--fs-1); color: #0A5E57; line-height: 1.6; }
.ficha-aviso h3 { color: #084F49; }
.ficha-aviso a { color: #084F49; text-decoration: underline; font-weight: 600; }

/* ── Columna de contacto ── */
.ficha-side { position: sticky; top: 88px; }
.ficha-card {
  background: #fff;
  border: 1px solid var(--sand-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem;
}

.ficha-seller {
  display: flex; align-items: center; gap: .8rem;
  padding-bottom: 1.15rem; margin-bottom: 1.15rem;
  border-bottom: 1px solid var(--sand-100);
  text-decoration: none;
}
.ficha-seller:hover { text-decoration: none; }
.ficha-seller:hover .ficha-seller-info b { color: var(--teal-600); }

.ficha-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  background: var(--sand-100);
}
.ficha-avatar-txt {
  display: grid; place-items: center;
  font-family: var(--font-head); font-size: var(--fs-4); font-weight: 600;
  color: #fff; background: var(--navy-600);
}
.ficha-seller-info { display: grid; gap: .08rem; min-width: 0; }
.ficha-seller-info b {
  font-size: var(--fs-2); color: var(--navy); font-weight: 600;
  display: flex; align-items: center; gap: .3rem;
  transition: color .2s var(--ease);
}
.ficha-seller-info small { font-size: var(--fs-0); color: var(--ink-faint); }
.ficha-verif { color: var(--teal); display: inline-flex; }

.ficha-actions { display: grid; gap: .55rem; }
.ficha-btn { width: 100%; justify-content: center; gap: .5rem; }

.ficha-contact-msg { margin: .4rem 0 0; font-size: var(--fs-0); color: var(--ink-faint); min-height: 1.2em; }
.ficha-contact-msg.is-ok  { color: var(--ok); font-weight: 600; }
.ficha-contact-msg.is-bad { color: var(--bad); font-weight: 600; }

.ficha-mini {
  display: flex; gap: .3rem; flex-wrap: wrap;
  margin-top: 1.15rem; padding-top: 1.15rem;
  border-top: 1px solid var(--sand-100);
}
.ficha-mini-btn {
  flex: 1; min-width: 92px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  font: inherit; font-size: var(--fs-0); font-weight: 600;
  color: var(--ink-soft); background: transparent;
  border: 1px solid var(--sand-200); border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.ficha-mini-btn:hover { border-color: var(--teal); color: var(--teal-600); text-decoration: none; }
.ficha-mini-btn.is-on { color: var(--coral); border-color: var(--coral); }
.ficha-mini-btn.is-on svg { fill: var(--coral); }
.ficha-mini-warn:hover { border-color: var(--coral); color: var(--coral); }

.ficha-views {
  display: flex; align-items: center; gap: .35rem;
  margin: 1rem 0 0; font-size: var(--fs-0); color: var(--ink-faint);
}

/* ═══════════════════════════════════════════
   LIGHTBOX
   ═══════════════════════════════════════════ */

.lbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,18,30,.94);
  padding: clamp(1rem, 4vw, 3rem);
}
.lbox-fig { margin: 0; max-width: 100%; max-height: 100%; display: grid; gap: .8rem; justify-items: center; }
.lbox-fig img {
  max-width: 100%; max-height: 78vh; object-fit: contain;
  border-radius: var(--radius-sm);
}
.lbox-fig figcaption { color: rgba(255,255,255,.72); font-size: var(--fs-0); }

.lbox-close, .lbox-nav {
  position: absolute; z-index: 2;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; cursor: pointer;
  color: #fff; background: rgba(255,255,255,.12);
  transition: background .2s var(--ease);
}
.lbox-close:hover, .lbox-nav:hover { background: rgba(255,255,255,.24); }
.lbox-close { top: 1.1rem; right: 1.1rem; }
.lbox-prev { left: clamp(.6rem, 2vw, 1.8rem); }
.lbox-next { right: clamp(.6rem, 2vw, 1.8rem); }

/* ═══════════════════════════════════════════
   MODAL (reportar)
   ═══════════════════════════════════════════ */

.modal {
  position: fixed; inset: 0; z-index: 210;
  display: grid; place-items: center;
  background: rgba(12,18,30,.6);
  padding: 1.2rem;
}
/* `display:grid` gana sobre el `hidden` del HTML y el modal salía abierto
   tapando la ficha entera al cargar. El atributo tiene que mandar. */
.modal[hidden], .lbox[hidden] { display: none !important; }
.modal-box {
  position: relative;
  width: min(440px, 100%);
  max-height: 88vh; overflow-y: auto;
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.7rem;
}
.modal-box h2 { font-size: var(--fs-3); margin: 0 0 .3rem; }
.modal-box form { display: grid; gap: .9rem; margin-top: 1.1rem; }
.modal-x {
  position: absolute; top: .8rem; right: .8rem;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; background: transparent; color: var(--ink-faint); cursor: pointer;
}
.modal-x:hover { background: var(--sand-100); color: var(--ink); }

/* ═══════════════════════════════════════════
   PERFIL DEL VENDEDOR
   ═══════════════════════════════════════════ */

.vend-head {
  background: var(--navy);
  color: #fff;
  padding: clamp(2.2rem, 5vw, 3.4rem) 0;
}
.vend-head-in { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }

.vend-avatar {
  width: 96px; height: 96px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
  border: 3px solid rgba(255,255,255,.16);
  background: var(--navy-600);
}
.vend-avatar-txt {
  display: grid; place-items: center;
  font-family: var(--font-head); font-size: 2.4rem; font-weight: 600; color: #fff;
}

.vend-info { min-width: 0; }
.vend-info h1 {
  color: #fff; margin: 0 0 .2rem;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.vend-verif { color: var(--teal); display: inline-flex; }
.vend-tipo { margin: 0 0 .9rem; color: rgba(255,255,255,.72); font-size: var(--fs-1); }

.vend-meta {
  list-style: none; margin: 0 0 .9rem; padding: 0;
  display: flex; gap: 1.4rem; flex-wrap: wrap;
  font-size: var(--fs-0); color: rgba(255,255,255,.8);
}
.vend-meta li { display: flex; align-items: center; gap: .4rem; }
.vend-meta svg { color: var(--teal); }

.vend-nota { margin: 0; font-size: var(--fs-0); color: rgba(255,255,255,.55); max-width: 52ch; }

/* ═══════════════════════════════════════════
   RESPONSIVE
   Móvil primero en comportamiento: el layout de 2-3 columnas se
   desmonta y los filtros pasan a desplegable.
   ═══════════════════════════════════════════ */

@media (max-width: 1080px) {
  .ficha-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .ficha-side { position: static; }
  .ficha-card { max-width: 520px; }
}


@media (max-width: 760px) {
  .ficha-gal-grid {
    grid-template-columns: 1fr; grid-template-rows: 1fr;
    height: clamp(230px, 56vw, 330px);
  }
  /* Solo la principal: 5 fotos apiladas en móvil es scroll muerto.
     El resto sigue accesible desde el lightbox. */
  .ficha-gal-grid > :not(:first-child):not(.ficha-gal-more) { display: none; }
  .ficha-gal-grid > :first-child { grid-row: span 1; }

  .ficha-specs { grid-template-columns: repeat(auto-fit, minmax(min(50%, 100px), 1fr)); padding: 1rem; }
  .ficha-card { max-width: none; padding: 1.2rem; }
  .vend-head-in { gap: 1.1rem; }
  .vend-avatar { width: 72px; height: 72px; }
  .vend-avatar-txt { font-size: 1.9rem; }
  /* .cat-sort es un <label>: inline y sin ancho propio, así que el
     width:100% del select se medía contra nada y desbordaba la pantalla.
     El label pasa a bloque y ambos quedan contenidos. */
}

@media (max-width: 480px) {
  .ficha-mini { flex-direction: column; }
  .ficha-mini-btn { width: 100%; }
  .lbox-close { top: .5rem; right: .5rem; }

  .ficha-specs { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ficha-gal-item img, .pcard, .pcard-media img { transition: none; }
  .ficha-gal-item:hover img { transform: none; }
}

/* ═══════════════════════════════════════════
   CALCULADORA
   Dos columnas: controles a la izquierda, resultado a la derecha
   sobre navy.
   ═══════════════════════════════════════════ */

/* Misma superficie que .ficha-card y .pcard: fondo blanco, borde de
   1px y sombra en capas. La calculadora usaba --shadow-sm y quedaba
   más plana que la ficha, como si fuera de otro sitio. */
.calc {
  background: #fff; border: 1px solid var(--sand-100);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; margin-bottom: 1.2rem;
}

.calc-tabs { display: flex; border-bottom: 1px solid var(--sand-100); overflow-x: auto; }
.calc-tab {
  font: inherit; font-size: var(--fs-1); font-weight: 600;
  color: var(--ink-soft); background: transparent; border: 0;
  border-bottom: 2.5px solid transparent;
  padding: .95rem 1.3rem; min-height: 52px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .45rem;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.calc-tab:hover { color: var(--navy); }
.calc-tab.is-on { color: var(--teal-600); border-bottom-color: var(--teal); }
.calc-tab svg { opacity: .75; }

.calc-panel[hidden] { display: none !important; }
.calc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.calc-in  { padding: 1.7rem; }
/* Antes esta mitad iba sobre --sand-50: partía la tarjeta en dos
   colores, algo que no hace ninguna otra pantalla. La separación la
   da la línea de 1px, igual que en la ficha de propiedad. */
.calc-out { padding: 1.7rem; border-left: 1px solid var(--sand-100); }
.calc-in h2 { font-size: var(--fs-2); font-family: var(--font); font-weight: 700; margin: 0 0 1.3rem; }

.calc-f { margin-bottom: 1.25rem; }
.calc-f label { display: block; font-size: var(--fs-0); font-weight: 600; color: var(--ink-soft); margin-bottom: .4rem; }
.calc-f-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .4rem; }
.calc-f-top label { margin: 0; }
.calc-f-top b { font-size: var(--fs-1); font-weight: 700; color: var(--teal-600); }

.calc-f input[type="number"], .calc-f select {
  width: 100%; font: inherit; font-size: var(--fs-2); color: var(--ink);
  padding: .7rem .85rem; border: 1.5px solid var(--sand-200);
  border-radius: var(--radius-sm); background: #fff;
}
.calc-f input[type="number"]:focus, .calc-f select:focus {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-100);
}

/* Deslizadores: pintados a mano porque el nativo no acepta color. */
.calc-f input[type="range"] {
  width: 100%; height: 6px; margin: .3rem 0;
  -webkit-appearance: none; appearance: none;
  background: var(--sand-200); border-radius: 999px; outline: none; cursor: pointer;
}
.calc-f input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--teal); border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(24,36,60,.28); cursor: pointer;
}
.calc-f input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--teal); border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(24,36,60,.28); cursor: pointer;
}
.calc-range-ends {
  display: flex; justify-content: space-between;
  font-size: var(--fs-00); color: var(--ink-faint); margin-top: .1rem;
}

/* Aviso, no bloque de color: una caja teal aquí era el único elemento
   así en todo el sitio. La marca de acento es una línea a la izquierda,
   el mismo recurso que ya usan los títulos de sección del dashboard. */
.calc-nota {
  font-size: var(--fs-0); color: var(--ink-soft); line-height: 1.55;
  border-left: 3px solid var(--teal);
  padding: .2rem 0 .2rem .9rem; margin: 1.3rem 0 0;
}
.calc-nota b { color: var(--navy); font-weight: 600; }

/* El resultado principal, sobre navy: es lo que se viene a ver. */
.calc-big {
  background: var(--navy); color: #fff;
  border-radius: var(--radius-sm); padding: 1.4rem 1.5rem;
  margin-bottom: 1.3rem;
}
.calc-big span { display: block; font-size: var(--fs-0); color: rgba(255,255,255,.62); margin-bottom: .3rem; }
.calc-big strong {
  display: block; font-family: var(--font-head);
  font-size: clamp(1.9rem, 3.6vw, 2.5rem); font-weight: 600; line-height: 1;
}
.calc-big small { display: block; font-size: var(--fs-0); color: rgba(255,255,255,.62); margin-top: .5rem; }

.calc-list { margin: 0; }
.calc-list > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .68rem 0; border-bottom: 1px solid var(--sand-200);
}
.calc-list > div:last-child { border-bottom: 0; }
.calc-list dt { font-size: var(--fs-0); color: var(--ink-soft); margin: 0; }
.calc-list dd { font-size: var(--fs-1); font-weight: 700; color: var(--navy); margin: 0; white-space: nowrap; }
.calc-list .is-total { border-top: 2px solid var(--sand-200); border-bottom: 0; margin-top: .3rem; padding-top: .8rem; }
.calc-list .is-total dt { font-weight: 700; color: var(--navy); }
.calc-list .is-total dd { font-size: var(--fs-2); }

.calc-barra-t { font-size: var(--fs-0); font-weight: 600; color: var(--ink-soft); margin: 1.3rem 0 .5rem; }
/* Sin radius 999px: la píldora está prohibida en este proyecto y aquí
   además falseaba la lectura, redondeando los extremos de una barra
   que representa una proporción exacta. */
.calc-barra { height: 10px; border-radius: 2px; overflow: hidden; background: var(--teal); display: flex; }
.calc-barra span { background: var(--navy); transition: width .3s var(--ease); }
.calc-leyenda { display: flex; gap: 1.2rem; margin-top: .55rem; font-size: var(--fs-0); color: var(--ink-soft); }
.calc-leyenda span { display: inline-flex; align-items: center; gap: .35rem; }
.calc-leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.calc-leyenda .cap { background: var(--navy); }
.calc-leyenda .int { background: var(--teal); }

.calc-legal { font-size: var(--fs-0); color: var(--ink-faint); max-width: 70ch; margin: 1.3rem 0 0; }

/* ── Calculadora dentro de la ficha ── */
.ficha-calc { margin-top: 1.15rem; padding-top: 1.15rem; border-top: 1px solid var(--sand-100); }
.ficha-calc summary {
  cursor: pointer; list-style: none; min-height: 44px;
  display: flex; align-items: center; gap: .45rem;
  font-size: var(--fs-0); font-weight: 600; color: var(--teal-600);
}
.ficha-calc summary::-webkit-details-marker { display: none; }
.ficha-calc summary::after { content: '+'; margin-left: auto; font-size: var(--fs-3); }
.ficha-calc[open] summary::after { content: '−'; }
.ficha-calc-in { padding-top: .9rem; }
.ficha-calc .calc-f { margin-bottom: .9rem; }
.ficha-calc .calc-big { padding: 1.1rem 1.2rem; margin-bottom: .9rem; }
.ficha-calc .calc-big strong { font-size: var(--fs-5); }
.ficha-calc-link { display: inline-block; margin-top: .7rem; font-size: var(--fs-0); }

@media (max-width: 860px) {
  .calc-cols { grid-template-columns: 1fr; }
  .calc-out { border-left: 0; border-top: 1px solid var(--sand-100); }
  .calc-in, .calc-out { padding: 1.3rem; }
}

/* Aviso junto al corazón cuando guardar no se puede completar */
.fav-toast {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 6;
  max-width: 200px;
  padding: .45rem .7rem;
  border-radius: var(--radius-sm);
  background: var(--navy);
  color: #fff;
  font-size: .78rem;
  line-height: 1.35;
  box-shadow: 0 6px 20px rgba(9,15,26,.28);
  animation: favToastIn .18s ease-out;
}
@keyframes favToastIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fav-toast { animation: none; } }

/* ═══════════════════════════════════════════
   BANNER DEL CATÁLOGO
   El buscador es una tarjeta blanca; sobre el lienzo arena solo lo
   separaba su sombra. El banner le da fondo y la hace destacar.
   ═══════════════════════════════════════════ */
.cx-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: -78px;            /* anula el colchón del nav fijo */
  padding: calc(78px + 2.2rem) 0 5.5rem;
  background: linear-gradient(180deg, #0F1929 0%, var(--navy) 55%, #1B2942 100%);
  color: #fff;
  text-align: center;
}
.cx-banner::before {
  content: '';
  position: absolute;
  top: -55%;
  left: 50%;
  width: 70%;
  height: 210%;
  z-index: -2;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side circle at 50% 50%, rgba(0, 176, 162, .32), transparent 100%),
    radial-gradient(closest-side circle at 68% 28%, rgba(26, 214, 196, .17), transparent 100%);
}
.cx-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}
.cx-banner-txt {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.12;
  margin: 0;
  color: #fff;
  text-wrap: balance;
}
.cx-banner-sub {
  margin: .45rem 0 0;
  font-size: var(--fs-1);
  color: rgba(255, 255, 255, .58);
}
/* El buscador monta sobre el banner: por eso el margen negativo */
.cx-banner-tras { position: relative; z-index: 2; margin-top: -4.2rem; }
/* Sobre el navy hace falta más sombra para que la tarjeta flote */
.cx-banner-tras .calc {
  box-shadow:
    0 1px 2px rgba(24, 36, 60, .05),
    0 10px 24px rgba(24, 36, 60, .12),
    0 34px 70px -18px rgba(24, 36, 60, .28);
}

/* El nav deja de ser sólido mientras esté sobre el banner */
body:has(.cx-banner) .nav:not(.is-stuck).is-solid {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
body:has(.cx-banner) .nav:not(.is-stuck).is-solid .nav-links a { color: #fff; }
body:has(.cx-banner) .nav:not(.is-stuck).is-solid .nav-links a:hover {
  background: rgba(255, 255, 255, .12);
}
body:has(.cx-banner) .nav:not(.is-stuck).is-solid .nav-burger span { background: #fff; }
body:has(.cx-banner) .nav:not(.is-stuck).is-solid .nav-logo img {
  filter: brightness(0) invert(1);
}

@media (max-width: 760px) {
  .cx-banner {
    margin-top: -70px;
    padding: calc(70px + 1.6rem) 0 4.6rem;
  }
  .cx-banner-tras { margin-top: -3.4rem; }
}

/* ═══════════════════════════════════════════
   CONTACTO
   ═══════════════════════════════════════════ */
.wrap-narrow { max-width: 640px; }

/* El hero sube hasta el borde superior y el nav fijo flota encima, así que
   aquí sobra el colchón de .site-body. Si el navegador no soporta :has(),
   el colchón se mantiene: la página se ve correcta, solo con más aire. */
body:has(.cx-hero) .site-body { padding-top: 0; }
body:has(.cx-hero) .nav:not(.is-stuck).is-solid {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
body:has(.cx-hero) .nav:not(.is-stuck).is-solid .nav-links a { color: #fff; }
body:has(.cx-hero) .nav:not(.is-stuck).is-solid .nav-links a:hover {
  background: rgba(255, 255, 255, .12);
}
body:has(.cx-hero) .nav:not(.is-stuck).is-solid .nav-burger span { background: #fff; }
body:has(.cx-hero) .nav:not(.is-stuck).is-solid .nav-logo img {
  filter: brightness(0) invert(1);
}

/* ── HERO ─────────────────────────────────────────────────
   Tres planos apilados: malla de planos (-2), luz ambiental y grano (-1),
   contenido (1). El formulario vive fuera del hero y monta sobre él con
   z-index 2, de modo que ninguna capa decorativa puede quedar por encima
   de un campo. */
.cx-hero {
  position: relative;
  isolation: isolate;
  /* El navy se aclara hacia el horizonte y se oscurece en el suelo: la
     escena tiene arriba y abajo, y la maqueta se apoya en algo. */
  background:
    linear-gradient(180deg,
      #0F1929 0%,
      var(--navy) 38%,
      #1B2942 62%,
      #131E31 100%);
  color: #fff;
  padding: calc(78px + clamp(2.5rem, 7vw, 5rem)) 0 clamp(7rem, 16vw, 11rem);
  overflow: hidden;
}

/* Malla arquitectónica: el mismo lenguaje de líneas del isotipo. Se
   desplaza muy lento en diagonal; a 60s el movimiento se percibe como
   respiración, no como animación. */
/* Resplandor de fondo. Solo radiales: un cónico desenfocado produce
   banding visible sobre el navy, que se lee como pixelado. */
.cx-hero::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -8%;
  width: 78%;
  height: 150%;
  z-index: -2;
  background:
    radial-gradient(closest-side circle at 50% 42%, rgba(0, 176, 162, .38), transparent 100%),
    radial-gradient(closest-side circle at 62% 24%, rgba(26, 214, 196, .22), transparent 100%);
  animation: cx-drift 18s ease-in-out infinite alternate;
}

/* Luz ambiental entrando por arriba-derecha + grano.
   El grano (feTurbulence al 4%) mata el banding del degradado y da
   textura analógica: sin él, el navy plano se ve digital y barato. */
.cx-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(74% 58% at 76% 6%, rgba(0, 156, 144, .3), transparent 62%),
    radial-gradient(52% 44% at 8% 96%, rgba(252, 60, 84, .13), transparent 68%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
}

@keyframes cx-drift {
  from { opacity: .72; transform: scale(1)    rotate(-1.5deg); }
  to   { opacity: 1;   transform: scale(1.07) rotate(1.5deg); }
}

.cx-hero .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.25fr);
  gap: clamp(1.6rem, 3.5vw, 2.6rem);
  align-items: center;
}

.cx-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -.022em;
  margin: 0 0 1rem;
  color: #fff;
  text-wrap: balance;
}
.cx-hero h1 em {
  font-style: italic;
  color: var(--teal);
}

.cx-hero-lead {
  font-size: var(--fs-3);
  line-height: 1.6;
  color: rgba(255, 255, 255, .8);
  max-width: 44ch;
  margin: 0 0 2.2rem;
}

/* Plazo de respuesta: el dato que más confianza da en una página de
   contacto. El punto late para señalar que el canal está vivo. */
/* Un plazo es un dato: va en la sans del sitio, alineado en una línea.
   En Fraunces competía con el titular y se leía como adorno. */
.cx-sla {
  margin: 0;
  font-size: var(--fs-1);
  color: rgba(255, 255, 255, .5);
}
.cx-sla b {
  font-weight: 500;
  color: rgba(255, 255, 255, .88);
}

/* ── CICLO DE TRES ESCENAS ───────────────────────────────
   Alzado, planta y aviso: los tres estados en que existe una propiedad
   dentro del producto. Mismo rango, mismo trazo, 15s de ciclo.
   El truco: cada escena tiene el ciclo completo y solo cambia su retardo,
   así el trazo de una entra mientras el de la anterior sale. */
.cx-plano { width: 100%; height: auto; overflow: visible; }

.cx-plano .ln {
  fill: none;
  stroke: rgba(255, 255, 255, .46);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cx-plano .thin { stroke: rgba(255, 255, 255, .22); stroke-width: 1.1; }
/* Trazo con barrido de luz: la banda del degradado recorre la línea y
   simula el reflejo de una luz pasando sobre ella. */
.cx-plano .flare {
  stroke: url(#cxFlare);
  stroke-width: 2.4;
  filter: drop-shadow(0 0 9px rgba(0, 210, 190, .75));
}

/* ── ANIMACIÓN SECUNDARIA ────────────────────────────────
   Sin un segundo movimiento toda animación se lee plana. Cada escena
   lleva un elemento propio que se mueve por su cuenta. */
.cx-plano .dot {
  fill: #2BE3CF;
  stroke: none;
  filter: drop-shadow(0 0 8px rgba(43, 227, 207, .9));
}
.js .cx-plano .pulso  { animation: cx-pulso 2.2s var(--ease) infinite; }
.js .cx-plano .alerta { animation: cx-alerta 1.9s var(--ease) infinite; }
.js .cx-plano .recorre { animation: cx-recorre 4.4s var(--ease-out) infinite; }

@keyframes cx-pulso {
  0%, 100% { transform: scale(1);   opacity: .95; }
  50%      { transform: scale(1.7); opacity: .45; }
}
@keyframes cx-alerta {
  0%, 100% { transform: scale(1)   translateY(0);    opacity: 1; }
  45%      { transform: scale(1.3) translateY(-4px); opacity: .7; }
}
@keyframes cx-recorre {
  0%, 100% { transform: translateX(0);    opacity: 0; }
  12%      { opacity: 1; }
  88%      { opacity: 1; }
  92%, 99% { transform: translateX(312px); opacity: 0; }
  50%      { transform: translateX(312px); opacity: 1; }
}

/* Ventana iluminada: la luz que se enciende dentro de la casa */
.cx-plano .luz {
  fill: rgba(43, 227, 207, .16);
  stroke: none;
}
.js .cx-plano .luz { animation: cx-luz 3.4s var(--ease) infinite; }
@keyframes cx-luz {
  0%, 100% { opacity: .15; }
  50%      { opacity: .75; }
}
.cx-plano .cota { stroke: rgba(255, 255, 255, .26); stroke-width: .9; }
.cx-plano .eje  {
  stroke: rgba(0, 156, 144, .42);
  stroke-width: .9;
  stroke-dasharray: 7 4 2 4;
}

.cx-plano .tx {
  fill: rgba(255, 255, 255, .34);
  font-family: var(--font);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .34em;
}

/* Sin JS todo queda visible y quieto: la pieza no depende de animarse. */
.cx-plano .sc { opacity: 1; }
.js .cx-plano .sc,
.js .cx-plano .tx { opacity: 0; }

/* El trazo entra dibujándose y sale desdibujándose por el otro extremo */
.js .cx-plano .sc .ln:not(.eje) {
  stroke-dasharray: var(--len, 700);
  stroke-dashoffset: var(--len, 700);
}
/* Ciclo de 9s, no 15: a 5s por escena la pieza se quedaba esperando y
   la espera se lee como una animación muerta. */
.js .cx-plano .sc,
.js .cx-plano .tx {
  animation: cx-escena 9s var(--ease-out) infinite;
  animation-delay: var(--sd, 0s);
}
/* Los trazos de una misma escena se solapan con un escalonado corto: si
   entran todos a la vez el dibujo se lee como un barrido accidental. */
.js .cx-plano .sc .ln:not(.eje) {
  animation: cx-trazo 9s var(--ease-out) infinite;
  animation-delay: calc(var(--sd, 0s) + var(--i, 0) * .09s);
}
.js .cx-plano .sc .ln:nth-child(2) { --i: 1; }
.js .cx-plano .sc .ln:nth-child(3) { --i: 2; }
.js .cx-plano .sc .ln:nth-child(4) { --i: 3; }
.js .cx-plano .sc .ln:nth-child(5) { --i: 4; }
.js .cx-plano .sc .ln:nth-child(6) { --i: 5; }
.js .cx-plano .sc .ln:nth-child(7) { --i: 6; }

.js .cx-plano .sc-casa,
.js .cx-plano .sc-casa .ln,
.js .cx-plano .tx-casa    { --sd: 0s; }
.js .cx-plano .sc-planta,
.js .cx-plano .sc-planta .ln,
.js .cx-plano .tx-planta  { --sd: 3s; }
.js .cx-plano .sc-sobre,
.js .cx-plano .sc-sobre .ln,
.js .cx-plano .tx-sobre   { --sd: 6s; }

/* La escena entra escalando un poco: el cambio se siente, no solo se ve */
@keyframes cx-escena {
  0%, 35%, 100% { opacity: 0; transform: scale(.97); }
  6%, 30%       { opacity: 1; transform: scale(1); }
}
@keyframes cx-trazo {
  0%   { stroke-dashoffset: var(--len, 700); }
  22%  { stroke-dashoffset: 0; }
  30%  { stroke-dashoffset: 0; }
  37%  { stroke-dashoffset: calc(var(--len, 700) * -1); }
  100% { stroke-dashoffset: calc(var(--len, 700) * -1); }
}

/* Confirmación: solo el aviso, dibujándose una vez y quedándose. */
.js .is-fijo .sc,
.js .is-fijo .tx { animation: none; opacity: 0; transform: none; }
.js .is-fijo .sc-sobre,
.js .is-fijo .tx-sobre { opacity: 1; }
.js .is-fijo .sc-sobre .ln:not(.eje) {
  animation: cx-visto 1.5s var(--ease-out) forwards;
  animation-delay: calc(.5s + var(--i, 0) * .14s);
}

/* Giro suave: la maqueta se mira desde distintos ángulos. La perspectiva
   va en el contenedor y el giro en el hijo; en el mismo elemento el
   navegador aplana la escena y el giro se ve plano. */
.cx-plano-wrap {
  position: relative;
  perspective: 1300px;
  perspective-origin: 55% 45%;
}
/* Sombra proyectada: sin ella la maqueta flota en el vacío y la escena
   se lee como un dibujo pegado encima, no como un objeto iluminado. */
.cx-plano-wrap::after {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 14%;
  height: 34px;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .55), transparent 72%);
  filter: blur(14px);
  animation: cx-sombra 30s ease-in-out infinite;
}
@keyframes cx-sombra {
  0%, 100% { transform: scaleX(1)    translateX(4%);  opacity: .75; }
  50%      { transform: scaleX(1.12) translateX(-4%); opacity: .55; }
}
.cx-plano {
  transform-style: preserve-3d;
  animation: cx-orbit 18s ease-in-out infinite;
  filter: drop-shadow(0 30px 54px rgba(0, 0, 0, .4));
}
@keyframes cx-orbit {
  0%, 100% { transform: rotateX(14deg) rotateY(-17deg) translateZ(0); }
  50%      { transform: rotateX(4deg)  rotateY(16deg)  translateZ(40px); }
}

/* ── LIENZO Y TARJETA DEL FORMULARIO ─────────────────────
   La tarjeta monta sobre el hero (margin-top negativo): así el formulario
   queda literalmente por encima de todo lo decorativo. */
.cx-canvas {
  background: var(--sand-50);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}
.cx-grid {
  position: relative;
  z-index: 2;
  margin-top: clamp(-9rem, -13vw, -5.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(1.2rem, 2.6vw, 2rem);
  align-items: start;
}

.cx-card {
  background: #fff;
  border: 1px solid var(--sand-100);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3.4vw, 2.6rem);
  /* Tres capas: contacto, elevación media y sombra de contexto. Una sola
     sombra no da sensación de peso. */
  box-shadow:
    0 1px 2px rgba(24, 36, 60, .05),
    0 10px 24px rgba(24, 36, 60, .09),
    0 34px 70px -18px rgba(24, 36, 60, .2);
}
.cx-card h2 {
  font-family: var(--font-head);
  font-size: var(--fs-4);
  letter-spacing: -.015em;
  margin: 0 0 .35rem;
  color: var(--navy);
}
.cx-card-sub {
  color: var(--ink-soft);
  font-size: var(--fs-1);
  margin: 0 0 1.5rem;
}

/* ── SELECTOR DE ASUNTO ──────────────────────────────────
   Era un <select>. Es el campo que decide a dónde va el mensaje, así que
   se ve entero de un vistazo. El radio real sigue ahí para el teclado y
   para que el POST no cambie. */
.cx-asuntos {
  display: grid;
  /* 3+3 fijo: con auto-fit la sexta opción quedaba sola en su fila */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
}
.cx-asuntos legend {
  padding: 0;
  margin-bottom: .7rem;
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--navy);
}
.cx-op { position: relative; display: block; }
.cx-op input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.cx-op span {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 52px;
  padding: .6rem .85rem;
  border: 1px solid var(--sand-200);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-1);
  line-height: 1.3;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease),
              box-shadow .2s var(--ease), transform .2s var(--ease);
}
.cx-op span svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--ink-faint);
  transition: color .2s var(--ease);
}
.cx-op:hover span { border-color: var(--teal); transform: translateY(-1px); }
.cx-op input:checked + span {
  border-color: var(--teal);
  background: var(--teal-100);
  color: var(--navy);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--teal), 0 6px 18px -6px rgba(0, 156, 144, .5);
}
.cx-op input:checked + span svg { color: var(--teal-600); }
.cx-op input:focus-visible + span {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
/* La denuncia de estafa es lo único urgente: se marca en coral */
.cx-op input[value="estafa"]:checked + span {
  border-color: var(--coral);
  background: #FFF1F3;
  box-shadow: 0 0 0 1px var(--coral), 0 6px 18px -6px rgba(252, 60, 84, .45);
}
.cx-op input[value="estafa"]:checked + span svg { color: var(--coral-600); }

/* ── CAMPOS ──────────────────────────────────────────────
   Etiqueta flotante: el campo nace con el rótulo dentro y sube al
   escribir. El :placeholder-shown es lo que detecta "vacío" sin JS. */
.cx-field { position: relative; margin-bottom: 1.15rem; }
.cx-field input,
.cx-field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--fs-2);
  padding: 1.5rem .95rem .6rem;
  border: 1px solid var(--sand-200);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  /* Hundido: da la sensación de superficie tallada, no de caja pegada */
  box-shadow: inset 0 1px 2px rgba(24, 36, 60, .05);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease),
              background .2s var(--ease);
}
.cx-field textarea { min-height: 148px; resize: vertical; line-height: 1.6; }
.cx-field label {
  position: absolute;
  left: .98rem;
  top: .95rem;
  font-size: var(--fs-1);
  color: var(--ink-faint);
  pointer-events: none;
  transform-origin: left top;
  transition: transform .18s var(--ease), color .18s var(--ease);
}
.cx-field input::placeholder,
.cx-field textarea::placeholder { color: transparent; }
.cx-field input:not(:placeholder-shown) + label,
.cx-field textarea:not(:placeholder-shown) + label,
.cx-field input:focus + label,
.cx-field textarea:focus + label {
  transform: translateY(-.62rem) scale(.82);
  color: var(--teal-600);
}
.cx-field input:focus-visible,
.cx-field textarea:focus-visible {
  outline: none;
  background: #fff;
  border-color: var(--teal);
  /* Glow interior + anillo: el campo activo se ilumina */
  box-shadow:
    inset 0 1px 2px rgba(24, 36, 60, .04),
    0 0 0 3px var(--teal-100),
    0 4px 16px -4px rgba(0, 156, 144, .3);
}
.cx-hint {
  display: block;
  margin-top: .4rem;
  font-size: var(--fs-0);
  color: var(--ink-faint);
}

.cx-send {
  width: 100%;
  justify-content: center;
  margin-top: .5rem;
  min-height: 52px;
  font-size: var(--fs-2);
}
.cx-legal {
  margin: 1.1rem 0 0;
  font-size: var(--fs-0);
  color: var(--ink-faint);
  text-align: center;
  line-height: 1.6;
}

/* ── COLUMNA LATERAL ─────────────────────────────────────
   Pegajosa en escritorio: acompaña mientras se rellena el formulario. */
.cx-side { display: grid; gap: 1rem; position: sticky; top: 94px; }
.cx-panel {
  background: #fff;
  border: 1px solid var(--sand-100);
  border-radius: var(--radius);
  padding: 1.3rem 1.35rem;
  box-shadow: var(--shadow-sm);
}
.cx-panel h3 {
  font-size: var(--fs-1);
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 .85rem;
  letter-spacing: -.005em;
}
.cx-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.cx-steps li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: .7rem;
  align-items: start;
  font-size: var(--fs-1);
  line-height: 1.5;
  color: var(--ink-soft);
}
.cx-steps b { display: block; color: var(--navy); font-weight: 600; }
.cx-num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--teal-100);
  color: var(--teal-600);
  font-size: var(--fs-00);
  font-weight: 700;
}

/* Atajo: reportar desde el propio anuncio es más rápido que este formulario */
.cx-atajo {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-800) 100%);
  border: 0;
  color: rgba(255, 255, 255, .78);
  font-size: var(--fs-1);
  line-height: 1.6;
}
.cx-atajo h3 { color: #fff; }
.cx-atajo b { color: var(--teal); font-weight: 600; }

.cx-alert {
  margin: 0 0 1.3rem;
  padding: .85rem 1.05rem;
  border-left: 3px solid var(--bad);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: #FEF2F4;
  color: #8E1128;
  font-size: var(--fs-1);
}

/* ── ENTRADA ESCALONADA ──────────────────────────────────
   Blur-to-sharp, no fade-up. El desenfoque que se enfoca se lee como
   profundidad; el desplazamiento vertical, como plantilla. */
.js .cx-in {
  opacity: 0;
  filter: blur(14px);
  transform: translate3d(0, 16px, 0);
  animation: cx-enter .85s var(--ease-out) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes cx-enter {
  to { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0); }
}

/* ── MENSAJE RECIBIDO ────────────────────────────────────
   Misma arquitectura que el formulario: hereda hero, plano y tarjeta.
   Nunca una página de texto centrado. */
.cx-ok { text-align: left; }
/* Sin columna lateral la tarjeta manda sola: se centra y se acota al
   ancho de lectura en vez de estirarse por toda la rejilla. */
.cx-grid:has(.cx-ok) {
  grid-template-columns: minmax(0, 660px);
  justify-content: center;
}
.cx-ok-mark {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-bottom: 1.2rem;
  border-radius: 50%;
  background: var(--teal-100);
  box-shadow: 0 0 0 8px rgba(0, 156, 144, .08);
}
.cx-ok-mark svg { width: 30px; height: 30px; color: var(--teal-600); }
.js .cx-ok-mark svg path {
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: cx-visto .7s var(--ease-out) .35s forwards;
}
@keyframes cx-visto { to { stroke-dashoffset: 0; } }
/* El halo se expande una vez al confirmar: acompaña al trazo del visto */
.js .cx-ok-mark { animation: cx-halo 1.1s var(--ease-out) .3s both; }
@keyframes cx-halo {
  0%   { box-shadow: 0 0 0 0 rgba(0, 156, 144, .35); transform: scale(.88); }
  60%  { transform: scale(1.04); }
  100% { box-shadow: 0 0 0 8px rgba(0, 156, 144, .08); transform: scale(1); }
}
.cx-ok h1 {
  font-family: var(--font-head);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  letter-spacing: -.02em;
  color: var(--navy);
  margin: 0 0 .7rem;
}
.cx-ok p { color: var(--ink-soft); max-width: 54ch; line-height: 1.7; margin: 0 0 1rem; }

/* Referencia del caso: convierte "enviado" en algo que se puede reclamar */
.cx-ref {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  margin: .3rem 0 1.6rem;
  padding: .7rem 1.1rem;
  border: 1px dashed var(--sand-200);
  border-radius: var(--radius-sm);
  background: var(--sand-50);
}
.cx-ref span { font-size: var(--fs-0); color: var(--ink-faint); }
.cx-ref b {
  font-size: var(--fs-2);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .06em;
}
.cx-ok-acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.7rem; }

/* ── RESPONSIVE ──────────────────────────────────────────
   A 900px cae a una columna. La planta se mantiene: es la pieza que da
   carácter, y a 300px de alto sigue leyéndose. */
@media (max-width: 980px) {
  .cx-grid { grid-template-columns: minmax(0, 1fr); margin-top: clamp(-6rem, -9vw, -4rem); }
  .cx-side { position: static; }
}
@media (max-width: 760px) {
  .cx-hero {
    padding: calc(70px + 2.2rem) 0 clamp(5.5rem, 15vw, 7rem);
    text-align: left;
  }
  .cx-hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .cx-plano-wrap { max-width: 360px; margin-inline: auto; }
  .cx-asuntos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 340px) {
  .cx-asuntos { grid-template-columns: minmax(0, 1fr); }
}

/* Movimiento reducido: se apaga todo lo que se mueve solo. La página
   queda estática pero completa — ningún elemento depende de animarse
   para ser visible. */
@media (prefers-reduced-motion: reduce) {
  .cx-hero::before,
  .cx-plano-wrap::after { animation: none; }
  /* Se detiene en la planta, que es la más legible de las tres */
  .cx-plano { animation: none; transform: rotateX(8deg) rotateY(-8deg); }
  .js .cx-plano .sc,
  .js .cx-plano .tx { animation: none; opacity: 0; }
  .js .cx-plano .sc-planta,
  .js .cx-plano .tx-planta { opacity: 1; }
  .js .cx-plano .sc .ln:not(.eje) { animation: none; stroke-dashoffset: 0; }
  .js .cx-plano .pulso,
  .js .cx-plano .alerta,
  .js .cx-plano .recorre,
  .js .cx-plano .luz { animation: none; }
  .js .cx-plano .sc,
  .js .cx-plano .tx { transform: none; }
  .js .cx-in,
  .js .cx-ok-mark,
  .js .cx-ok-mark svg path {
    animation: none;
    opacity: 1;
    filter: none;
    transform: none;
    stroke-dashoffset: 0;
  }
}

/* Reportar anunciante: presente pero discreto — no compite con el contenido */
.vend-report {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: 1rem;
  font-size: .84rem;
  color: var(--ink-faint);
  text-decoration: none;
  min-height: 44px;
}
.vend-report:hover { color: var(--coral); text-decoration: none; }
.vend-report svg { opacity: .7; }