/* ═══════════════════════════════════════════════════════════════════
   Verticales · sobre base.css + pymes.css. Sin tokens nuevos.
   Dos tipos que se ven distintos:
   · .v-sector    — «yo soy…»: habla del cliente. Oro, titular grande
                    con el nombre del sector como marca de agua.
   · .v-necesidad — «yo necesito…»: habla del problema. El titular va
                    dentro de un marco, con etiqueta monoespaciada.
   ═══════════════════════════════════════════════════════════════════ */

.v-kind {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-size: 0.58rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 1.4rem;
}
.v-kind b { color: var(--gold); font-weight: 500; }

/* ── Hero por sector ─────────────────────────────────────────────── */
.v-sector .p-hero { overflow: hidden; }
.v-watermark {
  position: absolute; right: -2rem; bottom: 2rem; z-index: -1; pointer-events: none;
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: clamp(7rem, 20vw, 17rem); line-height: 1; color: rgba(184,151,90,0.05);
  white-space: nowrap;
}

/* ── Hero por necesidad ──────────────────────────────────────────── */
.v-necesidad .p-hero { justify-content: center; }
.v-problem {
  position: relative; max-width: 980px;
  border: 1px solid var(--border); border-left: 2px solid var(--gold);
  padding: 3rem 3.2rem 3.2rem; background: linear-gradient(135deg, rgba(58,82,68,0.10), transparent 60%);
}
.v-problem-label {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--gold);
  margin-bottom: 1.4rem; display: block;
}
.v-necesidad .p-title { max-width: 18ch; margin-bottom: 1.8rem; }

/* ── Listas numeradas en rejilla (síntomas, frentes, áreas) ──────── */
.v-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border); border: 1px solid var(--border);
}
.v-grid.two { grid-template-columns: repeat(2, 1fr); }
.v-cell { background: var(--black); padding: 2rem 1.8rem 2.2rem; position: relative; }
.p-dark .v-cell { background: var(--dark); }
.v-cell-num { display: block; font-family: var(--font-serif); font-size: 1.9rem; color: var(--gold); line-height: 1; margin-bottom: 1.1rem; }
.v-cell h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.35rem; line-height: 1.25; margin-bottom: 0.7rem; }
.v-cell p { font-size: 0.85rem; line-height: 1.75; color: var(--muted-soft); }
.v-cell .v-meta { margin-top: 1rem; font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.v-cell.is-cross { grid-column: 1 / -1; border-top: 1px solid var(--gold-dim); background: rgba(184,151,90,0.04); }
.v-cell.is-cross .v-cell-num { font-size: 0.6rem; font-family: var(--font-sans); letter-spacing: 0.24em; text-transform: uppercase; }

/* ── Principios (i, ii, iii…) ───────────────────────────────────── */
.v-principles { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--border); }
.v-principles li { padding: 1.8rem 1.4rem 1.6rem 0; border-right: 1px solid var(--border); margin-right: 1.4rem; }
.v-principles li:last-child { border-right: 0; margin-right: 0; }
.v-principles .roman { font-family: var(--font-serif); font-style: italic; color: var(--gold); font-size: 1.4rem; display: block; margin-bottom: 0.8rem; }
.v-principles h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.2rem; margin-bottom: 0.4rem; }
.v-principles p { font-size: 0.8rem; line-height: 1.65; color: var(--muted-soft); }

/* ── Dos columnas: calibración, sí / no ─────────────────────────── */
.v-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.v-duo > div { background: var(--black); padding: 2.4rem 2.2rem; }
.p-dark .v-duo > div { background: var(--dark); }
.v-duo h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.7rem; margin-bottom: 0.4rem; }
.v-duo .v-tagline { font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.2rem; display: block; }
.v-duo p, .v-duo li { font-size: 0.88rem; line-height: 1.75; color: var(--muted-soft); }
.v-list { list-style: none; display: grid; gap: 0.7rem; margin-top: 0.4rem; }
.v-list li { position: relative; padding-left: 1.3rem; }
.v-list li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 0.6rem; height: 1px; background: var(--gold); }
.v-no li::before { background: var(--muted); }
.v-no h3 { color: var(--muted-soft); }

/* ── Cita / tesis ───────────────────────────────────────────────── */
.v-quote {
  font-family: var(--font-serif); font-weight: 300; font-style: italic;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.3; max-width: 30ch; color: var(--white);
  padding-left: 1.6rem; border-left: 1px solid var(--gold);
}
.v-quote-src { margin-top: 1.2rem; padding-left: 1.6rem; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

/* ── Persona (credenciales) ─────────────────────────────────────── */
.v-person { display: grid; grid-template-columns: 0.9fr 1.4fr; gap: 4rem; align-items: start; }
.v-person-name { font-family: var(--font-serif); font-weight: 300; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; margin-bottom: 0.7rem; }
.v-person-role { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); line-height: 1.8; }
.v-creds { list-style: none; margin-top: 2rem; border-top: 1px solid var(--border); }
.v-creds li { padding: 0.9rem 0; border-bottom: 1px solid var(--border); font-size: 0.82rem; line-height: 1.55; color: var(--muted-soft); }
.v-creds li strong { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 1.15rem; color: var(--white); margin-bottom: 0.15rem; }
.v-bio p { font-size: 0.93rem; line-height: 1.85; color: var(--muted-soft); margin-bottom: 1.1rem; }
.v-bio p strong { color: var(--white); font-weight: 500; }

