/* ===================================
    Coudibot - Home / Landing (rediseño)
====================================== */
:root{
  --blue-700:#1a4fd1;
  --blue-600:#2563eb;
  --blue-500:#3b76f6;
  --blue-100:#e8f0fe;
  --blue-50:#f4f8ff;
  --navy:#0b1220;
  --gray-600:#5b6478;
  --gray-400:#8b93a7;
  --border:#e6eaf2;
  --radius-lg:24px;
  --radius-md:16px;
  --shadow-soft:0 20px 45px -20px rgba(20,40,90,.25);
  --shadow-card:0 10px 30px -12px rgba(20,40,90,.15);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
/* el robot sale del hero al hacer scroll: nada debe generar scroll horizontal */
html,body{overflow-x:clip;}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--navy);
  background:#fff;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.container{max-width:1180px;margin:0 auto;padding:0 24px;}

/* NAV */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
nav.container{display:flex;align-items:center;justify-content:space-between;height:76px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;}
.brand img{height:30px;width:auto;}
.nav-links{display:flex;gap:32px;font-size:15px;font-weight:500;color:var(--gray-600);}
.nav-links a:hover{color:var(--navy);}
.nav-actions{display:flex;align-items:center;gap:12px;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border-radius:999px;font-weight:600;font-size:14.5px;
  border:1px solid transparent;cursor:pointer;transition:background-color .18s ease,border-color .18s ease,color .18s ease;
  white-space:nowrap;
}
.btn-ghost{color:var(--navy);border-color:var(--border);background:#fff;}
.btn-ghost:hover{border-color:var(--navy);}
.btn-primary{background:var(--blue-600);color:#fff;box-shadow:0 10px 24px -8px rgba(37,99,235,.55);}
.btn-primary:hover{background:var(--blue-700);}
.btn-lg{padding:15px 28px;font-size:16px;}

/* HERO */
.hero{
  position:relative;overflow:visible; /* visible: el robot sale volando fuera del hero */
  /* ocupa toda la pantalla visible menos el header sticky (76px + 1px de borde) */
  min-height:calc(100vh - 77px);
  min-height:calc(100svh - 77px);
  display:flex;align-items:center;
  padding:40px 0;
  background:
    radial-gradient(680px 420px at 82% 10%, #dfe9ff 0%, rgba(223,233,255,0) 70%),
    #fff;
}
.hero-grid{
  width:100%;
  display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--blue-100);color:var(--blue-700);
  font-size:13.5px;font-weight:700;padding:7px 16px;border-radius:999px;
  margin-bottom:22px;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--blue-600);display:inline-block;}
h1{
  font-size:52px;line-height:1.08;letter-spacing:-1.5px;margin:0 0 22px;font-weight:800;
}
h1 .accent{color:var(--blue-600);}
.hero p.slogan{
  font-size:19px;font-weight:700;color:var(--blue-600);letter-spacing:-.2px;margin:0 0 16px;
}
.hero p.lead{
  font-size:18.5px;color:var(--gray-600);max-width:520px;margin:0 0 34px;
}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px;}
.rating-row{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--gray-600);}
/* botón con reflejo de luz ("Cotiza para tu agencia"): una franja clara cruza el botón de izquierda a derecha.
   GSAP mueve --sx (100% = fuera a la izquierda, 0% = fuera a la derecha), igual que en las estrellas */
.btn-shine{--sx:100%;position:relative;overflow:hidden;isolation:isolate;}
.btn-shine::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(110deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.18) 44%,rgba(255,255,255,.5) 50%,rgba(255,255,255,.18) 56%,rgba(255,255,255,0) 66%)
    var(--sx) 0 / 300% 100% no-repeat;
}

/* estrellas de oro metálico: dos capas pintadas dentro del texto (background-clip:text):
   1) franja de luz que GSAP desplaza de izquierda a derecha con --sx (100% = fuera a la izquierda, 0% = fuera a la derecha)
   2) degradado dorado tipo metal pulido (claro arriba, oscuro al centro, reflejo abajo) */
