/* ==========================================================================
   sections.css — secciones de la página de inicio
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  min-height: 100svh; display: flex; align-items: flex-end;
  background: var(--blue-950); color: var(--white);
}
.hero__media { position: absolute; inset: 0; z-index: -3; animation: hero-curtain 1.5s var(--ease-in-out) .1s backwards; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 66% 40%;
  animation: hero-drift 16s var(--ease-out) .1s backwards;
}
.hero__shade {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgb(0 6 46 / .55) 0%, rgb(0 6 46 / 0) 22%),
    linear-gradient(0deg, rgb(0 6 46 / .9) 0%, rgb(0 6 46 / 0) 42%),
    linear-gradient(98deg, rgb(0 6 46 / .96) 0%, rgb(0 11 116 / .84) 38%, rgb(0 11 116 / .4) 72%, rgb(0 6 46 / .3) 100%);
  animation: fade-in 1.4s ease .5s backwards;
}
.hero__grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgb(255 255 255 / .06) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .06) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: linear-gradient(95deg, #000 0%, transparent 62%);
          mask-image: linear-gradient(95deg, #000 0%, transparent 62%);
  animation: fade-in 2s ease 1s backwards;
}
.hero__inner { padding-block: calc(var(--header-h) + 5rem) clamp(3.5rem, 11vh, 7rem); }
.hero__rule {
  width: 132px; height: 12px; margin-bottom: 1.75rem; transform-origin: left;
  border-bottom: 2px solid var(--gold-400);
  background: repeating-linear-gradient(90deg, var(--gold-400) 0 2px, transparent 2px 12px) bottom / 100% 7px no-repeat;
}
.hero h1 { max-width: 17ch; font-size: var(--fs-hero); font-weight: 800; line-height: 1.02; letter-spacing: -.035em; }
.hero__lead { max-width: 52ch; margin-top: 1.75rem; font-size: var(--fs-md); color: rgb(255 255 255 / .86); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.5rem; }
.hero__scroll {
  position: absolute; right: var(--gutter); bottom: 0; width: 1px; height: clamp(56px, 12vh, 96px);
  background: linear-gradient(var(--gold-400), transparent); transform-origin: top;
  animation: hero-scroll 2.4s var(--ease-in-out) 2s infinite backwards;
}
@media (max-width: 767.98px) {
  .hero__shade { background: linear-gradient(180deg, rgb(0 6 46 / .5) 0%, rgb(0 11 116 / .55) 32%, rgb(0 8 70 / .9) 62%, rgb(0 6 46 / .97) 100%); }
  .hero__media img { object-position: 72% 40%; }
  .hero__scroll { display: none; }
}

/* Secuencia de entrada: un único momento orquestado */
[data-anim] { animation: hero-rise .95s var(--ease-out) var(--d, 0s) backwards; }
.hero__rule[data-anim] { animation-name: hero-rule; animation-duration: 1.1s; }
@keyframes hero-curtain { from { clip-path: inset(0 0 100% 0); } }
@keyframes hero-drift   { from { transform: scale(1.12); } }
@keyframes hero-rise    { from { opacity: 0; transform: translateY(26px); } }
@keyframes hero-rule    { from { transform: scaleX(0); } }
@keyframes hero-scroll  { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes fade-in      { from { opacity: 0; } }

/* ---------- Instituciones ---------- */
.trust { padding-block: clamp(3.5rem, 6vw, 5.5rem); background: var(--white); border-bottom: 1px solid var(--line); }
.trust__layout { display: grid; gap: 2rem; align-items: center; }
.trust h2 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; color: var(--blue-800); max-width: 24ch; }
.trust__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem 1rem; }
.trust__item { display: flex; align-items: center; gap: .85rem; padding: .5rem 0; font-size: var(--fs-sm); font-weight: 600; color: var(--blue-800); }
.trust__icon {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: var(--r-sm);
  background: var(--blue-50); color: var(--blue-800);
  transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.trust__item:hover .trust__icon { background: var(--gold-400); color: var(--blue-950); }
@media (min-width: 992px) {
  .trust__layout { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4rem; }
  .trust__list { grid-template-columns: repeat(4, 1fr); gap: 1rem 1.5rem; }
}

/* ---------- Servicios ---------- */
.services { background: var(--paper); }
.services__grid { display: grid; gap: 1.25rem; }
.service {
  display: flex; flex-direction: column; gap: .85rem; padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.service:hover { border-color: rgb(0 11 116 / .28); box-shadow: var(--shadow-md); }
.service__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: .5rem; border-radius: var(--r-sm); background: var(--blue-50); color: var(--blue-800); }
.service__icon .icon { width: 26px; height: 26px; }
.service h3 { font-size: var(--fs-md); font-weight: 700; color: var(--blue-800); }
.service p { color: var(--ink-soft); font-size: var(--fs-sm); }

.service--featured {
  position: relative; isolation: isolate; overflow: hidden; gap: 2rem;
  background: linear-gradient(135deg, var(--blue-800), var(--blue-900) 70%);
  border: 0; border-radius: var(--r-lg); color: var(--white);
}
.service--featured:hover { box-shadow: var(--shadow-lg); }
.service--featured .service__icon { background: var(--gold-400); color: var(--blue-950); width: 60px; height: 60px; }
.service--featured .service__icon .icon { width: 30px; height: 30px; }
.service--featured h3 { color: var(--white); font-size: var(--fs-xl); letter-spacing: -.02em; max-width: 20ch; }
.service--featured p { color: rgb(255 255 255 / .82); font-size: var(--fs-base); max-width: 52ch; }
.service__points { display: flex; flex-wrap: wrap; gap: .6rem; align-content: end; }
.service__points li {
  display: inline-flex; align-items: center; gap: .5rem; padding: .55rem 1rem;
  border: 1px solid rgb(255 255 255 / .22); border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: 600; background: rgb(255 255 255 / .06);
}
.service__points .icon { color: var(--gold-400); width: 1.1em; height: 1.1em; }
@media (min-width: 768px) { .services__grid { grid-template-columns: repeat(2, 1fr); } .service--featured { grid-column: 1 / -1; } }
@media (min-width: 992px) {
  .services__grid { grid-template-columns: repeat(3, 1fr); }
  .service--featured { display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; column-gap: 3rem; }
  .service--featured .service__body { display: flex; flex-direction: column; gap: .85rem; }
}

/* ---------- Vista previa de proyectos ---------- */
.preview__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; }
.preview__head .section-head { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.preview__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(150px, 38vw, 220px); gap: .75rem;
}
.shot { position: relative; display: block; overflow: hidden; border-radius: var(--r-sm); background: var(--blue-100); }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgb(0 6 46 / .55), transparent 55%); opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
.shot:hover img, .shot:focus-visible img { transform: scale(1.05); }
.shot:hover::after, .shot:focus-visible::after { opacity: 1; }
.shot__zoom {
  position: absolute; z-index: 1; right: .85rem; bottom: .85rem; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%; background: var(--gold-400); color: var(--blue-950);
  opacity: 0; transform: translateY(8px) scale(.9);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.shot:hover .shot__zoom, .shot:focus-visible .shot__zoom { opacity: 1; transform: none; }
.preview__grid .shot:nth-child(1) { grid-column: 1 / -1; grid-row: span 2; }
.preview__grid .shot:nth-child(4) { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .preview__grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(170px, 19vw, 250px); gap: 1rem; }
  .preview__grid .shot:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
  .preview__grid .shot:nth-child(2) { grid-column: 3; grid-row: 1; }
  .preview__grid .shot:nth-child(3) { grid-column: 4; grid-row: 1; }
  .preview__grid .shot:nth-child(4) { grid-column: 3 / 5; grid-row: 2; }
}

