/* ÓPTICA FIJA — Páginas legales (staging). Tokens + botón base (Albert Sans, igual que header/tienda).
   Se enqueue solo en las 4 páginas legales. */
.of-legal{
  --of-red:#E02B20; --of-red-dark:#B81F17; --of-black:#000; --of-ink:#1A1A1A; --of-muted:#6B6B6B;
  --of-white:#fff; --of-surface:#F7F6F5; --of-border:#E6E4E1; --of-radius:8px; --of-radius-lg:12px;
  --of-font:'Albert Sans',Helvetica,Arial,sans-serif;
}
.of-legal .of-btn{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--of-font); font-weight:700; font-size:1.0625rem; line-height:1; padding:15px 26px; border-radius:var(--of-radius); background:var(--of-red); color:#fff; border:2px solid var(--of-red); text-decoration:none !important; cursor:pointer; transition:background .2s ease,color .2s ease,border-color .2s ease; }
.of-legal .of-btn:hover, .of-legal .of-btn:focus-visible{ background:#fff; color:var(--of-red); border-color:var(--of-red); }

/* ============================================================
   PÁGINAS LEGALES  (scope .of-legal)
   Aviso legal · Política de cookies · Política de privacidad · Condiciones de envío
   Depende de los tokens de global.css (Outfit + #E02B20). Sin franjas laterales.
   ============================================================ */
.of-legal{ font-family:var(--of-font); color:var(--of-ink); }
.of-legal *{ box-sizing:border-box; }
.of-legal .of-wrap{ max-width:1200px; margin:0 auto; padding-left:20px; padding-right:20px; }
.of-legal h1,.of-legal h2,.of-legal h3{ text-transform:none; margin:0; }
.of-legal p{ margin:0; }
.of-legal strong{ color:var(--of-red); font-weight:600; }   /* resaltado: negrita + rojo de marca */
.of-legal a{ text-decoration:none !important; color:var(--of-red); font-weight:500; }
.of-legal a:hover{ text-decoration:none !important; color:var(--of-red-dark); }

/* ---------- Hero ---------- */
.of-legal-hero{ padding:clamp(56px,9vw,104px) 0 clamp(34px,5vw,52px); background:var(--of-white); }
.of-legal-hero .of-wrap{ max-width:1200px; }
.of-legal-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--of-red); margin-bottom:18px; }
.of-legal-eyebrow::before{ content:""; width:22px; height:2px; background:var(--of-red); }
.of-legal-hero h1{ font-size:clamp(2.1rem,5vw,3.5rem); font-weight:700; line-height:1.06; letter-spacing:-.01em; color:var(--of-black); max-width:18ch; }
.of-legal-lead{ margin:22px 0 0; max-width:70ch; font-size:1.1875rem; line-height:1.6; color:var(--of-muted); font-weight:400; }
.of-legal-lead strong{ color:var(--of-ink); font-weight:600; }
.of-legal-meta{ display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:30px; }
.of-legal-meta span{ display:inline-flex; align-items:center; gap:8px; background:var(--of-surface); border:1px solid var(--of-border); border-radius:999px; padding:8px 16px; font-size:.875rem; font-weight:500; color:var(--of-ink); }
.of-legal-meta span svg{ width:15px; height:15px; color:var(--of-red); flex-shrink:0; }

/* ---------- Cuerpo: TOC sticky + contenido ---------- */
.of-legal-body{ padding:clamp(8px,2vw,20px) 0 clamp(56px,9vw,104px); background:var(--of-white); }
.of-legal-grid{ display:grid; grid-template-columns:268px minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:start; }
@media (max-width:900px){ .of-legal-grid{ grid-template-columns:1fr; gap:24px; } }

/* Índice (TOC) */
.of-legal-toc{ position:sticky; top:24px; align-self:start; }
.of-legal-toc-title{ font-size:.78rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--of-muted); margin-bottom:16px; padding-left:14px; }
.of-legal-toc ol{ list-style:none; margin:0; padding:0; display:grid; gap:2px; border-left:1px solid var(--of-border); }
.of-legal-toc li{ margin:0; }
.of-legal-toc a{ display:block; padding:8px 14px; margin-left:-1px; border-left:2px solid transparent; color:var(--of-muted); font-size:.94rem; font-weight:500; line-height:1.4; transition:color .18s ease, border-color .18s ease; }
.of-legal-toc a:hover{ color:var(--of-ink); text-decoration:none; }
.of-legal-toc a.is-active{ color:var(--of-red); border-left-color:var(--of-red); font-weight:600; }

/* TOC en móvil: desplegable */
.of-legal-toc-m{ display:none; }
@media (max-width:900px){
  .of-legal-toc{ display:none; }
  .of-legal-toc-m{ display:block; margin:0 0 30px; border:1px solid var(--of-border); border-radius:14px; background:var(--of-surface); overflow:hidden; }
  .of-legal-toc-m summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; font-weight:600; font-size:1rem; color:var(--of-ink); }
  .of-legal-toc-m summary::-webkit-details-marker{ display:none; }
  .of-legal-toc-m summary svg{ width:18px; height:18px; color:var(--of-red); transition:transform .25s ease; }
  .of-legal-toc-m[open] summary svg{ transform:rotate(180deg); }
  .of-legal-toc-m ol{ list-style:none; margin:0; padding:4px 8px 12px; display:grid; gap:1px; }
  .of-legal-toc-m a{ display:block; padding:9px 14px; border-radius:8px; color:var(--of-muted); font-size:.95rem; font-weight:500; }
  .of-legal-toc-m a:hover{ background:#fff; color:var(--of-ink); text-decoration:none; }
}

