/* ============ R&A · Vaca Muerta Desk (se apoya en home.css y servicio.css) ============ */

/* ---------- 1. portada oscura: el trazo une Buenos Aires y Añelo ---------- */
.v-hero {
  position: relative; background: var(--ink); color: var(--white);
  min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(40px, 8vh, 88px);
  padding: calc(var(--nav-h) + clamp(28px, 6vh, 72px)) var(--gut) clamp(28px, 5vh, 56px);
  --flash: var(--orange);
}
.v-hero .crumbs ol { color: var(--gray-d); }
.v-hero .crumbs li + li::before { color: rgba(255,255,255,.3); }
.v-hero .crumbs [aria-current] { color: var(--white); }
.v-hero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(32px, 6vw, 112px); align-items: end; }
.v-hero .tag { margin-bottom: 22px; }
.v-hero__title { font-size: clamp(2.75rem, 6.4vw, 7.25rem); max-width: 6.72em; /* 12ch de Hanken */ color: var(--white); }
.v-hero .lead { color: var(--gray-d); margin-top: clamp(24px, 4vh, 40px); }
.v-hero__actions { justify-content: flex-start; margin-top: 32px; }
.v-hero__map { position: relative; z-index: 2; border-top: 1.5px solid var(--orange); padding-top: 20px; }
.v-hero__badge { font-size: clamp(1.25rem, 1.8vw, 1.75rem); line-height: 1.15; letter-spacing: -0.02em; font-weight: 650; margin: 8px 0 24px; max-width: 18em; }
.v-hero .desk__map { aspect-ratio: 16 / 10.4; }
.v-index { position: relative; z-index: 4; border-top: 1px solid var(--rule-d); padding-top: 18px; }
.v-index ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px clamp(18px, 2.4vw, 40px); }
.v-index a {
  text-decoration: none; color: var(--gray-d); font-size: 0.9375rem; font-weight: 550; font-variation-settings: "wght" 550;
  transition: color 200ms ease, font-variation-settings 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .v-index a:hover { color: var(--white); font-variation-settings: "wght" 740; } }

/* ---------- barra propia del Desk (fija debajo del menú del estudio) ---------- */
.v-subnav { position: sticky; top: 62px; z-index: 45; height: 0; }
.v-subnav__bar {
  position: absolute; left: 0; right: 0; top: 0; height: 50px;
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px); padding: 0 var(--gut);
  background: var(--ink); color: var(--white); box-shadow: 0 1px 0 var(--rule-d);
  opacity: 0; transform: translateY(-10px); pointer-events: none;
  transition: opacity 260ms ease, transform 420ms var(--ease-out);
}
.v-subnav.is-on .v-subnav__bar { opacity: 1; transform: none; pointer-events: auto; }
.v-subnav__brand { flex: none; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.9375rem; text-decoration: none; }
.v-subnav__brand::before { content: ""; width: 10px; height: 10px; background: var(--orange); }
.v-subnav ol { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; gap: clamp(14px, 1.8vw, 28px); overflow-x: auto; scrollbar-width: none; }
.v-subnav ol::-webkit-scrollbar { display: none; }
.v-subnav ol a {
  display: block; white-space: nowrap; padding: 15px 0 13px; text-decoration: none; color: var(--gray-d);
  font-size: 0.875rem; font-weight: 550; font-variation-settings: "wght" 550;
  background: linear-gradient(var(--orange), var(--orange)) 0 100% / 0 2px no-repeat;
  transition: color 200ms ease, font-variation-settings 260ms var(--ease-out), background-size 320ms var(--ease-out);
}
.v-subnav ol a[aria-current="true"] { color: var(--white); font-variation-settings: "wght" 740; background-size: 100% 2px; }
@media (hover: hover) and (pointer: fine) { .v-subnav ol a:hover { color: var(--white); } }
.v-subnav__cta {
  flex: none; padding: 8px 14px; background: var(--orange); color: var(--ink); font-size: 0.875rem; font-weight: 650; text-decoration: none;
  transition: background-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) { .v-subnav__cta:hover { background: var(--white); } }
