/* =========================================================
   Le Corch · categoria.css
   Hero parallax + 3 secciones tipadas (foto · video · drone)
   con sliders de grillas + CTA final.
   Replicado 1:1 del mockup categoria-surf.html.
   Sirve a las 6 categorías (surf, real-estate, marcas, eventos, video, drone).
   ========================================================= */


/* =========================================================
   BUSCA TU FOTO · tile de sesión (extiende .cat-photo)
   ─────────────────────────────────────────────────────────
   El index de /busca-tu-foto/ usa la MISMA estructura visual
   que una página de categoría: cat-hero parallax + cat-types
   con grid + cat-cta-bottom. Acá agregamos solo lo específico
   del tile de sesión (meta con fecha + lugar + count) y el
   placeholder cuando una sesión no tiene cover propio.
   ========================================================= */

/* Meta abajo de cada tile · fade-in al hover (sigue patrón cat-photo__caption) */
.btf-sesion-tile {
  display: block;
  text-decoration: none;
  color: var(--color-foam);
}
.btf-sesion-tile__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(24, 35, 49, 0.05) 0%,
    rgba(24, 35, 49, 0.10) 40%,
    rgba(24, 35, 49, 0.78) 100%);
  transition: background var(--dur-hover) var(--ease-premium);
  pointer-events: none;
}
.btf-sesion-tile:hover .btf-sesion-tile__overlay {
  background: linear-gradient(180deg,
    rgba(24, 35, 49, 0.0) 0%,
    rgba(24, 35, 49, 0.15) 40%,
    rgba(24, 35, 49, 0.88) 100%);
}
.btf-sesion-tile__meta {
  position: absolute;
  left: var(--sp-4);
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.btf-sesion-tile__date {
  font-family: var(--font-display);
  font-weight: var(--peso-med);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-firma);
  margin: 0;
}
.btf-sesion-tile__title {
  font-family: var(--font-display);
  font-weight: var(--peso-thin);
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--color-foam);
  margin: 0;
}
.btf-sesion-tile__count {
  font-family: var(--font-body);
  font-weight: var(--peso-light);
  font-size: 13px;
  color: var(--color-foam);
  opacity: 0.75;
  margin: 0;
}

/* Empty state cuando una sesión todavía no tiene fotos publicadas */
.btf-sesion-empty {
  padding: var(--sp-7) var(--sp-lateral);
  text-align: center;
  color: var(--color-tinta);
  opacity: 0.6;
  font-family: var(--font-body);
  font-weight: var(--peso-light);
}

/* Placeholder · cuando la sesión no tiene cover · gradiente tinta→marina + ícono cámara */
.btf-sesion-tile--placeholder {
  background: linear-gradient(135deg, var(--color-tinta) 0%, var(--color-marina) 100%);
}
.btf-sesion-tile__placeholder-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--color-firma);
  opacity: 0.55;
  transform: translateY(-30px);
  transition: opacity var(--dur-hover) var(--ease-premium),
              transform var(--dur-hover) var(--ease-premium);
}
.btf-sesion-tile--placeholder:hover .btf-sesion-tile__placeholder-icon {
  opacity: 0.85;
  transform: translateY(-30px) scale(1.04);
}


/* =========================================================
   BUSCA TU FOTO · empty state premium (sin sesiones)
   ─────────────────────────────────────────────────────────
   Sobre fondo tinta (azul oscuro), centrado, editorial.
   Eyebrow firma + título Próximamente + lead foam tenue.
   100vh para que ocupe la pantalla con presencia.
   ========================================================= */
.btf-empty {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--color-tinta);
  color: var(--color-foam);
  padding: clamp(80px, 12vh, 140px) var(--sp-lateral);
  text-align: center;
}
.btf-empty__inner {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}
.btf-empty__eyebrow {
  font-family: var(--font-display);
  font-weight: var(--peso-med);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-firma);
  margin: 0;
}
.btf-empty__title {
  font-family: var(--font-display);
  font-weight: var(--peso-thin);
  font-size: clamp(48px, 7vw, 96px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--color-foam);
  margin: 0;
}
.btf-empty__title em {
  font-style: italic;
  color: var(--color-firma);
  font-weight: var(--peso-thin);
}
.btf-empty__lead {
  font-family: var(--font-body);
  font-weight: var(--peso-light);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--color-foam);
  opacity: 0.72;
  max-width: 38ch;
  margin: 0;
}

