/* ==========================================================================
   PAMM CLEAN · sections.css
   Maquetación de cada bloque de la página, en orden de aparición.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Contenedor genérico de sección
   -------------------------------------------------------------------------- */
.section {
  max-width: var(--w-wide);
  margin-inline: auto;
  padding: var(--sp-section) var(--sp-gutter);
}

.section__head {
  max-width: 45rem;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__title { font-size: var(--fs-h2); }

.section__title--sm {
  font-size: var(--fs-h2-sm);
  line-height: 1.08;
  margin-bottom: var(--sp-6);
}

.section__head .section__title { margin-bottom: var(--sp-5); }

.section__lead {
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--c-text-muted);
}

.section__head--center .section__lead { margin-inline: auto; max-width: 40rem; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
/* Descuenta el banner: si no, el hero mide una pantalla entera y su parte baja
   (el CTA) queda siempre fuera de vista. `--promo-h` lo mantiene navbar.js. */
.hero {
  --hero-nav-clearance: 1rem;

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100svh - var(--promo-h, 0px));
  overflow: hidden;
  background: var(--c-bg) center / cover no-repeat;

  /* Primera línea: respaldo para navegadores sin `image-set()`.
     Segunda: el navegador elige WebP si lo soporta. */
  background-image: url("../img/hero/hero-poster-960.jpg");
  background-image: image-set(
    url("../img/hero/hero-poster-960.webp") type("image/webp"),
    url("../img/hero/hero-poster-960.jpg") type("image/jpeg")
  );
}

/* El póster grande solo donde hay pantalla que lo justifique. */
@media (min-width: 64em) {
  .hero {
    background-image: url("../img/hero/hero-poster-1920.jpg");
    background-image: image-set(
      url("../img/hero/hero-poster-1920.webp") type("image/webp"),
      url("../img/hero/hero-poster-1920.jpg") type("image/jpeg")
    );
  }
}

.hero__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sin vídeo cargado el elemento queda vacío: lo ocultamos y manda el fondo */
.hero__video:not([src]):not(:has(source)) { display: none; }

.hero__scrim,
.hero__vignette,
.hero__fade {
  position: absolute;
  pointer-events: none;
}

.hero__scrim {
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgb(10 24 38 / 0.55) 0%, rgb(10 24 38 / 0.42) 40%, rgb(10 24 38 / 0.72) 100%);
}

.hero__vignette {
  inset: 0;
  z-index: 1;
  background: radial-gradient(120% 90% at 50% 50%, rgb(10 24 38 / 0) 40%, rgb(10 24 38 / 0.55) 100%);
}

.hero__fade {
  left: 0;
  right: 0;
  bottom: 0;
  height: 11.25rem;
  z-index: 2;
  background: linear-gradient(to top, var(--c-bg) 0%, rgb(10 24 38 / 0) 100%);
}

/* Partículas de polvo en suspensión */
.hero__dust {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.hero__dust span {
  position: absolute;
  border-radius: 50%;
  background: rgb(244 248 251 / 0.7);
}

.hero__dust span:nth-child(1) { left: 18%; top: 70%; width: 4px; height: 4px; animation: dust-drift 9s ease-in-out infinite; }
.hero__dust span:nth-child(2) { left: 34%; top: 80%; width: 3px; height: 3px; background: rgb(168 217 138 / 0.7); animation: dust-drift 11s ease-in-out 1.5s infinite; }
.hero__dust span:nth-child(3) { left: 62%; top: 75%; width: 5px; height: 5px; opacity: 0.85; animation: dust-drift 12s ease-in-out 0.8s infinite; }
.hero__dust span:nth-child(4) { left: 78%; top: 85%; width: 3px; height: 3px; opacity: 0.85; animation: dust-drift 10s ease-in-out 2.2s infinite; }
.hero__dust span:nth-child(5) { left: 48%; top: 88%; width: 4px; height: 4px; background: rgb(168 217 138 / 0.6); animation: dust-drift 13s ease-in-out 3s infinite; }

/* El relleno inferior extra en móvil sube el contenido lo justo para que el botón
   flotante de WhatsApp no se siente encima del CTA principal del hero. */
.hero__content {
  position: relative;
  z-index: 5;
  max-width: 57.5rem;
  padding: calc(5rem + var(--hero-nav-clearance)) var(--sp-gutter)
    calc(6.5rem - var(--hero-nav-clearance));
  text-align: center;
}

@media (min-width: 48em) {
  .hero { --hero-nav-clearance: 3rem; }

  /* Relleno contenido para que el bloque quepa dentro del hero en alturas de
     portátil y no invada la zona del indicador de scroll. */
  .hero__content {
    padding: calc(4.5rem + var(--hero-nav-clearance)) var(--sp-gutter)
      calc(3rem - var(--hero-nav-clearance));
  }
}

.hero__eyebrow {
  font-size: 0.8125rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-brand-soft);
  margin-bottom: var(--sp-4);
}

