/* ============================================================
   Vinea Digital Services — hoja de estilos principal
   Sigue la Propuesta de Identidad Visual del cliente (ago 2026):
   azul corporativo #1a5490, tipografia Inter, radios 6/8/12px.
   Proporciones de color: 75% blanco · 18% azul · 5% grises · 2% azul claro.
   ============================================================ */

:root{
  /* --- color de marca --- */
  --brand:#1a5490;        /* azul principal: logo, botones, enfasis */
  --brand-light:#3B82F6;  /* azul claro: links, acentos            */
  --brand-dark:#0D47A1;   /* azul oscuro: hover, presionado        */
  --brand-hover:#154080;  /* hover del boton primario              */
  --brand-soft:#EBF2FC;   /* azul suave: fondos destacados         */

  /* --- neutros --- */
  --paper:#FFFFFF;        /* fondo principal        */
  --surface:#F9FAFB;      /* cards, contenedores    */
  --rule:#E5E7EB;         /* lineas y bordes        */
  --muted:#6B7280;        /* texto secundario       */
  --ink:#1F2937;          /* texto principal        */

  /* --- tipografia --- */
  --sans:'Inter','Segoe UI','Helvetica Neue',-apple-system,system-ui,Arial,sans-serif;

  /* --- espaciado (escala del manual) --- */
  --xs:8px; --sm:12px; --md:16px; --lg:24px; --xl:40px;
  --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s6:5rem;

  /* --- radios --- */
  --r-control:6px;   /* botones, inputs        */
  --r-card:8px;      /* cards, contenedores    */
  --r-panel:12px;    /* paneles grandes        */

  /* --- maqueta --- */
  --pad:clamp(1.1rem,4vw,4.5rem);
  --maxw:100%;
}

