/* =========================================================
   Yes We Grow — landing page
   ========================================================= */

@font-face{font-family:"Gilroy";src:url("../fonts/Gilroy-UltraLight.ttf") format("truetype");font-weight:200;font-style:normal;}
@font-face{font-family:"Gilroy";src:url("../fonts/Gilroy-Thin.ttf") format("truetype");font-weight:100;font-style:normal;}
@font-face{font-family:"Gilroy";src:url("../fonts/Gilroy-Light.ttf") format("truetype");font-weight:300;font-style:normal;}
@font-face{font-family:"Gilroy";src:url("../fonts/Gilroy-Regular.ttf") format("truetype");font-weight:400;font-style:normal;}
@font-face{font-family:"Gilroy";src:url("../fonts/Gilroy-RegularItalic.ttf") format("truetype");font-weight:400;font-style:italic;}
@font-face{font-family:"Gilroy";src:url("../fonts/Gilroy-Medium.ttf") format("truetype");font-weight:500;font-style:normal;}
@font-face{font-family:"Gilroy";src:url("../fonts/Gilroy-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;}
@font-face{font-family:"Gilroy";src:url("../fonts/Gilroy-Bold.ttf") format("truetype");font-weight:700;font-style:normal;}
@font-face{font-family:"Gilroy";src:url("../fonts/Gilroy-BoldItalic.ttf") format("truetype");font-weight:700;font-style:italic;}
@font-face{font-family:"Gilroy";src:url("../fonts/Gilroy-ExtraBold.ttf") format("truetype");font-weight:800;font-style:normal;}
@font-face{font-family:"Gilroy";src:url("../fonts/Gilroy-Black.ttf") format("truetype");font-weight:900;font-style:normal;}

:root{
  --ink:#2b2b2b;
  --cream:#f7f3ed;
  --cream-2:#dbd2c6;
  --teal:#4a6a6a;
  --terracotta:#c9502b;
  --terracotta-light:#de7c5d;
  --white:#ffffff;

  --serif-italic:"Libre Baskerville", Georgia, serif;
  --sans:"Gilroy", Arial, sans-serif;

  --container: 1264px;
  --side-pad: 88px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;border:none;}
ul{list-style:none;margin:0;padding:0;}
p{margin:0;}

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--side-pad);
  padding-right:var(--side-pad);
}

.italic{
  font-family:var(--serif-italic);
  font-style:italic;
  font-weight:400;
}

/* ---------- reusable pieces ---------- */

.tag-pill{
  display:inline-flex;
  align-items:center;
  padding:4px 0 6px;
  font-family:var(--serif-italic);
  font-style:italic;
  font-size:28px;
  line-height:32px;
  letter-spacing:.56px;
  position:relative;
}
.tag-pill.on-teal{color:var(--white);}

