/* C&C VISUAL — CSS MAESTRO V4 + NOSOTROS INTEGRADO */

:root{
  --ink:#0b202c;
  --blue:#079be5;
  --light:#f6f6f4;
  --line:#cfd3d4;
  --max:1280px;
}

*{box-sizing:border-box}

html,
body{
  margin:0;
  padding:0;
}

body{
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:#fff;
}

img{
  display:block;
  max-width:100%;
}

a{
  text-decoration:none;
  color:inherit;
}

.wrap,
.header-wrap{
  width:min(calc(100% - 64px),var(--max));
  margin:auto;
}

/* =========================================================
   HEADER
   ========================================================= */

.header{
  background:#fff;
}

.header-wrap{
  height:150px;
  display:grid;
  grid-template-columns:245px 1fr;
  gap:45px;
  align-items:center;
}

.logo{
  width:220px;
  align-self:center;
}

.logo img{
  width:100%;
  height:auto;
}

.header-main{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.header-top{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:28px;
  height:48px;
  font-size:11px;
  font-weight:700;
}

.social{
  display:flex;
  align-items:center;
  gap:20px;
  font-size:20px;
}

.social .green{
  color:#0aae47;
}

.contact{
  background:var(--ink);
  color:#fff;
  border-radius:22px;
  padding:10px 23px;
  font-size:11px;
}

.nav{
  display:flex;
  justify-content:flex-end;
  gap:45px;
  align-items:center;
  height:58px;
  font-size:12px;
  font-weight:700;
}

.nav a{
  height:58px;
  display:flex;
  align-items:center;
  position:relative;
}

.nav a.active:after{
  content:"";
  height:2px;
  background:var(--ink);
  position:absolute;
  left:0;
  right:0;
  bottom:8px;
}

.hamb{
  display:none;
}

/* =========================================================
   HERO HOME
   ========================================================= */

.hero{
  width:100%;
  overflow:hidden;
  background:#4c2c22;
}

.hero img{
  width:100%;
  height:auto;
}

/* =========================================================
   SERVICIOS
   ========================================================= */

.services{
  background:#f7f7f5;
  padding:27px 0 35px;
}

.section-title{
  display:grid;
  grid-template-columns:410px 1fr 310px;
  gap:28px;
  align-items:center;
  margin-bottom:22px;
}

.section-title span{
  font-size:11px;
  font-weight:800;
  letter-spacing:.34em;
}

.section-title h1{
  font-size:34px;
  line-height:1;
  margin:5px 0 0;
  font-weight:900;
}

.section-title i,
.industry-head i{
  height:1px;
  background:var(--line);
}

.section-title p{
  font-size:13px;
  line-height:1.45;
  margin:0;
}

.cards{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
}

.cards article{
  background:#fff;
  min-width:0;
  overflow:hidden;
}

.cards article>img{
  width:100%;
  aspect-ratio:1.33/1;
  object-fit:cover;
}

.cards article>div{
  padding:14px 15px 16px;
}

.cards h2{
  font-size:16px;
  line-height:1.05;
  margin:0 0 8px;
}

.cards p{
  font-size:12px;
  line-height:1.4;
  margin:0;
  min-height:52px;
}

.cards a{
  display:inline-block;
  border:1px solid var(--ink);
  border-radius:20px;
  padding:7px 15px;
  margin-top:11px;
  font-size:10px;
  font-weight:800;
}

/* =========================================================
   REGALOS
   ========================================================= */

.gifts{
  background:linear-gradient(
    90deg,
    #ead9ca 0%,
    #e2c9b3 60%,
    #ecd9c7 100%
  );
  padding:22px 0;
}

.gift-grid{
  display:grid;
  grid-template-columns:1.05fr 1.45fr 1fr;
  gap:28px;
  align-items:center;
}

.gift-copy h2{
  font-size:34px;
  line-height:1.03;
  margin:0;
  font-weight:900;
}

.gift-copy p{
  font-size:13px;
  margin:12px 0 0;
}

.gift-grid>img{
  width:100%;
  max-height:230px;
  object-fit:cover;
}

.gift-points{
  display:grid;
  gap:12px;
}

.gift-points p{
  margin:0;
  font-size:20px;
  display:flex;
  gap:13px;
  align-items:center;
}

.gift-points b{
  font-size:12px;
}

/* =========================================================
   INDUSTRIAS
   ========================================================= */

.industries{
  background:#fafafa;
  padding:20px 0 25px;
}

.industry-head{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px;
  align-items:center;
}

.industry-head h2{
  font-size:18px;
  margin:0;
}

.industry-grid{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:18px;
  margin-top:22px;
}

.industry-grid div{
  text-align:center;
  display:grid;
  gap:7px;
}

.industry-grid strong{
  font-size:31px;
  height:34px;
}

.industry-grid span{
  font-size:11px;
  font-weight:800;
}

/* =========================================================
   TRABAJOS
   ========================================================= */

.work-strip{
  background:#06232f;
  color:#fff;
  padding:16px 0;
}

.work-grid{
  display:grid;
  grid-template-columns:160px repeat(5,1fr);
  gap:10px;
}

.work-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.work-copy h2{
  font-size:20px;
  line-height:1.07;
  margin:0 0 15px;
}

.work-copy a{
  border:1px solid #fff;
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:20px;
}

.work-grid>img{
  width:100%;
  height:165px;
  object-fit:cover;
}

/* =========================================================
   CTA HOME
   ========================================================= */

.cta{
  background:#f7f7f5;
  padding:28px 0;
}

.cta-grid{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:90px;
}

.cta h2{
  font-size:26px;
  margin:0 0 4px;
}

.cta p{
  font-size:12px;
  margin:0;
}

.cta a{
  background:var(--blue);
  color:#fff;
  border-radius:26px;
  padding:14px 25px;
  font-size:12px;
  font-weight:800;
}

/* =========================================================
   NOSOTROS
   INTEGRADO AL SISTEMA VISUAL DEL INDEX
   ========================================================= */

.about-page{
  background:#fff;
}

/* HERO NOSOTROS */

.about-hero{
  position:relative;
  min-height:430px;
  overflow:hidden;
  background:#06232f;
  color:#fff;
}

.about-hero>img,
.about-hero .about-hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.about-hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(6,35,47,.90) 0%,
    rgba(6,35,47,.68) 44%,
    rgba(6,35,47,.22) 76%,
    rgba(6,35,47,.08) 100%
  );
}

