/* ==========================================================================
   vitaralink.com — fase 2 del rediseño (_interno/propuesta-rediseno.md §3.1)
   Piezas nuevas del index, con los tokens del sistema (funcionan en los dos temas).
   Base limpia: sin visuales pixel, ASCII ni cuadrícula; el cyan solo en iconos.
   ========================================================================== */

/* ---------- Prueba bajo la franja: tiendas que hicimos (§5.4) ---------- */
.prueba {
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
}

.prueba__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 32px;
}

.prueba__texto {
  margin: 0;
  color: var(--text-muted);
  font: 400 16px/24px var(--font-sans);
}

.prueba__marcas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cada marca enlaza a su tienda viva: la prueba se puede verificar.
   Doble clase: styles.css vuelve inline-block con relleno a `main li a` (área de toque). */
.prueba__marcas .prueba__marca {
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--text);
  font: 600 20px/24px var(--font-display);
  letter-spacing: -0.25px;
  text-decoration: none;
}

.prueba__marca .px-i {
  color: var(--action-icon);
}

/* Espacio para el logo (cuando llegue, reemplaza al nombre): alto fijo, sin salto de layout */
.prueba__logo {
  display: block;
  height: 28px;
  width: auto;
}

.prueba__ir {
  margin-left: auto;
  min-height: 44px;
}

.prueba__ir .px-i {
  color: var(--action-icon);
}

@media (max-width: 799px) {
  .prueba__ir {
    margin-left: 0;
  }
}

/* ---------- Caso real dentro de un capítulo (Aplicaciones) ---------- */
.caso {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

@media (min-width: 900px) {
  .caso {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    align-items: center;
  }
}

.caso__media {
  padding: 24px;
  background: var(--surface-raised);
}

.caso__texto {
  display: grid;
  gap: 8px;
  padding: 24px;
}

@media (min-width: 900px) {
  .caso__texto {
    padding: 40px;
  }
}

.caso__titulo {
  margin: 0;
  color: var(--text);
  font: 600 20px/24px var(--font-display);
  letter-spacing: -0.25px;
}

.caso__desc {
  margin: 0;
  color: var(--text-muted);
  font: 400 16px/24px var(--font-sans);
}

/* ---------- Agenda: tiempo de respuesta junto al WhatsApp (§5.17) ---------- */
.agenda-nota {
  margin-top: 12px;
  text-align: center;
}


/* ---------- Tiendas Shopify: espacio del logo de cada tienda (cuando llegue) ---------- */
.real__logo {
  display: block;
  height: 28px;
  width: auto;
  margin-bottom: 12px;
}

/* ==========================================================================
   Secciones nuevas del index (variantes aprobadas el 17 oct 2026:
   V8 pasos, V2 herramientas, V6 revisión, promesas y V5 trabajos)
   ========================================================================== */

/* ---------- fondo-grid.css del sistema (code/fondo-grid.css, tal cual) ---------- */
.fondo-grid{position:relative;isolation:isolate}
.fondo-grid::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(to right,var(--grid-line) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  background-size:var(--grid-cell,48px) var(--grid-cell,48px);background-position:center center;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--grid-fade,120px),#000 calc(100% - var(--grid-fade,120px)),transparent),linear-gradient(to bottom,transparent,#000 var(--grid-fade,120px),#000 calc(100% - var(--grid-fade,120px)),transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 var(--grid-fade,120px),#000 calc(100% - var(--grid-fade,120px)),transparent),linear-gradient(to bottom,transparent,#000 var(--grid-fade,120px),#000 calc(100% - var(--grid-fade,120px)),transparent);
  mask-composite:intersect;}
