/* =========================================================
   VIVERO — hoja de estilos compartida
   ========================================================= */
:root{
  --bg:#000000;
  --surface:#0a0a0a;
  --surface-2:#121212;
  --ink:#ffffff;
  --ink-dim:#9a9a9a;
  --ink-soft:#5c5c5c;
  --red:#e2231a;
  --green:#3ecf6a;
  --amber:#e8a33d;
  --line:rgba(255,255,255,0.14);
  --line-strong:rgba(255,255,255,0.3);
  --sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --ease:cubic-bezier(.16,1,.3,1);
}
body.light{
  --bg:#ffffff;
  --surface:#f3f3f3;
  --surface-2:#e9e9e9;
  --ink:#0a0a0a;
  --ink-dim:#5c5c5c;
  --ink-soft:#9a9a9a;
  --line:rgba(0,0,0,0.14);
  --line-strong:rgba(0,0,0,0.3);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  cursor:none;
  overflow-x:hidden;
  line-height:1.5;
  transition:background .5s var(--ease), color .5s var(--ease);
}
@media (max-width:860px){ body{cursor:auto;} #cursor-dot,#cursor-ring{display:none;} }
::selection{background:var(--red);color:#fff;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:none;}
@media (max-width:860px){ button{cursor:pointer;} }
img,svg{display:block;max-width:100%;}

/* progress bar de scroll */
#progress{position:fixed;top:0;left:0;height:2px;background:var(--red);z-index:9997;width:0%;transition:width .12s linear;}

/* cursor */
#cursor-dot,#cursor-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);}
#cursor-dot{width:6px;height:6px;background:var(--red);transition:background .3s var(--ease),width .3s var(--ease),height .3s var(--ease);}
#cursor-ring{width:34px;height:34px;border:1px solid var(--line-strong);transition:width .35s var(--ease),height .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease);}
body.hover-link #cursor-ring{width:64px;height:64px;border-color:var(--red);background:rgba(226,35,26,0.1);}
body.hover-drag #cursor-ring{width:88px;height:88px;background:var(--red);border-color:var(--red);}
body.hover-drag #cursor-dot{opacity:0;}

/* topbar */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:600;
  display:flex;justify-content:space-between;align-items:center;
  padding:26px 48px;
  background:transparent;
  backdrop-filter:blur(0px);
  border-bottom:1px solid transparent;
  transition:background .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s var(--ease), padding .4s var(--ease);
}
.topbar.scrolled{
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  padding:18px 48px;
}
@media (max-width:700px){ .topbar{padding:20px 22px;} .topbar.scrolled{padding:14px 22px;} }
.topbar-left{display:flex;align-items:center;gap:34px;}
@media (max-width:700px){ .topbar-left{gap:16px;} }
.brand{display:flex;align-items:center;gap:14px;}
.brand .mark{font-size:19px;font-weight:600;letter-spacing:-0.01em;}
.brand .pill{
  font-size:11px;border:1px solid var(--line-strong);border-radius:20px;padding:3px 11px;color:var(--ink-dim);
  display:flex;align-items:center;gap:6px;
  white-space:nowrap;
}
.brand .pill i{width:5px;height:5px;border-radius:50%;background:var(--red);animation:blink 1.6s ease-in-out infinite;flex-shrink:0;}
@media (max-width:420px){
  .brand{gap:8px;}
  .brand .mark{font-size:15px;}
  .brand .pill{font-size:9px;padding:2px 8px;gap:4px;}
}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.25;}}
.burger{display:flex;flex-direction:column;gap:5px;width:26px;}
.burger i{display:block;height:1.5px;background:var(--ink);width:100%;transition:transform .35s var(--ease), opacity .35s var(--ease), width .35s var(--ease);}
.burger:hover i:first-child{width:70%;}
body.menu-open .burger i:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
body.menu-open .burger i:nth-child(2){opacity:0;}
body.menu-open .burger i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.topbar-right{display:flex;align-items:center;gap:22px;}
.theme-toggle{
  display:flex;align-items:center;border:1px solid var(--line-strong);border-radius:30px;padding:4px;gap:4px;
}
.theme-toggle button{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .3s var(--ease);}
.theme-toggle button.active{background:var(--red);}
.theme-toggle svg{stroke:var(--ink);width:14px;height:14px;}
.theme-toggle button.active svg{stroke:#fff;}

.talk-btn{
  border:1px solid var(--line-strong);padding:11px 22px;border-radius:30px;font-size:13.5px;
  display:flex;align-items:center;gap:8px;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.talk-btn:hover{background:var(--red);border-color:var(--red);color:#fff;}
@media (max-width:700px){ .talk-btn span{display:none;} }
/* En celulares, el botón "Hablemos" del header se oculta del todo (queda
   accesible desde el menú de hamburguesa, sección "Contacto"); el resto
   de los botones .talk-btn del sitio (ej. "Ver marca", "Ver todas las
   marcas") solo pierden el texto, como antes. */
@media (max-width:700px){ .topbar-talk-btn{display:none;} }
@media (max-width:700px){ .topbar-right{gap:14px;} }

/* fullscreen menu */
.menu-overlay{
  position:fixed;inset:0;background:var(--bg);z-index:900;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:110px 60px 40px;
  transform:translateY(-100%);opacity:0;
  transition:transform .6s var(--ease), opacity .45s var(--ease);
  pointer-events:none;
  overflow-y:auto;
}
body.menu-open .menu-overlay{transform:translateY(0);opacity:1;pointer-events:all;}
@media (max-width:700px){ .menu-overlay{padding:100px 26px 30px;} }

.menu-bg-numbers{position:absolute;top:110px;right:60px;display:flex;flex-direction:column;gap:120px;font-size:14px;color:var(--ink-soft);z-index:0;}
@media (max-width:900px){ .menu-bg-numbers{display:none;} }

.menu-list{position:relative;z-index:1;}
.menu-item{border-bottom:1px solid var(--line);}
.menu-item-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 0;font-size:clamp(1.8rem,4.4vw,3.2rem);font-weight:500;cursor:none;
  transition:color .3s var(--ease);
}
@media (max-width:860px){ .menu-item-head{cursor:pointer;} }
.menu-item-head:hover,.menu-item.current .menu-item-head{color:var(--red);}
.menu-item-head .plus{
  width:34px;height:34px;border:1px solid var(--line-strong);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .4s var(--ease);font-size:16px;
}
.menu-item.open .menu-item-head .plus{transform:rotate(45deg);}
.submenu{max-height:0;overflow:hidden;transition:max-height .5s var(--ease);}
.menu-item.open .submenu{max-height:400px;}
.submenu a{display:block;padding:12px 0 12px 6px;font-size:16px;color:var(--ink-dim);border-top:1px solid var(--line);transition:color .25s var(--ease);}
.submenu a:hover{color:var(--ink);}

.menu-footer{
  position:relative;z-index:1;
  display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;
  padding-top:30px;font-size:12.5px;color:var(--ink-dim);
}
.menu-social{writing-mode:vertical-rl;position:fixed;right:26px;top:50%;transform:translateY(-50%);font-size:11px;letter-spacing:0.08em;color:var(--ink-dim);z-index:2;}
@media (max-width:700px){ .menu-social{display:none;} }
.menu-close{
  position:absolute;top:30px;left:60px;width:40px;height:40px;border:1px solid var(--line-strong);border-radius:50%;
  display:flex;align-items:center;justify-content:center;z-index:2;
}
@media (max-width:700px){ .menu-close{left:22px;top:22px;} }

main{padding-top:0;}
section{position:relative;padding:0 48px;}
@media (max-width:700px){ section{padding:0 22px;} }
.wrap{max-width:1180px;margin:0 auto;}
.eyebrow{font-size:12px;color:var(--ink-dim);display:flex;align-items:center;gap:10px;}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:blink 1.6s ease-in-out infinite;}

/* HERO SLIDER (home + marcas) */
.hero{min-height:100vh;position:relative;padding:118px 48px 0;display:flex;flex-direction:column;}
@media (max-width:700px){ .hero{padding:100px 22px 0;} }
.hero-stage{
  position:relative;height:52vh;min-height:320px;border:1px solid var(--line);border-radius:14px;overflow:hidden;
}
/* Slider móvil: bloque completamente aparte del de escritorio (no comparte
   caja ni tamaño con .hero-stage). Formato fijo 1080x1354, siempre
   responsivo en ancho, nunca depende del alto de pantalla del celular. */
.hero-stage-movil{display:none;}
@media (max-width:700px){
  .hero-stage{display:none;}
  .hero-stage-movil{
    display:block;position:relative;aspect-ratio:1080/1354;height:auto;
    border:1px solid var(--line);border-radius:14px;overflow:hidden;
  }
}
/* La foto del slider móvil se ve SIEMPRE completa, nunca recortada, sin
   importar la proporción con la que se suba (a diferencia de .bg-img
   normal, que usa cover). Si la proporción no es exactamente 4:5 queda
   espacio libre arriba/abajo o a los costados: ese espacio lo llena el
   degradé de color de la marca (ver estilo_fondo en helpers.php), nunca
   una franja blanca. */
.bg-img.bg-img-movil{object-fit:contain;}
.slide-art{
  position:absolute;inset:0;opacity:0;transform:scale(1.04);display:block;
  pointer-events:none;color:inherit;text-decoration:none;
  transition:opacity 1s var(--ease), transform 1.6s var(--ease);
}
.slide-art.active{opacity:1;transform:scale(1);pointer-events:auto;}
a.slide-art.active{cursor:pointer;}
.slide-idx{position:absolute;top:18px;left:20px;font-size:14px;color:#fff;z-index:3;}
.slide-sig{position:absolute;bottom:18px;right:20px;font-size:12.5px;color:rgba(255,255,255,.75);z-index:3;}
.hero-nav{position:absolute;bottom:18px;left:20px;display:flex;gap:10px;z-index:3;}
.hero-nav button{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,0.5);display:flex;align-items:center;justify-content:center;transition:background .3s var(--ease),transform .3s var(--ease);}
.hero-nav button:hover{background:var(--red);border-color:var(--red);transform:scale(1.06);}
.hero-nav svg{stroke:#fff;}

.hero-info{
  display:grid;grid-template-columns:1.4fr 1fr;gap:50px;
  padding:44px 0 40px;border-bottom:1px solid var(--line);
}
@media (max-width:860px){ .hero-info{grid-template-columns:1fr;gap:30px;} }
.hero-meta{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-dim);}
.hero-meta .dot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:blink 1.6s ease-in-out infinite;}
.hero-title{font-size:clamp(2.2rem,5.2vw,4.2rem);font-weight:600;letter-spacing:-0.01em;margin-top:14px;line-height:1.02;min-height:1.1em;}
.hero-title .cursor-blink{display:inline-block;width:.4ch;background:var(--red);animation:blink 1.1s ease-in-out infinite;}
.hero-desc{margin-top:22px;color:var(--ink-dim);font-size:15px;max-width:52ch;transition:opacity .4s var(--ease);}
.hero-cols{display:flex;gap:60px;}
.hero-col h4{font-size:12px;color:var(--ink-soft);margin-bottom:10px;}
.hero-col p{font-size:14.5px;color:var(--ink-dim);line-height:1.7;}
.hero-side-nav{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:20px;z-index:5;
}
@media (max-width:1150px){ .hero-side-nav{display:none;} }
.hero-side-nav button{font-size:11px;color:var(--ink-soft);transition:color .3s var(--ease);}
.hero-side-nav button.active{color:var(--red);}