/* las secciones quedan debajo de los dos menús al saltar */
.pg-vmd [id] { scroll-margin-top: 128px; }
/* sin JS la barra no aparece (queda el índice de la portada) */
html:not(.js) .v-subnav { display: none; }

/* ---------- 2. cifras ---------- */
.v-cifras { padding: 22vh 0 16vh; color: var(--ink); }
.v-cifras .wrap { position: relative; z-index: 2; }
.v-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-left: 0; margin: 0; }

/* títulos que en el sitio son párrafos: se ven como títulos, sin cambiar la estructura */
.v-title { font-size: clamp(2.375rem, 5.2vw, 5.25rem); line-height: 0.96; letter-spacing: -0.035em; font-weight: 700; font-variation-settings: "wght" 700; text-wrap: balance; }
.faq__head .v-title { font-size: clamp(2.375rem, 4.6vw, 4.75rem); }

/* ---------- 3. quiénes somos ---------- */
.v-about { position: relative; padding: 18vh 0 16vh; }
.v-about__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 6vw, 112px); align-items: center; }
.v-about h2 { font-size: clamp(2.375rem, 4.6vw, 4.75rem); line-height: 0.96; letter-spacing: -0.035em; margin: 18px 0 32px; max-width: 6.72em; /* 12ch de Hanken */ }
.v-about__text p { font-size: 1.125rem; line-height: 1.6; margin-bottom: 16px; max-width: 36em; text-wrap: pretty; }
.v-about__text strong { font-weight: 700; }
.v-about__media { margin: 0; }
.v-photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink); }
.v-photo img { width: 100%; height: 114%; object-fit: cover; transform: translate3d(0, var(--py, -6%), 0); }
/* (la foto de Añelo es provisoria hasta tener una propia; ya no lleva cartel visible) */
.v-about__media figcaption { margin-top: 14px; font-size: 0.875rem; font-weight: 650; color: var(--orange-ink); }

/* ---------- 5. casos: hoja oscura ---------- */
.v-casos { color: var(--white); padding: 26vh 0 20vh; --flash: var(--orange); }
.v-casos__inner { position: relative; z-index: 2; }
.v-casos .tag { color: var(--orange); }
.v-casos__lead { color: var(--gray-d); margin: 24px 0 clamp(48px, 8vh, 88px) calc(min(13%, 200px) + 20px); }
.v-casos__list { list-style: none; margin: 0; padding: 0 0 0 calc(min(13%, 200px) + 20px); }
.v-casos__list li { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 16px clamp(24px, 4vw, 72px); padding: clamp(28px, 5vh, 48px) 0; border-top: 1px solid var(--rule-d); }
.v-casos__list li:last-child { border-bottom: 1px solid var(--rule-d); }
.v-casos__list h3 { font-size: clamp(1.625rem, 2.6vw, 2.5rem); line-height: 1.04; letter-spacing: -0.028em; transition: color 260ms ease; }
.v-casos__list p { color: var(--gray-d); font-size: 1.0625rem; line-height: 1.6; }
@media (hover: hover) and (pointer: fine) { .v-casos__list li:hover h3 { color: var(--orange); } }
.js .v-casos { background: transparent; }

/* ---------- 6. perfiles: tarjetas que se apilan ---------- */
.v-perfiles { position: relative; padding: 18vh 0 12vh; }
.v-perfiles__head { margin-bottom: clamp(48px, 8vh, 88px); }
.v-perfiles__stack { list-style: none; margin: 0; padding: 0 0 0 calc(min(13%, 200px) + 20px); }
.v-perfil {
  position: sticky; top: calc(var(--nav-h) + 4vh);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px clamp(28px, 5vw, 88px); align-content: start;
  min-height: 62vh; margin-bottom: 10vh; padding: clamp(32px, 5vh, 56px) clamp(24px, 3.4vw, 56px);
  background: var(--white); box-shadow: 0 0 0 1px var(--rule), 0 -24px 48px -32px rgba(0,0,0,.28);
}
.v-perfil--2 { top: calc(var(--nav-h) + 4vh + 28px); border-top: 4px solid var(--orange); }
.v-perfil--3 { top: calc(var(--nav-h) + 4vh + 56px); background: var(--ink); color: var(--white); box-shadow: none; margin-bottom: 0; }
.v-perfil .tag { grid-column: 1 / -1; }
.v-perfil h3 { font-size: clamp(1.875rem, 3.4vw, 3.5rem); line-height: 1; letter-spacing: -0.035em; }
.v-perfil__desc { grid-column: 1; color: var(--gray); font-size: 1.125rem; line-height: 1.55; max-width: 30em; }
.v-perfil--3 .v-perfil__desc { color: var(--gray-d); }
.v-perfil ul { grid-column: 2; grid-row: 2 / span 2; list-style: none; margin: 0; padding: 0; }
.v-perfil li { position: relative; padding: 12px 0 12px 24px; border-top: 1px solid var(--rule); }
.v-perfil--3 li { border-top-color: var(--rule-d); }
.v-perfil li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 8px; height: 8px; background: var(--orange); }

