/* ============================================================
   Hero — foto real del estudio a sangre, degradado a negro (sin caja, sin corte)
   ============================================================ */
.inicio-hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: clip;   /* clip, no hidden: hidden crea scroll container y rompe view() */
}
.inicio-hero-media {
  background-position: 50% 45%;
  /* La foto real del interior es luminosa y muy a color; desaturada se integra al
     negro+dorado sin dejar de leerse como foto real del lugar. */
  filter: saturate(.42) contrast(1.06) brightness(1.02);
  /* Dos animaciones, dos relojes: el zoom corre en tiempo, la deriva la manda el
     scroll. El zoom usa `scale` y la deriva `translate` — propiedades distintas, no
     se pisan (por eso ninguna de las dos usa `transform`). */
  animation: inicio-hero-zoom 32s var(--ease-out) infinite alternate;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .inicio-hero-media {
      animation: inicio-hero-zoom 32s var(--ease-out) infinite alternate,
                 parallax-deriva linear both;
      animation-timeline: auto, view();
    }
  }
}
@keyframes inicio-hero-zoom {
  from { scale: 1; }
  to { scale: 1.08; }
}
.inicio-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 5, 5, .72) 0%, rgba(5, 5, 5, .55) 30%, rgba(5, 5, 5, .8) 72%, var(--color-bg) 100%),
    linear-gradient(90deg, rgba(5, 5, 5, .6) 0%, transparent 40%, transparent 60%, rgba(5, 5, 5, .6) 100%);
}
.inicio-hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-8) var(--space-5) var(--space-5);
  text-align: center;
}
/* El wordmark es PNG con transparencia real (lettering blanco + dorado). NO lleva
   mix-blend-mode: el `screen` de antes existía solo para matar el fondo negro del
   recorte viejo, y sobre un PNG limpio lava el dorado contra la foto. */
.inicio-hero-wordmark {
  width: min(400px, 76vw);
  height: auto;
  margin: 0 auto var(--space-4);
  animation: fade-in var(--duration-reveal-lento) var(--ease-out) backwards;
}
.inicio-hero h1 {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-3);
  text-wrap: balance;
  animation: fade-in-up var(--duration-reveal) var(--ease-out) 160ms backwards;
}
.inicio-hero-content p {
  max-width: 54ch;
  margin: 0 auto var(--space-5);
  color: var(--color-text-muted);
  animation: fade-in-up var(--duration-reveal) var(--ease-out) 300ms backwards;
}
.inicio-hero-content .actions {
  justify-content: center;
  animation: fade-in-up var(--duration-reveal) var(--ease-out) 440ms backwards;
}
.inicio-hero-trust {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3) var(--space-6);
  padding: 0 var(--space-5) var(--space-8);
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-gold);
  animation: fade-in-up var(--duration-reveal) var(--ease-out) 600ms backwards;
}
.inicio-hero-trust > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.inicio-hero-trust > span + span::before {
  content: '';
  width: 4px;
  height: 4px;
  rotate: 45deg;
  background: currentColor;
  opacity: .6;
  margin-right: var(--space-4);
}

/* Indicador de scroll — línea dorada que baja en bucle */
.inicio-hero-scroll {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  translate: -50% 0;
  z-index: 2;
  width: 22px;
  height: 34px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.inicio-hero-scroll span {
  width: 2px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--color-gold);
  animation: inicio-scroll-hint 1.8s var(--ease-out) infinite;
}
@keyframes inicio-scroll-hint {
  0% { opacity: 0; transform: translateY(-4px); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateY(12px); }
}

@media (max-width: 640px) {
  .inicio-hero { min-height: 78vh; }
  .inicio-hero h1 { font-size: var(--text-3xl); }
  .inicio-hero-trust > span + span::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .inicio-hero-media { animation: none; }
  .inicio-hero-scroll span { animation: none; }
}

/* ============================================================
   Barra de estilos — iconos propios sobre fondo continuo
   ============================================================ */
.inicio-estilos {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-7) var(--space-5) var(--space-6);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
}
.inicio-estilo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-3);
  border-radius: var(--radius-md);
  text-align: center;
  transition: transform var(--duration-base) var(--ease-out);
}
.inicio-estilo:hover { transform: translateY(-4px); }
.inicio-estilo:hover .sitio-icono { transform: scale(1.12) rotate(-4deg); color: var(--color-gold-bright); }
.inicio-estilo h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}
.inicio-estilo:hover h3 { color: var(--color-text); }

/* ============================================================
   Por qué INKaholic — tarjetas partidas texto | panel de icono
   ============================================================ */
.inicio-porque-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
@media (max-width: 640px) {
  .inicio-porque-grid { grid-template-columns: 1fr; }
}
.inicio-porque {
  display: grid;
  grid-template-columns: 1fr 96px;
  align-items: center;
  gap: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-top-color: rgba(232, 201, 109, .22);
  box-shadow: var(--shadow-md), var(--edge-top);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.inicio-porque:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lg), var(--glow-gold-sm), var(--edge-top);
}
.inicio-porque-texto { padding: var(--space-5) 0 var(--space-5) var(--space-5); }
.inicio-porque-texto h3 { margin-bottom: var(--space-2); }
.inicio-porque-texto p { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }
.inicio-porque-icono {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--tint-gold-2), transparent 70%), var(--color-surface-sunken);
  border-left: 1px solid var(--color-border);
}
.inicio-porque.invertida { grid-template-columns: 96px 1fr; }
.inicio-porque.invertida .inicio-porque-icono { border-left: 0; border-right: 1px solid var(--color-border); }
.inicio-porque.invertida .inicio-porque-texto { padding: var(--space-5) var(--space-5) var(--space-5) 0; }
.inicio-porque:hover .sitio-icono { transform: scale(1.1) rotate(4deg); color: var(--color-gold-bright); }