.hero-stats{display:flex;gap:0;margin-top:36px;flex-wrap:wrap;border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.stat{padding:20px 30px;border-right:1px solid var(--line);flex:1;min-width:140px;}
.stat:last-child{border-right:none;}
.stat .num{font-size:1.8rem;font-weight:600;color:var(--red);}
.stat .lbl{font-size:11px;color:var(--ink-dim);margin-top:6px;text-transform:uppercase;letter-spacing:.03em;}

/* ============ PAGE HERO (páginas internas) ============ */
.page-hero{min-height:64vh;padding:150px 48px 70px;display:flex;align-items:center;}
@media (max-width:700px){ .page-hero{padding:120px 22px 50px;min-height:52vh;} }
.page-hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:50px;align-items:center;width:100%;}
@media (max-width:900px){ .page-hero-grid{grid-template-columns:1fr;} }
.page-hero h1{font-size:clamp(2.4rem,5.6vw,4.4rem);font-weight:600;letter-spacing:-0.01em;line-height:1.03;margin-top:16px;}
.page-hero p{margin-top:22px;color:var(--ink-dim);font-size:15.5px;max-width:48ch;line-height:1.7;}
.page-hero .illus{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);}
.page-hero .illus img{width:100%;height:100%;object-fit:cover;}

/* ============ ILUSTRACIONES DE LÍNEA (SVG) ============ */
.line-illus{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;}
.line-illus svg{width:100%;height:100%;display:block;}
.line-illus .stroke{fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.line-illus .stroke-dim{fill:none;stroke:var(--line-strong);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}

/* ticker */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:18px 0;white-space:nowrap;position:relative;z-index:1;}
.ticker-track{display:inline-flex;gap:40px;animation:tickerMove 30s linear infinite;}
.ticker-track span{font-size:13px;color:var(--ink-dim);display:inline-flex;align-items:center;gap:40px;}
.ticker-track b{color:var(--ink);}
.ticker-track .up{color:var(--green);} .ticker-track .down{color:var(--red);}
@keyframes tickerMove{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* manifiesto */
.manifiesto{background:var(--surface);padding:110px 48px;margin:80px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
@media (max-width:700px){ .manifiesto{padding:80px 22px;} }
.manifiesto-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:center;max-width:1180px;margin:0 auto;}
@media (max-width:900px){ .manifiesto-grid{grid-template-columns:1fr;} }
.manifiesto blockquote{font-size:clamp(1.5rem,3.1vw,2.3rem);font-weight:500;line-height:1.32;margin-top:24px;}
.manifiesto .cite{margin-top:32px;display:flex;gap:16px;align-items:center;font-size:13px;color:var(--ink-soft);}
.manifiesto .cite::before{content:'';width:34px;height:1px;background:var(--ink-soft);}
.manifiesto .illus-box{height:280px;}

/* proceso — con scroll pineado */
.proceso{padding:0 48px;}
.proceso-pin-outer{position:relative;height:380vh;}
.proceso-pin-inner{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:0 48px;}
@media (max-width:700px){ .proceso-pin-inner{padding:0 22px;} }
.proceso-head h2{font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:600;margin-top:14px;max-width:22ch;}
.step-stage{position:relative;height:250px;margin-top:56px;border-left:2px solid var(--line);padding-left:38px;}
.step-panel{position:absolute;inset:0 0 0 38px;opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.step-panel.active{opacity:1;transform:translateY(0);}
.step-panel .idx{font-size:1.4rem;color:var(--red);font-weight:600;}
.step-panel h3{font-size:2rem;font-weight:600;margin-top:8px;}
.step-panel p{color:var(--ink-dim);font-size:15px;max-width:52ch;margin-top:12px;line-height:1.7;}
.log-progress{position:absolute;left:-2px;top:0;width:2px;background:var(--red);transition:height .15s linear;}

/* marcas grid */
.marcas{padding:110px 48px;}
.marcas-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;}
.marcas-head h2{font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:600;margin-top:14px;}
.grid-cards{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);}
@media (max-width:900px){ .grid-cards{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .grid-cards{grid-template-columns:1fr;} }
.card{background:var(--bg);display:flex;flex-direction:column;transition:background .4s var(--ease);}
.card:hover{background:var(--surface);}
a.card,a.port-card{color:inherit;text-decoration:none;}
a.card:hover,a.port-card:hover{color:inherit;}
.card-art{height:190px;position:relative;overflow:hidden;}
.card-art .id{position:absolute;top:14px;left:16px;font-size:13px;color:rgba(255,255,255,0.8);}
.card-art .sig{position:absolute;bottom:12px;right:14px;font-size:11px;color:rgba(255,255,255,.65);}
.card-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1;}
.card-tags{display:flex;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--ink-dim);}
.card-tags span{border:1px solid var(--line);padding:3px 9px;border-radius:20px;}
.card h3{font-size:1.25rem;font-weight:600;margin-top:2px;}
.card p{font-size:13.5px;color:var(--ink-dim);flex:1;}
.metric{font-size:12px;color:var(--ink-dim);display:flex;justify-content:space-between;}
.metric b{color:var(--green);font-weight:600;display:inline-block;transition:opacity .25s var(--ease);}
.status{display:flex;align-items:center;gap:8px;font-size:11.5px;margin-top:auto;}
.status i{width:7px;height:7px;border-radius:50%;}
.status.activa i{background:var(--green);animation:blink 2s ease-in-out infinite;} .status.activa{color:var(--green);}
.status.validacion i{background:var(--amber);} .status.validacion{color:var(--amber);}
.status.archivo i{background:var(--ink-soft);} .status.archivo{color:var(--ink-soft);}
.marcas-cta{display:flex;justify-content:center;margin-top:48px;}
@media (max-width:700px){ .marcas-cta{justify-content:stretch;} .marcas-cta .talk-btn{width:100%;justify-content:center;} }

