/* ================================================================
   PREMIUM ANIMATIONS v2.0
   Scroll Storytelling · Page Transitions · Microinteracciones
   ================================================================ */

/* ----------------------------------------------------------------
   1. HERO — Sin gradiente de fusión (removido por petición del usuario)
   ---------------------------------------------------------------- */
.home-header {
   position: relative;
   overflow: visible;
}

/* .home-header::after queda desactivado — la regla base ya tiene content: none */

/* ----------------------------------------------------------------
   2. ACORDEÓN — Ítems inactivos se hunden levemente
   ---------------------------------------------------------------- */
.focus-accordion-item.visible:not(.is-open) .focus-accordion-trigger h4 {
   opacity: 0.68;
   transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.focus-accordion-item.is-open .focus-accordion-trigger h4 {
   opacity: 1;
   transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----------------------------------------------------------------
   3. SERVICE CARDS — Ficha de información visible directamente
   (la cara frontal, decorativa, queda oculta; sin flip)
   ---------------------------------------------------------------- */
.services-section .services-folder-grid .service-card,
.services-section .services-folder-grid .service-card:hover,
.services-section .services-folder-grid .service-card:focus-visible,
.services-section .services-folder-grid.is-deployed .service-card,
.services-section .services-folder-grid.is-deployed .service-card:hover,
.services-section .services-folder-grid.is-deployed .service-card:focus-visible {
   overflow: visible;
   border-color: transparent !important;
   background: transparent !important;
   box-shadow: none !important;
}

.services-folder-grid .service-card__flip {
   position: relative;
   display: block;
   width: 100%;
   min-height: inherit;
}

.services-folder-grid .service-card__face {
   display: flex;
   flex-direction: column;
   min-width: 0;
   min-height: inherit;
   overflow: hidden;
   border-radius: inherit;
   background: #fff;
   box-shadow: 0 1em 2.6em rgba(34, 51, 59, .08);
}

/* ----------------------------------------------------------------
   4. CONTACT FORM — Borde animado en focus
   ---------------------------------------------------------------- */
.contact-form label {
   position: relative;
   overflow: hidden;
}

.contact-form label::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 0%;
   height: 2px;
   background: var(--color-accent-soft);
   transition: width 0.42s cubic-bezier(0.4, 0, 0.2, 1);
   pointer-events: none;
}

.contact-form label:focus-within::after {
   width: 100%;
}

/* ----------------------------------------------------------------
   5. GUINNESS FLIP CARD — Micro-tilt hint al entrar en viewport
   ---------------------------------------------------------------- */
@keyframes pa-guinness-hint {
   0%   { transform: rotateY(0deg);  }
   20%  { transform: rotateY(4deg);  }
   45%  { transform: rotateY(-2deg); }
   70%  { transform: rotateY(2deg);  }
   100% { transform: rotateY(0deg);  }
}

.about-guinness-flip.pa-hint-play:not(.is-flipped) .about-guinness-flip__inner {
   animation: pa-guinness-hint 1.65s cubic-bezier(0.4, 0, 0.2, 1) 1 forwards;
}

/* ----------------------------------------------------------------
   7. WORK TILES — Hover premium
   ---------------------------------------------------------------- */
.work-tiles-home li .single-tile-wrap {
   transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-tiles-home li:hover .single-tile-wrap {
   transform: translateY(-4px);
}

.work-tiles-home li .tile-image {
   transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
   overflow: hidden;
}

.work-tiles-home li:hover .tile-image .overlay-image {
   transform: scale(1.04);
   transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----------------------------------------------------------------
   8. ACCORDION LEFT LINE — Línea decorativa que se dibuja
   ---------------------------------------------------------------- */
.pa-section-divider-line {
   display: block;
   width: 0%;
   height: 1px;
   background: var(--color-border-solid);
   transform-origin: left center;
   margin-bottom: calc(var(--section-padding) * 0.15);
   border-radius: 1px;
}

/* ----------------------------------------------------------------
   9. SERVICIOS — Card entrance opacity state
   ---------------------------------------------------------------- */
.services-folder-grid .service-card.pa-card-hidden {
   opacity: 0;
}

/* ----------------------------------------------------------------
   AI CHAMPIONS — Reveal de imágenes controlado por scroll
   ---------------------------------------------------------------- */
.home-body-intro .reveal-section {
   --card-w: clamp(17rem, 26vw, 30rem);
   --card-w-mobile: 46vw;
   --reveal-ink: #f4f2ee;
   --reveal-muted: rgba(244, 242, 238, .6);
   position: relative;
   width: 100%;
   height: 100vh;
   height: 100svh;
   margin-top: clamp(4rem, 8vw, 8rem);
   overflow: hidden;
   color: #fff;
   background: #05070a;
   isolation: isolate;
}

/* Stage creado por JS para el pin manual: ocupa un viewport dentro de la
   sección alta y se contra-traslada con el scroll */
.home-body-intro .reveal-section .reveal-stage {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   height: 100svh;
   overflow: hidden;
}

.home-body-intro .reveal-section .panel {
   position: absolute;
   inset: 0;
   display: grid;
   place-items: center;
   width: 100%;
   height: 100%;
   margin: 0;
}

.home-body-intro .reveal-section .panel .media {
   position: absolute;
   inset: 0;
   overflow: hidden;
   background: #172027;
}

.home-body-intro .reveal-section .panel .media::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(4, 7, 12, .08) 35%, rgba(4, 7, 12, .68) 100%);
   pointer-events: none;
}

.home-body-intro .reveal-section .panel .media img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   transform-origin: center;
}

