/* ===================================================================== web.css: piezas de las páginas públicas con tema claro/oscuro (inicio, soporte, legal y 404). Acceso y la demo de la app no lo cargan. ===================================================================== */ /* ---------- Colores del tema ---------- Claro por defecto. El oscuro se aplica si el sistema lo pide o si la persona lo elige con el botón (js/tema.js pone data-tema en ). */ :root{ color-scheme:light; --fondo:#F7F6F3; /* fondo de la página */ --tinta:#17181A; /* texto principal */ --tinta-rgb:23,24,26; /* el mismo color en RGB, para transparencias: rgba(var(--tinta-rgb),.6) */ --tarjeta:#fff; /* fondo de tarjetas */ --campo:#FCFCFB; /* fondo de campos de formulario */ --tarjeta-ambar:#FDF6EA; /* tarjeta con tinte ámbar */ --hueco-imagen:#EDEDEA; /* color mientras carga una imagen */ --banda-oscura:#17181A; /* bandas y tarjetas oscuras */ --boton-fondo:#17181A; --boton-texto:#fff; --boton-hover:#2B2E33; --segmento-activo:#fff; /* opción elegida de un selector segmentado */ --cristal:rgba(247,246,243,.72); --cristal-denso:rgba(247,246,243,.94); --ambar-texto:#8A5A0B; /* ámbar oscuro legible sobre fondo claro */ --ok-texto:#248A3D; --error-texto:#C1271B; --logo-barra-1:#17181A; --logo-barra-2:#17181A; --logo-barra-3:#E8A13A; --filo-cristal:rgba(255,255,255,.7); /* línea de luz en el borde del cristal */ } /* Tema oscuro: los mismos valores en dos sitios (elegido a mano / pedido por el sistema). */ :root[data-tema=oscuro]{ color-scheme:dark; --fondo:#111214; --tinta:#ECEBE7; --tinta-rgb:236,235,231; --tarjeta:#1A1B1E; --campo:#16171A; --tarjeta-ambar:#231D13; --hueco-imagen:#222326; --banda-oscura:#1D1E21; --boton-fondo:#ECEBE7; --boton-texto:#17181A; --boton-hover:#fff; --segmento-activo:#2C2E32; --cristal:rgba(17,18,20,.7); --cristal-denso:rgba(26,27,30,.94); --ambar-texto:#F0B457; --ok-texto:#30D158; --error-texto:#FF6961; --logo-barra-1:#8C9096; --logo-barra-2:#C9CDD2; --logo-barra-3:#F0B457; --filo-cristal:rgba(255,255,255,.06); } @media (prefers-color-scheme:dark){ :root:not([data-tema=claro]){ color-scheme:dark; --fondo:#111214; --tinta:#ECEBE7; --tinta-rgb:236,235,231; --tarjeta:#1A1B1E; --campo:#16171A; --tarjeta-ambar:#231D13; --hueco-imagen:#222326; --banda-oscura:#1D1E21; --boton-fondo:#ECEBE7; --boton-texto:#17181A; --boton-hover:#fff; --segmento-activo:#2C2E32; --cristal:rgba(17,18,20,.7); --cristal-denso:rgba(26,27,30,.94); --ambar-texto:#F0B457; --ok-texto:#30D158; --error-texto:#FF6961; --logo-barra-1:#8C9096; --logo-barra-2:#C9CDD2; --logo-barra-3:#F0B457; --filo-cristal:rgba(255,255,255,.06); } } /* ---------- Página ---------- */ html{scroll-behavior:smooth;scrollbar-color:rgba(var(--tinta-rgb),.28) transparent} body{margin:0;background:var(--fondo);color:var(--tinta); font-family:'Hanken Grotesk',-apple-system,system-ui,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased} a{color:var(--ambar-texto);text-decoration:none} a:hover{color:var(--tinta)} .sin-desbordar{max-width:100%;overflow-x:hidden} /* evita scroll lateral por animaciones */ /* ---------- Logo (isotipo de tres barras + "Sumora") ---------- */ .logo{display:flex;align-items:center;gap:9px;color:var(--tinta)} .logo:hover{color:var(--tinta)} .logo-isotipo{flex:none} .logo-isotipo path{fill:none;stroke-width:7.5;stroke-linecap:round} .logo-isotipo .barra-1{stroke:var(--logo-barra-1)} .logo-isotipo .barra-2{stroke:var(--logo-barra-2)} .logo-isotipo .barra-3{stroke:var(--logo-barra-3)} .logo-texto{font-family:'Archivo',sans-serif;font-size:20px;letter-spacing:-.6px;font-weight:500} .logo-texto b{font-weight:700} /* ---------- Botón de tema claro/oscuro: luna en claro, sol en oscuro ---------- */ .boton-tema{flex:none;width:44px;height:44px;border:none;border-radius:999px;background:none;color:var(--tinta);cursor:pointer;display:grid;place-items:center} .boton-tema:hover{background:rgba(var(--tinta-rgb),.07)} .boton-tema .icono-sol{display:none} :root[data-tema=oscuro] .boton-tema .icono-sol{display:block} :root[data-tema=oscuro] .boton-tema .icono-luna{display:none} @media (prefers-color-scheme:dark){ :root:not([data-tema=claro]) .boton-tema .icono-sol{display:block} :root:not([data-tema=claro]) .boton-tema .icono-luna{display:none} } /* ---------- Mostrar u ocultar según el ancho de pantalla ---------- */ @media (max-width:900px){.ocultar-en-tablet{display:none!important}} @media (max-width:520px){.ocultar-en-movil{display:none!important}} .solo-en-tablet{display:none} @media (max-width:900px){.solo-en-tablet{display:block}} /* ---------- Cabecera de páginas interiores (soporte y legal) ---------- */ .cabecera-interior{position:sticky;top:0;z-index:60;background:var(--cristal); backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid rgba(var(--tinta-rgb),.08)} .cabecera-interior-contenido{max-width:var(--ancho-pagina);margin:0 auto;padding:14px 24px; display:flex;align-items:center;justify-content:space-between;gap:20px} .cabecera-interior nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:flex-end} .enlace-menu{font-size:15px;color:rgba(var(--tinta-rgb),.7)} .boton-acceder{font-size:15px;font-weight:600;color:var(--boton-texto);background:var(--boton-fondo);padding:10px 18px;border-radius:14px} .boton-acceder:hover{color:var(--boton-texto);background:var(--boton-hover)} /* ---------- Pie de páginas interiores ---------- */ .pie-interior{margin-top:72px;border-top:1px solid rgba(var(--tinta-rgb),.1);background:var(--fondo)} .pie-interior-contenido{max-width:var(--ancho-pagina);margin:0 auto;padding:34px 24px; display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center} .pie-copyright{font-size:14px;color:rgba(var(--tinta-rgb),.55)} .pie-enlaces{display:flex;flex-wrap:wrap;gap:20px} .pie-enlaces a{font-size:15px;color:rgba(var(--tinta-rgb),.7)} /* ---------- Pestañas tipo píldora (legal y soporte) ---------- La activa lleva la clase "activa" (la pone el JavaScript de cada página). */ .pestana{border:1px solid rgba(var(--tinta-rgb),.14);background:var(--tarjeta);color:var(--tinta); font-weight:600;cursor:pointer} .pestana:hover{filter:brightness(.96)} .pestana.activa{border-color:var(--boton-fondo);background:var(--boton-fondo);color:var(--boton-texto)} /* ---------- Tarjeta que se eleva al pasar el ratón ---------- */ .tarjeta-elevable{transition:transform 600ms var(--curva),box-shadow 600ms var(--curva),border-color 400ms var(--curva)} @media (hover:hover){.tarjeta-elevable:hover{transform:translateY(-4px);box-shadow:0 18px 44px -18px rgba(23,24,26,.28)}} /* Etiqueta pequeña en mayúsculas (títulos de cajas laterales). */ .etiqueta-caja{font-size:12.5px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:rgba(var(--tinta-rgb),.5)} /* Campo trampa anti-spam de los formularios (contacto y tickets): existe en la página pero nadie lo ve ni llega a él con el tabulador. Si llega relleno, lo ha escrito un robot. */ .campo-trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}