/* Componentes compartidos de CyR Ingeniería y Geomensura.
   Todo se apoya en los tokens de marca/tema.css: aquí no se escribe un color
   a mano. Los íconos son máscaras CSS sobre currentColor, así que heredan el
   color del texto y funcionan igual en tema oscuro y claro. */

/* ---------- 1 · Utilidades ---------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.salto{position:absolute;left:-9999px;top:0;z-index:var(--z-modal);background:var(--acento-fondo);color:var(--sobre-acento);padding:12px 18px;border-radius:var(--radio);font:600 var(--fs-3)/1.2 var(--sans);text-decoration:none}
.salto:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
.wrap,.caja{max-width:var(--ancho);margin-inline:auto;padding-inline:var(--margen)}
.nombre-marca{text-transform:none;letter-spacing:inherit}
@media(max-width:640px){:root{--margen:16px}}

/* ---------- 2 · Revelado sin JS ---------- */
/* La clase .js la pone tema.js; sin JS nada queda oculto. */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .75s var(--curva),transform .75s var(--curva)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- 3 · Titulares ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.04;letter-spacing:-.005em}
h1,h2{text-transform:uppercase}
h3,h4{text-transform:none;letter-spacing:0;font-weight:700}

/* ---------- 4 · Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:12px 24px;border:1px solid transparent;border-radius:var(--radio);font:600 var(--fs-3)/1.2 var(--sans);letter-spacing:0;text-transform:none;text-decoration:none;text-align:center;cursor:pointer;transition:background var(--dur),border-color var(--dur),color var(--dur)}
.btn-primary{background:var(--acento-fondo);color:var(--sobre-acento)}
.btn-primary:hover{background:var(--acento-fondo-hover)}
.btn-ghost{background:transparent;color:var(--texto);border-color:var(--linea-2)}
.btn-ghost:hover{border-color:var(--texto)}
.btn-sm{padding:9px 16px;font-size:var(--fs-2)}
.btn-bloque{width:100%}
.btn[disabled]{opacity:.55;cursor:progress}
@media(max-width:480px){.btn{white-space:normal}}

/* ---------- 5 · Rótulo (motivo "rótulo de plano") ---------- */
.eyebrow{display:inline-flex;align-items:center;font:500 var(--fs-1)/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acento-suave);border:1px solid var(--linea);border-left:3px solid var(--acento-suave);padding:6px 12px 5px 11px;background:var(--panel)}

/* ---------- 6 · Campos de formulario ---------- */
.campo{display:flex;flex-direction:column;gap:6px}
.campo > label{font:500 var(--fs-1)/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tenue)}
.campo :is(input,select,textarea){height:44px;padding:0 12px;background:var(--panel-2);border:1px solid var(--linea-campo);border-radius:3px;color:var(--texto);font:400 15px/1.3 var(--sans)}
.campo textarea{height:auto;min-height:96px;padding:10px 12px}
.campo :is(input,select,textarea):focus{border-color:var(--acento);box-shadow:0 0 0 1px var(--acento);outline:none}
.campo__ayuda{font-size:var(--fs-2);color:var(--tenue)}
.aviso-error,.aviso-ok{padding:10px 14px;border:1px solid var(--rojo);border-radius:3px;background:color-mix(in srgb,var(--rojo) 10%,transparent);color:var(--texto);font-size:var(--fs-3)}
.aviso-ok{border-color:var(--verde);background:color-mix(in srgb,var(--verde) 10%,transparent)}

/* ---------- 7 · Chips sobre imagen o escena 3D ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--escena-velo);border:1px solid var(--escena-linea);color:var(--escena-texto);font:500 var(--fs-1)/1.2 var(--mono);letter-spacing:.06em;padding:5px 10px;border-radius:3px;backdrop-filter:blur(4px)}
.chip--3d{border-color:var(--acento-vivo)}

/* ---------- 8 · Estado de lote o propiedad ---------- */
.estado-lote{display:inline-flex;align-items:center;gap:7px;font:500 var(--fs-1)/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--texto)}
.estado-lote::before{content:'';width:9px;height:9px;flex:none;border-radius:50%;background:var(--estado-neutro)}
.estado-lote--disponible::before{background:var(--estado-disponible)}
.estado-lote--reservado::before{background:var(--estado-reservado)}
.estado-lote--vendido::before{background:var(--estado-vendido)}
.estado-lote--neutro::before{background:var(--estado-neutro)}