/* teaser cards (home -> otras páginas) */
.teasers{padding:110px 48px;border-top:1px solid var(--line);}
.teasers-head h2{font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:600;margin-top:14px;max-width:20ch;}
.teaser-grid{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);}
@media (max-width:900px){ .teaser-grid{grid-template-columns:1fr;} }
.teaser-card{background:var(--bg);padding:38px 32px;display:flex;flex-direction:column;gap:16px;transition:background .4s var(--ease);}
.teaser-card:hover{background:var(--surface);}
.teaser-card .t-illus{height:120px;}
.teaser-card h3{font-size:1.3rem;font-weight:600;}
.teaser-card p{font-size:13.5px;color:var(--ink-dim);flex:1;}
.teaser-card .go{font-size:12.5px;color:var(--red);display:flex;align-items:center;gap:8px;}

/* servicios */
.servicios{padding:110px 48px;border-top:1px solid var(--line);}
.serv-grid{margin-top:56px;display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);}
@media (max-width:760px){ .serv-grid{grid-template-columns:1fr;} }
.serv-cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:42px 38px;transition:background .4s var(--ease);}
.serv-cell:hover{background:var(--surface);}
.serv-cell .n{font-size:12px;color:var(--ink-soft);}
.serv-cell h3{font-size:1.4rem;font-weight:600;margin-top:12px;}
.serv-cell p{color:var(--ink-dim);font-size:14px;margin-top:10px;max-width:42ch;}
.serv-cell .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}
.serv-cell .tags span{border:1px solid var(--line);padding:3px 9px;border-radius:20px;font-size:11px;color:var(--ink-dim);}