@media (prefers-color-scheme:dark){
  :root{
    --brand:#5B9BE8; --brand-light:#7FB2F5; --brand-dark:#A8CBFF; --brand-hover:#7FB2F5;
    --brand-soft:#122436;
    --paper:#0F172A; --surface:#16233B; --rule:#27364F; --muted:#9AA9C0; --ink:#E8EEF7;
  }
}
:root[data-theme="dark"]{
  --brand:#5B9BE8; --brand-light:#7FB2F5; --brand-dark:#A8CBFF; --brand-hover:#7FB2F5;
  --brand-soft:#122436;
  --paper:#0F172A; --surface:#16233B; --rule:#27364F; --muted:#9AA9C0; --ink:#E8EEF7;
}
:root[data-theme="light"]{
  --brand:#1a5490; --brand-light:#3B82F6; --brand-dark:#0D47A1; --brand-hover:#154080;
  --brand-soft:#EBF2FC;
  --paper:#FFFFFF; --surface:#F9FAFB; --rule:#E5E7EB; --muted:#6B7280; --ink:#1F2937;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; height:auto}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--brand-light); outline-offset:3px}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:1rem; z-index:99; background:var(--brand); color:#fff; padding:.6rem 1rem; border-radius:var(--r-control)}

/* ---------- jerarquia tipografica (segun el manual) ---------- */
h1{
  font-size:clamp(32px,5vw,48px); font-weight:700; line-height:1.1;
  letter-spacing:-0.5px; margin:0 0 var(--xs); text-wrap:balance;
}
h2{
  font-size:clamp(24px,3vw,28px); font-weight:700; line-height:1.25;
  letter-spacing:-0.3px; margin:0; text-wrap:balance;
}
h3{font-size:clamp(18px,2vw,20px); font-weight:600; letter-spacing:0; margin:0}
.small{font-size:13px; line-height:1.5}
.caption,.label,.kind,.k,.flag,.sub,.go{
  font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.5px;
}

/* ---------- la "vid": barra de progreso vertical ---------- */
.spine{
  position:fixed; left:calc(var(--pad) - .9rem);
  top:0; bottom:0; width:1px; background:var(--rule); z-index:2; pointer-events:none;
}
.spine::after{
  content:""; position:absolute; top:0; left:-1px; width:3px;
  background:var(--brand); height:var(--grow,0%); transition:height .12s linear;
}
@media (max-width:900px){ .spine{display:none} }

/* ---------- cabecera ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--rule);
}
/* padding ajustado: con el logotipo a 68px la barra ya tiene altura de sobra */
.bar{display:flex; align-items:center; justify-content:space-between; gap:var(--lg); padding-block:10px}
/* El logotipo ya lleva el nombre dentro: se usa la imagen tal cual.
   Altura fija y ancho automático para respetar su proporción 356x166. */
.logo{display:flex; align-items:center; text-decoration:none}
.logo img{height:68px; width:auto; display:block}
@media (max-width:760px){ .logo img{height:56px} }
@media (max-width:520px){ .logo img{height:46px} }
.site-nav{display:flex; gap:var(--lg); align-items:center}
.site-nav a{font-size:14px; font-weight:500; text-decoration:none; color:var(--ink); transition:color .2s}
.site-nav a:hover{color:var(--brand)}

/* selector de idioma */
.site-nav .lang{
  font-size:12px; font-weight:600; letter-spacing:.5px;
  border:1.5px solid var(--rule); border-radius:var(--r-control);
  padding:6px 10px; color:var(--muted); line-height:1;
  transition:border-color .2s, color .2s;
}
.site-nav .lang:hover{border-color:var(--brand); color:var(--brand)}
@media (max-width:760px){ .site-nav .hide-sm{display:none} }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  background:var(--brand); color:#fff; padding:11px 22px; border-radius:var(--r-control);
  font-size:13px; font-weight:600; font-family:var(--sans);
  border:1.5px solid var(--brand); cursor:pointer;
  transition:background .2s, border-color .2s, transform .1s;
}
.btn:hover{background:var(--brand-hover); border-color:var(--brand-hover)}
.btn:active{transform:scale(0.98)}
.btn.ghost{background:transparent; color:var(--brand); border-color:var(--brand); padding:10px 20px}
.btn.ghost:hover{background:var(--brand-soft); border-color:var(--brand)}
.site-nav .btn{color:#fff}

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden; border-bottom:1px solid var(--rule);
  background:linear-gradient(135deg, var(--paper) 0%, var(--brand-soft) 100%);
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(var(--rule) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 70% 40%, #000 20%, transparent 75%);
  mask-image:radial-gradient(ellipse 90% 70% at 70% 40%, #000 20%, transparent 75%);
  opacity:.7;
}
#vine{position:absolute; inset:0; width:100%; height:100%; opacity:.72}
.hero-in{position:relative; padding-block:clamp(var(--xl),9vw,110px)}
.eyebrow{
  color:var(--brand); display:flex; align-items:center; gap:12px; margin:0 0 var(--md);
  font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.5px;
}
.eyebrow::before{content:""; width:32px; height:1.5px; background:var(--brand)}
h1 em{font-style:normal; color:var(--brand)}
.lede{font-size:15px; color:var(--ink); line-height:1.6; max-width:600px; margin:var(--sm) 0 var(--lg)}
.hero-cta{display:flex; flex-wrap:wrap; gap:var(--sm)}
.verse{
  margin:var(--xl) 0 0; padding-top:var(--md); border-top:1px solid var(--rule);
  max-width:420px;
}
.verse p{margin:0; font-size:13px; font-style:italic; color:var(--muted)}
.verse cite{
  display:block; margin-top:5px; font-style:normal; color:var(--brand);
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px;
}

/* ---------- banda de cifras ---------- */
.stats{background:var(--brand); color:#fff}
.stats-in{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:var(--lg); padding-block:var(--lg);
}
.stat{display:grid; gap:2px; justify-items:start}
.stat .num{
  font-size:clamp(28px,3.5vw,38px); font-weight:700; letter-spacing:-0.5px;
  line-height:1; font-variant-numeric:tabular-nums;
}
.stat .cap{color:#BFD4EE; font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.5px}

/* ---------- secciones ---------- */
.section{padding-block:clamp(var(--xl),7vw,var(--s6))}
.sec-head{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:var(--md); margin-bottom:var(--xl)}
.sec-head p{margin:0; color:var(--muted); max-width:420px; font-size:14px}
.label{color:var(--brand); margin:0 0 10px}

/* ---------- servicios ---------- */
.services{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--lg)}
.svc{
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-card);
  padding:var(--md); display:grid; gap:10px; align-content:start;
  transition:box-shadow .2s, border-color .2s;
}
.svc:hover{box-shadow:0 4px 12px rgba(26,84,144,0.1); border-color:var(--brand-light)}
.svc .icon{width:40px; height:40px}
.svc h3{color:var(--ink)}
.svc .n{display:block; color:var(--brand); font-size:12px; font-weight:500; letter-spacing:.5px; margin-bottom:4px}
.svc p{margin:0; color:var(--muted); font-size:14px}
/* precio de entrada de cada servicio */
.svc .from{
  color:var(--brand); font-size:15px; font-weight:700; letter-spacing:-0.2px;
  font-variant-numeric:tabular-nums;
}
.svc .from span{font-weight:500; font-size:13px; color:var(--muted)}
.tags{display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0}
.tags li{
  font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.5px;
  color:var(--brand); background:var(--brand-soft); padding:4px 9px; border-radius:var(--r-control);
}

/* ---------- portfolio ---------- */
.work{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--lg)}
.work a{
  background:var(--paper); text-decoration:none;
  border:1px solid var(--rule); border-radius:var(--r-card); overflow:hidden;
  display:flex; flex-direction:column;
  transition:box-shadow .2s, border-color .2s, transform .2s;
}
.work a:hover{box-shadow:0 4px 12px rgba(26,84,144,0.1); border-color:var(--brand-light); transform:translateY(-2px)}
.work .shot{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:var(--surface) url("../img/work-placeholder.svg") center/cover no-repeat;
  border-bottom:1px solid var(--rule);
}
.work .shot img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  display:block; transition:transform .5s ease;
}
.work a:hover .shot img{transform:scale(1.04)}
.work .meta{padding:var(--md); display:grid; gap:5px; align-content:start; flex:1}
.work .dom{font-size:15px; font-weight:600; color:var(--ink); line-height:1.35; word-break:break-word; min-height:2.7em}
.work .kind{color:var(--muted)}
.work .go{color:var(--brand); opacity:0; transform:translateX(-4px); transition:opacity .2s, transform .2s}
.work a:hover .go, .work a:focus-visible .go{opacity:1; transform:none}
.work-note{margin:var(--lg) 0 0; color:var(--muted); font-size:14px}
.work-note a{color:var(--brand); font-weight:600; text-decoration:none}
.work-note a:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){ .work a:hover .shot img{transform:none} }

