/* ---------- HERO FULLSCREEN ---------- */
.hero-full{
  position:relative; min-height:calc(100dvh - 72px); min-height:calc(100vh - 72px);
  overflow:hidden; background:var(--black); color:var(--white);
  display:flex; align-items:flex-end;
}
.hero-media{ position:absolute; inset:0; }
.hero-media video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top;
  opacity:0; transition:opacity .8s ease;
}
.hero-media video.is-on{ opacity:1; }
.hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(23,20,15,.18) 0%, rgba(23,20,15,.2) 40%, rgba(23,20,15,.82) 100%),
    radial-gradient(ellipse at 20% 80%, rgba(247,114,79,.28), transparent 50%);
  pointer-events:none;
}
.hero-copy{
  position:relative; z-index:2; padding:0 28px 72px;
  max-width:var(--max); margin:0 auto; width:100%;
}
.hero-copy .tag{ background:var(--white); color:var(--black); }
.hero-copy h1{
  font-size:clamp(3rem, 8vw, 6.2rem); color:var(--white); margin-top:16px;
  text-shadow:6px 6px 0 var(--coral), -1px -1px 0 var(--black), 1px -1px 0 var(--black), -1px 1px 0 var(--black), 1px 1px 0 var(--black);
}
.hero-line{
  margin-top:14px; font-weight:800; font-size:clamp(1.05rem, 2vw, 1.35rem);
  letter-spacing:.04em; text-transform:uppercase;
}
.hero-ctas{ margin-top:28px; display:flex; gap:14px; flex-wrap:wrap; }
.hero-scroll{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  color:var(--white); font-weight:800; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; text-decoration:none; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:6px; opacity:.85;
}
.hero-scroll span{
  width:18px; height:28px; border:2px solid var(--white); border-radius:12px; position:relative;
}
.hero-scroll span::after{
  content:""; position:absolute; top:5px; left:50%; width:4px; height:4px;
  margin-left:-2px; border-radius:50%; background:var(--white);
  animation:scroll-dot 1.6s ease-in-out infinite;
}
@keyframes scroll-dot{ 0%{ top:5px; opacity:1;} 100%{ top:16px; opacity:0;} }

/* ---------- SECTION HEADS ---------- */
.section-head{ max-width:680px; margin-bottom:42px; }
.section-head h2{ font-size:clamp(2.1rem,4.6vw,3.3rem); margin-top:12px; }
.section-head p{ font-size:1.05rem; line-height:1.6; margin-top:14px; font-weight:500; color:#3a3327;}
.on-black .section-head p{ color:#E9E3D6; }
.on-black .section-head h2{ color:var(--white); text-shadow:4px 4px 0 var(--coral);}
.on-black .eyebrow{ color:var(--yellow); }
.on-black .eyebrow::before{ background:var(--yellow); }
.centered{ text-align:center; margin-left:auto; margin-right:auto; }

.pad{ padding:96px 0; }

/* ---------- CATEGORIES ---------- */
.categorias{ background:var(--cream); }
.cat-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.cat-card{
  position:relative; display:block; text-decoration:none; color:var(--white);
  border-radius:24px; overflow:hidden; border:3px solid var(--black);
  box-shadow:6px 6px 0 var(--black); min-height:280px;
  background-size:cover; background-position:center;
  transition:transform .25s cubic-bezier(.2,.85,.35,1), box-shadow .25s cubic-bezier(.2,.85,.35,1);
}
.cat-card.reveal:nth-child(1){ transition-delay:.04s; }
.cat-card.reveal:nth-child(2){ transition-delay:.08s; }
.cat-card.reveal:nth-child(3){ transition-delay:.12s; }
.cat-card.reveal:nth-child(4){ transition-delay:.16s; }
.cat-card.reveal:nth-child(5){ transition-delay:.2s; }
.cat-card.reveal:nth-child(6){ transition-delay:.24s; }
.cat-card:hover{ transform:translate(-3px,-4px); box-shadow:9px 10px 0 var(--coral); }
.cat-card .shade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(23,20,15,.05) 20%, rgba(23,20,15,.78) 100%);
}
.cat-card .body{ position:absolute; left:18px; right:18px; bottom:18px; }
.cat-card h3{ font-family:'Chendolle'; font-size:2rem; }
.cat-card p{ margin:6px 0 0; font-weight:600; font-size:.92rem; opacity:.92; }