@media (max-width: 480px) {
  /* El panel del icono se angosta para no comerle renglones al texto */
  .inicio-porque { grid-template-columns: 1fr 72px; }
  .inicio-porque.invertida { grid-template-columns: 72px 1fr; }
  .inicio-porque-texto { padding: var(--space-4) 0 var(--space-4) var(--space-4); }
  .inicio-porque.invertida .inicio-porque-texto { padding: var(--space-4) var(--space-4) var(--space-4) 0; }
  .inicio-porque .sitio-icono-lg { width: 34px; height: 34px; }
}

/* ============================================================
   El estudio — collage de fotos reales + datos
   ============================================================ */
.inicio-estudio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
.inicio-estudio-collage { margin-bottom: var(--space-7); }
.inicio-datos {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.inicio-datos li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.inicio-datos .sitio-icono { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; }

@media (max-width: 900px) {
  .inicio-estudio { grid-template-columns: 1fr; gap: var(--space-7); }
  .inicio-estudio-collage { margin-bottom: var(--space-8); }
}

/* ============================================================
   Portafolio destacado — mosaico con etiqueta y destello
   ============================================================ */
/* Bento: la primera pieza manda (2x2) y las otras cuatro la rodean — jerarquía en vez
   de una rejilla uniforme, que es lo que hacía ver la sección plana. */
.inicio-portafolio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.inicio-portafolio-card {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  isolation: isolate;
}
.inicio-portafolio-card:first-child {
  grid-column: span 2;
  grid-row: span 2;
}
@media (max-width: 860px) {
  .inicio-portafolio-grid { grid-template-columns: repeat(2, 1fr); }
  .inicio-portafolio-card:first-child { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 11; }
}
.inicio-portafolio-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out), filter var(--duration-slow) var(--ease-out);
}
.inicio-portafolio-card:hover img { transform: scale(1.07); filter: saturate(1.15); }
/* El degradado es de la TARJETA, no de la etiqueta. Iba en la etiqueta, y como al hover
   la etiqueta sube 4px se llevaba su sombra con ella y destapaba una franja de foto
   cruda contra el borde inferior. Anclado aquí, el texto se mueve y la sombra no. */
.inicio-portafolio-card::after {
  content: '';
  position: absolute;
  inset: 40% 0 0 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .88));
}
.inicio-portafolio-card-label {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--space-6) var(--space-4) var(--space-4);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  transition: transform var(--duration-base) var(--ease-out);
}
.inicio-portafolio-card-label::after {
  content: '';
  display: block;
  width: 34px;
  height: 2px;
  margin-top: var(--space-2);
  background: var(--rule-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}
.inicio-portafolio-card:hover .inicio-portafolio-card-label { transform: translateY(-4px); }
.inicio-portafolio-card:hover .inicio-portafolio-card-label::after { transform: scaleX(1); }

.inicio-centro { text-align: center; }

/* ============================================================
   Equipo — marco ornamental sobre la foto
   ============================================================ */
.equipo-card .sitio-marco { display: block; margin-bottom: var(--space-4); }
.equipo-card .sitio-marco img, .equipo-card .sitio-marco .equipo-foto-placeholder { margin-bottom: 0; }

/* ============================================================
   Testimonios sobre foto de fondo a sangre
   ============================================================ */
.inicio-testimonios {
  position: relative;
  overflow: clip;   /* clip, no hidden: hidden crea scroll container y rompe view() */
  margin-top: var(--space-7);
}
.inicio-testimonios-foto {
  filter: saturate(.25) brightness(.5);
}
.inicio-testimonios::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, var(--color-bg) 0%, rgba(5, 5, 5, .88) 30%, rgba(5, 5, 5, .88) 70%, var(--color-bg) 100%);
}
.inicio-testimonios-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
}
.inicio-testimonios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}
.inicio-testimonio {
  position: relative;
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-lg);
  background: rgba(14, 14, 14, .72);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-border-soft);
  border-top-color: rgba(232, 201, 109, .22);
  transition: transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.inicio-testimonio:hover { transform: translateY(-3px); border-color: var(--color-border-strong); }
.inicio-testimonio-estrellas { color: var(--color-gold); letter-spacing: .14em; margin-bottom: var(--space-3); }
.inicio-testimonio blockquote {
  margin: 0 0 var(--space-4);
  font-style: italic;
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1.7;
}
.inicio-testimonio footer {
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-faint);
}

/* ============================================================
   CTA final — se funde con degradado, sin línea dura
   ============================================================ */
.inicio-cta-final {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  background: linear-gradient(180deg, transparent, var(--tint-gold-1) 45%, var(--tint-gold-2));
}
.inicio-cta-final h2 { font-size: var(--text-2xl); }
.inicio-cta-final > div > p { max-width: 52ch; margin: 0 auto var(--space-5); color: var(--color-text-muted); }
.inicio-cta-acciones { justify-content: center; margin-bottom: var(--space-5); }
.inicio-cta-contacto { font-size: var(--text-sm); color: var(--color-text-faint); }