html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', sans-serif;
background-color: var(--od-marine-dark);
color: var(--od-text-light);
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow-x: hidden;
}
.bg-layer {
position: fixed;
inset: 0;
z-index: -1;
background-image: url('../img/backgrounds/background1.jpg');
background-size: cover;
background-position: center center;
transition: background-image 1s ease-in-out;
will-change: background-image;
}
.overlay {
background: linear-gradient(180deg, rgba(var(--od-marine-darker-rgb), 0.55) 0%, rgba(var(--od-marine-darker-rgb), 0.85) 100%);
min-height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* Fondo propio, sin depender de que Tailwind genere la clase.
Las filas de dentro van transparentes, como en la referencia. */
/* Barra de navegacion: fondo propio para que no dependa de
que Tailwind genere bg-marine-dark. Sin borde, para que no
aparezca ninguna linea clara. */
.nav-bar {
background: rgba(var(--od-marine-darker-rgb), 0.92);
-webkit-backdrop-filter: blur(18px) saturate(140%);
backdrop-filter: blur(18px) saturate(140%);
box-shadow: 0 10px 26px rgba(var(--od-shadow-rgb), 0.4);
}
/* Panel del menu desplegable.
Sin fondo: se ve la imagen de la web, como el resto del sitio.
Sin sombra ni borde, para que no salga ninguna linea. La lectura la
aporta la pastilla de cada fila, no el panel. */
.menu-panel {
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none;
}
.menu-panel .nav-button:not([aria-current='page']) {
background: rgba(var(--od-glass-rgb), 0.34);
color: var(--od-text-dark);
border-color: transparent;
}
.menu-panel .nav-button:not([aria-current='page']):hover {
background: rgba(var(--od-glass-rgb), 0.5);
color: var(--od-text-light);
border-color: transparent;
}
.menu-panel .nav-button-shop {
background: rgba(var(--od-marine-accent), 0.14);
border-color: transparent;
}
.menu-panel .nav-button-shop:hover {
background: rgba(var(--od-marine-accent), 0.24);
}
/* =============================================================
Menu desplegable
Copia del diseno de referencia: icono + texto en cada fila,
sin fondo ni borde. Solo la pagina actual se rellena con la
pastilla dorada. Asi el menu no parece un-stick de botones.
============================================================= */
.nav-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 38px;
padding: 0 16px;
border-radius: 999px;
font-family: 'Inter', sans-serif;
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
position: relative;
border: 1px solid transparent;
background: transparent;
color: var(--od-text-dark);
-webkit-tap-highlight-color: transparent;
transition: background-color 0.18s ease, border-color 0.18s ease,
color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.nav-icon {
width: 17px;
height: 17px;
flex-shrink: 0;
opacity: 0.75;
transition: opacity 0.18s ease;
}
.nav-button:hover {
color: var(--od-text-light);
background: rgba(var(--od-glass-rgb), 0.4);
transform: translateY(-1px);
}
.nav-button:hover .nav-icon {
opacity: 1;
}
.nav-button:active {
transform: translateY(0) scale(0.98);
}
.nav-button:focus-visible {
outline: 2px solid var(--od-marine-accent);
outline-offset: 2px;
}
.nav-button-secondary {
background: transparent;
border-color: transparent;
color: var(--od-text-dark);
}
/* Tienda: sin relleno, pero con el texto en oro para que siga
leyendose como la seccion importante. */
.nav-button-shop {
background: transparent;
border-color: transparent;
color: var(--od-marine-accent);
font-weight: 600;
}
.nav-button-shop .nav-icon {
opacity: 0.9;
}
.nav-button-shop:hover {
background: rgba(var(--od-marine-accent), 0.12);
color: var(--od-gold-light);
}
/* Pagina actual: la unica pastilla rellena del menu. */
.nav-button[aria-current='page'] {
background: linear-gradient(180deg, #fde68a 0%, #eab308 100%);
border-color: transparent;
color: var(--od-ink);
font-weight: 600;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset,
0 4px 14px rgba(234, 179, 8, 0.24);
}
.nav-button[aria-current='page'] .nav-icon {
opacity: 1;
}
.nav-button[aria-current='page']:hover {
background: linear-gradient(180deg, #fef3c7 0%, #f0c02c 100%);
color: var(--od-ink);
}
/* El boton de entrar y el de menu siguen siendo acciones, no
enlaces de navegacion: por eso si llevan pastilla. */
.nav-button-primary {
background: linear-gradient(180deg, #fde68a 0%, #eab308 100%);
border-color: rgba(253, 230, 138, 0.6);
color: var(--od-ink);
font-weight: 600;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset,
0 4px 14px rgba(234, 179, 8, 0.24);
}
.nav-button-primary:hover {
background: linear-gradient(180deg, #fef3c7 0%, #f0c02c 100%);
border-color: transparent;
color: var(--od-ink);
transform: translateY(-1px);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset,
0 9px 22px rgba(234, 179, 8, 0.34);
}
.nav-button-primary:active {
transform: translateY(0) scale(0.97);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset,
0 2px 8px rgba(234, 179, 8, 0.28);
}
.lang-flag-img {
width: 24px;
height: 18px;
border-radius: 3px;
display: block;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
:focus-visible {
outline: 3px solid var(--od-gold-light) !important;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}
.clickable-text-copy {
cursor: pointer;
transition: color 0.2s ease;
}
.clickable-text-copy:hover {
color: var(--od-marine-accent);
}
.social-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
outline: none;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: transform 0.3s ease;
}
.social-icon:hover {
transform: translateY(-4px) scale(1.1);
}
.social-icon:hover svg {
filter: drop-shadow(0 0 6px rgba(234, 179, 8, 0.75));
}
.social-icon:focus,
.social-icon:focus-visible,
.social-icon:active {
outline: none;
}
.hero-logo {
will-change: transform;
animation: logoFloat 3.6s ease-in-out infinite !important;
transition: filter 0.4s ease, box-shadow 0.4s ease, border-radius 0.4s ease;
}
.hero-logo:hover {
filter: brightness(1.15) drop-shadow(0 0 20px rgba(234, 179, 8, 0.55));
border-radius: 18px;
}
@keyframes logoFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-12px) rotate(-1.5deg); }
}
/* Secciones sin caja: solo el contenido, sobre la imagen de fondo.
Se mantiene el relleno vertical para que no se pegue a los bordes. */
/* ============================================================
1. LEGIBILIDAD: el velo se define al FINAL del archivo, despues del
veto de la caja, para que gane. Ver bloque "legibilidad" al final.
============================================================ */
/* ============================================================
4. JERARQUIA: el titulo principal de la pagina va mas grande; el
resto comparte tamano y lleva un filete dorado. Antes los cuatro
eran identicos (36px / 800 / dorado) y no habia jerarquia.
============================================================ */
.section-title {
font-size: 1.75rem;
line-height: 1.2;
font-weight: 800;
color: var(--od-marine-accent);
position: relative;
padding-bottom: 0.6rem;
}
.section-title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 3rem;
height: 3px;
border-radius: 2px;
background: linear-gradient(90deg, var(--od-marine-accent), rgba(234, 179, 8, 0));
}
.section-title--lead {
font-size: 2.25rem;
margin-bottom: 1.5rem;
}
.section-title--lead::after {
left: 50%;
transform: translateX(-50%);
width: 5rem;
}
@media (min-width: 768px) {
.section-title { font-size: 2rem; }
.section-title--lead { font-size: 2.75rem; }
}
/* ============================================================
3. LAS 3 TARJETAS de "¿Que diferencia hay...?"
============================================================ */
.why-card {
display: flex;
flex-direction: column;
gap: 0.7rem;
padding: 1.5rem 1.35rem;
border-radius: 1rem;
background: rgba(255, 255, 255, 0.045);
border: 1px solid rgba(var(--od-border-rgb), 0.5);
transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.why-card:hover {
transform: translateY(-3px);
border-color: rgba(var(--od-marine-accent), 0.4);
background: rgba(255, 255, 255, 0.07);
}
.why-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 12px;
color: var(--od-marine-accent);
background: rgba(234, 179, 8, 0.12);
border: 1px solid rgba(234, 179, 8, 0.28);
}
.why-card-icon svg { width: 22px; height: 22px; }
.why-card-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--od-gold-light);
}
.why-card-text {
font-size: 0.95rem;
line-height: 1.65;
color: var(--od-text-dark);
}
.why-card-text strong { color: var(--od-marine-accent); font-weight: 700; }
/* ============================================================
5. HERO en movil: los bloques laterales se centran.
============================================================ */
@media (max-width: 767px) {
.liquid-glass-container {
padding: 1.6rem 1.1rem !important;
border-radius: 1rem !important;
}
.section-title { font-size: 1.4rem; padding-bottom: 0.5rem; }
.section-title--lead { font-size: 1.7rem; }
.why-card { padding: 1.25rem 1.1rem; }
}
.liquid-glass-container {
background-color: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: none;
border-radius: 0;
box-shadow: none;
padding: 1.5rem 0;
}
/* Reglas si lleva caja: es un documento largo y necesita un marco
para poder leerse. Fondo casi opaco, filo dorado arriba y
esquinas suaves. */
#reglas .liquid-glass-container {
background-color: rgba(var(--od-marine-darker-rgb), 0.92);
-webkit-backdrop-filter: blur(20px) saturate(140%);
backdrop-filter: blur(20px) saturate(140%);
border: 1px solid rgba(var(--od-border-rgb), 0.45);
border-top: 3px solid rgba(var(--od-marine-accent), 0.6);
border-radius: 1rem;
box-shadow: 0 18px 44px rgba(var(--od-shadow-rgb), 0.5);
padding: 2.5rem 2rem;
}
.gold-count {
animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
0%, 100% { filter: drop-shadow(0 0 6px rgba(234, 179, 8, 0.35)); }
50% { filter: drop-shadow(0 0 18px rgba(234, 179, 8, 0.7)); }
}
.orb {
position: absolute;
border-radius: 9999px;
filter: blur(80px);
opacity: 0.45;
pointer-events: none;
z-index: 0;
animation: floatOrb 9s ease-in-out infinite;
}
.orb-1 {
width: 420px;
height: 420px;
background: radial-gradient(circle, rgba(234, 179, 8, 0.55), transparent 70%);
top: -60px;
left: -80px;
}
.orb-2 {
width: 360px;
height: 360px;
background: radial-gradient(circle, rgba(180, 83, 9, 0.5), transparent 70%);
bottom: -80px;
right: -60px;
animation-delay: -4s;
}
@keyframes floatOrb {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(30px) scale(1.15); }
}
.reveal {
opacity: 0;
transform: translateY(34px) scale(0.97);
transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.visible {
opacity: 1;
transform: translateY(0) scale(1);
}
.staff-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
position: relative;
padding-top: 2rem;
overflow: visible;
background: none;
border: none;
box-shadow: none;
transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.staff-card:hover {
transform: translateY(-8px);
}
.staff-card::before,
.staff-card::after {
content: "";
position: absolute;
border-radius: 9999px;
pointer-events: none;
}
.staff-card::before {
inset: 0;
top: 1.5rem;
left: 50%;
width: 8.5rem;
height: 8.5rem;
transform: translateX(-50%);
background: radial-gradient(circle, rgba(234, 179, 8, 0.18) 0%, transparent 65%);
opacity: 0;
transition: opacity 0.4s ease;
}
.staff-card:hover::before {
opacity: 1;
}
a {
outline: none !important;
box-shadow: none !important;
-webkit-tap-highlight-color: transparent;
}
a:focus,
a:focus-visible,
a:focus-within,
a:active,
a:hover {
outline: none !important;
box-shadow: none !important;
}
img.staff-skin {
outline: none !important;
border-radius: 9999px !important;
}
.staff-card a,
.staff-card a:focus,
.staff-card a:focus-visible,
.staff-card a:active {
outline: none;
border: none;
-webkit-tap-highlight-color: transparent;
}
.staff-skin {
margin: auto;
width: 112px;
height: 112px;
border-radius: 9999px;
border-width: 4px;
border-color: rgba(234, 179, 8, 0.65);
object-fit: cover;
object-position: center;
outline: none;
will-change: transform;
animation: floatSkin 2.6s ease-in-out infinite;
transition: box-shadow 0.5s ease, border-color 0.5s ease;
}
.staff-card:hover .staff-skin {
animation-duration: 1.5s;
border-color: rgba(253, 230, 138, 0.9);
box-shadow: 0 0 0 5px rgba(234, 179, 8, 0.12), 0 0 14px rgba(234, 179, 8, 0.35);
}
@keyframes floatSkin {
0%, 100% { transform: translateY(0) rotate(0deg); }
40% { transform: translateY(-14px) rotate(-2deg); }
60% { transform: translateY(-6px) rotate(2deg); }
}
.staff-skin,
.staff-card:hover .staff-skin {
animation-duration: 2.6s !important;
animation-iteration-count: infinite !important;
}
.staff-trigger {
background: none;
border: none;
padding: 0;
margin: auto;
cursor: pointer;
outline: none;
display: block;
-webkit-tap-highlight-color: transparent;
}
.staff-panel {
position: relative;
background-color: var(--od-marine-medium);
padding: 25px;
border-radius: 10px;
width: 100%;
max-width: 420px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
border: 1px solid rgba(234, 179, 8, 0.2);
}
.staff-panel-header {
display: flex;
align-items: center;
gap: 15px;
}
.staff-panel-header img {
width: 84px;
height: 84px;
object-fit: cover;
border-radius: 9999px;
border: 4px solid rgba(234, 179, 8, 0.65);
image-rendering: pixelated;
}
.staff-panel-header h3 {
margin: 0 0 4px 0;
font-size: 1.3rem;
color: var(--od-text-light);
font-weight: 700;
}
.staff-panel-role {
margin: 0;
color: var(--od-marine-accent);
font-size: 1rem;
font-weight: 600;
}
.staff-panel-info {
color: var(--od-text-dark);
font-size: 0.95rem;
line-height: 1.6;
text-align: center;
margin: 0 0 20px 0;
}
.staff-panel .discord-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 12px;
border-radius: 8px;
background: linear-gradient(135deg, var(--od-marine-accent) 0%, var(--od-gold-dark) 100%);
color: var(--od-ink);
font-weight: bold;
font-size: 0.95rem;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.staff-panel .discord-btn:hover {
transform: translateY(-2px) scale(1.01);
box-shadow: 0 10px 20px rgba(234, 179, 8, 0.35);
}
.staff-panel .discord-btn svg {
width: 20px;
height: 16px;
}
.staff-panel .rating-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 12px;
border: none;
border-radius: 8px;
background: linear-gradient(135deg, var(--od-marine-accent) 0%, var(--od-gold-dark) 100%);
color: var(--od-ink);
font-weight: bold;
font-size: 0.95rem;
cursor: pointer;
font-family: 'Inter', sans-serif;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.staff-panel .rating-btn:hover {
transform: translateY(-2px) scale(1.01);
box-shadow: 0 10px 20px rgba(234, 179, 8, 0.35);
}
.staff-panel .rating-btn svg {
width: 20px;
height: 20px;
}
.star-rating {
display: flex;
justify-content: center;
gap: 8px;
margin: 18px 0;
}
.star-rating button {
background: none;
border: none;
font-size: 2.2rem;
line-height: 1;
color: var(--od-marine-light);
cursor: pointer;
padding: 0;
transition: transform 0.15s ease, color 0.15s ease;
}
.star-rating button.on {
color: var(--od-marine-accent);
}
.star-rating button:hover {
transform: scale(1.2);
}
.rating-comment {
width: 100%;
min-height: 80px;
background-color: var(--od-marine-darker);
border: 1px solid var(--od-marine-light);
border-radius: 6px;
color: var(--od-text-light);
padding: 10px;
resize: vertical;
outline: none;
font-family: 'Inter', sans-serif;
box-sizing: border-box;
}
.rating-comment:focus {
border-color: var(--od-marine-accent);
}
.staff-panel .input-container {
position: relative;
display: flex;
align-items: center;
margin-bottom: 4px;
}
.staff-panel .input-container img {
position: absolute;
left: 10px;
width: 32px;
height: 32px;
border-radius: 4px;
image-rendering: pixelated;
}
.staff-panel .input-container input {
width: 100%;
padding: 12px 12px 12px 52px;
background-color: var(--od-marine-darker);
border: 1px solid var(--od-marine-light);
border-radius: 6px;
color: var(--od-text-light);
font-size: 1rem;
outline: none;
box-sizing: border-box;
transition: border-color 0.2s;
font-family: 'Inter', sans-serif;
}
.staff-panel .input-container input:focus {
border-color: var(--od-marine-accent);
}
.staff-panel select.rating-comment {
min-height: 44px;
cursor: pointer;
}
.shine-btn {
position: relative;
overflow: hidden;
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.shine-btn:hover {
transform: translateY(-2px) scale(1.03);
box-shadow: 0 8px 20px rgba(234, 179, 8, 0.4);
}
.shine-btn::after {
content: "";
position: absolute;
top: 0;
left: -160%;
width: 60%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
transform: skewX(-20deg);
transition: left 0.6s ease;
}
.shine-btn:hover::after {
left: 170%;
}
.rule-category h2 {
color: var(--od-marine-accent);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid rgba(234, 179, 8, 0.3);
}
.rule-category li {
color: var(--od-text-dark);
font-size: 1rem;
margin-bottom: 0.5rem;
list-style: none;
padding-left: 1.5rem;
position: relative;
transition: color 0.2s ease, transform 0.2s ease;
}
.rule-category li:hover {
color: var(--od-text-light);
transform: translateX(4px);
}
.rule-category li::before {
content: "?";
color: var(--od-marine-accent);
position: absolute;
left: 0;
font-size: 0.7rem;
top: 0.35rem;
}
.account-card {
position: relative;
background-color: var(--od-marine-medium);
padding: 25px;
border-radius: 8px;
width: 100%;
max-width: 500px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
border: 1px solid rgba(234, 179, 8, 0.2);
}
.account-card .user-header {
display: flex;
align-items: center;
gap: 15px;
}
.account-card .user-header img#user-bust {
width: 80px;
height: 80px;
object-fit: contain;
image-rendering: pixelated;
}
.account-card .user-info h3 {
margin: 0 0 8px 0;
font-size: 1.2rem;
color: var(--od-marine-accent);
font-weight: 700;
}
.account-card .user-actions {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.account-card .btn-logout {
background-color: #261616;
color: #ff5252;
border: 1px solid #3d1c1c;
padding: 5px 12px;
border-radius: 4px;
font-weight: bold;
font-size: 0.85rem;
cursor: pointer;
transition: background-color 0.2s;
}
.account-card .btn-logout:hover {
background-color: #381a1a;
}
.account-card .divider {
border: 0;
height: 1px;
background: #1f1f1f;
margin: 20px 0;
}
.account-card .cart-empty {
text-align: center;
padding: 20px 10px;
}
.account-card .cart-empty h2 {
color: #ff5252;
font-size: 1.3rem;
margin-bottom: 10px;
letter-spacing: 1px;
}
.account-card .cart-empty p {
color: var(--od-text-dark);
font-size: 0.9rem;
margin: 0;
line-height: 1.4;
}
.account-lists {
text-align: left;
max-height: 180px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 8px;
}
.no-items {
color: #9a9a9a;
font-size: 0.85rem;
margin: 4px 0;
}
.t-card-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.stars-mini-s {
color: var(--od-marine-accent);
font-size: 0.9rem;
letter-spacing: 2px;
margin: 2px 0;
}
.account-item {
background-color: var(--od-marine-darker);
border: 1px solid var(--od-marine-light);
border-radius: 8px;
padding: 10px 12px;
font-size: 0.82rem;
}
.account-item .top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.account-item .name {
color: var(--od-text-light);
font-weight: 600;
font-size: 0.85rem;
}
.account-item .mini.pill {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.4px;
padding: 2px 8px;
border-radius: 9999px;
}
.pill-nuevo, .pill-proceso, .pill-pendiente {
background-color: #3b2d0f;
color: var(--od-gold-light);
}
.pill-pagado {
background-color: #0a0a0a;
color: #7dd3fc;
}
.pill-resuelto, .pill-entregado {
background-color: #0f3322;
color: #86efac;
}
.account-item .sub {
color: var(--od-text-dark);
font-size: 0.78rem;
}
.account-item .date {
color: #9a9a9a;
font-size: 0.72rem;
margin-top: 2px;
}
.guide-card {
text-align: left;
}
.guide-card .guide-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.guide-header h3 {
margin: 0;
}
.guide-icon {
font-size: 2rem;
}
.guide-header .guide-icon {
margin-bottom: 0;
}
.guide-list {
list-style: decimal;
padding-left: 20px;
color: var(--od-text-dark);
font-size: 0.9rem;
line-height: 1.7;
margin-bottom: 18px;
}
.guide-code {
background-color: var(--od-marine-darker);
color: var(--od-gold-light);
padding: 1px 6px;
border-radius: 4px;
font-family: monospace;
font-size: 0.85em;
}
.btn-gold-inline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 38px;
padding: 0 20px;
border-radius: 999px;
font-family: 'Inter', sans-serif;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1;
cursor: pointer;
color: var(--od-ink);
background: linear-gradient(180deg, #fde68a 0%, #eab308 100%);
border: 1px solid rgba(253, 230, 138, 0.55);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset,
0 4px 14px rgba(234, 179, 8, 0.22);
-webkit-tap-highlight-color: transparent;
transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.btn-gold-inline:hover {
filter: brightness(1.06);
transform: translateY(-1px);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset,
0 8px 20px rgba(234, 179, 8, 0.3);
}
.btn-gold-inline:active {
transform: translateY(0) scale(0.98);
filter: brightness(0.97);
}
.btn-gold-inline:active {
transform: translateY(0) scale(0.98);
filter: brightness(0.97);
}
.mc-name-row {
display: flex;
align-items: center;
gap: 8px;
}
.mc-name-label {
font-size: 0.72rem;
font-weight: 600;
color: var(--od-text-dark);
white-space: nowrap;
}
.mc-name-input {
flex: 1;
min-width: 0;
background-color: var(--od-marine-dark);
border: 2px solid #2a2a2a;
color: var(--od-text-light);
border-radius: 3px;
padding: 0.35em 0.6em;
font-size: 0.8rem;
font-family: 'Inter', sans-serif;
outline: none;
}
.mc-name-input:focus {
border-color: var(--od-marine-accent);
}
.faq-item {
background-color: var(--od-marine-medium);
border: 1px solid var(--od-marine-light);
border-radius: 10px;
margin-bottom: 12px;
overflow: hidden;
}
.faq-question {
width: 100%;
background: transparent;
border: none;
color: var(--od-text-light);
font-size: 1rem;
font-weight: 600;
padding: 16px 20px;
cursor: pointer;
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
font-family: 'Inter', sans-serif;
}
.faq-question:hover {
color: var(--od-marine-accent);
}
.faq-arrow {
transition: transform 0.25s ease;
color: var(--od-marine-accent);
}
.faq-item.open .faq-arrow {
transform: rotate(180deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
color: var(--od-text-dark);
font-size: 0.9rem;
line-height: 1.7;
padding: 0 20px;
}
.faq-item.open .faq-answer {
max-height: 300px;
padding: 0 20px 18px;
}
.news-card {
background-color: var(--od-marine-medium);
border: 1px solid rgba(234, 179, 8, 0.2);
border-radius: 14px;
padding: 22px;
}
.news-badge {
display: inline-block;
background-color: var(--od-marine-accent);
color: var(--od-ink);
font-size: 0.7rem;
font-weight: 800;
padding: 3px 10px;
border-radius: 9999px;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.event-card {
background-color: var(--od-marine-medium);
border: 1px solid rgba(234, 179, 8, 0.2);
border-radius: 14px;
padding: 20px;
display: flex;
gap: 14px;
align-items: flex-start;
}
.event-date {
background: linear-gradient(135deg, var(--od-marine-accent) 0%, var(--od-gold-dark) 100%);
color: var(--od-ink);
border-radius: 10px;
min-width: 58px;
text-align: center;
padding: 8px 4px;
font-weight: 800;
}
.event-date .day {
font-size: 1.3rem;
line-height: 1;
}
.event-date .month {
font-size: 0.7rem;
text-transform: uppercase;
}
.gallery-item {
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(234, 179, 8, 0.2);
background-color: var(--od-marine-medium);
}
.gallery-item img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
.gallery-item .cap {
padding: 8px 12px;
font-size: 0.8rem;
color: var(--od-text-dark);
}
.content-empty {
min-height: 150px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 1.5rem;
border: 1px dashed rgba(234, 179, 8, 0.45);
border-radius: 14px;
background: rgba(var(--od-border-rgb), 0.55);
color: var(--od-text-dark);
}
.testimonial-card {
background-color: var(--od-marine-medium);
border: 1px solid rgba(234, 179, 8, 0.2);
border-radius: 14px;
padding: 20px;
}
.testimonial-card .stars-mini {
color: var(--od-marine-accent);
font-size: 1rem;
letter-spacing: 2px;
margin-bottom: 8px;
}
.testimonial-card .quote {
color: var(--od-text-dark);
font-size: 0.88rem;
font-style: italic;
line-height: 1.6;
margin-bottom: 10px;
}
.testimonial-card .who {
color: #9a9a9a;
font-size: 0.78rem;
}
.badge-noticia { background-color: var(--od-marine-accent); color: var(--od-ink); }
.badge-actualizacion { background-color: #10b981; color: var(--od-ink); }
.badge-changelog { background-color: #eab308; color: #ffffff; }
.badge-evento { background-color: #3b82f6; color: #ffffff; }
.badge-mantenimiento { background-color: #f97316; color: var(--od-ink); }
.event-badge {
font-size: 0.72rem;
font-weight: 700;
padding: 3px 9px;
border-radius: 9999px;
display: inline-block;
letter-spacing: 0.4px;
text-transform: uppercase;
}
.event-badge-today { background-color: rgba(239, 68, 68, 0.2); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.4); animation: pulse 2s infinite; }
.event-badge-soon { background-color: rgba(59, 130, 246, 0.2); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.4); }
.event-badge-past { background-color: rgba(var(--od-border-rgb), 0.2); color: #bdbdbd; border: 1px solid rgba(var(--od-border-rgb), 0.4); }
.discord-btn {
position: relative;
z-index: 0;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 18px;
font-size: 15px;
font-weight: 600;
color: #5865f2;
background: transparent;
border: 1px solid #5865f2;
border-radius: 25px;
overflow: hidden;
cursor: pointer;
text-decoration: none;
transition: color 0.3s 0.1s ease-out;
}
.discord-btn svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.discord-btn::before {
content: '';
position: absolute;
top: 0;
left: -5em;
right: 0;
bottom: 0;
margin: auto;
width: 20em;
height: 20em;
border-radius: 50%;
display: block;
z-index: -1;
transition: box-shadow 0.5s ease-out;
}
.discord-btn:hover {
color: #fff;
border-color: #5865f2;
}
.discord-btn:hover::before {
box-shadow: inset 0 0 0 10em #5865f2;
}
/* ===== Botón TikTok (pill blanca con slide) ===== */
.tiktok-btn {
position: relative;
display: inline-flex;
align-items: center;
width: 130px;
height: 35px;
border-radius: 30px;
background-color: #ffffff;
border: 1px solid #111111;
overflow: hidden;
text-decoration: none;
font-family: 'Inter', sans-serif;
cursor: pointer;
line-height: 1;
flex-shrink: 0;
}
.tiktok-btn .text1 {
font-size: 15px;
font-weight: 600;
color: #111111;
margin-left: 33%;
white-space: nowrap;
}
.tiktok-btn .text2 {
position: absolute;
top: 25%;
left: -50px;
font-weight: 700;
font-size: 14px;
color: #ffffff;
opacity: 0;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease;
}
.tiktok-btn .icon {
position: absolute;
top: 0;
left: 0;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
}
.tiktok-btn .icon::before {
position: absolute;
left: -100px;
top: 0;
z-index: -1;
content: '';
width: 130px;
height: 33px;
border-radius: 30px;
background-color: #111111;
}
.tiktok-btn:hover .icon {
transform: translateX(96px);
}
.tiktok-btn:hover .text2 {
transform: translateX(100px);
opacity: 1;
}
.tiktok-btn:active {
transform: scale(1.03);
}
/* ===== Botones sociales del pie =====
Misma pastilla dorada del resto de botones del sitio:
sin extrusion, sin sombra dura, solo fondo y borde. */
.discord-btn,
.tiktok-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 40px;
padding: 0 22px;
border-radius: 999px;
font-family: 'Inter', sans-serif;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.06em;
line-height: 1;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
outline: none;
color: var(--od-ink);
background: linear-gradient(180deg, #fde68a 0%, #eab308 55%, #ca8a04 100%);
border: 1px solid rgba(253, 230, 138, 0.55);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset,
0 4px 14px rgba(234, 179, 8, 0.24);
-webkit-tap-highlight-color: transparent;
transition: transform 0.18s ease, box-shadow 0.18s ease,
filter 0.18s ease, border-color 0.18s ease;
}
.discord-btn::before,
.tiktok-btn::before {
display: none;
}
.discord-btn svg,
.tiktok-btn svg {
width: 17px;
height: 17px;
flex-shrink: 0;
}
.discord-btn:hover,
.tiktok-btn:hover {
color: var(--od-ink);
filter: brightness(1.06);
transform: translateY(-2px);
border-color: rgba(253, 230, 138, 0.85);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset,
0 12px 28px rgba(234, 179, 8, 0.34);
}
.discord-btn:active,
.tiktok-btn:active {
color: var(--od-ink);
transform: translateY(0) scale(0.98);
filter: brightness(0.97);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset,
0 2px 8px rgba(234, 179, 8, 0.26);
}
.discord-btn:focus-visible,
.tiktok-btn:focus-visible {
outline: 2px solid var(--od-marine-accent);
outline-offset: 3px;
}
/* ===== Estilo UI Minecraft (cuadros sólidos, bordes nítidos, esquinas cuadradas) ===== */
.staff-card {
background-color: #0a0a0a;
border: 2px solid #2a2a2a;
border-radius: 3px;
padding: 2rem 1.25rem 1.5rem;
margin-bottom: 6px;
box-shadow: 4px 4px 0 var(--od-marine-darker);
}
.staff-card:hover {
transform: translateY(-3px);
border-color: var(--od-marine-accent);
box-shadow: 6px 6px 0 var(--od-marine-darker);
}
.staff-card::before {
display: none;
}
.staff-card:hover .staff-skin {
box-shadow: none;
}.faq-item,
.news-card,
.event-card,
.testimonial-card,
.gallery-item,
.account-card,
.staff-panel {
border-radius: 3px;
border: 2px solid #2a2a2a;
box-shadow: 4px 4px 0 var(--od-marine-darker);
}
.content-empty {
border-radius: 3px;
border: 2px dashed #3a3a3a;
background-color: #0a0a0a;
box-shadow: 4px 4px 0 var(--od-marine-darker);
}
.news-badge,
.event-badge,
.event-date {
border-radius: 2px;
}
.event-badge-today {
background-color: #3d1d1d;
color: #fca5a5;
border: 1px solid #b91c1c;
}
.event-badge-soon {
background-color: #0a0a0a;
color: #93c5fd;
border: 1px solid #2563eb;
}
.event-badge-past {
background-color: #0a0a0a;
color: #bdbdbd;
border: 1px solid #6b6b6b;
}
.cart-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 9999px;
background-color: var(--od-marine-dark);
color: var(--od-gold-light);
font-size: 0.72rem;
font-weight: 700;
margin-left: 6px;
}
.cart-actions {
display: flex;
gap: 6px;
margin-top: 8px;
}
.cart-total-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.05rem;
font-weight: 700;
color: var(--od-gold-light);
margin-bottom: 12px;
}
/* ===== Modo "cristal": recuadros translúcidos sobre el fondo =====
Ajusta el nivel de transparencia cambiando el alfa (0.55)
y el desenfoque con el valor de blur. */
:root {
--glass-bg: rgba(var(--od-glass-rgb), 0.22);
--glass-bg-soft: rgba(var(--od-glass-rgb), 0.16);
--glass-blur: 14px;
}
.bg-marine-dark,
.bg-marine-medium {
background-color: rgba(var(--od-glass-rgb), 0.72) !important;
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
}
.staff-card {
background-color: rgba(var(--od-glass-rgb), 0.25);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
}.faq-item,
.news-card,
.event-card,
.testimonial-card,
.gallery-item,
.account-card,
.staff-panel {
background-color: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
}
.content-empty {
background-color: rgba(var(--od-glass-rgb), 0.2);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
}.staff-card,
.faq-item,
.news-card,
.event-card,
.testimonial-card,
.gallery-item,
.account-card,
.staff-panel,
.content-empty {
box-shadow: 0 8px 24px rgba(var(--od-shadow-rgb), 0.25);
}.staff-panel .input-container input,
.staff-panel select.rating-comment,
.account-card .mc-name-input,
.rating-comment,
.report-capture {
background-color: rgba(var(--od-glass-rgb), 0.35);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
}
/* ===== Avisos de respuesta en tickets ===== */
#enterNavBtn {
position: relative;
}
.ticket-notif-badge {
position: absolute;
top: -8px;
right: -8px;
min-width: 17px;
height: 17px;
line-height: 15px;
padding: 0 4px;
border-radius: 9999px;
background-color: #ef4444;
color: #ffffff;
font-size: 0.68rem;
font-weight: 700;
text-align: center;
box-sizing: border-box;
border: 2px solid var(--od-marine-dark);
}
.tickets-unread-pill {
display: inline-block;
vertical-align: middle;
background-color: #ef4444;
color: #ffffff;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.03em;
border-radius: 9999px;
padding: 2px 8px;
margin-left: 6px;
}
.page-particles {
position: fixed;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.page-particle {
position: absolute;
width: 8px;
height: 8px;
border-radius: 2px;
background: var(--od-gold-light);
box-shadow: 0 0 8px rgba(234, 179, 8, 0.7);
opacity: 0;
animation: particleFloat 9s linear infinite;
}
@keyframes particleFloat {
0% { transform: translateY(40px) rotate(0deg); opacity: 0; }
15% { opacity: 0.6; }
85% { opacity: 0.4; }
100% { transform: translateY(-340px) rotate(170deg); opacity: 0; }
}
/* =============================================================
Botones de la web
Un solo bloque para todos: pastilla, fondo translucido, sin
contorno y hover que solo levanta el fondo. Antes cada boton
tenia reglas propias que competian entre si.
============================================================= */
.news-filter-btn,
.lang-btn,
.rating-btn,
.rating-submit,
.cb-btn,
.btn-copy-tag,
.gold-btn,
.btn-delete-mini,
.btn-danger,
.btn-logout,
.btn-action,
.btn-continue,
.btn-gold,
.btn-online,
.btn-rating-del {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 38px;
padding: 0 18px;
border-radius: 999px;
border: 1px solid rgba(253, 230, 138, 0.6);
background: linear-gradient(180deg, #fde68a 0%, #eab308 100%);
color: var(--od-ink);
font-family: 'Inter', sans-serif;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset,
0 4px 14px rgba(234, 179, 8, 0.24);
transition: background-color 0.18s ease, border-color 0.18s ease,
color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease,
filter 0.18s ease;
}
.nav-button svg),
.news-filter-btn svg,
.cb-btn svg,
.btn-copy-tag svg,
.gold-btn svg,
.rating-btn svg,
.btn-delete-mini svg,
.btn-danger svg,
.btn-logout svg {
width: 17px;
height: 17px;
flex-shrink: 0;
}
.news-filter-btn:hover,
.lang-btn:hover,
.rating-btn:hover,
.rating-submit:hover,
.cb-btn:hover,
.btn-copy-tag:hover,
.gold-btn:hover,
.btn-delete-mini:hover,
.btn-danger:hover,
.btn-logout:hover,
.btn-action:hover,
.btn-continue:hover,
.btn-gold:hover,
.btn-online:hover,
.btn-rating-del:hover {
background: linear-gradient(180deg, #fef3c7 0%, #f0c02c 100%);
transform: translateY(-1px);
color: var(--od-ink);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset,
0 9px 22px rgba(234, 179, 8, 0.34);
}
.news-filter-btn:active,
.lang-btn:active,
.rating-btn:active,
.rating-submit:active,
.cb-btn:active,
.btn-copy-tag:active,
.gold-btn:active,
.btn-delete-mini:active,
.btn-danger:active,
.btn-logout:active,
.btn-action:active,
.btn-continue:active,
.btn-gold:active,
.btn-online:active,
.btn-rating-del:active {
transform: translateY(0) scale(0.98);
}
.news-filter-btn:focus-visible,
.lang-btn:focus-visible,
.rating-btn:focus-visible,
.rating-submit:focus-visible,
.cb-btn:focus-visible,
.btn-copy-tag:focus-visible,
.gold-btn:focus-visible,
.btn-delete-mini:focus-visible,
.btn-danger:focus-visible,
.btn-logout:focus-visible,
.btn-action:focus-visible,
.btn-continue:focus-visible,
.btn-gold:focus-visible,
.btn-online:focus-visible,
.btn-rating-del:focus-visible {
outline: 2px solid var(--od-marine-accent);
outline-offset: 2px;
}
/* Estado activo: se invierte a oscuro con texto dorado, para que
se distinga de los botones dorados de alrededor. */
.news-filter-btn.active {
background: var(--od-ink);
border-color: rgba(253, 230, 138, 0.75);
color: var(--od-gold-light);
font-weight: 700;
box-shadow: 0 0 0 1px rgba(253, 230, 138, 0.35) inset,
0 4px 16px rgba(0, 0, 0, 0.35);
}
.news-filter-btn.active:hover {
background: #0a0a0a;
color: var(--od-gold-light);
}
/* Accion positiva: el boton de aceptar. */
.cb-accept {
background: linear-gradient(180deg, #fef3c7 0%, #eab308 100%);
color: var(--od-ink);
}
/* Peligro: borrar, banear, cerrar. */
.btn-danger,
.btn-rating-del,
.cb-decline {
background: rgba(220, 38, 38, 0.16);
color: #fca5a5;
}
.btn-danger:hover,
.btn-rating-del:hover,
.cb-decline:hover {
background: rgba(220, 38, 38, 0.34);
color: #fee2e2;
}
/* Cantidad del carrito: botones pequenos y cuadrados. */
.cart-qty-btn,
.cart-remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
min-height: 0;
padding: 0;
border-radius: 10px;
border: 1px solid transparent;
background: linear-gradient(180deg, #fde68a 0%, #eab308 100%);
border-color: rgba(253, 230, 138, 0.6);
color: var(--od-ink);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
font-family: 'Inter', sans-serif;
font-size: 0.9rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.cart-qty-btn:hover,
.cart-remove:hover {
background: linear-gradient(180deg, #fef3c7 0%, #f0c02c 100%);
transform: translateY(-1px);
}
.cart-qty-btn:active,
.cart-remove:active {
transform: translateY(0) scale(0.95);
}
/* El menu desplegable no va en dorado: son filas de icono y
texto sobre fondo translucido, como en la referencia. */
.nav-button {
background: transparent;
border: 1px solid transparent;
color: var(--od-text-dark);
box-shadow: none;
}
.nav-button:hover {
background: rgba(var(--od-glass-rgb), 0.28);
color: var(--od-text-light);
}
/* La pagina actual si es la unica pastilla dorada del menu. */
.nav-button[aria-current='page'] {
background: linear-gradient(180deg, #fde68a 0%, #eab308 100%);
border-color: rgba(253, 230, 138, 0.6);
color: var(--od-ink);
font-weight: 600;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset,
0 4px 14px rgba(234, 179, 8, 0.24);
}
.nav-button[aria-current='page']:hover {
background: linear-gradient(180deg, #fef3c7 0%, #f0c02c 100%);
color: var(--od-ink);
}
/* Contorno dorado: fondo transparente, borde y texto dorados.
Los del hero (Discord y Proximamente, con el contador de
jugadores encima) y los del pie (Discord y TikTok). */
.discord-btn,
.tiktok-btn,
.gold-btn,
.btn-ghost {
background: transparent;
border: 1px solid rgba(234, 179, 8, 0.7);
color: var(--od-marine-accent);
box-shadow: none;
}
.discord-btn:hover,
.tiktok-btn:hover,
.gold-btn:hover,
.btn-ghost:hover {
background: rgba(234, 179, 8, 0.14);
border-color: var(--od-marine-accent);
color: var(--od-gold-light);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(234, 179, 8, 0.2);
}
.discord-btn:active,
.tiktok-btn:active,
.gold-btn:active,
.btn-ghost:active {
transform: translateY(0) scale(0.98);
}
/* ============================================================
1. LEGIBILIDAD: velo oscuro detras del texto.
Estas reglas van AL FINAL a proposito: antes, en el archivo, hay
una regla que pone .liquid-glass-container en background-color
transparent. Con la misma especificidad gana la ultima, asi que
definirlo aqui es lo que hace que el velo se vea.
============================================================ */
.liquid-glass-container {
background-color: rgba(var(--od-marine-darker-rgb, 10, 16, 30), 0.74) !important;
-webkit-backdrop-filter: blur(16px) saturate(115%) !important;
backdrop-filter: blur(16px) saturate(115%) !important;
border: 1px solid rgba(var(--od-marine-accent), 0.16) !important;
border-radius: 1.15rem !important;
box-shadow: 0 18px 44px rgba(var(--od-shadow-rgb, 10, 16, 30), 0.42) !important;
padding: 2.25rem 2rem !important;
}
@media (max-width: 767px) {
.liquid-glass-container {
padding: 1.6rem 1.1rem !important;
border-radius: 1rem !important;
}
}
/* ============================================================
El contenido de la guia se quedaba pegado a la izquierda del panel.
Con el velo nuevo el desequilibrio se notaba, asi que se centra.
============================================================ */
#guia .guide-card {
max-width: 34rem;
margin-left: auto;
margin-right: auto;
}
#guia .guide-list {
text-align: left;
}
/* ============================================================
La seccion de la guia va SIN caja, como las de contenido.
Para que el texto siga leyendose sobre la imagen sin un rectangulo
delante, se le aplica una sombra difusa al texto.
============================================================ */
#guia .liquid-glass-container {
background-color: transparent !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
border: none !important;
box-shadow: none !important;
padding: 1rem 0 !important;
}
/* Sombra solo de texto: no dibuja ninguna caja, solo separa las
letras de la imagen de fondo. */
/* (sombra movida a las reglas con html:not(.theme-light), mas abajo) */
/* (idem para el titulo) */
/* ============================================================
TEMA CLARO ARREGLA.
El velo .overlay usaba el color "darker" que en claro es gris claro,
dejando la foto lavada y el texto oscuro ilegible. Aqui el velo claro
es blanco y mas opaco, y la foto se difumina un poco para que el
texto oscuro tenga contraste.
============================================================ */
html.theme-light .overlay {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.95) 100%) !important;
}
html.theme-light #bgLayer {
filter: blur(3px) saturate(110%) brightness(1.05) !important;
}
html.theme-light .orb {
opacity: 0.16 !important;
}
/* El velo de las secciones: en claro tiene que ser claro, no el
"darker" del tema oscuro. */
html.theme-light .liquid-glass-container {
background-color: rgba(255, 255, 255, 0.82) !important;
border-color: rgba(var(--od-marine-accent), 0.35) !important;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12) !important;
}
html.theme-light .why-card {
background: rgba(0, 0, 0, 0.04) !important;
border-color: rgba(0, 0, 0, 0.12) !important;
}
html.theme-light .why-card-title {
color: #b45309 !important;
}
html.theme-light .why-card-text {
color: #1f1f1f !important;
}
/* La sombra de texto de la guia que se puso en NEGRO solo vale para el
tema oscuro. En claro el texto ya es oscuro, asi que lleva una sombra
blanca para despegarlo de la foto sin ensuciarlo. */
html:not(.theme-light) #guia .guide-card,
html:not(.theme-light) #guia .guide-card h3,
html:not(.theme-light) #guia .guide-card p,
html:not(.theme-light) #guia .guide-list,
html:not(.theme-light) #guia .guide-list li,
html:not(.theme-light) #guia .guide-list code,
html:not(.theme-light) #guia .staff-panel-info {
text-shadow: 0 1px 3px rgba(6, 10, 20, 0.95), 0 0 14px rgba(6, 10, 20, 0.7);
}
html:not(.theme-light) #guia .section-title,
html:not(.theme-light) #guia h2 {
text-shadow: 0 2px 6px rgba(6, 10, 20, 0.95), 0 0 20px rgba(6, 10, 20, 0.75);
}
html.theme-light #guia .guide-card,
html.theme-light #guia .guide-card h3,
html.theme-light #guia .guide-card p,
html.theme-light #guia .guide-list,
html.theme-light #guia .guide-list li,
html.theme-light #guia .guide-list code,
html.theme-light #guia .staff-panel-info {
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95);
}
html.theme-light #guia .section-title,
html.theme-light #guia h2 {
text-shadow: 0 1px 4px rgba(255, 255, 255, 0.95);
}
/* ============================================================
RESTO DE SECCIONES SIN CAJA.
Igual que la guia y la de Discord, estas dos se quedan sin el panel:
el contenido lleva sombra de texto, que no dibuja ningun rectangulo.
============================================================ */
#porque-odissey .liquid-glass-container,
#testimonios .liquid-glass-container {
background-color: transparent !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
border: none !important;
box-shadow: none !important;
padding: 1rem 0 !important;
}
/* Las tarjetas de "¿Que diferencia?" ya son cajas propias, asi que solo
necesitan sombra para el texto que va suelto. */
html:not(.theme-light) #porque-odissey .section-title,
html:not(.theme-light) #porque-odissey .why-card-text,
html:not(.theme-light) #testimonios .section-title,
html:not(.theme-light) #testimonios .testimonial-card,
html:not(.theme-light) #testimonios p[data-i18n="testimonials_subtitle"] {
text-shadow: 0 1px 3px rgba(6, 10, 20, 0.95), 0 0 14px rgba(6, 10, 20, 0.7);
}
html.theme-light #porque-odissey .section-title,
html.theme-light #porque-odissey .why-card-text,
html.theme-light #testimonios .section-title,
html.theme-light #testimonios .testimonial-card,
html.theme-light #testimonios p[data-i18n="testimonials_subtitle"] {
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95);
}
/* Las tarjetas del "¿Que diferencia?" y los testimonios si llevan caja
propia: son elementos de contenido, no secciones. */
#porque-odissey .why-card {
background: rgba(0, 0, 0, 0.72) !important;
-webkit-backdrop-filter: blur(12px) !important;
backdrop-filter: blur(12px) !important;
border: 1px solid rgba(var(--od-marine-accent), 0.22) !important;
}
html.theme-light #porque-odissey .why-card {
background: rgba(255, 255, 255, 0.88) !important;
border-color: rgba(0, 0, 0, 0.12) !important;
}