/* ============================================================
   CAPA PREMIUM — profundidad, movimiento y materia
   ------------------------------------------------------------
   Lo que separa una página "de puro HTML" de una que se siente
   cara no es el color: es que los elementos tengan PESO. Que se
   levanten al tocarlos, que la luz caiga sobre ellos, que las
   cosas entren en escena en vez de aparecer de golpe.

   Cuatro recursos, aplicados con disciplina:
   1. Elevación en capas: sombras compuestas (contacto + difusa),
      no una sola sombra plana.
   2. Movimiento con intención: todo entra desde abajo y se
      desvanece; nada rebota ni gira sin razón.
   3. Luz: gradientes sutiles y un brillo que recorre los botones
      primarios al pasar el cursor.
   4. Textura: retícula catastral y viñetas que dan superficie a
      los fondos oscuros.

   Todo respeta prefers-reduced-motion.
   ============================================================ */

:root {
  /* Elevación en capas: cada nivel suma contacto + difusión */
  --elev-1:
    0 1px 2px rgba(15, 28, 46, .06),
    0 2px 6px rgba(15, 28, 46, .04);
  --elev-2:
    0 2px 4px rgba(15, 28, 46, .07),
    0 8px 20px rgba(15, 28, 46, .08);
  --elev-3:
    0 4px 8px rgba(15, 28, 46, .08),
    0 16px 40px rgba(15, 28, 46, .12);
  --elev-4:
    0 8px 16px rgba(15, 28, 46, .10),
    0 32px 64px rgba(15, 28, 46, .16);

  /* Curvas: entrada rápida y salida suave, como material real */
  --curva:      cubic-bezier(.22, 1, .36, 1);
  --curva-fina: cubic-bezier(.4, 0, .2, 1);
}