/* Contenido */
.of-legal-content{ min-width:0; }
.of-legal-content > .of-legal-intro{ font-size:1.115rem; line-height:1.75; color:var(--of-ink); background:var(--of-surface); border:1px solid var(--of-border); border-radius:16px; padding:clamp(22px,3vw,30px); }
.of-legal-content > .of-legal-intro p + p{ margin-top:16px; }
.of-legal-content > .of-legal-intro strong{ color:var(--of-ink); font-weight:600; }

.of-legal-sec{ scroll-margin-top:24px; padding-top:clamp(34px,5vw,52px); }
.of-legal-sec:first-of-type{ padding-top:clamp(26px,4vw,40px); }
.of-legal-h2{ display:flex; align-items:flex-start; gap:13px; font-size:clamp(1.35rem,2.6vw,1.7rem); font-weight:700; line-height:1.22; color:var(--of-black); letter-spacing:-.01em; }
.of-legal-h2::before{ content:""; width:12px; height:12px; border-radius:3px; background:var(--of-red); flex-shrink:0; margin-top:.42em; }
.of-legal-h3{ font-size:1.1rem; font-weight:600; color:var(--of-ink); margin:36px 0 0; }
.of-legal-list + .of-legal-h3{ margin-top:38px; }
.of-legal-sec p{ margin:16px 0 0; color:var(--of-muted); font-size:1.0625rem; line-height:1.78; }
.of-legal-sec p:first-of-type{ margin-top:18px; }

/* Listas con punto rojo */
.of-legal-list{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:13px; }
.of-legal-list li{ position:relative; padding-left:28px; color:var(--of-muted); font-size:1.0625rem; line-height:1.7; }
.of-legal-list li::before{ content:""; position:absolute; left:4px; top:.62em; width:8px; height:8px; border-radius:50%; background:var(--of-red); }
.of-legal-list li strong{ color:var(--of-ink); }

/* Cabecera de página SIN hero (p. ej. condiciones de garantía) */
.of-legal-pagehead{ padding-top:clamp(36px,6vw,64px); }
.of-legal-pagehead h1{ font-size:clamp(1.9rem,4.4vw,3rem); font-weight:700; line-height:1.08; letter-spacing:-.01em; color:var(--of-black); max-width:24ch; }
.of-legal-pagehead .of-legal-lead{ margin-top:18px; }

/* Lista numerada de condiciones (número en cuadro rojo) */
.of-legal-olist{ list-style:none; counter-reset:olc; margin:22px 0 0; padding:0; display:grid; gap:16px; }
.of-legal-olist li{ position:relative; counter-increment:olc; padding-left:46px; color:var(--of-muted); font-size:1.0625rem; line-height:1.78; }
.of-legal-olist li::before{ content:counter(olc); position:absolute; left:0; top:.1em; width:30px; height:30px; border-radius:8px; background:var(--of-red); color:#fff; font-weight:700; font-size:.92rem; display:flex; align-items:center; justify-content:center; }
.of-legal-olist li strong{ color:var(--of-ink); }

/* Grid de modelos incluidos (chips) */
.of-legal-models{ display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:8px; margin-top:22px; }
.of-legal-models span{ display:block; padding:11px 15px; background:var(--of-surface); border:1px solid var(--of-border); border-radius:10px; font-size:.92rem; font-weight:600; color:var(--of-ink); line-height:1.3; }

/* Tarjeta de datos (tabla suave de etiquetas/valores) */
.of-legal-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:24px; }
.of-legal-fact{ background:var(--of-surface); border:1px solid var(--of-border); border-radius:14px; padding:20px 22px; }
.of-legal-fact-k{ display:flex; align-items:center; gap:9px; font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--of-red); margin-bottom:8px; }
.of-legal-fact-k svg{ width:15px; height:15px; flex-shrink:0; }
.of-legal-fact-v{ font-size:1.0625rem; font-weight:500; color:var(--of-ink); line-height:1.45; }
.of-legal-fact-v a{ font-weight:500; }

/* Bloque de cierre / contacto */
.of-legal-contact{ margin-top:clamp(40px,6vw,64px); background:#16181D; color:#fff; border-radius:20px; padding:clamp(30px,4vw,46px); }
.of-legal-contact h2{ font-size:clamp(1.3rem,2.6vw,1.75rem); font-weight:700; color:#fff; line-height:1.2; }
.of-legal-contact p{ margin:14px 0 0; max-width:62ch; color:rgba(255,255,255,.78); font-size:1.0625rem; line-height:1.7; }
.of-legal-contact p strong{ color:#fff; font-weight:600; }
.of-legal-contact a{ color:#fff; font-weight:600; }
.of-legal-contact-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
.of-legal-contact .of-btn{ background:var(--of-red) !important; border-color:var(--of-red) !important; color:#fff !important; }
.of-legal-contact .of-btn:hover{ background:#fff !important; color:var(--of-red) !important; border-color:#fff !important; }
.of-legal-contact .of-btn--ghost{ background:transparent !important; border-color:rgba(255,255,255,.4) !important; color:#fff !important; }
.of-legal-contact .of-btn--ghost:hover{ background:#fff !important; color:#16181D !important; border-color:#fff !important; }

/* Aviso de plantilla pendiente de personalizar (solo visible en preview) */
.of-legal-note{ margin-top:18px; font-size:.92rem; color:var(--of-muted); font-style:italic; }

@media (max-width:600px){
  .of-legal-contact-actions{ flex-direction:column; align-items:stretch; }
  .of-legal-contact-actions .of-btn{ justify-content:center; }
}

/* Reveal sobrio (solo si hay JS) — sin animar todo el cuerpo */
.of-js .of-legal-hero .js-reveal > *{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.of-js .of-legal-hero .js-reveal.is-in > *{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .of-js .js-reveal > *{ opacity:1 !important; transform:none !important; transition:none !important; } }