* ===========================
   Variables & helpers
=========================== */
:root{
  --about-brand: #9eca41;
  --about-50:   #F3FBE6;
  --about-100:  #E6F6CC;
  --ink:        #0b1020;
  --ink-soft:   #64748b;
  --radius: 16px;
}



.about-sec__head{ text-align:left; margin:3rem 0 1.2rem; }
.about-sec__head h2{ font-size:clamp(1.8rem,2.8vw,2.4rem); margin:0 0 .4rem; }
.about-sec__head p{ margin:.2rem 0 0; color:var(--ink-soft); }

/* ============================== */
/* HERO DISEÑO WEB — RESPONSIVE   */
/* Soporta .fondo_nosotros + glows */
/* ============================== */




/* === FONDO NOSOTROS === */
.fondo_nosotros{
  position:relative;
  overflow:hidden;
  background:
  radial-gradient(1400px 300px at 80% 0%, rgba(231,221,233,.15), transparent 40%),
  linear-gradient(180deg, #e5c63ca3 0%, #ffffff 100%);
  padding-top: 80px;
}
.fondo_nosotros__inner{
  width:var(--maxw);
  margin-inline:auto;
  padding: clamp(72px, 10vw, 120px) 16px clamp(48px, 6vw, 72px);
  text-align:center; /* centrado típico del hero */
}

.ha-hero{position:relative;width:100%;height:100vh;overflow:hidden;background:var(--bg-hero);color:#111;padding-top: 80px;}


/* ===== ICONO CHECK (animación por trazo) ===== */
.icon-check .tick-circle,
.icon-check .tick-mark{
  stroke: currentColor;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100; /* “línea por dibujar” */
  stroke-dashoffset: 100;
}
.icon-check .tick-circle{ opacity:.30; }

/* HISTORIA (timeline) */
.about-history-v2{ padding:3.6rem 1.25rem; background:#fff; color:var(--ink); }
.ahv-line{ position:relative; max-width:1100px; margin:0 auto; }

/* barra base */
.ahv-line::before{
  content:""; position:absolute; left:0; right:0; top:42px; height:4px;
  background:#e7eedb; border-radius:999px;
}
/* barra activa */
.ahv-bar{
  position:absolute; left:0; top:42px; height:4px; width:0%;
  background:linear-gradient(90deg, var(--about-brand), #a7e34a);
  border-radius:999px; transition:width .25s ease;
}
.ahv-list{
  position:relative; display:grid; grid-template-columns:repeat(4,1fr);
  gap:1rem; list-style:none; padding:0; margin:0;
}
.ahv-item{ text-align:center; opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease; }
.ahv-item.in{ opacity:1; transform:none; }
.ahv-dot{
  display:inline-grid; place-items:center; width:56px; height:56px; border-radius:50%;
  background:var(--about-brand); color:#fff; font-weight:800; margin:0 auto 10px;
  box-shadow:0 0 0 8px rgba(130,189,3,.18);
}
.ahv-card{
  background:#fff; border:1px solid #e6eed8; border-radius:12px; padding:.9rem 1rem;
  box-shadow:0 6px 16px rgba(130,189,3,.08);
}

/* responsive timeline */
@media (max-width:900px){
  .ahv-line::before, .ahv-bar{ display:none; }
  .ahv-list{ grid-template-columns:1fr; }
  .ahv-item{ text-align:left; }
  .ahv-dot{ margin:0 0 8px; }
}

/* EQUIPO */
.about-team{ padding:2.4rem 1.25rem 3.6rem; background:#F7F9F4; }
.about-team__grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.t-card{
  background:#fff; border:1px solid #ebeef0; border-radius:var(--radius);
  padding:1.1rem; box-shadow:0 8px 20px rgba(16,19,23,.06);
  transform:perspective(900px) translateZ(0);
  transition:transform .15s, box-shadow .2s, border-color .2s;
}
.t-card:hover{ border-color:var(--about-100); box-shadow:0 18px 40px rgba(16,19,23,.08); }
.t-figure{ display:grid; place-items:center; margin:0 0 .6rem; }
.t-avatar{ width:220px; height:220px; display:block; filter: drop-shadow(0 10px 24px rgba(130,189,3,.15)); }
.t-figure figcaption{ margin-top:.35rem; font-weight:700; }

/* CTA AUDITORÍA + CTA FINAL */
.cta-audit{ padding:3.2rem 1.25rem; background:#fff; }
.cta-audit__wrap{
  width:var(--maxw); margin-inline:auto; text-align:center;
  border:1px solid #eaeaea; border-left:4px solid var(--about-brand);
  border-radius:14px; padding:1.2rem; box-shadow:0 10px 28px rgba(130,189,3,.08);
}
.cta-actions{ display:flex; justify-content:center; gap:.7rem; flex-wrap:wrap; margin-top:.6rem; }
.cta-btn{ display:inline-block; padding:.9rem 1.1rem; border-radius:12px; text-decoration:none; border:1px solid var(--about-brand); font-weight:650; }
.cta-primary{ background:var(--about-brand); color:#fff; }
.cta-outline{ background:#fff; color:#1b1b1b; }

.cta-band{ padding:3.8rem 1.25rem; background:linear-gradient(180deg, var(--about-50), #fff); }
.cta-wrap{ width:var(--maxw); margin-inline:auto; text-align:center; }
.cta-wrap h2{ font-size:clamp(1.8rem,2.8vw,2.4rem); margin:0 0 .4rem; }
.cta-wrap p{ margin:.2rem 0 1rem; color:#2b2b2b; }
.cta-chips{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; list-style:none; padding:0; margin:0 0 1rem; }
.cta-chips li{
  background:#fff; border:1px solid var(--about-100); padding:.4rem .7rem; border-radius:999px;
  font-weight:600; box-shadow:0 8px 20px rgba(130,189,3,.08);
}



/* Accesibilidad: sin animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce){
  .icon-check .tick-circle, .icon-check .tick-mark{
    animation:none !important;
    stroke-dasharray:0;
    stroke-dashoffset:0;
  }
}


/* --- Dibujo del check al entrar en viewport --- */
.icon-check.is-in .tick-circle{
  animation: checkDraw 0.9s ease forwards;
}
.icon-check.is-in .tick-mark{
  animation: checkDraw 0.8s ease 0.25s forwards; /* empieza un poco después del círculo */
}

@keyframes checkDraw {
  to { stroke-dashoffset: 0; }
}

/* Color por si currentColor hereda un tono muy claro */
.sh-bullets .icon-check{ color:#2b2b2b; opacity:.95; }


/* ============================================================
   BLOQUE 5 — "De entre tantos, ¿por qué nosotros?"
   - Se usa en la sección: <section class="why-us" id="por-que-nosotros">…</section>
   - Estructura:
       .why-us (sección)
         .why-wrap (contenedor centrado)
           .why-head (título + lead)
           .why-grid (grid responsive de razones/pilares)
             .why-item (tarjeta)
               .why-title (pilar resumido)
               .why-quote (mini testimonio/idea del cliente)
               .why-meta (nombre/cargo)
   - Toma tokens existentes: --maxw, --about-brand, --about-50, --about-100
============================================================ */
.why-us{
  position: relative;
  background:
    radial-gradient(700px 300px at 100% 0%, rgba(177,158,239,.12), transparent 60%),
    linear-gradient(180deg, #fff, #fafdf5);
  color: var(--ink);
  padding: clamp(54px, 7vw, 96px) 16px;
  border-top: 1px solid rgba(0,0,0,.04);
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.why-wrap{ width: var(--maxw); margin-inline: auto; }

.why-head{ text-align: center; margin: 0 0 clamp(22px, 3vw, 32px); }
.why-head h2{
  margin: 0 0 .35rem;
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
}
.why-head p{
  margin: 0 auto;
  color: var(--ink-soft);
  max-width: 70ch;
}

/* Grid responsive */
.why-grid{
  display: grid;
  gap: clamp(14px, 2vw, 18px);
  grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 980px){ .why-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .why-grid{ grid-template-columns: 1fr; } }

/* Tarjeta/pilar */
.why-item{
  background:#fff;
  border: 1px solid #ececf3;
  border-left: 4px solid var(--about-brand);
  border-radius: 16px;
  padding: clamp(16px, 2.2vw, 20px);
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.why-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0,0,0,.08);
  border-color: #b8e36a; /* sutil al hover */
}
.why-title{
  display:flex; align-items:center; gap:.5rem;
  margin: 0 0 .35rem;
  font-weight: 800;
  font-size: 1.05rem;
}
.stars{
  display:inline-flex; gap:2px; vertical-align:middle;
}
.stars svg{ width:16px; height:16px; color:#f59e0b; }

.why-quote{
  margin: 0 0 .5rem;
  color: #333;
  font-style: italic;
}
.why-meta{
  margin: 0;
  color: var(--ink-soft);
  font-size: .92rem;
}

/* A11y: motion reducido */
@media (prefers-reduced-motion: reduce){
  .why-item{ transition: none !important; }
}

/* ===========================
   MEJORA VISUAL MOBILE (<= 767px)
=========================== */
@media (max-width: 767px){

  .about-history-v2{
    background:#fff;
    padding: 2rem 1rem 3rem;
  }

  .about-history-v2 .about-sec__head{
    text-align: left;
    padding-inline: .5rem;
    margin-bottom: 2rem;
  }

  .about-history-v2 .about-sec__head h2{
    font-size: 1.4rem;
    margin-bottom: .5rem;
  }

  .about-history-v2 .ahv-list{
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }

  .about-history-v2 .ahv-item{
    border-radius: 18px;
    border: 1px solid rgba(130,189,3,0.25);
    background: #fcfcfc;
    padding: 1.2rem 1.2rem 1.4rem;
    box-shadow: 0 3px 12px rgba(0,0,0,0.05);
    transition: transform .25s ease, box-shadow .25s ease;
  }

  .about-history-v2 .ahv-item:hover{
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  }

  .about-history-v2 .ahv-dot{
    background: #fff;
    border: 2px solid #82bd03;
    color: #0b1020;
    font-weight: 700;
    font-size: 15px;
    border-radius: 999px;
    padding: .4rem 1.2rem;
    display: inline-block;
    margin-bottom: .6rem;
    box-shadow: 0 0 0 4px #ffffff, 0 0 0 5px rgba(130,189,3,0.1);
  }

  .about-history-v2 .ahv-card{
    font-size: 1rem;
    line-height: 1.55;
    color: #1a1a1a;
  }
}











/* ============ PARCHE FORZADO MOBILE ≤ 900px ============ */
@media (max-width: 900px){
  /* Oculta la barra horizontal del timeline */
  .about-history-v2 .ahv-line::before,
  .about-history-v2 .ahv-bar{
    display: none !important;
  }

  /* La lista pasa a BLOQUES apilados (no grid) */
  .about-history-v2 .ahv-list{
    display: flex !important;
    flex-direction: column !important;
    gap: 1.2rem !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Cada año = tarjeta completa */
  .about-history-v2 .ahv-item{
    display: block !important;
    text-align: left !important;
    border-radius: 18px !important;
    border: 1px solid rgba(130,189,3,0.25) !important;
    background: #fcfcfc !important;
    padding: 1.1rem 1.2rem 1.3rem !important;
    box-shadow: 0 3px 12px rgba(0,0,0,.05) !important;
    transform: none !important;
  }

  /* Año como “chip”, no posicionado absoluto */
  .about-history-v2 .ahv-dot{
    position: static !important;
    display: inline-block !important;
    margin: 0 0 .6rem !important;
    padding: .4rem 1.1rem !important;
    height: auto !important;
    min-width: 64px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
    border: 2px solid #82BD03 !important;
    background: #fff !important;
    color: #0b1020 !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(130,189,3,.1) !important;
  }

  /* Texto del bloque */
  .about-history-v2 .ahv-card{
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 1rem !important;
    line-height: 1.55 !important;
    color: #1a1a1a !important;
    max-width: none !important;
  }
}

/* ============ TABLET Y DESKTOP (opcional) ============ */
@media (min-width: 901px){
  /* Timeline horizontal “seguro” */
  .about-history-v2 .ahv-line{ position: relative; }
  .about-history-v2 .ahv-line::before{
    content:""; position:absolute; left:0; right:0; top:42px; height:4px;
    background:#e7eedb; border-radius:999px;
    display: block;
  }
  .about-history-v2 .ahv-list{
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 1rem;
  }
  .about-history-v2 .ahv-item{ text-align: center; }
}