/* Fotos con las caras en el tercio superior: se baja el encuadre para que
   el recorte de object-fit no corte las cabezas */
.home-body-intro .reveal-section .panel .media img.img-frame-faces {
   object-position: center 22%;
}

.home-body-intro .reveal-section .panel.incoming .media {
   inset: auto;
   right: 6vw;
   bottom: 9vh;
   width: var(--card-w);
   aspect-ratio: 16 / 10;
   border-radius: clamp(.75rem, 1.2vw, 1.25rem);
   box-shadow: 0 2rem 5rem rgba(0, 0, 0, .5);
}

.home-body-intro .reveal-section .panel.incoming:nth-child(odd) .media {
   right: auto;
   left: 6vw;
}

.home-body-intro .reveal-section .panel .caption {
   position: relative;
   z-index: 2;
   display: grid;
   justify-items: center;
   gap: 1rem;
   max-width: min(88vw, 58rem);
   padding: 1.5rem;
   text-align: center;
   text-shadow: 0 .2rem 2rem rgba(0, 0, 0, .55);
   pointer-events: none;
}

.home-body-intro .reveal-section .panel .caption .num {
   font-size: .72rem;
   font-weight: 600;
   letter-spacing: .32em;
   color: var(--reveal-muted);
}

.home-body-intro .reveal-section .panel .caption h3 {
   max-width: 18ch;
   margin: 0;
   color: #fff;
   font-size: clamp(2rem, 4.2vw, 4.8rem);
   font-weight: 400;
   line-height: 1.04;
   letter-spacing: -.035em;
}

.home-body-intro .reveal-section .progress {
   position: absolute;
   z-index: 10;
   top: 50%;
   right: clamp(.75rem, 2vw, 1.5rem);
   display: flex;
   flex-direction: column;
   gap: .55rem;
   transform: translateY(-50%);
}

.home-body-intro .reveal-section .progress span {
   position: relative;
   width: 3px;
   height: clamp(1.1rem, 3vh, 1.8rem);
   overflow: hidden;
   border-radius: 2px;
   background: rgba(255, 255, 255, .25);
}

.home-body-intro .reveal-section .progress i {
   position: absolute;
   inset: 0;
   display: block;
   background: var(--reveal-ink);
   transform: scaleY(0);
   transform-origin: top;
}

@media screen and (max-width: 760px) {
   .home-body-intro .reveal-section {
      --card-w: var(--card-w-mobile);
   }

   .home-body-intro .reveal-section .panel.incoming .media {
      right: 5vw;
      bottom: 8vh;
   }

   .home-body-intro .reveal-section .panel.incoming:nth-child(odd) .media {
      left: 5vw;
   }
}