@media (max-width:860px){ .cat-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){
  .cat-grid{ grid-template-columns:1fr; }
  .cat-card{ min-height:220px; }
}

/* ---------- EXPERIENCES ---------- */
.experiencias{ background:var(--white); }
.exp-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.exp-card{
  background:var(--white); border:3px solid var(--black); border-radius:24px;
  overflow:hidden; box-shadow:6px 6px 0 var(--black);
  display:flex; flex-direction:column;
  transition:transform .25s cubic-bezier(.2,.85,.35,1);
}
.exp-card:hover{ transform:translate(-2px,-3px); }
.exp-card .media{
  aspect-ratio:9/16; background-size:cover; background-position:center top;
  position:relative; cursor:pointer;
}
.exp-card .media .play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.92);
  border:2.5px solid var(--black); display:flex; align-items:center; justify-content:center;
}
.exp-card .media .play svg{ width:18px !important; height:18px !important; max-width:18px; max-height:18px; margin-left:2px; flex-shrink:0; display:block; }
.exp-card .body{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.exp-card .meta{ font-weight:800; font-size:.78rem; text-transform:uppercase; letter-spacing:.3px; color:var(--coral-text); }
.exp-card h3{ font-family:'Plus Jakarta Sans'; font-weight:800; font-size:1.12rem; line-height:1.2; }
.exp-card p{ margin:0; font-size:.92rem; line-height:1.5; color:#3a3327; font-weight:500; }
.exp-card .btn{ margin-top:auto; align-self:flex-start; }

@media (max-width:900px){ .exp-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .exp-grid{ grid-template-columns:1fr; max-width:420px; margin:0 auto;} }

/* ---------- PARCHES / MASONRY ---------- */
.parches{ background:var(--cream); }
.filter-row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
.filter-btn{
  border:2.5px solid var(--black); background:var(--white); border-radius:999px;
  padding:10px 18px; font-weight:800; font-size:.86rem; cursor:pointer;
  box-shadow:3px 3px 0 var(--black); transition:transform .15s ease, background .15s ease, color .15s ease;
}
.filter-btn:hover{ transform:translate(-2px,-2px); }
.filter-btn.active{ background:var(--black); color:var(--white); }

.port-grid{
  columns:4; column-gap:16px;
}
.port-card{
  position:relative; border-radius:22px; overflow:hidden; border:3px solid var(--black);
  box-shadow:5px 5px 0 var(--black); cursor:pointer; aspect-ratio:9/16;
  break-inside:avoid; margin-bottom:16px; display:inline-block; width:100%;
  background-size:cover; background-position:center top;
  transition:transform .25s cubic-bezier(.2,.85,.35,1), box-shadow .25s cubic-bezier(.2,.85,.35,1);
}
.port-card:nth-child(5n){ aspect-ratio:3/4; }
.port-card:hover{ transform:translate(-2px,-3px); box-shadow:8px 8px 0 var(--coral); }
.port-card .shade{
  position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.7) 100%);
}
.port-card .kind{
  position:absolute; top:12px; left:12px; background:var(--white); border:2px solid var(--black);
  border-radius:999px; padding:5px 12px; font-weight:800; font-size:.7rem; text-transform:uppercase; letter-spacing:.3px;
}
.port-card .play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.92);
  border:2.5px solid var(--black); display:flex; align-items:center; justify-content:center;
}
.port-card .play svg{ width:18px !important; height:18px !important; max-width:18px; max-height:18px; margin-left:2px; flex-shrink:0; display:block; }
.port-card .info{ position:absolute; left:12px; right:12px; bottom:12px; color:var(--white); }
.port-card .info .client{ font-weight:800; font-size:.95rem; }
.port-card .info .fmt{ font-size:.78rem; font-weight:600; opacity:.9; }
.port-card.hide{ display:none; }