/* ── Bloque destacado (café) ────────────────────────────────────── */
.v-feature { position: relative; border: 1px solid var(--gold-dim); padding: 4rem 3.5rem; background: radial-gradient(ellipse at top right, rgba(184,151,90,0.08), transparent 55%), var(--black); }
.v-feature-mark { position: absolute; top: -0.9rem; left: 3.5rem; background: var(--black); padding: 0 0.9rem; font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }

/* ── Hoja de ruta ───────────────────────────────────────────────── */
.v-road { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.v-road li { background: var(--black); padding: 2rem 1.6rem; }
.v-road .when { font-size: 0.56rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.v-road h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.6rem; margin: 0.6rem 0 0.2rem; }
.v-road .dur { font-size: 0.7rem; color: var(--muted); margin-bottom: 1rem; display: block; }
.v-road p { font-size: 0.84rem; line-height: 1.7; color: var(--muted-soft); }

/* ── Tabla simple ───────────────────────────────────────────────── */
.v-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border); font-size: 0.88rem; }
.v-table th { text-align: left; font-weight: 500; font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); padding: 1rem 1.3rem; border-bottom: 1px solid var(--border); }
.v-table td { padding: 1.05rem 1.3rem; border-bottom: 1px solid var(--border); color: var(--muted-soft); vertical-align: top; line-height: 1.55; }
.v-table td:first-child { color: var(--white); }
.v-table .v-target { font-family: var(--font-serif); font-size: 1.2rem; color: var(--gold); }

/* ── Demos (plataformas) ────────────────────────────────────────── */
.v-demos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.v-demo { background: var(--black); padding: 2.4rem 2.2rem 2.2rem; display: flex; flex-direction: column; }
.v-demo .v-tagline { font-family: var(--font-mono); font-size: 0.64rem; color: var(--gold); margin-bottom: 1rem; }
.v-demo h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.7rem; line-height: 1.2; margin-bottom: 0.7rem; }
.v-demo p { font-size: 0.88rem; line-height: 1.75; color: var(--muted-soft); flex: 1; }
.v-demo .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.3rem 0 1.6rem; }
.v-demo .chips span { font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-soft); border: 1px solid var(--border); padding: 0.3rem 0.6rem; }
.v-demo .btn { align-self: flex-start; }
.v-demo .btn::after { content: ' ↗'; }

/* ── Formulario de acceso ───────────────────────────────────────── */
.v-access { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: start; }
.v-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.v-form .full { grid-column: 1 / -1; }
.v-field { display: grid; gap: 0.4rem; }
.v-field span { font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.v-field input, .v-field select, .v-field textarea {
  background: var(--surface); border: 1px solid var(--border); color: var(--white);
  font: inherit; font-size: 0.93rem; padding: 0.8rem 0.9rem; border-radius: 0; transition: border-color 0.2s;
}
.v-field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.2rem; }
.v-field input:focus, .v-field select:focus, .v-field textarea:focus { outline: none; border-color: var(--gold); }
.v-form .btn { justify-self: start; }
.v-form .btn:disabled { opacity: 0.5; cursor: default; }
.v-note { font-size: 0.74rem; color: var(--muted); line-height: 1.6; }
.v-status { font-size: 0.88rem; color: var(--gold-lt); min-height: 1.2em; }
.v-honeypot { position: absolute; left: -9999px; }

/* ── Aviso de contenido pendiente (visible a propósito) ─────────── */
.todo {
  border: 1px dashed #c97a5e; color: #e0a58e; background: rgba(124,56,36,0.12);
  padding: 1.2rem 1.4rem; font-size: 0.85rem; line-height: 1.65; margin: 1.5rem 0;
}
.todo strong { color: #f0b9a3; letter-spacing: 0.12em; font-size: 0.66rem; text-transform: uppercase; display: block; margin-bottom: 0.3rem; }

/* ── Volver a /pymes ────────────────────────────────────────────── */
.v-back { padding: 2.4rem 4rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--muted); }
.v-back a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-dim); }
.v-back a:hover { border-bottom-color: var(--gold); }