/* ---------- 7. recursos ---------- */
.v-recursos { padding-bottom: 16vh; }
.v-recursos .head-row { margin-bottom: 0; }
.v-recursos__list { grid-template-columns: 1fr; }
.v-recursos__go { display: inline-block; margin: 28px 0 0 calc(min(13%, 200px) + 20px); }

/* ---------- 8. clientes ---------- */
.v-clientes { position: relative; padding: 12vh 0 16vh; }
.v-clientes .head-row { margin-bottom: clamp(48px, 8vh, 88px); }
.v-logos { list-style: none; margin: 0; padding: 0 0 0 calc(min(13%, 200px) + 20px); display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.v-logos li { aspect-ratio: 1; display: grid; place-items: center; padding: 4%; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.v-logos li:first-child { border-left: 1px solid var(--rule); }
.v-logos img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) contrast(1.35); mix-blend-mode: multiply; opacity: 0.9; transition: filter 300ms ease, opacity 300ms ease, transform 420ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .v-logos li:hover img { filter: none; opacity: 1; transform: scale(1.04); } }

/* ---------- 10. contacto ---------- */
.v-contacto { padding-bottom: 18vh; }
.v-contacto h2 { font-size: clamp(2.75rem, 6.4vw, 6.5rem) !important; }
.v-contacto__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 112px); margin: clamp(56px, 9vh, 104px) 0 0 calc(min(13%, 200px) + 20px); align-items: start; }
.v-contacto .lead { color: var(--gray-d); }
.v-oficinas { margin: 32px 0 0; display: grid; gap: 0; }
.v-oficinas div { padding: 16px 0; border-top: 1px solid var(--rule-d); }
.v-oficinas dt { color: var(--orange); font-size: 0.875rem; font-weight: 650; }
.v-oficinas dd { margin: 6px 0 0; color: var(--white); line-height: 1.5; }
.v-oficinas a { text-decoration: none; }
.v-form textarea {
  font: inherit; font-size: 1.0625rem; color: var(--white); background: transparent; border: 0; border-bottom: 1.5px solid var(--rule-d);
  padding: 10px 0; border-radius: 0; resize: vertical; transition: border-color 200ms ease;
}
.v-form textarea::placeholder { color: rgba(255,255,255,.32); }
.v-form textarea:focus { outline: none; border-bottom-color: var(--orange); }

@media (max-width: 960px) {
  .v-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .v-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-left: 0; }
  .v-logos li:nth-child(4) { border-left: 1px solid var(--rule); }
}
@media (max-width: 820px) {
  .v-subnav__brand, .v-subnav__cta { display: none; }
  .v-subnav ol { margin-left: 0; }
  .v-hero__grid, .v-about__grid, .v-contacto__grid { grid-template-columns: 1fr; }
  .v-contacto__grid { margin-left: 0; }
  .v-casos__lead, .v-casos__list, .v-perfiles__stack, .v-recursos__go { margin-left: 0; padding-left: 0; }
  .v-casos__list li, .v-perfil { grid-template-columns: 1fr; }
  .v-perfil ul { grid-column: 1; grid-row: auto; }
  .v-perfil { min-height: 0; margin-bottom: 6vh; }
}
html[lang="en"] .v-photo::after { content: "Provisional photo"; }
.vista-alta .v-hero { min-height: 900px; }   /* render de Google: ver home.css */