/* ---------- 9 · Estados de carga ---------- */
.panel-estado{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:64px 24px;color:var(--tenue)}
.panel-estado b{font-family:var(--display);font-weight:700;color:var(--texto)}
.giro{width:30px;height:30px;flex:none;border:2px solid var(--linea-2);border-top-color:var(--acento);border-radius:50%;animation:giro .8s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
.esqueleto{background:linear-gradient(90deg,var(--panel),var(--panel-2),var(--panel));background-size:200% 100%;animation:esqueleto 1.4s ease-in-out infinite;border-radius:3px;color:transparent}
@keyframes esqueleto{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){
  .giro{animation:none}
  .esqueleto{animation:none}
}

/* ---------- 10 · Cabecera y pie (§2.5) ---------- */
.sitio-cab{position:sticky;top:0;z-index:var(--z-nav);background:color-mix(in srgb,var(--fondo) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.sitio-cab__fila{display:flex;align-items:center;gap:var(--e-4);min-height:64px}
.sitio-cab__nav{display:none;gap:var(--e-4)}
@media(min-width:1080px){.sitio-cab__nav{display:flex}}
.sitio-cab__nav a{font:500 var(--fs-1)/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);text-decoration:none;padding:8px 2px;border-bottom:2px solid transparent}
.sitio-cab__nav a:hover{color:var(--texto)}
.sitio-cab__nav a[aria-current]{color:var(--texto);border-bottom-color:var(--acento)}
.sitio-cab__acciones{margin-left:auto;display:flex;align-items:center;gap:var(--e-3)}
.sitio-pie{background:var(--fondo-2);border-top:1px solid var(--linea);padding:48px 0 96px;color:var(--tenue)}
.sitio-pie__fila{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between}
.sitio-pie strong{display:block;font-family:var(--display);font-weight:800;color:var(--texto)}
.sitio-pie a{color:var(--texto);text-decoration:none;border-bottom:1px solid var(--linea-2)}
.sitio-pie nav{display:flex;flex-direction:column;gap:8px}
.sitio-pie small{flex:1 0 100%;font:400 var(--fs-1)/1.5 var(--mono);color:var(--tenue)}

/* ---------- 11 · FAQ ---------- */
.faq{border:1px solid var(--linea)}
.faq details{border-bottom:1px solid var(--linea);background:var(--fondo)}
.faq details:last-child{border-bottom:none}
.faq summary{padding:20px 24px;cursor:pointer;font-family:var(--display);font-weight:700;font-size:1.03rem;letter-spacing:-.012em;list-style:none;display:flex;justify-content:space-between;gap:18px;align-items:center;transition:.2s;color:var(--texto)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:1.5rem;font-weight:400;color:var(--acento);line-height:1;flex:none}
.faq details[open] summary{color:var(--acento);background:var(--fondo-2)}
.faq details[open] summary::after{content:'−'}
.faq summary:hover{color:var(--acento)}
.faq .ans{padding:2px 24px 22px;font-size:.93rem;color:var(--tenue);font-weight:400;line-height:1.75}

/* ---------- 12 · Pasos (línea de tiempo) ---------- */
.pasos{display:grid;gap:0;background:transparent;border:0;margin-top:52px;position:relative}
.paso{background:transparent;padding:0;position:relative;padding-left:56px;padding-bottom:34px}
.paso:last-child{padding-bottom:0}
.paso::after{content:'';position:absolute;left:19px;top:42px;bottom:0;width:1px;background:var(--linea)}
.paso:last-child::after{display:none}
.paso__n{position:absolute;left:0;top:0;width:40px;height:40px;display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:500;line-height:1;color:var(--acento);border:1px solid var(--acento);border-radius:50%;background:var(--fondo-2)}
@media(min-width:840px){
  .pasos{grid-template-columns:repeat(4,1fr);gap:26px}
  .paso{padding-left:0;padding-top:60px;padding-bottom:0}
  .paso::after{left:40px;right:-26px;top:19px;bottom:auto;width:auto;height:1px}
  .paso__n{left:0;top:0}
}
.paso h3{font-size:1.04rem;color:var(--texto);margin-bottom:8px}
.paso p{font-size:.9rem;color:var(--tenue);font-weight:400}

/* ---------- 13 · Diálogo ---------- */
.velo{position:fixed;inset:0;z-index:var(--z-modal);background:var(--velo);backdrop-filter:blur(6px);display:none}
.velo.on{display:flex;align-items:center;justify-content:center;padding:20px}
.dialogo{position:relative;width:100%;max-width:420px;background:var(--panel);border:1px solid var(--linea);border-radius:3px;box-shadow:var(--sombra-alta);padding:28px;max-height:calc(100svh - 40px);overflow:auto}
.dialogo__cerrar{position:absolute;top:10px;right:10px;width:44px;height:44px;display:grid;place-items:center;background:transparent;border:0;color:var(--tenue);cursor:pointer}
.dialogo__cerrar:hover{color:var(--texto)}

/* ---------- 14 · Íconos ----------
   Máscara sobre currentColor: el ícono toma el color del texto que lo rodea.
   Uso: <i class="g g-vert" aria-hidden="true"></i> */
.g{display:inline-block;width:1.1em;height:1.1em;vertical-align:-.18em;margin-right:.4em;flex:none;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.g-buscar{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E")}
.g-tour{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 20 7.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='M4 7.5 12 12l8-4.5M12 12v9'/%3E%3C/svg%3E")}
.g-pano{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cellipse cx='12' cy='12' rx='9' ry='3.5'/%3E%3C/svg%3E")}
.g-video{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='13' height='12' rx='1.5'/%3E%3Cpath d='m16 10 5-3v10l-5-3z'/%3E%3C/svg%3E")}
.g-plano{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h12l4 4v12H4z'/%3E%3Cpath d='M16 4v4h4M8 12h8M8 16h5'/%3E%3C/svg%3E")}
.g-vert{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v6M12 16v6M2 12h6M16 12h6'/%3E%3C/svg%3E")}
.g-dist{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 16.5 18.5 7.5'/%3E%3Ccircle cx='4' cy='17.5' r='2'/%3E%3Ccircle cx='20' cy='6.5' r='2'/%3E%3C/svg%3E")}
.g-area{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6 18 4l2 13-13 3z'/%3E%3C/svg%3E")}
.g-malla{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18 9 8l5 6 7-9M3 18h18M9 8v10M14 14v4'/%3E%3C/svg%3E")}
.g-casa{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11 12 4l8 7v9H4z'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E")}
.g-fotos{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1.5'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='m3 17 6-4 4 3 4-4 4 3'/%3E%3C/svg%3E")}
.g-aviso{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 22 20H2z'/%3E%3Cpath d='M12 10v4M12 17v.5'/%3E%3C/svg%3E")}
.g-menu{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E")}
.g-cerrar{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E")}
.g-izq{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E")}
.g-der{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")}
.g-volver{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E")}
.g-ubicacion{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E")}
.g-check{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17l9-10'/%3E%3C/svg%3E")}