.hero__title {
  font-size: var(--fs-h1);
  line-height: 1.02;
  margin-bottom: var(--sp-6);
}

.hero__sub {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--c-text-soft);
  max-width: 38.75rem;
  margin: 0 auto var(--sp-8);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  justify-content: center;
}

.hero__cta .btn { padding: 1rem 1.875rem; }

/* Fluye debajo del contenido (no anclado al fondo): así nunca se monta sobre el
   botón, sea cual sea la altura de la pantalla. El hero, en columna, centra el
   conjunto contenido + indicador. */
.hero__scroll {
  position: relative;
  z-index: 5;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-top: clamp(1.5rem, 4vh, 2.75rem);
}

.hero__scroll-label {
  font-size: 0.6875rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.hero__scroll-line {
  position: relative;
  display: block;
  width: 1px;
  height: 2.5rem;
  background: rgb(140 163 184 / 0.3);
  overflow: hidden;
}

.hero__scroll-line span {
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  background: linear-gradient(180deg, var(--c-brand), transparent);
  animation: scroll-line 1.7s ease-in-out infinite;
}

@media (min-width: 48em) {
  .hero__eyebrow { margin-bottom: var(--sp-6); }
  .hero__sub { margin-bottom: var(--sp-6); }
}

@media (min-width: 48em) {
  .hero__scroll { display: flex; }
}

/* --------------------------------------------------------------------------
   Franja de confianza
   -------------------------------------------------------------------------- */
.trust-strip {
  background: var(--c-surface-alt);
  border-block: 1px solid var(--c-line);
}

.trust-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.875rem 1.625rem;
  max-width: var(--w-content);
  margin-inline: auto;
  padding: 1.375rem var(--sp-gutter);
}

.trust-strip__lead {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-brand);
}

.trust-strip__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.625rem;
  color: var(--c-text-soft);
  font-size: var(--fs-base);
}

/* Separadores "·" entre elementos, sin añadir marcado */
.trust-strip__list li + li::before {
  content: "·";
  color: #3a5570;
  margin-right: 1.625rem;
}

.trust-strip__list .is-accent {
  color: var(--c-brand-soft);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Servicios
   La maquetación del carrusel coverflow vive en components.css
   (.svc-carousel*). Aquí solo el ritmo de la sección, que hereda de .section.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Nuestros clientes
   -------------------------------------------------------------------------- */
.clients {
  background: var(--c-surface-alt);
  border-block: 1px solid var(--c-line);
  max-width: none;
  padding-inline: 0;
}

.clients .section__head {
  max-width: 45rem;
  margin-inline: auto;
  padding-inline: var(--sp-gutter);
}

.clients .carousel__edge--start { background: linear-gradient(90deg, var(--c-surface-alt) 0%, transparent 100%); }
.clients .carousel__edge--end   { background: linear-gradient(270deg, var(--c-surface-alt) 0%, transparent 100%); }

/* --------------------------------------------------------------------------
   Método
   -------------------------------------------------------------------------- */
.method__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

@media (min-width: 40em) {
  .method__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
}

@media (min-width: 64em) {
  .method__grid { grid-template-columns: repeat(4, 1fr); }
}

.step {
  padding: 1.875rem var(--sp-6);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.step__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--c-brand);
  margin-bottom: 1.125rem;
}