/* proceso de servicio (pasos simples, sin pin) */
.serv-steps{margin-top:100px;}
.serv-steps-list{margin-top:44px;border-top:1px solid var(--line);}
.serv-step{display:grid;grid-template-columns:70px 1fr;gap:24px;padding:30px 0;border-bottom:1px solid var(--line);}
.serv-step .n{color:var(--red);font-weight:600;font-size:1.1rem;}
.serv-step h4{font-size:1.15rem;font-weight:600;}
.serv-step p{color:var(--ink-dim);font-size:14px;margin-top:6px;max-width:56ch;}

/* clientes */
.clientes{padding:110px 48px;}
.clientes-head h2{font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:600;margin-top:14px;}
.cl-list{margin-top:56px;border-top:1px solid var(--line);}
.cl-row{display:grid;grid-template-columns:60px 1fr 190px 120px;align-items:center;gap:22px;padding:28px 0;border-bottom:1px solid var(--line);}
@media (max-width:760px){ .cl-row{grid-template-columns:36px 1fr;} .cl-row .cl-cat,.cl-row .cl-year{display:none;} }
.cl-row .n{color:var(--ink-soft);font-size:14px;}
.cl-row h3{font-size:1.4rem;font-weight:600;transition:color .35s var(--ease), transform .35s var(--ease);}
.cl-row:hover h3{color:var(--red);transform:translateX(8px);}
.cl-cat{font-size:12.5px;color:var(--ink-dim);}
.cl-year{font-size:12.5px;color:var(--ink-soft);text-align:right;}