.stars{
  --sx:100%;
  display:inline-block;font-size:20px;letter-spacing:3px;line-height:1;
  color:#f5a623; /* respaldo si el navegador no soporta texto con degradado */
  background:
    linear-gradient(110deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.35) 44%,rgba(255,255,255,.85) 50%,rgba(255,255,255,.35) 56%,rgba(255,255,255,0) 66%) var(--sx) 0 / 300% 100% no-repeat,
    linear-gradient(180deg,#fff4c2 0%,#ffd34d 28%,#e9a30c 52%,#b8730a 66%,#f6c445 84%,#fff0a8 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(150,90,0,.55)) drop-shadow(0 2px 4px rgba(200,130,0,.3));
}
.rating-row b{color:var(--navy);}

.hero-art{position:relative;z-index:10;display:flex;justify-content:center;align-items:center;min-height:560px;}
/* contenedor del robot del mismo tamaño que .hero-art: el scroll lo anima sin tocar al robot */
.bot-fly{position:absolute;inset:0;z-index:5;pointer-events:none;}
.blob{
  position:absolute;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #cfe0ff, #eef4ff 60%, rgba(255,255,255,0) 75%);
  filter:blur(2px);
}
.phone-wrap{position:relative;z-index:2;}
.phone-wrap img.phone-mock{
  display:block;width:300px;
  filter:drop-shadow(0 30px 45px rgba(20,40,90,.3));
}
.bot-accent{
  /* va fuera del teléfono (en .hero-art) para quedar por encima de las tarjetas al volar.
     Posición relativa al centro del teléfono (centrado en .hero-art; alto del teléfono = ancho x 1.76) */
  position:absolute;z-index:5;width:232px;
  left:calc(50% - 280px);bottom:calc(50% - 288px);
  filter:drop-shadow(0 20px 26px rgba(20,40,90,.3));
  container-type:inline-size; /* los ojos se miden en cqw: % del ancho del robot */
}
.bot-accent img{display:block;width:100%;height:auto;position:relative;}
/* capa del robot en dos alas, detrás del cuerpo. Cada ala gira desde su punto de unión
   (transform-origin, medido sobre el lienzo de coudi1.png) y home.js la anima con GSAP */
.bot-cape{position:absolute;inset:0;background:center / 100% 100% no-repeat;}
/* parte interior de la capa: fija, se ve por los huecos entre brazo, torso y piernas */
.bot-cape-fondo{background-image:url(../../img/avatar/bot-capa-fondo.webp);}
.bot-cape-izq{background-image:url(../../img/avatar/bot-capa-izq.webp);transform-origin:43.2% 47.8%;}
.bot-cape-der{background-image:url(../../img/avatar/bot-capa-der.webp);transform-origin:56% 46.9%;}
/* ojos animables: cada ojo tapa el anillo original con negro y dibuja uno propio encima */
.bot-eye{
  position:absolute;left:var(--x);top:var(--y);
  width:var(--d);height:var(--d);
  margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
}
.bot-eye::before{
  content:"";position:absolute;inset:-38%;border-radius:50%;
  background:radial-gradient(circle,rgb(0,3,9) 58%,rgba(0,3,9,0) 71%);
}
/* anillo de neón: tubo celeste + núcleo casi blanco + capas de resplandor.
   --g controla la intensidad del brillo (GSAP la anima para que "respire" y parpadee) */
