/*
Theme Name: TNR Tienda
Author: Tour&Ride
Description: Tienda online de Tour&Ride (WooCommerce) — bicis de ocasión. Sistema visual "Marco taller" portado del diseño aprobado. Marca TNR (azul #2889b8), Lato + Roboto.
Version: 2.0
License: All Rights Reserved
Text Domain: tnr-tienda
*/

/* ============================================================
   Tournride · Tienda de ocasión — sistema visual
   Marca: azul TNR #2889b8 / hover #1f6e94 · gris #5b6670
   Lato (titulares) · Roboto (texto)
   ============================================================ */

:root{
  /* Brand (driven by Tweaks via JS, with these as fallbacks) */
  --blue:        #2889b8;
  --blue-dark:   #1f6e94;
  --blue-deep:   #185a7a;
  --gray:        #5b6670;

  /* Light surfaces */
  --ink:     #182027;
  --ink-2:   #3a444d;
  --paper:   #f4f6f8;
  --paper-2: #ffffff;
  --line:    #e3e8ec;
  --line-2:  #eef2f5;

  /* Dark / photo surfaces — the "fondo negro" world */
  --noir:    #0a0b0d;
  --noir-2:  #101216;
  --coal:    #15181d;
  --coal-2:  #1c2026;
  --coal-line: rgba(255,255,255,.09);
  --coal-line-2: rgba(255,255,255,.14);
  --on-dark:    #f3f5f7;
  --on-dark-2:  #a8b1ba;
  --on-dark-3:  #6e7782;

  /* Shape + type scale (tweakable) */
  --radius:  14px;
  --radius-sm: 9px;
  --fs:      16px;
  --font-head: 'Lato', system-ui, sans-serif;
  --font-body: 'Roboto', system-ui, sans-serif;

  /* Estado palette */
  --st-nueva-bg:#e6f6ee;  --st-nueva-fg:#15784a;  --st-nueva-dot:#1fa468;
  --st-muy-bg:#e7f2f9;    --st-muy-fg:#1f6e94;    --st-muy-dot:#2889b8;
  --st-bueno-bg:#fbf1dc;  --st-bueno-fg:#9a6a12;  --st-bueno-dot:#cf9322;
  --st-usado-bg:#edf0f2;  --st-usado-fg:#5b6670;  --st-usado-dot:#8b95a0;

  --shadow-card: 0 1px 2px rgba(24,32,39,.04), 0 8px 24px rgba(24,32,39,.06);
  --shadow-pop:  0 12px 40px rgba(10,11,13,.18), 0 2px 8px rgba(10,11,13,.10);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-body);
  font-size:var(--fs);
  line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ font-family:var(--font-head); font-weight:900; letter-spacing:-.012em; margin:0; line-height:1.05; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
img{ max-width:100%; display:block; }
::selection{ background:var(--blue); color:#fff; }

.wrap{ width:100%; max-width:1240px; margin:0 auto; padding:0 32px; }

/* ============================================================
   Topbar
   ============================================================ */
.topbar{
  background:var(--ink);
  color:#cdd5dc;
  font-size:13px;
  letter-spacing:.01em;
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; height:40px; gap:16px; }
.topbar__left{ display:flex; align-items:center; gap:18px; min-width:0; }
.topbar__item{ display:flex; align-items:center; gap:7px; white-space:nowrap; }
.topbar__item svg{ width:14px; height:14px; opacity:.8; flex:none; }
.topbar__item b{ color:#fff; font-weight:700; }
.topbar__sep{ width:1px; height:14px; background:rgba(255,255,255,.16); }
@media (max-width:1040px){ .topbar__item.hide-md, .topbar__sep.hide-md{ display:none; } }
@media (max-width:820px){ .topbar__item.hide-sm, .topbar__sep.hide-sm{ display:none; } }

/* ============================================================
   Header
   ============================================================ */
.header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line);
}
.header .wrap{ display:flex; align-items:center; gap:26px; height:74px; }

/* Wordmark */
/* Logo oficial (SVG) — fijo, no cambia con los tweaks */
.logo{ display:flex; align-items:center; gap:0; cursor:pointer; flex:none; }
.logo__img{ height:38px; width:auto; display:block; }
.logo__img--light{ filter:brightness(0) invert(1); }
.logo__txt{
  /* El logo es fijo: nunca cambia con los tweaks de tipografía */
  font-family:'Lato', system-ui, sans-serif; font-weight:900; font-size:25px;
  letter-spacing:-.03em; color:#2889b8; display:flex; align-items:center;
}
.logo__txt .a{ color:var(--blue); }
.wheel{ width:22px; height:22px; margin:0 1px; position:relative; top:1px; }