/* ============ PORTAFOLIO ============ */
.portafolio{padding:60px 48px 110px;}
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-top:44px;}
.filter-btn{
  border:1px solid var(--line-strong);border-radius:30px;padding:9px 18px;font-size:13px;color:var(--ink-dim);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.filter-btn:hover{color:var(--ink);}
.filter-btn.active{background:var(--red);border-color:var(--red);color:#fff;}
.port-grid{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);}
@media (max-width:900px){ .port-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .port-grid{grid-template-columns:1fr;} }
.port-card{background:var(--bg);display:none;flex-direction:column;opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease);}
.port-card.show{display:flex;}
.port-card.in{opacity:1;transform:translateY(0);}
.port-art{height:220px;position:relative;overflow:hidden;}
.bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.port-art-overlay{position:absolute;inset:0;opacity:var(--overlay-op,0.45);transition:opacity .45s var(--ease);pointer-events:none;}

/* Al pasar el cursor sobre la imagen (slider de marcas, grilla del
   ecosistema y portafolio), el degradé/overlay se desvanece suave
   para mostrar la imagen completa, y vuelve a aparecer al sacar el
   mouse gracias a la misma transición de .port-art-overlay de arriba. */
.slide-art:hover .port-art-overlay,
.card-art:hover .port-art-overlay,
.port-art:hover .port-art-overlay{opacity:0;}

