/* rotademesas.es · estilos
   Estilo "corporativo con efectos": azul marino y oro, tarjetas, secciones con fondo alterno,
   y tres efectos dibujados en <canvas> (ver js/efectos.js).
   Los nombres de clase c1-/c1b- vienen de los prototipos (C1 = corporativa, C1b = sus efectos).
   Tema oscuro: por el sistema (:root:not([data-theme="light"])) o elegido ([data-theme="dark"]). */

/* ---------- Fuentes (alojadas en esta web) y base ---------- */
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400 700; font-display: swap; src: url(../fuentes/ibm-plex-sans.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url(../fuentes/ibm-plex-mono-500.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-display: swap; src: url(../fuentes/ibm-plex-mono-600.woff2) format('woff2'); }

:root {
  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
img, video { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }
.lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Botón de tema (igual en todos) */
.tema { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 1px solid var(--linea-fuerte); border-radius: 50%; background: transparent; color: var(--texto); cursor: pointer; flex: none; }
.tema svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tema__sol { display: none; }
:root[data-theme="dark"] .tema__sol { display: block; }
:root[data-theme="dark"] .tema__luna { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tema__sol { display: block; }
  :root:not([data-theme="light"]) .tema__luna { display: none; }
}

/* ---------- Colores, estructura y secciones ---------- */
:root {
  --fondo: #ffffff; --fondo-2: #f3f6fb; --panel: #ffffff;
  --texto: #14213d; --suave: #55617a; --linea: #e2e7f0; --linea-fuerte: #c6cfdd;
  --acento: #1652b8; --acento-texto: #fff; --acento-suave: #e3ecfb;
  --aviso: #b25f00; --aviso-suave: #fbecd6; --error: #c21f1f; --oro: #c08a1e;
  --azul-osc: #0f2a5c; --radio: 8px; color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #0d1424; --fondo-2: #111a2e; --panel: #152038;
    --texto: #e8edf7; --suave: #9fabc3; --linea: #23304d; --linea-fuerte: #34446a;
    --acento: #5b9bff; --acento-texto: #06142e; --acento-suave: #18294a;
    --aviso: #ffb547; --aviso-suave: #2e220d; --error: #ff6b63; --oro: #e7b44f;
    --azul-osc: #0a1530; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #0d1424; --fondo-2: #111a2e; --panel: #152038;
  --texto: #e8edf7; --suave: #9fabc3; --linea: #23304d; --linea-fuerte: #34446a;
  --acento: #5b9bff; --acento-texto: #06142e; --acento-suave: #18294a;
  --aviso: #ffb547; --aviso-suave: #2e220d; --error: #ff6b63; --oro: #e7b44f;
  --azul-osc: #0a1530; color-scheme: dark;
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; margin: 0; }
.c1-ancho { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .c1-ancho { padding: 0 28px; } }

.c1-superior { background: var(--azul-osc); color: #cdd8ee; font-size: 13px; }
.c1-superior__fila { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; padding-bottom: 8px; }
.c1-superior a { color: #fff; text-decoration: none; }
@media (max-width: 600px) { .c1-superior span { display: none; } }

.c1-cab { position: sticky; top: 0; z-index: 10; background: var(--fondo); border-bottom: 1px solid var(--linea); box-shadow: 0 2px 10px -6px rgba(15, 42, 92, .2); }
.c1-cab__fila { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.c1-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; text-decoration: none; color: var(--texto); }
.c1-logo__marca { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--acento); color: var(--acento-texto); font-size: 18px; }
.c1-menu { display: none; gap: 26px; margin-left: auto; font-size: 15px; font-weight: 500; }
.c1-menu a { text-decoration: none; color: var(--suave); }
.c1-menu a:hover { color: var(--acento); }
.c1-cab__acc { display: flex; gap: 10px; align-items: center; margin-left: auto; }
@media (min-width: 960px) { .c1-menu { display: flex; } .c1-cab__acc { margin-left: 8px; } }
@media (max-width: 520px) { .c1-cab__acc .c1-btn { display: none; } }

.c1-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border-radius: 6px; background: var(--acento); color: var(--acento-texto); text-decoration: none; font-weight: 600; font-size: 15px; border: 1px solid var(--acento); cursor: pointer; font-family: inherit; }
.c1-btn:hover { filter: brightness(1.08); }
.c1-btn--sec { background: transparent; color: var(--acento); }
.c1-btn--grande { min-height: 50px; padding: 0 24px; font-size: 16px; }

.c1-hero { background: linear-gradient(180deg, var(--fondo-2), var(--fondo)); padding: 56px 0 64px; }
.c1-hero__rejilla { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1000px) { .c1-hero { padding: 80px 0 96px; } .c1-hero__rejilla { grid-template-columns: 1fr 1.1fr; gap: 56px; } }
.c1-hero__texto { display: grid; gap: 20px; }
.c1-pildora { justify-self: start; display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--acento-suave); color: var(--acento); font-size: 13px; font-weight: 600; }
.c1-hero h1 { font-size: clamp(34px, 5vw, 54px); }
.c1-hero p { font-size: 18px; color: var(--suave); }
.c1-botones { display: flex; gap: 12px; flex-wrap: wrap; }
.c1-confianza { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; color: var(--suave); }
.c1-confianza li::before { content: '✓'; color: #1f9d55; font-weight: 700; margin-right: 8px; }


.c1-pilares { padding: 48px 0; border-bottom: 1px solid var(--linea); }
.c1-pilares__rejilla { display: grid; gap: 28px; }
@media (min-width: 800px) { .c1-pilares__rejilla { grid-template-columns: repeat(3, 1fr); } }
.c1-pilar { display: grid; gap: 10px; }
.c1-pilar svg { width: 44px; height: 44px; padding: 10px; border-radius: 10px; background: var(--acento-suave); fill: none; stroke: var(--acento); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.c1-pilar h3 { font-size: 20px; }
.c1-pilar p { color: var(--suave); }

.c1-seccion { padding: 72px 0; }
@media (min-width: 900px) { .c1-seccion { padding: 96px 0; } }
.c1-seccion--gris { background: var(--fondo-2); }
.c1-titulo { display: grid; gap: 14px; justify-items: center; text-align: center; margin-bottom: 44px; }
.c1-titulo h2 { font-size: clamp(28px, 3.6vw, 40px); max-width: 20em; }

.c1-tarjetas { display: grid; gap: 22px; }
@media (min-width: 900px) { .c1-tarjetas { grid-template-columns: repeat(3, 1fr); } }
.c1-tarjeta { border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; background: var(--panel); box-shadow: 0 10px 30px -20px rgba(15, 42, 92, .35); display: flex; flex-direction: column; }
.c1-tarjeta__img { aspect-ratio: 16 / 9; background: var(--fondo-2); overflow: hidden; }
.c1-tarjeta__img img { width: 100%; height: 100%; object-fit: cover; }
.c1-tarjeta__img--mesas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 18px; background: linear-gradient(135deg, var(--acento), var(--azul-osc)); }
.c1-tarjeta__img--mesas span { display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.14); color: #fff; font: 600 14px/1 var(--mono); }
.c1-tarjeta__img--medida { display: grid; place-items: center; background: linear-gradient(135deg, var(--oro), #8a5d0e); }
.c1-tarjeta__img--medida span { font: 600 56px/1 var(--mono); color: #fff; }
.c1-tarjeta__cuerpo { padding: 22px; display: grid; gap: 10px; align-content: start; flex: 1; }
.c1-tarjeta__cuerpo h3 { font-size: 21px; }
.c1-tarjeta__cuerpo p { color: var(--suave); font-size: 15px; }
.c1-tarjeta__cuerpo a { color: var(--acento); font-weight: 600; text-decoration: none; margin-top: auto; }
.c1-nuevo { color: var(--aviso) !important; font-weight: 600; }

.c1-proceso { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; counter-reset: p; }
@media (min-width: 800px) { .c1-proceso { grid-template-columns: repeat(4, 1fr); position: relative; } .c1-proceso::before { content: ''; position: absolute; top: 26px; left: 12%; right: 12%; height: 2px; background: var(--linea-fuerte); } }
.c1-proceso li { display: grid; gap: 8px; justify-items: center; text-align: center; position: relative; }
.c1-proceso span { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--acento); color: var(--acento-texto); font-weight: 700; font-size: 20px; box-shadow: 0 0 0 6px var(--fondo-2); }
.c1-proceso h3 { font-size: 18px; margin-top: 6px; }
.c1-proceso p { color: var(--suave); font-size: 15px; max-width: 16em; }

.c1-estrecho { max-width: 820px; }
.c1-pregunta { border: 1px solid var(--linea); border-radius: 10px; margin-bottom: 12px; background: var(--panel); }
.c1-pregunta summary { cursor: pointer; padding: 18px 20px; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.c1-pregunta summary::-webkit-details-marker { display: none; }
.c1-pregunta summary::after { content: '+'; color: var(--acento); font-size: 22px; line-height: 1; }
.c1-pregunta[open] summary::after { content: '−'; }
.c1-pregunta p { padding: 0 20px 18px; color: var(--suave); }

.c1-seccion--azul { background: var(--azul-osc); color: #fff; }
.c1-contacto { display: grid; gap: 36px; }
@media (min-width: 900px) { .c1-contacto { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } }
.c1-contacto h2 { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 14px; }
.c1-contacto p { color: #c9d4ea; font-size: 17px; }
.c1-contacto__correo { margin-top: 18px; font-weight: 700; color: #fff !important; }
.c1-form { display: grid; gap: 14px; padding: 24px; border-radius: 12px; background: var(--panel); color: var(--texto); }
.c1-form label { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
.c1-form input, .c1-form textarea { font: inherit; font-weight: 400; font-size: 16px; padding: 12px 14px; border: 1px solid var(--linea-fuerte); border-radius: 6px; background: var(--fondo); color: var(--texto); }
.c1-form small { color: var(--suave); }

.c1-pie { background: var(--fondo-2); border-top: 1px solid var(--linea); padding: 48px 0 24px; font-size: 14px; }
.c1-pie__rejilla { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.c1-pie__rejilla div { display: grid; gap: 8px; align-content: start; }
.c1-pie h4 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
.c1-pie a { text-decoration: none; color: var(--texto); }
.c1-pie p { color: var(--suave); }
.c1-pie__legal { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--linea); color: var(--suave); font-size: 13px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; }
.c1-pie__legal nav { display: flex; gap: 20px; }
.c1-pie__legal a { color: var(--suave); }
.c1-pie__legal a:hover, .c1-pie__legal a[aria-current] { color: var(--acento); }

/* ---------- Efectos: isométrico, ruleta wireframe y partículas ---------- */

/* Portada: sala isométrica en lugar del portátil */
.c1b-iso { margin: 0; min-width: 0; display: grid; gap: 10px; background: var(--panel); border: 1px solid var(--linea); border-radius: 16px; padding: 12px; box-shadow: 0 30px 60px -34px rgba(15, 42, 92, .45); }
.c1b-iso canvas { width: 100%; height: 340px; }
@media (min-width: 1000px) { .c1b-iso canvas { height: 400px; } }
.c1b-iso figcaption { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--suave); padding: 0 6px 4px; }
.c1b-punto { width: 8px; height: 8px; border-radius: 50%; background: #1f9d55; box-shadow: 0 0 0 3px rgba(31, 157, 85, .2); flex: none; }

/* Banda oscura con la ruleta de alambre en oro */
.c1b-banda { background: var(--azul-osc); color: #fff; padding: 64px 0; --acento: #e7b44f; --aviso: #ff8f5a; --linea-fuerte: rgba(255,255,255,.14); }
.c1b-banda__rejilla { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .c1b-banda { padding: 80px 0; } .c1b-banda__rejilla { grid-template-columns: 1fr 1fr; gap: 48px; } }
.c1b-banda__texto { display: grid; gap: 16px; }
.c1b-banda h2 { font-size: clamp(26px, 3.2vw, 36px); }
.c1b-banda p { color: #c9d4ea; font-size: 17px; }
.c1b-pildora { background: rgba(231, 180, 79, .16); color: #e7b44f; }
.c1b-pista { font-size: 13px !important; color: #e7b44f !important; }
.c1b-wire { width: 100%; height: 340px; cursor: grab; touch-action: none; }
.c1b-wire:active { cursor: grabbing; }

/* Contacto: partículas claras sobre el azul */
.c1b-particulas { width: 100%; height: 150px; margin-bottom: 8px; cursor: pointer; --acento: #ffffff; --aviso: #e7b44f; }

/* ---------- Saltar al contenido (teclado) ---------- */
.saltar { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--acento); color: var(--acento-texto); padding: 8px 12px; border-radius: 6px; }
.saltar:focus { left: 8px; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Logo con el favicon ---------- */
.c1-logo img { width: 34px; height: 34px; border-radius: 8px; }

/* ---------- Vídeo de Control de Mesa ---------- */
.w-video { display: grid; gap: 28px; align-items: center; }
@media (min-width: 960px) { .w-video { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; } }
.w-video__texto { display: grid; gap: 14px; }
.w-video__texto .c1-pildora { justify-self: start; }
.w-video__texto h2 { font-size: clamp(28px, 3.4vw, 38px); }
.w-video__texto p { color: var(--suave); font-size: 17px; }
.w-video__marco { display: grid; gap: 8px; min-width: 0; }
.w-video__marco video { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 12px; border: 1px solid var(--linea); background: #0b2b1c; box-shadow: 0 30px 60px -34px rgba(15, 42, 92, .45); }
.w-video__pie { font: 500 12px/1.3 var(--mono); color: var(--suave); }

/* ---------- Páginas legales (aviso-legal.html, privacidad.html) ---------- */
.w-legal { display: grid; gap: 14px; }
.w-legal h1 { font-size: clamp(32px, 4.4vw, 44px); }
.w-legal h2 { font-size: 21px; margin-top: 22px; }
.w-legal p, .w-legal li { color: var(--suave); }
.w-legal strong { color: var(--texto); }
.w-legal a:not(.c1-btn) { color: var(--acento); }
.w-legal ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.w-legal__fecha { font: 500 13px/1.3 var(--mono); }
.w-legal__datos { margin: 0; padding: 18px 20px; border: 1px solid var(--linea); border-radius: 10px; background: var(--fondo-2); display: grid; gap: 4px 20px; }
@media (min-width: 600px) { .w-legal__datos { grid-template-columns: max-content 1fr; } }
.w-legal__datos dt { font-weight: 600; font-size: 14px; }
.w-legal__datos dd { margin: 0 0 8px; color: var(--suave); }
@media (min-width: 600px) { .w-legal__datos dd { margin: 0; } }

/* ---------- Página 404 ---------- */
.w-404 { justify-items: start; min-height: calc(100vh - 260px); align-content: center; }
.w-404 .c1-botones { margin-top: 10px; }
.c1-pie__legal:only-child { margin-top: 0; padding-top: 0; border-top: 0; }
.c1-logo + .c1-cab__acc { margin-left: auto !important; }

/* ---------- Aviso de la primera visita junto al botón de tema (lo crea js/web.js) ---------- */
.c1-cab__acc { position: relative; }
.aviso-tema { position: absolute; top: calc(100% + 14px); right: 0; z-index: 20; width: min(320px, calc(100vw - 32px)); padding: 16px 18px; border-radius: 12px; background: var(--panel); color: var(--texto); border: 1px solid var(--linea-fuerte); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55); font-size: 15px; line-height: 1.45; display: grid; gap: 12px; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .25s, transform .25s; }
.aviso-tema::before { content: ''; position: absolute; top: -7px; right: var(--flecha, 16px); width: 12px; height: 12px; background: var(--panel); border-left: 1px solid var(--linea-fuerte); border-top: 1px solid var(--linea-fuerte); transform: rotate(45deg); }
.aviso-tema--visible { opacity: 1; transform: none; pointer-events: auto; }
.aviso-tema strong { color: var(--oro); }
.aviso-tema__botones { display: flex; gap: 8px; justify-content: flex-end; }
.aviso-tema button { font: 600 14px/1 var(--sans); min-height: 36px; padding: 0 14px; border-radius: 6px; cursor: pointer; border: 1px solid var(--acento); }
.aviso-tema__claro { background: transparent; color: var(--acento); }
.aviso-tema__ok { background: var(--acento); color: var(--acento-texto); }
@media (prefers-reduced-motion: reduce) { .aviso-tema { transition: none; transform: none; } }