.fondo-grid--esquina::before{background-size:var(--grid-cell-card,24px) var(--grid-cell-card,24px);background-position:var(--grid-origen,100% 0);
  -webkit-mask-image:radial-gradient(circle at var(--grid-origen,100% 0),#000 0,rgba(0,0,0,.6) calc(var(--grid-alcance,75%) * .45),transparent var(--grid-alcance,75%));
  -webkit-mask-composite:source-over;
  mask-image:radial-gradient(circle at var(--grid-origen,100% 0),#000 0,rgba(0,0,0,.6) calc(var(--grid-alcance,75%) * .45),transparent var(--grid-alcance,75%));
  mask-composite:add;}

.v-mono{font:400 12px/16px var(--font-mono);letter-spacing:1px;text-transform:uppercase;color:var(--text-mono);}

/* ---------- Lo que necesitas para empezar (V8, patrón Shopify "Crea rápido") ---------- */
.pv{display:grid;gap:40px;}
@media (min-width:1000px){.pv{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:80px;align-items:center;}}
.pv__visual{position:relative;aspect-ratio:1/1;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-raised);}
@media (max-width:999px){.pv__visual{aspect-ratio:4/3;}}
/* Capas apiladas: la activa entra deslizándose y la anterior sale del otro lado (como el hero) */
.pv__capa{position:absolute;inset:0 0 96px;display:grid;place-items:center;opacity:0;transform:translateX(32px);
  transition:opacity 300ms var(--ease-standard),transform 300ms var(--ease-standard);pointer-events:none;}
.pv__capa.sale{transform:translateX(-32px);}
.pv__capa.is-activa{opacity:1;transform:none;transition-delay:120ms;}
.pv__capa canvas{height:86%;width:auto;max-width:78%;aspect-ratio:1/1;}
/* Último paso: los tres resultados posibles (página, sistema o tienda), quietos */
.pv__capa--tres{grid-auto-flow:column;gap:4%;padding:0 6%;}
.pv__capa--tres canvas{height:auto;width:100%;max-width:none;}
.pv__desc{position:absolute;left:0;right:0;bottom:0;margin:0;padding:20px 28px 24px;display:grid;border-top:1px solid var(--border);background:var(--surface-raised);}
.pv__desc span{grid-area:1/1;color:var(--text);font:400 20px/28px var(--font-display);letter-spacing:-.25px;opacity:0;transition:opacity 200ms var(--ease-standard);}
.pv__desc span.is-activa{opacity:1;transition-delay:120ms;}
.pv__texto .titular{margin-bottom:40px;}
.pv__lista{margin:0;padding:0;list-style:none;}
.pv__paso{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;align-items:center;gap:16px;width:100%;min-height:72px;padding:20px 0;
  color:var(--text-muted);font:500 28px/36px var(--font-display);letter-spacing:-.5px;transition:color var(--duration-fast);}
.pv__paso .px-i{flex:none;color:var(--text-subtle);transition:color var(--duration-fast),transform 150ms var(--ease-icon);}
.pv__paso:hover,.pv__paso[aria-pressed="true"]{color:var(--text);}
.pv__paso[aria-pressed="true"] .px-i{color:var(--action-icon);transform:translateX(4px);}
/* Número del paso: casilla con borde; en el activo se llena en cyan */
.pv__num{flex:none;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  font:700 20px/1 var(--font-display);letter-spacing:0;color:var(--text-muted);
  transition:background-color var(--duration-fast),border-color var(--duration-fast),color var(--duration-fast);}
.pv__paso:hover .pv__num{border-color:var(--text);color:var(--text);}
.pv__paso[aria-pressed="true"] .pv__num{background:var(--action-icon);border-color:var(--action-icon);color:var(--navy-950);}
.pv__paso:focus-visible{outline:1px solid var(--text);outline-offset:4px;}
/* Línea bajo cada paso; en el activo se llena en cyan mientras avanza solo (como la franja índice) */
.pv__linea{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--border-strong);}
.pv__linea::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--action-icon);transform-origin:left;transform:scaleX(0);}
.pv__paso[aria-pressed="true"] .pv__linea::after{transform:scaleX(var(--avance,1));}
.pv__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px;}
.pv__ctas .wa-i{color:var(--action-icon);}
@media (max-width:799px){.pv__paso{font-size:22px;line-height:28px;min-height:60px;padding:16px 0;}.pv__num{width:34px;height:34px;font-size:18px;}.pv__desc span{font-size:16px;line-height:24px;}.pv__desc{padding:14px 18px 16px;}.pv__capa{inset:0 0 80px;}}