@media (prefers-reduced-motion: reduce) {
   .home-body-intro .reveal-section {
      height: auto;
   }

   .home-body-intro .reveal-section .panel {
      position: relative;
      height: min(72vh, 42rem);
   }

   .home-body-intro .reveal-section .panel.incoming .media {
      inset: 0;
      width: auto;
      aspect-ratio: auto;
      border-radius: 0;
   }

   .home-body-intro .reveal-section .progress {
      display: none;
   }
}

/* ----------------------------------------------------------------
   10. PAGE TRANSITION — Fade out del contenido saliente
   ---------------------------------------------------------------- */
main.pa-leaving {
   pointer-events: none;
}

/* ----------------------------------------------------------------
   SERVICE CARDS v3 — Imagen a sangre completa con scrim cinematográfico
   (cara trasera del flip; sobreescribe el diseño blanco anterior)
   ---------------------------------------------------------------- */
.services-folder-grid .service-card__face--back {
   position: relative;
   justify-content: flex-end;
   padding: clamp(1.6em, 2.4vw, 2.2em);
   background: #10151b;
   color: #fff;
}

.services-section .services-folder-grid .service-card__media {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   aspect-ratio: auto;
   margin: 0;
   background: #10151b;
   z-index: 0;
}

.services-section .services-folder-grid .service-card__media img,
.services-section .services-folder-grid .service-card:nth-child(2) .service-card__media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center 32%;
   transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}

.services-section .services-folder-grid .service-card:hover .service-card__media img,
.services-section .services-folder-grid .service-card:focus-visible .service-card__media img {
   transform: scale(1.06);
}

/* Scrim: legibilidad del bloque inferior sin apagar la foto */
.services-folder-grid .service-card__face--back::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;
   background: linear-gradient(180deg,
      rgba(9, 12, 17, .2) 0%,
      rgba(9, 12, 17, .04) 24%,
      rgba(9, 12, 17, .52) 52%,
      rgba(8, 10, 14, .9) 78%,
      rgba(7, 9, 12, .97) 100%);
   pointer-events: none;
}

/* Numeración de la card en chip glass */
.services-folder-grid .service-card__face--back::before {
   position: absolute;
   z-index: 2;
   top: clamp(1.3em, 2vw, 1.8em);
   left: clamp(1.3em, 2vw, 1.8em);
   padding: .5em .95em;
   border: 1px solid rgba(255, 255, 255, .28);
   border-radius: 999px;
   background: rgba(14, 18, 24, .35);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   color: rgba(255, 255, 255, .92);
   font-size: .68rem;
   font-weight: 700;
   letter-spacing: .24em;
   line-height: 1;
}

.services-folder-grid .service-card:nth-child(1) .service-card__face--back::before { content: "01"; }
.services-folder-grid .service-card:nth-child(2) .service-card__face--back::before { content: "02"; }
.services-folder-grid .service-card:nth-child(3) .service-card__face--back::before { content: "03"; }

.services-section .services-folder-grid .service-card__top {
   position: relative;
   z-index: 2;
   align-items: flex-start;
   padding: 0;
}

/* Eyebrow arriba del título (el DOM lo trae debajo) */
.services-section .services-folder-grid .service-card__title-wrap {
   flex-direction: column-reverse;
   gap: .75em;
}

.services-section .services-folder-grid .service-card__eyebrow {
   color: #D9BF9F;
   font-size: clamp(.6rem, .8vw, .72rem);
   font-weight: 700;
   letter-spacing: .3em;
   text-transform: uppercase;
   text-shadow: 0 1px 14px rgba(0, 0, 0, .6);
}

.services-section .services-folder-grid .service-card h3 {
   margin: 0;
   color: #fff;
   font-size: clamp(1.9em, 2.4vw, 2.5em);
   line-height: 1;
   letter-spacing: -.015em;
   text-shadow: 0 .12em 1.4em rgba(0, 0, 0, .45);
}

.services-section .services-folder-grid .service-card__features {
   position: relative;
   z-index: 2;
   gap: 0;
   margin: 1.1em 0 0;
   padding: 0;
}