.port-art .id{position:absolute;top:14px;left:16px;font-size:13px;color:rgba(255,255,255,0.8);}
.port-cat-tag{position:absolute;bottom:14px;left:16px;font-size:11px;color:#fff;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.35);padding:4px 10px;border-radius:20px;backdrop-filter:blur(4px);}
.port-body{padding:22px;}
.port-body h3{font-size:1.15rem;font-weight:600;}
.port-body p{font-size:13px;color:var(--ink-dim);margin-top:6px;}
.port-empty{display:none;padding:60px 0;text-align:center;color:var(--ink-dim);font-size:14px;}
.port-empty.show{display:block;}

/* ============ SOBRE NOSOTROS ============ */
.valores{padding:110px 48px;border-top:1px solid var(--line);}
.valores-grid{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);}
@media (max-width:760px){ .valores-grid{grid-template-columns:1fr;} }
.valor-cell{background:var(--bg);padding:36px 30px;}
.valor-cell .n{font-size:12px;color:var(--ink-soft);}
.valor-cell h3{font-size:1.2rem;font-weight:600;margin-top:12px;}
.valor-cell p{font-size:13.5px;color:var(--ink-dim);margin-top:10px;line-height:1.7;}

.timeline{padding:110px 48px;}
.timeline-list{margin-top:56px;border-top:1px solid var(--line);}
.timeline-row{display:grid;grid-template-columns:110px 1fr;gap:24px;padding:30px 0;border-bottom:1px solid var(--line);}
.timeline-row .yr{color:var(--red);font-weight:600;font-size:1.2rem;}
.timeline-row h4{font-size:1.15rem;font-weight:600;}
.timeline-row p{color:var(--ink-dim);font-size:14px;margin-top:6px;max-width:56ch;}

/* ============ CONTACTO ============ */
.contacto{margin-top:70px;padding:140px 48px 60px;background:var(--surface);border-top:1px solid var(--line);}
@media (max-width:700px){ .contacto{padding:100px 22px 40px;} }
.contacto h2{font-size:clamp(2.2rem,5.6vw,4.4rem);font-weight:600;max-width:15ch;line-height:1.05;}
.contacto p.sub{margin-top:18px;color:var(--ink-dim);font-size:15px;max-width:46ch;}

.whatsapp-btn{
  margin-top:34px;display:inline-flex;align-items:center;gap:14px;font-size:16px;
  padding:16px 26px;border-radius:40px;background:#25D366;color:#04140c;font-weight:600;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.whatsapp-btn:hover{background:#1fbd59;transform:translateY(-2px);}
.whatsapp-btn svg{width:22px;height:22px;fill:#04140c;}

.contact-grid{margin-top:80px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);}
@media (max-width:760px){ .contact-grid{grid-template-columns:1fr;} }
.contact-cell{background:var(--bg);padding:34px;}
.contact-cell h4{font-size:12px;color:var(--ink-soft);}
.contact-cell .val{font-size:1.15rem;font-weight:600;margin-top:10px;}
.contact-cell a.val{transition:color .25s var(--ease);}
.contact-cell a.val:hover{color:var(--red);}

.foot-grid{margin-top:100px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;padding-top:28px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-dim);}
.foot-grid .cols{display:flex;gap:70px;flex-wrap:wrap;}
.foot-grid a{display:block;margin-top:10px;color:var(--ink-dim);transition:color .25s var(--ease);}
.foot-grid a:hover{color:var(--ink);}
.foot-grid strong{color:var(--ink);font-size:12px;}

.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}

/* modal de video */
.video-modal{position:fixed;inset:0;z-index:9800;display:flex;align-items:center;justify-content:center;padding:5vh 5vw;opacity:0;pointer-events:none;transition:opacity .4s var(--ease);}
.video-modal.open{opacity:1;pointer-events:all;}
.video-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(6px);}
.video-modal-box{
  position:relative;width:min(980px,100%);
  transform:scale(.94) translateY(14px);opacity:0;
  transition:transform .5s var(--ease), opacity .5s var(--ease);
}
.video-modal.open .video-modal-box{transform:scale(1) translateY(0);opacity:1;}
.video-frame-wrap{position:relative;width:100%;padding-top:56.25%;border-radius:14px;overflow:hidden;border:1px solid var(--line-strong);background:#000;}
.video-frame-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-modal-label{
  position:absolute;top:-52px;left:0;font-size:13px;color:var(--ink-dim);
  display:flex;align-items:center;gap:10px;
}
.video-modal-label::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--red);animation:blink 1.6s ease-in-out infinite;}
.video-close{
  position:absolute;top:-52px;right:0;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;
  color:#fff;transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.video-close:hover{background:var(--red);border-color:var(--red);transform:rotate(90deg);}
@media (max-width:700px){ .video-close{top:-46px;width:36px;height:36px;} }