/* =========================================================
   HERO 100vh + parallax suave
   ========================================================= */
.cat-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--color-foam);
  background: var(--color-tinta);
}
.cat-hero__media {
  position: absolute;
  inset: -10% 0;
  z-index: 0;
  will-change: transform;
}
.cat-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  filter: saturate(0.95) brightness(0.92);
}
.cat-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
    rgba(24, 35, 49, 0.30) 0%,
    rgba(24, 35, 49, 0.10) 35%,
    rgba(24, 35, 49, 0.55) 80%,
    rgba(24, 35, 49, 0.85) 100%);
}
.cat-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: var(--sp-7) var(--sp-lateral) var(--sp-9);
  max-width: var(--container);
  margin: 0 auto;
}
.cat-hero__crumb {
  font-family: var(--font-display);
  font-weight: var(--peso-med);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-foam);
  opacity: 0.7;
  margin-bottom: var(--sp-5);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.cat-hero__crumb a {
  color: inherit;
  transition: color var(--dur-hover) var(--ease-premium);
}
.cat-hero__crumb a:hover { color: var(--color-firma); opacity: 1; }
.cat-hero__crumb-sep {
  width: 32px;
  height: 1px;
  background: var(--color-firma);
}
.cat-hero__title {
  font-family: var(--font-display);
  font-weight: var(--peso-thin);
  font-size: var(--fs-monolith);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--color-foam);
  margin-bottom: var(--sp-5);
}
.cat-hero__title em {
  font-style: italic;
  color: var(--color-firma);
  font-weight: var(--peso-thin);
}
.cat-hero__lead {
  font-family: var(--font-body);
  font-weight: var(--peso-light);
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.55;
  max-width: 56ch;
  color: var(--color-arena);
  opacity: 0.94;
}
.cat-hero__scroll-hint {
  position: absolute;
  right: var(--sp-lateral);
  bottom: var(--sp-5);
  z-index: 2;
  font-family: var(--font-display);
  font-weight: var(--peso-med);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-foam);
  opacity: 0.7;
  display: flex;
  align-items: center;
  gap: 12px;
  writing-mode: vertical-rl;
}
.cat-hero__scroll-hint::after {
  content: '';
  width: 1px;
  height: 48px;
  background: currentColor;
  animation: scrollPulse 2.4s var(--ease-premium) infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
  50%      { opacity: 1;   transform: scaleY(1);   transform-origin: top; }
}

/* =========================================================
   Tipos · intro
   ========================================================= */
.cat-types {
  background: var(--color-arena-soft);
  /* Padding reducido (antes --sp-section-y = 80-160px) · sección compacta. */
  padding-block: clamp(56px, 6vw, 96px);
}
.cat-types__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
  align-items: end;
  padding-bottom: var(--sp-7);
  margin-bottom: var(--sp-7);
  border-bottom: 1px solid var(--hairline-mid);
}
.cat-types__intro-eyebrow { margin-bottom: var(--sp-3); }
.cat-types__intro-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(36px, 4vw, 64px);
  line-height: 1.1;
  letter-spacing: 0.005em;
  color: var(--color-tinta);
  max-width: 18ch;
}
.cat-types__intro-title em {
  font-style: italic;
  color: var(--color-firma);
  font-weight: var(--peso-thin);
}
.cat-types__intro-lead {
  font-family: var(--font-body);
  font-weight: var(--peso-light);
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--color-tinta);
  opacity: 0.78;
  max-width: 50ch;
  justify-self: end;
}

/* =========================================================
   Cat-type · header + grid genérico
   ========================================================= */