.about-hero .wrap{
  position:relative;
  z-index:2;
  min-height:430px;
  display:flex;
  align-items:center;
}

.about-hero-copy{
  width:min(590px,56%);
  padding:58px 0;
}

.about-kicker{
  display:block;
  margin-bottom:14px;
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.34em;
  text-transform:uppercase;
}

.about-hero h1{
  margin:0;
  font-size:52px;
  line-height:.98;
  font-weight:900;
  letter-spacing:-.025em;
}

.about-hero p{
  max-width:540px;
  margin:18px 0 0;
  font-size:15px;
  line-height:1.55;
  color:rgba(255,255,255,.92);
}

/* INTRO NOSOTROS */

.about-intro{
  background:#f7f7f5;
  padding:48px 0;
}

.about-intro-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:70px;
  align-items:start;
}

.about-label{
  display:flex;
  align-items:center;
  gap:18px;
}

.about-label span{
  flex:0 0 auto;
  font-size:11px;
  font-weight:800;
  letter-spacing:.34em;
  text-transform:uppercase;
}

.about-label i{
  width:100%;
  height:1px;
  background:var(--line);
}

.about-intro h2{
  margin:0;
  font-size:36px;
  line-height:1.02;
  font-weight:900;
}

.about-intro-copy p{
  margin:14px 0 0;
  font-size:14px;
  line-height:1.65;
}

.about-intro-copy p:first-child{
  margin-top:0;
}

/* PROPÓSITO NOSOTROS */

.about-purpose{
  padding:38px 0;
  background:#fff;
}

.about-purpose-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:22px;
}

.about-purpose-main,
.about-purpose-side{
  min-height:250px;
}