/* ---------- recomendaciones ---------- */
.reviews{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--lg)}
.reviews figure{
  margin:0; background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--r-card); padding:var(--lg); display:grid; gap:var(--sm);
  align-content:start; border-top:3px solid var(--brand);
}
.reviews blockquote{margin:0; color:var(--ink); font-size:15px; line-height:1.6}
.reviews figcaption{display:grid; gap:2px}
.reviews .who{font-weight:600; font-size:14px; color:var(--ink)}
.reviews .biz{color:var(--muted); font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.5px}
.reviews .stars{color:var(--brand); font-size:14px; letter-spacing:2px}
.reviews-empty{
  grid-column:1 / -1; margin:0; color:var(--muted); font-size:15px;
  background:var(--surface); border:1px dashed var(--rule);
  border-radius:var(--r-card); padding:var(--lg); text-align:center;
}

/* formulario para dejar una recomendación */
/* Ancho acotado: un formulario que cruza el monitor entero obliga a barrer
   la pantalla de lado a lado para rellenarlo. */
.review-cta{
  margin:var(--xl) auto 0; max-width:720px;
  background:var(--brand-soft);
  border:1px solid var(--rule); border-radius:var(--r-panel); padding:var(--lg);
}
.review-cta h3{color:var(--ink); margin:0 0 4px}
.review-cta > p{margin:0 0 var(--lg); color:var(--muted); font-size:14px}
.rform{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--md)}
.rform .wide{grid-column:1 / -1}
.rform label{font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.5px; color:var(--muted)}
.rform .opt{text-transform:none; letter-spacing:0}
.rform input,.rform select,.rform textarea{
  font-family:var(--sans); font-size:14px; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--rule);
  border-radius:var(--r-control); padding:10px 12px; width:100%;
  transition:border-color .2s;
}
.rform textarea{resize:vertical; min-height:96px}
.rform input:focus,.rform select:focus,.rform textarea:focus{outline:none; border-color:var(--brand)}
.rform .form-status.good{color:#166534}
.rform .form-status.bad{color:#B91C1C}
.review-note{margin:0; color:var(--muted); font-size:12px}
@media (max-width:560px){ .rform{grid-template-columns:1fr} }

/* ---------- precios (sin uso: los precios viven en cada servicio) ---------- */
.tiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--lg)}
.tier{
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-panel);
  padding:var(--lg); display:flex; flex-direction:column; gap:var(--sm); position:relative;
  transition:box-shadow .2s;
}
.tier:hover{box-shadow:0 4px 12px rgba(26,84,144,0.1)}
.tier.feature{border-color:var(--brand); background:var(--surface)}
.tier .flag{
  position:absolute; top:-11px; left:var(--lg);
  background:var(--brand); color:#fff; padding:4px 10px; border-radius:var(--r-control);
}
.tier h3{color:var(--muted); font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.5px}
.price{font-size:36px; font-weight:700; line-height:1; letter-spacing:-0.5px; color:var(--ink); font-variant-numeric:tabular-nums; margin:0}
.price small{font-size:13px; font-weight:400; color:var(--muted); margin-left:5px; letter-spacing:0}
.tier ul{list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:14px; color:var(--muted); flex:1}
.tier li{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start}
.tier li::before{content:""; width:6px; height:6px; margin-top:.55em; background:var(--brand); border-radius:50%}