.cat-type { margin-bottom: var(--sp-7); }
.cat-type:last-child { margin-bottom: 0; }
.cat-type__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.cat-type__header-left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.cat-type__header-right {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.cat-type__eyebrow { margin-bottom: 0; }
.cat-type__title {
  font-family: var(--font-display);
  font-weight: var(--peso-light);
  font-size: clamp(40px, 5vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--color-tinta);
}
.cat-type__count {
  font-family: var(--font-display);
  font-weight: var(--peso-med);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-tinta);
  opacity: 0.55;
}
.cat-type__more {
  font-family: var(--font-display);
  font-weight: var(--peso-med);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-tinta);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-firma);
  transition: color var(--dur-hover) var(--ease-premium), gap var(--dur-hover) var(--ease-premium);
}
.cat-type__more:hover { color: var(--color-firma); gap: 16px; }

/* =========================================================
   FOTOGRAFÍA · grid 3-col uniforme · aspect 4:5
   ========================================================= */
.cat-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.2vw, 22px);
}
.cat-photo {
  position: relative;
  overflow: hidden;
  background: var(--color-tinta);
  cursor: pointer;
  aspect-ratio: 4 / 5;
}
.cat-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1400ms var(--ease-premium), filter var(--dur-hover) var(--ease-premium);
  filter: saturate(0.96);
}
.cat-photo:hover img { transform: scale(1.04); filter: saturate(1.06); }
.cat-photo__caption {
  position: absolute;
  left: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 2;
  font-family: var(--font-display);
  font-weight: var(--peso-reg);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-foam);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-hover) var(--ease-premium), transform var(--dur-hover) var(--ease-premium);
}
.cat-photo:hover .cat-photo__caption { opacity: 1; transform: translateY(0); }
.cat-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 50%, rgba(24, 35, 49, 0.55) 100%);
  opacity: 0;
  transition: opacity var(--dur-hover) var(--ease-premium);
}
.cat-photo:hover::after { opacity: 1; }

/* =========================================================
   SLIDER de GRILLAS · cada slide = grid completa
   ========================================================= */
.cat-slider {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  margin-inline: calc(var(--sp-lateral) * -1);
}
.cat-slider::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
  .cat-slider { scroll-behavior: auto; }
}
.cat-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding-inline: var(--sp-lateral);
  box-sizing: border-box;
}

.cat-slider-nav {
  display: flex;
  gap: 4px;
}
.cat-slider-nav button {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-tinta);
  border: 1px solid var(--hairline-strong);
  transition: color var(--dur-hover) var(--ease-premium),
              border-color var(--dur-hover) var(--ease-premium);
}
.cat-slider-nav button:hover {
  color: var(--color-firma);
  border-color: var(--color-firma);
}
.cat-slider-nav button[disabled] {
  opacity: 0.3;
  cursor: default;
}
.cat-slider-nav svg { display: block; }

.cat-slider-counter {
  font-family: var(--font-display);
  font-weight: var(--peso-med);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-tinta);
  opacity: 0.55;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-variant-numeric: tabular-nums;
}
.cat-slider-counter__current {
  color: var(--color-firma);
  opacity: 1;
}

.cat-slider-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  flex-wrap: wrap;
}
.cat-slider-controls__right {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

/* =========================================================
   VIDEO · grid 2-col aspect 16:9 + play
   ========================================================= */
.cat-video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2vw, 40px);
}
.cat-video {
  position: relative;
  overflow: hidden;
  background: var(--color-tinta);
  cursor: pointer;
  aspect-ratio: 16 / 9;
}
.cat-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1400ms var(--ease-premium), filter var(--dur-hover) var(--ease-premium);
  filter: saturate(0.96) brightness(0.86);
}
.cat-video:hover img { transform: scale(1.03); filter: saturate(1) brightness(0.78); }
.cat-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1px solid var(--color-foam);
  background: rgba(24, 35, 49, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-foam);
  transition: background var(--dur-hover) var(--ease-premium),
              border-color var(--dur-hover) var(--ease-premium),
              transform var(--dur-hover) var(--ease-premium);
}
.cat-video:hover .cat-video__play {
  background: var(--color-firma);
  border-color: var(--color-firma);
  transform: translate(-50%, -50%) scale(1.05);
}
.cat-video__play svg {
  display: block;
  margin-left: 4px;
}
.cat-video__title {
  position: absolute;
  left: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 2;
  font-family: var(--font-display);
  font-weight: var(--peso-light);
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.15;
  color: var(--color-foam);
  letter-spacing: -0.01em;
  max-width: 18ch;
}
.cat-video__duration {
  position: absolute;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 2;
  font-family: var(--font-display);
  font-weight: var(--peso-med);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--color-foam);
  opacity: 0.85;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cat-video::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(24, 35, 49, 0.10) 30%, rgba(24, 35, 49, 0.65) 100%);
}

