/*------------------------------------------------------------------
VARIABLES
-------------------------------------------------------------------*/

   :root {
       --primario: #ec801e;
       --secundario: #e95a5c;
       --tercero: #805790;
       --cuarto: #46547d;
       --quinto: #2f4858;
       --fondo: #0b0b0b;
       --texto-blanco: #ffffff;

   }

   body {
       height: 100%;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
       font-smoothing: antialiased;
       font-family: "Inter", sans-serif;
       font-weight: 500;
       background:
           radial-gradient(900px 500px at 20% -10%, rgba(236, 128, 30, .18), transparent 60%),
           radial-gradient(700px 400px at 90% 10%, rgba(236, 128, 30, .12), transparent 55%),
           #000;
       color: #fff;
       overflow-x: hidden;
   }

   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {

       font-family: "Lora", serif;

   }


   /*------------------------------------------------------------------
PRELOADER
-------------------------------------------------------------------*/
   /* =========================
   PRELOADER VIDEO
========================= */

   .preloader {
       position: fixed;
       inset: 0;
       z-index: 100000;
       /* arriba de todo */
       display: grid;
       place-items: center;
       background: #000;
       transition: opacity .4s ease, visibility .4s ease;
   }

   .preloader-video {
       width: min(320px, 70vw);
       height: auto;
       max-height: 40vh;
       object-fit: contain;
   }

   /* Estado oculto */
   .preloader.is-hidden {
       opacity: 0;
       visibility: hidden;
   }

   /* Evita scroll mientras carga */
   body.is-loading {
       overflow: hidden;
   }

   /*------------------------------------------------------------------
BOTÓN DE WHATSAPP
-------------------------------------------------------------------*/
   .whatsapp-btn {
       position: fixed;
       bottom: 20px;
       left: 20px;
       z-index: 2000;
       display: flex;
       /* Usar flexbox */
       align-items: center;
       /* Centrar verticalmente los elementos */
       color: var(--primario);
       font-weight: bold;
   }


   .dialogue-bubble {
       background-color: white;
       border-radius: 15px;
       padding: 10px;
       margin-left: 10px;
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
       font-size: 0.9rem;
   }


   .whats {
       background-color: #25D366;
       color: white;
       padding: 10px;
       border-radius: 50%;
       font-size: 24px;
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
   }





   /*------------------------------------------------------------------
SECCIONES GENERALES
-------------------------------------------------------------------*/
   .logo {
       width: 150px;
   }

   .section-padding {
       padding-top: 80px;
       padding-bottom: 60px;
   }

   .section-padding-2 {
       padding-top: 60px;
       padding-bottom: 80px;
   }

   .section-padding-3 {
       padding-top: 60px;
       padding-bottom: 40px;
   }

   .section-color {
       /* Usamos un degradado que va de un naranja oscuro a tu naranja primario */
       background:
           radial-gradient(at 0% 0%, rgba(236, 128, 30, 0.25) 0px, transparent 50%),
           radial-gradient(at 100% 100%, rgba(236, 128, 30, 0.15) 0px, transparent 50%),
           linear-gradient(135deg, #1a0d02 0%, #3d1f05 100%);
       /* Fondo café muy oscuro/naranja quemado */

       color: #fff;
       position: relative;
       overflow: hidden;
       padding: 100px 0;
       border-top: 1px solid rgba(236, 128, 30, 0.2);
       border-bottom: 1px solid rgba(236, 128, 30, 0.2);
   }

   /*------------------------------------------------------------------
HEADER VIDEO DINÁMICO
-------------------------------------------------------------------*/

   .hero {
       min-height: 70vh;
       background: #000;
       isolation: isolate;
   }

   .hero-body {
       min-height: min(60vh, 900px);
       padding: clamp(16px, 4vw, 48px);
   }

   .video {
       pointer-events: none;
   }

   .overlay {
       background: linear-gradient(180deg, rgba(0, 0, 0, .60) 0%, rgba(0, 0, 0, .35) 40%, rgba(0, 0, 0, .60) 100%);
       z-index: 0;
   }

   .hero .container {
       z-index: 1;
       /* sobre el overlay */
   }

   /* Botón de marca (cuadrado / sin bordes redondeados) */
   .btn-brand {
       background-color: transparent;
       border-color: #fff;
       color: #fff;
       letter-spacing: .2px;
   }

   .btn-brand:hover,
   .btn-brand:focus {
       background-color: #fff;
       border-color: #fff;
       color: var(--primario);
   }

   .btn-brand:focus-visible {
       outline: 2px solid #fff;
       outline-offset: 2px;
   }

   /* Accesibilidad: reduce movimiento */
   @media (prefers-reduced-motion: reduce) {
       .video {
           display: none;
       }

       .hero {
           background: #000 url("assets/hero-poster.jpg") center / cover no-repeat;
       }
   }

   /*------------------------------------------------------------------
TEXT COLOR
-------------------------------------------------------------------*/


   .text-orange {
       color: var(--primario);
   }

   .text-pink {
       color: var(--secundario);
   }



   /*------------------------------------------------------------------
LINEA DEL TIEMPO
-------------------------------------------------------------------*/

   .timeline {
       position: relative;
       padding: 2rem 0;
   }

   .timeline::before {
       content: "";
       position: absolute;
       left: 50%;
       top: 0;
       bottom: 0;
       width: 2px;
       transform: translateX(-50%);
       background: rgba(255, 255, 255, .15);
   }

   .timeline-progress {
       position: absolute;
       left: 50%;
       top: 0;
       width: 4px;
       transform: translateX(-50%);
       height: 0;
       background: linear-gradient(to bottom, var(--primario), var(--secundario));
       box-shadow: 0 0 18px rgba(236, 128, 30, .45);
       transition: height .3s ease;
   }

   .t-item {
       display: grid;
       grid-template-columns: 1fr 80px 1fr;
       padding: 1.5rem 0;
       position: relative;
   }

   .t-item[data-side="left"] .t-card {
       grid-column: 1;
       justify-self: end;
   }

   .t-item[data-side="right"] .t-card {
       grid-column: 3;
   }

   .t-node {
       grid-column: 2;
       width: 48px;
       height: 48px;
       border-radius: 50%;
       background: rgba(0, 0, 0, .95);
       border: 1px solid rgba(255, 255, 255, .2);
       display: grid;
       place-items: center;
       position: relative;
       z-index: 2;
   }

   .t-node .iconify {
       font-size: 22px;
       color: #fff;
   }

   .t-item.in-view .t-node {
       border-color: var(--primario);
       box-shadow: 0 0 0 6px rgba(236, 128, 30, .15);
       animation: pulse 1.8s infinite;
   }

   @keyframes pulse {

       0%,
       100% {
           transform: scale(1);
       }

       50% {
           transform: scale(1.08);
       }
   }

   /* ---------- Cards ---------- */

   .t-card {
       width: min(520px, 100%);
       background: rgba(255, 255, 255, .05);
       border: 1px solid rgba(255, 255, 255, .18);
       border-radius: 18px;
       padding: 1.1rem;
       position: relative;
       overflow: hidden;
       transition: .3s ease;
   }

   .t-card:hover {
       transform: translateY(-4px);
       border-color: var(--primario);
   }

   .t-meta {
       display: flex;
       gap: .6rem;
       font-size: .8rem;
       color: rgba(255, 255, 255, .65);
       margin-bottom: .4rem;
   }

   .pill {
       border: 1px solid rgba(255, 255, 255, .25);
       border-radius: 999px;
       padding: .15rem .6rem;
   }

   .t-title {
       font-weight: 600;
       margin-bottom: .3rem;
   }

   .t-desc {
       color: rgba(255, 255, 255, .7);
       font-size: .95rem;
   }


   .reveal-line {
       position: absolute;
       inset: 0;
       background: linear-gradient(90deg, transparent, rgba(236, 128, 30, .25), transparent);
       transform: translateX(-100%);
   }

   .t-item.in-view .reveal-line {
       animation: reveal 1s ease forwards;
   }

   @keyframes reveal {
       to {
           transform: translateX(100%);
       }
   }

   /* ---------- Responsive ---------- */

   @media(max-width:991px) {

       .timeline::before,
       .timeline-progress {
           left: 26px;
           transform: none;
       }

       .t-item {
           grid-template-columns: 60px 1fr;
       }

       .t-node {
           grid-column: 1;
       }

       .t-card {
           grid-column: 2 !important;
           width: 100%;
       }
   }

   .t-node {
       justify-self: center;
   }

   .timeline::before {
       z-index: 0;
   }

   .timeline-progress {
       z-index: 1;
   }

   .t-item {
       position: relative;
       z-index: 2;
   }

   .t-node {
       position: relative;
       z-index: 3;
   }

   .t-node .iconify {
       display: block;
       line-height: 1;
   }

   .timeline {
       position: relative;
       isolation: isolate;
   }

   /* =========================
   TIMELINE: FIX DEFINITIVO OVERFLOW MÓVIL
   (sin cambiar HTML)
========================= */
   @media (max-width: 991px) {

       /* 1) Corta el overflow SOLO de esta sección */
       #paso-a-paso {
           overflow-x: hidden;
       }

       /* 2) Simula un container en la timeline (porque está fuera del .container) */
       .timeline {
           width: 100%;
           max-width: 100%;
           margin: 0 auto;
           padding-left: 16px;
           padding-right: 16px;
           overflow: hidden;
           /* más compatible que clip */
           contain: paint;
           /* evita que sombras “empujen” el scroll */
       }

       /* 3) Línea y progreso alineados a la izquierda (y sin sombras que desborden) */
       .timeline::before,
       .timeline-progress {
           left: 24px;
           transform: none;
       }

       .timeline-progress {
           box-shadow: none;
           /* CLAVE: en móviles puede generar overflow */
       }

       /* 4) Columna móvil más compacta */
       .t-item {
           grid-template-columns: 52px 1fr;
           /* 60 -> 52 */
           column-gap: 10px;
       }

       .t-node {
           grid-column: 1;
           justify-self: start;
       }

       /* 5) Card nunca excede el viewport real */
       .t-card {
           grid-column: 2 !important;
           width: 100%;
           max-width: calc(100vw - 16px - 16px - 52px - 10px);
           /* 100vw - padding timeline - col nodo - gap */
           min-width: 0;
       }

       /* 6) Evita overflow por palabras largas/strong */
       .t-title,
       .t-desc {
           overflow-wrap: anywhere;
           word-break: break-word;
       }
   }


   /*------------------------------------------------------------------
CURSOR
-------------------------------------------------------------------*/

   @media (pointer: fine) {
       html {
           cursor: none;
       }

       a,
       button,
       .btn,
       input,
       textarea,
       select {
           cursor: none;
       }

       .c-cursor {
           position: fixed;
           left: 0;
           top: 0;
           width: 0;
           height: 0;
           z-index: 99999;
           pointer-events: none;
           transform: translate3d(0, 0, 0);
       }

       .c-cursor__ring {
           position: absolute;
           width: 38px;
           height: 38px;
           border-radius: 999px;
           border: 1px solid rgba(236, 128, 30, .45);
           box-shadow: 0 0 18px rgba(236, 128, 30, .25);
           transform: translate(-50%, -50%) scale(1);
           transition: transform .18s ease, border-color .18s ease, opacity .18s ease, filter .18s ease;
           opacity: .9;
           backdrop-filter: blur(2px);
       }

       .c-cursor__dot {
           position: absolute;
           width: 6px;
           height: 6px;
           border-radius: 999px;
           background: var(--primario);
           transform: translate(-50%, -50%) scale(1);
           box-shadow: 0 0 16px rgba(236, 128, 30, .45);
           transition: transform .18s ease, opacity .18s ease;
           opacity: 1;
       }

       .c-cursor__label {
           position: absolute;
           transform: translate(-50%, calc(-50% + 30px));
           font-size: 11px;
           letter-spacing: .18em;
           text-transform: uppercase;
           color: rgba(255, 255, 255, .85);
           padding: 6px 10px;
           border-radius: 999px;
           background: rgba(0, 0, 0, .55);
           border: 1px solid rgba(255, 255, 255, .12);
           opacity: 0;
           transition: opacity .18s ease, transform .18s ease;
           white-space: nowrap;
       }

       /* Estado hover (enlaces/botones/lo que marques) */
       .c-cursor.is-hover .c-cursor__ring {
           transform: translate(-50%, -50%) scale(1.45);
           border-color: rgba(236, 128, 30, .9);
           filter: saturate(1.2);
       }

       .c-cursor.is-hover .c-cursor__dot {
           transform: translate(-50%, -50%) scale(1.6);
       }

       /* Estado click */
       .c-cursor.is-down .c-cursor__ring {
           transform: translate(-50%, -50%) scale(.9);
           opacity: .75;
       }

       .c-cursor.is-down .c-cursor__dot {
           transform: translate(-50%, -50%) scale(.7);
       }

       /* Estado texto */
       .c-cursor.is-text .c-cursor__ring {
           transform: translate(-50%, -50%) scale(1.2);
           border-color: rgba(233, 90, 92, .9);
       }

       .c-cursor.is-text .c-cursor__dot {
           opacity: .0;
       }

       /* Label visible */
       .c-cursor.has-label .c-cursor__label {
           opacity: 1;
           transform: translate(-50%, calc(-50% + 34px));
       }

       /* Ocultar cuando sale de la ventana */
       .c-cursor.is-hidden .c-cursor__ring,
       .c-cursor.is-hidden .c-cursor__dot,
       .c-cursor.is-hidden .c-cursor__label {
           opacity: 0;
       }
   }

   /* Preferencias de accesibilidad */
   @media (prefers-reduced-motion: reduce) {

       .c-cursor__ring,
       .c-cursor__dot,
       .c-cursor__label {
           transition: none !important;
       }
   }



   /*------------------------------------------------------------------
SOBRE MÍ
-------------------------------------------------------------------*/


   /* === ABOUT SPLIT (dark, minimal, brand colors) === */

   .about-split {
       background:
           radial-gradient(900px 500px at 18% -10%, rgba(236, 128, 30, .14), transparent 60%),
           radial-gradient(700px 420px at 85% 20%, rgba(233, 90, 92, .10), transparent 55%),
           #000;
       color: #fff;
       position: relative;
       overflow: hidden;
       padding-top: 80px;
       padding-bottom: 80px;
   }

   .about-media {
       position: relative;
       max-width: 460px;
   }

   .about-photo {
       border-radius: 18px;
       overflow: hidden;
       border: 1px solid rgba(255, 255, 255, .14);
       background: rgba(255, 255, 255, .04);
       box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
   }

   .about-photo img {
       width: 100%;
       height: auto;
       display: block;
       aspect-ratio: 4 / 4;
       object-fit: cover;
       filter: contrast(1.02) saturate(1.02);
   }

   .about-caption {
       position: absolute;
       left: 22px;
       bottom: -18px;
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 12px 14px;
       border-radius: 999px;
       background: rgba(0, 0, 0, .78);
       border: 1px solid rgba(255, 255, 255, .14);
       box-shadow: 0 14px 40px rgba(0, 0, 0, .55);
       backdrop-filter: blur(6px);
   }

   .about-dot {
       width: 10px;
       height: 10px;
       border-radius: 999px;
       background: var(--primario);
       box-shadow: 0 0 0 4px rgba(236, 128, 30, .14);
       flex: 0 0 auto;
   }

   .about-name {
       font-weight: 700;
       font-size: .95rem;
       line-height: 1.1;
   }

   .about-role {
       font-size: .78rem;
       color: rgba(255, 255, 255, .70);
       line-height: 1.1;
       margin-top: 2px;
   }

   .about-content {
       position: relative;
       padding-left: 0;
   }

   .about-eyebrow {
       font-weight: 700;
       letter-spacing: .18em;
       text-transform: uppercase;
       font-size: .78rem;
       color: rgba(255, 255, 255, .65);
       margin-bottom: 12px;
   }

   .about-title {
       font-weight: 800;
       line-height: 1.06;
       margin: 0 0 14px;
       font-size: clamp(1.8rem, 3.2vw, 3rem);
   }

   .about-text {
       color: rgba(255, 255, 255, .70);
       margin: 0 0 18px;
       max-width: 62ch;
       line-height: 1.7;
   }

   .about-divider {
       height: 1px;
       width: 100%;
       background: rgba(255, 255, 255, .12);
       margin: 18px 0;
   }

   /*   .about-metrics {
       display: grid;
       grid-template-columns: 1fr auto 1fr;
       gap: 18px;
       align-items: start;
       max-width: 720px;
   }

   .metric-value {
       font-weight: 900;
       font-size: clamp(2.2rem, 4vw, 3.3rem);
       letter-spacing: -0.02em;
   }

   .metric-text {
       color: rgba(255, 255, 255, .68);
       margin-top: 6px;
       line-height: 1.55;
       max-width: 28ch;
   }

   .metric-sep {
       width: 1px;
       height: 100%;
       background: rgba(255, 255, 255, .12);
   } */

   /* Small circular badge bottom-right */
   /*  .about-badge {
       position: absolute;
       right: 0;
       bottom: -6px;
       width: 62px;
       height: 62px;
       border-radius: 999px;
       display: grid;
       place-items: center;
       border: 1px solid rgba(255, 255, 255, .14);
       background: rgba(0, 0, 0, .70);
       box-shadow: 0 16px 45px rgba(0, 0, 0, .55);
   }

   .about-badge span {
       font-weight: 800;
       font-size: .9rem;
       color: rgba(255, 255, 255, .88);
   } */

   /* Responsive */
   @media (max-width: 991px) {
       .about-media {
           max-width: 100%;
       }

       .about-caption {
           left: 16px;
           bottom: -16px;
       }
   }


   /* =========================
   SERVICES - SCATTER -> ORDER
========================= */

   .services-head {
       max-width: 860px;
   }



   .services-sub {
       color: rgba(255, 255, 255, .70);
       max-width: 62ch;
       line-height: 1.7;
       margin: 0;
   }

   /* Grid base */
   /* .services-grid {
       position: relative;
       margin-top: 22px;
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 18px;
       padding: 14px 0 6px;
   } */

   /* Card */
   .service-card {
       position: relative;
       border-radius: 18px;
       padding: 18px 18px 16px;
       background: rgba(255, 255, 255, .05);
       border: 1px solid rgba(255, 255, 255, .16);
       box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
       transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) rotate(var(--tr, 0deg)) scale(var(--ts, 1));
       transition: transform .25s ease, border-color .25s ease;
       will-change: transform;
       overflow: hidden;
   }

   .service-card::before {
       content: "";
       position: absolute;
       inset: -2px;
       background:
           radial-gradient(420px 160px at 20% 10%, rgba(236, 128, 30, .12), transparent 60%),
           radial-gradient(420px 160px at 90% 30%, rgba(233, 90, 92, .10), transparent 60%);
       opacity: .7;
       pointer-events: none;
   }

   .service-card:hover {
       border-color: rgba(236, 128, 30, .55);
       transform: translate3d(var(--tx, 0px), calc(var(--ty, 0px) - 4px), 0) rotate(var(--tr, 0deg)) scale(1.01);
   }

   .service-icon {
       width: 44px;
       height: 44px;
       border-radius: 14px;
       display: grid;
       place-items: center;
       background: rgba(0, 0, 0, .55);
       border: 1px solid rgba(255, 255, 255, .14);
       margin-bottom: 12px;
   }

   .service-icon .iconify {
       font-size: 22px;
       color: #fff;
       filter: drop-shadow(0 8px 18px rgba(236, 128, 30, .18));
   }

   .service-name {
       font-weight: 800;
       margin: 0 0 6px;
       font-size: 1.1rem;
   }

   .service-desc {
       margin: 0;
       color: rgba(255, 255, 255, .70);
       line-height: 1.6;
   }

   /* Mobile */
   @media (max-width: 991px) {
       .services-grid {
           grid-template-columns: 1fr;
           gap: 14px;
       }
   }



   /* =========================
   CASE FEATURE (minimal)
========================= */
   .case-feature {
       background:
           radial-gradient(900px 500px at 15% -10%, rgba(236, 128, 30, .12), transparent 60%),
           radial-gradient(700px 420px at 85% 20%, rgba(233, 90, 92, .10), transparent 55%),
           #000;
       color: #fff;
       overflow: hidden;
   }


   .case-text {
       color: rgba(255, 255, 255, .70);
       line-height: 1.7;
       margin: 0 0 16px;
       max-width: 62ch;
   }

   .case-divider {
       height: 1px;
       width: 100%;
       background: rgba(255, 255, 255, .12);
       margin: 18px 0;
   }

   /* Media */
   .case-media {
       position: relative;
       margin: 0;
   }

   .case-img {
       width: 100%;
       display: block;
       border-radius: 18px;
       border: 1px solid rgba(255, 255, 255, .14);
       box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
       aspect-ratio: 4 / 4;
       object-fit: cover;
   }

   .case-tag {
       position: absolute;
       left: 16px;
       bottom: 16px;
       display: inline-flex;
       align-items: center;
       gap: 10px;
       padding: 10px 12px;
       border-radius: 999px;
       background: rgba(0, 0, 0, .70);
       border: 1px solid rgba(255, 255, 255, .14);
       color: rgba(255, 255, 255, .86);
       font-size: .9rem;
       backdrop-filter: blur(6px);
   }

   .case-dot {
       width: 10px;
       height: 10px;
       border-radius: 999px;
       background: var(--primario);
       box-shadow: 0 0 0 4px rgba(236, 128, 30, .14);
   }

   /* Metrics */
   .case-grid {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 12px;
   }

   .case-metric {
       border-radius: 16px;
       padding: 14px 14px 12px;
       background: rgba(255, 255, 255, .05);
       border: 1px solid rgba(255, 255, 255, .14);
       box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
   }

   .case-value {
       font-weight: 900;
       letter-spacing: -0.02em;
       font-size: 1.6rem;
   }

   .case-label {
       margin-top: 6px;
       color: rgba(255, 255, 255, .68);
       line-height: 1.4;
       font-size: .95rem;
   }

   /* Quote */
   .case-quote {
       margin-top: 16px;
       border-radius: 18px;
       padding: 16px 16px 14px;
       background: rgba(255, 255, 255, .04);
       border: 1px solid rgba(255, 255, 255, .12);
       position: relative;
   }

   .quote-mark {
       position: absolute;
       top: 8px;
       left: 12px;
       font-size: 42px;
       line-height: 1;
       color: rgba(236, 128, 30, .40);
       font-weight: 900;
       pointer-events: none;
   }

   .quote-text {
       margin: 0;
       color: rgba(255, 255, 255, .78);
       line-height: 1.7;
       padding-left: 18px;
   }

   .quote-by {
       margin-top: 10px;
       display: flex;
       align-items: center;
       gap: 10px;
       color: rgba(255, 255, 255, .75);
       font-size: .95rem;
   }

   .quote-dot {
       width: 8px;
       height: 8px;
       border-radius: 999px;
       background: var(--secundario);
       box-shadow: 0 0 0 4px rgba(233, 90, 92, .12);
   }

   /* Responsive */
   @media (max-width: 991px) {
       .case-grid {
           grid-template-columns: 1fr;
       }

       .case-tag {
           left: 12px;
           bottom: 12px;
           font-size: .85rem;
       }
   }


   /* =========================
   CTA MINIMAL
========================= */

   .cta-box {
       border-radius: 22px;
       padding: clamp(28px, 4vw, 48px);
       background: rgba(255, 255, 255, .04);
       border: 1px solid rgba(255, 255, 255, .14);
       box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 20px;
   }

   .cta-title {
       margin: 0;
       font-weight: 800;
       line-height: 1.05;
       font-size: clamp(1.6rem, 3vw, 2.4rem);
       color: #fff;
       max-width: 22ch;
   }

   /* Botón */
   .cta-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       padding: 14px 26px;
       border-radius: 999px;
       font-weight: 800;
       letter-spacing: .02em;
       text-decoration: none;
       color: #000;
       background: var(--primario);
       transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
       box-shadow: 0 10px 30px rgba(236, 128, 30, .45);
   }

   .cta-btn:hover {
       transform: translateY(-2px);
       background: #fff;
       box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
   }

   /* Responsive */
   @media (max-width: 768px) {
       .cta-box {
           flex-direction: column;
           text-align: center;
       }

       .cta-title {
           max-width: none;
       }
   }

   /* === ANIMACIONES EXTRA CTA (además de AOS) === */
   .cta-box {
       position: relative;
       overflow: hidden;
       isolation: isolate;
   }

   .cta-sheen {
       position: absolute;
       inset: -40%;
       background: linear-gradient(120deg,
               transparent 35%,
               rgba(236, 128, 30, .22) 45%,
               rgba(233, 90, 92, .14) 55%,
               transparent 65%);
       transform: translateX(-60%) rotate(6deg);
       opacity: .9;
       animation: ctaSheen 3.6s ease-in-out infinite;
       pointer-events: none;
       z-index: 0;
   }

   /* Asegura que contenido quede arriba del sheen */
   .cta-title,
   .cta-btn {
       position: relative;
       z-index: 1;
   }

   /* Botón con micro-interacciones */
   .cta-btn {
       position: relative;
       overflow: hidden;
   }

   .cta-btn::after {
       content: "";
       position: absolute;
       inset: 0;
       background: radial-gradient(200px 60px at 30% 20%, rgba(255, 255, 255, .35), transparent 60%);
       transform: translateX(-40%);
       opacity: 0;
       transition: opacity .25s ease, transform .35s ease;
   }

   .cta-btn:hover::after {
       opacity: 1;
       transform: translateX(0);
   }

   /* Animación de brillo */
   @keyframes ctaSheen {
       0% {
           transform: translateX(-65%) rotate(6deg);
           opacity: .0;
       }

       15% {
           opacity: .9;
       }

       55% {
           opacity: .9;
       }

       100% {
           transform: translateX(65%) rotate(6deg);
           opacity: .0;
       }
   }



   /* =========================
   FAQ MINIMAL (Bootstrap accordion styled)
========================= */
   .faq-head {
       max-width: 860px;
   }

   .faq-eyebrow {
       font-weight: 700;
       letter-spacing: .18em;
       text-transform: uppercase;
       font-size: .78rem;
       color: rgba(255, 255, 255, .65);
   }

   .faq-title {
       font-weight: 800;
       line-height: 1.06;
       margin: 10px 0 10px;
       font-size: clamp(1.8rem, 3.2vw, 2.6rem);
   }

   .faq-sub {
       color: rgba(255, 255, 255, .70);
       max-width: 62ch;
       line-height: 1.7;
       margin: 0;
   }

   /* Accordion skin */
   .faq-acc {
       --bs-accordion-bg: #fff;
       --bs-accordion-border-color: #fff;
       --bs-accordion-btn-bg: #fff;
       --bs-accordion-btn-focus-box-shadow: none;
       --bs-accordion-active-bg: #fff;
       --bs-accordion-active-color: #fff;
       --bs-accordion-btn-color: #fff;
   }

   .faq-item {
       background: rgba(255, 255, 255, .04);
       border: 1px solid rgba(255, 255, 255, .14);
       border-radius: 18px;
       overflow: hidden;
       box-shadow: 0 18px 60px rgba(0, 0, 0, .45);
   }

   .faq-item+.faq-item {
       margin-top: 12px;
   }

   /* Button */
   .faq-btn {
       padding: 18px 18px;
       font-weight: 800;
       letter-spacing: .01em;
       line-height: 1.25;
       border: 0;
       background: #fff;
       position: relative;
   }

   .faq-btn::after {
       display: none !important;
       /* quita el caret default de bootstrap */
   }

   /* Plus icon (custom) */
   .faq-plus {
       margin-left: auto;
       width: 18px;
       height: 18px;
       position: relative;
       flex: 0 0 auto;
       opacity: .9;
   }

   .faq-plus::before,
   .faq-plus::after {
       content: "";
       position: absolute;
       inset: 50% auto auto 50%;
       width: 16px;
       height: 2px;
       background: rgba(236, 128, 30, .95);
       transform: translate(-50%, -50%);
       border-radius: 2px;
       transition: transform .22s ease, background .22s ease, opacity .22s ease;
   }

   .faq-plus::after {
       width: 2px;
       height: 16px;
   }

   .accordion-button {
       position: relative;
       display: flex;
       align-items: center;
       width: 100%;
       padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
       font-size: 1rem;
       color: #000 !important;
       text-align: left;
       background-color: var(--bs-accordion-btn-bg);
       border: 0;
       border-radius: 0;
       overflow-anchor: none;
       transition: var(--bs-accordion-transition);
   }

   /* When open -> becomes minus */
   .accordion-button:not(.collapsed) .faq-plus::after {
       opacity: 0;
       transform: translate(-50%, -50%) scaleY(.2);
   }

   .accordion-button:not(.collapsed) .faq-plus::before {
       background: rgba(255, 255, 255, 0.9);
   }

   /* Body */
   .faq-body {
       padding: 18px 18px 18px;
       color: #fff;
       line-height: 1.7;
   }

   /* Hover micro */
   .faq-btn:hover {
       background: rgba(233, 233, 233, 0.8);
   }

   .faq-item:hover {
       border-color: rgba(236, 128, 30, .35);
   }

   /* Responsive */
   @media (max-width: 768px) {
       .faq-btn {
           padding: 16px 16px;
       }

       .faq-body {
           padding: 16px 16px 16px;
       }
   }



   /* =========================
   QUOTES COMIC STYLE (clean bubble)
========================= */
   /* Head */
   .quotes-head {
       max-width: 820px;
   }

   /* =========================
   Swiper layout (centrado)
========================= */

   .quotes-swiper .swiper-slide {
       height: 100%;
   }

   .quote-bubble {
       height: 320px;
       /* AJUSTA ESTE VALOR A TU GUSTO */
       display: flex;
       flex-direction: column;
   }


   .quotes-swiper {
       margin-top: 28px;
       width: 100%;
       max-width: 920px;
       margin-left: auto;
       margin-right: auto;
   }

   .quotes-swiper .swiper-wrapper {
       align-items: center;
   }

   .quotes-swiper .swiper-slide {
       width: 100%;
       display: flex;
       justify-content: center;
       padding: 8px 0;
   }

   /* =========================
   Quote bubble (SIN tail)
========================= */

   .quote-bubble {
       position: relative;
       padding: 34px 30px 22px;
       border-radius: 22px;
       background: rgba(255, 255, 255, .05);
       border: 1px solid rgba(255, 255, 255, .14);
       box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
   }

   /* Comilla */
   .quote-mark {
       position: absolute;
       top: -20px;
       left: 18px;
       font-size: 74px;
       line-height: 1;
       font-weight: 900;
       color: rgba(236, 128, 30, .45);
       pointer-events: none;
   }

   /* Texto (override a p{font-size:20px}) */
   .quote-text {
       margin: 0;
       font-size: clamp(0.95rem, 1vw, 1.05rem);
       line-height: 1.75;
       color: rgba(255, 255, 255, .88);
   }

   /* Firma */
   .quote-by {
       margin-top: 14px;
       display: flex;
       align-items: center;
       gap: 10px;
       font-size: .95rem;
       color: rgba(255, 255, 255, .75);
   }

   .quote-text {
       flex: 1 1 auto;
   }

   .quote-by {
       margin-top: auto;
   }


   .quote-dot {
       width: 8px;
       height: 8px;
       border-radius: 999px;
       background: var(--primario);
       box-shadow: 0 0 0 4px rgba(236, 128, 30, .12);
   }

   /* =========================
   Pagination
========================= */

   .quotes-pagination {
       margin-top: 18px;
       text-align: center;
   }

   .quotes-pagination .swiper-pagination-bullet {
       width: 8px;
       height: 8px;
       background: rgba(255, 255, 255, .35);
       opacity: 1;
   }

   .quotes-pagination .swiper-pagination-bullet-active {
       background: var(--primario);
   }

   /* =========================
   Buttons
========================= */

   .quotes-actions {
       margin-top: 30px;
       display: flex;
       gap: 16px;
       flex-wrap: wrap;
   }

   .quotes-btn {
       padding: 14px 26px;
       font-weight: 900;
       text-decoration: none;
       transition: transform .2s ease, background .2s ease;
   }

   .quotes-btn.primary {
       background: var(--primario);
       color: #000;
   }

   .quotes-btn.primary:hover {
       background: #fff;
       transform: translateY(-2px);
   }

   .quotes-btn.ghost {
       border: 1px solid rgba(255, 255, 255, .35);
       color: #fff;
   }

   .quotes-btn.ghost:hover {
       background: rgba(255, 255, 255, .08);
       transform: translateY(-2px);
   }

   /* =========================
   Responsive
========================= */

   @media (max-width: 768px) {
       .quote-bubble {
           padding: 28px 20px 18px;
       }

       .quote-mark {
           font-size: 58px;
           top: -16px;
       }

       .quotes-actions {
           justify-content: center;
       }
   }


   /* =========================
   NAVBAR MINIMAL
========================= */

   .nav-min {
       background: transparent;
       padding: 14px 0;
       transition: background .22s ease, border-color .22s ease, backdrop-filter .22s ease, padding .22s ease;
       border-bottom: 1px solid transparent;
   }

   .nav-min.is-scrolled {
       background: rgba(0, 0, 0, .55);
       backdrop-filter: blur(10px);
       border-bottom-color: rgba(255, 255, 255, .10);
       padding: 10px 0;
   }

   .nav-brand {
       font-weight: 900;
       letter-spacing: .2px;
       color: #fff;
       text-decoration: none;
   }

   .nav-brand:hover {
       color: #fff;
   }

   .brand-dot {
       color: var(--primario);
   }

   /* Desktop links */
   .nav-link-min {
       color: rgba(255, 255, 255, .80);
       font-weight: 700;
       letter-spacing: .02em;
       padding: 10px 12px !important;
       transition: color .2s ease, transform .2s ease;
   }

   .nav-link-min:hover {
       color: #fff;
       transform: translateY(-1px);
   }

   /* CTA link (pill) */
   .nav-cta {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       padding: 10px 16px !important;
       border-radius: 999px;
       background: rgba(236, 128, 30, .14);
       border: 1px solid rgba(236, 128, 30, .35);
       color: #fff !important;
       font-weight: 800;
       transition: transform .2s ease, background .2s ease, border-color .2s ease;
   }

   .nav-cta:hover {
       background: rgba(236, 128, 30, .22);
       border-color: rgba(236, 128, 30, .55);
       transform: translateY(-1px);
   }

   /* Toggle (mobile) */
   .nav-toggle {
       border: 0;
       padding: 8px 10px;
       box-shadow: none !important;
   }

   .nav-toggle:focus {
       box-shadow: none;
   }

   .nav-toggle-icon {
       width: 28px;
       height: 18px;
       display: block;
       position: relative;
   }

   .nav-toggle-icon::before,
   .nav-toggle-icon::after {
       content: "";
       position: absolute;
       left: 0;
       right: 0;
       height: 2px;
       border-radius: 2px;
       background: rgba(255, 255, 255, .88);
       transition: transform .22s ease, top .22s ease, bottom .22s ease, opacity .22s ease;
   }

   .nav-toggle-icon::before {
       top: 3px;
   }

   .nav-toggle-icon::after {
       bottom: 3px;
   }

   /* Animated icon when open */
   .nav-min.is-open .nav-toggle-icon::before {
       top: 8px;
       transform: rotate(45deg);
   }

   .nav-min.is-open .nav-toggle-icon::after {
       bottom: 8px;
       transform: rotate(-45deg);
   }

   /* Mobile panel (premium collapse) */
   @media (max-width: 991px) {
       .nav-collapse {
           margin-top: 12px;
           border-radius: 18px;
           background: rgba(0, 0, 0, .90);
           border: 1px solid rgba(255, 255, 255, .12);
           box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
           overflow: hidden;
       }

       .nav-links {
           padding: 10px;
           gap: 4px;
       }

       .nav-link-min {
           border-radius: 14px;
           padding: 14px 14px !important;
           background: rgba(255, 255, 255, .03);
           border: 1px solid transparent;
       }

       .nav-link-min:hover {
           background: rgba(255, 255, 255, .06);
           border-color: rgba(236, 128, 30, .22);
           transform: none;
       }

       .nav-cta {
           width: 100%;
           justify-content: center;
           padding: 14px 16px !important;
       }
   }

   /* =========================
   TITLE REVEAL (scroll intensity)
========================= */

   /* =========================
   TITLE REVEAL — intensity scroll
========================= */

   .title-reveal {
       position: relative;
       color: rgba(255, 255, 255, .70);
       max-width: 62ch;
       line-height: 1.7;
       overflow: hidden;
   }

   .title-reveal::after {
       content: attr(data-text);
       position: absolute;
       inset: 0;
       color: #fff;
       pointer-events: none;
       white-space: pre-wrap;

       background: linear-gradient(90deg, #fff 0%, #fff 100%);
       background-repeat: no-repeat;
       background-size: var(--reveal, 0%) 100%;
       background-position: left center;

       -webkit-background-clip: text;
       background-clip: text;
       -webkit-text-fill-color: transparent;

       transition: background-size .25s ease-out;
       will-change: background-size;
   }


   /* =========================
   LOGOS STRIP (carousel)
========================= */

   /* Swiper */
   .logos-swiper {
       margin-top: 30px;
       position: relative;
   }

   .logos-swiper .swiper-wrapper {
       align-items: center;
   }

   .logos-swiper .swiper-slide {
       width: auto;
       display: flex;
       justify-content: center;
   }


   .logo-card:hover {
       transform: translateY(-2px);
       border-color: rgba(236, 128, 30, .35);
       background: rgba(255, 255, 255, .06);
   }

   .logo-img {
       max-width: 100%;
       max-height: 100%;
       object-fit: contain;
       /*        filter: grayscale(1) contrast(1.05);
 */
       opacity: .85;
       transition: filter .22s ease, opacity .22s ease;
   }

   .logo-card:hover .logo-img {
       /*        filter: grayscale(0) contrast(1.05);
 */
       opacity: 1;
   }

   /* fade edges */
   .logos-fade {
       position: absolute;
       top: 0;
       bottom: 0;
       width: 80px;
       pointer-events: none;
       z-index: 2;
   }

   .logos-fade--l {
       left: 0;
       background: linear-gradient(90deg, rgba(0, 0, 0, .95), rgba(0, 0, 0, 0));
   }

   .logos-fade--r {
       right: 0;
       background: linear-gradient(270deg, rgba(0, 0, 0, .95), rgba(0, 0, 0, 0));
   }

   @media (max-width: 576px) {
       .logo-card {
           width: 190px;
           height: 80px;
           border-radius: 16px;
       }
   }



   /* =========================
   CONTACT MINIMAL
========================= */

   .contact-head {
       max-width: 860px;
   }

   .contact-sub {
       color: rgba(255, 255, 255, .70);
       margin: 0 0 18px;
       max-width: 62ch;
       line-height: 1.7;
   }

   .contact-card {
       border-radius: 18px;
       padding: 18px;
       background: rgba(255, 255, 255, .04);
       border: 1px solid rgba(255, 255, 255, .14);
       box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
       position: relative;
       overflow: hidden;
   }

   .contact-card::before {
       content: "";
       position: absolute;
       inset: -2px;
       background:
           radial-gradient(420px 160px at 20% 10%, rgba(236, 128, 30, .10), transparent 60%),
           radial-gradient(420px 160px at 90% 30%, rgba(233, 90, 92, .08), transparent 60%);
       opacity: .75;
       pointer-events: none;
   }

   .contact-card>* {
       position: relative;
       z-index: 1;
   }

   .contact-label {
       display: block;
       font-weight: 800;
       font-size: .85rem;
       letter-spacing: .04em;
       color: rgba(255, 255, 255, .78);
       margin-bottom: 8px;
   }

   .contact-input {
       width: 100%;
       border-radius: 14px;
       padding: 12px 14px;
       background: rgba(0, 0, 0, .55);
       border: 1px solid rgba(255, 255, 255, .14);
       color: #fff;
       outline: none;
       transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
   }

   .contact-input::placeholder {
       color: rgba(255, 255, 255, .45);
   }

   .contact-input:focus {
       border-color: rgba(236, 128, 30, .55);
       box-shadow: 0 0 0 6px rgba(236, 128, 30, .12);
   }

   .contact-textarea {
       resize: vertical;
       min-height: 140px;
   }



   /* Info panel */
   .contact-info {
       display: flex;
       flex-direction: column;
       gap: 16px;
   }

   .contact-kicker {
       font-weight: 900;
       letter-spacing: .18em;
       text-transform: uppercase;
       font-size: .78rem;
       color: rgba(255, 255, 255, .65);
   }

   .contact-info-title {
       margin: 10px 0 8px;
       font-weight: 900;
       line-height: 1.08;
   }

   .contact-info-text {
       margin: 0;
       color: rgba(255, 255, 255, .70);
       line-height: 1.7;
   }

   .contact-list {
       display: grid;
       gap: 12px;
   }

   .contact-line {
       display: flex;
       align-items: center;
       gap: 12px;
       padding: 12px 12px;
       border-radius: 16px;
       background: rgba(0, 0, 0, .40);
       border: 1px solid rgba(255, 255, 255, .10);
       text-decoration: none;
       color: inherit;
       transition: transform .2s ease, border-color .2s ease, background .2s ease;
   }

   .contact-line:hover {
       transform: translateY(-2px);
       border-color: rgba(236, 128, 30, .35);
       background: rgba(0, 0, 0, .55);
   }

   .contact-ic {
       width: 44px;
       height: 44px;
       border-radius: 14px;
       display: grid;
       place-items: center;
       background: rgba(0, 0, 0, .60);
       border: 1px solid rgba(255, 255, 255, .12);
       flex: 0 0 auto;
   }

   .contact-ic .iconify {
       font-size: 22px;
       color: #fff;
       filter: drop-shadow(0 10px 20px rgba(236, 128, 30, .18));
   }

   .contact-line-body {
       display: flex;
       flex-direction: column;
       line-height: 1.2;
   }

   .contact-line-label {
       font-size: .82rem;
       color: rgba(255, 255, 255, .62);
       font-weight: 700;
   }

   .contact-line-value {
       font-size: 1rem;
       color: rgba(255, 255, 255, .90);
       font-weight: 800;
   }

   .contact-note {
       margin-top: auto;
       padding-top: 12px;
       border-top: 1px solid rgba(255, 255, 255, .10);
       display: flex;
       align-items: center;
       gap: 10px;
       color: rgba(255, 255, 255, .70);
       font-size: .95rem;
       line-height: 1.4;
   }

   .note-dot {
       width: 8px;
       height: 8px;
       border-radius: 999px;
       background: var(--secundario);
       box-shadow: 0 0 0 4px rgba(233, 90, 92, .12);
   }

   /* FIX links dentro de contact-line */
   .contact-line-body a {
       display: block;
       text-decoration: none;
       color: inherit;
       line-height: 1.2;
   }

   .contact-line-body a:hover {
       color: #fff;
   }

   html {
       overflow-x: hidden;
   }