@media (max-width: 1100px) {
  .v-principles { grid-template-columns: repeat(2, 1fr); }
  .v-principles li { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--border); }
  .v-road { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .v-grid, .v-grid.two, .v-duo, .v-demos { grid-template-columns: 1fr; }
  .v-person, .v-access { grid-template-columns: 1fr; gap: 2rem; }
  .v-problem { padding: 2rem 1.4rem 2.2rem; }
  .v-feature { padding: 3rem 1.4rem 2rem; }
  .v-feature-mark { left: 1.4rem; }
  .v-form { grid-template-columns: 1fr; }
  .v-back { padding: 2rem 1.5rem; }
  .v-table { font-size: 0.8rem; }
  .v-table th, .v-table td { padding: 0.8rem 0.7rem; }
}
@media (max-width: 560px) {
  .v-principles, .v-road { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════
   COMPONENTE DE CASO · reutilizable para todos los casos
   <article class="case"> con seis partes fijas:
   cliente · problema · intervención · instalado · resultado · testimonio
   ═══════════════════════════════════════════════════════════════════ */
.case { border: 1px solid var(--border); background: var(--black); margin-bottom: 3rem; scroll-margin-top: 6rem; }
.case-head { padding: 2.8rem 3rem 2.4rem; border-bottom: 1px solid var(--border); background: linear-gradient(to right, rgba(184,151,90,0.05), transparent 70%); }
.case-kicker { font-size: 0.58rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); }
.case-client { font-family: var(--font-serif); font-weight: 300; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; margin: 0.8rem 0 0.4rem; }
.case-meta { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.2rem; }
.case-context { max-width: 720px; font-size: 0.95rem; line-height: 1.8; color: var(--muted-soft); }
.case-body { display: grid; grid-template-columns: 13rem 1fr; }
.case-part { display: contents; }
.case-part > h3 { padding: 2rem 1.5rem 2rem 3rem; border-bottom: 1px solid var(--border); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); line-height: 1.6; }
.case-part > div { padding: 1.8rem 3rem 2rem 1.5rem; border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); }
.case-part p { font-size: 0.93rem; line-height: 1.85; color: var(--muted-soft); margin-bottom: 0.9rem; max-width: 760px; }
.case-part p:last-child { margin-bottom: 0; }
.case-part ol, .case-part ul { list-style: none; display: grid; gap: 0.9rem; max-width: 760px; }
.case-part ol { counter-reset: c; }
.case-part ol li { counter-increment: c; display: grid; grid-template-columns: 2rem 1fr; font-size: 0.9rem; line-height: 1.75; color: var(--muted-soft); }
.case-part ol li::before { content: counter(c); font-family: var(--font-serif); font-size: 1.3rem; color: var(--gold); line-height: 1.3; }
.case-part ul li { position: relative; padding-left: 1.3rem; font-size: 0.9rem; line-height: 1.75; color: var(--muted-soft); }
.case-part ul li::before { content: ''; position: absolute; left: 0; top: 0.8em; width: 0.6rem; height: 1px; background: var(--gold); }
.case-part li strong { color: var(--white); font-weight: 500; }
.case-result-line { font-family: var(--font-serif); font-weight: 300; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.2; color: var(--gold-lt); margin-bottom: 1.2rem !important; max-width: 24ch !important; }
.case-quote { margin: 0; }
.case-quote p { font-family: var(--font-serif); font-style: italic; font-size: 1.3rem; line-height: 1.6; color: var(--white); }
.case-quote footer { all: unset; display: block; margin-top: 1.2rem; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.case-quote footer strong { color: var(--gold); font-weight: 500; }
.case-quote .case-translation { font-family: var(--font-sans); font-style: normal; font-size: 0.82rem; color: var(--muted); margin-top: 1rem; }
.case-part:last-child > h3, .case-part:last-child > div { border-bottom: 0; }

@media (max-width: 900px) {
  .case-head { padding: 2rem 1.4rem; }
  .case-body { grid-template-columns: 1fr; }
  .case-part > h3 { padding: 1.6rem 1.4rem 0; border-bottom: 0; }
  .case-part > div { padding: 0.8rem 1.4rem 1.8rem; border-left: 0; }
}

/* ── Responsable de práctica (inyectado en /consultoria) ─────────── */
.v-practice { padding: 6rem 4rem; border-top: 1px solid var(--border); background: var(--black); font-family: var(--font-sans); }
.v-practice .todo { margin-top: 2.5rem; }
@media (max-width: 900px) { .v-practice { padding: 4.5rem 1.5rem; } }

/* ── Equipo (/consultoria/equipo): foto 4:5 + perfil ── */
.team-person { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 4.5rem; align-items: start; max-width: 1180px; }
.team-photo { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.8) contrast(1.03); }
.team-photo::after { content: ''; position: absolute; inset: 0.9rem; border: 1px solid rgba(184,151,90,0.45); pointer-events: none; }
.team-name { font-family: var(--font-serif); font-weight: 300; font-size: clamp(2.1rem, 3.8vw, 3.2rem); line-height: 1.08; margin: 0.4rem 0 0.7rem; }
.team-role { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); line-height: 1.8; margin-bottom: 2rem; }
.team-facts { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); margin: 1rem 0 2.4rem; }
.team-facts li { background: var(--black); padding: 1.2rem 1.2rem 1.3rem; font-size: 0.8rem; line-height: 1.55; color: var(--muted-soft); }
.p-dark .team-facts li { background: var(--dark); }
.team-facts li strong { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 1.1rem; color: var(--white); margin-bottom: 0.25rem; }
@media (max-width: 900px) {
  .team-person { grid-template-columns: 1fr; gap: 2.2rem; }
  .team-photo { max-width: 420px; }
  .team-facts { grid-template-columns: 1fr; }
}