/* ---------------- Entrada en escena ---------------- */
@keyframes surgir {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes aparecer {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes brillar {
  from { transform: translateX(-120%) skewX(-18deg); }
  to   { transform: translateX(320%) skewX(-18deg); }
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Las tarjetas del catálogo entran escalonadas: da sensación de
   que el contenido "llega", no de que ya estaba ahí plano. */
.rejilla > * {
  animation: surgir .5s var(--curva) both;
}
.rejilla > *:nth-child(1) { animation-delay: .02s; }
.rejilla > *:nth-child(2) { animation-delay: .06s; }
.rejilla > *:nth-child(3) { animation-delay: .10s; }
.rejilla > *:nth-child(4) { animation-delay: .14s; }
.rejilla > *:nth-child(5) { animation-delay: .18s; }
.rejilla > *:nth-child(6) { animation-delay: .22s; }
.rejilla > *:nth-child(n+7) { animation-delay: .26s; }

.ficha-resumen { animation: surgir .55s var(--curva) .08s both; }
.visor-medios  { animation: surgir .55s var(--curva) .14s both; }

/* ---------------- Botones con materia ---------------- */
.boton {
  position: relative;
  overflow: hidden;
  box-shadow: var(--elev-1);
  transition:
    transform .18s var(--curva),
    box-shadow .18s var(--curva),
    background-color .18s var(--curva-fina),
    border-color .18s var(--curva-fina);
}
.boton:hover { transform: translateY(-2px); box-shadow: var(--elev-2); }
.boton:active { transform: translateY(0); box-shadow: var(--elev-1); transition-duration: .06s; }

/* Un destello recorre el botón principal al pasar el cursor:
   el gesto que usan las marcas premium para decir "esto es el
   siguiente paso". */
.boton--primario::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}
.boton--primario:hover::after { animation: brillar .75s var(--curva-fina); }
.boton--primario { box-shadow: var(--elev-2); }
.boton--primario:hover { box-shadow: var(--elev-3); }

.boton--whatsapp { box-shadow: var(--elev-2); }
.boton--whatsapp:hover { box-shadow: 0 8px 24px rgba(31, 122, 83, .34); }

/* ---------------- Tarjetas con elevación real ---------------- */
.tarjeta {
  box-shadow: var(--elev-1);
  transition:
    transform .28s var(--curva),
    box-shadow .28s var(--curva),
    border-color .28s var(--curva-fina);
}
.tarjeta:hover {
  transform: translateY(-5px);
  box-shadow: var(--elev-3);
  border-color: transparent;
}
/* La foto se acerca ligeramente: profundidad dentro de la tarjeta */
.tarjeta-foto img {
  transition: transform .6s var(--curva);
  will-change: transform;
}
.tarjeta:hover .tarjeta-foto img { transform: scale(1.055); }

/* Velo de lectura sobre la foto, para que las marcas siempre
   contrasten sin importar la imagen */
.tarjeta-foto::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 45%;
  background: linear-gradient(180deg, rgba(15,28,46,.35), transparent);
  pointer-events: none;
}
.tarjeta-foto--vacia::after { display: none; }
.tarjeta-marcas { z-index: 2; }
.estado, .tarjeta-compat {
  box-shadow: 0 2px 8px rgba(15, 28, 46, .22);
  backdrop-filter: blur(2px);
}

/* El precio crece un punto al pasar sobre la tarjeta */
.tarjeta-precio { transition: transform .28s var(--curva); transform-origin: left center; }
.tarjeta:hover .tarjeta-precio { transform: scale(1.04); }

.fav { transition: color .2s var(--curva-fina), transform .2s var(--curva); }
.fav:hover { transform: scale(1.06); color: var(--maiz); }
.fav[aria-pressed="true"] { animation: latido .4s var(--curva); }
@keyframes latido {
  0% { transform: scale(1); }
  45% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* ---------------- Superficies elevadas ---------------- */
.formulario, .ficha-bloque, .ficha-cabecera, .admin-panel,
.panel-dato, .panel-fila, .admin-metrica, .catalogo-filtros,
.ficha-contacto, .admin-tabla-marco, .recomendador, .admin-bloque {
  box-shadow: var(--elev-1);
}
.ficha-contacto { box-shadow: var(--elev-2); }

/* ---------------- Hero con luz ---------------- */
.hero {
  background:
    radial-gradient(1200px 500px at 78% 12%, rgba(168, 112, 58, .22), transparent 62%),
    linear-gradient(155deg, #16375a 0%, #0f2440 55%, #0c1c33 100%);
  box-shadow: var(--elev-3);
}
/* Halo suave que respira: da vida sin distraer */
.hero::before {
  content: "";
  position: absolute;
  top: -30%; right: -12%;
  width: 62%; height: 150%;
  background: radial-gradient(circle, rgba(120, 170, 220, .16), transparent 66%);
  pointer-events: none;
  animation: respirar 9s ease-in-out infinite alternate;
}
@keyframes respirar {
  from { transform: scale(1) translateY(0); opacity: .75; }
  to   { transform: scale(1.12) translateY(-16px); opacity: 1; }
}
.hero h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, .28); }

/* ---------------- Cabecera con vidrio ---------------- */
.cabecera {
  background: var(--cabecera-fondo);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 rgba(15, 28, 46, .06);
  transition: box-shadow .25s var(--curva-fina), background-color .25s var(--curva-fina);
}
.cabecera--fija { box-shadow: var(--elev-2); background: var(--cabecera-fondo); }
.navegacion a { transition: background-color .18s var(--curva-fina), color .18s var(--curva-fina); }
.nav-publicar { box-shadow: var(--elev-2); transition: transform .2s var(--curva), box-shadow .2s var(--curva); }
.nav-publicar:hover { transform: translateY(-2px); box-shadow: var(--elev-3); }

/* Subrayado que crece bajo el enlace activo */
.navegacion a { position: relative; }
.navegacion a::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 4px;
  height: 2px;
  background: var(--maiz);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--curva);
  border-radius: 2px;
}
.navegacion a:hover::after { transform: scaleX(1); }
.navegacion a[aria-current="page"]::after { transform: scaleX(1); }
.nav-publicar::after { display: none; }

/* ---------------- Formularios que responden ---------------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="password"], input[type="search"], select, textarea {
  transition: border-color .18s var(--curva-fina), box-shadow .18s var(--curva-fina);
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 4px rgba(20, 48, 79, .1);
  outline: none;
}
.filtro-check, .opcion { transition: color .15s var(--curva-fina); }
.filtro-check:hover, .opcion:hover { color: var(--monte); }

/* ---------------- Chips y pastillas ---------------- */
.chip-dato, .chip-filtro, .admin-pastilla, .panorama-pestana, .visor-vista {
  transition: transform .18s var(--curva), box-shadow .18s var(--curva), background-color .18s var(--curva-fina);
}
.chip-filtro:hover, .chip-dato:hover { transform: translateY(-1px); box-shadow: var(--elev-1); }

/* ---------------- Visor de medios ---------------- */
.visor-medios { box-shadow: var(--elev-3); }
.visor-tab { transition: background-color .2s var(--curva-fina), color .2s var(--curva-fina), transform .2s var(--curva); }
.visor-tab:hover { transform: translateY(-1px); }
.visor-tab--activa { box-shadow: var(--elev-1); }
.visor-cargando {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  color: rgba(255, 255, 255, .72);
  font-size: .92rem;
  background: rgba(15, 28, 46, .55);
  backdrop-filter: blur(2px);
  animation: aparecer .3s var(--curva-fina);
}
.visor-spinner {
  width: 20px; height: 20px;
  border: 2px solid rgba(255, 255, 255, .25);
  border-top-color: rgba(255, 255, 255, .9);
  border-radius: 50%;
  animation: girar .8s linear infinite;
}