.services-section .services-folder-grid .service-card__features li {
   grid-template-columns: 1.2em minmax(0, 1fr);
   column-gap: .7em;
   padding: .72em 0;
   border-top: 1px solid rgba(255, 255, 255, .16);
   color: rgba(255, 255, 255, .9);
   font-size: clamp(.88em, .98vw, 1em);
   line-height: 1.4;
}

.services-section .services-folder-grid .service-card__features li::before {
   content: "";
   width: 1em;
   height: 1px;
   margin: 0;
   border-radius: 0;
   color: transparent;
   background: #C6AC8F;
   font-size: 0;
}

.services-section .services-folder-grid .service-card__button {
   position: relative;
   z-index: 2;
   display: inline-flex;
   align-items: center;
   gap: .6em;
   width: max-content;
   margin: 1.5em 0 0;
   padding: .82em 1.55em;
   border: 1px solid rgba(255, 255, 255, .38);
   border-radius: 999px;
   background: rgba(255, 255, 255, .07);
   -webkit-backdrop-filter: blur(5px);
   backdrop-filter: blur(5px);
   color: #fff;
   font-weight: 700;
   line-height: 1;
   overflow: visible;
   transition: background .35s ease, border-color .35s ease, color .35s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
}

.services-section .services-folder-grid .service-card__button::after {
   content: "\2192";
   position: static;
   top: auto;
   right: auto;
   width: auto;
   height: auto;
   background: none;
   color: inherit;
   font-size: 1.05em;
   line-height: 1;
   transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}

.services-section .services-folder-grid .service-card:hover .service-card__button,
.services-section .services-folder-grid .service-card:focus-visible .service-card__button,
.services-section .services-folder-grid.is-deployed .service-card:hover .service-card__button,
.services-section .services-folder-grid.is-deployed .service-card:focus-visible .service-card__button,
.services-section .services-folder-grid .service-card__button:hover,
.services-section .services-folder-grid .service-card__button:focus-visible {
   border-color: #C6AC8F;
   background: #C6AC8F;
   color: #10151b;
}

.services-section .services-folder-grid .service-card:hover .service-card__button::after,
.services-section .services-folder-grid .service-card:focus-visible .service-card__button::after,
.services-section .services-folder-grid.is-deployed .service-card:hover .service-card__button::after,
.services-section .services-folder-grid.is-deployed .service-card:focus-visible .service-card__button::after {
   transform: translateX(.3em);
}

/* Sombra más profunda al elevarse */
.services-section .services-folder-grid.is-deployed .service-card:hover,
.services-section .services-folder-grid.is-deployed .service-card:focus-visible,
.services-section .services-folder-grid:not(.is-deployed) .service-card:hover,
.services-section .services-folder-grid:not(.is-deployed) .service-card:focus-visible {
   box-shadow: 0 2.2em 4.6em rgba(10, 14, 19, .34);
}

.services-section .services-folder-grid .service-card:focus-visible {
   outline: 2px solid #C6AC8F;
   outline-offset: 4px;
}

@media screen and (max-width: 720px) {
   .services-section .services-folder-grid .service-card__face--back {
      padding: 1.5em;
   }
}

/* ----------------------------------------------------------------
   ASESORÍAS · PLANES — Producto 3D flotante guiado por scroll
   Las 3 cards pasan a columna vertical (derecha) y el producto viaja
   por la izquierda interpolando pose y frame según el progreso.
   ---------------------------------------------------------------- */
