/* ====== Reset & tokens ======
   Archivo: CSS/styles.css
   Objetivo:
   - Definir tokens de marca (colores/sombras/radios)
   - Estilos base y layout (mobile-first)
   - Componentes (botones, cards, pills)
   - Animaciones/hover (sin librerías)
   - Ajustes responsive (tablet/mobile)

   Convención:
   - Comentarios "======" separan secciones principales
   - Las reglas se mantienen compactas para rendimiento/lectura
*/
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
:root{
  /* Tokens de marca */
  --brand-navy:#1F2A44;
  --brand-soft:#6F7A90;
  --accent:#4C7AF2;
  --bg:#F6F7FB;
  --text:#1B1F2A;
  --radius:16px;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --shadow-sm:0 2px 10px rgba(0,0,0,.06);
  --border:rgba(0,0,0,.08);
}
body{font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.5}
img{max-width:100%;display:block}
h1,h2,h3{margin:0 0 .6rem 0;color:var(--brand-navy)}
h1{font-size:clamp(2rem,5vw,3.5rem)}
h2{font-size:clamp(1.6rem,3.5vw,2.2rem)}
h3{font-size:clamp(1.1rem,2.2vw,1.4rem)}
/* Fuente del logo - mantener Georgia solo para el nombre de la marca */
.serif{font-family:'Lora',Georgia,Cambria,"Times New Roman",Times,serif}
.brand-navy{color:var(--brand-navy)}
.fw-800{font-weight:800}
.fw-700{font-weight:700}
.fs-12{font-size:1.2rem}
.fs-14{font-size:1.4rem}
.text-muted{color:#5a5e6b}
.text-white{color:#fff}
.text-white-85{color:rgba(255,255,255,.85)}
.muted-92{color:#6b7280}
.mt-06{margin-top:.6rem}
.mtb-12{margin:.6rem 0 1.2rem 0}
.mt-18{margin-top:18px}
.mt-44{margin-top:44px}
.pt-20{padding-top:20px}
.mb-1{margin-bottom:1rem}
.mb-09{margin:.9rem 0 0 0}
.max-56ch{max-width:56ch}

/* ====== Layout base ====== */
.container{width:min(1200px,92%);margin-inline:auto}
.section{padding:64px 0}
.card{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-sm)}
.p-0{padding:0}
.pad-16{padding:16px}
.w-page{width:min(1200px,92%)}
.m-auto{margin-inline:auto}

/* ====== Componentes: botones, pills ====== */
.btn{display:inline-block;background:var(--brand-navy);color:#fff !important;text-decoration:none;padding:.9rem 1.2rem;border-radius:12px;font-weight:600}
.btn-outline{display:inline-block;color:var(--brand-navy);border:2px solid var(--brand-navy);text-decoration:none;padding:.78rem 1.1rem;border-radius:12px;font-weight:600;background:transparent}
.cta .cta-btn{background:var(--brand-navy);color:#fff !important;padding:.85rem 1.2rem;border-radius:12px;text-decoration:none;font-weight:700;display:inline-block}
.pill{display:inline-block;padding:.4rem .8rem;border-radius:999px;background:#fff;box-shadow:inset 0 1px 2px rgba(0,0,0,.06);color:var(--brand-navy);font-size:.82rem}

/* ====== Header / Navbar ======
   - Sticky para mantener navegación visible
   - backdrop-filter para efecto vidrio (si el navegador lo soporta)
*/
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0}
.nav a{color:#464a58;text-decoration:none;margin-left:1.1rem;font-size:.95rem}
.brand{display:flex;align-items:center;gap:.75rem}
.brand-name{font-weight:800;font-size:1.45rem;font-family:Georgia,Cambria,"Times New Roman",Times,serif}
.brand-name-color{color:var(--brand-navy)}
.tagline{color:var(--brand-soft);letter-spacing:.25em;text-transform:uppercase;font-size:.7rem}
.ml-1{margin-left:1rem}

/* ====== Grids responsive ====== */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr}
@media (min-width:900px){.grid-2{grid-template-columns:1.1fr .9fr}}
@media (min-width:700px){.grid-3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.grid-4{grid-template-columns:repeat(4,1fr)}}

/* ====== Hero ====== */
.hero-card{padding:20px}
.hero-logo-row{display:flex;align-items:center;gap:.75rem;margin-top:12px}
.ratio{aspect-ratio:16/10;overflow:hidden;border-radius:14px;background:#eef1f6}
.ratio img{width:100%;height:100%;object-fit:cover}
.hero-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}

/* ====== Servicios ====== */
.svc .thumb{aspect-ratio:4/3;border-bottom:1px solid var(--border);overflow:hidden}
.svc .thumb img{width:100%;height:100%;object-fit:cover}
.svc .body{padding:14px 16px}

/* ====== Por qué / Proceso ====== */
.why .item{padding:20px}
.timeline{position:relative;margin-top:18px}
.timeline::before{content:"";position:absolute;left:0;right:0;top:18px;height:4px;background:#d4d9e2;border-radius:4px}
.timeline .step{position:relative;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-sm);padding:16px 16px 18px}
.timeline .dot{position:absolute;top:-10px;left:calc(50% - 14px);width:28px;height:28px;background:var(--accent);border-radius:50%;box-shadow:0 6px 14px rgba(76,122,242,.35)}
.timeline .label{margin-top:12px;text-align:center;color:#596173;font-size:.9rem;font-weight:600}
.center{text-align:center}

/* ====== Timeline: animación “Nuestro proceso” ======
   - La línea animada se crea vía JS como <div class="timeline-line-animated">
   - Los dots pulsan en secuencia usando la variable CSS --cc-i (set por JS)
*/
@keyframes cc-dot-pulse{
  0%{transform:scale(.85);box-shadow:0 6px 14px rgba(76,122,242,.25)}
  60%{transform:scale(1.08);box-shadow:0 12px 24px rgba(76,122,242,.42)}
  100%{transform:scale(1);box-shadow:0 6px 14px rgba(76,122,242,.35)}
}
@keyframes cc-line-shine{
  0%{background-position:0% 50%}
  100%{background-position:100% 50%}
}

.timeline .timeline-line-animated{
  /* (El div lo crea JS) */
  position:absolute;
  left:0;
  right:0;
  top:18px;
  height:4px;
  border-radius:4px;
  transform-origin:left;
  transform:scaleX(0);
  transition:transform 1.2s ease;
  z-index:1;
  background:linear-gradient(90deg, rgba(76,122,242,.20), var(--accent), rgba(76,122,242,.20));
  background-size:200% 100%;
}
.timeline.is-animating .timeline-line-animated{
  animation:cc-line-shine 1.2s ease both;
}

.timeline .step.is-active{
  border-color:rgba(76,122,242,.32);
  box-shadow:0 18px 44px rgba(76,122,242,.10);
}
.timeline .step.is-active .label{
  color:var(--brand-navy);
}
.timeline.is-animating .dot{
  /* JS setea --cc-i en cada dot */
  animation:cc-dot-pulse .65s ease both;
  animation-delay:calc(.18s + var(--cc-i) * .12s);
}

/* ====== Hovers (sutil + premium) ======
   Nota: evitamos animar layout; usamos transform/box-shadow.
*/

/* Nav links: underline animado (solo links normales, no el botón CTA) */
.nav a:not(.btn):not(.btn-outline){
  position:relative;
}
.nav a:not(.btn):not(.btn-outline)::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:2px;
  background:var(--accent);
  border-radius:2px;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
  opacity:.9;
}
.nav a:not(.btn):not(.btn-outline):hover::after{transform:scaleX(1)}

/* Timeline steps: hover con micro-lift + dot focus */
.timeline .step{
  transition:transform .22s ease, box-shadow .25s ease, border-color .25s ease;
}
.timeline .step:hover{
  transform:translateY(-6px);
  border-color:rgba(76,122,242,.35);
  box-shadow:0 18px 46px rgba(31,42,68,.10);
}
.timeline .step:hover .dot{
  transform:scale(1.08);
  box-shadow:0 12px 26px rgba(76,122,242,.45);
  transition:transform .22s ease, box-shadow .25s ease;
}

/* CTA button: lift + brillo suave */
.cta .cta-btn{
  position:relative;
  overflow:hidden;
}
.cta .cta-btn::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:60%;
  height:180%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg);
  opacity:0;
}
.cta .cta-btn:hover::before{
  opacity:1;
  left:120%;
  transition:left .65s ease, opacity .15s ease;
}

@media (prefers-reduced-motion: reduce){
  .nav a::after,
  .timeline .step,
  .timeline .step:hover,
  .timeline .step:hover .dot,
  .cta .cta-btn::before{
    transition:none !important;
    animation:none !important;
  }
}

/* CTA */
.cta{background:var(--brand-navy);color:#fff;border-radius:20px;padding:28px}
.cta-grid{display:grid;gap:18px;grid-template-columns:1fr;align-items:center}
.mtb-10{margin:.35rem 0 1rem 0}

/* Contacto */
form{display:grid;gap:.75rem}
input,textarea{border:1px solid var(--border);border-radius:12px;padding:.75rem;font:inherit}
textarea{min-height:120px;resize:vertical}
.contact-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:.75rem 0}
.btn-whatsapp{
  background:#25D366;
  color:#0b1b12 !important;
  font-weight:800;
}
.btn-whatsapp:hover{
  background:#1fb458;
}

/* Footer */
footer{background:#fff;border-top:1px solid var(--border);padding:22px 0;color:#666}
.footer-flex{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.footer-links{display:flex;gap:10px;align-items:center}
.footer-links .social-link{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--brand-navy);
  text-decoration:none;
  transition:transform .2s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}
.footer-links .social-link svg{fill:currentColor}
.footer-links .social-link:hover{
  transform:translateY(-2px);
  border-color:rgba(76,122,242,.35);
  box-shadow:0 10px 22px rgba(31,42,68,.14);
}
.footer-links .social-link:focus-visible{
  outline:3px solid rgba(76,122,242,.35);
  outline-offset:2px;
}

/* Utilities */
.flex-row{display:flex;flex-wrap:wrap}
.gap-07{gap:.7rem}
.p-0{padding:0}

/* Accessibility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.subtle{color:#6b7280;font-size:.92rem}
.card-inline{display:flex;gap:14px;align-items:center;padding:14px 16px;width:100%}
.avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 50%}
/* Ajuste de encuadre para que no se recorte la parte superior de la foto */
.avatar--winny{object-position:50% 20%}

/* ====== About / Quiénes somos ======
   Objetivo:
   - Unificar la columna visual (título + contenido) para evitar “flotación”
   - Reutilizar el mismo ancho para la sección “Quiénes somos” y el bloque destacado de la CEO
*/
.about-block{max-width:820px;margin-inline:auto}
.about-card{width:100%;padding:18px 18px 16px;margin-top:14px}
.about-quote{
  margin:14px 0 0 0;
  padding:12px 14px;
  border-left:4px solid rgba(76,122,242,.55);
  background:#f6f8ff;
  border-radius:14px;
  color:var(--brand-navy);
}
.about-quote p{margin:0}
.about-quote cite{display:block;margin-top:10px;color:#596173;font-style:normal;font-weight:700}
.about-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:12px}
/* Pills (Quiénes somos): micro-interacción sutil para detalle “premium”
   Nota: las pills son informativas (no enlaces). Si en el futuro se convierten
   en links/botones, este hover/focus se reutiliza sin cambios.
*/
.about-tags .pill{
  border:1px solid rgba(31,42,68,.10);
  transition:transform .18s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
}
.about-tags .pill:hover{
  transform:translateY(-2px);
  border-color:rgba(76,122,242,.35);
  background:#f6f8ff;
  box-shadow:0 10px 22px rgba(31,42,68,.10);
}
.about-tags .pill:focus-visible{
  outline:3px solid rgba(76,122,242,.35);
  outline-offset:2px;
}

/* ====== CEO highlight (Winny) ======
   Bloque de refuerzo visual dentro de "Quiénes somos":
   - Separación clara, pero alineada con el contenido (fluido)
   - Acento de marca + fondo suave para destacar el mensaje
*/
.ceo-highlight{margin-top:16px}
.ceo-kicker{
  display:inline-block;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.72rem;
  color:var(--brand-soft);
  margin:6px 0 10px 0;
}
.ceo-card{
  border:1px solid rgba(76,122,242,.22);
  background:linear-gradient(180deg, #f6f8ff 0%, #ffffff 55%);
  border-radius:18px;
  padding:14px 14px 12px 14px;
  box-shadow:0 16px 44px rgba(31,42,68,.10);
}
/* Reutilizamos la estructura inline, pero sin "card" propio para evitar doble borde/sombra */
.ceo-person{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  max-width:none;
}
.ceo-card .about-quote{background:#fff}
/* Evitar hover “lift” heredado de .card-inline dentro del bloque CEO */
.ceo-person:hover{transform:none !important;box-shadow:none !important}

/* ====== Animaciones base (scroll + hover) ====== */

/* Elementos que se animan al hacer scroll
   - Por defecto NO ocultamos (si JS no carga, el sitio se ve normal)
   - Cuando JS carga, añade .js al <html> y entonces sí aplicamos el estado inicial
*/
.animate-on-scroll{opacity:1;transform:none}
.js .animate-on-scroll{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease,transform .7s ease;
  will-change:opacity,transform;
}
.fade-in{opacity:0}
.slide-up{transform:translateY(18px)}
.js .animate-on-scroll.is-visible{opacity:1;transform:translateY(0)}
.js .animate-on-scroll.fade-in.slide-up{opacity:1;transform:translateY(0)}

/* Header con sombra más pronunciada al hacer scroll */
header{transition:box-shadow .25s ease,background-color .25s ease}
header.header-scrolled{box-shadow:0 10px 28px rgba(0,0,0,.12)}

/* Hover / transiciones suaves generales */
.card{transition:transform .25s ease,box-shadow .25s ease}
.svc.card:hover,
.why .item:hover,
.card-inline:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 34px rgba(0,0,0,.10);
}
.svc .thumb img,.ratio img{transition:transform .5s ease}
.svc.card:hover .thumb img,.hero-card:hover .ratio img{transform:scale(1.04)}
.btn,.btn-outline,.cta .cta-btn{
  transition:transform .2s ease,box-shadow .25s ease,background-color .25s ease,color .25s ease,border-color .25s ease;
}
.btn:hover,.cta .cta-btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(31,42,68,.22)}
.btn-outline:hover{transform:translateY(-2px);background:var(--brand-navy);color:#fff}

/* Accesibilidad: respetar reduce motion */
@media (prefers-reduced-motion: reduce){
  html:focus-within{scroll-behavior:auto}
  *,:before,:after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .animate-on-scroll{opacity:1;transform:none}
  /* Evitar micro-movimientos “hover-lift” en usuarios con reduce motion */
  .about-tags .pill{transition:none !important}
}

/* ====== Responsive refinements (mobile/tablet) ======
   Nota: las grids ya son mobile-first; aquí afinamos nav, espaciados y timeline.
*/

/* Tablet y abajo */
@media (max-width: 900px){
  .section{padding:54px 0}
}

/* Mobile: navegación más compacta + timeline vertical */
@media (max-width: 720px){
  /* Header / Nav */
  .nav{flex-direction:column;align-items:flex-start;gap:10px}
  .nav > div:last-child{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
  .nav a{margin-left:0}
  .ml-1{margin-left:0}

  /* Botón CTA de la nav: ocupa toda la línea si hace falta */
  .nav .btn{padding:.78rem 1.05rem}

  /* Ajustes de tipografía / marca */
  .brand-name{font-size:1.25rem}
  .tagline{letter-spacing:.18em}

  /* Hero */
  .hero-card{padding:16px}
  .ratio{border-radius:16px}

  /* Timeline en vertical (mejor lectura en una sola columna) */
  .timeline{padding-left:14px}
  .timeline::before{
    left:18px;
    right:auto;
    top:18px;
    bottom:18px;
    width:4px;
    height:auto;
  }
  .timeline .timeline-line-animated{
    left:18px;
    right:auto;
    top:18px;
    bottom:18px;
    width:4px;
    height:auto;
    transform-origin:top;
    transform:scaleY(0);
    transition:transform 1.2s ease;
    background:linear-gradient(180deg, rgba(76,122,242,.20), var(--accent), rgba(76,122,242,.20));
    background-size:100% 200%;
  }
  .timeline.is-animating .timeline-line-animated{
    /* reutiliza el keyframe, pero en vertical se verá como “barrido” */
    animation:none;
  }
  .timeline.is-animating .timeline-line-animated{transform:scaleY(1)}

  .timeline .step{
    padding-left:54px;
  }
  .timeline .dot{
    left:18px;
    top:18px;
    transform:translate(-50%,-50%);
  }
  .timeline .label,
  .timeline .step h3,
  .timeline .step p{
    text-align:left;
  }

  /* Quiénes somos / CEO: espaciado más cómodo en mobile */
  .about-card{padding:16px}
  .about-quote{padding:10px 12px}
  .about-quote cite{margin-top:8px}
  .ceo-card{padding:12px}
}

/* Mobile pequeño */
@media (max-width: 420px){
  .section{padding:46px 0}
  .btn,.btn-outline,.cta .cta-btn{width:100%;text-align:center}
  .cta{padding:22px}
  .footer-flex{gap:10px}

  /* About: evita que las pills se vean grandes en pantallas muy pequeñas */
  .about-card{padding:14px}
  .about-tags{gap:.4rem}
  .about-tags .pill{font-size:.78rem;padding:.35rem .7rem}
  .ceo-card{padding:12px}
}