/* ════════════════════════════════════════════════════════════════════════
   lineas.css — FUENTE ÚNICA de estilos de "Líneas de Productos" público
   (CP2.2, 2026-07-01). Dos piezas de diseño aprobadas en Claude Design:

     1c "Banda inmersiva"    → hero de /linea/<slug>            (.lin-hero-*)
     2b "Tarjetas con portada" → tira de accesos a líneas       (.lin-strip-*)

   La tira (2b) la consumen 3 páginas (productos.html, index.html, y en el
   futuro cualquier otra) vía /js/lineas-strip.js — por eso vive en un CSS
   compartido y no copiada por página (a diferencia de .pcard, que cada
   página duplica a propósito — ver tarjetas.css). El hero (1c) solo lo usa
   linea.html, pero queda acá también para mantener las dos piezas del mismo
   diseño juntas.

   Colores: usa las variables --col-* de web.css (ya definidas ahí con los
   MISMOS valores que trae el mockup — no es casualidad, el diseño se hizo
   sobre la paleta real del sitio). Cargar SIEMPRE después de web.css.
   ════════════════════════════════════════════════════════════════════════ */

/* Resplandor dorado del hero de línea — perillas de ajuste (2026-07-01,
   recalibrado: tenue como el original +~5%, pero MUY expandido y centrado
   en la portada del producto). Cambiar SOLO estos números para afinar el
   resplandor; el radial-gradient de abajo las consume, no hay que tocarlo.
     --lin-glow-opacity     → intensidad del dorado en el centro (alpha 0-1).
                               Original tenue = .26; recalibrado a .27 (+~5%);
                               subido de nuevo a .34 (2026-07-01, pedido de
                               Andrés: "un toque más presente", MENOS que el
                               .45 descartado por demasiado fuerte).
     --lin-glow-reach       → qué tan lejos llega el color antes de disolverse
                               a transparente (100% = transición MUY gradual,
                               el resplandor se derrama por gran parte de la
                               página en vez de quedar concentrado y chico).
     --lin-glow-size(-mobile)  → diámetro del óvalo del resplandor.
     --lin-glow-x           → posición horizontal del centro (% de .lin-hero).
     --lin-glow-y(-mobile)  → posición vertical del centro (% de .lin-hero) —
                               AJUSTADO para coincidir con el centro real de
                               la portada del hero (medido en vivo con
                               Selenium: 54% desktop, 51% móvil — no es 50%
                               exacto porque el bloque de arriba, eyebrow+
                               título+chip, no pesa exactamente igual que la
                               descripción de abajo). Si el layout del hero
                               cambia (más/menos texto arriba de la portada),
                               remedir y actualizar estos dos valores.       */
:root{
  --lin-glow-opacity: .34;
  --lin-glow-reach: 100%;
  --lin-glow-size: 2400px;
  --lin-glow-size-mobile: 1500px;
  --lin-glow-x: 50%;
  --lin-glow-y: 54%;
  --lin-glow-y-mobile: 51%;
}

/* ── 1c — Hero "Banda inmersiva" (linea.html) ──────────────────────────── */
/* SIN caja a propósito (arreglo de raíz 2026-07-01): el recuadro visible que
   tenía antes venía de 3 causas juntas — (1) background propio distinto del
   fondo real de la página, (2) border-radius/overflow:hidden que lo dibujaba
   como tarjeta, (3) estar confinado dentro de .section-in (max-width:1300px)
   en vez de ocupar el ancho completo. El fondo crema de TODA la página ya lo
   pone body.pal-v2 (web.css, --col-crema) — acá el hero NO lleva background
   propio, NO lleva border-radius, y en linea.html vive FUERA de .section-in
   para que el resplandor sea full-bleed. Ancho máximo SOLO en el contenido
   (.lin-hero-in), nunca en el fondo. */