.advisory-plans-stage {
   position: relative;
   display: grid;
   grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
   gap: clamp(2em, 4vw, 4.5em);
   margin-bottom: calc(var(--section-padding) * .55);
   padding: clamp(2.2em, 4.5vw, 4.4em);
   border: 1px solid rgba(5, 9, 20, .08);
   border-radius: clamp(1.4em, 2.6vw, 2.6em);
   background-color: #cdd1d6;
   background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M56 0H0V56' fill='none' stroke='%23050914' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E"),
      radial-gradient(55% 85% at 16% 46%, rgba(80, 90, 102, .3), transparent 68%),
      radial-gradient(80% 90% at 100% 100%, rgba(198, 172, 143, .2), transparent 62%),
      linear-gradient(160deg, #dfe2e6 0%, #cbcfd4 52%, #b9bec5 100%);
   background-size: 56px 56px, auto, auto, auto;
   background-position: center, 0 0, 100% 100%, 0 0;
   background-repeat: repeat, no-repeat, no-repeat, no-repeat;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1.8em 4.4em rgba(15, 23, 32, .18);
}

/* Las cards, antes en fila de 3, ahora apiladas en vertical.
   Con ID para superar las reglas #asesorias-page del tema oscuro. */
#asesorias-page .advisory-plans-stage .advisory-plans,
.advisory-plans-stage .advisory-plans {
   grid-template-columns: 1fr;
   gap: clamp(2.2em, 7vh, 4.5em);
   margin-bottom: 0;
}

#asesorias-page .advisory-plans-stage .advisory-plan,
.advisory-plans-stage .advisory-plan {
   min-height: clamp(22em, 40vh, 28em);
   transition: border-color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}

#asesorias-page .advisory-plans-stage .advisory-plan.is-active,
.advisory-plans-stage .advisory-plan.is-active {
   border-color: rgba(34, 51, 59, .72);
   box-shadow: 0 1.6em 4.4em rgba(34, 51, 59, .3), 0 0 0 1px rgba(34, 51, 59, .34);
   transform: translateX(.55em);
}

/* Columna del producto: el inner viaja en Y con el scroll (pin manual) */
.advisory-float {
   position: relative;
   height: 100%;
   min-height: 100%;
}

.advisory-float__inner {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   will-change: transform;
}

.advisory-float__canvas {
   display: block;
   width: 100%;
   height: auto;
   background: transparent;
   will-change: transform;
}

@media screen and (max-width: 900px) {
   .advisory-plans-stage {
      grid-template-columns: 1fr;
      gap: 2em;
      padding: clamp(1.5em, 6vw, 2.2em);
      border-radius: clamp(1.1em, 5vw, 1.8em);
   }

   .advisory-float {
      height: auto;
      min-height: 0;
   }

   .advisory-float__inner {
      position: relative;
   }

   #asesorias-page .advisory-plans-stage .advisory-plan.is-active,
   .advisory-plans-stage .advisory-plan.is-active {
      transform: none;
   }
}

@media (prefers-reduced-motion: reduce) {
   .advisory-float {
      height: auto;
      min-height: 0;
   }

   .advisory-float__inner {
      position: relative;
      transform: none !important;
   }

   .advisory-float__canvas {
      transform: none !important;
   }
}

/* ----------------------------------------------------------------
   11. INNER PAGES — Header section decorative underline draw
   ---------------------------------------------------------------- */
.services-page-header .pa-header-line {
   display: block;
   width: 0%;
   height: 1px;
   background: var(--color-border-solid);
   margin-top: 1.2em;
   transition: none;
   border-radius: 1px;
}

.services-page-header .pa-header-line.pa-line-drawn {
   transition: width 1.4s cubic-bezier(0.77, 0, 0.175, 1) 0.6s;
   width: 100%;
}

/* ----------------------------------------------------------------
   12. STRIPES — Animación de entrada para divisores
   ---------------------------------------------------------------- */
.stripe.pa-stripe-animate {
   transform-origin: left center;
}

/* ----------------------------------------------------------------
   13. CONTACT PANEL — Entrada de métodos de contacto
   ---------------------------------------------------------------- */
.contact-methods .contact-method {
   transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
               opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-methods .contact-method:hover {
   transform: translateX(4px);
}

/* ----------------------------------------------------------------
   14. INTRO AUDIENCE GRID — Íconos con hover
   ---------------------------------------------------------------- */
.intro-audience-item {
   transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.intro-audience-item:hover {
   transform: translateY(-3px);
}

.intro-audience-icon {
   transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.intro-audience-item:hover .intro-audience-icon {
   transform: scale(1.06) rotate(3deg);
}

/* ----------------------------------------------------------------
   Responsive — Mobile: desactivar algunas animaciones
   ---------------------------------------------------------------- */
@media screen and (max-width: 540px) {
   .home-header::after {
      height: 14%;
   }
}