.header__nav{ display:flex; align-items:center; gap:4px; margin-left:6px; }
.navlink{
  font-size:14.5px; font-weight:500; color:var(--ink-2);
  padding:9px 13px; border-radius:9px; cursor:pointer; white-space:nowrap;
  transition:background .15s,color .15s;
}
.navlink:hover{ background:var(--line-2); color:var(--ink); }
.navlink--muted{ color:#9aa3ab; cursor:default; }
.navlink--muted:hover{ background:transparent; color:#9aa3ab; }
.navlink .soon{ font-size:10px; font-weight:700; color:var(--gray); background:var(--line-2); padding:2px 6px; border-radius:99px; margin-left:6px; vertical-align:middle; }

.header__right{ margin-left:auto; display:flex; align-items:center; gap:14px; }

/* Brand switch: Ocasión | Alquiler ↗ — same brand, two pillars */
.brandswitch{
  display:flex; align-items:center; background:var(--paper); border:1px solid var(--line);
  border-radius:99px; padding:3px; gap:2px;
}
.brandswitch__seg{
  display:flex; align-items:center; gap:7px; padding:7px 14px; border-radius:99px;
  font-size:13.5px; font-weight:700; letter-spacing:.005em; cursor:pointer; white-space:nowrap;
  color:var(--gray); transition:.15s;
}
.brandswitch__seg .sub{ font-weight:500; color:var(--gray); }
.brandswitch__seg.is-active{ background:var(--blue); color:#fff; box-shadow:0 1px 2px rgba(31,110,148,.4); }
.brandswitch__seg.is-active .sub{ color:rgba(255,255,255,.85); }
.brandswitch__seg.link:hover{ background:#fff; color:var(--ink); }
.brandswitch__seg.link:hover .arrow{ transform:translate(2px,-2px); }
.brandswitch__seg .arrow{ transition:transform .15s; opacity:.7; }
@media (max-width:1080px){ .brandswitch__seg .sub{ display:none; } }

/* ============================================================
   HERO — dark, leverages the black-photo world
   ============================================================ */
.hero{ position:relative; background:var(--noir); color:var(--on-dark); overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(40,137,184,.30), transparent 55%),
    radial-gradient(80% 70% at 12% 100%, rgba(40,137,184,.10), transparent 60%);
  pointer-events:none;
}
.hero .wrap{ position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding:74px 32px 78px; }
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue);
  background:rgba(40,137,184,.12); border:1px solid rgba(40,137,184,.28);
  padding:7px 13px; border-radius:99px; margin-bottom:22px;
}
.hero__eyebrow .pulse{ width:7px; height:7px; border-radius:99px; background:#36c98a; box-shadow:0 0 0 0 rgba(54,201,138,.6); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(54,201,138,.55);} 70%{box-shadow:0 0 0 7px rgba(54,201,138,0);} 100%{box-shadow:0 0 0 0 rgba(54,201,138,0);} }
.hero h1{ font-size:clamp(38px,4.6vw,62px); color:#fff; line-height:1.0; }
.hero h1 .accent{ color:var(--blue); }
.hero__lead{ margin:22px 0 0; font-size:18px; line-height:1.6; color:var(--on-dark-2); max-width:30em; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-body); font-weight:700; font-size:15px; letter-spacing:.005em;
  padding:14px 22px; border-radius:var(--radius-sm); border:1px solid transparent;
  cursor:pointer; transition:transform .12s, background .15s, box-shadow .15s, border-color .15s;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--blue); color:#fff; box-shadow:0 6px 18px rgba(40,137,184,.32); }
.btn--primary:hover{ background:var(--blue-dark); }
.btn--ghost-dark{ background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.18); }
.btn--ghost-dark:hover{ background:rgba(255,255,255,.12); }
.btn--lg{ padding:16px 26px; font-size:16px; }
.btn--block{ width:100%; }
.btn--ghost{ background:#fff; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--gray); }

.hero__trust{ display:flex; gap:26px; margin-top:40px; flex-wrap:wrap; }
.hero__trust .t{ display:flex; align-items:center; gap:11px; }
.hero__trust .t svg{ width:21px; height:21px; color:var(--blue); flex:none; }
.hero__trust .t b{ display:block; font-size:14.5px; color:#fff; font-weight:700; line-height:1.2; }
.hero__trust .t span{ font-size:12.5px; color:var(--on-dark-3); }

/* Hero featured photo plate */
.hero__stage{ position:relative; }
.hero__plate{
  position:relative; border-radius:18px; overflow:hidden;
  background:radial-gradient(110% 80% at 50% 18%, #1a1d22 0%, #0c0d10 60%, #060708 100%);
  border:1px solid var(--coal-line); aspect-ratio:4/3.4;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.7);
}
.hero__plate .floor{ position:absolute; left:8%; right:8%; bottom:9%; height:26px; border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.6), transparent); filter:blur(3px); }
.hero__pricetag{
  position:absolute; left:20px; top:20px; z-index:3;
  background:rgba(10,11,13,.6); backdrop-filter:blur(8px); border:1px solid var(--coal-line-2);
  border-radius:12px; padding:11px 15px;
}
.hero__pricetag .k{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-3); font-weight:700; }
.hero__pricetag .v{ font-family:var(--font-head); font-weight:900; font-size:24px; color:#fff; }
.hero__pricetag .m{ font-size:12px; color:var(--blue); font-weight:700; }
.hero__plate-cta{ position:absolute; right:18px; bottom:18px; z-index:3; }

/* image-slot dressed for the dark world */
image-slot{ display:block; }
image-slot::part(frame){ background:transparent; }
image-slot::part(empty){ color:var(--on-dark-3); }
image-slot.on-dark::part(frame){ background:#0b0c0f; }

@media (max-width:920px){
  .hero .wrap{ grid-template-columns:1fr; gap:36px; padding:52px 32px 56px; }
  .hero__stage{ order:-1; }
  .hero__plate{ aspect-ratio:16/11; }
}

/* ============================================================
   LISTING toolbar
   ============================================================ */
.section{ padding:56px 0 90px; }
.listing-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:26px; }
.listing-head h2{ font-size:30px; }
.listing-head .kicker{ font-size:13px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--blue); margin-bottom:8px; }
.listing-head p{ margin:8px 0 0; color:var(--gray); font-size:15px; }

.toolbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 16px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-card); margin-bottom:30px;
}
.toolbar__count{ font-size:14px; color:var(--gray); font-weight:500; }
.toolbar__count b{ color:var(--ink); font-weight:700; }
.toolbar__spacer{ flex:1; }
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:99px;
  border:1px solid var(--line); background:#fff; color:var(--ink-2); font-size:13.5px; font-weight:600;
  cursor:pointer; transition:.14s; white-space:nowrap;
}
.chip:hover{ border-color:var(--blue); color:var(--blue); }
.chip.is-active{ background:var(--blue); border-color:var(--blue); color:#fff; }
.chip .x{ opacity:.7; }
.toolbar__group{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.toolbar__label{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--on-dark-3); margin-right:2px; }
.selectwrap{ position:relative; }
.selectwrap select{
  appearance:none; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--ink);
  padding:9px 34px 9px 13px; border-radius:99px; border:1px solid var(--line); background:#fff; cursor:pointer;
}
.selectwrap::after{ content:""; position:absolute; right:13px; top:50%; width:7px; height:7px; border-right:2px solid var(--gray); border-bottom:2px solid var(--gray); transform:translateY(-65%) rotate(45deg); pointer-events:none; }

/* segmented view toggle (direction is via tweaks, this is grid density quick toggle placeholder) */
.viewseg{ display:flex; gap:2px; background:var(--paper); border:1px solid var(--line); border-radius:99px; padding:3px; }
.viewseg button{ border:0; background:transparent; padding:7px 10px; border-radius:99px; cursor:pointer; color:var(--gray); display:flex; }
.viewseg button.is-active{ background:#fff; color:var(--blue); box-shadow:var(--shadow-card); }
.viewseg svg{ width:16px; height:16px; }

/* ============================================================
   BADGES
   ============================================================ */
.estado{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  letter-spacing:.01em; padding:5px 10px 5px 8px; border-radius:99px; white-space:nowrap;
}
.estado .dot{ width:7px; height:7px; border-radius:99px; flex:none; }
.estado[data-st="como_nueva"]{ background:var(--st-nueva-bg); color:var(--st-nueva-fg); } .estado[data-st="como_nueva"] .dot{ background:var(--st-nueva-dot); }
.estado[data-st="muy_bueno"]{ background:var(--st-muy-bg); color:var(--st-muy-fg); }    .estado[data-st="muy_bueno"] .dot{ background:var(--st-muy-dot); }
.estado[data-st="bueno"]{ background:var(--st-bueno-bg); color:var(--st-bueno-fg); }      .estado[data-st="bueno"] .dot{ background:var(--st-bueno-dot); }
.estado[data-st="usado"]{ background:var(--st-usado-bg); color:var(--st-usado-fg); }      .estado[data-st="usado"] .dot{ background:var(--st-usado-dot); }
/* on dark */
.estado.on-dark{ background:rgba(255,255,255,.08); border:1px solid var(--coal-line-2); }
.estado.on-dark[data-st="como_nueva"]{ color:#54d99a; } .estado.on-dark[data-st="muy_bueno"]{ color:#5cb6e2; }
.estado.on-dark[data-st="bueno"]{ color:#e3b25a; } .estado.on-dark[data-st="usado"]{ color:#aab3bc; }

.pickup{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700;
  letter-spacing:.02em; padding:5px 10px; border-radius:99px;
  background:rgba(40,137,184,.1); color:var(--blue-dark); border:1px solid rgba(40,137,184,.2);
}
.pickup svg{ width:13px; height:13px; }
.pickup.on-dark{ background:rgba(255,255,255,.07); color:#7fc2e4; border-color:var(--coal-line-2); }

.tag-unico{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gray); }
.tag-unico .sq{ width:6px; height:6px; background:var(--blue); border-radius:1px; }

/* ============================================================
   GRID
   ============================================================ */
.grid{ display:grid; gap:24px; }
.grid[data-cols="2"]{ grid-template-columns:repeat(2,1fr); }
.grid[data-cols="3"]{ grid-template-columns:repeat(3,1fr); }
.grid[data-cols="4"]{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1080px){ .grid[data-cols="4"]{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:880px){ .grid[data-cols="3"],.grid[data-cols="4"]{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grid{ grid-template-columns:1fr !important; } }

/* The photo plate — shared "bici sobre negro que flota" */
.plate{
  position:relative; overflow:hidden;
  background:radial-gradient(120% 85% at 50% 14%, #191c21 0%, #0c0e11 58%, #060708 100%);
}
.plate .floor{ position:absolute; left:12%; right:12%; bottom:11%; height:20px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.65), transparent); filter:blur(3px); pointer-events:none; }
.plate .sheen{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 30%); pointer-events:none; }

/* ---------- Card base ---------- */
.card{ cursor:pointer; transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s; position:relative; }
.card:hover{ transform:translateY(-4px); }
.card__photo image-slot{ width:100%; height:100%; }
.card__title{ font-family:var(--font-head); font-weight:800; letter-spacing:-.01em; }
.card__meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.card__price{ font-family:var(--font-head); font-weight:900; }
.card__price .iva{ font-family:var(--font-body); font-size:12px; font-weight:500; color:var(--gray); margin-left:6px; letter-spacing:0; }
.metabit{ font-size:12.5px; color:var(--gray); font-weight:500; display:inline-flex; align-items:center; gap:5px; }
.metabit b{ color:var(--ink-2); font-weight:700; }

/* ===== DIRECTION A · "Vitrina" — dark card, photo melts in ===== */
.dir-vitrina .card{
  background:linear-gradient(180deg,var(--coal) 0%, var(--coal-2) 100%);
  border:1px solid var(--coal-line); border-radius:var(--radius); overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -20px rgba(0,0,0,.7);
}
.dir-vitrina .card:hover{ border-color:var(--coal-line-2); box-shadow:0 1px 2px rgba(0,0,0,.4), 0 26px 56px -22px rgba(0,0,0,.85); }
.dir-vitrina .card__photo{ position:relative; aspect-ratio:4/3; background:transparent; }
.dir-vitrina .card__photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 62%, var(--coal) 100%); pointer-events:none; }
.dir-vitrina .card__topbadges{ position:absolute; top:12px; left:12px; right:12px; display:flex; justify-content:space-between; z-index:4; pointer-events:none; }
.dir-vitrina .card__body{ padding:4px 18px 20px; position:relative; z-index:2; }
.dir-vitrina .card__title{ color:#fff; font-size:18px; margin-bottom:4px; }
.dir-vitrina .card__meta{ margin:9px 0 14px; }
.dir-vitrina .metabit{ color:var(--on-dark-2); } .dir-vitrina .metabit b{ color:#fff; }
.dir-vitrina .card__sep{ height:1px; background:var(--coal-line); margin:0 0 14px; }
.dir-vitrina .card__foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.dir-vitrina .card__price{ color:#fff; font-size:24px; }
.dir-vitrina .card__cta{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; color:#fff;
  background:var(--blue); padding:10px 15px; border-radius:var(--radius-sm); transition:.15s; }
.dir-vitrina .card:hover .card__cta{ background:var(--blue-dark); }

/* ===== DIRECTION B · "Marco taller" — light card, framed black photo ===== */
.dir-marco .card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-card);
}
.dir-marco .card:hover{ box-shadow:0 2px 4px rgba(24,32,39,.05), 0 22px 48px -18px rgba(24,32,39,.22); border-color:#d4dbe1; }
.dir-marco .card__frame{ padding:12px 12px 0; }
.dir-marco .card__photo{ position:relative; aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:transparent; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
.dir-marco .card__topbadges{ position:absolute; top:11px; left:11px; right:11px; display:flex; justify-content:space-between; z-index:4; pointer-events:none; }
.dir-marco .card__body{ padding:15px 18px 20px; }
.dir-marco .card__title{ color:var(--ink); font-size:17.5px; margin-bottom:3px; }
.dir-marco .card__meta{ margin:8px 0 14px; }
.dir-marco .card__sep{ height:1px; background:var(--line-2); margin:0 0 13px; }
.dir-marco .card__foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.dir-marco .card__price{ color:var(--ink); font-size:23px; }
.dir-marco .card__price .now{ color:var(--blue-dark); }
.dir-marco .card__cta{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; color:#fff;
  background:var(--blue); padding:10px 16px; border-radius:var(--radius-sm); transition:.15s; }
.dir-marco .card:hover .card__cta{ background:var(--blue-dark); }

/* ===== DIRECTION C · "Editorial" — full-bleed black, magazine ===== */
.dir-editorial .grid{ gap:18px; }
.dir-editorial .card{
  background:var(--noir); border:1px solid var(--coal-line); border-radius:var(--radius); overflow:hidden;
}
.dir-editorial .card:hover{ border-color:var(--blue); }
.dir-editorial .card__photo{ position:relative; aspect-ratio:1/1; background:transparent; }
.dir-editorial .card__photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,7,8,.05) 40%, rgba(6,7,8,.92) 100%); pointer-events:none; }
.dir-editorial .card__topbadges{ position:absolute; top:14px; left:14px; right:14px; display:flex; justify-content:space-between; z-index:4; pointer-events:none; }
.dir-editorial .card__overlay{ position:absolute; left:0; right:0; bottom:0; padding:18px 18px 17px; z-index:3; }
.dir-editorial .card__type{ font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin-bottom:7px; }
.dir-editorial .card__title{ color:#fff; font-size:20px; line-height:1.05; margin-bottom:11px; }
.dir-editorial .card__rule{ height:1px; background:var(--coal-line-2); margin:0 0 12px; }
.dir-editorial .card__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dir-editorial .card__price{ color:#fff; font-size:23px; }
.dir-editorial .metabit{ color:var(--on-dark-2); } .dir-editorial .metabit b{ color:#fff; }
.dir-editorial .card__cta{ width:38px; height:38px; border-radius:99px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border:1px solid var(--coal-line-2); color:#fff; transition:.15s; }
.dir-editorial .card:hover .card__cta{ background:var(--blue); border-color:var(--blue); transform:translateX(2px); }

/* ============================================================
   DETAIL (ficha)
   ============================================================ */
.detail{ padding:30px 0 96px; }
.breadcrumb{ display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--gray); margin-bottom:26px; }
.breadcrumb a{ cursor:pointer; font-weight:500; } .breadcrumb a:hover{ color:var(--blue); }
.breadcrumb .sep{ opacity:.5; }
.breadcrumb .cur{ color:var(--ink); font-weight:600; }

.detail__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:start; }
@media (max-width:960px){ .detail__grid{ grid-template-columns:1fr; gap:34px; } }

/* gallery */
.gallery__main{ position:relative; border-radius:18px; overflow:hidden; aspect-ratio:4/3;
  background:radial-gradient(120% 85% at 50% 14%, #191c21 0%, #0c0e11 58%, #060708 100%);
  border:1px solid var(--coal-line); box-shadow:0 30px 70px -28px rgba(0,0,0,.6); }
.gallery__main .floor{ position:absolute; left:14%; right:14%; bottom:10%; height:24px; border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.6), transparent); filter:blur(3px); }
.gallery__main image-slot{ width:100%; height:100%; }
.gallery__badges{ position:absolute; top:16px; left:16px; display:flex; gap:8px; z-index:3; }
.gallery__pickup{ position:absolute; top:16px; right:16px; z-index:3; }
.gallery__thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:12px; }
.thumb{ position:relative; aspect-ratio:1/1; border-radius:11px; overflow:hidden; border:1px solid var(--coal-line); cursor:pointer;
  background:radial-gradient(120% 85% at 50% 18%, #17191e, #08090b); transition:border-color .15s; }
.thumb image-slot{ width:100%; height:100%; }
.thumb.is-active{ border-color:var(--blue); box-shadow:0 0 0 2px rgba(40,137,184,.3); }

/* detail info */
.detail__type{ font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:11px; }
.detail h1{ font-size:33px; line-height:1.05; }
.detail__badrow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:16px 0 0; }
.detail__price{ display:flex; align-items:baseline; gap:12px; margin:24px 0 4px; }
.detail__price .now{ font-family:var(--font-head); font-weight:900; font-size:40px; color:var(--ink); letter-spacing:-.02em; }
.detail__price .iva{ font-size:13.5px; color:var(--gray); font-weight:500; }
.detail__unit{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--gray); background:var(--paper); border:1px solid var(--line); padding:6px 12px; border-radius:99px; margin-top:4px; }
.detail__unit b{ color:var(--ink); }
.detail__desc{ color:var(--ink-2); font-size:15.5px; line-height:1.65; margin:22px 0 0; }

/* spec table */
.specs{ margin:26px 0 0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff; }
.specs h3{ font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); padding:14px 18px; border-bottom:1px solid var(--line-2); background:var(--paper); }
.specs__row{ display:grid; grid-template-columns:140px 1fr; gap:16px; padding:13px 18px; border-bottom:1px solid var(--line-2); font-size:14.5px; }
.specs__row:last-child{ border-bottom:0; }
.specs__row .k{ color:var(--gray); display:flex; align-items:center; gap:8px; font-weight:500; }
.specs__row .k svg{ width:16px; height:16px; color:var(--blue); opacity:.85; }
.specs__row .v{ color:var(--ink); font-weight:600; }