.bot-eye-ring{
  --g:1;
  position:absolute;inset:0;border-radius:50%;
  border:.74cqw solid #2ccfff;
  box-shadow:
    0 0 calc(.45cqw * var(--g)) #c8f6ff,
    0 0 calc(1.1cqw * var(--g)) #00befb,
    0 0 calc(2.4cqw * var(--g)) rgba(0,190,251,.8),
    0 0 calc(4.2cqw * var(--g)) rgba(0,150,255,.5),
    inset 0 0 calc(.45cqw * var(--g)) #c8f6ff,
    inset 0 0 calc(1.3cqw * var(--g)) rgba(0,190,251,.75);
}
/* núcleo brillante: una línea fina casi blanca al centro del tubo */
.bot-eye-ring::after{
  content:"";position:absolute;border-radius:50%;
  inset:calc(-.37cqw - .11cqw);
  border:.22cqw solid rgba(230,253,255,.9);
  filter:blur(.08cqw);
}
.float-card{
  position:absolute;background:#fff;border-radius:12px;box-shadow:var(--shadow-card);
  padding:9px 18px;font-size:11px;font-weight:600;display:flex;align-items:center;gap:9px;
  border:1px solid var(--border);z-index:4;white-space:nowrap;
}
.float-card .ico{
  width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.float-card .ico svg{width:14px;height:14px;}
.float-card.c1{top:6%;right:-2%;}
.float-card.c1 .ico{background:var(--blue-100);color:var(--blue-600);}
.float-card.c2{bottom:6%;right:4%;}
.float-card.c2 .ico{background:#e8faf0;color:#1f9d55;}
.float-card small{display:block;font-weight:500;color:var(--gray-600);font-size:10px;}

/* STATS BAR */
.stats-bar{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--blue-50);}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:36px 0;
}
.stat{text-align:center;padding:0 20px;border-left:1px solid var(--border);}
.stat:first-child{border-left:none;}
.stat .num{font-size:30px;font-weight:800;color:var(--blue-700);letter-spacing:-1px;}
.stat .label{font-size:13.5px;color:var(--gray-600);margin-top:4px;}

/* SECTION HEADS */
section{padding:100px 0;}
.section-head{max-width:640px;margin:0 auto 56px;text-align:center;}
.section-head .eyebrow{background:var(--blue-100);}
.section-head h2{font-size:38px;letter-spacing:-1px;margin:0 0 16px;font-weight:800;}
.section-head p{color:var(--gray-600);font-size:17px;margin:0;}

/* FEATURES */
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.feature-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:0 0 28px;overflow:hidden;
}
.feature-media{
  height:190px;display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--border);
}
.feature-media img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;}
.feature-media.icon-only{background:linear-gradient(160deg,var(--blue-600),var(--blue-700));}
.feature-media.icon-only span{font-size:52px;}
.feature-body{padding:22px 24px 0;}
.feature-body h3{font-size:18.5px;margin:0 0 10px;font-weight:700;}
.feature-body p{font-size:14.5px;color:var(--gray-600);margin:0;}