.step__title {
  font-size: 1.1875rem;
  margin-bottom: var(--sp-2);
}

.step__text {
  font-size: var(--fs-base);
  color: var(--c-text-muted);
}

/* --------------------------------------------------------------------------
   Confianza y protocolos
   -------------------------------------------------------------------------- */
.trust {
  background: var(--c-surface-alt);
  border-top: 1px solid var(--c-line);
}

.trust__inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--sp-10);
  max-width: var(--w-content);
  margin-inline: auto;
  padding: var(--sp-section) var(--sp-gutter);
}

@media (min-width: 56em) {
  .trust__inner { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

.trust__figure {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--c-surface);
}

@media (min-width: 56em) {
  .trust__figure { aspect-ratio: auto; min-height: 27.5rem; height: 100%; }
}

.trust__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.trust__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(10 24 38 / 0) 45%, rgb(10 24 38 / 0.7) 100%);
}

.trust__caption {
  position: absolute;
  left: var(--sp-6);
  bottom: var(--sp-6);
  z-index: 2;
  display: inline-flex;
  padding: 1.5px;
  border-radius: 0.875rem;
  background: var(--grad-brand);
}

.trust__caption span {
  display: block;
  background: rgb(10 24 38 / 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: var(--sp-3) 1.125rem;
  border-radius: 0.8125rem;
}

.trust__lead {
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--c-text-muted);
  margin-bottom: var(--sp-8);
}

.trust__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.125rem;
}

@media (min-width: 40em) {
  .trust__list { grid-template-columns: 1fr 1fr; }
}

.trust__list li {
  position: relative;
  padding-left: 1.25rem;
}

.trust__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-brand);
}

.trust__list strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text);
}

.trust__list span {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* --------------------------------------------------------------------------
   Escena inmersiva
   En orientación cuadrada o vertical se muestra solo el mensaje sobre una foto.
   -------------------------------------------------------------------------- */
.scene {
  position: relative;
  min-height: clamp(32rem, 80svh, 46rem);
  background:
    linear-gradient(180deg, rgb(10 24 38 / 0.76), rgb(10 24 38 / 0.88)),
    url("../img/scene/fondo-espacios-alta-exigencia-960.jpg") center / cover no-repeat;
  background-image:
    linear-gradient(180deg, rgb(10 24 38 / 0.76), rgb(10 24 38 / 0.88)),
    image-set(
      url("../img/scene/fondo-espacios-alta-exigencia-960.webp") 1x,
      url("../img/scene/fondo-espacios-alta-exigencia-1920.webp") 2x
    );
}

.scene__pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: inherit;
  padding: var(--sp-section) var(--sp-gutter);
}

.scene__cards { display: none; }

.float-card {
  position: relative;
  width: min(88%, 21.25rem);
  aspect-ratio: 4 / 3;
  margin: 0 auto 1.125rem;
  border-radius: 1.375rem;
  overflow: hidden;
  border: 1px solid rgb(110 183 65 / 0.18);
  box-shadow: var(--sh-card);
  pointer-events: none;
}

.float-card--behind { display: none; }

.float-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.float-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(10 24 38 / 0.05), rgb(10 24 38 / 0.68));
}

/* Por encima de las tarjetas (z 1–7). Al acercar las trayectorias al centro, es
   lo único que garantiza que el titular siga siendo legible pase lo que pase. */
.scene__center {
  position: relative;
  z-index: 10;
  order: -1;
  max-width: 32.5rem;
  margin-bottom: 1.75rem;
  text-align: center;
}

