/* ==========================================================================
   Vermú Rojo — estilo común de las páginas interiores (todas menos la home)
   Se carga DESPUÉS de styles.css y sobrescribe lo necesario para que header,
   menú móvil, footer, tipografía, colores y márgenes sean los de la home.
   Las páginas de caso heredan header/menú/footer/tokens; su contenido
   (case-*, etc.) no se rediseña aquí.
   ========================================================================== */

:root,
html[data-theme="light"],
html[data-theme="dark"]{
  --bg:#FFFFFF;
  --fg:#212121;
  --muted:#626262;
  --accent:#F03737;
  --line:rgba(0,0,0,.14);
  --ink:#212121;
  --black:#141414;
  --grey-1:#F7F7F7;
  --grey-2:#EAEAEA;
  --rule:rgba(0,0,0,.14);
  --cols:rgba(0,0,0,.08);
  --display:'Space Grotesk','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --body:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
}
:root{--pad:64px;}
@media (min-width:1440px){:root{--pad:calc((100vw - 1312px)/2);}}
@media (max-width:1100px){:root{--pad:40px;}}
@media (max-width:560px){:root{--pad:20px;}}

html{scroll-behavior:smooth;}
html[data-theme] body{cursor:auto;}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--body);font-weight:400;font-size:18px;line-height:1.5;
  -webkit-font-smoothing:antialiased;cursor:auto;
}
::selection{background:var(--accent);color:#141414;}
a{color:inherit;}
h1,h2,h3,h4{text-wrap:balance;}
p,li{text-wrap:pretty;}

/* efectos de la versión anterior que ya no existen en la home */
#cursor,#dot-grid-base,#dot-grid-highlight,#mouse-glow,#scroll-progress,#preloader{display:none !important;}
.header-orb{opacity:1 !important;}

/* marco fino a los lados del contenido, separado 16px (como la home) */
body::before{
  content:"";position:fixed;top:0;bottom:0;left:calc(var(--pad) - 16px);right:calc(var(--pad) - 16px);
  pointer-events:none;z-index:-1;
  background:linear-gradient(var(--cols),var(--cols)) left top/1px 100% no-repeat,
             linear-gradient(var(--cols),var(--cols)) right top/1px 100% no-repeat;
}

/* ---------- botones (mismos que la home) ---------- */
.btn,
.links-row a{
  display:inline-block;background:var(--accent);color:var(--black);text-decoration:none;
  font-family:var(--mono);font-weight:500;font-size:15px;letter-spacing:.03em;text-transform:uppercase;
  padding:14px 24px;border:0;border-radius:0;cursor:pointer;line-height:1.4;max-width:100%;overflow-wrap:anywhere;
  transition:background .25s,color .25s,transform .25s;
}
.btn:hover,
.links-row a:hover{background:var(--black);color:var(--white,#fff);transform:none;border-color:transparent;}
.links-row a{background:transparent;color:var(--black);box-shadow:inset 0 0 0 1px var(--black);}
.links-row{gap:12px;margin-top:32px;}

/* ---------- header ---------- */
header{
  display:block;padding:0 var(--pad);gap:0;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
header .header-row{min-height:92px;padding:0;gap:24px;}
header .logo,
header nav a,
header .lang-switch span,
header .lang-btn{color:var(--black);}
.logo-group{gap:0;}
header .logo{
  display:inline-flex;align-items:center;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:600;font-size:17px;letter-spacing:.05em;text-transform:uppercase;
}
.header-orb{margin-left:12px;}
header nav{gap:34px;margin-left:auto;margin-right:auto;}
header nav a{font-family:var(--body);font-size:17px;letter-spacing:0;}
header nav a::after{height:1.5px;background:var(--accent);bottom:-4px;}
.header-controls{gap:22px;}
.availability-badge,
.icon-btn{display:none !important;}
.lang-switch{font-family:var(--mono);font-size:13px;letter-spacing:.06em;gap:8px;}
.lang-btn{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--muted);padding:2px;}
.lang-btn.active{color:var(--ink);font-weight:500;}
header .btn{padding:12px 22px;font-size:14px;}

/* botón del menú móvil: caja con borde y dos barras, como la home */
.menu-toggle{
  display:none;position:relative;width:44px;height:44px;flex:0 0 auto;
  background:none;border:1px solid var(--ink);padding:0;cursor:pointer;
}
.menu-toggle-bar{left:12px;width:auto;right:12px;height:1.5px;background:var(--ink);
  transition:top .3s cubic-bezier(.65,0,.35,1),transform .6s cubic-bezier(.65,0,.35,1);}
.menu-toggle-bar:nth-child(1){top:16px;}
.menu-toggle-bar:nth-child(2){top:25px;}
.menu-toggle.open .menu-toggle-bar{top:20.5px;}

/* menú móvil: pantalla blanca, enlaces grandes con número mono */
.mobile-menu{
  background:var(--bg);padding:0 var(--pad);justify-content:center;gap:34px;
  clip-path:none !important;
}
.mobile-menu.open{animation:mnavIn .3s ease both;}
@keyframes mnavIn{from{opacity:0;}to{opacity:1;}}
.mobile-menu-nav{display:grid;gap:6px;}
.mobile-menu-nav a{
  border:0 !important;padding:0;gap:18px;align-items:baseline;
  font-family:var(--display);line-height:1.15;color:var(--ink);
}
.mobile-menu-nav a:active{color:var(--accent);}
.mobile-menu-num{font-family:var(--mono);font-size:13px;color:var(--accent);letter-spacing:0;}
.mobile-menu-label{font-family:var(--display);font-weight:400;font-size:clamp(38px,11vw,64px);letter-spacing:0;}
.mobile-menu-footer{
  left:var(--pad);bottom:32px;font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--muted);
}

/* ---------- etiqueta con corchetes (eyebrow) ---------- */
.eyebrow{
  display:inline-block;position:relative;padding:10px 18px;margin-bottom:36px;
  font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--black);
}
.eyebrow::before,
.eyebrow::after{content:"";position:absolute;top:0;bottom:0;width:9px;height:auto;border:1.5px solid var(--accent);background:none;}
.eyebrow::before{left:0;border-right:0;}
.eyebrow::after{right:0;border-left:0;}
.article-section .eyebrow{margin-bottom:24px;}

/* ---------- cabecera de página ---------- */
section{min-height:0;padding-left:var(--pad);padding-right:var(--pad);}
.page-hero{padding:190px var(--pad) 72px;}
.page-hero .page-title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(40px,5.6vw,80px);line-height:1.08;letter-spacing:-.015em;
  max-width:980px;margin-bottom:28px;
}
.page-hero .page-intro{
  font-family:var(--body);font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--ink);max-width:700px;
}
.back-nav{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.back-nav:hover{color:var(--accent);}
.page-meta .meta-item{font-family:var(--body);}
.page-meta .meta-item b{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase;}

.page-cover{margin:0 var(--pad) 100px;border-radius:0;background:var(--grey-2);}
.page-cover::after{display:none;}
.page-cover:hover img{transform:scale(1.03);}

/* ---------- bloques de texto ---------- */
.article-section{max-width:none;margin:0;padding:0 var(--pad) 100px;}
.article-section > *{max-width:820px;}
.article-section h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(28px,3.4vw,44px);line-height:1.15;letter-spacing:-.01em;margin-bottom:24px;
}
.article-section h2::before{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.06em;color:var(--accent);margin-bottom:16px;}
.article-section p{font-family:var(--body);font-size:18px;line-height:1.65;color:var(--ink);max-width:760px;}
.profile-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;}
.profile-list li{
  padding:5px 10px;font-family:var(--mono);font-size:12px;line-height:1.5;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink);border:1px solid rgba(0,0,0,.28);
}
.profile-list li::before{display:none;}

