/* Secuencia Gráfica – single page (ES/EN) */
:root{
  --bg:#070b10;
  --card:#0f1622;
  --soft:#0b1320;
  --text:#eef4ff;
  --muted:#b9c5da;
  --line:rgba(255,255,255,.12);
  --shadow: 0 18px 50px rgba(0,0,0,.35);
  --brand1:#10b5b5;
  --brand2:#3ad17f;
  --brand3:#1b5cff;
  --radius:18px;
  --radius2:26px;
  --max:1180px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(900px 500px at 20% -10%, rgba(16,181,181,.25), transparent 60%),
              radial-gradient(800px 500px at 80% 10%, rgba(58,209,127,.18), transparent 60%),
              radial-gradient(900px 700px at 30% 110%, rgba(27,92,255,.14), transparent 60%),
              var(--bg);
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:var(--max); margin:0 auto; padding:0 18px}
.skip{
  position:absolute; left:-999px; top:12px;
  background:#fff; color:#000; padding:10px 14px; border-radius:12px; z-index:99;
}
.skip:focus{left:12px}

.header{
  position:sticky; top:0; z-index:50;
  background: rgba(7,11,16,.68);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:12px 0;
}
.brand{display:flex; align-items:center; gap:12px}
.brand__logo{
  width:44px; height:44px; border-radius:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.brand__text{display:flex; flex-direction:column; line-height:1.05}
.brand__name{
  font-family: Montserrat, Inter, sans-serif;
  font-weight:800; letter-spacing:.2px;
}
.brand__tag{font-size:.85rem; color:var(--muted)}
.nav{display:flex; gap:16px; align-items:center}
.nav a{
  font-weight:600; font-size:.95rem; color:rgba(238,244,255,.88);
  padding:10px 10px; border-radius:14px;
}
.nav a:hover{background: rgba(255,255,255,.06)}
.header__actions{display:flex; align-items:center; gap:10px}
.lang{
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  color:var(--text);
  border-radius:14px; padding:9px 12px;
  font-weight:700; cursor:pointer;
}
.burger{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  cursor:pointer;
}
.burger span{display:block; height:2px; background:#fff; margin:6px 10px; opacity:.9}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.06);
  color:var(--text);
  font-weight:800;
  letter-spacing:.15px;
  transition: transform .15s ease, background .15s ease, border .15s ease;
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.10)}
.btn--primary{
  border:none;
  background: linear-gradient(135deg, var(--brand1), var(--brand2));
  color:#031011;
}
.btn--primary:hover{background: linear-gradient(135deg, #18d2d2, #58f0a0)}
.btn--secondary{
  border:none;
  background: linear-gradient(135deg, rgba(27,92,255,.95), rgba(16,181,181,.9));
}
.btn--ghost{
  background: transparent;
  box-shadow:none;
}
.btn--ghost:hover{background: rgba(255,255,255,.08)}
.mini{font-size:.92rem; color:rgba(238,244,255,.85)}
.dot{opacity:.4; padding:0 6px}

.hero{
  position:relative;
  min-height: calc(100vh - 74px);
  display:flex; align-items:center;
  padding:40px 0 24px;
}
.hero__bg{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(7,11,16,.45), rgba(7,11,16,.85)),
    url("../img/portada.png") center/cover no-repeat;
  filter: saturate(1.05) contrast(1.05);
}
.hero__inner{
  position:relative;
  display:grid;
  grid-template-columns: 1.35fr .75fr;
  gap:22px;
  align-items:stretch;
}
.hero__content{
  padding:22px;
  border-radius: var(--radius2);
  border: 1px solid var(--line);
  background: rgba(15,22,34,.62);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
}
.kicker{
  display:inline-flex; align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color:rgba(238,244,255,.9);
  font-weight:800;
  font-size:.9rem;
}
.hero h1{
  margin:14px 0 10px;
  font-family: Montserrat, Inter, sans-serif;
  font-size: clamp(2.0rem, 3.2vw, 3.1rem);
  line-height:1.05;
}
.lead{
  color:rgba(238,244,255,.86);
  font-size:1.05rem;
  line-height:1.6;
  max-width: 58ch;
}
.hero__badges{
  display:flex; flex-wrap:wrap;
  gap:10px;
  margin:16px 0 18px;
}
.badge{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  border-radius:999px;
  padding:8px 12px;
  font-weight:700;
  color:rgba(238,244,255,.9);
}
.hero__cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.quote{
  margin:16px 0 0;
  color:rgba(185,197,218,.95);
  font-style:italic;
  border-left:3px solid rgba(16,181,181,.7);
  padding-left:12px;
}
.hero__card{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.15);
  background: rgba(15,22,34,.66);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.hero__cardTop{
  display:flex; justify-content:space-between; gap:10px;
  padding:16px 16px 10px;
}
.pill{
  font-weight:900;
  font-size:.85rem;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(58,209,127,.12);
  border:1px solid rgba(58,209,127,.25);
}
.pill--dark{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.hero__cardBody{padding:6px 16px 16px}
.hero__cardBody h3{
  margin:6px 0 10px;
  font-family: Montserrat, Inter, sans-serif;
  font-weight:900;
}
.check{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.check li{
  position:relative; padding-left:28px; color:rgba(238,244,255,.9); line-height:1.35;
}
.check li::before{
  content:"✓";
  position:absolute; left:0; top:0;
  width:20px; height:20px;
  display:grid; place-items:center;
  border-radius:7px;
  background: rgba(16,181,181,.18);
  border: 1px solid rgba(16,181,181,.35);
}
.hero__cardBottom{
  margin-top:auto;
  padding:14px 16px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; flex-wrap:wrap;
}

.section{padding:64px 0}
.section--soft{
  background: radial-gradient(900px 500px at 20% 10%, rgba(16,181,181,.12), transparent 60%),
              radial-gradient(900px 500px at 80% 20%, rgba(58,209,127,.10), transparent 60%),
              rgba(255,255,255,.02);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section__head{
  margin-bottom:18px;
}
.section__head h2{
  margin:0 0 8px;
  font-family: Montserrat, Inter, sans-serif;
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
}
.section__head p{margin:0; color:var(--muted); line-height:1.6; max-width: 75ch}

.tabs{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:18px 0 16px;
}
.tab{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color:rgba(238,244,255,.9);
  border-radius:999px;
  padding:10px 14px;
  cursor:pointer;
  font-weight:900;
}
.tab.is-active{
  border:none;
  background: linear-gradient(135deg, rgba(16,181,181,.9), rgba(58,209,127,.85));
  color:#021112;
}
.panel{display:none}
.panel.is-active{display:block}

.grid{display:grid; gap:14px}
.cards{grid-template-columns: repeat(3, minmax(0,1fr))}
.card{
  padding:16px 16px 14px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(15,22,34,.55);
  box-shadow: 0 12px 26px rgba(0,0,0,.25);
}
.card h3{
  margin:0 0 8px;
  font-family: Montserrat, Inter, sans-serif;
  font-weight:900;
  letter-spacing:.1px;
}
.card p{margin:0 0 12px; color:rgba(185,197,218,.95); line-height:1.55}
.tagrow{display:flex; flex-wrap:wrap; gap:8px}
.tag{
  font-size:.82rem; font-weight:800;
  padding:7px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(238,244,255,.88);
}

.links{grid-template-columns: repeat(3, minmax(0,1fr))}
.linkCard{
  display:flex; gap:12px; align-items:center;
  padding:14px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(15,22,34,.55);
  box-shadow: 0 12px 26px rgba(0,0,0,.25);
}
.linkCard:hover{transform: translateY(-1px)}
.linkCard__icon{
  width:44px; height:44px; border-radius:16px;
  display:grid; place-items:center;
  background: rgba(16,181,181,.14);
  border:1px solid rgba(16,181,181,.25);
  font-size:1.2rem;
}
.linkCard strong{display:block; font-family: Montserrat, Inter, sans-serif; font-weight:900}
.linkCard span{display:block; color:rgba(185,197,218,.95); font-size:.95rem}
.linkCard--wide{grid-column: span 3}

.socialRow{
  margin-top:18px;
  display:grid;
  grid-template-columns: 1fr 2fr;
  gap:14px;
  align-items:start;
}
.socialCard{
  padding:16px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(15,22,34,.55);
}
.socialCard h3{margin:0 0 6px; font-family: Montserrat, Inter, sans-serif; font-weight:900}
.socialCard p{margin:0 0 10px; color:var(--muted); line-height:1.55}
.socialBtns{display:flex; flex-wrap:wrap; gap:10px}
.embedGrid{
  display:grid; grid-template-columns: 1fr 1fr; gap:14px;
}
.fb{
  width:100%;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(15,22,34,.55);
  min-height:420px;
}

.projects{grid-template-columns: repeat(4, minmax(0,1fr))}
.project{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(15,22,34,.55);
  box-shadow: 0 12px 26px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
.project:hover{transform: translateY(-2px)}
.project img{height:160px; width:100%; object-fit:cover}
.project__meta{padding:12px 12px 14px}
.project__meta strong{display:block; font-family: Montserrat, Inter, sans-serif; font-weight:900}
.project__meta span{display:block; color:var(--muted); font-size:.95rem}

.videoWrap{
  margin-top:18px;
  display:grid;
  grid-template-columns: 1fr 2fr;
  gap:14px;
  align-items:start;
}
.videoHead{
  padding:16px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(15,22,34,.55);
}
.videoHead h3{margin:0 0 6px; font-family: Montserrat, Inter, sans-serif; font-weight:900}
.videoHead p{margin:0; color:var(--muted); line-height:1.55}
.video{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  padding-top:56.25%;
}
.video iframe{
  position:absolute; inset:0; width:100%; height:100%;
}

.masonry{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:12px;
}
.tile{
  position:relative;
  grid-column: span 4;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(15,22,34,.55);
  cursor:zoom-in;
  box-shadow: 0 12px 26px rgba(0,0,0,.25);
}
.tile img{width:100%; height:220px; object-fit:cover; transition: transform .25s ease}
.tile:hover img{transform: scale(1.03)}
.tile .cap{
  position:absolute; left:10px; bottom:10px;
  padding:8px 10px;
  border-radius: 999px;
  background: rgba(7,11,16,.65);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(238,244,255,.9);
  font-weight:800;
  font-size:.9rem;
}
.tile.span-6{grid-column: span 6}
.tile.span-8{grid-column: span 8}
.tile.span-12{grid-column: span 12}
.tile img.tall{height:300px}

.contactGrid{
  display:grid;
  grid-template-columns: 1.45fr .85fr;
  gap:14px;
  align-items:start;
}
.form{
  padding:16px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(15,22,34,.55);
  box-shadow: 0 12px 26px rgba(0,0,0,.25);
}
.form label{display:block; font-weight:800; color:rgba(238,244,255,.9); margin-bottom:12px}
.form span{display:block; margin-bottom:6px; color:rgba(238,244,255,.85)}
input, select, textarea{
  width:100%;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:var(--text);
  padding:12px 12px;
  border-radius: 14px;
  outline:none;
  font: inherit;
}
textarea{resize:vertical; min-height:120px}
input:focus, select:focus, textarea:focus{
  border-color: rgba(16,181,181,.55);
  box-shadow: 0 0 0 4px rgba(16,181,181,.12);
}
.row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.formActions{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:6px;
}
.small{margin:12px 0 0; color:rgba(185,197,218,.95); line-height:1.55; font-size:.95rem}

.contactSide{display:grid; gap:14px}
.infoBox{
  padding:16px;
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(15,22,34,.55);
}
.infoBox h3{margin:0 0 8px; font-family: Montserrat, Inter, sans-serif; font-weight:900}
.info{margin:0; padding-left:18px; color:rgba(238,244,255,.9)}
.info li{margin:10px 0; line-height:1.5}
.info a{text-decoration:underline; text-underline-offset: 3px; opacity:.95}

.map{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(15,22,34,.55);
  min-height: 320px;
}
.map iframe{width:100%; height:320px; border:0}

.section--cta{
  padding:38px 0;
  border-top:1px solid var(--line);
  background: linear-gradient(135deg, rgba(16,181,181,.18), rgba(58,209,127,.14));
}
.ctaBar{
  border-radius: var(--radius2);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(7,11,16,.50);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  padding:18px;
  display:flex; gap:14px; align-items:center; justify-content:space-between;
}
.ctaBar h3{margin:0 0 4px; font-family: Montserrat, Inter, sans-serif; font-weight:900}
.ctaBar p{margin:0; color:rgba(238,244,255,.85); line-height:1.5}
.ctaBar__actions{display:flex; flex-wrap:wrap; gap:10px}

.footer{
  border-top:1px solid var(--line);
  padding:24px 0;
  background: rgba(7,11,16,.85);
}
.footer__inner{
  display:flex; gap:14px; align-items:center; justify-content:space-between;
  flex-wrap:wrap;
}
.footer__left{display:flex; gap:12px; align-items:center}
.footer__logo{width:44px; height:44px; border-radius:14px}
.muted{color:rgba(185,197,218,.95)}
.footer__right p{margin:0}
.footer__right a{text-decoration:underline; text-underline-offset:3px}

.waFloat{
  position:fixed; right:18px; bottom:18px;
  width:56px; height:56px;
  border-radius: 18px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, #25D366, #11b67a);
  box-shadow: 0 18px 38px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.2);
  z-index:60;
}
.waFloat svg{width:30px; height:30px; fill:#031011}

.lightbox{
  position:fixed; inset:0;
  background: rgba(0,0,0,.78);
  display:none;
  place-items:center;
  padding:22px;
  z-index:80;
}
.lightbox.is-open{display:grid}
.lightbox img{
  max-width:min(1100px, 96vw);
  max-height: 78vh;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.lightbox__close{
  position:absolute;
  right:18px; top:14px;
  width:44px; height:44px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color:#fff;
  font-size:28px;
  cursor:pointer;
}
.lightbox__cap{
  margin-top:10px;
  color:rgba(238,244,255,.9);
  font-weight:800;
  text-align:center;
}

@media (max-width: 980px){
  .hero__inner{grid-template-columns:1fr}
  .projects{grid-template-columns: repeat(2, minmax(0,1fr))}
  .cards{grid-template-columns: repeat(2, minmax(0,1fr))}
  .links{grid-template-columns: repeat(2, minmax(0,1fr))}
  .linkCard--wide{grid-column: span 2}
  .socialRow{grid-template-columns:1fr}
  .embedGrid{grid-template-columns:1fr}
  .videoWrap{grid-template-columns:1fr}
  .contactGrid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .nav{display:none}
  .burger{display:block}
  .nav.is-open{
    display:flex;
    position:absolute;
    left:18px; right:18px;
    top:72px;
    flex-direction:column;
    background: rgba(7,11,16,.92);
    border:1px solid rgba(255,255,255,.14);
    border-radius: 18px;
    padding:10px;
    gap:6px;
  }
  .nav a{width:100%}
  .hero{padding-top:22px}
  .cards, .links{grid-template-columns:1fr}
  .linkCard--wide{grid-column: span 1}
  .row{grid-template-columns:1fr}
  .masonry{grid-template-columns: repeat(6, 1fr)}
  .tile{grid-column: span 6}
  .tile img{height:240px}
}