/* =========================================================
   DRONE · grid 2-col aspect 16:9
   ========================================================= */
.cat-drone-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2vw, 40px);
}
.cat-drone {
  position: relative;
  overflow: hidden;
  background: var(--color-tinta);
  cursor: pointer;
  aspect-ratio: 16 / 9;
}
.cat-drone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1600ms var(--ease-premium), filter var(--dur-hover) var(--ease-premium);
  filter: saturate(0.94);
}
.cat-drone:hover img { transform: scale(1.03); filter: saturate(1.04); }
.cat-drone__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(24, 35, 49, 0.10) 35%, rgba(24, 35, 49, 0.78) 100%);
}
.cat-drone__content {
  position: absolute;
  left: var(--sp-5);
  bottom: var(--sp-5);
  right: var(--sp-5);
  z-index: 2;
  color: var(--color-foam);
}
.cat-drone__meta {
  font-family: var(--font-display);
  font-weight: var(--peso-med);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-foam);
  opacity: 0.85;
  margin-bottom: var(--sp-2);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.cat-drone__title {
  font-family: var(--font-display);
  font-weight: var(--peso-light);
  font-size: clamp(20px, 1.8vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--color-foam);
  max-width: 22ch;
}

/* =========================================================
   CTA inter-categoría
   ========================================================= */
/* Barra fina · arena-densa con letras tinta y acento marina (azul).
   Sirve como transición cromática entre el contenido (tinta/arena-soft)
   y el footer (tinta). Una sola línea de texto + botón outline.
   Total alto ~ 70-90px desktop. Misma barra para categorías Y para
   busca-tu-foto (reusan template-parts/category-render + views.php). */
.cat-cta-bottom {
  background: var(--color-arena-densa);
  color: var(--color-tinta);
  padding-block: clamp(14px, 1.8vw, 22px);
}
.cat-cta-bottom__inner {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  flex-wrap: wrap;
}
.cat-cta-bottom__text {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: clamp(8px, 1vw, 16px);
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
}
.cat-cta-bottom__title {
  font-family: var(--font-display);
  font-weight: var(--peso-light);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--color-tinta);
  margin: 0;
}
.cat-cta-bottom__title em {
  font-style: italic;
  color: var(--color-marina);
  font-weight: var(--peso-med);
}
.cat-cta-bottom__lead {
  font-family: var(--font-body);
  font-weight: var(--peso-light);
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.4;
  color: var(--color-tinta);
  opacity: 0.7;
  margin: 0;
  max-width: 60ch;
}
.cat-cta-bottom .btn {
  flex-shrink: 0;
  /* Override del btn--ghost (que es para fondos oscuros) → outline tinta sobre arena */
  --btn-fg: var(--color-tinta);
  --btn-bd: var(--color-tinta);
  --btn-bg: transparent;
  padding: 8px 18px;
  font-size: 11px;
  min-height: 36px;
}
.cat-cta-bottom .btn:hover {
  --btn-bg: var(--color-tinta);
  --btn-fg: var(--color-arena-densa);
  --btn-bd: var(--color-tinta);
}
@media (max-width: 720px) {
  .cat-cta-bottom__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .cat-cta-bottom__text {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px) {
  .cat-photo-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 880px) {
  .cat-types__intro { grid-template-columns: 1fr; gap: var(--sp-4); align-items: stretch; }
  .cat-types__intro-lead { justify-self: start; }
  .cat-video-grid { grid-template-columns: 1fr; }
  .cat-video__play { width: 64px; height: 64px; }
  .cat-drone-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .cat-photo-grid { grid-template-columns: 1fr; }
  .cat-slider-nav { display: none; }
  .cat-slider-controls { justify-content: center; }
}