/* ---------- proceso ---------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--lg)}
.step{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-card);
  padding:var(--md); border-top:3px solid var(--brand);
}
.step .k{color:var(--brand); margin:0}
.step h3{margin:6px 0 5px; color:var(--ink)}
.step p{margin:0; color:var(--muted); font-size:14px}

/* ---------- contacto ---------- */
.contact{background:var(--brand); color:#fff}
.contact .wrap{padding-block:clamp(var(--xl),7vw,var(--s6))}
.contact h2{color:#fff}
.contact .label{color:#BFD4EE}
.contact .intro{max-width:520px; color:#DCE8F6; margin:var(--sm) 0 0; font-size:15px}
/* ---------- vídeo: sección "Motion & AI" ---------- */
/* stretch: el vídeo crece hasta la altura del texto, así ninguna
   de las dos columnas sobresale de la otra */
.showcase{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--xl); align-items:stretch}
.showcase-lede{color:var(--ink); font-size:16px; max-width:48ch; margin:var(--sm) 0 var(--lg)}

/* lista de capacidades: titulillo en azul y explicación debajo */
.feature-list{list-style:none; margin:0 0 var(--lg); padding:0; display:grid; gap:var(--md)}
.feature-list li{
  display:grid; gap:2px; padding-left:var(--lg); position:relative;
  color:var(--muted); font-size:14px; max-width:46ch;
}
.feature-list li::before{
  content:""; position:absolute; left:0; top:6px;
  width:10px; height:10px; border-radius:2px;
  background:var(--brand); transform:rotate(45deg);
}
.feature-list strong{color:var(--ink); font-size:15px; font-weight:600}
.showcase-cta{display:flex; flex-wrap:wrap; gap:var(--sm)}

.showcase-media,
.contact-media{
  border-radius:var(--r-panel); overflow:hidden; background:#0b1b2e;
  border:1px solid var(--rule); line-height:0; position:relative;
}
/* Los vídeos son decoración: sin controles, sin capturar el ratón.
   El recuadro se rellena por completo (cover) y el zoom del 10% desde la
   esquina superior izquierda saca del marco la marca de agua de la IA.
   Apaño de CSS — lo definitivo es recortar el vídeo y reexportarlo. */
.showcase-media video,
.contact-media video{
  width:100%; height:100%; display:block; object-fit:cover;
  transform:scale(1.1); transform-origin:top left;
  pointer-events:none; user-select:none;
}
.showcase-media video::-webkit-media-controls,
.contact-media video::-webkit-media-controls{display:none !important}

@media (max-width:860px){ .showcase{grid-template-columns:1fr; gap:var(--lg)} }

/* ---------- contacto: formulario + vídeo en dos columnas ---------- */
/* stretch, no start: el vídeo crece hasta la altura exacta del formulario */
.contact-grid{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,0.75fr);
  gap:var(--lg); align-items:stretch; margin-top:var(--xl);
}
.contact-media{border-color:rgba(255,255,255,.2)}
@media (max-width:920px){
  .contact-grid{grid-template-columns:1fr}
  .contact-media{aspect-ratio:16/9}
}
@media (max-width:860px){ .showcase-media{aspect-ratio:16/9} }

/* ---------- formulario de contacto ---------- */
.cform{
  /* dos columnas como mucho: un formulario de cuatro campos en fila
     obliga a barrer la pantalla entera y se lee fatal */
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--md); margin-top:0;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-panel); padding:var(--lg);
}
.cform .wide{grid-column:1 / -1}
@media (max-width:560px){ .cform{grid-template-columns:1fr} }
.field{display:grid; gap:6px}
.field label{font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.5px; color:#BFD4EE}
.field .opt{text-transform:none; letter-spacing:0; opacity:.7}
.cform input,.cform select,.cform textarea{
  font-family:var(--sans); font-size:14px; color:#fff;
  background:rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.28);
  border-radius:var(--r-control); padding:10px 12px; width:100%;
  transition:border-color .2s, background .2s;
}
.cform textarea{resize:vertical; min-height:110px}
.cform input:focus,.cform select:focus,.cform textarea:focus{
  outline:none; border-color:#fff; background:rgba(255,255,255,.16);
}
.cform select option{color:#1F2937; background:#fff}

/* trampa antispam: invisible para personas, presente para bots */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.form-actions{display:flex; flex-wrap:wrap; align-items:center; gap:var(--md)}
.form-status{margin:0; font-size:13px; min-height:1.2em}
.form-status.good{color:#C9F0D2}
.form-status.bad{color:#FFCFCF}
.cform .btn:disabled{opacity:.65; cursor:progress}

.cgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--lg); margin-top:var(--xl)}
.cgrid dt{color:#BFD4EE; margin-bottom:8px; font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.5px}
.cgrid dd{margin:0; font-size:17px; font-weight:600; line-height:1.4}
.cgrid a{text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35)}
.cgrid a:hover{border-color:#fff}
.contact .btn{background:#fff; color:var(--brand); border-color:#fff; margin-top:var(--xl)}
.contact .btn:hover{background:var(--brand-soft); border-color:var(--brand-soft); color:var(--brand)}

/* ---------- redes sociales ---------- */
.social{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.social a{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  border:1.5px solid color-mix(in srgb,currentColor 35%,transparent);
  padding:9px 14px; border-radius:var(--r-control); font-size:13px; font-weight:600;
  transition:border-color .2s, background .2s;
}
.social a:hover{border-color:currentColor}
.social svg{width:16px; height:16px; flex:none}
.cgrid .social a{border-bottom-color:color-mix(in srgb,currentColor 35%,transparent)}
.site-footer .social a{color:var(--muted); border:none; padding:0; font-weight:500}
.site-footer .social a:hover{color:var(--brand)}

/* ---------- páginas legales ---------- */
.legal{max-width:760px; margin-inline:auto}
.legal h1{margin-bottom:6px}
.legal-date{color:var(--muted); font-size:13px; margin:0 0 var(--lg)}
.legal-lede{font-size:17px; color:var(--ink); margin:0 0 var(--xl)}
.legal h2{margin-top:var(--xl); margin-bottom:var(--sm)}
.legal h3{margin-top:var(--lg); margin-bottom:6px; color:var(--brand)}
.legal p{color:var(--muted); margin:0 0 var(--md)}
.legal ul{color:var(--muted); margin:0 0 var(--md); padding-left:var(--lg); display:grid; gap:8px}
.legal li::marker{color:var(--brand)}
.legal strong{color:var(--ink); font-weight:600}
.legal a{color:var(--brand); font-weight:500}
.legal code{
  font-family:ui-monospace,Consolas,monospace; font-size:.9em;
  background:var(--surface); border:1px solid var(--rule);
  border-radius:4px; padding:1px 5px; word-break:break-all;
}
.legal-back{margin-top:var(--xl)}

.callout{
  background:var(--brand-soft); border-left:4px solid var(--brand);
  border-radius:var(--r-card); padding:var(--md) var(--lg); margin:0 0 var(--xl);
}
.callout p{margin:0; color:var(--ink); font-size:16px}

.table-wrap{overflow-x:auto; margin:0 0 var(--md)}
.legal-table{border-collapse:collapse; width:100%; font-size:14px; min-width:520px}
.legal-table th,.legal-table td{
  text-align:left; vertical-align:top; padding:10px var(--sm);
  border-bottom:1px solid var(--rule); color:var(--muted);
}
.legal-table th{
  color:var(--ink); font-weight:600; font-size:12px;
  text-transform:uppercase; letter-spacing:.5px; border-bottom-width:2px;
}
.legal-table code{background:none; border:none; padding:0; color:var(--brand)}

/* ---------- pie ---------- */
.site-footer{border-top:1px solid var(--rule); padding-block:var(--lg); font-size:13px; color:var(--muted)}
.foot{display:flex; flex-wrap:wrap; gap:var(--md); justify-content:space-between; align-items:center}

/* ---------- aparicion al hacer scroll ---------- */
.rv{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.rv.in{opacity:1; transform:none}

/* Las tarjetas entran una detras de otra, no todas de golpe: la seccion se
   despliega en cascada. El retardo lo lleva el CSS, sin JavaScript extra. */
.rv .svc,
.rv .work a,
.rv .tier,
.rv .step{
  opacity:0; transform:translateY(14px);
  transition:opacity .45s ease, transform .45s ease, box-shadow .2s, border-color .2s;
}
.rv.in .svc,
.rv.in .work a,
.rv.in .tier,
.rv.in .step{opacity:1; transform:none}

.rv.in .svc:nth-child(1), .rv.in .work a:nth-child(1), .rv.in .tier:nth-child(1), .rv.in .step:nth-child(1){transition-delay:.05s}
.rv.in .svc:nth-child(2), .rv.in .work a:nth-child(2), .rv.in .tier:nth-child(2), .rv.in .step:nth-child(2){transition-delay:.12s}
.rv.in .svc:nth-child(3), .rv.in .work a:nth-child(3), .rv.in .tier:nth-child(3), .rv.in .step:nth-child(3){transition-delay:.19s}
.rv.in .svc:nth-child(4), .rv.in .work a:nth-child(4), .rv.in .tier:nth-child(4), .rv.in .step:nth-child(4){transition-delay:.26s}
.rv.in .work a:nth-child(5){transition-delay:.33s}
.rv.in .work a:nth-child(6){transition-delay:.40s}
.rv.in .work a:nth-child(7){transition-delay:.47s}
.rv.in .work a:nth-child(8){transition-delay:.54s}
.rv.in .work a:nth-child(n+9){transition-delay:.60s}

/* barrido de luz al pasar por el boton */
.btn{position:relative; overflow:hidden}
.btn::after{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform:skewX(-18deg); transition:left .55s ease; pointer-events:none;
}
.btn:hover::after{left:120%}
.btn.ghost::after{background:linear-gradient(100deg, transparent, rgba(26,84,144,.12), transparent)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,
  .rv .svc, .rv .work a, .rv .tier, .rv .step{opacity:1; transform:none; transition:none}
  .rv.in .svc, .rv.in .work a, .rv.in .tier, .rv.in .step{transition-delay:0s}
  .btn::after{display:none}
}

/* ---------- impresion ---------- */
@media print{
  .site-header,.spine,#vine,.hero-cta,.btn{display:none}
  body{font-size:12pt; color:#000; background:#fff}
}