.lin-hero{position:relative;padding:52px 24px 44px;text-align:center;overflow:visible}
.lin-hero-glow{position:absolute;top:var(--lin-glow-y);left:var(--lin-glow-x);transform:translate(-50%,-50%);width:var(--lin-glow-size);height:var(--lin-glow-size);background:radial-gradient(ellipse at center,rgba(184,146,61,var(--lin-glow-opacity)),rgba(184,146,61,0) var(--lin-glow-reach));pointer-events:none;z-index:0}
.lin-hero-in{position:relative;z-index:1;max-width:780px;margin:0 auto}
.lin-hero-eyebrow{letter-spacing:.26em;text-transform:uppercase;font-size:.72rem;font-weight:700;color:var(--col-dorado-txt);margin-bottom:10px;font-family:var(--sans)}
.lin-hero-title{font-family:var(--serif);font-size:2.9rem;font-weight:600;color:var(--col-texto);margin:0 0 14px;line-height:1.03}
.lin-hero-chips{display:inline-flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-bottom:6px}
.lin-hero-chip{background:var(--col-crema-card);border:1px solid #e0cfa4;color:var(--col-dorado-txt);border-radius:40px;padding:6px 14px;font-size:.74rem;font-weight:600;font-family:var(--sans)}
.lin-hero-cover{max-width:720px;margin:14px auto 12px}
.lin-hero-cover img{width:100%;display:block;border-radius:6px}
.lin-hero-desc{font-family:var(--sans);font-size:.96rem;line-height:1.7;color:var(--col-texto-2);max-width:660px;margin:0 auto}

.lin-products{padding:34px 0 0}
.lin-products-title{font-family:var(--serif);font-size:1.4rem;color:var(--col-texto);margin-bottom:20px;font-weight:400}

.lin-empty{text-align:center;color:var(--gray);padding:60px 20px;font-family:var(--sans)}
.lin-notfound{text-align:center;padding:80px 20px}
.lin-notfound h2{font-family:var(--serif);color:var(--col-texto);margin-bottom:10px}
.lin-notfound p{color:var(--gray);font-family:var(--sans);margin-bottom:18px}
.lin-notfound a{color:var(--col-fucsia-txt);font-family:var(--sans);font-weight:600;text-decoration:none}
.lin-notfound a:hover{text-decoration:underline}

@media(max-width:768px){
  .lin-hero{padding:32px 20px 28px}
  .lin-hero-glow{top:var(--lin-glow-y-mobile);width:var(--lin-glow-size-mobile);height:var(--lin-glow-size-mobile)}
  .lin-hero-title{font-size:1.7rem;margin-bottom:10px}
  .lin-hero-eyebrow{font-size:.64rem}
  .lin-hero-chip{font-size:.68rem;padding:5px 12px}
  .lin-hero-cover{max-width:280px;margin:12px auto 10px}
  .lin-hero-desc{font-size:.88rem}
  .lin-products{padding-top:26px}
}

/* ── 2b — Tira "Tarjetas con portada" (catálogo + Home) ────────────────── */

.lin-strip-wrap{margin:0 0 36px}
.lin-strip-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.lin-strip-eyebrow{letter-spacing:.24em;text-transform:uppercase;font-size:.7rem;font-weight:700;color:var(--col-dorado-txt);margin-bottom:6px;font-family:var(--sans)}
.lin-strip-title{font-family:var(--serif);font-size:1.7rem;font-weight:600;color:var(--col-texto);margin:0}
.lin-strip-viewall{font-family:var(--sans);font-size:.78rem;color:var(--col-fucsia-txt);font-weight:600;text-decoration:none;white-space:nowrap}
.lin-strip-viewall:hover{text-decoration:underline}
.lin-strip-hint{display:none;font-family:var(--sans);font-size:.66rem;color:var(--col-fucsia-txt);font-weight:600;white-space:nowrap}

.lin-strip{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.lin-card{flex:0 0 auto;width:160px;background:var(--col-crema-card);border:1px solid var(--col-linea);border-radius:12px;padding:13px 13px 14px;text-decoration:none;transition:border-color .25s,box-shadow .25s,transform .25s;scroll-snap-align:start}
.lin-card:hover{border-color:var(--col-fucsia);box-shadow:0 12px 28px rgba(224,33,138,.15);transform:translateY(-3px)}
.lin-card-thumb{height:88px;display:flex;align-items:center;justify-content:center;margin-bottom:11px}
.lin-card-thumb img{max-width:100%;max-height:88px;object-fit:contain}
.lin-card-name{font-family:var(--serif);font-size:1.05rem;line-height:1.16;color:var(--col-texto);font-weight:500}

@media(max-width:680px){
  .lin-strip-title{font-size:1.3rem}
  .lin-strip-eyebrow{font-size:.58rem}
  .lin-strip-viewall{display:none}
  .lin-strip-hint{display:inline}
  .lin-card{width:148px;padding:12px}
  .lin-card-thumb{height:80px;margin-bottom:10px}
  .lin-card-thumb img{max-height:80px}
  .lin-card-name{font-size:1rem}
}

/* ── Galería completa (página /lineas, "Todas las líneas") ──────────────
   MISMAS tarjetas .lin-card de la tira 2b, agrandadas vía scoping en un
   grid (parrilla, no fila con scroll) — sin duplicar su HTML/CSS base.
   Solo la usa frontend/lineas.html hoy, pero queda acá junto a las demás
   piezas del diseño de Líneas (mismo criterio que el hero: ver comentario
   arriba del bloque 1c). */
.lin-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:22px}
.lin-gallery .lin-card{width:auto}
.lin-gallery .lin-card-thumb{height:150px}
.lin-gallery .lin-card-name{font-size:1.15rem}

@media(max-width:680px){
  .lin-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .lin-gallery .lin-card-thumb{height:110px}
  .lin-gallery .lin-card-name{font-size:1rem}
}