/* =========================================================================
   FIGUEROA DIGITAL — layout.css
   Estructura de cada región de la página (navbar, hero, secciones y sus
   grids). Es "layout", no "componente": lo de aquí no se reutiliza fuera
   de su sección. Para piezas de UI reutilizables ver components.css.
   ========================================================================= */

/* ---------- NAVBAR ------------------------------------------------------ */
.navbar {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 200;
  padding-block: var(--space-sm); background: transparent;
  transition: background var(--dur-fast) var(--ease), backdrop-filter var(--dur-fast) var(--ease),
    padding var(--dur-fast) var(--ease);
}
.navbar--scrolled {
  background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(15px);
  padding-block: 0.6rem;
}
.navbar__inner { display: flex; align-items: center; justify-content: space-between; }
.navbar__logo-img { height: 34px; filter: brightness(0) invert(1); }
.navbar__links { display: flex; align-items: center; gap: var(--space-md); }
/* :not(.btn) es a proposito: sin esto, esta regla le gana en especificidad
   a .btn--solid (mismo empate en clases, pero esta suma un selector de
   elemento "a") y pinta de blanco el texto del boton de WhatsApp sobre su
   propio fondo blanco -- invisible. Ver componente .btn en components.css. */
.navbar__links a:not(.btn) {
  font-family: var(--font-heading); font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-white);
  position: relative; padding-block: 0.25rem;
}
.navbar__links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--c-white); transition: width var(--dur-fast) var(--ease);
}
.navbar__links a:not(.btn):hover::after { width: 100%; }
.navbar__cta.btn { padding: 0.65rem 1.4rem; font-size: 0.7rem; }
.navbar__toggle { display: none; flex-direction: column; gap: 5px; z-index: 210; }
.navbar__toggle span { width: 24px; height: 2px; background: var(--c-white); transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.navbar__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navbar__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- HERO ---------------------------------------------------------- */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; color: var(--c-white); }
.hero__carousel { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0; opacity: 0; z-index: 1;
  transition: opacity var(--dur-slide) var(--ease);
}
.hero__slide.is-active { opacity: 1; z-index: 2; }
.hero__slide-img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1); transition: transform 4.5s linear;
}
.hero__slide.is-active .hero__slide-img { transform: scale(1.06); }
.hero__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); }
.hero__content {
  position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: var(--space-sm);
  padding-inline: var(--container-pad);
}
.hero__logo {
  width: min(560px, 80vw); height: auto; filter: brightness(0) invert(1);
  opacity: 0; transform: translateY(25px);
  transition: opacity var(--dur-slide) var(--ease) 0.2s, transform var(--dur-slide) var(--ease) 0.2s;
}
.hero__subtitle {
  font-family: var(--font-body); font-style: italic; font-size: 1.1rem; color: var(--c-gray-light);
  opacity: 0; transform: translateY(25px); transition: opacity var(--dur-slide) var(--ease) 0.45s, transform var(--dur-slide) var(--ease) 0.45s;
}
.hero__cta {
  display: flex; gap: var(--space-sm); margin-top: var(--space-sm); flex-wrap: wrap; justify-content: center;
  opacity: 0; transform: translateY(25px); transition: opacity var(--dur-slide) var(--ease) 0.6s, transform var(--dur-slide) var(--ease) 0.6s;
}
.hero.is-ready .hero__logo,
.hero.is-ready .hero__subtitle,
.hero.is-ready .hero__cta { opacity: 1; transform: translateY(0); }
.hero__scroll-cue {
  position: absolute; bottom: var(--space-md); left: 50%; transform: translateX(-50%);
  z-index: 3; width: 1px; height: 40px; background: rgba(255, 255, 255, 0.5);
}
.hero__scroll-cue::after {
  content: ""; position: absolute; top: 0; left: -2px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--c-white); animation: scroll-cue 2s var(--ease) infinite;
}

/* ---------- SECCIONES GENERALES ------------------------------------------ */
section { padding-block: var(--space-xl); }
.section-header { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: var(--space-lg); }
.section-header__eyebrow { display: flex; align-items: center; gap: 1rem; }
.section-header__eyebrow::before { content: ""; width: 40px; height: 1px; background: currentColor; }

/* ---------- INTRO / MARQUEE ---------------------------------------------- */
.intro { padding-block: var(--space-xl); text-align: center; }
.intro__logo {
  width: min(420px, 70vw); height: auto; margin-inline: auto;
  filter: brightness(0) invert(1); /* fuerza a blanco, igual que hero__logo/navbar__logo-img */
}

/* ---------- GRIDS DE SECCIÓN (estructura, no la tarjeta en sí) ------------ */
/* Default = escritorio: cards grandes (~1600x900, 16:9 horizontal) para que
   casi llenen la pantalla, como pidio Papi. En tablet/mobile (<=1024px)
   responsive.css regresa el tamano chico de siempre -- ese rango ya se veia
   perfecto, no se toca. */
.services__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(1600px, 100%), 1600px));
  justify-content: center; gap: var(--space-md);
}
.packages__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.portfolio__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: var(--space-xs);
}
.process__grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(4, 1fr); }

/* ---------- ABOUT ------------------------------------------------------------ */
.about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: center; }
.about__img { aspect-ratio: 4 / 5; overflow: hidden; }
.about__img img { width: 100%; height: 100%; object-fit: cover; }
.about__text .section-title { margin-bottom: var(--space-sm); }

/* ---------- CTA FINAL ---------------------------------------------------------- */
.cta-final { text-align: center; padding-block: 10rem; }
.cta-final__title { font-size: clamp(2.4rem, 7vw, 5rem); text-transform: uppercase; }
.cta-final__subtitle { margin-top: var(--space-sm); color: rgba(255, 255, 255, 0.65); }
.cta-final .btn { margin-top: var(--space-lg); }

/* ---------- FOOTER ---------------------------------------------------------- */
.footer { background: var(--c-black); color: var(--c-gray-light); padding-block: var(--space-lg) var(--space-md); }
.footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-lg); }
.footer__logo-img { height: 30px; filter: brightness(0) invert(1); margin-bottom: var(--space-sm); }
.footer__tagline { color: var(--c-gray-mid); max-width: 32ch; }
.footer__heading { font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; font-size: 0.75rem; color: var(--c-gray-mid); margin-bottom: 1rem; }
.footer__links { display: flex; flex-direction: column; gap: 0.6rem; }
.footer__links a:hover { color: var(--c-white); }
.footer__social { display: flex; gap: 0.75rem; margin-top: var(--space-sm); }
.footer__social a { width: 34px; height: 34px; border: var(--border-thin); display: grid; place-items: center; border-radius: 50%; }
.footer__bottom {
  margin-top: var(--space-lg); padding-top: var(--space-sm); border-top: var(--border-thin);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: 0.8rem; color: var(--c-gray-mid);
}