/* nosotros */
.nosotros-story-title{font-family:var(--display);font-weight:400;font-size:clamp(36px,5.4vw,76px);line-height:1.08;letter-spacing:-.015em;}
.nosotros-story-body p{font-size:clamp(18px,1.5vw,21px);color:var(--ink);}
.nosotros-story-body em{font-style:normal;color:var(--accent);}
.nosotros-story-tag{font-family:var(--mono);font-weight:500;letter-spacing:.06em;}
.nosotros-story-close{font-family:var(--display);font-weight:400;}
.team-card img{border-radius:0;background:var(--grey-2);}
.team-card-label{font-family:var(--display);font-weight:400;font-size:22px;border-top-color:var(--rule);}
.team-card-summary{font-family:var(--body);font-size:16px;color:var(--ink);}

/* índice de casos */
.case-grid{padding:0 var(--pad) 100px;gap:48px 32px;}
.case-grid .work-card{width:calc(50% - 16px);}
.work-card .frame{border-radius:0;border:0;background:var(--grey-2);}
.work-card .frame::after{display:none;}
.work-card .idx{font-family:var(--mono);font-size:13px;color:var(--accent);margin-bottom:8px;}
.work-card h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.6vw,36px);line-height:1.15;margin-bottom:10px;}
.work-card p{font-family:var(--body);font-size:16px;color:var(--ink);}
.live-badge{border-radius:0;background:var(--grey-2);color:var(--ink);font-family:var(--mono);font-weight:500;letter-spacing:.06em;}
@media(max-width:820px){.case-grid .work-card{width:100%;}}