/* ---------- Funciona con lo que ya usas (V2): franja delgada con marquee ---------- */
.v-delgada{padding:96px 0;}
@media (max-width:799px){.v-delgada{padding:64px 0;}}
.v-delgada .lead{margin-top:16px;}
.marquee{position:relative;overflow:hidden;margin-top:48px;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 140px,#000 calc(100% - 140px),transparent);
  mask-image:linear-gradient(to right,transparent,#000 140px,#000 calc(100% - 140px),transparent);}
.marquee__pista{display:flex;width:max-content;gap:16px;margin:0;padding:0;list-style:none;animation:marquee 56s linear infinite;}
.marquee:hover .marquee__pista{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.herr{display:inline-flex;align-items:center;gap:14px;min-height:80px;padding:0 28px 0 24px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);white-space:nowrap;}
.herr .px-i{color:var(--action-icon);}
.herr span{display:grid;gap:2px;}
.herr b{color:var(--text);font:600 20px/24px var(--font-display);letter-spacing:-.25px;}
.herr small{color:var(--text-mono);font:400 12px/16px var(--font-mono);letter-spacing:1px;text-transform:uppercase;}
/* Logos oficiales sueltos (sprite lg-* de index.html), como la fila de logos de Linear, con acabado
   metálico: cada logo lleva un degradado vertical con estos tres tonos. Van en la raíz y no en la fila
   porque el degradado vive en el sprite y hereda de ahí, no del <use>. El espacio va como padding de
   cada logo y no como gap, para que la copia del bucle quede exacta a -50% y el giro no brinque. */
html[data-theme="light"]{--logo-tono-1:#3A4246;--logo-tono-2:#6F787D;--logo-tono-3:#A7B0B4;}
html[data-theme="dark"]{--logo-tono-1:#FFFFFF;--logo-tono-2:#E3EAEC;--logo-tono-3:#7F8A8F;}
.marquee__pista--logos{gap:0;align-items:center;}
.logo-fila{display:flex;align-items:center;height:56px;padding-right:72px;}
.logo-fila svg{display:block;flex:none;}
@media (max-width:799px){.logo-fila{padding-right:48px;}}

/* ---------- ¿Ya tienes página o tienda? (V6): enlace → WhatsApp, con vista previa ---------- */
.revisa{display:grid;gap:48px;}
@media (min-width:1000px){.revisa{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:80px;align-items:center;}}
.revisa__form{display:grid;gap:8px;max-width:560px;margin-top:40px;}
.revisa__form .boton{justify-self:start;margin-top:16px;}
.revisa__form .wa-i{color:var(--action-icon);}
.campo__etiqueta{color:var(--text);font:500 14px/20px var(--font-sans);}
.campo{position:relative;}
.campo__ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--action-icon);pointer-events:none;}
.campo__estado{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:none;pointer-events:none;}
.campo__input{box-sizing:border-box;width:100%;height:var(--input-height);padding:0 44px;border:1px solid var(--border-control);border-radius:var(--radius-md);
  background:var(--bg);color:var(--text);font:400 16px/24px var(--font-sans);transition:border-color var(--duration-base) var(--ease-standard);}
.campo__input::placeholder{color:var(--text-subtle);}
.campo__input:hover{border-color:var(--text-muted);}
.campo__input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 28%,transparent);}
.campo.is-error .campo__input{border-color:var(--danger);}
.campo.is-error .campo__ico,.campo.is-error .campo__estado{color:var(--danger);}
.campo.is-error .campo__estado{display:block;}
.campo__error{margin:0;color:var(--danger);font:400 13px/18px var(--font-sans);}
.revisa__vista{display:grid;gap:20px;padding:32px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);}
/* La burbuja muestra el mensaje que se va a mandar; el enlace cambia mientras escribes */
.burbuja{justify-self:end;max-width:92%;display:grid;gap:8px;padding:16px 18px;border-radius:var(--radius-md) var(--radius-md) var(--radius-none) var(--radius-md);
  background:var(--surface-strong);color:var(--text);font:400 16px/24px var(--font-sans);}