.about-purpose-main{
  background:#0b202c;
  color:#fff;
  padding:38px 40px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.about-purpose-main span{
  font-size:10px;
  font-weight:800;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:#8fd9ff;
}

.about-purpose-main h2{
  max-width:620px;
  margin:12px 0 0;
  font-size:35px;
  line-height:1.03;
  font-weight:900;
}

.about-purpose-side{
  background:linear-gradient(
    135deg,
    #ead9ca 0%,
    #e2c9b3 100%
  );
  padding:36px 38px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.about-purpose-side h3{
  margin:0 0 12px;
  font-size:21px;
  line-height:1.1;
}

.about-purpose-side p{
  margin:0;
  font-size:13px;
  line-height:1.6;
}

/* VALORES NOSOTROS */

.about-values{
  padding:34px 0 42px;
  background:#f7f7f5;
}

.about-values-head{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:22px;
  align-items:center;
  margin-bottom:22px;
}

.about-values-head h2{
  margin:0;
  font-size:25px;
  font-weight:900;
}

.about-values-head i{
  height:1px;
  background:var(--line);
}

.about-values-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.about-value{
  background:#fff;
  padding:24px 22px;
  min-height:178px;
  border-top:3px solid var(--ink);
}

.about-value:nth-child(2){
  border-top-color:var(--blue);
}

.about-value:nth-child(3){
  border-top-color:#a87350;
}

.about-value:nth-child(4){
  border-top-color:#0b202c;
}

.about-value strong{
  display:block;
  margin-bottom:12px;
  font-size:24px;
  line-height:1;
}

.about-value h3{
  margin:0 0 8px;
  font-size:16px;
}

.about-value p{
  margin:0;
  font-size:12px;
  line-height:1.55;
}

/* TERRITORIO NOSOTROS */

.about-territory{
  background:#06232f;
  color:#fff;
  overflow:hidden;
}

.about-territory-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:330px;
}

.about-territory-copy{
  padding:48px 52px 48px 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.about-territory-copy span{
  font-size:10px;
  font-weight:800;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:#8fd9ff;
}

.about-territory-copy h2{
  margin:12px 0 0;
  max-width:470px;
  font-size:34px;
  line-height:1.03;
}

.about-territory-copy p{
  max-width:520px;
  margin:15px 0 0;
  font-size:13px;
  line-height:1.6;
  color:rgba(255,255,255,.9);
}

.about-territory-media{
  min-height:330px;
}

.about-territory-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* CTA NOSOTROS */

.about-cta{
  background:#f7f7f5;
  padding:30px 0;
}

.about-cta-grid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:45px;
}

.about-cta h2{
  margin:0 0 5px;
  font-size:27px;
  line-height:1.05;
}

.about-cta p{
  margin:0;
  font-size:12px;
}

.about-cta a{
  flex:0 0 auto;
  background:var(--blue);
  color:#fff;
  border-radius:26px;
  padding:14px 26px;
  font-size:12px;
  font-weight:800;
}

/* =========================================================
   FOOTER BASE
   ========================================================= */

.site-footer,
footer{
  background:#fff;
  border-top:1px solid #ececec;
  padding:0;
}

.footer-grid{
  width:min(calc(100% - 64px),1280px);
  margin:0 auto;
  min-height:92px;
  display:grid;
  grid-template-columns:1.2fr 1.35fr 1fr 1.2fr;
  align-items:center;
  gap:0;
}

.footer-grid > div{
  min-height:52px;
  padding:0 28px;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:11px;
  line-height:1.35;
  border-right:1px solid #d7d9da;
}

.footer-grid > div:first-child{
  padding-left:0;
}

.footer-grid > div:last-child{
  border-right:0;
  padding-right:0;
}

.footer-grid > div > span{
  display:block;
}

.footer-grid > div > b{
  font-size:18px;
  line-height:1;
}

.footer-grid .foot-logo,
.footer-grid .footer-brand{
  display:grid;
  justify-items:end;
  align-content:center;
  text-align:right;
  gap:4px;
}

.footer-grid .foot-logo b,
.footer-grid .footer-brand b,
.footer-grid .foot-logo strong,
.footer-grid .footer-brand strong{
  font-size:20px;
  letter-spacing:.13em;
  line-height:1;
  font-weight:900;
}

.footer-grid .foot-logo small,
.footer-grid .footer-brand small{
  font-size:7px;
  letter-spacing:.24em;
  line-height:1.2;
}

/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1000px){

  .wrap,
  .header-wrap{
    width:min(calc(100% - 36px),var(--max));
  }

  .header-wrap{
    height:105px;
    grid-template-columns:170px 1fr;
  }

  .logo{
    width:155px;
  }

  .header-top{
    display:none;
  }

  .nav{
    gap:20px;
    font-size:11px;
  }

  .section-title{
    grid-template-columns:1fr 1fr;
  }

  .section-title p{
    grid-column:2;
  }

  .section-title i{
    display:none;
  }

  .cards{
    grid-template-columns:repeat(3,1fr);
  }

  .gift-grid{
    grid-template-columns:1fr 1.3fr;
  }

  .gift-points{
    grid-column:1/-1;
    grid-template-columns:1fr 1fr;
  }

  .industry-grid{
    grid-template-columns:repeat(4,1fr);
  }

  .work-grid{
    grid-template-columns:150px repeat(3,1fr);
  }

  .work-grid>img:nth-of-type(n+4){
    display:none;
  }

  .cta-grid{
    gap:35px;
  }

  /* NOSOTROS TABLET */

  .about-hero,
  .about-hero .wrap{
    min-height:380px;
  }

  .about-hero-copy{
    width:64%;
  }

  .about-hero h1{
    font-size:44px;
  }

  .about-intro-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .about-purpose-grid{
    grid-template-columns:1fr 1fr;
  }

  .about-values-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .about-territory-copy{
    padding-right:35px;
  }

  .footer-grid{
    width:min(calc(100% - 36px),1280px);
    grid-template-columns:1fr 1fr;
    padding:18px 0;
  }

  .footer-grid > div{
    border-right:0;
    padding:12px 0;
    min-height:auto;
  }

  .footer-grid .foot-logo,
  .footer-grid .footer-brand{
    justify-items:start;
    text-align:left;
  }
}

