/* Insite — base de diseño única (público + interno + TV).
   Fuentes: Montserrat (títulos) + Inter (texto y datos). Cambiar aquí cambia todo el sitio. */
:root{
  /* Fuentes */
  --f-title:'Montserrat',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
  --f-display:var(--f-title);
  --mono:var(--f-body);
  /* Fondos */
  /* FONDO ÚNICO DEL SITIO: cambiar estas tres líneas cambia el fondo de TODAS las páginas (públicas e internas) */
  --fondo-color:#0a0a0a;
  --fondo-brillo-1:radial-gradient(1200px 500px at 78% -8%, rgba(201,168,76,.07), transparent 60%);   /* dorado, arriba a la derecha */
  --fondo-brillo-2:radial-gradient(700px 400px at 8% 110%, rgba(236,72,153,.05), transparent 60%);    /* rosado, abajo a la izquierda */
  --page-bg:var(--fondo-color);
  --bg:var(--fondo-color); --bg-2:#111111; --card:#181817; --card-sel:#1d1b16; --line:#2c2b28;
  /* Texto */
  --tx:#f5f0e8; --tx-2:#c9c4b8; --tx-3:#9a968c;
  /* Oro */
  --gold:#e8d48b; --gold-2:#c9a84c; --gold-3:#a08030;
  /* Estado */
  --ok:#4ade80; --bad:#f87171; --warn:#fb923c; --info:#60a5fa;
  /* Forma */
  --r-sm:6px; --r:8px; --r-lg:12px; --r-pill:999px;
}

body{font-family:var(--f-body);font-variant-numeric:tabular-nums}
h1,h2,h3,h4,h5,h6,.font-display{font-family:var(--f-title)}
.font-body,.font-sans{font-family:var(--f-body)}
.font-mono,code,kbd,samp,pre{font-family:var(--f-body)}
input,select,textarea,button{font-family:inherit}

/* Botones: misma forma y tipografía en todo el sitio (el tamaño lo define cada pantalla) */
.btn-pegasus,.btn-pegasus-outline,.btn-whatsapp{
  font-family:var(--f-body);font-weight:600;letter-spacing:.04em;text-transform:uppercase;border-radius:var(--r)}
.btn-pegasus.btn-sm,.btn-pegasus-outline.btn-sm{border-radius:var(--r-sm)}

/* Componentes comunes para páginas nuevas */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 20px;
  font-family:var(--f-body);font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase;
  border-radius:var(--r);border:1px solid transparent;cursor:pointer;transition:.2s;text-decoration:none}
.btn-primary{background:linear-gradient(135deg,var(--gold-3),var(--gold-2),var(--gold));color:#0a0a0a}
.btn-primary:hover{box-shadow:0 0 16px rgba(201,168,76,.35);transform:translateY(-1px)}
.btn-secondary{background:transparent;border-color:rgba(201,168,76,.45);color:var(--gold)}
.btn-secondary:hover{background:rgba(201,168,76,.1)}
.btn-ghost{background:transparent;color:var(--tx-2);border-color:var(--line)}
.btn-ghost:hover{color:var(--tx);border-color:var(--tx-3)}
.btn-danger{background:transparent;border-color:rgba(248,113,113,.5);color:var(--bad)}
.btn-danger:hover{background:rgba(248,113,113,.1)}
.btn-lg{min-height:48px;padding:0 28px;font-size:16px}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}

/* ═══════════════════════════════════════════════════════════════════════════
   SISTEMA OLYMPUS 2026 — clases `ol-*` para TODAS las páginas públicas nuevas.
   Referencia viva: la home (resources/views/public/home/index.blade.php).
   Reglas completas: docs/sistema-diseno.md. No usar bordes blancos, cristal ni
   degradados dorados en tarjetas; el dorado solo en botones, etiquetas y hover.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --ol-bg:var(--fondo-color);      /* fondo general: sale de --fondo-color (ver body.fondo-olympus) */
  --ol-panel-1:#242424; --ol-panel-2:#1b1b1b;   /* contenedor: de arriba a abajo */
  --ol-ink:#ece8e2;                /* texto: blanco suave */
  --ol-muted:#b9b5af;              /* texto secundario */
  --ol-faint:#8f8b82;              /* fechas, notas */
  --ol-gold:#e8d48b;               /* dorado de texto y hover */
  --ol-gold-1:#f0dc9a; --ol-gold-2:#c9a84c;     /* degradado SOLO del botón */
  --ol-ok:#4ade80; --ol-live:#e5534b;           /* en línea (verde) / EN VIVO (rojo) */
  --ol-r-panel:28px; --ol-r-card:20px; --ol-r-photo:12px; --ol-r-btn:10px;
  --ol-shadow-panel:0 30px 60px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.07);
  --ol-shadow-photo:0 12px 24px -14px rgba(0,0,0,.6);
}

/* Contenedor: 1280 con 20/32/48 px a los lados (igual que el encabezado y el hero) */
.ol-wrap{max-width:1280px;margin:0 auto;box-sizing:border-box;padding:0 20px;min-width:0}
@media (min-width:640px){.ol-wrap{padding:0 32px}}
@media (min-width:1024px){.ol-wrap{padding:0 48px}}
.ol-sec{padding:44px 0}                               /* aire entre contenedores: ~56 px, nunca 190 */