@media (max-width:1100px){ .port-grid{ columns:3; } }
@media (max-width:760px){ .port-grid{ columns:2; } }

/* ---------- MANIFESTO ---------- */
.manifiesto{
  min-height:72vh; display:flex; align-items:center; justify-content:center;
  background-size:cover; background-position:center; position:relative;
  border-top:4px solid var(--black); border-bottom:4px solid var(--black);
}
.manifiesto::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(23,20,15,.45), rgba(23,20,15,.72));
}
.manifiesto-inner{ position:relative; z-index:2; text-align:center; padding:80px 28px; }
.manifiesto h2{
  color:var(--white); font-size:clamp(2.4rem, 7vw, 4.8rem);
  text-shadow:5px 5px 0 var(--coral);
}
.manifiesto p{
  color:#F3EEE3; font-weight:600; font-size:1.12rem; line-height:1.6;
  max-width:520px; margin:22px auto 0;
}

/* ---------- FEED ---------- */
.feed{ background:var(--white); }
.wall{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.wall-item{
  position:relative; aspect-ratio:9/16; border-radius:18px; overflow:hidden;
  border:3px solid var(--black); background-size:cover; background-position:center;
  cursor:pointer; box-shadow:4px 4px 0 var(--black);
}
.wall-item:nth-child(4), .wall-item:nth-child(8){ aspect-ratio:3/4; }
.wall-cta{ margin-top:32px; text-align:center; }

@media (max-width:760px){ .wall{ grid-template-columns:repeat(2,1fr);} }

/* ---------- DETRAS ---------- */
.detras{ background:var(--cream); }
.detras-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:stretch;
}
.detras-copy p{ font-size:1.08rem; line-height:1.7; color:#332C22; font-weight:500; }
.detras-mosaic{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.detras-shot{
  border-radius:20px; overflow:hidden; border:3px solid var(--black);
  box-shadow:5px 5px 0 var(--black); aspect-ratio:9/16;
  background-size:cover; background-position:center; cursor:pointer;
}
.detras-shot:first-child{ grid-row:span 2; aspect-ratio:auto; min-height:100%; }

@media (max-width:860px){ .detras-grid{ grid-template-columns:1fr; } }

/* ---------- MARCAS Y PLANES DE VISIBILIDAD ---------- */
.para-marcas{
  background:var(--yellow); border-top:4px solid var(--black); border-bottom:4px solid var(--black);
  overflow:hidden; position:relative;
}
.marcas-watermark{
  position:absolute; right:-90px; top:50%; transform:translateY(-50%) rotate(8deg);
  width:420px; height:auto; opacity:.14; pointer-events:none;
}
.marcas-lead{ font-size:1.25rem; font-weight:700; max-width:760px; line-height:1.55; margin:0 0 36px; color:var(--ink); }

/* Visibility Pillars */
.vis-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:44px;
}
.vis-card{
  background:var(--white); border:3px solid var(--black); border-radius:20px;
  padding:24px 20px; box-shadow:5px 5px 0 var(--black); display:flex; flex-direction:column; gap:10px;
  transition:transform .2s ease, box-shadow .2s ease;
  min-width: 0; overflow: hidden;
}
.vis-card:hover{ transform:translate(-2px,-3px); box-shadow:8px 8px 0 var(--black); }
.vis-card .vis-icon{
  width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important; max-width:44px !important; max-height:44px !important;
  border-radius:14px; background:var(--yellow);
  border:2px solid var(--black); display:flex; align-items:center; justify-content:center;
  box-shadow:3px 3px 0 var(--black); flex:none; flex-shrink:0; overflow:hidden;
}
.vis-card .vis-icon svg{
  width:22px !important; height:22px !important; min-width:22px !important; min-height:22px !important; max-width:22px !important; max-height:22px !important;
  color:var(--black); display:block; flex:none; flex-shrink:0;
}
.vis-card h3{ font-family:'Plus Jakarta Sans', sans-serif; font-size:1.12rem; font-weight:800; line-height:1.25; margin:0; }
.vis-card p{ margin:0; font-size:.9rem; line-height:1.5; color:#3a3327; font-weight:500; }

/* Plans Grid */
.plans-heading{
  text-align:center; margin:40px 0 28px;
}
.plans-heading h3{
  font-family:'Chendolle', sans-serif; font-size:clamp(2rem, 4.2vw, 2.8rem); margin:0 0 10px;
}
.plans-heading p{
  margin:0 auto; max-width:600px; font-weight:600; font-size:1.05rem; color:#2c271e;
}
.plans-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:28px; align-items:stretch;
}
.plan-card{
  background:var(--white); border:3px solid var(--black); border-radius:26px;
  padding:32px 26px; box-shadow:6px 6px 0 var(--black);
  display:flex; flex-direction:column; position:relative;
  transition:transform .25s cubic-bezier(.2,.85,.35,1), box-shadow .25s cubic-bezier(.2,.85,.35,1);
  min-width: 0; overflow: hidden;
}
.plan-card:hover{ transform:translate(-3px,-4px); box-shadow:9px 10px 0 var(--black); }
.plan-card.popular{
  background:var(--cream); border-width:3.5px; box-shadow:8px 8px 0 var(--coral);
  transform:scale(1.02); z-index:2;
}
.plan-card.popular:hover{ transform:scale(1.02) translate(-3px,-4px); box-shadow:11px 12px 0 var(--coral); }
.plan-badge-top{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--coral); color:var(--black); border:2px solid var(--black);
  border-radius:999px; padding:4px 16px; font-weight:800; font-size:.76rem;
  letter-spacing:.5px; text-transform:uppercase; box-shadow:3px 3px 0 var(--black);
}
.plan-header{ margin-bottom:18px; padding-bottom:16px; border-bottom:2px dashed rgba(23,20,15,.2); }
.plan-header .plan-tag{
  display:inline-block; font-size:.78rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.4px; color:var(--coral-text); margin-bottom:6px;
}
.plan-header h4{
  font-family:'Chendolle', sans-serif; font-size:1.85rem; margin:0 0 6px;
}
.plan-header .plan-desc{
  font-size:.9rem; color:#4a4235; margin:0; line-height:1.45; font-weight:600;
}
.plan-header .plan-ideal{
  margin-top:10px; font-size:.82rem; font-weight:700; color:#17140f; background:rgba(236,179,30,.25);
  padding:6px 10px; border-radius:10px; display:inline-block;
}
.plan-list{
  list-style:none; padding:0; margin:0 0 28px; display:flex; flex-direction:column; gap:12px; flex:1;
}
.plan-list li{
  display:flex; align-items:flex-start; gap:10px; font-size:.92rem; line-height:1.45; color:#211d16; font-weight:600;
}
.plan-list li svg{
  width:18px !important; height:18px !important; min-width:18px !important; min-height:18px !important; max-width:18px !important; max-height:18px !important;
  color:var(--coral); flex:none; flex-shrink:0; margin-top:2px; display:block;
}
.plan-card .btn{
  width:100%; justify-content:center; margin-top:auto; font-size:.96rem; padding:13px 20px;
}

