/* Heliotropia · Sobre Heliotropia · se suma a styles.css */

/* Hero con texto a la izquierda */
.hero--left{display:block;text-align:left;height:auto;min-height:961px;max-height:none}
.hero--left::before{background:linear-gradient(180deg,rgba(33,33,33,.7) 0%,rgba(33,33,33,.25) 35%,rgba(33,33,33,.45) 100%)}
.hero--left .hero__inner{width:min(962px,100% - 48px);margin:0 auto;padding:183px 0 200px}
.hero__mark{display:block;width:233px;height:auto;margin-bottom:24px}
.hero--left h1{font-size:clamp(46px,6.4vw,100px);line-height:1.1}
.hero--left p{margin:48px 0 0;max-width:none}
.pill-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:44px;padding:12px 44px;border-radius:var(--radius-pill);font:500 16px var(--font-sans);text-transform:uppercase;letter-spacing:.04em;text-decoration:none;color:var(--negro-b);background:linear-gradient(90deg,#8fb4dc,#8583bd 55%,#9d93d6);border:1px solid rgba(255,255,255,.35)}
.pill-btn:hover{filter:brightness(1.08)}

/* Metodología */
.method{background:var(--blanco-a);color:var(--negro-b);padding:80px 0 90px;text-align:center}
.method__title{width:min(1100px,100% - 48px);margin:0 auto;font:400 clamp(28px,3vw,40px)/1.25 var(--font-special);text-wrap:balance}
.method__title .hl{color:#1a7c8c}
.method__cards{width:min(1216px,100% - 48px);margin:56px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:25px;text-align:left}
.mcard{background:var(--crema-claro);border-radius:var(--radius-lg);padding:28px 24px 32px;display:grid;gap:16px;align-content:start}
.mcard h3{font:var(--text-display);font-size:24px;line-height:1.2}
.mcard .gradline{display:block;height:2px;width:100%;background:linear-gradient(90deg,var(--azul-a),var(--morado-gradiente));border-radius:999px}
.mcard p{font:400 16px/1.45 var(--font-sans)}
.method__apply{width:min(980px,100% - 48px);margin:44px auto 0;font:400 18px/1.5 var(--font-sans)}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:36px;padding:12px 24px;border-radius:var(--radius-pill);font:500 14px var(--font-sans);text-transform:uppercase;letter-spacing:.03em;text-decoration:none;color:var(--blanco);background:var(--morado-c)}
.btn-primary:hover{background:var(--morado-d)}

/* Equipo */
.team-intro{background:var(--negro-b);padding:110px 0 70px}
.team-intro .lead{max-width:880px;margin:36px auto 0;padding-inline:24px;text-align:center;font:400 clamp(20px,2vw,28px)/1.4 var(--font-sans)}
.team{--accent:var(--morado-b);padding:0 0 100px}
.team--dark{background:var(--negro-b);color:var(--blanco-a);padding-bottom:110px}
.team--light{background:var(--blanco-a);color:var(--negro-b);--accent:var(--morado-c);padding:100px 0 110px}
.team__grid{width:min(1460px,100% - 48px);margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:64px 60px;align-items:start}
.person{display:grid;grid-template-columns:180px 1fr;grid-template-areas:"photo head" "photo bio";column-gap:32px;row-gap:16px;align-items:start}
.person__photo{grid-area:photo;width:180px;height:180px;border-radius:50%;overflow:hidden}
.person__photo img{width:100%;height:100%;object-fit:cover}
.ph{display:grid;place-items:center;width:100%;height:100%;background:radial-gradient(circle at 35% 30%,var(--morado-a),#6f6e82 75%);color:rgba(255,255,255,.75)}
.person__head{grid-area:head;display:grid;gap:2px}
.person__role{font:400 16px/1.3 var(--font-sans);text-transform:uppercase;color:var(--accent)}
.person__line{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:14px;border-bottom:1px solid #8d8a86}
.person__line h3{font:400 32px/1.15 var(--font-special);letter-spacing:.01em}
.socials{display:flex;gap:6px;flex:none}
.socials a{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:inherit}
.socials a:hover{background:rgba(141,138,134,.25)}
.socials img{width:18px;height:18px;object-fit:contain}
.team--light .socials img{filter:brightness(0)}
.socials svg{width:18px;height:18px}
.person__text{grid-area:bio;display:grid;gap:14px}
.person__bio{font:400 15px/1.55 var(--font-sans)}
.person__bio.is-ph{color:var(--morado-a);font-style:italic}
.team--light .person__bio.is-ph{color:#6b6a7a}

/* Talento local */
.local{position:relative;min-height:580px;display:grid;align-items:center;isolation:isolate;padding:80px 0}
.local>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.local::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(33,33,33,.7),rgba(33,33,33,.15) 70%)}
.local__inner{width:min(1460px,100% - 48px);margin-inline:auto;display:grid;gap:80px}
.local p{max-width:1040px;font:400 clamp(26px,2.9vw,40px)/1.2 var(--font-special);text-shadow:0 2px 14px rgba(0,0,0,.5)}
.local__bar{display:block;height:42px;border-radius:var(--radius-pill);background:linear-gradient(90deg,#7f9bcf,#8c62c4 45%,#a79bde);opacity:.9}

@media (max-width:1180px){
  .team__grid{grid-template-columns:1fr;gap:56px;width:min(720px,100% - 48px)}
}
@media (max-width:860px){
  .hero--left{min-height:620px}
  .hero--left .hero__inner{padding:150px 0 120px;width:calc(100% - 40px)}
  .hero__mark{width:150px;margin-bottom:16px}
  .hero--left h1{font-size:clamp(34px,10.5vw,52px)}
  .hero--left p{margin-top:24px}
  .pill-btn{margin-top:28px;padding-inline:28px;min-height:48px}
  .method{padding:64px 0 72px}
  .method__cards{grid-template-columns:1fr;margin-top:36px;gap:16px}
  .method__apply{margin-top:32px;font-size:17px}
  .team-intro{padding:72px 0 48px}
  .team--dark{padding-bottom:72px}.team--light{padding:64px 0 72px}
  .team__grid{width:calc(100% - 40px);gap:44px}
  .person{grid-template-columns:88px 1fr;grid-template-areas:"photo head" "bio bio";column-gap:16px;row-gap:14px}
  .person__photo{width:88px;height:88px}
  .person__line{flex-wrap:wrap;padding-bottom:10px}
  .person__line h3{font-size:26px}
  .person__role{font-size:13px}
  .local{min-height:460px;padding:56px 0}
  .local__inner{gap:40px}
  .local__bar{height:32px}
}

/* Tres socios fundadores en una sola fila (foto arriba). Debajo de 1181px vuelve al autolayout de una columna */
@media (min-width:1181px){
  .team--dark .team__grid:first-of-type{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 44px}
  .team--dark .team__grid:first-of-type .person{grid-template-columns:1fr;grid-template-areas:"photo" "head" "bio";row-gap:20px;justify-items:start}
  .team--dark .team__grid:first-of-type .person__head{width:100%}
  .team--dark .team__grid:first-of-type .person__line h3{font-size:28px}
}

/* Roca One: título de metodología, texto de talento local y nombres del equipo */
.method__title,.local p,.person__line h3{font-family:var(--font-display);font-weight:400}
.local p{line-height:1.3}

/* Botón principal: color sólido #4B539B con letra blanca */
.pill-btn{background:#4b539b;background-image:none;color:#fff;border:1px solid #4b539b}
.pill-btn:hover,.pill-btn:focus-visible{background:#542882;border-color:#542882;filter:none}