.section-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
  text-align:center;
  position:relative;
}
.section-head .underline{
  margin-top:4px;
}
.section-head h2{
  margin:0;
  font-weight:300;
  font-size:56px;
  line-height:64px;
}
.section-head p{
  font-size:20px;
  line-height:24px;
  font-weight:400;
  max-width:820px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:56px;
  padding:10px 40px;
  border-radius:8px;
  font-weight:700;
  font-size:16px;
  letter-spacing:.96px;
  white-space:nowrap;
}
.btn-primary{background:var(--terracotta);color:var(--white);}
.btn-primary:hover{background:#b3441f;}
.btn-outline{background:transparent;border:2px solid var(--terracotta);color:var(--ink);}
.btn-outline:hover{background:var(--terracotta);color:var(--white);}

.email-form{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
.email-form input{
  width:340px;
  max-width:100%;
  height:56px;
  border:2px solid var(--ink);
  border-radius:8px;
  padding:0 22px;
  font-family:var(--sans);
  font-size:16px;
  letter-spacing:.96px;
  color:var(--ink);
  background:var(--white);
}
.email-form input::placeholder{color:var(--ink);opacity:1;}
.email-form button{height:56px;}

.icon-card{
  background:var(--white);
  border:2px solid var(--ink);
  border-radius:24px;
  padding:32px;
  display:flex;
  flex-direction:column;
  gap:24px;
  flex:1;
}
.icon-card img.icon{width:64px;height:64px;}
.icon-card h3{
  margin:0;
  font-weight:500;
  font-size:20px;
  line-height:28px;
  letter-spacing:.4px;
}
.icon-card p{
  font-size:16px;
  line-height:22px;
  font-weight:400;
}
.icon-card.soft{background:var(--cream);border:none;}

/* ---------- header ---------- */

.site-header{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding-top:24px;
}
.site-header nav{justify-self:start;}
.site-header nav a{
  font-weight:700;
  font-size:16px;
  letter-spacing:1.92px;
  text-transform:uppercase;
}
.site-header .logo{justify-self:center;}
.site-header .logo img{height:24px;width:auto;}
.site-header .cta{justify-self:end;}

/* ---------- hero ---------- */

.hero{
  position:relative;
  padding-top:24px;
  overflow:hidden;
}
.hero .bg-line{
  position:absolute;
  z-index:0;
  opacity:.5;
  pointer-events:none;
}
.hero .bg-line.line-a{top:-120px;left:-260px;width:1100px;}
.hero .misc-mark{
  position:absolute;
  top:52px;
  left:64px;
  width:32px;
  height:32px;
  opacity:.85;
}

.hero-ppal{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:44px;
  padding:88px 0 48px;
  text-align:center;
}
.hero-claim h1{
  margin:0;
  font-weight:300;
  font-size:104px;
  line-height:1.06;
}
.hero-claim h1 .italic{font-size:1em;}
.hero-claim .sub{
  margin-top:24px;
  font-size:24px;
  line-height:32px;
  font-weight:400;
}
.hero-underline{
  width:448px;
  max-width:80%;
  margin:0 auto;
}
.hero-arrow{
  width:64px;
  height:64px;
  margin-top:8px;
  opacity:.9;
}

/* ---------- carousel ---------- */

.carousel{
  position:relative;
  z-index:1;
  display:flex;
  gap:32px;
  align-items:flex-start;
  justify-content:center;
  padding:0 0 24px;
  overflow-x:auto;
  scrollbar-width:none;
}
.carousel::-webkit-scrollbar{display:none;}
.carousel .card{
  position:relative;
  flex:0 0 auto;
  width:360px;
  height:420px;
  border-radius:24px;
  overflow:hidden;
  background:#ddd;
}
.carousel .card.tall{width:370px;height:420px;margin-top:80px;}
.carousel .card.big{width:460px;height:420px;}
.carousel .card img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(1.02);
}
.carousel .card::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(74,106,106,0) 40%, rgba(74,106,106,.48) 88%);
  mix-blend-mode:multiply;
}
.carousel .card .tag{
  position:absolute;
  left:50%;
  bottom:34px;
  transform:translateX(-50%);
  z-index:2;
  font-family:var(--serif-italic);
  font-style:italic;
  font-size:28px;
  line-height:34px;
  color:var(--white);
  text-align:center;
  white-space:nowrap;
  letter-spacing:.56px;
}

/* ---------- que hacemos ---------- */

.section{
  padding:144px 0;
}
.section.tight{padding:96px 0;}
.section-que-hacemos{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:96px;
}
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  width:100%;
}
.empezar-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  text-align:center;
  width:100%;
}
.empezar-block img.photo{
  width:380px;
  height:380px;
  border-radius:24px;
  object-fit:cover;
}
.empezar-block .frame{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:40px;
}

/* ---------- como trabajamos ---------- */