/* contacto: bloque rojo a sangre, como el CTA de la home */
#contact{
  background:var(--accent);color:var(--black);min-height:0;
  padding:clamp(70px,10vw,140px) var(--pad);
}
#contact .eyebrow{color:var(--black);}
#contact .eyebrow::before,
#contact .eyebrow::after{border-color:var(--black);}
.contact-link{
  font-family:var(--display);font-weight:400;color:var(--black);
  font-size:clamp(20px,5.8vw,96px);line-height:1.1;letter-spacing:-.015em;
  border-bottom:0;
}
.contact-link:hover{color:var(--white,#fff);border-color:transparent;}

/* ---------- footer (igual que el de la home) ---------- */
footer{
  display:block;background:var(--black);color:#CFCFCF;border-top:0;
  padding:64px var(--pad) 36px;font-size:18px;
}
footer .fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,.2);}
footer .logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:#fff;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:600;font-size:17px;letter-spacing:.05em;text-transform:uppercase;}
footer .orb{position:relative;display:block;width:14px;height:20px;border-radius:50%;background:var(--accent);flex:none;
  animation:orbMove 1.8s ease-in-out infinite alternate,orbScale 2.4s ease-in-out .3s infinite alternate;}
footer .orb::after{content:"";position:absolute;top:-4px;left:50%;width:1.5px;height:9px;background:#fff;transform:translateX(-50%) rotate(18deg);transform-origin:bottom center;}
@keyframes orbMove{to{translate:0 6px;rotate:90deg;}}
@keyframes orbScale{to{scale:1.15;}}
footer h4{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;}
footer ul{list-style:none;display:grid;gap:10px;font-size:15.5px;}
footer a{text-decoration:none;color:inherit;}
footer a:hover{color:var(--accent);}
footer .fbot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#8d8d8d;}
@media (prefers-reduced-motion:reduce){footer .orb{animation:none;}}

/* ---------- tablet / móvil ---------- */
@media (max-width:900px){
  footer .fcols{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  header{padding:0 var(--pad);}
  header .header-row{min-height:84px;gap:12px;}
  header nav{display:none;}
  .lang-switch{display:none;}
  .menu-toggle{display:block;}
  .header-controls{gap:10px;}
  header .btn{padding:12px 16px;font-size:13px;}
  section{padding-left:var(--pad);padding-right:var(--pad);}
  .page-hero{padding:150px var(--pad) 56px;}
  .page-cover{margin:0 var(--pad) 64px;}
  .article-section{padding:0 var(--pad) 64px;}
  .article-section p{font-size:17px;}
  footer .fcols{grid-template-columns:1fr;}
}

/* ---------- puntero propio: punto rojo + anillo con inercia ---------- */
html.has-cursor,html.has-cursor *{cursor:none !important;}
.vr-cur-dot,.vr-cur-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:99999;opacity:0;transition:opacity .25s ease;will-change:transform;}
html.cur-on .vr-cur-dot,html.cur-on .vr-cur-ring{opacity:1;}
.vr-cur-dot{width:8px;height:8px;margin:-4px 0 0 -4px;}
.vr-cur-dot i{display:block;width:100%;height:100%;border-radius:50%;background:#F03737;box-shadow:0 0 0 1.5px rgba(255,255,255,.95);transition:transform .25s cubic-bezier(.2,.7,.2,1);}
.vr-cur-ring{width:40px;height:40px;margin:-20px 0 0 -20px;}
.vr-cur-ring i{display:block;width:100%;height:100%;border-radius:50%;border:1.5px solid #141414;box-shadow:0 0 0 1px rgba(255,255,255,.75),inset 0 0 0 1px rgba(255,255,255,.35);
  background:rgba(240,55,55,0);transition:transform .35s cubic-bezier(.2,.7,.2,1),background .3s ease,border-color .3s ease;}
.vr-cur-ring.hot i{transform:scale(1.65);background:rgba(240,55,55,.16);border-color:#F03737;}
.vr-cur-dot.hot i{transform:scale(.4);}
.vr-cur-ring.down i{transform:scale(.7);}
.vr-cur-ring.hot.down i{transform:scale(1.3);}
@media (hover:none),(pointer:coarse){.vr-cur-dot,.vr-cur-ring{display:none;}}