/* Títulos de sección */
.ol-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.ol-eyebrow{margin-bottom:12px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ol-gold)}
.ol-h2{margin:0;font-family:var(--f-title);font-weight:800;font-size:clamp(30px,3.6vw,44px);line-height:1;letter-spacing:-.015em;text-transform:uppercase;color:var(--ol-ink)}
.ol-note{font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--ol-muted)}   /* nota pequeña al lado del título */

/* Contenedores */
.ol-panel{padding:22px 28px;border-radius:var(--ol-r-panel);background:linear-gradient(180deg,var(--ol-panel-1),var(--ol-panel-2));box-shadow:var(--ol-shadow-panel)}
.ol-box{padding:56px;border-radius:var(--ol-r-panel);background:linear-gradient(180deg,var(--ol-panel-1),var(--ol-panel-2));box-shadow:var(--ol-shadow-panel)}
.ol-card{padding:28px 26px;border-radius:var(--ol-r-card);background:linear-gradient(180deg,var(--ol-panel-1),var(--ol-panel-2));box-shadow:var(--ol-shadow-panel);min-width:0;transition:transform .25s}
.ol-card:hover{transform:translateY(-3px)}
@media (max-width:620px){.ol-panel{padding:14px;border-radius:22px}.ol-box{padding:28px 20px;border-radius:22px}.ol-card{padding:20px 18px;border-radius:18px}}

/* Botones: dorado lleno y letra oscura (principal) / borde dorado suave (secundario) */
.ol-btn,.ol-btn:visited{display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-height:40px;padding:0 20px;border-radius:var(--ol-r-btn);border:0;
  font-family:var(--f-body);font-size:13px;font-weight:600;letter-spacing:.06em;line-height:1;text-transform:uppercase;white-space:nowrap;text-decoration:none;cursor:pointer;
  color:#0a0a0a;background:linear-gradient(135deg,var(--ol-gold-1),var(--ol-gold-2));box-shadow:0 6px 18px rgba(201,168,76,.18);transition:background .15s,transform .15s}
.ol-btn:hover{color:#0a0a0a;background:linear-gradient(135deg,#ffe9ae,#d8b75c)}
.ol-btn-lg{min-height:48px;padding:0 28px;font-size:14px}
.ol-btn-s,.ol-btn-s:visited{color:var(--ol-gold);background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.4);box-shadow:none}
.ol-btn-s:hover{color:var(--ol-gold-1);background:rgba(201,168,76,.16);border-color:rgba(201,168,76,.75)}
.ol-link{font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--ol-muted);text-decoration:none;transition:color .15s}   /* enlace discreto ("Ver todos…") */
.ol-link:hover{color:var(--ol-ink);text-decoration:underline;text-underline-offset:4px}

/* Etiquetas sobre fotos: texto suelto con sombra, sin cajas (rank, nombre) */
.ol-onphoto{color:#f5f1ea;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.ol-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:6px;background:rgba(16,16,16,.8);font-size:12px;font-weight:600;letter-spacing:.08em;color:var(--ol-ink)}
.ol-live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ol-ok);animation:olPul 1.6s ease-out infinite}   /* punto EN LÍNEA: verde */
@keyframes olPul{0%{box-shadow:0 0 0 0 rgba(74,222,128,.65)}100%{box-shadow:0 0 0 7px rgba(74,222,128,0)}}

/* Carrusel: tarjetas COMPLETAS (nunca una cortada). 4 por vista; flechas de a una página */
.ol-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 42px)/4);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 0}
.ol-row::-webkit-scrollbar{display:none}
@media (max-width:1100px){.ol-row{grid-auto-columns:calc((100% - 28px)/3)}}
@media (max-width:820px){.ol-row{grid-auto-columns:calc((100% - 14px)/2)}}
@media (max-width:620px){.ol-row{grid-auto-columns:200px;gap:10px}}   /* celular: se desliza con el dedo, una asoma */
.ol-photo{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--ol-r-photo);background:#181818;scroll-snap-align:start;box-shadow:var(--ol-shadow-photo);transition:transform .25s}
.ol-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ol-photo:hover{transform:translateY(-4px)}.ol-photo:hover img{transform:scale(1.05)}
.ol-arrow{position:absolute;top:50%;margin-top:-24px;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:0;border-radius:50%;background:var(--ol-ink);color:#101010;font-size:20px;cursor:pointer;box-shadow:0 10px 22px -8px rgba(0,0,0,.7)}
.ol-arrow[hidden]{display:none}.ol-arrow-prev{left:10px}.ol-arrow-next{right:10px}
@media (hover:none){.ol-arrow{display:none}}

/* Baldosa de logo (plataformas, aliados) */
.ol-tile{display:flex;align-items:center;justify-content:center;height:112px;padding:0 18px;border-radius:16px;background:rgba(236,232,226,.04);transition:background .25s,transform .25s}
.ol-tile:hover{background:rgba(236,232,226,.08);transform:translateY(-3px)}
.ol-tile img{display:block;width:auto;height:auto;max-width:100%;max-height:44px;object-fit:contain}

/* Regla de hover: lo dorado es EFECTO, no estado por defecto (línea, número, nombre) */
.ol-hover-gold{transition:color .2s,border-color .25s}.ol-hover-gold:hover{color:var(--ol-gold);border-color:var(--ol-gold-2)}

/* ═══ FONDO ÚNICO DE TODO EL SITIO ═══
   Cada página pone class="fondo-olympus" en su <body> y NO define fondo propio. Se cambia arriba, en las variables --fondo-*. */
body.fondo-olympus{
  background-color:var(--fondo-color);
  background-image:var(--fondo-brillo-1),var(--fondo-brillo-2);
  background-attachment:fixed;
}