/* =========================================================
   CELULAR
   ========================================================= */

@media(max-width:700px){

  .wrap,
  .header-wrap{
    width:calc(100% - 28px);
  }

  .header-wrap{
    height:82px;
    grid-template-columns:1fr auto;
  }

  .logo{
    width:135px;
  }

  .header-main{
    display:none;
  }

  .header-main.open{
    display:block;
    position:absolute;
    z-index:100;
    top:82px;
    left:0;
    right:0;
    background:#fff;
    padding:10px 22px 22px;
    box-shadow:0 14px 30px rgba(0,0,0,.16);
  }

  .header-main.open .nav{
    height:auto;
    display:grid;
    gap:0;
  }

  .header-main.open .nav a{
    height:auto;
    padding:13px 0;
  }

  .hamb{
    display:block;
    border:0;
    background:none;
    font-size:29px;
  }

  .hero img{
    width:100%;
    min-height:270px;
    object-fit:cover;
    object-position:center;
  }

  .services{
    padding-top:22px;
  }

  .section-title{
    display:block;
  }

  .section-title h1{
    font-size:27px;
  }

  .section-title p{
    margin-top:12px;
  }

  .cards{
    grid-template-columns:1fr;
  }

  .cards article{
    display:grid;
    grid-template-columns:43% 57%;
  }

  .cards article>img{
    height:100%;
    aspect-ratio:auto;
  }

  .cards p{
    min-height:0;
  }

  .gift-grid{
    grid-template-columns:1fr;
  }

  .gift-copy h2{
    font-size:28px;
  }

  .gift-points{
    grid-template-columns:1fr;
  }

  .industry-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .work-grid{
    grid-template-columns:1fr 1fr;
  }

  .work-copy{
    grid-column:1/-1;
  }

  .work-grid>img{
    height:140px;
  }

  .work-grid>img:nth-of-type(n+4){
    display:block;
  }

  .cta-grid{
    display:grid;
    gap:18px;
    justify-content:stretch;
  }

  .cta h2{
    font-size:23px;
  }

  .cta a{
    text-align:center;
  }

  /* NOSOTROS CELULAR */

  .about-hero,
  .about-hero .wrap{
    min-height:360px;
  }

  .about-hero:after{
    background:linear-gradient(
      90deg,
      rgba(6,35,47,.92) 0%,
      rgba(6,35,47,.74) 62%,
      rgba(6,35,47,.38) 100%
    );
  }

  .about-hero-copy{
    width:100%;
    padding:45px 0;
  }

  .about-hero h1{
    font-size:38px;
  }

  .about-hero p{
    font-size:13px;
  }

  .about-intro{
    padding:34px 0;
  }

  .about-intro-grid{
    gap:18px;
  }

  .about-intro h2{
    font-size:29px;
  }

  .about-purpose{
    padding:26px 0;
  }

  .about-purpose-grid{
    grid-template-columns:1fr;
  }

  .about-purpose-main,
  .about-purpose-side{
    min-height:auto;
  }

  .about-purpose-main{
    padding:30px 26px;
  }

  .about-purpose-main h2{
    font-size:28px;
  }

  .about-purpose-side{
    padding:28px 26px;
  }

  .about-values{
    padding:28px 0 32px;
  }

  .about-values-head{
    grid-template-columns:1fr;
  }

  .about-values-head i{
    display:none;
  }

  .about-values-grid{
    grid-template-columns:1fr;
  }

  .about-value{
    min-height:0;
  }

  .about-territory-grid{
    grid-template-columns:1fr;
  }

  .about-territory-copy{
    padding:34px 0;
  }

  .about-territory-copy h2{
    font-size:28px;
  }

  .about-territory-media{
    min-height:230px;
  }

  .about-cta-grid{
    display:grid;
    gap:18px;
  }

  .about-cta h2{
    font-size:23px;
  }

  .about-cta a{
    text-align:center;
  }

  .footer-grid{
    width:calc(100% - 28px);
    grid-template-columns:1fr;
    padding:20px 0 22px;
  }

  .footer-grid > div{
    padding:9px 0;
    border:0;
  }

  .footer-grid .foot-logo,
  .footer-grid .footer-brand{
    margin-top:4px;
    justify-items:start;
    text-align:left;
  }
}