/* ---------------- Servicios cercanos ---------------- */
.servicio-item {
  box-shadow: var(--elev-1);
  transition: transform .2s var(--curva), box-shadow .2s var(--curva), border-color .2s var(--curva-fina);
}
.servicio-item:hover, .servicio-item:focus-visible {
  transform: translateX(5px);
  box-shadow: var(--elev-2);
  border-color: var(--monte);
}
.servicio-icono { transition: transform .25s var(--curva); }
.servicio-item:hover .servicio-icono { transform: scale(1.18); }

/* ---------------- Panel de administración ---------------- */
.admin-lateral { box-shadow: 4px 0 24px rgba(15, 28, 46, .1); }
.admin-nav-enlace { transition: background-color .18s var(--curva-fina), color .18s var(--curva-fina), padding-left .2s var(--curva); }
.admin-nav-enlace:hover { padding-left: calc(var(--e3) + 4px); }
.admin-nav-activa { box-shadow: inset 3px 0 0 var(--maiz); }
.admin-boton { transition: transform .15s var(--curva), box-shadow .15s var(--curva), border-color .15s var(--curva-fina), color .15s var(--curva-fina); }
.admin-boton:hover { transform: translateY(-1px); box-shadow: var(--elev-1); }
.admin-tabla tbody tr { transition: background-color .15s var(--curva-fina), border-color .15s var(--curva-fina); }

/* ---------------- Plegables ---------------- */
.ficha-plegable { transition: box-shadow .2s var(--curva), border-color .2s var(--curva-fina); }
.ficha-plegable:hover { box-shadow: var(--elev-1); }
.ficha-plegable[open] { box-shadow: var(--elev-2); }
.ficha-plegable > summary::after { transition: transform .25s var(--curva); }
.ficha-plegable[open] > summary::after { transform: rotate(180deg); }
.ficha-plegable[open] > *:not(summary) { animation: surgir .3s var(--curva) both; }

/* ---------------- Galería ---------------- */
.galeria-principal { box-shadow: var(--elev-2); }
.galeria-flecha { transition: background-color .2s var(--curva-fina), transform .2s var(--curva); box-shadow: var(--elev-1); }
.galeria-flecha:hover { transform: translateY(-50%) scale(1.08); }
.galeria-mini { transition: opacity .2s var(--curva-fina), border-color .2s var(--curva-fina), transform .2s var(--curva); }
.galeria-mini:hover { opacity: 1; transform: translateY(-2px); }
.galeria-foto--activa { animation: aparecer .35s var(--curva-fina); }

/* ---------------- Paginación ---------------- */
.paginacion a { transition: transform .15s var(--curva), box-shadow .15s var(--curva), border-color .15s var(--curva-fina); }
.paginacion a:hover { transform: translateY(-2px); box-shadow: var(--elev-1); }
.paginacion-actual { box-shadow: var(--elev-2); }

/* ---------------- Avisos ---------------- */
.errores, .exito, .aviso { animation: surgir .35s var(--curva) both; box-shadow: var(--elev-1); }

/* ---------------- Accesibilidad ---------------- */
@media (prefers-reduced-motion: reduce) {
  .rejilla > *, .hero, .ficha-cabecera, .ficha-resumen, .visor-medios,
  .admin-metricas, .panel-resumen, .errores, .exito, .aviso,
  .ficha-plegable[open] > *:not(summary), .galeria-foto--activa {
    animation: none !important;
  }
  .hero::before { animation: none; }
  .boton:hover, .tarjeta:hover, .admin-metrica:hover, .panel-fila:hover,
  .servicio-item:hover, .paginacion a:hover, .nav-publicar:hover {
    transform: none;
  }
  .tarjeta:hover .tarjeta-foto img { transform: none; }
  .boton--primario:hover::after { animation: none; }
}

/* ============================================================
   Aparición al hacer scroll. Los elementos con .aparece entran
   suavemente (fade + leve subida) cuando aparecen en pantalla.
   Un IntersectionObserver (app.js) les añade .aparece--visible.
   Escalonado opcional con --orden para tarjetas en rejilla.
   ============================================================ */
.aparece {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1),
              transform .6s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--orden, 0) * 70ms);
  will-change: opacity, transform;
}
.aparece--visible {
  opacity: 1;
  transform: translateY(0);
}
/* Si el JS no corre por lo que sea, no dejar el contenido invisible:
   esta regla lo revela cuando la clase de "listo" está en el body. */
.js-listo .aparece:not(.aparece--visible) {
  /* fallback de seguridad tras un tiempo, ver app.js */
}
@media (prefers-reduced-motion: reduce) {
  .aparece { opacity: 1; transform: none; transition: none; }
}