.burbuja p{margin:0;}
.burbuja b{font-weight:600;word-break:break-all;}
.burbuja b.is-ejemplo{color:var(--text-subtle);font-weight:500;}
.burbuja .v-mono{justify-self:end;display:inline-flex;align-items:center;gap:6px;}
.burbuja .wa-i{width:14px;height:14px;color:var(--action-icon);}
.revisa__pasos{display:grid;gap:12px;margin:0;padding:16px 0 0;list-style:none;border-top:1px solid var(--border);}
.revisa__pasos li{display:flex;align-items:center;gap:12px;color:var(--text-muted);font:400 16px/24px var(--font-sans);}
.revisa__pasos .px-i{flex:none;width:var(--px-icono-md);height:var(--px-icono-md);color:var(--action-icon);}


/* ---------- Esto ya lo hicimos (V5): uno grande + tres en fila ---------- */
.trabajos{display:grid;gap:24px;}
@media (min-width:1000px){.trabajos{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:repeat(3,auto);}
  .trabajo--grande{grid-row:span 3;}
  .trabajo:not(.trabajo--grande){grid-template-columns:200px minmax(0,1fr);align-items:center;}}
.trabajo{display:grid;align-content:start;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);
  color:var(--text);text-decoration:none;transition:border-color var(--duration-slow) var(--ease-standard);}
.trabajo:hover,.trabajo:focus-visible{border-color:var(--border-strong);}
.trabajo__media{position:relative;aspect-ratio:4/3;background:var(--surface-raised);}
.trabajo--grande .trabajo__media{aspect-ratio:1/1;}
/* la imagen no aporta alto: así el texto nunca queda fuera de la tarjeta */
.trabajo__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.trabajo__txt{display:grid;gap:10px;padding:20px 24px 24px;}
.trabajo__n{display:flex;align-items:center;gap:8px;font:600 20px/24px var(--font-display);letter-spacing:-.25px;}
.trabajo--grande .trabajo__n{font-size:32px;line-height:40px;letter-spacing:-.5px;}
.trabajo__n .px-i{color:var(--action-icon);transition:transform var(--duration-base) var(--ease-standard);}
.trabajo:hover .trabajo__n .px-i{transform:translateX(3px);}
.trabajo__tags{display:flex;flex-wrap:wrap;gap:6px;}
.trabajo__tags span{padding:4px 8px;border-radius:var(--radius-sm);border:1px solid var(--border);color:var(--text-mono);font:400 12px/14px var(--font-mono);letter-spacing:1px;text-transform:uppercase;}

@media (prefers-reduced-motion: reduce){
  .pv__capa,.pv__desc span{transition:none;}
  .marquee__pista{animation:none;flex-wrap:wrap;width:auto;padding:0 16px;}
  .marquee__pista [aria-hidden="true"]{display:none;}
  .marquee{-webkit-mask-image:none;mask-image:none;}
}

/* ---------- Portada en laptops (pantallas bajas) ----------
   En 1280×720, 1366×657, 1536×730 o 1440×789 (lo que queda visible con la barra del navegador)
   la franja índice quedaba bajo el pliegue: el escenario del ojo se medía con toda la altura de
   la pantalla. Aquí el escenario y el H1 se ajustan a la altura para que las tres tarjetas
   quepan en la primera pantalla. Solo cambian medidas; el contenido del hero es el mismo. */
@media (min-width: 1024px) and (max-height: 860px) {
  .portada {
    padding-top: calc(var(--nav-float-height) + var(--nav-float-offset) + 8px);
    padding-bottom: 16px;
  }

  .portada__titulo {
    font-size: min(96px, 12svh, 7.4vw);
  }

  .portada__sub {
    margin-top: 16px;
  }

  .portada__acciones {
    margin-top: 24px;
  }

  /* alto del escenario = pantalla − nav − franja índice y su aire */
  .escenario {
    width: min(100%, calc((100svh - 236px) * 5 / 6));
  }

  .portada__indice {
    margin-top: 24px;
  }

  .indice__item {
    padding-top: 14px;
    padding-bottom: 14px;
  }
}

/* ---------- "Esto ya lo hicimos" (V5) solo en escritorio ----------
   En celular la página se alargaba demasiado y los capítulos ya muestran cada trabajo. */
@media (max-width: 799px) {
  #trabajos {
    display: none;
  }
}