/* Velo radial: separa el texto del fondo cuando una tarjeta pasa por detrás.
   Solo en escritorio. Se sale del ancho del texto a propósito, y ahí lo recorta
   `.scene__pin`; en móvil no hay pin que lo recorte y ensancharía el documento. */
@media (min-width: 64em) and (orientation: landscape) {
  .scene__center::before {
    content: "";
    position: absolute;
    inset: -12% -22%;
    z-index: -1;
    background: radial-gradient(60% 55% at 50% 50%, rgb(10 24 38 / 0.82) 0%, rgb(10 24 38 / 0.55) 55%, rgb(10 24 38 / 0) 100%);
    pointer-events: none;
  }
}

.scene__title {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.625rem);
  line-height: 1.06;
  margin-bottom: 1.375rem;
}

.scene__text {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--c-text-soft);
  max-width: 27.5rem;
  margin: 0 auto var(--sp-8);
}

/* Solo en viewport horizontal y ancho: lienzo alto, contenido fijado y tarjetas
   en parallax. En ventanas cuadradas o verticales se conserva el fondo estático. */
@media (min-width: 64em) and (orientation: landscape) {
  .scene {
    min-height: 300vh;
    background: var(--c-bg);
  }

  .scene__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
  }

  .scene__cards { display: block; }

  .float-card {
    position: absolute;
    left: var(--lane);
    top: 50%;
    z-index: var(--z);
    width: var(--w);
    height: var(--h);
    aspect-ratio: auto;
    margin: 0;
    /* GSAP toma el relevo; sin él, las tarjetas quedan ocultas para no estorbar */
    opacity: 0;
  }

  .float-card--behind {
    display: block;
    filter: blur(3px);
  }

  .scene__center {
    order: 0;
    margin-bottom: 0;
    padding-inline: var(--sp-6);
  }
}

/* Sin JS o sin GSAP no hay parallax posible: mostramos solo el mensaje central */
.no-js .float-card,
.no-gsap .float-card { display: none; }

@media (min-width: 64em) and (orientation: landscape) {
  .no-js .scene,
  .no-gsap .scene { min-height: 0; }

  .no-js .scene__pin,
  .no-gsap .scene__pin {
    position: static;
    height: auto;
    padding: var(--sp-section) var(--sp-gutter);
  }
}

/* --------------------------------------------------------------------------
   Contacto
   -------------------------------------------------------------------------- */
.contact { max-width: var(--w-narrow); }

.contact__card {
  background: var(--c-surface);
  border: 1px solid rgb(140 163 184 / 0.14);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */
.footer {
  background: var(--c-surface-alt);
  border-top: 1px solid var(--c-line);
}

.footer__inner {
  max-width: var(--w-content);
  margin-inline: auto;
  padding: clamp(3.5rem, 8vw, 5.625rem) var(--sp-gutter);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
}

@media (min-width: 48em) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; }
}

.footer__logo {
  width: 9rem;
  height: auto;
  margin-bottom: 1.375rem;
}

.footer__about {
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--c-text-muted);
  max-width: 21.25rem;
  margin-bottom: 1.125rem;
}

.footer__live {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-brand-soft);
}

.footer__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-brand);
  animation: live-pulse 2s ease-in-out infinite;
}

.footer__heading {
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  margin-bottom: 1.125rem;
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 0.6875rem;
  font-size: var(--fs-base);
  color: var(--c-text-soft);
  margin-bottom: 1.375rem;
}

.footer__list a { color: var(--c-text-soft); }
.footer__list a:hover { color: var(--c-brand); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: 1.625rem;
  border-top: 1px solid var(--c-line);
  font-size: 0.8125rem;
  color: var(--c-text-muted);
}

/* Deja aire para que el botón flotante de WhatsApp no tape el pie */
.footer__bottom { padding-bottom: 3.5rem; }

@media (min-width: 30em) {
  .footer__bottom { padding-bottom: 0; }
}