/* ==========================================================================
   GEEKU · LANDINGS DE FOTOGRAFÍA Y 360°
   --------------------------------------------------------------------------
   Estilos que usan solo /fotografia-profesional/ y
   /fotos-360-y-recorridos-virtuales/. Se cargan después de styles.css
   (usan sus variables de color y tipografía).

   1. HERO CON FOTOS
   2. "PARA QUIÉN" (rubros)
   3. GALERÍA DE FOTOS + FILTRO
   4. CASILLAS "PRÓXIMAMENTE" (fotos todavía no subidas)
   5. VISOR DE FOTOS (lightbox)
   6. GALERÍA 360° + VISOR 360°
   7. FOTO 360° vs RECORRIDO VIRTUAL
   8. CONSEJOS / LISTA NUMERADA
   9. RESPONSIVE
   ========================================================================== */


/* ---------- 1. HERO ---------- */
.foto-hero .page-hero__grid { grid-template-columns: 1.05fr .95fr; }
/* Collage de 3 fotos en el hero (usa las 3 primeras de la galería) */
.hero-collage { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; aspect-ratio: 1 / .9; }
.hero-collage > * { position: relative; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.hero-collage > .badge-360 { position: absolute; overflow: visible; border-radius: 50%; }
.hero-collage > *:first-child { grid-row: span 2; }
.hero-collage img { width: 100%; height: 100%; object-fit: cover; }
.hero-collage .is-empty { min-height: 120px; }

/* Insignia 360° que gira sobre el hero de la landing 360 */
.badge-360 {
  position: absolute; right: -10px; bottom: -14px; z-index: 2;
  width: 108px; height: 108px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  background: var(--ink); color: #fff; box-shadow: var(--shadow);
  font: 700 1.5rem/1 var(--font-title);
}
.badge-360 small { display: block; font: 500 .7rem var(--font-body); color: var(--cyan); margin-top: 4px; letter-spacing: .06em; text-transform: uppercase; }
.badge-360::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px dashed var(--cyan); animation: spin 14s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ---------- 2. PARA QUIÉN ---------- */
.rubros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rubro { padding: 28px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.rubro h3 { margin-bottom: 8px; }
.rubro p { color: var(--muted); font-size: .98rem; }
.rubro ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.rubro li { padding: 4px 10px; border-radius: 999px; background: var(--cyan-50); color: var(--cyan-600); font: 500 .8rem var(--font-title); }


/* ---------- 3. GALERÍA DE FOTOS ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; grid-auto-flow: dense; gap: 12px; }
.g-item {
  position: relative; display: block; overflow: hidden; border-radius: 14px;
  background: var(--bg-soft); cursor: zoom-in;
}
.g-item--wide { grid-column: span 2; }   /* foto horizontal grande */
.g-item--tall { grid-row: span 2; }      /* foto vertical */
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.g-item:hover img { transform: scale(1.05); }
/* Texto que aparece al pasar el mouse */
.g-item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px;
  background: linear-gradient(transparent, rgba(11,27,43,.75)); color: #fff; font-size: .9rem;
  opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s var(--ease);
}
.g-item:hover figcaption, .g-item:focus-visible figcaption { opacity: 1; transform: none; }
.g-item[hidden] { display: none; }


/* ---------- 4. CASILLAS "PRÓXIMAMENTE" ----------
   Si una foto todavía no está subida, en vez de una imagen rota se ve
   esta casilla prolija. Cuando subís el archivo, aparece la foto sola. */
.is-empty {
  cursor: default;
  background:
    radial-gradient(circle at 30% 20%, rgba(0,180,232,.18), transparent 60%),
    linear-gradient(135deg, #eaf5fb, #f6fafd);
  border: 1px dashed #c6e3f0;
}
.is-empty::after {
  content: attr(data-placeholder);
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 16px;
  font: 600 .95rem var(--font-title); color: var(--cyan-600);
}
.is-empty figcaption { display: none; }


/* ---------- 5. VISOR DE FOTOS (lightbox) ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  padding: 60px 70px; background: rgba(6,14,22,.94);
}
.lightbox[hidden] { display: none; }
.lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lightbox__figure img { max-width: 100%; max-height: calc(100vh - 150px); border-radius: 10px; object-fit: contain; }
.lightbox__figure figcaption { color: #c9d6e2; font-size: .95rem; text-align: center; }
.lightbox__close, .lightbox__nav {
  position: absolute; border: 0; cursor: pointer; color: #fff; background: rgba(255,255,255,.1);
  width: 48px; height: 48px; border-radius: 50%; font-size: 2rem; line-height: 1;
  display: grid; place-items: center; transition: background-color .2s;
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,.22); }
.lightbox__close { top: 14px; right: 14px; }
.lightbox__nav--prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 14px; top: 50%; transform: translateY(-50%); }


/* ---------- 6. GALERÍA 360° ---------- */
.panos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.p-item {
  position: relative; display: block; overflow: hidden; border-radius: 18px; aspect-ratio: 4 / 3;
  background: var(--ink); color: #fff; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.p-item:hover { transform: translateY(-5px); box-shadow: var(--shadow); color: #fff; }
.p-item img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: transform .8s var(--ease), opacity .3s; }
.p-item:hover img { transform: scale(1.06); opacity: 1; }
.p-item__info {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px;
  background: linear-gradient(transparent, rgba(11,27,43,.85));
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
}
.p-item__info strong { font-family: var(--font-title); font-size: 1.05rem; display: block; color: #fff; }
.p-item__info small { color: #b9cad8; }
.p-item__play {
  flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--cyan); color: var(--ink); font: 700 .8rem var(--font-title);
}
/* Casilla 360 sin foto todavía */
.p-item.is-empty { background: linear-gradient(135deg, var(--ink), #16324a); border: 0; }
.p-item.is-empty::after { content: none; }
.p-item.is-empty::before {
  content: "360°"; position: absolute; inset: 0 0 30px; display: grid; place-items: center;
  font: 700 3rem var(--font-title); color: rgba(0,180,232,.35);
}

/* Ventana del visor 360° */
.pano-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(6,14,22,.9); }
.pano-modal[hidden] { display: none; }
.pano-modal__box { width: min(1100px, 100%); background: var(--ink); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.pano-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 20px; color: #fff; font-family: var(--font-title); }
.pano-modal__close { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; font-size: 1.6rem; cursor: pointer; }
.pano-modal__close:hover { background: rgba(255,255,255,.22); }
.pano-modal__stage { position: relative; width: 100%; height: min(70vh, 620px); background: #000; }
.pano-modal__stage iframe { width: 100%; height: 100%; border: 0; display: block; }
.pano-modal__hint { margin: 0; padding: 10px 20px 14px; color: #9fb3c6; font-size: .88rem; text-align: center; }
.pano-modal__loading, .pano-modal__soon { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 8px; color: #c9d6e2; text-align: center; padding: 20px; }
.pano-modal__soon span { font: 700 3.5rem var(--font-title); color: var(--cyan); }


/* ---------- 7. FOTO 360° vs RECORRIDO VIRTUAL ---------- */
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.versus__col { padding: 32px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.versus__col--dark { background: var(--ink); border-color: var(--ink); color: #c9d6e2; }
.versus__col--dark h3, .versus__col--dark strong { color: #fff; }
.versus__tag { display: inline-block; margin-bottom: 14px; padding: 4px 12px; border-radius: 999px; background: var(--cyan-50); color: var(--cyan-600); font: 600 .78rem var(--font-title); letter-spacing: .05em; text-transform: uppercase; }
.versus__col--dark .versus__tag { background: rgba(0,180,232,.18); color: var(--cyan); }
.versus__col .checks { margin-top: 18px; }


/* ---------- 8. CONSEJOS (lista numerada) ---------- */
.tips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 32px; counter-reset: tip; max-width: 980px; margin: 0 auto; }
.tips li { counter-increment: tip; display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; }
.tips li::before {
  content: counter(tip); width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--cyan-50); color: var(--cyan-600); font: 700 1.1rem var(--font-title);
}
.tips strong { display: block; margin-bottom: 2px; }
.tips span { color: var(--muted); font-size: .97rem; }


/* ---------- 9. RESPONSIVE ---------- */
@media (max-width: 1080px) {
  .gallery { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 190px; }
}
@media (max-width: 900px) {
  .foto-hero .page-hero__grid { grid-template-columns: 1fr; }
  .foto-hero .page-hero__art { display: none; }
  .hero-collage { max-width: 560px; width: 100%; margin: 8px auto 0; }
  .rubros, .panos { grid-template-columns: 1fr 1fr; }
  .versus, .tips { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 8px; }
  .g-item--wide { grid-column: span 2; }
  .rubros, .panos { grid-template-columns: 1fr; }
  .versus__col { padding: 24px 20px; }
  .lightbox { padding: 60px 12px; }
  .lightbox__nav { top: auto; bottom: 16px; transform: none; }
  .badge-360 { width: 84px; height: 84px; font-size: 1.2rem; right: 4px; }
  .pano-modal { padding: 0; }
  .pano-modal__box { border-radius: 0; height: 100%; display: flex; flex-direction: column; }
  .pano-modal__stage { flex: 1; height: auto; }
}
.pano-modal__head strong { color: #fff; font-size: 1.05rem; }


/* ---------- 10. LANDINGS POR RUBRO ---------- */
/* Etiquetas de rubros debajo de los botones del hero */
.rubro-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.rubro-tags li { padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font: 500 .85rem var(--font-title); color: var(--ink); }

/* Tarjetas de rubro clickeables en /fotografia-profesional/ */
.rubro.card--link { position: relative; display: flex; flex-direction: column; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.rubro.card--link:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.rubro .link-arrow { margin-top: 16px; }

/* Banda de foto32 en las landings de eventos */
.foto32-band {
  display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; align-items: center;
  padding: clamp(28px, 5vw, 56px); border-radius: 28px;
  background: linear-gradient(135deg, #fff7f0, #fff); border: 1px solid #ffe0c7;
}
.foto32-band__logo { width: 100%; max-width: 340px; justify-self: center; }
.foto32-band .eyebrow { color: #e05a00; }
.foto32-band .checks { margin: 18px 0 0; }
.foto32-band .checks li::before { background-color: #ffe7d4; }
@media (max-width: 900px) {
  .foto32-band { grid-template-columns: 1fr; gap: 24px; text-align: left; }
  .foto32-band__logo { max-width: 240px; justify-self: start; }
}
/* Galería de las landings por rubro: grilla pareja, sin huecos */
.gallery--rubro { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 240px; }   /* 6 fotos = 3 x 2 */
.gallery--rubro .g-item--wide, .gallery--rubro .g-item--tall { grid-column: auto; grid-row: auto; }
@media (max-width: 600px) {
  .gallery--rubro { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; }
}
/* Rubros con 8 fotos: 4 columnas (4 x 2) */
.gallery--rubro.gallery--4 { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; }
@media (max-width: 900px) { .gallery--rubro.gallery--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .gallery--rubro.gallery--4 { grid-auto-rows: 160px; } }
/* Rubros en /fotografia-profesional/: 5 tarjetas → 3 + 2 centradas */
.rubros { display: flex; flex-wrap: wrap; justify-content: center; }
.rubros > .rubro { flex: 0 1 calc((100% - 40px) / 3); }
@media (max-width: 900px) { .rubros > .rubro { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 600px) { .rubros > .rubro { flex-basis: 100%; } }
/* Rubros con 7 fotos: la primera ocupa 2 columnas (2+1, 3, 3) */
.gallery--rubro.gallery--7 > .g-item:first-child { grid-column: span 2; }
.gallery--rubro.gallery--7 > .g-item:last-child { grid-column: span 2; }   /* 2+1, 3, 1+2: sin huecos */
.gallery--rubro.gallery--7 > .g-item:last-child img { object-position: center 25%; }
@media (max-width: 900px) { .gallery--rubro.gallery--7 > .g-item:last-child { grid-column: auto; } }
/* Fotos verticales (--tall): encuadre arriba para no cortar caras */
.g-item--tall img { object-position: center 12%; }