/* ---------- Audiencias ---------- */
.audience { background: var(--blue-950); color: var(--white); }
.audience__grid { display: grid; gap: 1.25rem; }
.audience__card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: clamp(1.75rem, 3.5vw, 3rem);
  border: 1px solid rgb(255 255 255 / .14); border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgb(255 255 255 / .06), rgb(255 255 255 / .015));
  transition: border-color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.audience__card:hover { border-color: rgb(242 179 86 / .6); }
.audience__card .icon-wrap { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-sm); background: var(--gold-400); color: var(--blue-950); }
.audience__card .icon-wrap .icon { width: 28px; height: 28px; }
.audience__card h3 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.015em; }
.audience__card p { color: rgb(255 255 255 / .8); max-width: 46ch; }
.audience__card .btn { margin-top: auto; }
.audience__card p + .btn { margin-top: 1rem; }
@media (min-width: 768px) { .audience__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }

/* ---------- Proceso (secuencia real: numerada) ---------- */
.process__list { display: grid; gap: 0; counter-reset: step; }
.process__step { position: relative; display: grid; grid-template-columns: 56px 1fr; column-gap: 1.25rem; padding-bottom: 2.25rem; }
.process__step:last-child { padding-bottom: 0; }
.process__num {
  position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--blue-800); color: var(--blue-800);
  font-size: var(--fs-md); font-weight: 800; font-variant-numeric: tabular-nums;
}
.process__step::before {
  content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; width: 2px; background: var(--gold-400);
  transform-origin: top; transform: scaleY(1);
}
.process__step:last-child::before { display: none; }
.process__step h3 { margin-top: .85rem; font-size: var(--fs-md); font-weight: 700; color: var(--blue-800); }
.process__step p { margin-top: .4rem; color: var(--ink-soft); font-size: var(--fs-sm); max-width: 40ch; }

.js .process__list[data-reveal] .process__step::before { transform: scaleY(0); transition: transform .9s var(--ease-in-out) calc(var(--i) * .25s + .2s); }
.js .process__list[data-reveal] .process__num { background: var(--white); color: var(--blue-800); transition: background-color .5s ease calc(var(--i) * .25s), color .5s ease calc(var(--i) * .25s); }
.js .process__list[data-reveal] .process__step > div { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease-out) calc(var(--i) * .25s), transform .6s var(--ease-out) calc(var(--i) * .25s); }
.js .process__list.is-visible .process__step::before { transform: scaleY(1); }
.js .process__list.is-visible .process__num { background: var(--blue-800); color: var(--white); }
.js .process__list.is-visible .process__step > div { opacity: 1; transform: none; }

@media (min-width: 992px) {
  .process__list { grid-template-columns: repeat(4, 1fr); column-gap: 1.5rem; }
  .process__step { grid-template-columns: 1fr; row-gap: 1.25rem; padding: 0; }
  .process__step::before { left: 56px; right: -1.5rem; top: 27px; bottom: auto; width: auto; height: 2px; transform-origin: left; }
  .js .process__list[data-reveal] .process__step::before { transform: scaleX(0); }
  .js .process__list.is-visible .process__step::before { transform: scaleX(1); }
  .process__step h3 { margin-top: 0; }
}

/* ---------- Banda de llamada a la acción ---------- */
.cta-band { background: var(--gold-400); color: var(--blue-950); padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.cta-band__inner { display: grid; gap: 1.75rem; align-items: center; }
.cta-band h2 { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.025em; max-width: 22ch; }
.cta-band p { margin-top: .85rem; max-width: 56ch; color: rgb(0 6 46 / .84); font-size: var(--fs-md); }
@media (min-width: 992px) { .cta-band__inner { grid-template-columns: 1fr auto; gap: 4rem; } }