.como-trabajamos{
  background:var(--teal);
  color:var(--white);
  position:relative;
  overflow:hidden;
}
.como-trabajamos .bg-line{
  position:absolute;
  opacity:.35;
  z-index:0;
  top:-260px;
  right:-500px;
  width:1400px;
  transform:rotate(18deg);
}
.como-trabajamos .inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:88px;
}
.proceso-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
  width:100%;
}
.step-card{
  background:var(--white);
  color:var(--ink);
  border-radius:24px;
  padding:36px 32px 32px;
  display:flex;
  flex-direction:column;
  gap:8px;
  position:relative;
}
.step-card .num{
  font-family:var(--sans);
  font-weight:800;
  font-size:104px;
  line-height:1;
  color:var(--terracotta-light);
}
.step-card h3{
  margin:0;
  font-weight:500;
  font-size:20px;
  line-height:28px;
  letter-spacing:.4px;
}
.step-card p{
  font-size:16px;
  line-height:22px;
}
.step-card .doodle{
  position:absolute;
  right:32px;
  top:32px;
  width:56px;
  height:56px;
  opacity:.8;
}

/* ---------- IA section ---------- */

.ia-section{display:flex;flex-direction:column;align-items:center;gap:128px;}
.ia-principal{width:100%;display:flex;flex-direction:column;gap:88px;}
.ia-titulo{display:flex;flex-direction:column;align-items:center;gap:32px;width:100%;position:relative;}
.ia-titulo img.photo{
  width:640px;max-width:100%;height:320px;object-fit:cover;border-radius:24px;
}
.ia-titulo .ia-text{
  display:flex;flex-direction:column;gap:16px;text-align:center;width:100%;
}
.ia-titulo h2{margin:0;font-weight:300;font-size:56px;line-height:64px;}
.ia-titulo p{font-size:20px;line-height:24px;}

.data-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
  width:100%;
}
.data-card{
  background:var(--white);
  border:2px solid var(--ink);
  border-radius:24px;
  padding:40px 32px 32px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.data-card .stat{
  font-weight:800;
  font-size:80px;
  line-height:1;
  color:var(--terracotta-light);
}
.data-card .stat .sign{font-size:.8em;font-weight:700;}
.data-card p{font-size:16px;line-height:22px;}
.data-card p strong{font-weight:600;}
.disclaimer{
  font-size:14px;
  line-height:20px;
  text-align:center;
  width:100%;
  font-style:italic;
}

.ia-cta-block{
  display:flex;flex-direction:column;align-items:center;gap:40px;width:100%;text-align:center;
}

/* ---------- fotos collage ---------- */

.fotos-section{
  padding:0;
}
.fotos-section img{
  width:100%;
  display:block;
}

/* ---------- clientes ---------- */

.clientes-section{padding:96px 0;}
.clientes-panel{
  background:var(--white);
  border:2px solid var(--ink);
  border-radius:24px;
  padding:104px 112px 120px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:88px;
}
.clientes-panel .section-head{max-width:1040px;}
.clientes-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
  width:100%;
}
.clientes-grid .icon-card h3{font-size:20px;line-height:1.35;}
.clientes-grid .icon-card{padding:32px;}

/* ---------- blog ---------- */

.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  width:100%;
}
.blog-card{
  background:var(--white);
  border:2px solid var(--ink);
  border-radius:24px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:32px;
  padding-bottom:32px;
}
.blog-card img{
  width:100%;
  aspect-ratio:1732/1155;
  object-fit:cover;
  border-bottom:2px solid var(--ink);
}
.blog-card .content{
  padding:0 32px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.blog-card h3{
  margin:0;font-weight:500;font-size:20px;line-height:28px;letter-spacing:.4px;
}
.blog-card p{font-size:16px;line-height:22px;font-weight:400;}
.blog-card .read{
  font-weight:700;font-size:16px;letter-spacing:1.92px;text-transform:uppercase;color:var(--terracotta);
}

/* ---------- form contacto ---------- */

.form-section{
  background:var(--teal);
  color:var(--white);
  position:relative;
  overflow:hidden;
}
.form-section .bg-line{
  position:absolute;opacity:.3;z-index:0;top:-400px;left:-260px;width:1400px;transform:rotate(22deg);
}
.form-section .inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:88px;
  padding:120px 0 144px;
}
.form-titulo{display:flex;flex-direction:column;align-items:center;gap:40px;text-align:center;}
.form-titulo img{width:160px;height:160px;}
.form-titulo h2{margin:0;font-weight:300;font-size:56px;line-height:64px;}
.form-titulo p{font-size:20px;line-height:24px;margin-top:8px;}