/* Sectores */
.sectors-wrap{
  margin-top:48px; padding-top:32px; border-top:2px solid rgba(23,20,15,.15);
}
.sectors-wrap h4{
  font-size:1.1rem; font-weight:800; margin:0 0 14px;
}
.offer-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px; }
.offer-card{
  background:var(--white); border:2.5px solid var(--black); border-radius:18px;
  padding:16px 14px; font-weight:800; font-size:.92rem; text-align:center;
}
.sector-grid{ display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; }
.plan-disclaimer{
  margin-top:36px; background:var(--white); border:2.5px solid var(--black);
  border-radius:18px; padding:18px 24px; box-shadow:4px 4px 0 var(--black);
  display:flex; align-items:center; gap:16px;
}
.plan-disclaimer svg{
  width:28px !important; height:28px !important; min-width:28px !important; min-height:28px !important; max-width:28px !important; max-height:28px !important;
  color:var(--coral-text); flex:none; flex-shrink:0; display:block;
}
.plan-disclaimer p{ margin:0; font-size:.92rem; font-weight:600; line-height:1.5; color:#3a3327; }

@media (max-width:980px){
  .vis-grid{ grid-template-columns:repeat(2,1fr); }
  .plans-grid{ grid-template-columns:1fr; max-width:480px; margin-left:auto; margin-right:auto; }
  .plan-card.popular{ transform:none; }
  .plan-card.popular:hover{ transform:translate(-3px,-4px); }
  .offer-grid{ grid-template-columns:repeat(2,1fr);}
  .marcas-watermark{ display:none; }
}
@media (max-width:600px){
  .vis-grid{ grid-template-columns:1fr; }
  .plan-disclaimer{ flex-direction:column; text-align:center; }
}

/* ---------- VISION ---------- */
.vision{ background:var(--black); }
.route{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:10px 0 48px;
}
.route span{
  background:var(--ink); color:var(--white); border:2px solid #3a3427;
  border-radius:999px; padding:10px 18px; font-weight:800;
}
.route span.now{ background:var(--coral); color:var(--black); border-color:var(--black); }
.future-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.future-card{
  background:var(--ink); border:2.5px solid #3a3427; border-radius:22px; padding:22px 18px;
  color:var(--white); text-decoration:none; display:block;
}
.future-card h3{ font-family:'Plus Jakarta Sans'; font-weight:800; font-size:1.02rem; margin-bottom:8px; }
.future-card p{ margin:0; color:#D9D2C2; font-size:.9rem; line-height:1.5; font-weight:500; }
@media (max-width:900px){ .future-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .future-grid{ grid-template-columns:1fr; } }

/* ---------- FAQ ---------- */
.faq{ background:var(--cream); }
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
.faq-item{
  background:var(--white); border:2.5px solid var(--black); border-radius:20px;
  padding:20px 24px; box-shadow:5px 5px 0 var(--black);
}
.faq-item summary{
  font-weight:800; font-size:1.05rem; cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+'; font-family:'Chendolle'; font-size:1.6rem; color:var(--coral-text);
  flex:none; transition:transform .2s ease;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ margin:14px 0 2px; font-size:.98rem; line-height:1.65; color:#3a3327; font-weight:500; }

/* ---------- CONTACTO ---------- */
.contacto{ background:var(--black); padding:110px 0 90px; overflow:hidden;}
.contacto::before{
  content:""; position:absolute; inset:0;
  background:url('../img/pattern.jpg'); background-size:480px; opacity:.08;
}
.contacto-inner{ position:relative; z-index:2; text-align:center; }
.contacto h2{ color:var(--white); font-size:clamp(2.2rem,5vw,3.6rem); text-shadow:5px 5px 0 var(--coral);}
.contacto p{ color:#E9E3D6; font-size:1.1rem; max-width:560px; margin:20px auto 34px; font-weight:600; line-height:1.6;}
.social-row{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:38px;}
.social-btn{
  width:64px;height:64px;border-radius:50%;
  background:var(--white); border:3px solid var(--black);
  display:flex;align-items:center;justify-content:center;
  text-decoration:none; box-shadow:5px 5px 0 var(--coral);
  transition:transform .22s cubic-bezier(.2,.85,.35,1), box-shadow .22s cubic-bezier(.2,.85,.35,1);
}
.social-btn:hover{ transform:translate(-3px,-3px) rotate(-6deg); box-shadow:8px 8px 0 var(--coral); }
.social-btn svg{ width:26px !important; height:26px !important; max-width:26px; max-height:26px; flex-shrink:0; display:block; }

/* ---------- FOOTER ---------- */
footer{ background:var(--cream); padding:44px 0 30px; border-top:4px solid var(--black); }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px;}
.footer-brand{ display:flex; align-items:center; gap:12px; }
.footer-brand img{ width:40px; height:40px; }
.footer-word{ font-family:'Chendolle'; font-size:1.3rem; }
.footer-tag{ font-size:.88rem; color:#71695A; font-weight:600; max-width:360px; }
.to-top{
  width:46px;height:46px;border-radius:50%; border:2.5px solid var(--black);
  display:flex;align-items:center;justify-content:center; text-decoration:none;
  background:var(--white); box-shadow:3px 3px 0 var(--black); flex:none;
}

/* ---------- FLOAT CONTACT ---------- */
.float-contact{ position:fixed; right:18px; bottom:18px; z-index:200; }
.float-toggle{
  width:58px; height:58px; border-radius:50%; border:3px solid var(--black);
  background:var(--coral); cursor:pointer; box-shadow:5px 5px 0 var(--black);
  display:flex; align-items:center; justify-content:center;
}
.float-toggle svg{ width:26px; height:26px; }
.float-menu{
  display:none; position:absolute; right:0; bottom:70px; width:min(280px, calc(100vw - 40px));
  background:var(--white); border:3px solid var(--black); border-radius:18px;
  box-shadow:6px 6px 0 var(--black); padding:10px; flex-direction:column; gap:8px;
}
.float-contact.open .float-menu{ display:flex; }
.float-menu a{
  text-decoration:none; font-weight:800; font-size:.88rem; padding:12px 12px;
  border-radius:12px; background:var(--cream);
}
.float-menu a:hover{ background:var(--yellow); }

/* lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(15,13,9,.92); z-index:1000;
  display:none; align-items:center; justify-content:center; padding:30px;
}
.lightbox.open{ display:flex; }
.lightbox-inner{
  width:min(420px, 92vw); max-height:92vh; display:flex; flex-direction:column; align-items:center;
}
.lightbox-media{
  width:100%; max-height:calc(92vh - 56px); border-radius:20px; border:3px solid var(--black);
  overflow:hidden; background:var(--black); aspect-ratio:9/16;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-media img, .lightbox-media video{ width:100%; height:100%; object-fit:contain; display:block; }
.lightbox-cap{ color:var(--white); margin-top:16px; font-weight:700; text-align:center;}
.lightbox-close{
  position:absolute; top:24px; right:28px; width:44px; height:44px; border-radius:50%;
  background:var(--white); border:2.5px solid var(--black); cursor:pointer; font-weight:800; font-size:1.1rem;
}

/* reveal */
.reveal{ opacity:0; translate:0 22px; transition:opacity .7s ease, translate .7s ease, scale .7s ease; }
.reveal.in{ opacity:1; translate:0 0; }
.port-card.reveal, .cat-card.reveal, .exp-card.reveal{ scale:.96; }
.port-card.reveal.in, .cat-card.reveal.in, .exp-card.reveal.in{ scale:1; }

@media (max-width:600px){
  .wrap{padding:0 20px;}
  .hero-copy{ padding:0 20px 88px; }
  .pad{ padding:64px 0; }
  .hero-ctas .btn{ width:100%; justify-content:center; }
  .port-card .info .client{ font-size:.88rem; line-height:1.2; }
  .port-card .play{ width:42px; height:42px; }
}