*/
z-index: 20;
}
/* Texto inferior izq */
.card__user {
margin: -3px 0;
font-weight: 500;
font-size: 12px;
letter-spacing: 0.3px;
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.card__row {
display: inline-flex;
align-items: center;
gap: 8px;
opacity: 0.95;
}
.card__icon {
width: 16px;
height: 16px;
display: inline-block;
}
.card__age {
font-weight: 600;
font-size: 12px;
color: #fff;
}
/* Badge "nuevo" (si se usa) */
.badge--new {
position: absolute;
top: 8px;
left: 8px;
background: var(--color-btn-bg);
color: #fff;
font-size: 12px;
font-weight: 700;
padding: 4px 6px;
border-radius: 4px;
z-index: 3;
pointer-events: none;
}
/* ===== Contador de vistas: arriba derecha ===== */
/* Contador de vistas: arriba derecha, sin fondo */
.card__views {
position: absolute;
top: 8px;
right: 8px;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
padding: 0;
background: transparent;
border-radius: 0;
color: #fff;
z-index: 20;
pointer-events: none;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 8px rgba(0, 0, 0, 0.5);
}
.card__views .card__icon,
.card__icon--views {
width: 25px; /* requerido */
height: 14px; /* requerido */
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85))
drop-shadow(0 0 8px rgba(0, 0, 0, 0.55));
}
/* (Opcional) Level L1/L2/L3 dentro del contador
.card__level{font-size:10px; line-height:1; padding:2px 6px; border-radius:4px; border:1px solid rgba(255,255,255,.35); opacity:.95;}
.level--low{background:rgba(255,255,255,.06);} .level--mid{background:rgba(255,255,255,.12);} .level--high{background:rgba(255,255,255,.18);}
*/
/* Badge móvil (si lo usas): debajo del contador */
.badge--mobile,
.badge--toy {
display: none !important;
}
/* Badge interactive toy (junto al de mobile) */
.badge--toy {
position: absolute;
top: 34px; /* alineado con el de mobile */
right: 36px; /* desplaza a la izquierda para que no se monten */
width: 22px;
height: 22px;
display: grid;
place-items: center;
border-radius: 3px;
background: rgba(0, 0, 0, 0.35);
z-index: 3;
pointer-events: none;
}
.badge--toy .card__icon {
width: 16px;
height: 16px;
filter: brightness(1.2);
}
/* Labels (NEW / HD / VR) junto a los iconos, sin fondo */
.card__topbar {
position: absolute;
top: 8px;
left: 8px;
display: flex;
align-items: center;
gap: 10px;
z-index: 20;
pointer-events: none;
}
.card__labels {
position: static;
display: flex;
flex-direction: column;
gap: 6px;
}
.label {
display: inline-block;
padding: 2px 6px;
font-size: 12px;
font-weight: 700;
color: #fff;
background: #b4001f;
border-radius: 0;
text-transform: uppercase;
line-height: 1.2;
box-shadow: none;
text-shadow: none; /* legibilidad */
}
.label--new {
color: #fff;
background: #b4001f;
}
.label--hd {
color: #fff;
background: #0073e6;
}
.label--vr {
color: #fff;
background: #008f39;
}
.card__features {
position: static;
display: inline-flex;
align-items: center;
gap: 6px;
z-index: 20;
}
.feature-icon {
width: 30px;
height: auto;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85))
drop-shadow(0 0 8px rgba(0, 0, 0, 0.55));
pointer-events: none;
}
/* Asegura que los viejos badges no aparezcan */
.badge--mobile,
.badge--toy {
display: none !important;
}
/* ===== Bandera: abajo derecha ===== */
.card__corner {
position: absolute;
right: 8px;
bottom: 8px;
display: inline-flex;
align-items: center;
gap: 8px;
z-index: 20;
pointer-events: none;
}
.card__corner .card__flag {
position: static !important; /* anula absolute previos */
width: 26px;
height: 15px;
object-fit: cover;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
clip-path: inset(0.1px);
}
.card__icon--gender {
width: 16px;
height: 16px;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85))
drop-shadow(0 0 8px rgba(0, 0, 0, 0.55));
}
.card__flag {
position: absolute;
right: 8px;
bottom: 8px;
width: 26px;
height: 15px;
object-fit: cover;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
z-index: 3;
pointer-events: none;
}
/* Infobar separada en dos grupos con space-between */
.sp-infobar--split {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.sp-infobar--split .sp-infobar__left {
display: flex;
align-items: center;
gap: 12px;
}
.sp-infobar--split .sp-infobar__right {
display: flex;
align-items: center;
}
/* Sidecard top con space-between: izquierda (avatar+nombre+género) / derecha (bandera) */
.sp-sidecard__top--split {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
}
.sp-sidecard__left {
display: flex;
align-items: center;
gap: 14px;
}
.sp-sidecard__right {
display: flex;
align-items: center;
}
/* Ya tienes tamaños, pero por claridad: */
.sp-sidecard__gender {
width: 18px;
height: auto;
}
.sp-sidecard__flag {
width: 22px;
height: 14px;
object-fit: cover;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}
/* Responsive */
@media (max-width: 480px) {
.card__views {
font-size: 11px;
padding: 3px 5px;
}
.card__views .card__icon {
width: 16px;
height: 16px;
}
.badge--mobile {
top: 32px;
right: 8px;
width: 20px;
height: 20px;
}
.badge--toy {
top: 32px;
right: 36px; /* mantiene separación con el de mobile */
width: 20px;
height: 20px;
}
.card__labels .label {
font-size: 11px;
padding: 2px 5px;
}
.feature-icon {
width: 28px;
}
}
/* ===== END: card.css ===== */
/* ===== BEGIN: profile.css (css/profile.css) ===== */
/* ===== Single Profile Topbar ===== */
.sp-single-topbar {
top: var(--header-h);
width: 100%;
z-index: 60;
background: var(--selector-bg, #1e1f25);
}
.sp-single-topbar__inner {
max-width: none; /* anula el tope de 1400px */
width: 100%;
margin: 0; /* anula margin auto (centrado) */
padding: 0px 12px; /* pequeño padding; ajusta si quieres */
display: flex;
align-items: center;
justify-content: flex-start; /* todo a la izquierda */
gap: 12px;
}
.sp-single-nav {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.sp-single-nav__link {
font-size: 15px;
font-weight: 400;
line-height: 20px;
display: inline-flex;
padding: 0 12px;
text-decoration: none;
opacity: 0.85;
border: 1px solid transparent;
color: inherit;
}
.sp-single-nav__link:hover {
opacity: 1;
}
.sp-fansbtn {
text-decoration: none;
font-weight: 400;
font-size: 14px;
background: rgba(216, 216, 216, 0.23);
color: #fff;
border-radius: 14px;
padding: 5px 15px;
}
.sp-fansbtn:hover {
filter: brightness(0.95);
}
/* ===== Single Profile Content ===== */
/* Single Profile: ocupar el 100% del ancho */
.live-single-page .sp-single-content {
max-width: none;
width: 100%;
margin: 0;
padding: 0;
position: relative;
}
h2.visually-hidden {
margin-left: 7% !important;
}
.sp-profile__cover img {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
}
.sp-profile__header {
display: flex;
gap: 1rem;
align-items: flex-end;
margin-top: -2.5rem;
}
.sp-profile__avatar {
position: relative;
width: 110px;
height: 110px;
border-radius: 50%;
overflow: hidden;
border: 3px solid rgba(255, 255, 255, 0.7);
background: #000;
}
.sp-profile__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sp-badge-live {
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
background: #e53935;
color: #fff;
font-weight: 700;
font-size: 0.75rem;
padding: 0.15rem 0.5rem;
border-radius: 6px;
}
.sp-profile__name {
font-size: 1.8rem;
margin: 0;
}
.sp-profile__sub {
display: flex;
gap: 0.5rem;
margin-top: 0.35rem;
}
.sp-chip {
background: rgba(255, 255, 255, 0.08);
padding: 0.25rem 0.6rem;
border-radius: 999px;
font-size: 0.85rem;
}
.sp-profile__actions {
display: flex;
gap: 0.5rem;
margin-top: 0.75rem;
flex-wrap: wrap;
}
.sp-btn {
padding: 0.5rem 0.9rem;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.15);
background: transparent;
color: inherit;
cursor: pointer;
text-decoration: none;
}
.sp-btn--ghost {
opacity: 0.85;
}
.sp-profile__body {
margin-top: 0; /* opcional, deja todo más pegado */
}
.sp-tab {
display: none;
}
.sp-tab.is-active {
display: block;
}
.sp-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 0.75rem;
}
.sp-tag {
background: #333;
color: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
padding: 0 18px;
border-radius: 37.22px;
font-size: 12px;
font-weight: 400;
line-height: 26.73px;
text-decoration: none;
transition: background 0.3s ease, color 0.3s ease;
}
.sp-tag:hover {
background: #525252;
}
body.live-single-page .selectors,
body.live-single-page .selector-container,
body.live-single-page .selectors-bar,
body.live-single-page .selector__wrapper {
display: none !important;
}
/* ===== Asegurar footer full width y separación ===== */
body.live-single-page .site-footer {
width: 100%;
}
body.live-single-page .site-footer__top {
border-top: 1px solid rgba(255, 255, 255, 0.12); /* línea horizont superior (si el footer no la trae) */
}
/* ===== Topbar: hamburguesa + identidad + fans ===== */
/* Botón hamburguesa (estático) */
.sp-topbar__menu {
width: 34px;
height: 28px;
display: inline-flex;
flex-direction: column;
justify-content: space-between;
background: transparent;
border: 0;
padding: 4px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.sp-topbar__menu:hover {
background-color: rgba(255, 255, 255, 0.1);
transform: scale(1.05);
}
.sp-topbar__menu:active {
transform: scale(0.95);
}
.sp-topbar__menu span {
display: block;
height: 2px;
background: #fff;
border-radius: 2px;
transition: all 0.2s ease;
}
.sp-topbar__menu:hover span {
background: #e44141;
}
/* Avatar + etiqueta de nombre */
.sp-topbar__identity {
display: flex;
align-items: center;
gap: 0;
margin-right: 0.25rem;
overflow: visible; /* evita cortes del borde redondeado */
}
.sp-topbar__avatar {
width: 31px;
height: 31px;
border-radius: 100%;
object-fit: cover;
border: 2px solid #e44141; /* conservamos tu borde */
background: #333;
flex: 0 0 auto;
position: relative;
z-index: 2;
}
.sp-topbar__avatar--placeholder {
width: 31px;
height: 31px;
border-radius: 100%;
background: #444;
}
.sp-topbar__name {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
height: 29px;
margin-left: calc(-52.6px / 2);
padding: 0 calc(14px) 0 calc((52.6px / 2) + 8px);
border-radius: 999px;
background: #000;
color: #fff;
white-space: nowrap;
font-weight: 500;
font-size: 14px;
line-height: 15.4px;
overflow: hidden; /* Necesario para cortar el contenido */
text-overflow: ellipsis; /* Muestra "..." cuando se corta */
max-width: clamp(
120px,
35vw,
280px
); /* Dinámico: se adapta al ancho disponible (35vw) con límites razonables */
min-width: 0; /* IMPORTANTE en flex: permite que el texto se reduzca */
}
/* El texto interno maneja el elipsis correctamente */
.sp-topbar__name-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Tabs (reutiliza las clases existentes) */
.sp-single-nav {
margin-left: 0;
gap: 12px;
}
/* Responsive */
@media (max-width: 768px) {
.sp-single-topbar__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
}
/* Fila superior: menú hamburguesa e identidad */
.sp-topbar__menu {
order: 1;
flex: 0 0 auto;
margin-right: 12px;
}
.sp-topbar__identity {
order: 2;
flex: 0 0 auto;
margin-right: 12px;
}
/* Fila inferior: navegación y botón fans */
.sp-single-nav {
order: 3;
gap: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap !important;
display: flex;
align-items: center;
}
.sp-single-nav__link {
margin-right: 5px;
font-size: 13px;
}
.sp-fansbtn {
order: 4;
flex: 0 0 auto;
padding: 0.45rem 0.75rem;
font-size: 13px;
font-weight: 400 !important;
margin-left: 0;
display: inline-flex;
align-items: center;
}
.sp-topbar__name {
font-size: 0.8rem;
max-width: 30vw; /* Dinámico para tablets: se adapta mejor al espacio disponible */
}
}
.sp-profile__cover img {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
}
.sp-profile__header {
display: flex;
gap: 1rem;
align-items: flex-end;
margin-top: -2.5rem;
}
.sp-profile__avatar {
position: relative;
width: 110px;
height: 110px;
border-radius: 50%;
overflow: hidden;
border: 3px solid rgba(255, 255, 255, 0.7);
background: #000;
}
.sp-profile__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sp-badge-live {
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
background: #e53935;
color: #fff;
font-weight: 700;
font-size: 0.75rem;
padding: 0.15rem 0.5rem;
border-radius: 6px;
}
.sp-profile__name {
font-size: 1.8rem;
margin: 0;
}
.sp-profile__sub {
display: flex;
gap: 0.5rem;
margin-top: 0.35rem;
}
.sp-chip {
background: rgba(255, 255, 255, 0.08);
padding: 0.25rem 0.6rem;
border-radius: 999px;
font-size: 0.85rem;
}
.sp-profile__actions {
display: flex;
gap: 0.5rem;
margin-top: 0.75rem;
flex-wrap: wrap;
}
.sp-btn {
padding: 0.5rem 0.9rem;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.15);
background: transparent;
color: inherit;
cursor: pointer;
text-decoration: none;
}
.sp-btn--ghost {
opacity: 0.85;
}
.sp-profile__body {
margin-top: 1.5rem;
}
.sp-tab {
display: none;
}
.sp-tab.is-active {
display: block;
}
.sp-table {
width: 80%;
margin-left: 7%;
max-width: 500px;
border-collapse: collapse;
margin-top: 0.5rem;
}
.sp-table th,
.sp-table td {
text-align: left;
font-size: 14px;
line-height: 29px;
font-weight: 500;
color: rgba(248, 248, 248, 0.8);
}
.sp-table td {
font-weight: 400;
color: #fff;
}
.sp-tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.75rem;
margin-left: 7%;
width: 93%;
max-width: 680px;
}
.sp-tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.75rem;
}
.sp-hero__frame {
display: flex;
position: relative;
overflow: hidden;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
min-height: 68vh;
}
.consent-modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
height: 100svh;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
box-sizing: border-box;
overflow: hidden;
/* Asegurar centrado perfecto */
place-items: center;
place-content: center;
}
.consent-modal__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.98);
backdrop-filter: blur(15px);
}
.consent-modal__content {
position: relative;
max-width: 600px;
width: 100%;
max-height: 90vh;
max-height: 90svh;
overflow: hidden;
display: flex;
flex-direction: column;
transform: translate3d(0, 0, 0);
background-color: #000000;
color: #ffffff;
text-align: center;
}
.consent-modal__header {
flex: 0 0 auto;
text-align: center;
}
.consent-modal__title {
color: var(--text-on-dark);
font-size: 28px;
font-weight: var(--section-title-weight);
line-height: 1.2;
margin: 0 0 var(--space-3);
}
.consent-modal__icon {
color: var(--color-btn-bg);
opacity: 0.9;
}
.consent-modal__body {
flex: 1 1 auto;
color: var(--muted);
line-height: 1.5;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}
.consent-warning {
border-radius: var(--radius-3);
padding: var(--space-4);
text-align: center;
}
.consent-warning h3 {
color: var(--color-btn-bg);
margin: 0 0 var(--space-2);
font-size: 17px;
font-weight: 700;
}
.consent-warning p {
margin: 0;
font-size: 15px;
color: var(--text-on-dark);
}
.consent-legal {
background: rgba(255, 255, 255, 0.05);
border-radius: var(--radius-2);
padding: var(--space-4);
font-size: 12px;
border-left: 4px solid #4fc3f7;
color: var(--muted);
margin-top: var(--space-3);
}
.consent-modal__content hr {
border-color: #fff;
opacity: 0.15;
}
hr {
margin: var(--space-4) 0;
border: 0;
border-top: 0.0625rem solid rgba(0, 0, 0, 0.1);
}
.consent-legal strong {
color: var(--text-on-dark);
}
.consent-modal__footer {
flex: 0 0 auto;
padding: var(--space-4) var(--space-6) var(--space-6);
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.consent-btn {
flex: 1;
width: 100%;
max-width: 335px;
border: none;
border-radius: var(--radius-pill);
font-weight: 600;
line-height: 1.2;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Responsive */
@media (max-width: 768px) {
.consent-modal {
padding: var(--space-2);
}
.consent-modal__content {
max-height: 90vh;
max-width: 95vw;
border-radius: var(--radius-2);
}
.consent-modal__header {
padding: 16px 0;
}
.consent-modal__body {
padding: 16px 0;
}
.consent-modal__footer {
padding: var(--space-3) var(--space-4) var(--space-4);
flex-direction: column;
gap: var(--space-2);
}
.consent-modal__title {
font-size: 24px;
}
.consent-warning {
padding: 12px 0;
}
.consent-requirements {
margin-bottom: var(--space-3);
}
}
@media (max-width: 480px) {
.consent-modal__title {
font-size: 22px;
}
.consent-modal__header {
padding: var(--space-3) var(--space-3) var(--space-2);
}
.consent-modal__body {
padding: var(--space-2) var(--space-3);
}
.consent-modal__footer {
padding: var(--space-2) var(--space-3) var(--space-3);
}
.consent-warning {
padding: var(--space-3);
}
.consent-legal {
padding: var(--space-3);
}
}
/* ===== END: consent.css ===== */
/* ===== BEGIN: sidebar.css (css/sidebar.css) ===== */
/* =================== Base =================== */
/* Overlay global: cubre toda la ventana y se activa con .sidebar-open en */
.sidebar-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
background: rgba(0, 0, 0, 0.55);
transition: opacity 0.3s ease, visibility 0.3s ease;
z-index: 10000; /* por encima de header (50) y selectores (59) */
}
/* Al abrir (JS añade .is-open) */
.sidebar-overlay.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto; /* ahora sí capta el click para cerrar */
}
.sidebar__inner {
position: relative;
padding: 10px;
}
.sidebar__close {
position: sticky;
top: 10px;
right: 10px;
margin-left: auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
font-size: 30px;
line-height: 1;
cursor: pointer;
z-index: 10002;
float: right;
background: transparent;
color: #fff;
border: none;
margin-bottom: -40px;
}
.sidebar__auth-buttons {
display: none;
grid-template-columns: 1fr;
gap: 12px;
margin: 8px 0 16px;
}
.sidebar__auth-btn {
display: block;
width: 100%;
padding: 12px 16px;
border-radius: 999px;
text-align: center;
font-weight: 700;
}
.sidebar__auth-btn#btnRegisterMobile {
background: var(--color-accent, #e11d2e);
color: #fff;
border: 0;
}
.sidebar__auth-btn#btnLoginMobile {
background: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.22);
}
.sidebar__selectors {
margin-bottom: 16px;
}
/* Alineados y rellenos: NO tocar padding de .sidebar__inner */
.sidebar {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Títulos y listas */
.sidebar__title {
margin-top: 20px;
margin-bottom: 20px;
padding-left: var(--sb-title-left) !important;
font-weight: 700;
font-size: 20px;
}
.sidebar__sections {
display: grid;
margin: 0;
padding: 0;
width: 100%;
}
.sidebar__section {
display: grid;
gap: 8px;
margin: 0;
padding: 0;
}
.sidebar__heading {
display: block;
color: #fff;
font-weight: 700;
font-size: 19.1px;
line-height: var(--cat-title-lh);
opacity: 0.95;
padding: 0 var(--sb-pad-x);
}
.sidebar__list {
list-style: none;
margin: 0;
padding: 0;
display: block;
}
.sidebar__list li {
margin: 0;
padding: 0;
}
.sidebar__link {
display: block;
width: 100%;
padding: 0 var(--sb-pad-x);
border-radius: 0;
border: none;
text-decoration: none;
color: #fff;
font-weight: 500;
font-size: 19.1px;
line-height: 41.4px;
opacity: 0.9;
transition: background 0.18s ease, opacity 0.18s ease, color 0.18s ease;
}
.sidebar__link:hover {
opacity: 1;
}
.sidebar__link.is-active {
background: var(--color-btn-bg);
color: #fff;
border-radius: 0;
opacity: 1;
box-shadow: inset 0 0 0 9999px var(--color-btn-bg);
}
/* Divisor centrado */
.sidebar__divider {
display: block;
height: 1.19px;
width: 85%;
background: #505050;
border: 0;
margin: 12px auto;
opacity: 0.9;
}
/* (Igual que antes) Ocultar botón de cerrar en móvil <=768px */
@media (max-width: 768px) {
#sidebarClose {
}
}
/* ===== END: sidebar.css ===== */
/* ===== BEGIN: footer.css (css/footer.css) ===== */
/* ==============================
FOOTER
============================== */
.site-footer {
background: var(--color-footer-bg);
padding: 25px 10px;
border-top: 1px solid #1a1a1a;
min-height: 450px;
display: flex;
flex-direction: column;
align-items: center;
}
.site-footer__top {
display: flex;
flex-direction: column;
gap: 20px;
align-items: stretch;
flex: 1;
padding-top: 0px;
max-width: 1440px;
width: 100%;
}
.brand--footer {
display: inline-flex;
align-items: center;
}
.brand--footer .brand__img {
width: 332px;
height: 66px;
object-fit: contain;
}
.site-footer__cols {
display: flex;
gap: 32px;
overflow: visible;
}
.footer-col--brand {
display: flex;
justify-content: center;
align-items: center;
margin-left: auto;
}
.footer-brand {
margin-top: 0;
text-align: center;
}
.footer-col__title {
margin: 0 0 20px 0;
padding: 6px 0;
color: #fff;
font-size: 16px;
line-height: 1;
font-weight: 600;
text-transform: uppercase;
position: relative;
}
@media (max-width: 768px) {
.footer-col__title {
margin: 0;
padding: 15px 0;
}
}
.footer-panel {
overflow: visible;
max-height: none;
opacity: 1;
transform: none;
}
.footer-list {
list-style: none;
margin: 0;
padding: 0;
}
.footer-list__item {
margin: 6px 0;
}
/* Espaciado específico para elementos con iconos en WORK WITH US */
.footer-list__item img {
vertical-align: middle;
margin-right: 8px;
}
.footer-list__item a {
display: flex;
align-items: center;
}
/* Acordeón “Categorías” */
.footer-accordion__trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 0;
background: none;
border: 0;
color: #fff;
font-weight: 400;
font-size: 20px;
line-height: 24px;
text-align: left;
}
.footer-accordion__panel {
overflow: visible;
max-height: none;
visibility: visible;
padding-left: var(--footer-indent-1);
margin: 8px 0 0 0;
}
.footer-accordion__panel[hidden] {
display: block;
}
.footer-accordion__panel li {
list-style: none;
}
.footer-accordion__panel a,
.footer-accordion__panel li {
font-weight: 400;
font-size: var(--footer-link-size);
line-height: var(--footer-link-lh);
color: #fff;
text-decoration: none;
opacity: 1;
transform: none;
}
.footer-accordion__panel a:hover {
font-weight: 500;
}
.footer-sublist {
margin: 6px 0 0 var(--footer-indent-2);
list-style: none;
padding: 0;
}
.footer-accordion__panel li {
position: relative;
padding-left: calc(var(--footer-bullet-size) + var(--footer-bullet-gap));
}
.footer-accordion__panel li::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: var(--footer-bullet-size);
height: var(--footer-bullet-size);
border-radius: 50%;
background: #ef2525;
}
/* Divider + disclaimer */
.site-footer__divider {
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.3);
margin: 24px 0;
opacity: 0.9;
width: 100%;
max-width: 1440px;
}
.site-footer__bottom {
display: grid;
place-items: center;
margin-top: auto;
max-width: 1440px;
}
.disclaimer {
margin: 0;
text-align: center;
font-weight: 400;
font-size: 12px;
padding: 6px 11.2px;
color: rgba(255, 255, 255, 0.3);
opacity: 0.85;
}
/* Alineados de HOME y triggers */
.site-footer .footer-accordion__trigger {
padding-left: var(--footer-indent-1);
}
.site-footer .footer-list > .footer-list__item > a {
display: inline-block;
padding-left: var(--footer-indent-1);
}
.footer-col ul li a,
.footer-sitemap-link {
font-size: 14px !important;
line-height: 30px !important;
color: rgba(255, 255, 255, 0.5) !important;
text-decoration: none;
display: block;
transition: color 0.3s ease;
}
.footer-col ul li a:hover,
.footer-sitemap-link:hover {
color: rgba(255, 255, 255, 0.8) !important;
}
hr.sitemap-footer__divider {
border: none;
height: 2px;
background: linear-gradient(
90deg,
transparent,
var(--color-btn-bg),
transparent
);
margin: 0;
width: 80%;
max-width: 600px;
}
@media (max-width: 499px) {
.site-footer__cols {
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
padding: 0;
}
.footer-col:not(.footer-col--brand) {
width: 100%;
}
.footer-col__title {
padding: 15px 20px !important;
margin: 0 !important;
}
.site-footer .footer-list > .footer-list__item > a {
padding-left: 0;
}
.footer-panel {
padding: 0 20px;
}
.footer-list {
padding: 10px 0;
}
.footer-col.footer-col--brand {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 30px !important;
padding: 0 20px;
text-align: center;
}
.brand--footer .brand__img {
width: 240px;
height: 48px;
}
.footer-accordion__trigger {
font-size: 14px;
}
.site-footer .footer-col ul a {
font-size: 14px;
}
.footer-list__item {
font-size: 14px;
}
a.brand.brand--footer img {
width: 200px !important;
}
.site-footer {
min-height: 400px;
padding: 50px 20px;
}
}
/* --- FOOTER: estado abierto en móviles/tablet --- */
@media (max-width: 768px) {
.footer-col.is-open .footer-panel {
max-height: 2000px; /* o un valor suficiente para tu contenido */
overflow: visible;
}
}
/* ===== END: footer.css ===== */
.sp-hero {
display: grid;
grid-template-columns: 3fr 1fr;
align-items: stretch;
width: 100%;
}
.sp-hero__media {
position: relative;
}
.sp-hero__img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16/10;
object-fit: cover;
filter: saturate(1.05) contrast(1.02);
}
.sp-hero__video {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16/10;
object-fit: cover;
filter: saturate(1.05) contrast(1.02);
background-color: #000;
}
/* Play centrado */
.sp-hero__play {
position: absolute;
inset: 0;
display: grid;
place-items: center;
text-decoration: none;
}
.sp-hero__play img {
width: 88px;
height: 88px;
display: block;
filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.6));
transition: transform 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
opacity: 0.95;
}
.sp-hero__play:hover img {
transform: scale(1.03);
filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.65));
opacity: 1;
}
/* Columna derecha contenedora */
.sp-hero__right {
display: flex;
flex-direction: column;
gap: 18px;
}
/* Barra gris con avatar, nombre, género y bandera */
:root {
--profile-bar-bg: #3b3c40;
} /* ajusta si quieres más claro/oscuro */
.sp-infobar {
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: 12px;
background: var(--profile-bar-bg);
border-radius: 0;
min-height: 54px;
padding: 10px 16px;
}
/* Avatar redondo superpuesto (con LIVE) */
.sp-infobar__avatar {
position: relative;
width: 64px;
height: 64px;
border-radius: 999px;
overflow: hidden;
border: 3px solid #e44141;
background: #000;
transform: translateY(-16px); /* mismo look del mockup (avatar solapado) */
}
.sp-infobar__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sp-infobar__live {
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
background: #e53935;
color: #fff;
font-weight: 800;
font-size: 11px;
padding: 2px 8px;
border-radius: 8px;
}
/* Nombre + iconos a la derecha */
.sp-infobar__name {
font: 700 22px/1 var(--ff-inter, system-ui);
margin: 0;
}
.sp-infobar__gender {
width: 18px;
height: 18px;
}
.sp-infobar__flag {
width: 22px;
height: 14px;
object-fit: cover;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}
/* Sidecard/identidad */
.sp-hero__side {
display: flex;
}
.sp-sidecard {
width: 100%;
}
.sp-sidecard__top {
width: 100%;
position: relative;
display: flex;
gap: 14px;
align-items: center;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
min-height: 48px;
}
.sp-sidecard__avatar {
position: relative;
width: 74px;
height: 74px;
border-radius: 999px;
overflow: hidden;
border: 3px solid #e44141;
background: #000;
flex: 0 0 auto;
}
.sp-sidecard__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sp-sidecard__live {
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
background: #e53935;
color: #fff;
font-weight: 800;
font-size: 11px;
padding: 2px 8px;
border-radius: 8px;
letter-spacing: 0.02em;
box-shadow: 0 2px 8px rgba(229, 57, 53, 0.45);
}
.sp-sidecard__id {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.sp-sidecard__row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.sp-sidecard__gender {
width: 18px;
height: 18px;
}
.sp-sidecard__flag {
width: 22px;
height: 14px;
object-fit: cover;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.sp-sidecard__meta {
font: 500 13px/1 var(--ff-inter);
opacity: 0.9;
}
@media (max-width: 1280px) {
.sp-hero {
grid-template-columns: 2fr 1fr;
}
}
/* Responsive */
@media (max-width: 1024px) {
.live-single-page .sp-single-content {
padding: 0;
}
.sp-hero {
grid-template-columns: 1fr;
}
.sp-hero__img {
aspect-ratio: 16/9;
}
}
.sp-single-nav {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.sp-sidecard__top--live {
border: 3px solid #e44141;
}
.sp-sidecard__content {
position: relative;
background-color: #212121;
height: 62px !important;
min-height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 16px;
}
.sp-sidecard__top .sp-sidecard__left {
display: flex;
align-items: center;
gap: 14px;
margin-left: 5%;
}
.sp-sidecard__top .sp-sidecard__right {
display: flex;
align-items: center;
gap: 12px;
}
.sp-sidecard__avatar-wrapper {
display: none;
position: relative;
width: 74px;
height: 74px;
flex: 0 0 auto;
top: -12px;
}
.sp-sidecard__top .sp-sidecard__avatar {
position: relative;
width: 74px;
height: 74px;
border-radius: 50%;
overflow: hidden;
border: 3px solid #ef2525;
background: #000;
}
.sp-sidecard__avatar-wrapper .sp-sidecard__live {
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
background: #e53935;
color: #fff;
font-weight: 800;
font-size: 11px;
padding: 2px 8px;
border-radius: 8px;
z-index: 100;
white-space: nowrap;
}
.sp-sidecard__top .sp-sidecard__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sp-sidecard__top .sp-sidecard__name {
font-weight: 600;
font-size: 18px;
line-height: 1;
margin: 0;
color: #fff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.sp-related-models__title {
font-size: 18px;
font-weight: 600;
line-height: 1;
color: #fff;
text-align: center;
margin-bottom: 30px;
position: relative;
}
/*????????*/
.sp-related-models__title::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(90deg, #a1031a, #d4041f);
border-radius: 2px;
}
.tags-title {
font-weight: 600;
font-size: 18px;
line-height: 1;
width: 93%;
margin-left: 7%;
}
.sp-sidecard__top .sp-sidecard__gender {
width: auto;
height: 33px;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}
.sp-sidecard__top .sp-sidecard__flag {
width: 35.32px;
height: 20px;
object-fit: cover;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
border-radius: 2px;
}
.sp-sidecard__live-badge {
background: #e44141;
color: #fff;
font-weight: 800;
font-size: 12px;
padding: 4px 8px;
border-radius: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(229, 57, 53, 0.45);
}
.sp-sidecard__row {
display: flex;
align-items: center;
gap: 12px;
}
/* ===== SIDEBAR CATEGORIES & TAGS ===== */
.sidebar__category {
padding: 15px 0 15px 0;
border-bottom: 1px solid rgba(248, 248, 248, 0.5);
}
.sidebar__category-title {
display: block;
color: rgba(248, 248, 248, 0.5);
font-weight: 500;
font-size: 12px;
line-height: 1.2;
opacity: 0.95;
padding: 0 10px;
margin: 0 0 12px 0;
text-transform: uppercase;
}
.sidebar__tags {
list-style: none;
margin: 0;
padding: 0;
display: block;
}
.sidebar__tag-item {
margin: 0;
padding: 0;
}
.sidebar__tag-link {
display: flex;
align-items: center;
width: 100%;
padding: 0 10px;
border-radius: 0;
border: none;
text-decoration: none;
color: #fff;
font-weight: 500;
font-size: 15px;
line-height: 41.4px;
opacity: 0.9;
transition: background 0.18s ease, opacity 0.18s ease, color 0.18s ease;
gap: 8px;
}
.sidebar__tag-link:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.05);
}
.sidebar__tag-link.is-active,
.sidebar__tag-item.is-active .sidebar__tag-link {
background: #ef2525;
color: #fff;
border-radius: 0;
opacity: 1;
box-shadow: inset 0 0 0 9999px #ef2525;
}
.sidebar__tag-icon {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.sidebar__tag-icon svg {
width: 100%;
height: 100%;
fill: currentColor;
}
a.sidebar__tag-link {
padding: 6px 10px;
font-size: 13px;
font-weight: 400;
line-height: 16px;
}
.sidebar__tag-flag {
width: 20px;
height: auto;
vertical-align: middle;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.sidebar__empty {
color: #b9b9b9;
font-style: italic;
padding: 0 var(--sb-pad-x);
margin: 0;
font-size: 16px;
opacity: 0.7;
}
/* ===== BEGIN: 404.css (404 Page Styles) ===== */
/* ==============================
404 ERROR PAGE
============================== */
.error-page {
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--color-black);
}
.page-404 {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 100px 0;
background: var(--color-black);
}
.error-404 {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-8);
align-items: center;
max-width: 800px;
width: 100%;
text-align: left;
}
.error-404__content {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.error-404__number {
font-weight: 700;
font-size: 120px;
line-height: 1;
color: var(--color-btn-bg);
text-shadow: 0 0 20px rgba(161, 3, 26, 0.3);
margin: 0;
}
.error-404__title {
font-weight: var(--section-title-weight);
font-size: var(--section-title-size);
line-height: var(--section-title-lh);
color: var(--text-on-dark);
margin: 0;
}
.error-404__description {
font-size: 18px;
line-height: 1.5;
color: var(--muted);
margin: 0;
max-width: 400px;
}
.error-404__actions {
display: flex;
gap: var(--space-4);
flex-wrap: wrap;
margin-top: var(--space-4);
}
.error-404__illustration {
display: flex;
align-items: center;
justify-content: center;
opacity: 0.6;
}
.error-404__icon {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
border-radius: 50%;
background: rgba(161, 3, 26, 0.1);
border: 2px solid rgba(161, 3, 26, 0.2);
}
.error-404__icon img {
opacity: 0.7;
filter: drop-shadow(0 0 10px rgba(161, 3, 26, 0.3));
}
@media (max-width: 480px) {
.page-404 {
padding: var(--space-6) 0;
}
.error-404__number {
font-size: 60px;
}
.error-404__title {
font-size: 24px;
}
.error-404__description {
font-size: 16px;
}
.error-404__actions {
flex-direction: column;
align-items: center;
}
.error-404__actions .btn {
width: 100%;
max-width: 280px;
justify-content: center;
}
.error-404__icon {
width: 120px;
height: 120px;
}
.error-404__icon img {
width: 60px;
height: 60px;
}
}
/* ===== END: 404.css ===== */
/* ===== BEGIN: chat-section.css ===== */
/* ==============================
CHAT SECTION (Profile Page)
============================== */
.sp-chat-section {
padding: 24px;
border-radius: var(--radius-3);
backdrop-filter: blur(10px);
}
.sp-chat-header {
text-align: center;
margin-bottom: 20px;
}
.sp-chat-title {
font-weight: 700;
font-size: 20px;
line-height: 1.2;
color: var(--color-white);
margin: 0 0 8px 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.sp-chat-subtitle {
font-weight: 400;
font-size: 14px;
line-height: 1.4;
color: var(--muted);
margin: 0;
opacity: 0.9;
}
.sp-chat-actions {
display: flex;
gap: 12px;
justify-content: center;
align-items: center;
white-space: nowrap;
}
.sp-chat-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 20px;
border-radius: var(--radius-pill);
font-weight: 600;
font-size: 16px;
line-height: 1;
text-decoration: none;
transition: all 0.3s ease;
border: none;
cursor: pointer;
min-width: 140px;
justify-content: center;
position: relative;
overflow: hidden;
}
.sp-chat-btn::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: left 0.5s ease;
}
.sp-chat-btn:hover::before {
left: 100%;
}
.sp-chat-btn--primary {
background: linear-gradient(135deg, var(--color-btn-bg) 0%, #c41e3a 100%);
color: var(--color-white);
box-shadow: 0 4px 15px rgba(161, 3, 26, 0.4);
}
.sp-chat-btn--primary:hover {
background: linear-gradient(135deg, #8a0216 0%, #a1031a 100%);
box-shadow: 0 6px 20px rgba(161, 3, 26, 0.6);
transform: translateY(-2px);
color: var(--color-white);
}
.sp-chat-btn--secondary {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.1) 0%,
rgba(255, 255, 255, 0.05) 100%
);
color: var(--color-white);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.sp-chat-btn--secondary:hover {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0.1) 100%
);
border-color: rgba(255, 255, 255, 0.3);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
transform: translateY(-2px);
color: var(--color-white);
}
.sp-chat-btn__icon {
width: 20px;
height: 20px;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.sp-chat-btn:hover .sp-chat-btn__icon {
transform: scale(1.1);
}
/* Responsive */
@media (max-width: 768px) {
.sp-chat-section {
margin-top: 16px;
padding: 20px 16px;
}
.sp-chat-actions {
flex-direction: row;
gap: 12px;
}
.sp-chat-actions a {
font-size: 14px;
}
.sp-chat-btn {
width: 100%;
max-width: 280px;
padding: 14px 24px;
font-size: 16px;
}
.sp-chat-title {
font-size: 18px;
}
.sp-chat-subtitle {
font-size: 13px;
}
}
@media (max-width: 480px) {
.sp-chat-section {
margin-top: 12px;
padding: 16px 8px;
}
.sp-chat-btn {
padding: 10px 20px;
font-size: 15px;
min-width: 120px;
width: 50%;
}
.sp-chat-title {
font-size: 16px;
}
.sp-chat-subtitle {
font-size: 12px;
}
.sp-chat-actions {
gap: 8px;
width: 100%;
}
}
/* ===== END: chat-section.css ===== */
/* ===== BEGIN: related-models.css ===== */
section.sp-related-models {
margin: 0 0 30px 0;
}
/* Grid base: móvil primero (2 columnas, muestra TODAS las cartas) */
.sp-related-models__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4, 16px);
}
@media (min-width: 901px) {
.sp-related-models__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
grid-template-rows: repeat(3, auto); /* o 1fr para alturas iguales */
padding: 20px 20px;
}
.sp-related-models__grid > *:nth-child(n + 19) {
display: none !important; /* Solo 18 visibles en escritorio */
}
#relatedModelsGrid.sp-related-models__grid > .card {
width: 100%;
height: 100%;
}
}
/* Escritorio: 6 columnas, oculta todo lo que pase de 18 (6x3) */
@media (max-width: 900px) {
.sp-related-models__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(6, auto); /* o 1fr para alturas iguales */
padding: 0 20px;
}
.sp-related-models__grid > *:nth-child(n + 19) {
display: none !important; /* Solo 18 visibles en escritorio */
}
#relatedModelsGrid.sp-related-models__grid > .card {
width: 100%;
height: 100%;
}
}
@media (max-width: 500px) {
.sp-related-models__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
padding: 0 20px;
gap: 10px;
}
#relatedModelsGrid.sp-related-models__grid > .card {
width: 100%;
height: 100%;
}
/* Permitir que se muestren todas las cards en móvil */
.sp-related-models__grid > *:nth-child(n + 19) {
display: block !important;
}
}
/* Related Model Card Styles */
.sp-related-card {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
position: relative;
border: 1px solid #f0f0f0;
}
.sp-related-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.sp-related-card__image-container {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
.sp-related-card__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.sp-related-card:hover .sp-related-card__image {
transform: scale(1.05);
}
.sp-related-card__labels {
position: absolute;
top: 10px;
left: 10px;
display: flex;
gap: 5px;
flex-wrap: wrap;
}
.sp-related-card__label {
background: rgba(161, 3, 26, 0.9);
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sp-related-card__label--new {
background: rgba(40, 167, 69, 0.9);
}
.sp-related-card__label--hd {
background: rgba(0, 123, 255, 0.9);
}
.sp-related-card__label--vr {
background: rgba(108, 117, 125, 0.9);
}
.sp-related-card__features {
position: absolute;
top: 10px;
right: 10px;
display: flex;
gap: 5px;
}
.sp-related-card__feature-icon {
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
}
.sp-related-card__viewers {
position: absolute;
bottom: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 4px 8px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 4px;
}
.sp-related-card__content {
padding: 15px;
}
.sp-related-card__username {
font-size: 1.1rem;
font-weight: 600;
color: #333;
margin-bottom: 8px;
text-decoration: none;
display: block;
transition: color 0.3s ease;
}
.sp-related-card__username:hover {
color: #a1031a;
}
.sp-related-card__details {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.sp-related-card__age {
font-size: 0.9rem;
color: #666;
font-weight: 500;
}
.sp-related-card__gender {
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
color: white;
}
.sp-related-card__gender--female {
background: #e91e63;
}
.sp-related-card__gender--male {
background: #2196f3;
}
.sp-related-card__gender--couple {
background: #9c27b0;
}
.sp-related-card__gender--trans {
background: #ff9800;
}
.sp-related-card__country {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.85rem;
color: #777;
}
.sp-related-card__flag {
width: 16px;
height: 12px;
border-radius: 2px;
object-fit: cover;
}
@media (max-width: 768px) {
.sp-related-models {
padding: 30px 15px;
margin: 20px 0;
}
.sp-related-card__image-container {
height: 180px;
}
.sp-related-card__content {
padding: 12px;
}
}
/* ===== END: related-models.css ===== */
/* ===== Video Overlay Blur Layer ===== */
.sp-video-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
border-radius: inherit;
animation: fadeInOverlay 0.5s ease-out;
}
@keyframes fadeInOverlay {
from {
opacity: 0;
backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);
}
to {
opacity: 1;
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
}
}
.sp-overlay-content {
text-align: center;
color: var(--color-white);
max-width: 320px;
padding: 2rem;
background: rgba(23, 22, 28, 0.95);
border-radius: 16px;
border: 1px solid rgba(161, 3, 26, 0.3);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.sp-overlay-icon {
margin-bottom: 1rem;
color: var(--color-btn-bg);
display: flex;
justify-content: center;
}
.sp-overlay-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--color-white);
line-height: 1.3;
}
.sp-overlay-message {
font-size: 0.95rem;
margin-bottom: 1.5rem;
color: var(--muted);
line-height: 1.5;
}
.sp-overlay-btn {
display: inline-block;
background: linear-gradient(135deg, var(--color-btn-bg) 0%, #c41e3a 100%);
color: var(--color-white);
padding: 0.75rem 1.5rem;
border-radius: var(--radius-pill);
text-decoration: none;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.3s ease;
border: none;
cursor: pointer;
box-shadow: 0 4px 15px rgba(161, 3, 26, 0.4);
}
.sp-overlay-btn:hover {
background: linear-gradient(135deg, #8a0216 0%, #a1031a 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(161, 3, 26, 0.6);
color: var(--color-white);
text-decoration: none;
}
.sp-overlay-btn:active {
transform: translateY(0);
}
/* Responsive adjustments */
@media (max-width: 768px) {
.sp-overlay-content {
max-width: 280px;
padding: 1.5rem;
}
.sp-overlay-title {
font-size: 1.3rem;
}
.sp-overlay-message {
font-size: 0.9rem;
}
.sp-overlay-btn {
padding: 0.7rem 1.3rem;
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.sp-overlay-content {
max-width: 260px;
padding: 1.25rem;
}
.sp-overlay-title {
font-size: 1.2rem;
}
.sp-overlay-message {
font-size: 0.85rem;
margin-bottom: 1.25rem;
}
}
/* ===== END: Video Overlay Blur Layer ===== */
/* ===== Offline Notice - Elegant Design ===== */
.sp-offline-notice {
position: relative;
width: 100%;
height: 68vh;
aspect-ratio: 16/10;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: #000;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}
.sp-offline-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.sp-offline-bg-img {
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(2px) brightness(0.3) saturate(0.8);
}
.sp-offline-content {
position: relative;
z-index: 2;
text-align: center;
padding: 2.5rem 2rem;
background: rgba(30, 31, 37, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
max-width: 480px;
width: 90%;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.sp-offline-icon {
margin-bottom: 1.5rem;
color: var(--color-btn-bg, #e44141);
opacity: 0.9;
display: flex;
justify-content: center;
}
.sp-offline-icon svg {
filter: drop-shadow(0 2px 8px rgba(228, 65, 65, 0.3));
}
.sp-offline-title {
font: 700 24px/1.2 var(--ff-inter, var(--ff-inter, system-ui));
margin-bottom: 1rem;
color: var(--color-white, #ffffff);
letter-spacing: -0.02em;
}
.sp-offline-message {
font: 400 15px/1.5 var(--ff-inter, system-ui);
margin-bottom: 2rem;
color: var(--muted, rgba(255, 255, 255, 0.85));
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.sp-offline-actions {
margin-top: 20px;
display: flex;
gap: 12px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.sp-offline-btn {
display: inline-flex;
align-items: center;
padding: 12px 24px;
border-radius: var(--radius-btn, 8px);
text-decoration: none;
font: 600 14px/1 var(--ff-inter, var(--ff-inter, system-ui));
transition: all 0.2s ease;
border: none;
cursor: pointer;
letter-spacing: 0.01em;
min-width: 140px;
justify-content: center;
}
.sp-offline-btn--primary {
background: linear-gradient(
135deg,
var(--color-btn-bg, #e44141) 0%,
#c73333 100%
);
color: var(--color-white, #ffffff);
box-shadow: 0 2px 8px rgba(228, 65, 65, 0.25);
}
.sp-offline-btn--primary:hover {
background: linear-gradient(135deg, #f04848 0%, #d63939 100%);
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(228, 65, 65, 0.35);
color: var(--color-white, #ffffff);
text-decoration: none;
}
.sp-offline-btn--secondary {
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(255, 255, 255, 0.15);
}
.sp-offline-btn--secondary:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.25);
color: var(--color-white, #ffffff);
transform: translateY(-1px);
text-decoration: none;
}
/* Responsive Design */
@media (max-width: 980px) {
.sp-offline-notice {
position: relative;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: auto;
width: 100%;
height: 100%;
max-height: 100vh;
max-height: 100svh;
overflow: hidden;
}
}
@media (max-width: 768px) {
.sp-offline-content {
padding: 2rem 1.5rem;
margin: 1rem;
border-radius: 12px;
}
.sp-offline-title {
font-size: 20px;
}
.sp-offline-message {
font-size: 14px;
}
.sp-offline-actions {
flex-direction: column;
gap: 10px;
align-items: center;
justify-content: center;
}
.sp-offline-btn {
width: 100%;
max-width: 240px;
}
}
@media (max-width: 480px) {
.sp-offline-content {
padding: 1.5rem 1rem;
}
.sp-offline-title {
font-size: 18px;
}
.sp-offline-message {
font-size: 13px;
margin-bottom: 1.5rem;
}
.sp-offline-icon {
margin-bottom: 1rem;
}
.sp-offline-icon svg {
width: 48px;
height: 48px;
}
}
/* ===== END: Offline Notice ===== */
.seccion-live h2 a {
color: #fff;
text-decoration: none;
}
/* Controles personalizados del video sp-hero__video - Solo volumen */
.sp-hero__video {
cursor: default;
}
/* Ocultar todos los controles excepto volumen */
.sp-hero__video::-webkit-media-controls-play-button {
display: none !important;
}
.sp-hero__video::-webkit-media-controls-start-playback-button {
display: none !important;
}
.sp-hero__video::-webkit-media-controls-timeline {
display: none !important;
}
.sp-hero__video::-webkit-media-controls-current-time-display {
display: none !important;
}
.sp-hero__video::-webkit-media-controls-time-remaining-display {
display: none !important;
}
.sp-hero__video::-webkit-media-controls-fullscreen-button {
display: none !important;
}
/* Mantener solo los controles de volumen visibles */
.sp-hero__video::-webkit-media-controls-mute-button {
display: block !important;
}
.sp-hero__video::-webkit-media-controls-volume-slider {
display: block !important;
}
a.card.offline .card__media .card__img {
filter: blur(15px) !important;
}
.card.offline .card__info {
display: flex;
align-items: center;
justify-content: flex-start;
padding-top: calc(50% - 10px);
}
.card.offline .card__topbar,
.card.offline .card__views {
display: none;
}
.card.offline .card__info .card__user:after {
content: " is offiline";
}
.card.offline .card__info .card__row:before {
content: "This model is currently unavailable. You can visit her later or browse other models online.";
text-align: center;
}
/* ===== CONTEXT-SPECIFIC STYLES ===== */
/* Hide footer in default context */
.sp-context-default .site-footer {
display: none;
}
/* ===== ACTIVE SELECTOR STYLING ===== */
/* Active selector styling */
.selector-item--active .selector-item__icon {
filter: brightness(0) saturate(100%) invert(8%) sepia(95%) saturate(7482%)
hue-rotate(351deg) brightness(89%) contrast(108%);
}
/* Alternative method using CSS variables if SVGs support it */
.selector-item--active .selector-item__icon[src*=".svg"] {
filter: brightness(0) saturate(100%) invert(8%) sepia(95%) saturate(7482%)
hue-rotate(351deg) brightness(89%) contrast(108%);
}
/* ===== TAGS PAGE SPECIFIC STYLES ===== */
.sp-context-tags .tags-page-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
min-height: calc(100vh - 200px);
}
.sp-context-tags .tags-page-header {
text-align: center;
margin-bottom: 40px;
}
.sp-context-tags .tags-page-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--color-text-primary);
margin-bottom: 10px;
}
.sp-context-tags .tags-page-subtitle {
font-size: 1.1rem;
color: var(--color-text-secondary);
margin-bottom: 30px;
}
.sp-context-tags .tags-navigation {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.sp-context-tags .tags-nav-item {
padding: 12px 24px;
background: var(--color-bg-secondary);
color: var(--color-text-primary);
text-decoration: none;
border-radius: 25px;
font-weight: 500;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.sp-context-tags .tags-nav-item:hover {
background: var(--color-primary);
color: white;
text-decoration: none;
}
.sp-context-tags .tags-nav-item.active {
background: var(--color-primary);
color: white;
border-color: var(--color-primary);
}
.sp-context-tags .tags-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 40px;
}
.sp-context-tags .tag-item {
background: var(--color-bg-secondary);
border-radius: 12px;
padding: 20px;
text-align: center;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.sp-context-tags .tag-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
border-color: var(--color-primary);
}
.sp-context-tags .tag-link {
text-decoration: none;
color: inherit;
display: block;
}
.sp-context-tags .tag-name {
font-size: 1.2rem;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 8px;
/* Reset h3 default styles */
margin: 0 0 8px 0;
padding: 0;
line-height: inherit;
}
.sp-context-tags .tag-count {
font-size: 0.9rem;
color: var(--color-text-secondary);
}
.sp-context-tags .category-section {
margin-bottom: 50px;
}
.sp-context-tags .category-title {
font-size: 2rem;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 25px;
text-align: center;
text-transform: capitalize;
}
.sp-context-tags .no-tags-message {
text-align: center;
padding: 60px 20px;
color: var(--color-text-secondary);
font-size: 1.1rem;
}
@media (max-width: 768px) {
.sp-context-tags .tags-page-container {
padding: 15px;
}
.sp-context-tags .tags-page-title {
font-size: 2rem;
}
.sp-context-tags .tags-navigation {
gap: 10px;
}
.sp-context-tags .tags-nav-item {
padding: 10px 18px;
font-size: 0.9rem;
}
.sp-context-tags .tags-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
}
}
/* ===== BEGIN: legal-pages.css ===== */
/* ==============================
LEGAL PAGES (Privacy, Terms, Cookies, 2257 Compliance)
============================== */
.legal-page {
max-width: 1200px;
margin: 107px auto;
padding: 40px 20px;
font-family: var(
--ff-inter,
"Inter",
system-ui,
-apple-system,
Segoe UI,
Roboto,
Arial,
sans-serif
);
line-height: 1.6;
color: var(--text-on-dark, #ffffff);
background: var(--color-black, #000000);
min-height: calc(100vh - 200px);
}
.legal-hero {
text-align: center;
margin-bottom: 60px;
padding: 60px 0;
background: linear-gradient(
135deg,
var(--color-btn-bg, #a1031a) 0%,
#660011 100%
);
color: var(--color-white, #ffffff);
border-radius: var(--radius-3, 12px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.legal-hero h1 {
font-size: var(--section-title-size, 36px);
font-weight: var(--section-title-weight, 700);
margin: 0 0 20px 0;
color: var(--color-white, #ffffff);
}
.legal-hero p {
font-size: 20px;
margin: 0;
opacity: 0.9;
font-weight: 300;
}
.legal-content {
background: rgba(23, 22, 28, 0.8);
padding: 60px;
border-radius: var(--radius-3, 12px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.legal-content h2 {
color: var(--color-white, #ffffff);
font-size: 24px;
font-weight: 600;
margin: 40px 0 20px 0;
padding-bottom: 10px;
border-bottom: 2px solid var(--color-btn-bg, #a1031a);
}
.legal-content h3 {
color: var(--color-white, #ffffff);
font-size: 20px;
font-weight: 500;
margin: 30px 0 15px 0;
}
.legal-content p {
margin-bottom: 16px;
font-size: 16px;
color: var(--text-on-dark, #ffffff);
line-height: 1.6;
}
.legal-content ul {
margin: 16px 0;
padding-left: 24px;
color: var(--text-on-dark, #ffffff);
}
.legal-content li {
margin-bottom: 8px;
}
.legal-content strong {
color: var(--color-white, #ffffff);
font-weight: 600;
}
/* Links inside legal pages: simplified styling and brand color */
/* Mayor especificidad y sin subrayado */
main.legal-page a,
main.legal-page .legal-content a,
.legal-page a {
color: #a1031a !important;
text-decoration: none !important;
background: none !important;
border: none !important;
padding: 0 !important;
box-shadow: none !important;
}
main.legal-page a {
color: #a1031a !important;
text-decoration: none !important;
outline: none;
}
.contact-info {
background: rgba(161, 3, 26, 0.15);
padding: 30px;
border-radius: var(--radius-2, 8px);
margin: 40px 0;
border-left: 4px solid var(--color-btn-bg, #a1031a);
border: 1px solid rgba(161, 3, 26, 0.3);
}
.last-updated {
color: var(--muted, #b9b9b9);
font-style: italic;
margin-bottom: 30px;
}
@media (max-width: 768px) {
.legal-page {
padding: 20px 10px;
}
.legal-hero {
padding: 40px 20px;
}
.legal-hero h1 {
font-size: 28px;
}
.legal-content {
padding: 30px 20px;
}
}
/* ===== END: legal-pages.css ===== */
/* ===== BEGIN: custom-styles.css ===== */
/* Custom styles for home page and offline cards */
.card.offline:after {
content: "";
width: 10%;
height: 5px;
background-color: #a1031a;
position: absolute;
left: 50%;
top: 17%;
z-index: 40;
transform: translate(-50%);
margin-top: 9%;
border-radius: 20px;
}
.card.offline:before {
width: 60px;
height: 60px;
aspect-ratio: 1 / 1;
top: 15%;
left: 50%;
z-index: 30;
position: absolute;
color: #ffffff;
border-radius: 50%;
border: 5px solid #a1031a;
transform: translateX(-50%);
text-align: center;
font-size: 20px;
font-weight: bold;
line-height: 230px;
content: "";
}
a.card.offline span.card__user {
margin-top: -15px;
margin-bottom: 7px;
font-size: 14px;
color: rgba(255, 255, 255, 0.79);
}
a.card.offline .card__row {
font-size: 12px;
color: rgba(255, 255, 255, 0.79);
width: 85%;
}
/* ===== END: custom-styles.css ===== */
.page-container {
min-height: 100vh;
background: var(--color-black);
color: var(--text-on-dark);
}
.main-header {
background: var(--color-header);
padding: var(--space-6) var(--space-4);
border-bottom: 1px solid #333;
}
.header-content {
max-width: 1200px;
margin: 0 auto;
}
.page-title {
font-size: var(--section-title-size);
font-weight: var(--section-title-weight);
margin: 0 0 var(--space-4) 0;
color: var(--text-on-dark);
}
.page-title {
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 0;
font-size: 2rem;
font-weight: 600;
color: var(--color-text);
}
/* Ajuste específico para páginas de tags */
body.page-tags h1.page-title {
margin-top: 150px;
}
/* Search and Navigation Container */
.search-and-nav {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--space-4);
margin: var(--space-4) auto;
padding-top: var(--space-4);
max-width: 1200px;
width: 100%;
}
/* Category Navigation */
.category-nav {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: 0;
padding: 0;
min-height: 40px; /* Altura mínima fija */
will-change: contents; /* Optimización de rendimiento */
backface-visibility: hidden; /* Prevenir parpadeo */
transform: translateZ(0); /* Forzar aceleración por hardware */
transition: none !important; /* Desactivar transiciones que puedan causar parpadeo */
}
/* Search Styles */
.search-container {
display: flex;
align-items: center;
gap: var(--space-3);
margin: 0;
padding: 0;
}
.search-box {
position: relative;
width: 300px;
}
/* Responsive Styles */
/* Estilos para botones móvil/desktop */
.btn--mobile-only {
display: none !important;
}
.btn--desktop-only {
display: inline-flex !important;
}
@media (max-width: 768px) {
.btn--mobile-only {
display: inline-flex !important;
}
.btn--desktop-only {
display: none !important;
}
.search-and-nav {
flex-direction: column;
align-items: stretch;
gap: var(--space-3);
}
.category-nav {
justify-content: center;
}
.search-container {
width: 100%;
}
.search-box {
width: 100%;
}
}
@media (max-width: 580px) {
.sp-fansbtn {
display: none !important;
}
}
@media (max-width: 480px) {
.site-header__top {
padding-left: var(--space-2);
padding-right: var(--space-2);
}
.sp-topbar__identity {
margin-right: 0px;
}
.sp-single-topbar__inner {
justify-content: space-between;
padding: 0px 8px;
gap: 8px;
}
.category-nav {
justify-content: flex-start;
overflow-x: auto;
padding-bottom: var(--space-2);
gap: 0px;
}
.nav-link {
white-space: nowrap;
}
.sp-topbar__name {
font-size: 12px;
max-width: 35vw; /* Dinámico para móviles: se adapta al espacio disponible sin comprometer navegación */
}
.sp-sidecard__content {
padding: 0 8px;
}
.sp-profile__body {
padding: 0px 8px;
margin-top: 8px !important;
}
.sp-profile__body .sp-table {
width: 100% !important;
margin-left: 0 !important;
margin-top: 0 !important;
}
.sp-profile__body .sp-tags {
width: 100%;
gap: 8px;
margin-top: 0;
margin-left: 0;
}
.sp-profile__body .tags-title {
width: 100%;
margin-left: 0;
margin-top: 24px;
margin-bottom: 16px;
}
.sp-profile__body .sp-tag {
flex: 0 0 auto;
text-align: center;
}
.sp-related-models {
padding: 30px 8px;
}
.sp-related-models__grid {
padding: 0px;
gap: 8px;
}
.sp-related-models__title {
width: 100%;
margin-left: 0;
margin-top: 24px;
margin-bottom: 16px;
display: block;
}
}
.search-input {
width: 100%;
padding: var(--space-3) var(--space-4);
padding-right: 40px;
border: 2px solid var(--color-selector-bar);
border-radius: var(--radius-3);
background: var(--color-selector-bar);
color: var(--text-on-dark);
font-size: 16px;
transition: all 0.3s ease;
box-sizing: border-box;
}
.search-input::placeholder {
color: var(--muted);
}
.search-input:focus {
outline: none;
border-color: var(--color-btn-bg);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}
.search-clear {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--muted);
font-size: 20px;
cursor: pointer;
padding: 5px;
border-radius: 50%;
transition: all 0.3s ease;
}
.search-clear:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--text-on-dark);
}
.search-results-count {
color: var(--muted);
font-size: 14px;
white-space: nowrap;
}
.category-nav {
display: flex;
gap: var(--space-4);
flex-wrap: wrap;
justify-content: center;
margin-bottom: 30px;
}
.nav-link {
padding: var(--space-2) var(--space-4);
background: var(--color-selector-bar);
color: var(--text-on-dark);
text-decoration: none;
border-radius: var(--radius-2);
font-weight: 500;
transition: all 0.3s ease;
}
.nav-link:hover,
.nav-link.active {
background: var(--color-btn-bg);
color: var(--color-white);
}
.main-content {
max-width: 1200px;
margin: 0 auto;
padding: var(--space-6) var(--space-4);
}
.category-section {
margin-bottom: var(--space-8);
}
.letter-section {
margin-bottom: var(--space-6);
}
.letter-header {
font-size: 20px;
font-weight: 600;
color: #ffffff;
margin: 0 0 var(--space-3) 0;
padding: var(--space-2) var(--space-3);
background: rgba(255, 255, 255, 0.05);
border-left: 3px solid var(--color-btn-bg);
border-radius: var(--radius-1);
}
.category-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-4);
padding-bottom: var(--space-3);
border-bottom: 1px solid #333;
}
.category-title {
font-size: 28px;
font-weight: 700;
margin: 0;
}
.category-title a {
color: var(--text-on-dark);
text-decoration: none;
transition: color 0.3s ease;
}
.category-title a:hover {
color: var(--color-btn-bg);
}
.tag-count {
color: var(--muted);
font-size: 14px;
}
.tags-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--space-3);
}
.tag-item {
display: block;
padding: var(--space-3) var(--space-4);
background: var(--color-selector-bar);
color: var(--text-on-dark);
text-decoration: none;
border-radius: var(--radius-2);
transition: all 0.3s ease;
border: 1px solid transparent;
}
.tag-item:hover {
background: var(--color-btn-bg);
border-color: var(--color-btn-bg);
transform: translateY(-2px);
}
.tag-item.view-more {
background: var(--color-sidebar-bg);
border: 1px dashed #555;
text-align: center;
font-weight: 600;
}
.tag-item.view-more:hover {
background: var(--color-btn-bg);
border-color: var(--color-btn-bg);
}
.tag-name {
font-weight: 500;
text-transform: capitalize;
/* Reset h3 default styles */
margin: 0;
padding: 0;
font-size: inherit;
line-height: inherit;
color: inherit;
}
.no-tags {
text-align: center;
padding: var(--space-8);
color: var(--muted);
}
/* Age gate */
.age-gate__content {
display: flex;
z-index: 9;
position: relative;
justify-content: space-between;
margin: 20px 20px 20px 20px;
background-color: #373636;
padding: 10px 30px;
border-radius: 30px;
align-items: center;
}
.age-gate__description p {
margin: 0;
font-size: 12px;
font-weight: 400;
}
.age-gate__actions a {
text-wrap: nowrap;
font-size: 14px;
font-weight: 700;
}
p.age-gate__title {
font-size: 14px;
font-weight: 700;
}
.age-gate {
position: relative;
}
@media (max-width: 375px) {
.age-gate__content {
flex-direction: column;
text-align: center;
}
.age-gate__description p {
margin-top: 10px;
margin-bottom: 10px;
}
.age-gate__actions a {
padding: 5px 40px;
}
}
/* Responsive */
@media (max-width: 768px) {
.tags-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--space-2);
}
.category-nav {
gap: var(--space-2);
/* Quitar margen inferior en móviles para la página de tags */
/* Nota: se sobreescribe con selector específico abajo */
}
.nav-link {
padding: var(--space-2) var(--space-3);
font-size: 14px;
}
.page-title {
font-size: 28px;
}
.category-title {
font-size: 24px;
}
.search-container {
justify-content: center;
flex-direction: column;
gap: var(--space-2);
}
.search-box {
max-width: 100%;
margin: 0;
}
.search-input {
font-size: 16px; /* Prevent zoom on iOS */
}
}
.seccion-live-subtitle {
--collapsed: 0px;
--expanded: 0px;
position: relative;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
transition: max-height 0.3s ease;
transform-origin: top;
}
/* No clickable cuando no es colapsable */
.seccion-live-subtitle:not(.is-collapsible) {
cursor: default;
}
/* Clickable solo si excede 2 líneas */
.seccion-live-subtitle.is-collapsible {
cursor: pointer;
}
/* Estado contraído: 2 líneas con line-clamp y puntos suspensivos */
.seccion-live-subtitle.is-collapsible.is-collapsed {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
max-height: var(--collapsed);
}
/* Tres puntos visuales en el borde inferior-derecho cuando está contraído */
.seccion-live-subtitle.is-collapsible.is-collapsed::after {
content: "…";
position: absolute;
inset-inline-end: 0;
inset-block-end: 0;
padding-inline-start: 4px;
}
/* Estado expandido: sin recorte, altura animada a su tamaño real */
.seccion-live-subtitle.is-collapsible.is-expanded {
display: block;
-webkit-line-clamp: unset;
max-height: var(--expanded);
}
/* Accesibilidad: usuarios que prefieren reducir animaciones */
@media (prefers-reduced-motion: reduce) {
.seccion-live-subtitle {
transition: none;
}
}
/* Estilo de barras de scroll en ambos paneles */
#sidebar {
scrollbar-width: thin;
scrollbar-color: var(--muted, #b9b9b9) transparent;
padding-right: 20px;
}
@media (max-width: 620px) {
.card.offline .card__info .card__row:before {
content: "This model is currently unavailable. You can visit her later or browse other models online.";
text-align: center;
font-size: 12px;
}
.card.offline .card__info .card__user {
font-size: 12px;
text-align: center;
margin-top: -16px;
}
.card.offline .card__info .card__user:after {
font-size: 12px;
}
.card.offline:before {
width: 50px;
height: 50px;
border: 4px solid #a1031a;
margin-top: -12px;
}
.card.offline:after {
width: 20px;
height: 4px;
top: 18px;
}
}
.sp-model-close {
font-size: 40px !important;
top: 20px !important;
right: 20px !important;
left: auto !important;
color: #fff !important;
}
#sidebar::-webkit-scrollbar,
.page-right::-webkit-scrollbar {
width: 10px;
}
#sidebar::-webkit-scrollbar-track,
.page-right::-webkit-scrollbar-track {
background: transparent;
}
#sidebar::-webkit-scrollbar-thumb,
.page-right::-webkit-scrollbar-thumb {
background: var(--muted, #b9b9b9);
border-radius: 8px;
}
#sidebar::-webkit-scrollbar-thumb:hover,
.page-right::-webkit-scrollbar-thumb:hover {
background: #9a9a9a;
}
@media (max-width: 426px) {
div#main {
width: 100%;
}
}
/* Estilos para el botón More Webcams */
.load-more-button {
display: block;
margin: 2rem auto;
padding: 12px 30px;
background-color: var(--color-btn-bg);
color: var(--text-on-dark);
border: none;
border-radius: var(--radius-2);
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.load-more-button:hover {
background-color: #c1031f;
transform: translateY(-2px);
}
.load-more-button:active {
transform: translateY(0);
}
@media (max-width: 901px) {
.consent-modal__content h2 {
font-size: 18px;
}
.consent-modal__content p {
font-size: 12px;
text-align: center;
}
.consent-modal__content h4 {
text-align: center;
}
.consent-modal__content button {
font-size: 14px;
}
#consent-modal {
z-index: 999999999 !important;
}
div#main {
width: 100%;
}
}
.sidebar__header {
position: relative;
top: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
background: var(--color-sidebar-bg, #17161c);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
/* Marca del sitio */
.sidebar__brand {
display: inline-flex;
align-items: center;
text-decoration: none;
}
/* --- FOOTER: siempre visible en todos los dispositivos --- */
/* === FIX: subtítulo debajo del H1 — colapsado = 2 líneas === */
/* Escritorio: siempre completo */
@media (min-width: 901px) {
.seccion-live-subtitle {
display: block !important;
overflow: visible !important;
-webkit-line-clamp: unset !important;
max-height: none !important;
white-space: normal !important;
}
.seccion-live-subtitle::after {
content: none !important;
}
.sidebar__header {
display: none !important;
}
body.live-single-page .page-grid {
grid-template-columns: 1fr !important;
}
body.live-single-page .page-right {
grid-column: 1 / -1 !important;
width: 100% !important;
margin: 0 !important;
}
.page-grid {
width: calc(100vw - 231px);
height: calc(100vh - 108px);
overflow: visible;
}
body:not(.live-single-page) #sidebar,
body:not(.live-single-page) .sidebar {
width: 216px;
position: fixed;
top: 108px;
left: 0;
height: calc(100vh - 109px);
overflow: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
z-index: 1;
scrollbar-width: none;
-ms-overflow-style: none;
padding-right: 8px; /* Compensar el ancho de la barra de desplazamiento */
margin-right: -8px; /* Neutralizar el padding para mantener el ancho total */
}
body:not(.live-single-page) #sidebar::-webkit-scrollbar,
body:not(.live-single-page) .sidebar::-webkit-scrollbar {
width: 0;
display: none;
}
body:not(.live-single-page) #sidebar:hover,
body:not(.live-single-page) .sidebar:hover {
scrollbar-width: thin;
-ms-overflow-style: auto;
}
body:not(.live-single-page) #sidebar:hover::-webkit-scrollbar,
body:not(.live-single-page) .sidebar:hover::-webkit-scrollbar {
width: 8px;
display: block;
}
body:not(.live-single-page) #sidebar:hover::-webkit-scrollbar-track,
body:not(.live-single-page) .sidebar:hover::-webkit-scrollbar-track {
background: transparent;
}
body:not(.live-single-page) #sidebar:hover::-webkit-scrollbar-thumb,
body:not(.live-single-page) .sidebar:hover::-webkit-scrollbar-thumb {
background-color: var(--muted);
border-radius: 4px;
}
.page-right {
height: 100%;
overflow: visible;
width: 100%;
}
#sidebar,
.page-right {
scrollbar-width: thin;
scrollbar-color: var(--muted, #b9b9b9) transparent;
}
.seccion-live-subtitle.is-collapsible {
cursor: default !important;
}
.seccion-live-subtitle.is-collapsible.is-collapsed {
display: block !important;
-webkit-line-clamp: unset !important;
max-height: none !important;
}
.seccion-live-subtitle.is-collapsible.is-collapsed::after {
content: none !important;
}
.sidebar__close,
.sidebar__selectors,
.selector-container .hamburger,
.sidebar__auth-buttons {
display: none !important;
}
.selector-strip {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 40px;
overflow-x: visible;
}
.selector-strip .selector-item {
display: flex;
align-items: center;
justify-content: flex-start;
}
}
/* Oculta botones y zonas concretas del UI nativo (solo WebKit/Blink) */
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-timeline,
video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display,
video::-webkit-media-controls-fullscreen-button,
video::-webkit-media-controls-rewind-button,
video::-webkit-media-controls-return-to-realtime-button,
video::-webkit-media-controls-seek-back-button,
video::-webkit-media-controls-seek-forward-button,
video::-webkit-media-controls-picture-in-picture-button {
display: none !important;
}
/* iOS/Android: botón grande centrado de “play” */
video::-webkit-media-controls-start-playback-button {
display: none !important;
}
/* (opcional) reduce la barra para que solo quede el volumen visible */
video::-webkit-media-controls-enclosure {
overflow: hidden;
}
h2.sp-sidecard__subtitle {
font-size: 15px;
margin: 3px 0;
}
.sp-table a {
text-decoration: none;
color: #fff;
}
img.feature-icon--mobile,
img.feature-icon--toy {
background-color: rgba(0, 0, 0, 0.7);
border-radius: 4px;
color: #f8f8f8;
flex-shrink: 0;
height: 20px;
margin: 0;
width: 20px;
padding: 2px 1px;
}
.mobile-buttons {
display: none;
gap: 8px;
align-items: center;
}
a#btnLogin,
a#btnCta {
font-size: 13px;
line-height: 29px;
font-weight: 400;
padding: 0px 20px;
}
.card .card__flag,
.card .card__gender {
z-index: 35;
}
.page-grid .grid,
.seccion-live-subtitle.is-collapsible.is-collapsed,
body:not(.page-tags) .seccion-live-subtitle.is-collapsible.is-expanded,
.seccion-live-title,
.seccion-live h2,
body:not(.page-tags) .seccion-live-subtitle.is-expanded {
width: 98%;
margin-left: 1%;
}
/* Ajuste de espacios laterales para el texto bajo tarjetas */
.seccion-live-desc {
max-width: 98%;
margin: 0 auto;
}
@media (max-width: 900px) {
#error-404 {
display: flex;
justify-content: center;
align-items: center;
margin-top: 120px;
margin-bottom: 80px;
}
#sidebar,
.page-right {
padding-right: 0;
}
#sidebar {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 80%;
height: 100vh;
height: 100svh;
overflow-y: auto;
transform: translateX(-100%);
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 10001 !important;
pointer-events: auto;
background: var(--color-sidebar-bg, #15151a);
}
#sidebar.is-open {
display: block;
transform: translateX(0);
}
.card.offline .card__info .card__user:after {
font-size: 12px;
}
.content {
padding: var(--space-4) var(--space-4) var(--space-6);
}
.error-404 {
grid-template-columns: 1fr;
text-align: center;
gap: var(--space-6);
}
.error-404__actions {
display: flex;
justify-content: center;
align-items: center;
}
.error-404__description {
max-width: none;
}
.error-404__icon {
width: 150px;
height: 150px;
}
.error-404__icon img {
width: 80px;
height: 80px;
}
.error-404__illustration {
display: none !important;
}
.error-404__number {
font-size: 80px;
}
.error-404__title {
font-size: 28px;
}
.hamburger-fab {
display: flex;
flex-direction: column;
}
.live-single-page .container,
.live-single-page .content {
padding-left: 0 !important;
padding-right: 0 !important;
}
.live-single-page .page-grid {
width: 100% !important;
margin: 0 !important;
}
.page-grid {
margin-left: 0;
display: block;
width: 100%;
}
.page-grid .grid,
.seccion-live-subtitle.is-collapsible.is-collapsed,
body:not(.page-tags) .seccion-live-subtitle.is-collapsible.is-expanded,
.seccion-live-title,
.seccion-live h2,
body:not(.page-tags) .seccion-live-subtitle.is-expanded.is-collapsible,
.seccion-live-subtitle.is-collapsible.is-collapsed,
.seccion-live-desc {
width: 95%;
margin-left: 2.5%;
}
.selector-container {
position: relative;
top: 0;
z-index: 70;
background: var(--color-selector-bar);
transform: translateZ(0);
will-change: transform;
-webkit-overflow-scrolling: touch;
}
header.site-header > .site-header__selectors > .selector-container {
padding: 0px;
}
.selector-container .hamburger {
display: none !important;
}
.selector-strip {
display: flex !important;
overflow-x: visible !important;
justify-content: space-between;
padding: 8px;
}
.sidebar {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 60%;
height: 100vh;
height: 100svh;
overflow: auto;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 10001;
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.35);
background: var(--color-sidebar-bg, #15151a);
}
.sidebar.is-open {
transform: translateX(0);
}
.sidebar-overlay {
display: none;
z-index: 10000 !important;
}
.sidebar-overlay.is-open {
display: block;
}
.sidebar__category-title,
.sidebar__heading,
.sidebar__link,
.sidebar__tag-link {
font-size: 14px;
}
.sidebar__selectors {
display: none !important;
}
.site-header__selectors .hamburger {
display: none !important;
}
.site-header__selectors .selector-item {
display: none !important;
}
.site-header__selectors .selector-item[data-id="couple"],
.site-header__selectors .selector-item[data-id="man"],
.site-header__selectors .selector-item[data-id="trans"],
.site-header__selectors .selector-item[data-id="woman"] {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 6px;
flex: 1 1 0 !important;
min-width: 0;
padding: 6px 0;
}
.site-header__selectors .selector-item[data-id="live"] {
display: none !important;
}
.site-header__selectors .selector-item__icon {
display: inline-block !important;
width: 20px !important;
height: 20px !important;
flex-shrink: 0;
}
.site-header__selectors .selector-item__label {
font-size: 14px !important;
line-height: 1 !important;
white-space: nowrap;
}
.sp-hero__frame {
min-height: 280px !important;
}
.sp-profile__avatar {
width: 90px;
height: 90px;
}
.sp-profile__header {
flex-direction: column;
align-items: flex-start;
margin-top: 0.5rem;
}
.sp-table {
width: 90% !important;
max-width: 100% !important;
}
.seccion-live-subtitle,
.seccion-live-subtitle.is-collapsible,
.seccion-live-subtitle.is-collapsible.is-collapsed,
.seccion-live-subtitle.is-collapsible.is-expanded,
.seccion-live-subtitle::after,
.seccion-live-subtitle.is-collapsible::after,
.seccion-live-subtitle.is-collapsible.is-collapsed::after {
all: unset;
}
.seccion-live-subtitle {
white-space: normal !important;
word-break: break-word;
overflow-wrap: anywhere;
transition: max-height 0.25s ease;
}
.seccion-live-subtitle.is-collapsible {
overflow: hidden !important;
cursor: pointer;
}
.seccion-live-subtitle.is-collapsible.is-collapsed {
width: 95%;
margin-left: 2.5%;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
max-height: var(--collapsed) !important;
text-overflow: ellipsis !important;
margin-bottom: 20px;
}
.seccion-live-subtitle.is-collapsible.is-expanded {
display: block !important;
-webkit-line-clamp: unset !important;
max-height: none;
overflow: visible;
}
.seccion-live-subtitle.is-collapsible.is-collapsed::after {
content: none !important;
}
}
@media screen and (min-width: 769px) {
.btn--mobile-only {
display: none !important;
}
}
@media screen and (max-width: 768px) {
.btn--desktop-only {
display: none !important;
}
.mobile-buttons {
display: flex;
}
.btn--desktop-only {
display: none !important;
}
.mobile-buttons .btn {
padding: 8px 16px;
font-size: 14px;
}
.site-footer__cols {
display: flex;
flex-direction: column;
}
}
@media screen and (max-width: 650px) {
.card__icon--gender {
width: 8px;
}
.card__corner .card__flag {
width: 18px;
height: 12px;
}
.label {
font-size: 10px;
}
}
/* ===== Responsive ===== */
@media (min-width: 500px) and (max-width: 768px) {
.site-footer__top {
display: block;
}
.site-footer__cols {
display: flex;
flex-flow: row wrap;
gap: 1;
width: 100%;
padding: 20px 20px;
}
.footer-col:not(.footer-col--brand) {
width: 45%;
flex: 0 0 45%;
box-sizing: border-box;
margin-bottom: 20px;
}
.footer-col__title {
margin: 0 !important;
}
.footer-col:nth-child(2n) .footer-col__title {
border-right: none;
}
.footer-panel {
padding: 0;
}
.footer-list {
padding: 10px 0;
}
.footer-col.footer-col--brand {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 30px !important;
padding: 0 20px;
text-align: center;
order: 999; /* Asegura que el logo siempre esté al final */
}
.brand--footer .brand__img {
width: 240px;
height: 48px;
}
}
@media (max-width: 425px) {
.consent-btn button {
padding: 24px 0;
font-size: 20px !important;
}
.brand__img {
width: 108px !important;
}
#sidebar,
.page-right {
padding: 0;
}
.selector-container {
padding: 0 16px;
}
.grid,
.seccion-live-subtitle,
.seccion-live-subtitle.is-collapsible.is-collapsed,
.seccion-live-subtitle.is-collapsible.is-expanded,
.seccion-live-title,
.seccion-live h1,
.seccion-live h2 {
width: 96% !important;
margin-left: 2% !important;
}
/* Mantener coherencia en móviles para el texto bajo tarjetas */
.seccion-live-desc {
max-width: 96% !important;
margin-left: auto !important;
margin-right: auto !important;
}
.grid .card__views {
display: none !important;
}
button.consent-btn.consent-btn--accept {
padding: 15px 24px;
font-size: 20px !important;
font-weight: 500;
}
.sp-single-nav {
gap: 5px;
}
.sp-single-nav__link {
margin-right: 0px;
font-size: 12px;
padding: 0 2px;
}
.sp-single-topbar__inner {
gap: 0px;
flex-wrap: nowrap;
}
}
@media (max-width: 371px) {
.brand__img {
width: 90px !important;
}
.btn--mobile-only {
font-size: 12px !important;
}
.site-header__top {
gap: 10px;
}
.mobile-buttons .btn {
padding: 8px 8px !important;
}
.site-header__selectors .selector-item__label {
font-size: 12px !important;
}
}
/* Subtítulo de la sección tags */
body > .seccion-live-subtitle {
max-width: 1200px;
width: 100%;
margin: 0 auto;
color: var(--color-text);
}
.seccion-live-subtitle.is-collapsible.is-expanded {
margin-bottom: 20px;
}
.seccion-live-subtitle.is-collapsible.is-collapsed {
margin-bottom: 20px;
}
.seccion-live-subtitle.is-collapsible.is-expanded p,
.seccion-live-subtitle.is-collapsible.is-collapsed p {
margin: 0;
}
@media (max-width: 900px) {
.seccion-live-subtitle.is-collapsible.is-expanded {
width: 95%;
margin-left: 2.5%;
}
}
/* Evitar salto de linea en el botón JOIN FREE */
.site-header__right .site-header__actions a#btnJoinFree {
white-space: nowrap;
}
.seccion-live-subtitle * {
color: #7e848e;
}
body:not(.live-single-page) #sidebar,
body:not(.live-single-page) .sidebar {
width: 216px;
background-color: #141415;
}
main.live-single-page {
scrollbar-color: var(--muted, #b9b9b9) transparent;
scrollbar-width: thin;
/* Unify scroll to body on model pages */
overflow: visible;
overscroll-behavior: auto;
height: auto;
min-height: 100vh;
min-height: 100svh;
}
.seccion-live h1 {
font-size: 20px;
font-weight: 500;
line-height: 30px;
margin-bottom: 0;
width: 98%;
margin-left: 1%;
}
@media (max-width: 550px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
.sp-hero__frame {
min-height: 0 !important;
}
}
@media (max-width: 670px) {
.sp-fansbtn {
display: none;
}
}
.sp-offline-title {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sp-related-models__title {
padding: 20px;
}
/* ===== iOS model page fixes ===== */
/* Sticky header only on model pages */
body.live-single-page .site-header {
position: sticky;
top: 0;
z-index: 50;
overscroll-behavior-y: contain;
overflow-y: hidden;
touch-action: pan-x;
}
/* Ensure body scrolls on iPhone */
body.live-single-page {
min-height: 100vh;
min-height: 100svh;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
/* Allow vertical panning over video without trapping scroll */
#modelo_video,
.video-container {
touch-action: pan-y;
}
/* ===== Paridad visual: tags/género igual a homepage ===== */
/* Alinear títulos y subtítulos de páginas de tags/género con los anchos y márgenes de la home */
body.page-tags .seccion-live-title,
body.page-tags .seccion-live-subtitle {
width: 95% !important;
margin-left: 2.5% !important;
}
@media (min-width: 768px) {
body.page-tags .seccion-live-title,
body.page-tags .seccion-live-subtitle {
width: 98% !important;
margin-left: 1% !important;
}
}
@media (max-width: 425px) {
body.page-tags .seccion-live-title,
body.page-tags .seccion-live-subtitle,
body.page-tags .seccion-live h1 {
width: 96% !important;
margin-left: 2% !important;
}
body.page-tags .seccion-live h1 {
margin-top: 30px !important;
margin-bottom: 15px !important;
}
body.page-tags .seccion-live-title,
body.page-tags .seccion-live h2 {
margin-top: 15px !important;
margin-bottom: 0px !important;
}
}
/* Page Title */
/* All Tags page: apply 20px side padding to all content */
.page-all-tags h1.page-title,
.page-all-tags .seccion-live-subtitle.is-collapsed,
.page-all-tags .seccion-live-subtitle.is-expanded,
.page-all-tags .search-and-nav,
.page-all-tags main.main-content {
padding-left: 20px;
padding-right: 20px;
margin-left: auto !important;
}
/* Mobile default clamp: prevent initial expansion then collapse on Safari */
@media (max-width: 900px) {
.seccion-live-subtitle {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
overflow: hidden !important;
}
.seccion-live-subtitle.is-expanded {
display: block !important;
-webkit-line-clamp: unset !important;
overflow: visible !important;
}
}
/* ===== Consent modal spacing ===== */
.consent-actions {
margin: 16px 0;
}
html.loading {
overflow: auto !important;
}
/* FIX: aplicar padding al dentro del subtítulo en móviles (solo tags) */
@media (max-width: 768px) {
body.page-all-tags .seccion-live-subtitle p {
padding-left: 20px !important;
padding-right: 20px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
body {
overflow: visible !important;
}
/* Ajustes móviles SOLO para páginas de tags */
@media (max-width: 768px) {
body.page-all-tags .seccion-live-subtitle {
padding-left: 20px;
padding-right: 20px;
margin-left: auto !important;
}
body.page-all-tags .search-and-nav {
padding-top: 0 !important;
}
body.page-all-tags .category-nav {
margin-bottom: 0 !important;
}
}
/* iOS Safari fix: ensure accept button size on iPhone */
@supports (-webkit-touch-callout: none) {
@media (max-width: 480px) {
button.consent-btn.consent-btn--accept {
padding: 15px 24px !important;
font-size: 20px !important;
font-weight: 500 !important;
line-height: 1.2 !important;
-webkit-appearance: none;
appearance: none;
}
}
}
.seccion-live .seccion-live-desc h2 {
margin-left: 0 !important;
}
.home h1,
.seccion-live h1 {
margin-top: 30px !important;
margin-bottom: 15px !important;
}