/* NU EDITA ACEST FISIER. Generat automat din brand-master/brand.css.
   Modifica master-ul si ruleaza sync-brand.sh. */

/* =====================================================================
   BRAND.CSS — Cilioaica Realty
   Identidad visual y componentes compartidos entre site-public y
   portal-interno. Es la ÚNICA fuente de estos valores — cárgalo SIEMPRE
   antes de style.css.

   --silver-dark: unificado el 2026-09-23 en #8E8E8E (antes #8E8E8E en
   site-public y #9A9A9A en portal-interno — deriva histórica, no
   intencional). Se eligió el tono más oscuro porque en portal-interno
   este color también marca el borde de foco de inputs sobre fondo claro,
   donde más contraste es más visible; en site-public solo se usa dentro
   de silver-gradient (efecto decorativo), menos sensible a la diferencia.

   Para clonar esta marca a un negocio nuevo (ver skill clonare-brand):
   este archivo + brand.json son lo único que hace falta tocar para la
   identidad visual — el resto de cada style.css es estructura de la app.
   ===================================================================== */

:root {
  --silver-dark: #8E8E8E;
  --silver-mid: #C7C7C7;
  --silver-light: #F2F2F2;

  --platinum-gradient: linear-gradient(145deg, #5A5A5A 0%, #7D7D7D 15%, #A0A0A0 30%, #C4C4C4 45%, #DCDCDC 55%, #C4C4C4 65%, #A0A0A0 80%, #7D7D7D 100%);
  --platinum-dark-gradient: linear-gradient(135deg, #1E1E1E 0%, #2A2A2A 25%, #4A4A4A 50%, #6B6B6B 65%, #3A3A3A 85%, #1E1E1E 100%);
  --silver-gradient: linear-gradient(135deg, var(--silver-dark) 0%, var(--silver-mid) 20%, var(--silver-light) 40%, #FFFFFF 50%, var(--silver-light) 60%, var(--silver-mid) 80%, var(--silver-dark) 100%);
  --chrome-gradient: linear-gradient(135deg, #4A4A4A 0%, #FFFFFF 8%, #6B6B6B 16%, #E8E8E8 24%, #3A3A3A 32%, #FFFFFF 42%, #5A5A5A 52%, #F5F5F5 62%, #2A2A2A 72%, #E0E0E0 82%, #6B6B6B 92%, #FFFFFF 100%);

  --radius: 12px;
  --radius-sm: 6px;

  /* Fuentes — servidas localmente desde fonts/fonts.css (ver ese archivo,
     que queda fuera de brand.css a propósito: sus @font-face usan rutas
     relativas a los .woff2 dentro de fonts/ de cada app; moverlas aquí
     rompería esas rutas). Estas variables son documentación/portabilidad:
     el CSS de cada app todavía escribe 'Marcellus'/'Jost'/'IBM Plex Mono'
     literal en cada regla en vez de usar estas variables — pendiente de
     refactor futuro. */
  --brand-font-heading: 'Marcellus', serif;
  --brand-font-body: 'Jost', sans-serif;
  --brand-font-mono: 'IBM Plex Mono', monospace;
}

/* ===== BADGES (estado de propiedad — colores funcionales, no de marca) =====
   Movido aquí el 2026-09-25: estaba duplicado idéntico en los dos style.css.
   Estados diferenciados solo por tono gris/plata, sin color — mismo criterio
   en ambas apps. Más oscuro = más relevante para quien navega propiedades. */
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.15); }
.badge-disponible { color: #1A1A1A; border-color: rgba(26,26,26,0.35); }
.badge-exclusividad { color: #3A3A3A; border-color: rgba(58,58,58,0.3); }
.badge-reservado { color: #4A4A4A; border-color: rgba(74,74,74,0.3); }
.badge-alquilado { color: #5A5A5A; border-color: rgba(90,90,90,0.3); }
.badge-ocupado { color: #6A6A6A; border-color: rgba(106,106,106,0.3); }

/* ===== FOOTER — Cilioaica Realty =====
   Movido aquí el 2026-09-25 para que portal-interno use la MISMA estructura
   visual que site-public (antes tenía una barra mínima propia). El elemento
   <footer> sigue llevando también la clase local `portal-footer` en el
   portal (solo `margin-top:auto`, para pegarlo abajo en pantallas con poco
   contenido) — eso queda en el style.css de cada app, no aquí.
   Requiere en el HTML, justo antes del footer, el <svg> oculto con el
   <linearGradient id="silverGradient"> (ver cr-social a svg path). */
.cr-footer {
  background: var(--platinum-dark-gradient);
  color: #f2eaea;
  padding: 72px 48px 32px;
  margin-top: 80px;
  font-family: 'Jost', sans-serif;
}
.cr-footer-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: none;
  position: relative;
}
.cr-footer-top::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--silver-gradient);
  opacity: 0.35;
}
.cr-footer-brand {
  font-family: 'Marcellus', serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 1.5px;
  margin: 0;
  background: var(--silver-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-text-stroke: 0.6px rgba(0,0,0,0.5);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.7));
}
.cr-footer-col p {
  margin: 4px 0;
  font-size: 14px;
  color: #C7C7C7;
  line-height: 1.6;
}
.cr-footer-col h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #D4D4D4;
  margin-bottom: 12px;
}
.cr-social {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}
.cr-social a svg {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.cr-social a svg path {
  fill: url(#silverGradient);
}
.cr-footer-bottom {
  text-align: center;
  font-size: 12px;
  color: #888;
  padding-top: 20px;
}
.cr-footer-legal { margin-top: 10px; font-size: 12px; }
.cr-footer-legal a { color: #888; text-decoration: none; }
.cr-footer-legal a:hover { color: #fff; }
.cr-footer-legal span { color: #666; margin: 0 6px; }
@media (max-width: 768px) {
  .cr-footer-top { flex-direction: column; }
}

/* Teléfono del footer — link WhatsApp con shimmer sobre --silver-gradient. */
.cr-phone-row { display: flex; align-items: center; }
.cr-phone-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.cr-phone-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: var(--silver-mid);
}
.cr-phone-link span {
  font-weight: 500;
  background: linear-gradient(120deg, var(--silver-dark) 0%, var(--silver-mid) 20%, var(--silver-light) 40%, #ffffff 50%, var(--silver-light) 60%, var(--silver-mid) 80%, var(--silver-dark) 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer 3.5s linear infinite;
}
@keyframes shimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ===================== PROPIEDADES — LISTADO ZIG-ZAG =====================
   Movido aquí el 2026-09-25 — portal-interno usa ahora el mismo listado
   visual que site-public (antes tenía una grilla de tarjetas propia).
   Mismo lenguaje visual que .svc-zigzag (Servicios): sin tarjeta/marco, la
   foto flota con sombra propia y el texto vive directo sobre el fondo de la
   página. Cada fila es un enlace completo a la ficha — el hover (foto que se
   eleva + zoom lento + flecha que se desliza) es la única señal de "esto es
   clicable", igual que se pidió para Servicios.
   Requiere un contenedor con el mismo ancho en ambas apps: en portal-interno
   eso es `.dashboard--props` (ver style.css de portal-interno), no
   `.dashboard` a secas — ese sigue sirviendo a las otras 5 vistas del portal
   sin cambiar su ancho. */
.props-zigzag {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 96px;
  padding: 4px 0 24px;
}

.props-zigzag__row {
  display: flex;
  align-items: center;
  gap: 56px;
  cursor: pointer;
}
.props-zigzag__row:nth-child(even) { flex-direction: row-reverse; }

.props-zigzag__media {
  position: relative;
  flex: 0 0 44%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--platinum-gradient);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  transition: transform 0.6s cubic-bezier(.22,.9,.3,1), box-shadow 0.6s ease;
}
.props-zigzag__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.4s cubic-bezier(.22,.9,.3,1);
}
.props-zigzag__row:hover .props-zigzag__media,
.props-zigzag__row:focus-visible .props-zigzag__media {
  transform: translateY(-8px);
  box-shadow: 0 26px 52px rgba(0,0,0,0.3);
}
.props-zigzag__row:hover .props-zigzag__media img,
.props-zigzag__row:focus-visible .props-zigzag__media img {
  transform: scale(1.03);
}
.props-zigzag__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #A0A0A0;
}

.props-zigzag__badge.badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(2px);
}

.props-zigzag__content { flex: 1 1 auto; min-width: 0; }
.props-zigzag__loc {
  font-size: 12px;
  color: #6A6A6A;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.props-zigzag__content h3 {
  font-family: 'Marcellus', serif;
  font-size: 1.7rem;
  font-weight: 400;
  color: #1A1A1A;
  line-height: 1.3;
  margin-bottom: 10px;
}
.props-zigzag__price {
  font-family: 'Marcellus', serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: #1A1A1A;
  margin-bottom: 16px;
}
.props-zigzag__specs {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #3A3A3A;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(0,0,0,0.12);
}
.props-zigzag__specs span { display: inline-flex; align-items: center; gap: 5px; }
.props-zigzag__desc {
  font-size: 14px;
  color: #4A4A4A;
  line-height: 1.6;
  margin-bottom: 22px;
  max-width: 580px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.props-zigzag__link {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #4A4A4A;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}
.props-zigzag__link .arrow { display: inline-block; transition: transform 0.3s ease; }
.props-zigzag__row:hover .props-zigzag__link,
.props-zigzag__row:focus-visible .props-zigzag__link { color: #1A1A1A; }
.props-zigzag__row:hover .props-zigzag__link .arrow,
.props-zigzag__row:focus-visible .props-zigzag__link .arrow { transform: translateX(5px); }

@media (max-width: 860px) {
  .props-zigzag { gap: 64px; }
  .props-zigzag__row,
  .props-zigzag__row:nth-child(even) {
    flex-direction: column;
    /* sin esto, .props-zigzag__row hereda el align-items:center de escritorio y,
       en columna, encoge el bloque de texto a su contenido y lo centra — el texto
       queda descolgado del ancho de la foto en vez de ir borde a borde (bug real,
       detectado 2026-09-24 probando 375/768px). */
    align-items: stretch;
    gap: 28px;
  }
  .props-zigzag__media { flex: none; width: 100%; aspect-ratio: 16 / 10; }
}

/* ===== PAGINACIÓN =====
   Añadido 2026-09-25: misma UI en site-public y portal-interno — 8 por
   página, botones prev/next con los iconos chevronLeft/chevronRight de
   js/icons.js (cada app tiene su propia copia de ese archivo) + "Página X
   de Y". El propio JS de cada app oculta el bloque entero (clase .hidden)
   cuando hay una sola página. */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 48px 0 24px;
}
.pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  background: transparent;
  color: #1A1A1A;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.pagination__btn:hover:not(:disabled) {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.3);
}
.pagination__btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.pagination__info {
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  color: #4A4A4A;
  min-width: 110px;
  text-align: center;
}