@media(max-width:430px){

  .cards article{
    grid-template-columns:1fr;
  }

  .cards article>img{
    aspect-ratio:1.55/1;
  }

  .work-grid{
    grid-template-columns:1fr;
  }

  .about-hero h1{
    font-size:34px;
  }
}

/* =========================================================
   FOOTER DEFINITIVO
   ========================================================= */

footer.site-footer{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  position:relative !important;
  z-index:5 !important;
  width:100% !important;
  min-height:108px !important;
  margin:0 !important;
  padding:0 !important;
  background:#ffffff !important;
  color:#0b202c !important;
  border-top:4px solid #0b202c !important;
}

footer.site-footer .footer-inner{
  width:min(calc(100% - 64px),1280px) !important;
  min-height:104px !important;
  margin:0 auto !important;
  display:grid !important;
  grid-template-columns:1.15fr 1.25fr 1fr 1.25fr !important;
  align-items:center !important;
}

footer.site-footer .footer-item{
  min-height:58px !important;
  padding:0 28px !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  border-right:1px solid #d8dcde !important;
  font-size:12px !important;
  line-height:1.4 !important;
  color:#0b202c !important;
}

footer.site-footer .footer-item:first-child{
  padding-left:0 !important;
}

footer.site-footer .footer-item:last-child{
  border-right:0 !important;
  padding-right:0 !important;
}

footer.site-footer .footer-icon{
  font-size:20px !important;
  line-height:1 !important;
  flex:0 0 auto !important;
}

footer.site-footer .footer-brand{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  justify-content:center !important;
  text-align:right !important;
  gap:5px !important;
}

footer.site-footer .footer-brand strong{
  font-size:22px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:.12em !important;
  color:#0b202c !important;
}

footer.site-footer .footer-brand small{
  font-size:8px !important;
  font-weight:700 !important;
  letter-spacing:.22em !important;
  color:#0b202c !important;
}

/* =========================================================
   FOOTER TABLET
   ========================================================= */

@media(max-width:900px){

  footer.site-footer .footer-inner{
    width:min(calc(100% - 36px),1280px) !important;
    grid-template-columns:1fr 1fr !important;
    padding:18px 0 !important;
  }

  footer.site-footer .footer-item{
    padding:12px 0 !important;
    border-right:0 !important;
  }

  footer.site-footer .footer-brand{
    align-items:flex-start !important;
    text-align:left !important;
  }
}

/* =========================================================
   FOOTER CELULAR
   ========================================================= */

@media(max-width:600px){

  footer.site-footer{
    border-top-width:3px !important;
  }

  footer.site-footer .footer-inner{
    width:calc(100% - 28px) !important;
    grid-template-columns:1fr !important;
    padding:18px 0 22px !important;
  }

  footer.site-footer .footer-item{
    min-height:auto !important;
    padding:9px 0 !important;
  }

  footer.site-footer .footer-brand{
    margin-top:6px !important;
  }
}