.contact-form{
  width:640px;
  max-width:100%;
  display:flex;
  flex-direction:column;
  gap:48px;
}
.contact-form .fields{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.field label{
  display:block;
  font-weight:700;
  font-size:12px;
  letter-spacing:1.44px;
  text-transform:uppercase;
  margin-bottom:8px;
}
.field label .req{color:var(--terracotta-light);font-size:16px;text-transform:none;}
.field input,.field textarea{
  width:100%;
  border:2px solid var(--ink);
  border-radius:8px;
  padding:0 24px;
  font-family:var(--sans);
  font-size:16px;
  letter-spacing:.96px;
  color:var(--ink);
  background:var(--white);
}
.field input{height:56px;}
.field textarea{height:162px;padding-top:18px;resize:vertical;font-family:var(--sans);}
.contact-form .btn{width:100%;}

/* ---------- footer ---------- */

.site-footer{
  background:var(--ink);
  color:var(--white);
  padding:88px 0 48px;
}
.footer-marca{
  display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center;
}
.footer-marca img{height:28px;}
.footer-marca p{font-weight:300;font-size:20px;line-height:28px;color:var(--cream);}
.footer-cierre{
  margin-top:64px;
  display:flex;flex-direction:column;align-items:center;gap:48px;
}
.stack{display:flex;flex-direction:column;align-items:center;gap:16px;}
.stack .label{font-size:12px;letter-spacing:1.44px;color:var(--cream-2);text-transform:uppercase;}
.logos{
  display:flex;
  align-items:center;
  gap:40px;
  flex-wrap:wrap;
  justify-content:center;
}
.logos span{
  color:var(--white);
  font-size:16px;
  font-weight:600;
  opacity:.85;
  white-space:nowrap;
}
.copy{
  font-size:12px;
  letter-spacing:1.44px;
  color:var(--cream-2);
  text-align:center;
}
.copy strong{font-weight:700;color:var(--white);}

/* =========================================================
   Responsive — tablet & mobile
   ========================================================= */

@media (max-width:1180px){
  :root{--side-pad:40px;}
  .services-grid,.proceso-grid,.data-grid,.clientes-grid,.blog-grid{grid-template-columns:repeat(2,1fr);}
  .hero-claim h1{font-size:72px;}
  .section-head h2,.ia-titulo h2,.form-titulo h2{font-size:40px;line-height:48px;}
}

@media (max-width:820px){
  :root{--side-pad:24px;}
  .section{padding:80px 0;}
  .site-header{grid-template-columns:auto 1fr auto;}
  .site-header nav{display:none;}
  .hero-claim h1{font-size:48px;}
  .hero-claim .sub{font-size:18px;line-height:26px;}
  .email-form{flex-direction:column;}
  .email-form input{width:100%;}
  .carousel{gap:16px;}
  .carousel .card{width:220px;height:280px;}
  .carousel .card.tall{width:220px;height:280px;margin-top:20px;}
  .carousel .card.big{width:260px;height:280px;}
  .carousel .card .tag{font-size:18px;bottom:16px;}
  .services-grid,.proceso-grid,.data-grid,.clientes-grid,.blog-grid{grid-template-columns:1fr;}
  .section-head h2,.ia-titulo h2,.form-titulo h2{font-size:32px;line-height:40px;}
  .clientes-panel{padding:56px 24px;}
  .contact-form{width:100%;}
  .ia-titulo img.photo{height:200px;}
  .step-card .num{font-size:72px;}
  .data-card .stat{font-size:56px;}
  .footer-cierre{gap:32px;}
  .logos{gap:24px;}
}