/*
  Responsive brochure layout inspired by the provided PDF.
  - Mobile-first
  - Fluid type via clamp()
  - Uses extracted PDF assets (placed in /assets)
*/

:root{
  --bg: #0b1118;
  --panel: rgba(255,255,255,.06);
  --ink: #eef3f7;
  --muted: rgba(238,243,247,.72);
  --accent: #c7a26b;   /* gold-ish */
  --accent2:#2c6b7c;   /* teal */
  --stroke: rgba(255,255,255,.14);
  --shadow: 0 18px 55px rgba(0,0,0,.35);

  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;

  --container: 1120px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1000px 600px at 15% 10%, rgba(199,162,107,.18), transparent 60%),
    radial-gradient(900px 600px at 85% 35%, rgba(44,107,124,.22), transparent 55%),
    linear-gradient(180deg, #070b10, #0b1118 30%, #070b10);
}

img{ max-width:100%; height:auto; display:block; }
a{ color: var(--ink); }
a:hover{ color: white; }

.page{
  min-height:100%;
}

.container{
  width:min(var(--container), calc(100% - 2*clamp(18px, 4vw, 48px)));
  margin-inline:auto;
}

.section{
  padding: clamp(44px, 7vw, 90px) 0;
  position:relative;
}

.section--focus{
	background: rgba(3,13,34);
}

.section__title{
  font-weight: 750;
  letter-spacing: -0.03em;
  font-size: clamp(2.0rem, 2.7vw + 1.1rem, 4.2rem);
  margin:0 0 22px 0;
}

.section__title--center{ 
	text-align:center;
	color: rgba(0,22,41);
}
.section__title--left{ 
	color: rgba(0,22,41);
}
.section__title--left span{ color: rgba(0,48,85); }

.section__kicker{
  font-weight: 750;
  letter-spacing: -0.03em;
  font-size: clamp(2.0rem, 2.7vw + 1.1rem, 4.2rem);
  margin:0 0 18px 0;
}

.section__lead{
  color: var(--muted);
  font-size: clamp(1.02rem, 0.5vw + .95rem, 1.25rem);
  line-height: 1.6;
  margin: 0 0 26px 0;
}

.muted{ color: var(--muted); }

/* HERO */
.hero{
  padding: clamp(56px, 10vw, 110px) 0 clamp(48px, 8vw, 92px);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(11,17,24,.85) 55%, rgba(11,17,24,1)),
    url("assets/img_3_61ac5d81.jpg");
  background-size: cover;
  background-position: center top;
  filter: saturate(1.05) contrast(1.05);
  opacity: .95;
  z-index:-2;
}
.hero::after{
  content:"";
  position:absolute;
  inset:-80px 0px auto -80px;
  height: 420px;
  background: radial-gradient(closest-side, rgba(199,162,107,.22), transparent 72%);
  z-index:-1;
}

.hero__inner{ padding-top: clamp(10px, 2vw, 30px); }

.brand{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  margin-bottom: clamp(36px, 6vw, 70px);
}

.brand__logo{
  width: clamp(110px, 18vw, 190px);
  opacity: .92;
  filter: drop-shadow(0 10px 25px rgba(0,0,0,.4));
}

.brand__mark{
  width: 64px; height: 64px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(135deg, rgba(199,162,107,.95), rgba(44,107,124,.90));
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.15);
}

.hero__title{
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin:0 0 18px 0;
  font-size: clamp(2.4rem, 4.3vw + 1.1rem, 4.7rem);
}
.hero__title span{ color: var(--accent); }
	
content: "";
  position: absolute;
  left: 0;               /* start under the beginning of the text */
  bottom: 0;

  height: 3px;           /* underline thickness */
  width: 100vw;          /* stretch line to full viewport width */
  background: #c79b3a;   /* underline color (change as desired) */

  /* shift the 100vw line so its left edge lines up with the span */
  transform: translateX(calc(-50vw + 50%));

}

.hero__logo{
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin:0 0 18px 0;
  font-size: 2.6rem;
}
.hero__logo span{ 
	color: var(--accent); 
	font-size: 0.8rem;
}

.hero__logo2{
  font-weight: 750;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin:0 0 18px 0;
  font-size: 2.5rem;
  color: rgba(14,28,51);
}

.hero__lead{
  color: var(--muted);
  font-size: clamp(1.05rem, .6vw + .95rem, 1.3rem);
  line-height: 1.65;
  margin: 0 0 18px 0;
  max-width: 68ch;
}
.hero__lead strong{ color: var(--ink); }
.hero__lead em{ display:block; margin-top: 10px; color: rgba(238,243,247,.84); font-style: italic; }

.hero__proof{
  color: var(--muted);
  line-height: 1.65;
  max-width: 70ch;
  margin: 0 0 18px 0;
}

