@import './variables.css';

/* ---- Grid de servicios ---- */

.servicios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--espacio-md);
  margin-top: var(--espacio-md);
}

/* ---- Card ----
   Mismo estilo que las tarjetas de experiencias del home ("Avistaje de
   fauna"): crema, foto de 200 px con la categoría encima, título, texto y
   "Conocer más". La foto y el link llevan al mismo lugar. */

.card {
  background: var(--superficie-suave);
  border-radius: var(--radio-md);
  border: 1px solid rgba(36,51,32,.06);
  /* Sin overflow:hidden: el brillo de borde se dibuja por fuera. El zoom de
     la foto lo recorta .card__imagen-wrap. */
  display: flex;
  flex-direction: column;
  transition: transform .25s var(--ease-out);
}

.card:hover {
  transform: translateY(-4px);
}

.card__imagen-wrap {
  position: relative;
  display: block;
  height: 200px;
  overflow: hidden;
  border-radius: var(--radio-md) var(--radio-md) 0 0;
  background: var(--gris-claro);
}

.card__imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease-out);
  display: block;
}

.card:hover .card__imagen {
  transform: scale(1.04);
}

.card__imagen--placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c0bfbb;
  font-size: 2.2rem;
}

/* La categoría va sobre la foto, arriba a la izquierda. */
.card__tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-family: var(--font-secundaria);
  font-size: var(--texto-2xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  background: rgba(36,51,32,.4);
  backdrop-filter: blur(6px);
  padding: var(--sp-1) var(--sp-3);
  border-radius: 2px;
}

/* Cada categoría tiene un color de la paleta (lo elige el JS que arma la
   tarjeta con data-color). Sobre celeste, el texto va oscuro: el blanco no
   llega al contraste mínimo. */
.card__tag[data-color],
.exp-cat[data-color] {
  color: var(--blanco);
  background: color-mix(in srgb, var(--tag-color) 88%, transparent);
}
[data-color="verde"]        { --tag-color: var(--verde); }
[data-color="verde-medio"]  { --tag-color: var(--verde-medio); }
[data-color="verde-oscuro"] { --tag-color: var(--verde-oscuro); }
[data-color="marron"]       { --tag-color: var(--marron); }
[data-color="ocre"]         { --tag-color: var(--ocre); }
[data-color="celeste"]      { --tag-color: var(--celeste); }
.card__tag[data-color="celeste"],
.exp-cat[data-color="celeste"] { color: var(--verde-oscuro); }

.card__body {
  padding: var(--sp-5);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.card__nombre {
  font-family: var(--font-principal);
  font-weight: 600;
  font-size: var(--texto-base);
  color: var(--verde-oscuro);
  line-height: 1.3;
  margin-bottom: var(--sp-1);
}

.card__descripcion {
  font-family: var(--font-secundaria);
  font-weight: 300;
  font-size: var(--texto-sm);
  line-height: 1.7;
  color: var(--gris-medio);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "Conocer más →", al pie del cuerpo aunque el texto sea corto. */
.card__link {
  margin-top: auto;
  padding-top: var(--sp-4);
  font-family: var(--font-secundaria);
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--verde);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  align-self: flex-start;
  text-decoration: none;
  transition: gap var(--trans);
}

.card__link:hover {
  gap: var(--sp-2);
}

/* ---- Brillo de borde ----
   Port a CSS + JS sin React de "Border Glow" de React Bits
   (reactbits.dev/c/components/border-glow), en su versión de superficie
   clara y con los colores del sitio. components.js escribe
   --edge-proximity (0-100: qué tan cerca del borde está el cursor) y
   --cursor-angle; acá se dibujan tres capas:
   ::before  el borde de color, en un cono hacia el cursor
   ::after   un relleno suave de color cerca de ese borde
   .brillo-borde__luz  el halo, que sale por fuera de la tarjeta */

.brillo-borde {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 30;
  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
  --glow-padding: 40px;
  --cone-spread: 25;
  --fill-opacity: .5;
  --brillo: 84deg 60% 42%;   /* verde del sitio, más luminoso */
  --brillo-fondo: var(--superficie-suave);   /* el fondo de la tarjeta */
  --malla:
    radial-gradient(at 80% 55%, var(--verde) 0px, transparent 50%),
    radial-gradient(at 69% 34%, var(--celeste) 0px, transparent 50%),
    radial-gradient(at 8% 6%, var(--ocre) 0px, transparent 50%),
    radial-gradient(at 41% 38%, var(--verde) 0px, transparent 50%),
    radial-gradient(at 86% 85%, var(--celeste) 0px, transparent 50%),
    radial-gradient(at 82% 18%, var(--ocre) 0px, transparent 50%),
    radial-gradient(at 51% 4%, var(--celeste) 0px, transparent 50%),
    linear-gradient(var(--verde) 0 100%);

  position: relative;
  isolation: isolate;
}

.brillo-borde::before,
.brillo-borde::after,
.brillo-borde > .brillo-borde__luz {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity .25s ease-out;
  z-index: -1;
}

.brillo-borde:not(:hover)::before,
.brillo-borde:not(:hover)::after,
.brillo-borde:not(:hover) > .brillo-borde__luz {
  opacity: 0;
  transition: opacity .75s ease-in-out;
}

/* Borde de color en malla, enmascarado en un cono hacia el cursor. */
.brillo-borde::before {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--brillo-fondo) 0 100%) padding-box,
    var(--malla);
  background-origin: border-box;
  background-clip: padding-box, border-box, border-box, border-box, border-box, border-box, border-box, border-box, border-box;
  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
  -webkit-mask-image: conic-gradient(from var(--cursor-angle) at center,
    black calc(var(--cone-spread) * 1%),
    transparent calc((var(--cone-spread) + 15) * 1%),
    transparent calc((100 - var(--cone-spread) - 15) * 1%),
    black calc((100 - var(--cone-spread)) * 1%));
  mask-image: conic-gradient(from var(--cursor-angle) at center,
    black calc(var(--cone-spread) * 1%),
    transparent calc((var(--cone-spread) + 15) * 1%),
    transparent calc((100 - var(--cone-spread) - 15) * 1%),
    black calc((100 - var(--cone-spread)) * 1%));
}