/* HOW IT WORKS */
.how-wrap{background:var(--navy);border-radius:32px;padding:70px 60px;color:#fff;position:relative;overflow:hidden;}
.how-wrap .section-head h2,.how-wrap .section-head p{color:#fff;}
.how-wrap .section-head p{color:#aab4c8;}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;position:relative;z-index:2;}
.step{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:28px 26px;}
.step .step-num{
  width:42px;height:42px;border-radius:12px;background:var(--blue-600);
  display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:18px;
}
.step h3{font-size:17.5px;margin:0 0 10px;}
.step p{font-size:14px;color:#c3cbdc;margin:0;}
.how-glow{position:absolute;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(59,118,246,.35),transparent 70%);
  top:-160px;right:-120px;z-index:1;}

/* TESTIMONIAL */
.testimonial-wrap{
  position:relative;
  min-height:340px;
  background:var(--blue-50);border-radius:32px;overflow:hidden;
}
.testimonial-content{
  box-sizing:border-box;min-height:340px;
  padding:40px 60px;padding-right:calc(40% + 40px);
  display:flex;flex-direction:column;justify-content:center;
}
/* contenedor dedicado a la imagen: se ancla a los 4 bordes del recuadro */
.testimonial-art{
  position:absolute;top:0;right:0;bottom:0;width:40%;
}
.testimonial-media{position:absolute;inset:0;overflow:hidden;}
.testimonial-media img{width:100%;height:100%;object-fit:cover;display:block;}
.quote-mark{font-size:64px;color:var(--blue-600);line-height:1;font-family:Georgia,serif;margin-bottom:6px;}
blockquote{margin:0 0 24px;font-size:22px;font-weight:600;letter-spacing:-.3px;line-height:1.4;}
.testimonial-author{display:flex;align-items:center;gap:14px;}
.avatar-circle{
  width:48px;height:48px;border-radius:50%;background:var(--blue-600);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;
}
.testimonial-author .name{font-weight:700;font-size:15px;}
.testimonial-author .role{font-size:13.5px;color:var(--gray-600);}
.testimonial-stars{color:#f5a623;margin-bottom:14px;font-size:16px;letter-spacing:2px;}

/* PRICING CTA */
.pricing-cta{
  position:relative;
  min-height:320px;
  background:var(--blue-50);
  border-radius:32px;color:var(--navy);
  overflow:hidden;
}
.pricing-content{
  box-sizing:border-box;min-height:320px;
  padding:64px 60px;padding-right:calc(40% + 40px);
  display:flex;flex-direction:column;justify-content:center;
}
.pricing-content .btn{align-self:flex-start;}
.pricing-cta h2{font-size:34px;letter-spacing:-1px;margin:0 0 16px;font-weight:800;color:var(--navy);}
.pricing-cta p{font-size:16.5px;color:var(--gray-600);max-width:480px;margin:0 0 28px;}
/* contenedor dedicado a la imagen: se ancla a los 4 bordes del recuadro */
.pricing-art{
  position:absolute;top:0;right:0;bottom:0;width:40%;
}
.pricing-media{position:absolute;inset:0;overflow:hidden;}
.pricing-media img{width:100%;height:100%;object-fit:cover;display:block;}

/* FOOTER */
footer{border-top:1px solid var(--border);padding:60px 0 30px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px;}
.footer-brand .brand{margin-bottom:14px;}
.footer-brand p{color:var(--gray-600);font-size:14px;max-width:280px;}
.footer-col h4{font-size:14px;margin:0 0 16px;font-weight:700;}
.footer-col a{display:block;font-size:14px;color:var(--gray-600);margin-bottom:10px;}
.footer-col a:hover{color:var(--navy);}
.footer-bottom{
  border-top:1px solid var(--border);padding-top:24px;
  display:flex;justify-content:space-between;align-items:center;
  font-size:13px;color:var(--gray-400);
}
.footer-social{display:flex;gap:14px;}
.footer-social a{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--gray-600);
}

/* ENTRADAS: todas las animaciones las hace GSAP (home.js).
   La clase gsap-on se pone en <head> y oculta el hero antes del primer pintado. */
.gsap-on .hero-copy > *,
.gsap-on .blob,
.gsap-on .phone-wrap,
.gsap-on .bot-accent,
.gsap-on .float-card{visibility:hidden;}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;text-align:center;}
  .hero p.lead{margin-left:auto;margin-right:auto;}
  .hero-ctas,.rating-row{justify-content:center;}
  .hero-art{margin-top:20px;min-height:460px;}
  .phone-wrap img.phone-mock{width:250px;}
  .bot-accent{width:200px;left:calc(50% - 205px);bottom:calc(50% - 238px);}
  .float-card.c1{top:2%;right:2%;}
  .float-card.c2{bottom:2%;right:2%;}
  .stats-grid{grid-template-columns:repeat(2,1fr);row-gap:24px;}
  .stat:nth-child(3){border-left:none;}
  .features-grid{grid-template-columns:repeat(2,1fr);}
  .how-wrap{padding:50px 26px;}
  .steps{grid-template-columns:1fr;}
  .pricing-cta{display:flex;flex-direction:column;min-height:auto;}
  .pricing-content{
    order:2;position:static;width:100%;min-height:auto;
    padding:40px 28px;padding-right:40px;text-align:center;
  }
  .pricing-art{order:1;position:relative;top:auto;right:auto;bottom:auto;width:100%;height:220px;}
  .testimonial-wrap{display:flex;flex-direction:column;min-height:auto;}
  .testimonial-content{
    order:2;position:static;width:100%;min-height:auto;
    padding:40px 28px;text-align:center;
  }
  .testimonial-art{order:1;position:relative;top:auto;right:auto;bottom:auto;width:100%;height:220px;}
  .testimonial-author{justify-content:center;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .nav-links{display:none;}
}
@media (max-width:560px){
  h1{font-size:36px;}
  .section-head h2{font-size:28px;}
  .features-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  section{padding:64px 0;}
}

/* HERO a pantalla completa en escritorio: header + hero siempre caben en la ventana.
   Todo escala con el ancho Y el alto de la pantalla (lo que sea más chico),
   y las piezas de la imagen se miden respecto al ancho del teléfono (--pw). */
@media (min-width:981px){
  .container{max-width:clamp(1180px,80vw,1440px);}
  .hero{
    height:calc(100vh - 77px);
    height:calc(100svh - 77px);
    min-height:520px;
    padding:clamp(16px,3vh,40px) 0;
  }
  .hero-grid{height:100%;gap:clamp(24px,3vw,64px);}
  .eyebrow{font-size:clamp(12px,min(.85vw,1.6vh),15px);margin-bottom:clamp(10px,2.2vh,24px);}
  .hero h1{font-size:clamp(34px,min(3.5vw,6.6vh),66px);margin-bottom:clamp(10px,2.2vh,24px);}
  .hero p.slogan{font-size:clamp(16px,min(1.3vw,2.4vh),23px);margin-bottom:clamp(8px,1.6vh,18px);}
  .hero p.lead{
    font-size:clamp(15px,min(1.2vw,2.3vh),21px);
    max-width:34em;margin-bottom:clamp(16px,3.4vh,38px);
  }
  .hero-ctas{margin-bottom:clamp(14px,3vh,32px);}
  .hero .btn-lg{
    font-size:clamp(14px,min(1vw,2vh),18px);
    padding:clamp(10px,1.6vh,17px) clamp(20px,1.8vw,32px);
  }
  .rating-row{font-size:clamp(13px,min(.85vw,1.7vh),16px);}

  .hero-art{
    --pw:clamp(190px,min(20vw,calc((100svh - 77px) * .44)),380px);
    min-height:0;height:100%;
  }
  .blob{width:calc(var(--pw) * 1.6);height:calc(var(--pw) * 1.6);}
  .phone-wrap img.phone-mock{width:var(--pw);}
  .bot-accent{
    width:calc(var(--pw) * 1.03);
    left:calc(50% - var(--pw) * 1.09);
    bottom:calc(50% - var(--pw) * .98);
  }
  /* tarjetas pegadas al teléfono, no a las esquinas del contenedor */
  .float-card{
    font-size:clamp(11px,calc(var(--pw) * .04),14px);
    padding:calc(var(--pw) * .03) calc(var(--pw) * .06);
  }
  .float-card small{font-size:clamp(10px,calc(var(--pw) * .035),12.5px);}
  .float-card.c1{top:calc(50% - var(--pw) * .8);left:calc(50% + var(--pw) * .3);right:auto;bottom:auto;}
  .float-card.c2{top:calc(50% + var(--pw) * .55);left:calc(50% + var(--pw) * .2);right:auto;bottom:auto;}
}

/* las secciones no quedan tapadas por el header sticky al usar el menú */
section{scroll-margin-top:77px;}

/* ===== Soporte para animaciones GSAP ===== */
/* barra de progreso de lectura bajo el header */
.scroll-progress{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  background:linear-gradient(90deg,var(--blue-600),#60a5fa);
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none;
}
/* ScrollSmoother: el contenido arranca bajo el header fijo */
#smooth-content{padding-top:77px;}
/* SplitText (máscara por palabra): deja aire para descendentes como g, p, y */
.split-word-mask{padding-bottom:.12em;margin-bottom:-.12em;}
/* tarjetas de funciones: inclinación 3D al pasar el cursor */
.feature-card{transform-style:preserve-3d;will-change:transform;}
/* conectores entre los números de los pasos (los crea y posiciona home.js) */
.step-link{
  position:absolute;z-index:3;pointer-events:none;border-radius:2px;
  background:linear-gradient(90deg,#3b76f6,#8fb4ff);
  transform-origin:0 50%;
}
.step-link.is-vertical{background:linear-gradient(180deg,#3b76f6,#8fb4ff);transform-origin:50% 0;}