.hero__strong{
  max-width: 60%;
  margin: 0 0 26px 0;
  color: black;
}

.callout{
  margin-top: clamp(18px, 3vw, 34px);
  padding: clamp(18px, 3vw, 28px) clamp(18px, 3vw, 34px);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(199,162,107,.12), rgba(255,255,255,.06));
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  max-width: 64ch;
}
.callout__big{
  margin:0;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: clamp(1.7rem, 1.6vw + 1.2rem, 2.6rem);
  line-height: 1.08;
}
.asterisk{ color: var(--accent); font-weight: 900; }

/* Lists */
.bullets{
  list-style: none;
  padding:0;
  margin: 18px 0 0;
  display:grid;
  gap: 14px;
}
.bullets li{
  position: relative;
  padding-left: 28px;
  color: rgba(238,243,247,.9);
  line-height: 1.45;
  font-size: clamp(1.02rem, .45vw + .95rem, 1.24rem);
}
.bullets li::before{
  content:"";
  position:absolute;
  left:0; top:.55em;
  width: 12px; height: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 0 4px rgba(199,162,107,.12);
}
.bullets--big li{ font-size: clamp(1.1rem, .8vw + 1.0rem, 1.42rem); }

.bullets2{
  list-style: none;
  padding:0;
  margin: 18px 0 0;
  display:grid;
  gap: 14px;
}
.bullets2 li{
  position: relative;
  padding-left: 28px;
  color: black;
  line-height: 1.45;
  font-size: clamp(1.02rem, .45vw + .95rem, 1.24rem);
}
.bullets2 li::before{
  content:"";
  position:absolute;
  left:0; top:.55em;
  width: 12px; height: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 0 4px rgba(199,162,107,.12);
}
.bullets2--big li{ font-size: clamp(1.1rem, .8vw + 1.0rem, 1.42rem); }

.footnote{
  margin-top: 22px;
  color: rgba(238,243,247,.72);
  font-size: .98rem;
  line-height: 1.6;
}

/* Purpose section */
.grid-2{
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 3vw, 34px);
  align-items:start;
}
@media (min-width: 880px){
  .grid-2{ grid-template-columns: 0.9fr 1.1fr; }
}

.card{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-xl);
  padding: clamp(18px, 2.7vw, 30px);
  box-shadow: var(--shadow);
}
.card p{ margin: 0 0 14px 0; color: rgba(238,243,247,.86); line-height: 1.7; }
.card p:last-child{ margin-bottom:0; }
.card .emph{ color: var(--accent); font-weight: 700; }

/* Services background flourish */
.section--services{
  background: white;
}
.section--purpose{
  background: url("assets/img_1_e9c594f2.jpg");
  background-size: cover;
  background-position: center;
}

/* Areas pills */
.pill-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 26px;
}
@media (min-width: 720px){
  .pill-grid{ grid-template-columns: 1fr 1fr; gap: 18px; }
}

.pill{
  background: rgba(0,22,41);
  border: 1px solid var(--stroke);
  border-radius: 15px;
  padding: 14px 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.35;
  box-shadow: 0 12px 35px rgba(0,0,0,.22);
}

.pill2{
  background: var(--accent);
  border: 1px solid var(--stroke);
  border-radius: 15px;
  padding: 14px 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.35;
  box-shadow: 0 12px 35px rgba(0,0,0,.22);
  color: rgba(0,22,41);
}

/* Sectors */
.section--sectors::before{
  content:"";
  position:absolute;
  inset: 0;
  background: url("assets/img_1_e9c594f2.jpg");
  background-size: cover;
  background-position: center;
  opacity: .16;
  pointer-events:none;
}

/* Contact */
.section--contact{
  padding-bottom: clamp(54px, 8vw, 120px);
  background:rgba(0,22,41);
}

.section--areas{
	background:white;
}
.section--escenarios{
	background: url("assets/img_2_dabd6fa1.jpg");
	background-size: cover;
	background-position: center;
}

.contact__grid{
  display:grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items:center;
}
@media (min-width: 900px){
  .contact__grid{ grid-template-columns: 1.2fr .8fr; }
}

.contact__card{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-xl);
  padding: clamp(18px, 2.7vw, 30px);
  box-shadow: var(--shadow);
}

.contact__row{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  margin-bottom: 14px;
}
.contact__row:last-child{ margin-bottom:0; }

.icon{
  width: 34px; height: 34px;
  display:grid; place-items:center;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--stroke);
}

.contact__card a{
  text-decoration:none;
  color: rgba(238,243,247,.92);
}
.contact__card a:hover{ text-decoration:underline; }

.contact__logo{
  justify-self:center;
  width: min(260px, 70%);
  opacity: .92;
  filter: drop-shadow(0 18px 55px rgba(0,0,0,.35));
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
}