/* Relleno de color cerca del borde iluminado. */
.brillo-borde::after {
  border: 1px solid transparent;
  background: var(--malla);
  background-clip: padding-box;
  mask-image:
    linear-gradient(to bottom, black, black),
    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
  mask-composite: subtract, add, add, add, add, add;
  opacity: calc(var(--fill-opacity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
}

/* Halo exterior: sale --glow-padding por fuera de la tarjeta. */
.brillo-borde > .brillo-borde__luz {
  inset: calc(var(--glow-padding) * -1);
  z-index: 1;
  -webkit-mask-image: conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
  mask-image: conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
}

.brillo-borde > .brillo-borde__luz::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px hsl(var(--brillo) / 100%),
    inset 0 0 1px 0 hsl(var(--brillo) / 60%),
    inset 0 0 3px 0 hsl(var(--brillo) / 50%),
    inset 0 0 6px 0 hsl(var(--brillo) / 40%),
    inset 0 0 15px 0 hsl(var(--brillo) / 30%),
    inset 0 0 25px 2px hsl(var(--brillo) / 20%),
    inset 0 0 50px 2px hsl(var(--brillo) / 10%),
    0 0 1px 0 hsl(var(--brillo) / 60%),
    0 0 3px 0 hsl(var(--brillo) / 50%),
    0 0 6px 0 hsl(var(--brillo) / 40%),
    0 0 15px 0 hsl(var(--brillo) / 30%),
    0 0 25px 2px hsl(var(--brillo) / 20%),
    0 0 50px 2px hsl(var(--brillo) / 10%);
}

/* En reposo el halo no sobresale: sus 40 px por fuera ensanchaban la página
   en el celular (la tarjeta va casi de borde a borde). Crece al pasar el mouse
   y vuelve a su tamaño recién cuando terminó de apagarse. */
.brillo-borde:not(:hover) > .brillo-borde__luz {
  inset: 0;
  transition: opacity .75s ease-in-out, inset 0s .75s;
}

/* ---- Skeleton cards ---- */

.card-skeleton {
  border-radius: var(--radio-lg);
  overflow: hidden;
  background: var(--blanco);
  box-shadow: var(--sombra-card);
}

.card-skeleton__img {
  aspect-ratio: 4/3;
}

.card-skeleton__body {
  padding: 1.25rem var(--espacio-sm);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.card-skeleton__tag {
  height: 10px;
  width: 56px;
}

.card-skeleton__titulo {
  height: 18px;
  width: 78%;
}

.card-skeleton__texto {
  height: 11px;
  width: 100%;
}

.card-skeleton__texto--corto {
  height: 11px;
  width: 58%;
}

/* ---- Filtros ---- */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--espacio-md);
}

.filtro-btn {
  padding: 0.32rem 1.1rem;
  border-radius: var(--radio-sm);
  border: 1.5px solid rgba(36,51,32,0.22);
  font-family: var(--font-secundaria);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-medio);
  background: transparent;
  cursor: pointer;
  transition:
    background var(--trans),
    color var(--trans),
    border-color var(--trans),
    box-shadow var(--trans);
}

.filtro-btn:hover {
  border-color: var(--verde);
  color: var(--verde-oscuro);
}

.filtro-btn.activo {
  background: var(--verde-oscuro);
  color: var(--blanco);
  border-color: var(--verde-oscuro);
}

/* Cada categoría con su color, el mismo de la etiqueta de las tarjetas
   (data-color, --tag-color más arriba). "Todos" no lleva y queda verde oscuro.
   El texto del celeste va en verde oscuro: celeste sobre blanco no llega al
   contraste mínimo, y blanco sobre celeste tampoco. */
.filtro-btn[data-color],
.subfiltros[data-color] .subfiltro-btn {
  border-color: color-mix(in srgb, var(--tag-color) 45%, transparent);
  color: var(--tag-color);
}
.filtro-btn[data-color]:hover,
.subfiltros[data-color] .subfiltro-btn:hover {
  border-color: var(--tag-color);
}
.filtro-btn[data-color].activo,
.subfiltros[data-color] .subfiltro-btn.activo {
  background: var(--tag-color);
  border-color: var(--tag-color);
  color: var(--blanco);
}
.filtro-btn[data-color="celeste"],
.filtro-btn[data-color="celeste"].activo { color: var(--verde-oscuro); }

.subfiltros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: var(--espacio-md);
}

.subfiltro-btn {
  padding: 0.22rem 0.9rem;
  border-radius: var(--radio-sm);
  border: 1px solid rgba(61,98,57,0.3);
  font-family: var(--font-secundaria);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--verde-medio);
  background: transparent;
  cursor: pointer;
  transition: background var(--trans), color var(--trans), border-color var(--trans);
}

.subfiltro-btn:hover,
.subfiltro-btn.activo {
  background: var(--verde-medio);
  color: var(--blanco);
  border-color: var(--verde-medio);
}

/* ---- Sin resultados ---- */

.sin-resultados {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--espacio-lg);
  color: #bbb;
  font-family: var(--font-principal);
  font-weight: 200;
  font-size: 1.1rem;
}

@media (max-width: 600px) {
  .servicios-grid {
    grid-template-columns: 1fr;
  }
}