/* warranty note */
.warranty{ display:flex; gap:14px; align-items:flex-start; margin:18px 0 0; padding:16px 18px; border-radius:var(--radius);
  background:linear-gradient(180deg,#eef7fb,#e7f2f9); border:1px solid rgba(40,137,184,.2); }
.warranty svg{ width:26px; height:26px; color:var(--blue-dark); flex:none; margin-top:1px; }
.warranty b{ display:block; font-family:var(--font-head); font-weight:800; color:var(--blue-deep); font-size:15px; }
.warranty p{ margin:3px 0 0; font-size:13.5px; color:var(--ink-2); line-height:1.55; }

/* ---------- Reserve block ---------- */
.reserve{ position:sticky; top:96px; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#fff; box-shadow:var(--shadow-pop); }
.reserve__head{ padding:20px 22px 18px; background:var(--noir); color:#fff; position:relative; overflow:hidden; }
.reserve__head::before{ content:""; position:absolute; inset:0; background:radial-gradient(80% 120% at 90% 0%, rgba(40,137,184,.4), transparent 60%); }
.reserve__head .rk{ position:relative; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-2); }
.reserve__head .rp{ position:relative; display:flex; align-items:baseline; gap:10px; margin-top:4px; }
.reserve__head .rp .n{ font-family:var(--font-head); font-weight:900; font-size:30px; }
.reserve__head .rp .iva{ font-size:12px; color:var(--on-dark-2); }
.reserve__head .rfree{ position:relative; display:inline-flex; align-items:center; gap:7px; margin-top:12px; font-size:12.5px; font-weight:600; color:#7fdcae; }
.reserve__head .rfree svg{ width:15px; height:15px; }
.reserve__body{ padding:20px 22px 24px; }
.reserve__note{ font-size:13px; color:var(--gray); line-height:1.5; margin:0 0 16px; }
.field{ margin-bottom:13px; }
.field label{ display:block; font-size:12.5px; font-weight:700; color:var(--ink-2); margin-bottom:5px; letter-spacing:.01em; }
.field label .opt{ color:var(--gray); font-weight:500; }
.field input, .field select, .field textarea{
  width:100%; font-family:inherit; font-size:14.5px; color:var(--ink); background:#fff;
  border:1px solid var(--line); border-radius:10px; padding:11px 13px; transition:border-color .15s, box-shadow .15s;
}
.field textarea{ resize:vertical; min-height:74px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(40,137,184,.14); }
.field.err input, .field.err select{ border-color:#d9534f; box-shadow:0 0 0 3px rgba(217,83,79,.12); }
.field .msg{ font-size:12px; color:#c0392b; margin-top:5px; }
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.reserve__legal{ font-size:11.5px; color:var(--gray); line-height:1.5; margin:12px 0 0; }
.reserve__legal a{ color:var(--blue-dark); text-decoration:underline; }

.reserve__steps{ display:flex; gap:0; margin:2px 0 18px; }
.rstep{ flex:1; text-align:center; position:relative; }
.rstep .n{ width:25px; height:25px; border-radius:99px; background:var(--paper); border:1px solid var(--line); color:var(--gray); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 auto 6px; }
.rstep .l{ font-size:11px; color:var(--gray); font-weight:600; }
.rstep::before{ content:""; position:absolute; top:12px; left:-50%; width:100%; height:1px; background:var(--line); z-index:-1; }
.rstep:first-child::before{ display:none; }
.rstep.on .n{ background:var(--blue); border-color:var(--blue); color:#fff; }
.rstep.on .l{ color:var(--ink); }

/* success state */
.reserve__success{ padding:34px 24px 30px; text-align:center; }
.reserve__success .ok{ width:62px; height:62px; border-radius:99px; background:var(--st-nueva-bg); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.reserve__success .ok svg{ width:30px; height:30px; color:var(--st-nueva-dot); }
.reserve__success h3{ font-size:22px; color:var(--ink); margin-bottom:8px; }
.reserve__success p{ font-size:14px; color:var(--gray); line-height:1.6; margin:0 auto 8px; max-width:30em; }
.reserve__success .ref{ display:inline-block; margin-top:8px; font-family:var(--font-head); font-weight:800; color:var(--blue-dark); background:var(--paper); border:1px dashed var(--blue); padding:8px 16px; border-radius:10px; letter-spacing:.04em; }

/* pickup info card */
.pickcard{ margin-top:14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); padding:16px 18px; }
.pickcard .row{ display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:var(--ink-2); }
.pickcard .row + .row{ margin-top:11px; }
.pickcard svg{ width:18px; height:18px; color:var(--blue); flex:none; margin-top:2px; }
.pickcard b{ color:var(--ink); }

/* trust strip on detail */
.detail__assure{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px; }
.assure{ display:flex; gap:10px; align-items:flex-start; padding:13px; border:1px solid var(--line); border-radius:11px; background:#fff; }
.assure svg{ width:19px; height:19px; color:var(--blue); flex:none; margin-top:1px; }
.assure b{ display:block; font-size:13px; color:var(--ink); font-weight:700; line-height:1.2; }
.assure span{ font-size:11.5px; color:var(--gray); }
@media (max-width:520px){ .detail__assure{ grid-template-columns:1fr; } .field--row{ grid-template-columns:1fr; } }

/* ============================================================
   How it works strip (home)
   ============================================================ */
.how{ background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.how .wrap{ padding:54px 32px; }
.how__head{ text-align:center; margin-bottom:38px; }
.how__head .kicker{ font-size:13px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--blue); }
.how__head h2{ font-size:28px; margin-top:8px; }
.how__head p{ color:var(--gray); margin:10px auto 0; max-width:42em; }
.how__steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:820px){ .how__steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .how__steps{ grid-template-columns:1fr; } }
.howstep{ text-align:left; }
.howstep .ic{ width:46px; height:46px; border-radius:12px; background:rgba(40,137,184,.1); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.howstep .ic svg{ width:23px; height:23px; color:var(--blue-dark); }
.howstep .num{ font-size:11px; font-weight:800; letter-spacing:.1em; color:var(--blue); }
.howstep h4{ font-size:17px; margin:6px 0 6px; color:var(--ink); }
.howstep p{ font-size:13.5px; color:var(--gray); line-height:1.55; margin:0; }

/* ============================================================
   FOOTER — dark, bookends the black world; main-site link cuidado
   ============================================================ */
.footer{ background:var(--noir); color:var(--on-dark-2); }
.footer__cross{ border-bottom:1px solid var(--coal-line); }
.footer__cross .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 32px; flex-wrap:wrap; }
.footer__cross .lead{ display:flex; align-items:center; gap:15px; }
.footer__cross .lead .ic{ width:44px; height:44px; border-radius:12px; background:rgba(40,137,184,.15); border:1px solid rgba(40,137,184,.3); display:flex; align-items:center; justify-content:center; flex:none; }
.footer__cross .lead .ic svg{ width:24px; height:24px; color:#6cb9df; }
.footer__cross .lead b{ font-family:var(--font-head); font-weight:800; color:#fff; font-size:16px; display:block; }
.footer__cross .lead span{ font-size:13px; color:var(--on-dark-2); }
.footer__crossbtn{ display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.06); border:1px solid var(--coal-line-2); color:#fff; padding:12px 19px; border-radius:99px; font-weight:700; font-size:14px; transition:.15s; }
.footer__crossbtn:hover{ background:var(--blue); border-color:var(--blue); }
.footer__crossbtn .arrow{ transition:transform .15s; } .footer__crossbtn:hover .arrow{ transform:translate(2px,-2px); }

.footer__main{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding:52px 32px 40px; }
@media (max-width:820px){ .footer__main{ grid-template-columns:1fr 1fr; gap:34px 24px; } }
@media (max-width:480px){ .footer__main{ grid-template-columns:1fr; } }
.footer__brand .logo__img{ height:40px; }
/* Especificidad > .woocommerce img{height:auto} (0,1,1) → el logo no colapsa */
.header .logo__img{ height:50px; width:auto; }
.footer .footer__brand .logo__img{ height:40px; width:auto; }
.footer__brand p{ font-size:13.5px; color:var(--on-dark-2); line-height:1.6; margin:16px 0 0; max-width:30em; }
.footer__addr{ font-style:normal; font-size:13px; color:var(--on-dark-3); line-height:1.7; margin-top:16px; }
.footcol h5{ font-family:var(--font-head); font-weight:800; color:#fff; font-size:13px; letter-spacing:.06em; text-transform:uppercase; margin:0 0 16px; }
.footcol a{ display:block; font-size:14px; color:var(--on-dark-2); padding:6px 0; transition:color .15s; cursor:pointer; }
.footcol a:hover{ color:#fff; }
.footcol a .ext{ opacity:.5; margin-left:5px; }
.footer__bar{ border-top:1px solid var(--coal-line); }
.footer__bar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 32px; flex-wrap:wrap; font-size:12.5px; color:var(--on-dark-3); }
.footer__bar a{ color:var(--on-dark-2); } .footer__bar a:hover{ color:#fff; }
.footer__bar .legal{ display:flex; gap:18px; flex-wrap:wrap; }

/* ============================================================
   Misc / empty state
   ============================================================ */
.empty-grid{ grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--gray); }
.empty-grid svg{ width:40px; height:40px; opacity:.4; margin-bottom:12px; }
.empty-grid b{ display:block; color:var(--ink); font-family:var(--font-head); font-weight:800; font-size:18px; margin-bottom:4px; }

.fade-in{ animation:fadeup .4s cubic-bezier(.2,.7,.3,1) both; }
@keyframes fadeup{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* scrollbar polish for dark areas left default */


/* ============================================================
   PUENTE WOOCOMMERCE — tema tnr-tienda
   Mapea el markup real de WC al sistema visual "Marco taller".
   ============================================================ */
.site-main{ min-height:60vh; }
.woocommerce-products-header{ margin:0; padding:0; }
.woocommerce-products-header__title{ display:none; }
#bicis, #como-funciona{ scroll-margin-top:120px; }

/* Hero: silueta decorativa centrada en la placa */
.hero__plate{ display:flex; align-items:center; justify-content:center; }
.hero__plate .hero__bikesil{ position:relative; z-index:1; width:46%; height:auto; color:rgba(255,255,255,.16); }

/* Barra de resultado + orden bajo el hero */
.dir-marco .woocommerce-result-count{ color:var(--gray); font-size:14px; margin:0 0 6px; }
.dir-marco .woocommerce-ordering{ margin:0 0 22px; }
.dir-marco .woocommerce-ordering select{ appearance:none; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--ink); padding:9px 34px 9px 13px; border-radius:99px; border:1px solid var(--line); background:#fff; cursor:pointer; }

/* Grid: ul.products → rejilla de tarjetas */
.dir-marco ul.products{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:24px; margin:0; padding:0; list-style:none; }
.dir-marco ul.products::before, .dir-marco ul.products::after{ content:none !important; display:none !important; }
.dir-marco ul.products li.product{ width:auto !important; float:none !important; margin:0 !important; clear:none !important; padding:0 !important; }
.dir-marco ul.products li.product::before{ display:none !important; }

/* La tarjeta es un <a> */
.dir-marco .card{ display:block; color:inherit; text-decoration:none; }
.card__photo .card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; z-index:1; }
.plate__sil{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.18); z-index:1; }
.dir-marco .card__price .now .woocommerce-Price-amount,
.dir-marco .card__price .now bdi{ color:var(--blue-dark); font-family:var(--font-head); font-weight:900; }

/* Paginación */
.woocommerce nav.woocommerce-pagination{ margin-top:34px; text-align:center; }
.woocommerce nav.woocommerce-pagination ul{ display:inline-flex; gap:6px; border:0; list-style:none; padding:0; }
.woocommerce nav.woocommerce-pagination ul li{ border:0; margin:0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{ min-width:40px; height:40px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:10px; color:var(--ink-2); font-weight:700; background:#fff; }
.woocommerce nav.woocommerce-pagination ul li span.current{ background:var(--blue); border-color:var(--blue); color:#fff; }

/* ===== Single product (provisional — Fase 2 lo hará a medida) ===== */
.single-product div.product{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.single-product div.product .woocommerce-product-gallery{ margin:0; }
.single-product div.product .woocommerce-product-gallery__image{ border-radius:var(--radius); overflow:hidden; background:var(--noir); }
.single-product div.product .product_title{ font-size:clamp(1.6rem,3vw,2.2rem); font-weight:900; margin:0 0 10px; }
.single-product div.product p.price,
.single-product div.product .summary .price{ color:var(--blue-dark); font-family:var(--font-head); font-weight:900; font-size:2rem; margin:0 0 18px; }
.single-product .woocommerce-product-details__short-description{ color:var(--ink-2); }
.woocommerce-tabs{ grid-column:1 / -1; margin-top:34px; }
@media (max-width:880px){ .single-product div.product{ grid-template-columns:1fr; gap:26px; } }

/* Botones genéricos (cart/checkout) con la marca */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt{ background:var(--blue); color:#fff; border:0; border-radius:var(--radius-sm); font-family:var(--font-body); font-weight:700; padding:12px 20px; transition:background .15s; }
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover{ background:var(--blue-dark); color:#fff; }
.woocommerce-message, .woocommerce-info, .woocommerce-error{ border-top:3px solid var(--blue); border-radius:10px; }

/* Páginas / entradas estándar */
.page .entry-title, .single .entry-title{ font-size:2rem; font-weight:900; margin:0 0 18px; }
.entry-content{ max-width:760px; line-height:1.7; }

/* ============================================================
   PUENTE FICHA (single product) — tema tnr-tienda
   La mayoría de clases (.detail/.specs/.warranty/.reserve/.field…)
   vienen del sistema visual; aquí encajamos la galería WC + el form.
   ============================================================ */
.single-product .detail.product{ display:block; }   /* anula el grid provisional */
.detail__grid{ grid-template-columns:1.15fr .85fr; }
.detail__left{ display:flex; flex-direction:column; }

/* Galería WC sobre placa oscura */
.detail__gallery{ position:relative; border-radius:18px; overflow:hidden; background:radial-gradient(120% 85% at 50% 14%, #191c21 0%, #0c0e11 58%, #060708 100%); border:1px solid var(--coal-line); box-shadow:0 30px 70px -28px rgba(0,0,0,.6); }
.detail__gallery.is-empty{ aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; }
.detail__gallery .woocommerce-product-gallery{ margin:0 !important; width:100%; float:none !important; }
.detail__gallery .woocommerce-product-gallery__wrapper{ margin:0; }
.detail__gallery .woocommerce-product-gallery__image a,
.detail__gallery .woocommerce-product-gallery__image img{ border-radius:0; }
.detail__gallery .flex-control-thumbs{ margin:10px 0 0; padding:0 10px 10px; }
.gallery__badges{ position:absolute; top:16px; left:16px; display:flex; gap:8px; z-index:4; }
.gallery__pickup{ position:absolute; top:16px; right:16px; z-index:4; }
.gallery__sil{ color:rgba(255,255,255,.16); }

/* Descripción larga bajo la ficha */
.detail__longdesc{ margin-top:26px; }
.detail__longdesc h3{ font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); margin:0 0 12px; }
.detail__longdesc p{ color:var(--ink-2); line-height:1.7; }

/* Formulario de reserva (mu-plugin) encajado en el bloque .reserve */
.reserve__body .tnr-reservar-form{ border:0 !important; background:transparent !important; padding:0 !important; margin:0 !important; }
.reserve__body .tnr-reservar-form h3{ font-family:var(--font-head); font-size:1.05rem; font-weight:800; color:var(--ink); margin:0 0 4px; }
.reserve__body .tnr-reservar-nota{ font-size:13px; color:var(--gray); margin:0 0 14px; }
.reserve__body .tnr-reservar-form p{ margin:0 0 12px; }
.reserve__body .tnr-reservar-form label{ font-size:12.5px; font-weight:700; color:var(--ink-2); }
.reserve__body .tnr-reservar-form input,
.reserve__body .tnr-reservar-form textarea{ width:100%; max-width:100%; margin-top:5px; padding:11px 13px; border:1px solid var(--line); border-radius:10px; font-family:var(--font-body); font-size:14.5px; background:#fff; transition:border-color .15s, box-shadow .15s; }
.reserve__body .tnr-reservar-form input:focus,
.reserve__body .tnr-reservar-form textarea:focus{ outline:0; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
.reserve__body .tnr-reservar-form button{ width:100%; background:var(--blue); color:#fff; border:0; border-radius:var(--radius-sm); font-family:var(--font-body); font-weight:700; font-size:15px; padding:14px 22px; cursor:pointer; transition:background .15s; }
.reserve__body .tnr-reservar-form button:hover{ background:var(--blue-dark); }
.reserve__body .tnr-reserva-ok,
.reserve__body .tnr-reservada,
.reserve__body .tnr-reserva-error{ margin:0; }

@media (max-width:960px){ .reserve{ position:static; } }