@import url("/lima/assets/fonts/AlergiaNormal/font-face.css?v:2"); @import url("/lima/assets/fonts/CormorantUnicase/font-face.css"); @import url("/lima/assets/fonts/Merriweather/font-face.css"); :root { --ico-ilove: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ef4346' stroke-width='3' viewBox='0 0 24 24'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E"); --ico-ido: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23008999' stroke-width='3' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); --ico-maybe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23008999' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3Cpath d='M15.8 9.2a2.5 2.5 0 0 0-3.5 0l-.3.4-.35-.3a2.42 2.42 0 1 0-3.2 3.6l3.6 3.5 3.6-3.5c1.2-1.2 1.1-2.7.2-3.7'/%3E%3C/svg%3E"); --ico-no: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23a8a8a8' stroke-width='3' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); --ico-no-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ef4346' stroke-width='3' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); --bg-img: #eee url('data:image/svg+xml;utf8,'); --bg-negro: var(--border) url('data:image/svg+xml;utf8,'); --ico-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23FFFFFF' fill='none' viewBox='0 0 24 24' stroke-width='1.5'%3E%3Cpath d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E"); --ico-arrow-tiffany: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23008999' fill='none' viewBox='0 0 24 24' stroke-width='1.5'%3E%3Cpath d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E"); --ico-arrow-black: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23111111' fill='none' viewBox='0 0 24 24' stroke-width='1.5'%3E%3Cpath d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E"); --ico-trend: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23EDC992' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M18.918 8.174c2.56 4.982 .501 11.656 -5.38 12.626c-7.702 1.687 -12.84 -7.716 -7.054 -13.229c.309 -.305 1.161 -1.095 1.516 -1.349c0 .528 .27 3.475 1 3.167c3 0 4 -4.222 3.587 -7.389c2.7 1.411 4.987 3.376 6.331 6.174z'/%3E%3C/svg%3E"); --ico-telegram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M15 10l-4 4l6 6l4 -16l-18 7l4 2l2 6l3 -4'/%3E%3C/svg%3E"); --ico-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9'/%3E%3Cpath d='M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1'/%3E%3C/svg%3E"); --ico-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2'/%3E%3C/svg%3E"); --ico-locate: url("data:image/svg+xml,"); } :root { --font-base: 'AlergiaNormal', sans-serif; --font-cali: 'Cormorant Unicase', serif; --font-head: 'Merriweather', serif; --bg: #000; --bg-header: #0e0e0e; --text: #fff; --accent: #ff6600; --yellow: #ffcc00; --green: #39ff14; --accent-dark: #ff5500; --tiffany: #04b2c6; --premium: #fcc37f; --grey: #8e8e8e; --grey-light: #444; --base: #ddd; --white: #fff; --tiffany-light: #39d6e6; --accent-grad: linear-gradient(135deg, #ffcc00, #ff5500); --gap: 1.6rem; --gap-lg: 3.2rem; --pad: 3rem; --pad-min: 1.2rem; --radius: 0.8rem; --radius-lg: 1.6rem; --search-width: 22rem; --search-height: 3.7rem; --search-radius: 2rem; --search-font: 1.4rem; --search-bg: #252525; --search-outline: #3a3a3a; --btn-height: 3.7rem; --btn-radius: 2rem; --btn-font: 1.4rem; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } * { scrollbar-width: thin; scrollbar-color: var(--yellow) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background-color: var(--yellow); border-radius: 100px; border: 2px solid transparent; background-clip: content-box; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } html { font-size: 62.5%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-base); font-size: 1.6rem; line-height: 1.5; background-color: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button, input, textarea, select { font: inherit; background: none; border: none; outline: none; color: inherit; } h1, h2, h3 { font-family: var(--font-cali); font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; text-transform: uppercase; } h1 { font-size: 4rem; } h2 { font-size: 3.2rem; } h3 { font-size: 2.4rem; } h4, h5, h6 { font-family: var(--font-head); font-weight: 700; line-height: 1.3; } h4 { font-size: 2rem; } h5 { font-size: 1.8rem; } h6 { font-size: 1.6rem; } sup { position: absolute; top: -0.4rem; left: 50%; transform: translateX(0.6rem); background: #e44545; color: #fff; font-size: 0.9rem; font-weight: 400; border-radius: 50%; min-width: 1.5rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0 5px; text-align: center; pointer-events: none; z-index: 1; } sup:empty, sup[data-count="0"] { display: none !important; } /* sub { position: absolute; top: -0.4rem; right: 0; font-size: 0.85rem; pointer-events: none; opacity: 0.7; z-index: 1; } */ small { font-size: 1.15rem; line-height: 1; margin-top: 0.3rem; opacity: 0.7; text-align: center; pointer-events: none; } header { background-color: var(--bg-header); padding: var(--pad-min) var(--pad) 0; } header nav { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); } header nav:first-of-type > a, header nav aside { flex-shrink: 0; } header form { flex: 1; min-width: 0; } header nav:last-of-type { line-height: 1; } header nav > a { position: relative; display: flex; align-items: center; font-family: var(--font-head); font-size: 2rem; font-weight: 700; color: var(--text); text-transform: uppercase; text-decoration: none; height: 3.8rem; line-height: 1.05; user-select: none; } header nav > a span { display: flex; align-items: center; gap: 0.666rem; } header nav > a span b { display: inline-block; color: #000; font-weight: 900; padding: 0.888rem 0.666rem 0.777rem; background: var(--accent-grad); border-radius: 0.444rem; } header nav > a em { display: none; } nav aside { display: flex; align-items: center; gap: 2rem; } nav aside a, nav aside button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text); background: none; border: none; cursor: pointer; text-decoration: none; user-select: none; } nav aside svg { width: 2.4rem; height: 2.4rem; } header form { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 0 var(--pad); direction: ltr; } header form > fieldset { position: relative; display: flex; align-items: center; padding-left: 2.9rem; height: var(--search-height); border: none; min-height: var(--search-height); overflow: visible; background-color: var(--search-bg); border-radius: var(--search-radius); } header form > fieldset::before { content: ""; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; pointer-events: none; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0.5; transition: opacity 0.2s ease; } header form > fieldset:focus-within::before { opacity: 1; } header form input { flex: 1; border: none; background-color: var(--search-bg); color: var(--text); font-size: var(--search-font); padding: 0 1rem; height: 100%; outline: none; } header form button { padding: 0 1.2rem; background: none; border: none; color: var(--text); cursor: pointer; display: flex; align-items: center; font-size: 1.3rem; height: 100%; opacity: 0.5; } header form button:hover { opacity: 1; } header form button svg { margin-left: 0.3rem; width: 1.2rem; height: 1.2rem; transform: translateY(1px); } header form button[type="button"] { padding: 0; } header form button[type="submit"] svg { width: 2rem; height: 2rem; } header form > div { position: absolute; top: 100%; left: var(--pad); right: var(--pad); background: #111; border: 1px solid #222; border-radius: var(--radius); padding: 0.2rem 0.88rem; margin-top: 0.4rem; z-index: 999; display: grid; } header form > div { opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .22s ease, transform .22s ease; } header form > div.open { opacity: 1; transform: translateY(0); pointer-events: auto; } header form div[hidden] { display: none; } header form div fieldset { display: flex; flex-wrap: wrap; gap: 0.2rem 0; border: 1px solid #222; border-radius: 0.4rem; padding: 0.5rem 1rem; font-size: 1.2rem; text-align: left; margin-bottom: 0.5rem; } header form div fieldset legend { padding: 0 0.5rem; color: #444; font-weight: bold; } header form div fieldset label { display: flex; align-items: center; flex: 0 0 32%; gap: 0.5rem; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: color 0.2s ease; } header form div fieldset label input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; margin: 0; padding: 0; width: 1.4rem; height: 1.4rem; border: 1px solid #444; border-radius: 0.3rem; background-color: #111; display: inline-block; flex: 0 0 1.4rem; margin: 0; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; } header form div fieldset label:hover input[type="checkbox"] { border-color: var(--yellow); } header form div fieldset label input[type="checkbox"]:checked { background-color: var(--yellow); border-color: var(--yellow); } header form div fieldset label:has(input[type="checkbox"]:checked) { color: var(--yellow); font-weight: bold; } header form > div button[type="submit"] { display: flex; flex-direction: row; gap: 0.6rem; padding: 0.4rem 1.1rem 0.4rem 0.6rem; border: 2px solid currentColor; border-radius: var(--btn-radius); color: var(--yellow); background: none; font-size: 1.2rem; font-weight: 600; text-transform: uppercase; line-height: 1; cursor: pointer; transition: all 0.25s ease-in-out; } header form > div button[type="submit"]:hover { color: var(--green); } .filters-actions { display: flex; align-items: center; justify-content: space-between; margin: 0.6rem 0; gap: 1rem; } .reset-filters { color: var(--yellow); font-size: 1.2rem; text-decoration: underline; cursor: pointer; transition: opacity 0.2s ease; } .reset-filters[hidden] { display: none; } nav:last-of-type { padding-right: 1.5rem; position: relative; } nav > ul { display: flex; justify-content: space-between; align-items: center; list-style: none; margin: 0; padding: 0; background-color: var(--bg-header); font-size: 1.45rem; width: 100%; } nav > ul li { position: relative; } nav > ul li a { position: relative; color: var(--text); text-decoration: none; padding: 2rem 0 1.3rem; display: inline-block; transition: color 0.2s ease; user-select: none; } nav > ul li a { display: flex; align-items: center; gap: 0.5rem; } nav > ul li a svg { width: 1.5rem; height: 1.5rem; stroke: none; fill: currentColor; flex-shrink: 0; } nav > ul li a .nav { margin-top: 2px; width: 1.2rem; height: 1.2rem; stroke: currentColor; flex-shrink: 0; transition: transform 0.3s ease; } nav > div { position: relative; width: 16.05rem; height: 100%; display: flex; align-items: center; gap: 0.4rem; color: var(--text); font-size: 1.25rem; padding: 1rem 0 0; flex-shrink: 0; } nav > div span { cursor: pointer; opacity: 0.7; } nav > div svg { margin-top: -2px; width: 1.5rem; height: 1.5rem; fill: currentColor; } nav > ul > li.active { color: var(--yellow); border-bottom: 2px solid currentcolor; } nav > ul > li.active > a { color: currentcolor; } nav > ul ul > li.active a { color: var(--yellow); } nav > ul ul { display: block; position: absolute; top: 4rem; left: -1.1rem; background-color: var(--search-bg); padding: 0.5rem 0; border-radius: var(--radius); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); z-index: 10; min-width: 18rem; opacity: 0; transform: translateY(5px); transition: all 0.25s ease; pointer-events: none; } nav > ul li:hover ul { opacity: 1; transform: translateY(0); pointer-events: auto; } nav > ul ul li { position: relative; white-space: nowrap; } nav > ul ul li a { display: block; padding: 0.8rem 1.2rem; color: var(--text); font-size: 1.35rem; transition: background 0.2s ease, color 0.2s ease; } nav > ul ul li a:hover { background: var(--bg-header); color: var(--yellow); } .selector-dropdown { position: absolute; top: 0.3rem; right: 1rem; z-index: 1000; min-width: 13.25rem; overflow: hidden; padding: 0; border: 1px solid #333; border-radius: 0.6rem; background: #000; user-select: none; font-size: 1.3rem; } .selector-dropdown li { padding: 0.6rem 1rem; white-space: nowrap; cursor: pointer; } .selector-dropdown li.active { background-color: var(--yellow); color: #000; } main { padding: var(--pad-min) var(--pad); color: #fff; min-height: 100vh; } article { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; } article h3 { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin: 0; padding: 0.6rem 0.8rem 0.8rem 0.8rem; font-family: var(--font-base); font-size: 1.2rem; font-weight: 400; } article h3 svg { width: 1.6rem; height: 1.6rem; color: #fff; margin-left: 0.6rem; cursor: pointer; transition: fill 0.2s ease; vertical-align: middle; flex-shrink: 0; fill: none; } article h3 svg.active { fill: var(--yellow); color: var(--yellow); } article > div { position: relative; border-radius: var(--radius); } article > div a { display: block; overflow: hidden; padding: 0.5rem; border-radius: 6px; background-color: rgba(255, 255, 255, 0.05); color: inherit; text-decoration: none; } article figure { position: relative; width: 100%; margin-bottom: 0.4rem; overflow: hidden; border-radius: 4px; } article figure img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transform: scale(1.03); transition: transform 0.4s ease; } article > div a:hover figure img { transform: scale(1); } article figure > div { position: absolute; bottom: 0; left: 0; display: flex; align-items: flex-end; justify-content: space-between; width: 100%; height: 10rem; padding: 0.6rem 0.8rem; box-sizing: border-box; border-bottom: 2px solid #222; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent); color: #fff; font-size: 1.4rem; } article figure abbr { display: inline-flex; align-items: baseline; gap: 0.5rem; color: #fff; font-family: var(--font-base); font-size: 1.4rem; font-weight: 300; line-height: 1; text-decoration: none; } article figure abbr b { font-size: 1.88rem; font-weight: 300; letter-spacing: -0.15rem; } article figure div div { display: flex; align-items: center; gap: 0.8rem; font-size: 1rem; } article figure div div svg { flex-shrink: 0; width: 1.8rem; height: 1.8rem; fill: var(--yellow); } article figure div div span { position: relative; display: flex; align-items: flex-end; gap: 0.3rem; } article figure div div span svg { width: 1.6rem; height: 1.6rem; } article figure div div span svg, article figure div svg.video { opacity: 0.7; } article aside { display: flex; justify-content: space-between; width: 100%; padding: 0.3rem 0.8rem; font-size: 1.2rem; font-style: normal; } article aside b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; } article aside i { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: right; font-style: normal; } article aside i, article aside b span { opacity: 0.5; } /* article details summary { position: absolute; bottom: 2.3rem; left: 50%; z-index: 3; display: flex; align-items: center; justify-content: center; width: 2.22rem; height: 2.2rem; margin: 0; padding: 0; border-radius: 33%; background: #222; color: var(--yellow); cursor: pointer; list-style: none; transform: translateX(-50%); } article details summary svg { width: 1.75rem; height: 1.75rem; fill: none; } article details summary:hover, article details[open] summary { background: var(--tiffany); color: #222; } */ article details summary::-webkit-details-marker { display: none; } article details[open] .horario { position: absolute; bottom: 3.3rem; left: 0.5rem; right: 0.5rem; } article > div button { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 10; width: 2.4rem; height: 2.4rem; background: none; border: none; cursor: pointer; } div.new::before { content: ""; position: absolute; top: 3.6rem; left: 0.1rem; z-index: 5; width: 5rem; height: 5rem; background: url('/assets/ico/new.svg') no-repeat center center; background-size: contain; pointer-events: none; } div.star { background: #000; } article details summary.card-status{ position:absolute; left:0.5rem; right:0.5rem; bottom: 2.1rem; z-index:3; display:grid; place-items:center; height:2.6rem; margin:0; padding:0; list-style:none; cursor:pointer; background:transparent; } article details summary.card-status::before{ content:""; position:absolute; left:0; right:0; top:50%; height:2px; background:rgba(255,255,255,.22); transform:translateY(-50%); } article details summary.card-status > span{ position:relative; z-index:1; display:inline-block; padding:0.28rem 0 .34rem; border-radius:999rem; background:var(--badge-color, var(--tiffany)); color:#000; font:700 1.1rem/1 var(--font-base); font-size: 0.9rem; text-transform:uppercase; white-space:nowrap; } article details summary.card-status > span > span { position: relative; z-index: 5; } article details summary.card-status > span::before, article details summary.card-status > span::after{ content:""; position:absolute; top:0; width:24px; height:100%; background:var(--badge-color, var(--tiffany)); -webkit-mask: no-repeat center / 100% 100%; mask: no-repeat center / 100% 100%; z-index:1; } article details summary.card-status > span::before{ right:88%; -webkit-mask-image: url('/assets/ico/badge-cap-left.svg'); mask-image: url('/assets/ico/badge-cap-left.svg'); } article details summary.card-status > span::after{ left:88%; -webkit-mask-image: url('/assets/ico/badge-cap-right.svg'); mask-image: url('/assets/ico/badge-cap-right.svg'); } article details summary.status--en_turno { --badge-color: var(--tiffany); } article details summary.status--descanso { --badge-color: var(--grey); } article details summary.status--vacaciones { --badge-color: var(--grey); } article div.premium details summary.status--en_turno { --badge-color: var(--premium); } article details summary.card-status:hover::before, article details summary.card-status:focus-visible::before{ background:rgba(255,255,255,.35); } article details[open] summary.card-status span::before { position: relative; content: "✕"; height: .5rem; background: none; } article details[open] summary.card-status span span, article details[open] summary.card-status span::after { display:none; } @media (max-width:768px){ article details summary.card-status{ height:2.4rem; } article details summary.card-status>span{ padding:.28rem .9rem; font-size:1rem; } } div.premium::after { content: ""; position: absolute; top: -1rem; left: 50%; z-index: 5; width: 9rem; height: 2.2rem; pointer-events: none; background: url('/assets/ico/premium.svg') no-repeat center center; background-size: contain; transform: translateX(-50%); } div.premium { color: var(--premium); background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/assets/ico/bg.png'); } article div.premium h3 svg { color: var(--premium); } div.verified figure::before { content: "Visitado"; position: absolute; top: 0.5rem; right: 2.6rem; display: flex; align-items: center; justify-content: center; width: 5.5rem; height: 2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid rgba(252, 195, 127, 0.3); border-radius: 0.4rem; background-color: rgba(252, 195, 127, 0.07); color: var(--premium); font-size: 0.85rem; font-weight: bold; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: 0 0 6px rgba(252, 195, 127, 0.15); transform: rotate(-90deg); transform-origin: top right; } div.star.verified figure::before { top: 3rem; } div.star figure::after { content: ""; position: absolute; top: 0.4rem; right: 0.4rem; z-index: 5; width: 2.4rem; height: 2.4rem; pointer-events: none; background: url('/assets/ico/estrella.svg?v:3') no-repeat center center; background-size: contain; } div.daily { background: linear-gradient( 135deg, rgba(128, 0, 32, 0.9), rgba(178, 34, 34, 0.95) ); box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.2), inset 0 0 12px rgba(255, 0, 0, 0.1); } .horario { display: flex; height: 95px; border-radius: 0.5rem; overflow: hidden; background: rgba(0, 0, 0, 0.88); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5); z-index: 2; } .horario div { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-start; box-sizing: border-box; padding: 10px 0; border-right: 1px solid rgba(255, 255, 255, 0.15); color: #fff; font-size: 12px; text-align: center; } .horario div:last-child { border-right: none; } .horario div:nth-of-type(1) { background: rgba(49, 217, 227, 0.25); } .horario div span:nth-of-type(1) { font-size: 1.4rem; line-height: 1; font-weight: 300; } .horario div span:nth-of-type(2) { margin-top: 2px; font-size: 1rem; font-weight: 300; opacity: 0.6; } .horario div span:nth-of-type(3) { padding-top: 8px; color: var(--tiffany); font-size: 1rem; font-weight: 400; } article details[open] .horario div span:nth-of-type(3) { color: var(--tiffany); } .horario div span:nth-of-type(4) { position: relative; margin: 4px 7% 0; width: 86%; height: 5px; overflow: hidden; background: rgba(255, 255, 255, 0.15); border-radius: 4px; } .horario div span:nth-of-type(4) > span { position: absolute; top: 0; height: 100%; background: var(--tiffany); } .horario span.l { left: 0; } .horario span.r { right: 0; } .horario span.c { left: 50%; transform: translateX(-50%); } .horario span.g { background: #555 !important; } .horario > div.g > span:nth-of-type(3), .horario > div.g > span:nth-of-type(3) > span { position: relative; display: block; width: 100%; overflow: hidden; background: none; text-indent: -9999px; } .horario > div.g > span:nth-of-type(4), .horario > div.g > span:nth-of-type(4) > span { opacity: 0; } .horario > div.g > span:nth-of-type(3)::before { content: "?"; position: absolute; top: 10px; left: 0; width: 100%; color: #7e7e7e; font-weight: 700; text-align: center; text-indent: 0; } sub { display: inline-block; color: var(--grey); border-radius: 50%; width: 1.5rem; height: 1.5rem; line-height: 1.8rem; text-align: center; font-size: 1.3rem; font-weight: bold; font-family: sans-serif; margin: -0.7rem 0 0; cursor: pointer; overflow: hidden; white-space: nowrap; text-indent: -9999px; position: relative; vertical-align: middle; border: 0.2rem solid var(--grey-light); } sub::before { content: "?"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-indent: 0; color: var(--grey-light); } sub:hover, sub:hover::before { color: var(--white); background: var(--grey-light); } sub.min { width: 1.4rem; height: 1.4rem; font-size: 1rem; } sub.max { width: 2.2rem; height: 2.2rem; font-size: 1.8rem; } #puta { position: relative; margin: var(--pad); padding: 0; overflow-y: hidden; } #puta > section { width: auto; padding-left: 39.5rem; } #puta > figure { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; gap: var(--gap); width: 35rem; margin: 0; transition: transform 0.2s ease; } #puta > figure > a { position: relative; display: block; overflow: hidden; border-radius: var(--radius); cursor: zoom-in; } #puta > figure > a img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } #puta > figure > a:hover img { transform: scale(1.1); } #puta > figure > i { position: absolute; bottom: 0; left: 0; z-index: 2; display: flex; align-items: center; justify-content: center; width: 35rem; height: 53rem; border-radius: var(--radius); background: rgba(0, 0, 0, 0.6); color: var(--white); font-family: PFDinTextCompProLight, sans-serif; font-size: 58px; cursor: pointer; transition: background 0.3s ease; } #puta > figure > i:hover { background: rgba(0, 0, 0, 0.8); color: var(--tiffany-light); } #puta > section > .header { position: relative; margin-bottom: var(--pad); } #puta > section > .header h1 { position: relative; display: block; margin: 0; padding: 0 4.8rem 0 0; font-size: 4.8rem; line-height: 0.7; letter-spacing: -0.2rem; text-align: left; text-transform: none; } #puta .header h1 svg { display: inline-block; vertical-align: middle; width: 3.2rem; height: 3.2rem; margin: -0.2rem 0 0 0.5rem; } #puta > section > .header button { position: absolute; top: 0.2rem; right: 0; z-index: 2; display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; padding: 0; background: none; border: none; cursor: pointer; transition: opacity 0.2s ease; } #puta > section > .header button svg { width: 3.5rem; height: 3.5rem; stroke: var(--grey); fill: none; color: var(--grey); transition: fill 0.3s ease, stroke 0.3s ease; } #puta > section > .header button:hover svg { stroke: var(--premium); color: var(--premium); } #puta > section > .header button svg.active { fill: var(--premium); stroke: var(--premium); color: var(--premium); } #strip-clubs { padding: 0; } .xnote, #puta > section > .header span, #puta > section > div .note { position: relative; display: block; box-sizing: border-box; min-height: 5rem; margin: var(--pad) 0; padding: 1rem 6rem; border-radius: var(--radius); background: url(/assets/ico/bg.png) repeat center; color: var(--base); font-family: var(--font-base); font-size: 1.6rem; line-height: 1.5; text-align: center; } .xnote { margin: var(--pad) 16rem; padding: var(--pad-min) 11rem; line-height: 1.4; } .xnote.premium { color: var(--premium); } .xnote h1 { display: inline; margin: 0; padding: 0; color: inherit; font: inherit; font-weight: inherit; line-height: inherit; } .xnote::before, #puta > section.is_star > .header span::before, #puta > section.is_star > div .note::before { content: ""; position: absolute; top: 0; left: 0; z-index: 2; width: 53px; height: 50px; background: url(/assets/del/Zvezda_salona_anketa.svg) no-repeat center; background-size: contain; } .xnote.premium::before { top: 50%; background: url(/assets/del/premium.svg) no-repeat center; transform: translateY(-50%); } .xnote sub, #puta > section > .header span sub, #puta > section > div .note sub { position: absolute; top: 32px; right: 11px; color: var(--premium); border-color: var(--premium); transform: translateY(-50%); } .xnote sub::before, #puta > section > .header span sub::before, #puta > section > div .note sub::before { color: var(--premium); } #puta > section > .header > strong { position: absolute; top: 0.3rem; right: 5rem; margin-left: auto; color: var(--grey); font-size: 1.3rem; font-weight: 300; line-height: 1.6rem; text-align: right; } #puta > section > div { position: relative; margin-bottom: var(--pad); padding: 0; } #puta > section > div > h3 { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; margin: 0; padding: var(--pad) 0 0; font-size: 2.5rem; line-height: 1; letter-spacing: -0.05rem; text-transform: none; } #puta > section > div > sub { position: absolute; top: calc(var(--pad) + 0.8rem); right: 0; } #puta > section > div > ol.params { display: flex; flex-wrap: wrap; gap: var(--pad); margin: 1.2rem 0 0; padding: 0; list-style: none; } #puta > section > div > ol.params > li { box-sizing: border-box; width: 9.6rem; height: 9.4rem; padding-top: 3.2rem; border-radius: 0.8rem; background: url(/assets/del/Parametry_frame_1.svg) bottom center no-repeat; background-size: contain; color: var(--base); font-family: var(--font-base); font-size: 3.3rem; line-height: 1; text-align: center; } #puta > section > div > ol.params > li.edad { background-image: url(/assets/del/Parametry_frame_1.svg); } #puta > section > div > ol.params > li.altura { background-image: url(/assets/del/Parametry_frame_2.svg); } #puta > section > div > ol.params > li.busto { background-image: url(/assets/del/Parametry_frame_3.svg); } #puta > section > div > ol.params > li.pie { background-image: url(/assets/del/Parametry_frame_4.svg); } #puta > section > div > ol.params > li > i { display: block; margin-bottom: 0.4rem; color: var(--grey-light); font-size: 1.4rem; font-style: normal; } #puta > section > div > ol.params > li::after { content: attr(data-value); display: block; color: var(--base); font-size: 3.5rem; font-weight: 400; line-height: 1; } #puta > section > div > ol.params > li b { display: block; color: var(--base); font-size: 3.5rem; font-weight: 400; line-height: 1; } #puta .scroll { padding: 0; } #puta .phones { display: flex; justify-content: center; gap: var(--pad-min); margin: var(--pad) 0; } #puta .phones a { position: relative; display: inline-flex; align-items: center; flex: 1; gap: 0.5rem; padding: 0.8rem 1.6rem 0.7rem 4.8rem; border: 0.1rem solid currentColor; border-radius: 99.9rem; background: none; color: inherit; font-size: 1.6rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: background 0.3s ease, color 0.3s ease; } #puta .phones a[rel="off"] { color: #333; border-color: #333; background-color: #000; user-select: none; pointer-events: none; } #puta .phones a::before { content: ""; position: absolute; top: 0.3rem; left: 0.3rem; display: inline-block; width: 3.3rem; height: 3.3rem; border-radius: 50%; background-repeat: no-repeat; background-position: center center; background-size: 2.2rem 2.2rem; opacity: 0.9; } #puta .phones a[rel="off"]::before { background-color: #333; border-color: #333; color: #000; } #puta .phones .telefon { background-color: #00c9c9; border-color: #00b0b0; color: #000; } #puta .phones .telefon::before { background-image: var(--ico-phone); background-color: #00b0b0; } #puta .phones .whatsapp { color: #25d366; } #puta .phones .whatsapp::before { background-image: var(--ico-whatsapp); background-color: #25d366; } #puta .phones .telegram { color: #33b4f0; } #puta .phones .telegram::before { background-image: var(--ico-telegram); background-color: #33b4f0; background-position: 0.4rem center; } #puta .phones .whatsapp:hover { background-color: #1c9146; color: #fff; } #puta .phones .whatsapp:hover::before { background-color: #25d366; } #puta .phones .telegram:hover { background-color: #0088cc; color: #fff; } #puta .phones .telegram:hover::before { background-color: #33b4f0; } #puta .phones .telefon:hover { background-color: #00b0b0; color: #000; } #puta .phones .telefon:hover::before { background-color: #00c9c9; } #puta .phones a > i { opacity: 0.5; font-style: normal; } #puta .phones .telefon b { position: relative; margin-right: 0.2rem; color: transparent; transition: color 0.3s ease; } #puta .phones .telefon b::after { content: "???"; position: absolute; top: 0; left: 0; color: #000; transition: opacity 0.3s ease; } #puta .phones .telefon:hover b { color: inherit; } #puta .phones .telefon:hover b::after { opacity: 0; } #puta > section > div > h3 > u { position: relative; padding-left: 2.8rem; text-decoration: none; font-family: var(--font-base); font-style: normal; font-weight: 100; } #puta > section > div > h3 > u::before { content: ""; position: absolute; top: 50%; left: 0; width: 2.5rem; height: 2.5rem; margin-top: 0.3rem; opacity: 0.6; background: var(--ico-locate) no-repeat center; background-size: contain; transform: translateY(-50%); } #puta > section > div > u { position: relative; display: block; height: auto; /* 1.7rem; */ padding-top: 0.7rem; color: var(--grey-light); font-size: 1.4rem; text-align: right; text-decoration: none; } #puta > section > div > u.l { text-align: left; } #puta > section > div > u.white { color: var(--premium); } #puta > section > div > u.red { color: #ef4346; } #puta > section > div > u a { position: absolute; left: 0; color: var(--yellow); } #puta > section > div > u a svg { position: relative; top: 2px; margin-right: 0.3rem; width: 1.6rem; height: 1.6rem; } .costo { position: absolute !important; top: 2.8rem; right: 2.8rem; display: block; color: var(--premium); font-size: 2rem; text-decoration: none; } .costo::before { display: none; } .costo b { margin-right: 0.5rem; font-size: 4.2rem; font-weight: 100; letter-spacing: -0.3rem; } .costo a { position: absolute; top: 20px; left: 0; right: 0; display: block; height: 38px; line-height: 58px; color: var(--tiffany); font-family: var(--font-base); font-size: 16px; text-align: center; } #puta .horario { width: 100%; height: 10rem; margin-top: var(--pad); border-radius: var(--radius); } #puta .horario div { padding: var(--pad-min) 0; background: var(--bg-header); color: #fff; font-size: 14px; } #puta .horario div:nth-of-type(1) { background: url(/assets/ico/bg.png) repeat center; } article .horario div { border-right: 1px solid rgba(255, 255, 255, 0.2); } #puta .horario div { border-color: var(--bg); } #puta .horario div.g { color: var(--grey); } #puta > section > div .note { padding: 15px 15px 15px 60px; color: var(--grey); font-size: 1.5rem; line-height: 1.9rem; text-align: left; } #puta > section > div .note.puro { margin: 0; padding: var(--pad-min) var(--pad); min-height: auto; user-select: none; } #puta #Prefers .note.puro { margin-top: var(--pad-min); } #puta > section.is_star > div .note::before { height: 100%; } #puta > section > div .note.puro::before { display: none; } #puta div.descr { padding-top: 10px; font-size: 16px; } #puta div.descr p { margin: 0; padding: 15px 0 0; } main { position: relative; } .page-filters { position: absolute; top: 1.5rem; right: var(--pad); z-index: 1; display: flex; align-items: center; gap: 0; margin: 0; } .page-filters > li + li { margin-left: 1.2rem; } .chip { display: inline-flex; align-items: center; justify-content: center; height: 2.2rem; margin: 0; padding: 0 var(--pad-min); border-radius: var(--radius); border: 1px solid var(--search-outline, #333); background: var(--search-bg, #0f0f0f); color: var(--text, #fff); font-size: 1.3rem; line-height: 1; white-space: nowrap; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .page-filters .chip, .page-filters .chip-group { border-color: var(--grey); background: var(--bg); color: var(--white); height: 2.8rem; } .chip:hover { border-color: var(--yellow); color: var(--yellow); } .chip.is-active { border-color: var(--yellow); background: var(--yellow); color: #000; } .chip-group { display: inline-flex; align-items: stretch; background: var(--bg); } .chip-group .chip { padding: 0 1rem; background: transparent; } .chip-group .chip:first-of-type { border-radius: var(--radius) 0 0 var(--radius); } .chip-group .chip:last-of-type { border-radius: 0 var(--radius) var(--radius) 0; } .chip-group .chip.is-active { background: var(--yellow); color: #000; } .chip-sep { width: 0.2rem; margin: 4px 0; background: var(--bg); } @media (max-width: 640px) { .page-filters { position: static; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem 1rem; margin: var(--pad) 0; } .page-filters > li + li { margin-left: 0; } } .chip-select { position: relative; display: inline-flex; align-items: center; height: 5rem; border-radius: var(--radius); border: 1px solid var(--search-outline, #333); background: var(--search-bg, #0f0f0f); transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; } .chip-select:hover { border-color: var(--yellow); } .chip-select select { appearance: none; -webkit-appearance: none; -moz-appearance: none; height: 5rem; margin: 0; padding: 0 calc(var(--pad-min) + 1.6rem) 0 var(--pad-min); border: 0; background: transparent; color: var(--text, #fff); font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; } .chip-select__arrow { position: absolute; top: 50%; right: 0.5rem; width: 1.1rem; height: 1.1rem; pointer-events: none; opacity: 0.85; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ccc' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; transform: translateY(-50%); } .chip-select:has(select:focus) { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.12); } .chip-select.is-active { border-color: var(--yellow); background: var(--yellow); } .chip-select.is-active select { color: #000; } .chip-select.is-active .chip-select__arrow { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23000' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); } .chip-select select option { background: #0f0f0f; color: #fff; } .page-filters .chip-select, .page-filters .chip-select select { height: 2.8rem; } @media (max-width: 640px) { .chip-select { height: 2.6rem; } .chip-select select { font-size: 1.3rem; } } .horario div:last-child { border-right: none; } .horario div span { font-weight: 100; } .horario div span:nth-of-type(1) { font-size: 2.6rem; font-weight: 100; line-height: 1; } .horario div span:nth-of-type(2) { } .horario div span:nth-of-type(3) { padding-top: 0.8rem; color: var(--premium); font-weight: 400; } article .horario div span:nth-of-type(3) { color: var(--premium); } .horario div span:nth-of-type(4) { position: relative; margin: 4px 7% 0; width: 86%; height: 1rem; overflow: hidden; border-radius: var(--radius); background: rgba(0, 0, 0, 0.4); } article .horario div span:nth-of-type(4) { background: rgba(255, 255, 255, 0.5); } article details[open] div.horario div span:nth-of-type(4) { background: rgba(255, 255, 255, 0.15); } .horario div span:nth-of-type(4) > span { position: absolute; top: 0; height: 100%; background: var(--premium); } .horario span.l { left: 0; } .horario span.r { right: 0; } .horario span.c { left: 50%; transform: translateX(-50%); } .horario span.g { background: #555 !important; } .horario > div.g > span:nth-of-type(3), .horario > div.g > span:nth-of-type(3) > span { position: relative; display: block; width: 100%; overflow: hidden; background: none; text-indent: -9999px; } .horario > div.g > span:nth-of-type(4), .horario > div.g > span:nth-of-type(4) > span { opacity: 0; } .horario > div.g > span:nth-of-type(3)::before { content: "?"; position: absolute; top: 10px; left: 0; display: block; width: 100%; color: var(--grey); font-weight: 700; text-align: center; text-indent: 0; } div.list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad-min); } div.list ul { width: 100%; margin: 0; padding: 0; list-style: none; } div.list li { position: relative; margin: 0; padding: 0 0 8px 25px; color: var(--grey); font-size: 1.6rem; line-height: 1.4; } div.list li.i-no { text-decoration: line-through; } div.list li.head { padding-left: 0; color: var(--base); font-size: 1.4rem; font-weight: bold; } div.list li > span { display: block; color: #ef4346; font-size: 1.4rem; font-weight: normal; line-height: 1.2; } div.list li > span > b { font-weight: bold; } div.list li.i-love, div.list li.i-do, div.list li.maybe { color: var(--base); } div.list li::before, .ilist li::before { content: ""; position: absolute; top: 2px; left: 0; width: 18px; height: 18px; background-image: var(--ico-no); background-repeat: no-repeat; background-position: center; background-size: contain; } div.list li.head::before { background: none; } div.list li.i-love::before, .ilist li.i-love::before { background-image: var(--ico-ilove); } div.list li.i-do::before, .ilist li.i-do::before { background-image: var(--ico-ido); } div.list li.maybe::before, .ilist li.maybe::before { background-image: var(--ico-maybe); } div.list li:last-of-type { margin-bottom: 0; } #hint { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 888; width: 100vw; height: 100vh; overflow-y: auto; } #hint > i { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 989; cursor: pointer; background-color: rgba(0, 0, 0, 0.75); transition: background-color 0.3s ease; } #hint > i:hover::before { filter: brightness(1.5); } #hint > i::before { content: ""; position: absolute; top: 25px; right: 25px; width: 31px; height: 31px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' fill='none' viewBox='0 0 24 24' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E") no-repeat center; background-size: contain; transition: filter 0.3s ease; } #hint > div { position: absolute; top: 50%; left: 50%; z-index: 999; width: 330px; padding: 240px 35px 35px; border-radius: 15px; text-align: center; background-color: var(--bg-header); background-image: url("/assets/del/face.webp"); background-repeat: no-repeat; background-position: center 35px; background-size: auto 185px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); color: var(--base); font-family: var(--font-base); font-size: 16px; line-height: 22px; font-weight: 300; transform: translate(-50%, -50%); } #hint > div > a, #hint > div > strong { font-weight: 500; } #hint > div > a { color: var(--tiffany); } .reels { display: flex; flex-wrap: nowrap; gap: 1rem; } .reel { position: relative; display: block; width: 16.5rem; height: 27rem; overflow: hidden; border-radius: 1.3rem; background-position: center; background-size: cover; text-decoration: none; cursor: pointer; transition: filter 0.4s ease; } .reel:hover { filter: brightness(1.1) saturate(1.2); } .reels > .reel { flex: 0 0 auto; scroll-snap-align: start; } .reelz { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--pad-min); justify-content: center; align-content: start; } @media (max-width: 640px) { .reelz { grid-template-columns: repeat(2, 1fr); } } :root { --grid-cols: 5; } @media (min-width: 1600px) { :root { --grid-cols: 6; } } @media (max-width: 1200px) { :root { --grid-cols: 4; } } @media (max-width: 768px) { :root { --grid-cols: 2; } #puta > section > .header span::before { } #puta > section > div#Prefers > h3 { padding-right: 18rem; } } .reelz { grid-template-columns: repeat(var(--grid-cols), 1fr); gap: clamp(0.8rem, 2vw, 1.6rem); justify-content: stretch; } .reelz > .reel { display: block; width: 100%; height: 36.6rem; background-position: center; background-size: cover; } .reel::before { content: ""; position: absolute; top: 50%; left: 50%; z-index: 2; width: 4.6rem; height: 4.6rem; background: url(/assets/del/Play_stories_button.svg) no-repeat center; background-size: contain; transform: translate(-50%, -50%); } .reel.is_trend::after { content: "TREND"; position: absolute; top: 0.6rem; left: 0.6rem; z-index: 5; height: 1.4rem; padding: 0 0.4rem 0 1.6rem; border: 0.1rem solid currentColor; border-radius: 3rem; background-color: transparent; background-image: var(--ico-trend); background-repeat: no-repeat; background-position: 0.1rem center; background-size: 1.4rem 1.4rem; color: var(--premium); font-size: 0.8rem; font-weight: 700; line-height: 1.3rem; letter-spacing: 1px; white-space: nowrap; } .reel strong { position: absolute; bottom: 0.8rem; left: 1.1rem; right: 3.6rem; z-index: 2; padding-top: 1.5rem; color: var(--white); font-family: var(--font-base); font-size: 1.4rem; font-weight: 500; line-height: 1.6rem; } .reel strong::before { content: ""; position: absolute; bottom: -0.8rem; left: -1.1rem; right: -3.6rem; height: 4rem; border-radius: 0 0 1.3rem 1.3rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0, transparent); z-index: -1; } .reel.is_hot strong::after { content: ""; position: absolute; bottom: 0; right: -2.8rem; z-index: 2; width: 2.2rem; height: 2.2rem; background: url(/assets/del/Spice_3_small_card_icon.svg) no-repeat center; background-size: contain; } .reel strong i { position: absolute; top: 0; left: 0; opacity: 0.5; font-size: 1.2rem; } .ilist { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .note.puro .ilist { display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; margin: 0; padding: 0; list-style: none; } .ilist li { position: relative; padding-left: 25px; color: var(--base); font-size: 15px; line-height: 1.4; } .reviews { margin-top: 30px; padding-top: 20px; color: var(--base); font-family: var(--font-base); font-size: 15px; line-height: 1.6; } .review { margin: var(--pad) 0 0; padding: var(--pad-min) var(--pad); border-radius: var(--radius); background: var(--bg-header); } .review .meta { display: flex; justify-content: space-between; color: var(--grey); font-size: 13px; } .review .meta strong { color: var(--grey); } .review p { margin: 0; color: var(--text); font-size: 14px; } #puta > section div.review .note.puro { margin: var(--pad-min) 0 0 !important; padding: var(--pad-min) 0 0 !important; min-height: auto !important; border-top: 1px dotted var(--search-outline); border-radius: 0 !important; background: none; } .review .ilist .i-do { color: var(--grey) !important; } .review sup { position: relative; top: -3px; display: inline-block; margin-left: 3px; padding: 1px 6px; border: 1px solid #aaa; border-radius: 88px; color: var(--grey); font-size: 11px; font-weight: normal; line-height: 1; vertical-align: top; } #puta > section div.review .note.puro, #puta > section div.form .note.puro { margin-top: 10px; padding: 10px; min-height: 38px; } #puta > section div.form .note.puro { margin: 0; border-radius: 0 0 var(--radius) var(--radius); } .review .ilist li, .form .ilist li { padding-left: 21px; color: #ef4346; font-size: 13px; } .review .ilist .i-do, .form .ilist .i-do { color: var(--tiffany); } .review .ilist li::before, .form .ilist li::before { top: 0; background-image: var(--ico-no-red); } .review .ilist .i-do::before, .form .ilist .i-do::before { background-image: var(--ico-ido); } #puta section .form { margin: 0; padding: 0; border: none; } .form textarea { width: 100%; min-height: 8rem; margin: 0; padding: var(--pad-min); box-sizing: border-box; border-radius: var(--radius) var(--radius) 0 0; background: var(--search-bg); color: var(--text); font-size: 14px; resize: vertical; outline: none; box-shadow: inset 0 6px 10px -6px rgba(0, 0, 0, 0.15); transition: box-shadow 0.3s ease; } .form textarea:focus { box-shadow: inset 0 10px 20px -8px rgba(0, 0, 0, 0.55); } .form .note.puro { margin-top: -5px !important; border-radius: var(--radius); background: rgba(0, 0, 0, 0.05); } .form .puro .ilist { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .form .ilist li { display: flex; align-items: center; gap: 8px; padding-left: 0; color: var(--grey); } .form .ilist li label { user-select: none; cursor: pointer; } .form .ilist li::before { display: none; } .form .puro input[type="checkbox"] { width: 16px; height: 16px; border-radius: var(--radius); accent-color: var(--premium); } .controls { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 10px; color: var(--premium); font-weight: bold; } .controls .report { position: relative; margin-left: 11px; padding-left: 20px; color: #ef4346; font-size: 13px; text-decoration: none; } .controls .report::before { content: ""; position: absolute; top: 0.1rem; left: 0; width: 1.6rem; height: 1.6rem; background-color: #ef4346; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23ef4346' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") no-repeat center; -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23ef4346' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") no-repeat center; mask-size: contain; -webkit-mask-size: contain; } .controls .report:hover { text-decoration: underline; } .controls .actions { display: flex; align-items: center; gap: 7px; text-align: right; font-size: 13px; } .controls .actions a { color: var(--premium); text-decoration: none; } .controls .actions a:hover { text-decoration: underline; } .controls button { margin-left: 6px; padding: 10px 20px; border: none; border-radius: 6px; background: var(--premium); color: var(--bg); font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.3s ease; } .controls button:hover { background: var(--yellow); color: var(--bg); } #puta > section > .off { position: relative; display: block; box-sizing: border-box; padding: 180px 20px 10px; color: #959595; font-family: PFDinTextCompProLight; font-size: 66px; line-height: 65px; text-align: center; text-transform: uppercase; background-image: url("/assets/del/Don_archive_ico_2020.webp"); background-repeat: no-repeat; background-position: center top; background-size: auto 150px; } #puta.off div[rel="dynamic"] { display: none; } @media (min-width: 1600px) { article { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 1200px) { article { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 1111px) { .o1111 { display: none !important; } } @media (max-width: 999px) { .o999 { display: none !important; } } @media (max-width: 888px) { .o888 { display: none !important; } :root { --pad: 1.5rem; } header form { padding: 0; } } @media (max-width: 768px) { article { grid-template-columns: repeat(2, 1fr); } .o777, header form, header nav > ul .nav { display: none !important; } .o888.o777 { display: block !important; } .add { color: var(--yellow); } .add span { display: none; } header { padding: var(--pad); } header nav > a { font-size: 1.5rem; font-weight: 700; height: 3rem; line-height: 1.05; } header nav:last-of-type { position: relative; display: block; margin: var(--pad) 0 0; border-top: 1px solid rgba(255, 255, 255, 0.1); } header nav > div { position: absolute; top: 0; right: 0; bottom: 0; margin-left: 0; width: auto; white-space: nowrap; } header nav > ul { padding-right: 39%; font-size: 1.25rem; } header nav > div, header nav > ul li a { padding: var(--pad) 0 0; user-select: none; } } @media (max-width: 480px) { article { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 769px) { .add { display: flex; flex-direction: row; gap: 0.6rem; padding: 0.4rem 1.1rem 0.4rem 0.6rem; border: 2px solid currentColor; border-radius: var(--btn-radius); color: var(--yellow); font-size: 1.2rem; font-weight: 600; line-height: 1; text-transform: uppercase; cursor: pointer; transition: all 0.25s ease-in-out; } .add svg { width: 2.2rem; height: 2.2rem; flex-shrink: 0; transition: transform 0.3s ease; } .add small { display: none; } header nav > a em { position: absolute; display: block; width: 100%; left: 0; margin-top: 3rem; opacity: 0; font-family: var(--font-base); font-style: normal; font-weight: 700; font-size: 1.1rem; line-height: 1.4; background: linear-gradient(90deg, #ffcc00, #ff5500, #ffcc00); background-size: 200%; background-position: 0%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; animation: shine 3s linear infinite; transition: all 0.4s ease; } header nav > a span { transition: all 0.2s ease; } header nav > a:hover span { opacity: 0; margin-top: -3rem; } header nav > a:hover em { opacity: 1; margin-top: 0; } @keyframes shine { 0% { background-position: 0%; } 100% { background-position: 200%; } } } @media (min-width: 768px) { .desctop { display: none !important; } } @media (max-width: 768px) { .tarifas { width: 100% !important; } } @media (hover: hover) and (pointer: fine) { a:hover, button:hover { color: var(--yellow); } a.hover::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 0%; height: 1px; background: var(--accent-grad); transition: width 0.3s ease; } a.hover:hover::after, a.hover:focus::after { width: 100%; } a.hover:hover, a.hover:focus { color: var(--yellow); } .add:hover { color: var(--green); } .add:hover svg, nav > ul li a:hover svg.nav { transform: rotate(180deg); } } .lb { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; grid-template-areas: "stage"; background: rgba(0, 0, 0, 0.8); opacity: 0; transform: scale(1.02); transition: opacity 0.22s ease, transform 0.22s ease; backdrop-filter: saturate(1.1) blur(2px); } .lb[hidden] { display: none; } .lb.open { opacity: 1; transform: scale(1); } .lb__stage { position: relative; grid-area: stage; width: 100%; height: 100%; padding: var(--pad); box-sizing: border-box; cursor: zoom-out; } .lb__img-wrap { position: relative; display: grid; place-items: center; width: 100%; height: 100%; overflow: visible; } .lb__img { width: auto; height: auto; max-width: calc(100vw - (var(--pad) * 2)); max-height: calc(100vh - (var(--pad) * 2)); object-fit: contain; user-select: none; -webkit-user-drag: none; cursor: pointer; border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); opacity: 0; transform: translateY(6px) scale(0.985); transition: opacity 0.25s ease, transform 0.3s ease; background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.06), transparent 60%); } .lb__img.ready { opacity: 1; transform: translateY(0) scale(1); } .lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: clamp(36px, 5vw, 52px); height: clamp(36px, 5vw, 52px); display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: #fff; cursor: pointer; user-select: none; opacity: 0.85; transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease; backdrop-filter: blur(2px); } .lb__nav:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-50%) scale(1.05); } .lb__nav:active { transform: translateY(-50%) scale(0.98); } .lb__prev { left: max(var(--pad), 12px); } .lb__next { right: max(var(--pad), 12px); } .lb__nav svg { width: 50%; height: 50%; fill: none; stroke: currentColor; stroke-width: 2.2; } .lb__count { position: absolute; left: 50%; bottom: max(calc(var(--pad) - 1.2rem), 8px); transform: translateX(-50%); padding: 0.35rem 0.8rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.6rem; background: rgba(0, 0, 0, 0.45); color: #ddd; font: 500 1.2rem/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; letter-spacing: 0.04em; user-select: none; pointer-events: none; } .lb__img--slide-out-left { animation: lbSlideOutLeft 220ms ease forwards; } .lb__img--slide-out-right { animation: lbSlideOutRight 220ms ease forwards; } .lb__img--slide-in-left { animation: lbSlideInLeft 260ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards; } .lb__img--slide-in-right { animation: lbSlideInRight 260ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards; } @keyframes lbSlideOutLeft { to { opacity: 0; transform: translateX(-20px) scale(0.985); } } @keyframes lbSlideOutRight { to { opacity: 0; transform: translateX(20px) scale(0.985); } } @keyframes lbSlideInLeft { from { opacity: 0; transform: translateX(20px) scale(0.985); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes lbSlideInRight { from { opacity: 0; transform: translateX(-20px) scale(0.985); } to { opacity: 1; transform: translateX(0) scale(1); } } body.lb-lock { overflow: hidden; touch-action: none; } .vlb { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: rgba(0, 0, 0, 0.85); opacity: 0; transform: scale(1.02); transition: opacity 0.22s ease, transform 0.22s ease; backdrop-filter: saturate(1.05) blur(2px); } .vlb[hidden] { display: none; } .vlb.open { opacity: 1; transform: scale(1); } .vlb__stage { position: relative; width: 100%; height: 100%; box-sizing: border-box; cursor: zoom-out; padding: calc(var(--pad) + env(safe-area-inset-top)) calc(var(--pad) + env(safe-area-inset-right)) calc(var(--pad) + env(safe-area-inset-bottom)) calc(var(--pad) + env(safe-area-inset-left)); } .vlb__wrap { position: relative; display: grid; place-items: center; width: 100%; height: 100%; pointer-events: none; } .vlb__box { display: grid; grid-template-rows: auto 1fr auto; gap: 0.6rem; width: min(100%, 110rem); max-width: calc(100vw - (var(--pad) * 2)); max-height: calc(100vh - (var(--pad) * 2)); pointer-events: auto; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius); background: rgba(0, 0, 0, 0.35); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); transform: translateY(6px) scale(0.985); opacity: 0; transition: opacity 0.25s ease, transform 0.3s ease; } .vlb__box.ready { opacity: 1; transform: translateY(0) scale(1); } .vlb__meta { position: absolute; top: 0.9rem; left: 0.9rem; z-index: 3; display: grid; gap: 0.2rem; max-width: calc(100% - 2rem); padding: 0.6rem 0.8rem; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0.6rem; background: rgba(0, 0, 0, 0.45); } .vlb__title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 1.4rem/1.2 var(--font-base, system-ui); color: #f3f3f3; letter-spacing: 0.01em; } .vlb__date { font: 400 1.1rem/1.1 var(--font-base, system-ui); color: #bdbdbd; opacity: 0.85; } .vlb__video { max-width: 100%; max-height: calc(100vh - (var(--pad) * 2)); object-fit: contain; background: #000; } .vlb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: clamp(36px, 5vw, 52px); height: clamp(36px, 5vw, 52px); display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; user-select: none; opacity: 0.9; transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease; backdrop-filter: blur(2px); pointer-events: auto; z-index: 4; } .vlb__nav:hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-50%) scale(1.05); } .vlb__nav:active { transform: translateY(-50%) scale(0.98); } .vlb__prev { left: max(var(--pad), 12px); } .vlb__next { right: max(var(--pad), 12px); } .vlb__nav svg { width: 50%; height: 50%; fill: none; stroke: currentColor; stroke-width: 2.2; } .vlb__controls { position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.9rem; z-index: 3; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.8rem; padding: 0.6rem 0.8rem; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0.6rem; background: rgba(0, 0, 0, 0.45); } .vlb__btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; user-select: none; transition: background 0.2s ease, transform 0.15s ease; } .vlb__btn:hover { background: rgba(255, 255, 255, 0.16); } .vlb__btn:active { transform: scale(0.97); } .vlb__btn svg { width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 2; } .vlb__time { min-width: 80px; color: #ddd; font: 500 1.2rem/1 var(--font-base, system-ui); opacity: 0.9; text-align: center; white-space: nowrap; user-select: none; } .vlb__progress { position: relative; height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.12); cursor: pointer; } .vlb__bar { position: absolute; top: 0; left: 0; width: 0%; height: 100%; background: linear-gradient(90deg, var(--yellow, #ffcc00), var(--accent, #ff6600)); } .vlb__buffer { position: absolute; top: 0; left: 0; width: 0%; height: 100%; background: rgba(255, 255, 255, 0.18); } .vlb--portrait .vlb__box { width: min(90vw, 52rem); height: calc(100vh - (var(--pad) * 2)); } .vlb--landscape .vlb__box { width: min(100%, 110rem); height: auto; max-height: calc(100vh - (var(--pad) * 2)); } .vlb--portrait .vlb__meta, .vlb--portrait .vlb__controls { left: 0.7rem; right: 0.7rem; padding: 0.5rem 0.7rem; } .vlb--portrait .vlb__title { font-size: 1.3rem; } .vlb--portrait .vlb__date { font-size: 1.05rem; } .vlb--zoom .vlb__video { object-fit: cover; } .auth { display: grid; place-items: center; padding: var(--pad); min-height: calc(100vh - 8rem); } .auth-card { width: min(100%, 520px); margin: var(--pad) auto; border: 1px solid var(--search-outline); border-radius: var(--radius); background: var(--bg-header); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); } .auth-card h1 { padding: 1.2rem 1.6rem; font-family: var(--font-head); font-size: 1.6rem; font-weight: 700; text-align: center; text-transform: none; border-bottom: 1px solid var(--search-outline); } .auth-form { display: grid; gap: 1.2rem; padding: 1.4rem var(--pad); } .field-xl { display: grid; gap: .6rem; } .field-xl.mar { margin: var(--pad-min) var(--pad); } .field-xl .label { font-size: 1.3rem; color: var(--grey); } .field-xl .checkline { position: relative; padding-left: 2rem; } .field-xl .checkline input[type="checkbox"] { position: absolute; top: 0.6rem; left: 0; } .field-xl .checkline a { color: var(--tiffany); } .field-xl .checkline a:hover { color: var(--yellow); } .input-xl { width: 100%; height: 5rem; padding: 0 var(--pad-min); font-size: 1.5rem; color: var(--text); border: 1px solid var(--search-outline); border-radius: var(--radius); background: var(--search-bg); transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } .input-xl::placeholder { color: #9b9b9b; opacity: .7; } .input-xl:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 204, 0, .12); } .pw { position: relative; display: grid; } .pw .input-xl { padding-right: 3.6rem; } .pw-toggle { position: absolute; top: 50%; right: .4rem; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; color: var(--grey); background: transparent; border: none; border-radius: var(--radius); cursor: pointer; } .pw-toggle:hover { color: var(--yellow); } .pw-toggle svg { width: 18px; height: 18px; fill: currentColor; } .auth-row { display: flex; justify-content: space-between; align-items: center; margin: .2rem var(--pad); } .auth-row span { color: #f00; } .forgot { color: var(--tiffany); font-size: 1.3rem; } .forgot:hover { text-decoration: underline; } .btn-green { display: grid; place-items: center; margin: var(--pad-min) 8.88rem var(--pad); height: var(--btn-height); border-radius: var(--radius); background: none; color: var(--green); border: 2px solid var(--green); font-weight: 700; font-size: var(--btn-font); cursor: pointer; } .btn-green:hover { color: var(--bg); background: var(--green); } .btn-primary { display: grid; place-items: center; margin: 0 var(--pad); height: var(--btn-height); border: none; border-radius: var(--radius); background: linear-gradient(90deg, #fc0, #f50, #fc0); background-size: 200%; background-position: 0%; animation: shine-bg 3.2s linear infinite; color: #000; font-weight: 700; font-size: var(--btn-font); cursor: pointer; } .btn-primary:hover { background: var(--green); color: var(--bg); } @keyframes shine-bg { 0% { background-position: 0%; } 100% { background-position: 200%; } } .auth-sep { display: grid; place-items: center; padding: .6rem var(--pad) 0; } .auth-sep span { display: inline-block; position: relative; padding: 0 .8rem; font-size: 1.2rem; color: var(--grey); } .auth-sep span::before, .auth-sep span::after { content: ""; position: absolute; top: 50%; width: 9rem; height: 1px; background: var(--search-outline); } .auth-sep span::before { right: 100%; } .auth-sep span::after { left: 100%; } .signup-grid { display: grid; gap: .8rem; padding: .8rem var(--pad) var(--pad); } .signup-grid small { display: block; padding: 0 var(--pad) 1rem; margin-top: -0.2rem; line-height: 1.3; opacity: .7; } .btn-ghost { display: grid; place-items: center; height: var(--btn-height); font-size: 1.4rem; font-weight: 600; color: var(--text); border: 1px solid var(--search-outline); border-radius: var(--radius); background: transparent; } .btn-ghost:hover { color: var(--yellow); border-color: var(--yellow); } #add .btn-ghost { color: var(--yellow); border-color: var(--yellow); } #add .btn-ghost:hover { color: var(--green); border-color: var(--green); } .btn-ghost span { display: flex; align-items: center; gap: .8rem; } .btn-ghost span svg { width: 1.6rem; height: 1.6rem; } .auth-disclaimer { margin: .8rem var(--pad) 0; font-size: 1.2rem; line-height: 1.4; color: var(--grey); } .auth-disclaimer a { color: var(--tiffany); text-decoration: underline; } .auth-intro { text-align: center; } .field-xl .auth-intro small { display: block; margin: 0; padding: 0; width: 100%; text-align: center !important; } .field-xl .auth-intro .btn-green { margin-top: var(--pad); margin-bottom: 0; color: var(--green); text-decoration: none; } .field-xl .auth-intro .btn-green:hover { color: var(--bg); } .auth-intro a { color: var(--tiffany); } .auth-intro a:hover { color: var(--yellow); } @media (max-width: 480px) { .auth-card { border-radius: var(--radius); } .auth-sep span::before, .auth-sep span::after { width: 6rem; } } section.content { padding: 0; color: var(--text); line-height: 1.7; scroll-margin-top: 90px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } section.content :where(p, ul, ol, h2, h3, h4, blockquote, hr) { margin-block: 0.9rem; } section.content :where(p, li) { color: var(--base); font-size: 1.6rem; } section.content h1 { margin: 0 0 1rem; color: var(--text); font-family: var(--font-cali); font-size: clamp(2.6rem, 4.4vw, 3.6rem); font-weight: 600; letter-spacing: 0.01em; line-height: 1.1; } section.content h2 { margin: 2rem 0 0.4rem; color: var(--text); font-family: var(--font-cali); font-size: clamp(1.9rem, 2.6vw, 2.4rem); font-weight: 600; letter-spacing: 0.02em; line-height: 1.25; } section.content h3 { margin: 1.8rem 0 0.4rem; font-family: var(--font-head); font-size: clamp(1.7rem, 2.2vw, 2rem); font-weight: 700; } section.content > p:first-of-type { margin: 0.4rem 0 1.2rem; color: var(--grey); font-size: 1.4rem; } section.content > p:first-of-type strong { color: var(--premium); font-weight: 700; } section.content ul, section.content ol { padding-left: 0; } section.content ul li, section.content ol li { position: relative; margin: 0.3rem 0; padding-left: 1.6rem; } section.content ul li::before { content: ""; position: absolute; top: 0.9em; left: 0; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--grey); transform: translateY(-50%); } section.content ol { counter-reset: ol; } section.content ol li::before { counter-increment: ol; content: counter(ol) "."; position: absolute; top: 0; left: 0; color: var(--grey); font-weight: 600; } section.content a { color: var(--premium); text-decoration: underline; text-underline-offset: 0.15em; transition: color 0.2s ease, text-decoration-color 0.2s ease; } section.content a:hover { color: var(--yellow); text-decoration-color: var(--yellow); } section.content strong { color: var(--text); font-weight: 700; } section.content p strong { background: none; padding: 0; border-radius: 0; } section.content hr { height: 1px; margin: 1.6rem 0; border: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); } section.content blockquote { margin: 1.2rem 0; padding: 0.8rem 1.2rem; border-left: 3px solid var(--yellow); border-radius: var(--radius); background: rgba(255, 255, 255, 0.03); color: var(--base); } @media (max-width: 640px) { section.content { margin: 2rem auto; padding: 1.4rem 0; } section.content :where(p, li) { font-size: 1.5rem; } section.content h1 { font-size: clamp(2.3rem, 6vw, 2.8rem); } section.content h2 { font-size: clamp(1.7rem, 4.6vw, 2rem); } } @media (prefers-reduced-motion: reduce) { section.content * { transition: none !important; animation: none !important; } } section.content .tips h3 { margin-bottom: 2.3rem; } .content.content--legal .content-grid { display: grid; grid-template-columns: 280px 1fr; gap: clamp(1.6rem, 3vw, 3.2rem); max-width: 1200px; margin: 0 auto; padding: 0; } .content.content--legal .prose { padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.6rem, 3vw, 3rem); background: var(--bg-header); color: var(--text); border: 1px solid #1e1e1e; border-radius: var(--radius); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); line-height: 1.7; } .toc { position: sticky; top: var(--pad); align-self: start; padding: 1rem var(--pad); background: rgba(255, 255, 255, 0.03); border: 1px solid #1e1e1e; border-radius: var(--radius); } .toc-title { margin: 0.2rem 0 1rem; font-family: var(--font-cali); font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.9; } .toc-group { margin-top: 1.8rem; } .toc-group h4 { margin: 0.4rem 0 0.3rem; font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; color: var(--base); opacity: 0.9; } .toc-group ul { margin: 0; padding: 0; list-style: none; } .toc-group li + li { margin-top: 0.2rem; } section.content .toc-group li { padding-left: 0.8rem; } section.content .toc-group li::before { display: none; } .toc a { display: block; padding: 0.36rem 0.6rem; color: var(--base); font-size: 1.35rem; line-height: 1.3; border-radius: 0.6rem; text-decoration: none; transition: color 0.15s ease, background 0.15s ease; } .toc a:hover { color: var(--yellow); background: rgba(255, 255, 255, 0.04); } .toc a.is-active { color: var(--yellow); background: rgba(255, 255, 255, 0.05); padding-left: 0.8rem; margin-left: -0.3rem; } .prose :where(h2, h3) { scroll-margin-top: 90px; } @media (max-width: 960px) { .content.content--legal .content-grid { grid-template-columns: 1fr; } .toc { position: relative; top: auto; margin-bottom: 1rem; padding: 0.6rem; } .toc::before { content: "Índice"; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; font-family: var(--font-cali); font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.06em; background: var(--bg-header); border: 1px solid var(--search-outline, #333); border-radius: var(--radius); cursor: pointer; } .toc .toc-title, .toc .toc-group { display: none; } .toc.toc-open .toc-title, .toc.toc-open .toc-group { display: block; } } @media (max-width: 640px) { .toc a { font-size: 1.25rem; } } /* === 3-колоночная сетка для legal === */ .content.content--legal .content-grid--triple { display: grid; grid-template-columns: 280px 1fr 260px; /* TOC | PROSE | TIPS */ gap: clamp(1.6rem, 3vw, 3.2rem); max-width: 1200px; margin: 0 auto; padding: 0; } /* Правая колонка — советы */ .tips { position: sticky; top: var(--pad); align-self: start; padding: 1rem var(--pad); background: rgba(255,255,255,.03); border: 1px solid #1e1e1e; border-radius: var(--radius); color: var(--base); } .tips-title { margin: .2rem 0 1rem; font-family: var(--font-cali); font-size: 1.4rem; text-transform: uppercase; letter-spacing: .06em; opacity: .9; } .tips p { margin: 0 0 .8rem; font-size: 1.3rem; line-height: 1.55; } .tips ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; } .tips li { position: relative; padding-left: 1.2rem; font-size: 1.3rem; } .tips li::before { content: ""; position: absolute; left: 0; top: .9em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--yellow); opacity: .9; } /* Адаптив: как и у 2-колоночной версии — на мобиле всё в одну колонку */ @media (max-width: 960px) { .content.content--legal .content-grid--triple { grid-template-columns: 1fr; } .tips { position: relative; top: auto; margin-top: .8rem; padding: .8rem var(--pad); } .toc { order: 1; } .prose { order: 0; } .tips { order: 2; } } .content-grid--triple { margin: 0 !important; max-width: none !important; width: 100%; } .content-grid--triple section.auth-card { margin: 0; width: 100%; } .content-grid--triple table a { text-decoration: none; } .content-grid--triple h2.apellido { font-size: 2rem; margin: var(--pad-min) var(--pad-min) 0; text-transform: none; } .content-grid--triple .toc a { text-decoration: none; } .content-grid--triple .toc-group h4 { padding: var(--pad-min) 0; } section.content .content-grid--triple .toc-group li { padding-left: 0.3rem; } section.content .content-grid--triple .toc-group li li { padding-left: 0.8rem; } section.content .content-grid--triple .toc-group li ul { margin-bottom: var(--pad-min); } .site-footer { position: relative; margin-top: 9rem; } .site-footer::before { position: absolute; top: -60px; left: 0; right: 0; z-index: 1; pointer-events: none; height: 60px; background: var(--ft-bg); -webkit-mask: url("data:image/svg+xml;utf8,\ \ \ ") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,\ \ \ ") 0 0 / 100% 100% no-repeat; content: ""; } .site-footer::after { position: absolute; top: -78px; left: 0; right: 0; z-index: 1; pointer-events: none; height: 60px; background: linear-gradient(0deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .35)), var(--ft-bg); -webkit-mask: url("data:image/svg+xml;utf8,\ \ \ ") 0 0 / 100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,\ \ \ ") 0 0 / 100% 100% no-repeat; opacity: .45; content: ""; } @media (max-width: 640px) { .site-footer::before { top: -36px; height: 36px; } .site-footer::after { top: -50px; height: 36px; } } header form > div, header form > div.filters-grid { grid-template-columns: repeat(12, 1fr); gap: 1rem 1.2rem; padding: 0.8rem 0.9rem; } header form > div fieldset { grid-column: span 6; padding: 0.8rem 0.9rem 0.6rem; border: 1px solid #222; border-radius: 0.6rem; background: #0b0b0b; } @media (max-width: 888px) { header form > div fieldset { grid-column: 1 / -1; } } header form > div fieldset legend { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0 0.4rem 0.2rem; color: #bbb; font: 700 1.2rem/1 var(--font-base); text-transform: none; } legend { display: flex; align-items: center; gap: 0.4rem; } legend select { height: 1.6rem; padding: 0.1rem 1.6rem 0.1rem 0.5rem; border: 1px solid #444; border-radius: 0.4rem; background-color: #0f0f0f; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23ccc' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 0.8rem auto; color: var(--text); font: inherit; font-size: 1.2rem; line-height: 1.2; appearance: none; cursor: pointer; } legend select:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.12); outline: none; } header form > div fieldset .row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0.6rem 0.8rem; } header form > div fieldset label { align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } header form input[type="checkbox"], header form input[type="radio"] { flex: 0 0 1.4rem; width: 1.4rem; height: 1.4rem; border: 1px solid #444; border-radius: 0.3rem; background: #111; appearance: none; transition: 0.2s ease; } header form input[type="radio"] { border-radius: 999px; } header form input[type="checkbox"]:hover, header form input[type="radio"]:hover { border-color: var(--yellow); } header form input[type="checkbox"]:checked, header form input[type="radio"]:checked { border-color: var(--yellow); background: var(--yellow); } header form label:has(input:checked) { color: var(--yellow); font-weight: 700; } header form select, header form input[type="number"], header form input[type="text"].pill { width: 100%; height: 1.8rem; padding: 0 0.8rem; border: 1px solid #222; border-radius: var(--radius); background: #0f0f0f; color: var(--text); font-size: 1.2rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } header form select:focus, header form input[type="number"]:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.12); outline: none; } header form .range, header form .pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.6rem; } header form .range span, header form .pair span { opacity: 0.6; font-size: 1.2rem; } .col-12 { grid-column: span 12; } .col-8 { grid-column: span 8; } .col-6 { grid-column: span 6; } .col-4 { grid-column: span 4; } .col-3 { grid-column: span 3; } @media (max-width: 888px) { .col-8, .col-6, .col-4, .col-3 { grid-column: 1 / -1; } } header form div fieldset .checks-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem 0.6rem; } @media (max-width: 888px) { header form div fieldset .checks-3 { grid-template-columns: repeat(2, 1fr); } } header form .filter-set { grid-column: 1 / -1; } header form .filter-set fieldset { grid-column: span 6; } @media (max-width: 888px) { header form .filter-set fieldset { grid-column: 1 / -1; } } header form > div .filters-actions { position: sticky; bottom: 0.2rem; grid-column: 1 / -1; padding-top: 0.4rem; background: linear-gradient(#111, #1110); } header form > div button[type="submit"] { padding: 0.5rem 1.2rem 0.5rem 0.8rem; font-size: 1.25rem; } @media (max-width: 480px) { header form > div, header form > div.filters-grid { gap: 0.8rem; padding: 0.2rem 0.6rem; } } fieldset .grid-2 > label { display: grid; grid-template-columns: 40% 25% 1% 25%; align-items: center; gap: 0.4rem 0.6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.6rem; } fieldset .grid-2 > label:last-of-type { margin-bottom: 0; } fieldset .grid-2 > label input:nth-of-type(1) { grid-column: 2; } fieldset .grid-2 > label input:nth-of-type(2) { grid-column: 4; } fieldset .grid-2 > label input[type="number"] { width: 100%; height: 2.3rem; padding: 0 0.6rem; border: 1px solid #222; border-radius: 0.5rem; background: #0f0f0f; color: var(--text); font-size: 1.2rem; line-height: 2.3rem; } fieldset .grid-2 > label input[type="number"]:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.12); outline: none; } @media (max-width: 520px) { fieldset .grid-2 > label { grid-template-columns: 1fr 1fr; gap: 0.4rem; } fieldset .grid-2 > label::after { display: none; } fieldset .grid-2 > label input:nth-of-type(1), fieldset .grid-2 > label input:nth-of-type(2) { grid-column: auto; } } header form > div fieldset:has(#districts-box) { grid-column: 1 / -1; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; } .breadcrumbs { padding: 0; margin: 0 0 var(--pad-min); font-size: 1.2rem; color: #999; } .breadcrumbs ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; font-size: 1.25rem; color: #bbb; } .breadcrumbs li { display: inline-flex; align-items: center; gap: 0.4rem; } .breadcrumbs li + li::before { content: "/"; opacity: 0.4; margin-right: 0.6rem; } .breadcrumbs a { color: inherit; text-decoration: none; transition: color 0.2s ease; } .breadcrumbs a:hover { color: var(--yellow); } .breadcrumbs .current { color: #fff; opacity: 0.9; } .breadcrumbs li a { display: inline-flex; align-items: center; gap: 0.35rem; } .breadcrumbs svg { width: 1.4rem; height: 1.4rem; flex: 0 0 1.6rem; } .sinpad { padding: 0; } #map { position: relative; height: calc(100vh - var(--hdrh, 0px)); z-index: 0; } #map-stage { position: absolute; inset: 0; } #map .map-toolbar { position: absolute; top: 12px; right: var(--pad); z-index: 500; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .12); color: #fff; backdrop-filter: blur(4px); font: 500 13px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } #map .map-toolbar select, #map .map-toolbar button { height: 34px; border: 1px solid #333; background: #0f0f0f; color: #fff; padding: 0 .9rem; border-radius: 7px; cursor: pointer; } #map-type { min-width: clamp(12rem, 20vw, 18rem); } #map-city { min-width: clamp(14rem, 24vw, 18rem); } #map-turno { padding: 0 1rem; border-radius: 999px; font-weight: 600; color: #ddd; transition: background .2s ease, color .2s ease, border-color .2s ease; } #map-turno:hover, #map-turno.active { background: var(--yellow); color: #000; border-color: var(--yellow); } .leaflet-popup-content { font: 500 13px/1.45 system-ui; color: #222; } .poi-pin { position: relative; will-change: transform; } .poi-pin__wrap { display: inline-block; width: 100%; height: 100%; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); transition: transform .12s ease; } .leaflet-marker-icon.poi-pin:hover .poi-pin__wrap { transform: translateY(-1px) scale(1.04); } .leaflet-marker-icon.poi-pin.is-active .poi-pin__wrap { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); transform: translateY(-2px) scale(1.08); } .poi-pin__badge { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); min-width: 16px; height: 16px; padding: 0 .3rem; border-radius: 999px; font-size: 1rem; font-weight: 700; line-height: 16px; background: var(--yellow); color: red; border: 2px solid currentColor; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); pointer-events: none; user-select: none; } .company { margin: 0 0 var(--pad); padding: var(--pad) var(--pad) var(--pad-min); background: var(--bg-header); border: 1px solid var(--search-outline); border-radius: var(--radius); } .company__head { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); padding-bottom: var(--pad-min); } .company__title h1 { font-family: var(--font-cali); text-transform: none; letter-spacing: -0.2rem; font-size: clamp(2.6rem, 3vw, 4.8rem); line-height: .9; } .company__subtitle { color: var(--premium); font-size: 1.35rem; margin-top: .2rem; } .company__head .costo { bottom: .5rem; min-width: 20rem; font-weight: 100; text-align: right; } .company__head .costo b { margin-right: .4rem; } .company__head .costo a { margin-top: 1.2rem; font-weight: 400; text-align: right; font-size: 1.35rem; color: var(--premium); font-style: italic; } .company__head .costo a:hover { color: var(--yellow); } .company__main { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--pad); padding-top: var(--pad-min); } @media (max-width: 900px) { .company__main { grid-template-columns: 1fr; } } .company__cover { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--search-outline); background: #000; } .company__cover img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/9; transform: scale(1.01); transition: transform .4s ease; } .company__cover:hover img { transform: scale(1); } .company__info { display: grid; align-content: start; gap: var(--gap); } .company__facts { display: grid; gap: .8rem; padding: var(--pad); border: 1px solid var(--search-outline); border-radius: var(--radius); background: var(--bg-header); } .company__facts li { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: .8rem; } .company__facts b { color: var(--text); font-weight: 700; margin-right: .3rem; } .company__facts li > svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--grey); stroke-width: 1.6; } .company__phone { gap: .6rem; border: 1px solid var(--search-outline); background: transparent; color: var(--text); padding: .6rem 2rem .6rem 1.2rem; min-height: 3.2rem; } .company__phone svg { width: 1.4rem; height: 1.4rem; fill: currentColor; } .company__amenities { display: flex; flex-wrap: wrap; gap: .6rem; padding: .7rem; border: 1px solid var(--search-outline); border-radius: var(--radius); background: var(--bg-header); } .company__amenities li { display: grid; place-items: center; width: 4.6rem; height: 4.6rem; border: 1px solid var(--search-outline); border-radius: 50%; color: var(--text); background: rgba(255, 255, 255, .02); transition: transform .2s ease, border-color .2s ease; } .company__amenities li:hover { transform: translateY(-1px); border-color: var(--yellow); } .company__amenities .icon { display: block; width: 100%; height: 100%; background-color: currentColor; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center; mask-size: contain; } .company__amenities span { display: none; } .icon--massage_rooms { -webkit-mask-image: url('/assets/ico/salon/massage_rooms.svg'); mask-image: url('/assets/ico/salon/massage_rooms.svg'); } .icon--inroom_shower { -webkit-mask-image: url('/assets/ico/salon/inroom_shower.svg'); mask-image: url('/assets/ico/salon/inroom_shower.svg'); } .icon--inroom_tv { -webkit-mask-image: url('/assets/ico/salon/inroom_tv.svg'); mask-image: url('/assets/ico/salon/inroom_tv.svg'); } .icon--smoking_area { -webkit-mask-image: url('/assets/ico/salon/smoking_area.svg'); mask-image: url('/assets/ico/salon/smoking_area.svg'); } .icon--card_payment { -webkit-mask-image: url('/assets/ico/salon/card_payment.svg'); mask-image: url('/assets/ico/salon/card_payment.svg'); } .icon--free_parking { -webkit-mask-image: url('/assets/ico/salon/free_parking.svg'); mask-image: url('/assets/ico/salon/free_parking.svg'); } .icon--air_conditioning { -webkit-mask-image: url('/assets/ico/salon/air_conditioning.svg'); mask-image: url('/assets/ico/salon/air_conditioning.svg'); } .icon--jacuzzi { -webkit-mask-image: url('/assets/ico/salon/jacuzzi.svg'); mask-image: url('/assets/ico/salon/jacuzzi.svg'); } .icon--sauna_finnish { -webkit-mask-image: url('/assets/ico/salon/sauna_finnish.svg'); mask-image: url('/assets/ico/salon/sauna_finnish.svg'); } .icon--sauna_turkish { -webkit-mask-image: url('/assets/ico/salon/sauna_turkish.svg'); mask-image: url('/assets/ico/salon/sauna_turkish.svg'); } .icon--hookah { -webkit-mask-image: url('/assets/ico/salon/hookah.svg'); mask-image: url('/assets/ico/salon/hookah.svg'); } .icon--minibar { -webkit-mask-image: url('/assets/ico/salon/minibar.svg'); mask-image: url('/assets/ico/salon/minibar.svg'); } .icon--full_bar { -webkit-mask-image: url('/assets/ico/salon/full_bar.svg'); mask-image: url('/assets/ico/salon/full_bar.svg'); } .icon--own_kitchen { -webkit-mask-image: url('/assets/ico/salon/own_kitchen.svg'); mask-image: url('/assets/ico/salon/own_kitchen.svg'); } .icon--food_delivery { -webkit-mask-image: url('/assets/ico/salon/food_delivery.svg'); mask-image: url('/assets/ico/salon/food_delivery.svg'); } .icon--unlimited_towels { -webkit-mask-image: url('/assets/ico/salon/unlimited_towels.svg'); mask-image: url('/assets/ico/salon/unlimited_towels.svg'); } .icon--entertainment_screen { -webkit-mask-image: url('/assets/ico/salon/entertainment_screen.svg'); mask-image: url('/assets/ico/salon/entertainment_screen.svg'); } .icon--highspeed_wifi { -webkit-mask-image: url('/assets/ico/salon/highspeed_wifi.svg'); mask-image: url('/assets/ico/salon/highspeed_wifi.svg'); } .icon--private_parking { -webkit-mask-image: url('/assets/ico/salon/private_parking.svg'); mask-image: url('/assets/ico/salon/private_parking.svg'); } .icon--professional_masseuses{ -webkit-mask-image: url('/assets/ico/salon/professional_masseuses.svg');mask-image: url('/assets/ico/salon/professional_masseuses.svg'); } .icon--pole_dance_masseuses { -webkit-mask-image: url('/assets/ico/salon/pole_dance_masseuses.svg'); mask-image: url('/assets/ico/salon/pole_dance_masseuses.svg'); } .icon--japanese_sauna { -webkit-mask-image: url('/assets/ico/salon/japanese_sauna.svg'); mask-image: url('/assets/ico/salon/japanese_sauna.svg'); } .icon--bathtub { -webkit-mask-image: url('/assets/ico/salon/bathtub.svg'); mask-image: url('/assets/ico/salon/bathtub.svg'); } .icon--small_pool { -webkit-mask-image: url('/assets/ico/salon/small_pool.svg'); mask-image: url('/assets/ico/salon/small_pool.svg'); } .icon--herbal_barrel { -webkit-mask-image: url('/assets/ico/salon/herbal_barrel.svg'); mask-image: url('/assets/ico/salon/herbal_barrel.svg'); } .icon--body_wraps { -webkit-mask-image: url('/assets/ico/salon/body_wraps.svg'); mask-image: url('/assets/ico/salon/body_wraps.svg'); } .icon--aromatherapy { -webkit-mask-image: url('/assets/ico/salon/aromatherapy.svg'); mask-image: url('/assets/ico/salon/aromatherapy.svg'); } .icon--oriental_sauna { -webkit-mask-image: url('/assets/ico/salon/oriental_sauna.svg'); mask-image: url('/assets/ico/salon/oriental_sauna.svg'); } .icon--finnish_sauna { -webkit-mask-image: url('/assets/ico/salon/finnish_sauna.svg'); mask-image: url('/assets/ico/salon/finnish_sauna.svg'); } .icon--premium_drinks { -webkit-mask-image: url('/assets/ico/salon/premium_drinks.svg'); mask-image: url('/assets/ico/salon/premium_drinks.svg'); } .icon--oriental_technique_masseuses { -webkit-mask-image: url('/assets/ico/salon/oriental_technique_masseuses.svg'); mask-image: url('/assets/ico/salon/oriental_technique_masseuses.svg'); } .icon--latin_technique_masseuses { -webkit-mask-image: url('/assets/ico/salon/latin_technique_masseuses.svg'); mask-image: url('/assets/ico/salon/latin_technique_masseuses.svg'); } .icon--mixed_technique_masseuses { -webkit-mask-image: url('/assets/ico/salon/mixed_technique_masseuses.svg'); mask-image: url('/assets/ico/salon/mixed_technique_masseuses.svg'); } .icon--disposable_slippers { -webkit-mask-image: url('/assets/ico/salon/disposable_slippers.svg'); mask-image: url('/assets/ico/salon/disposable_slippers.svg'); } .icon--private_vip_room { -webkit-mask-image: url('/assets/ico/salon/private_vip_room.svg'); mask-image: url('/assets/ico/salon/private_vip_room.svg'); } .icon--full_body_mirror_room { -webkit-mask-image: url('/assets/ico/salon/full_body_mirror_room.svg');mask-image: url('/assets/ico/salon/full_body_mirror_room.svg'); } .icon--elegant_reception { -webkit-mask-image: url('/assets/ico/salon/elegant_reception.svg'); mask-image: url('/assets/ico/salon/elegant_reception.svg'); } .icon--ambient_music { -webkit-mask-image: url('/assets/ico/salon/ambient_music.svg'); mask-image: url('/assets/ico/salon/ambient_music.svg'); } .icon--service_24h { -webkit-mask-image: url('/assets/ico/salon/service_24h.svg'); mask-image: url('/assets/ico/salon/service_24h.svg'); } .icon--loyalty_discounts { -webkit-mask-image: url('/assets/ico/salon/loyalty_discounts.svg'); mask-image: url('/assets/ico/salon/loyalty_discounts.svg'); } .icon--karaoke { -webkit-mask-image: url('/assets/ico/salon/karaoke.svg'); mask-image: url('/assets/ico/salon/karaoke.svg'); } .icon--fruit_service { -webkit-mask-image: url('/assets/ico/salon/fruit_service.svg'); mask-image: url('/assets/ico/salon/fruit_service.svg'); } .icon--no_smoking_rooms { -webkit-mask-image: url('/assets/ico/salon/no_smoking_rooms.svg'); mask-image: url('/assets/ico/salon/no_smoking_rooms.svg'); } .icon--paid_parking { -webkit-mask-image: url('/assets/ico/salon/paid_parking.svg'); mask-image: url('/assets/ico/salon/paid_parking.svg'); } .icon--live_shows { -webkit-mask-image: url('/assets/ico/salon/live_shows.svg'); mask-image: url('/assets/ico/salon/live_shows.svg'); } .icon--billiards { -webkit-mask-image: url('/assets/ico/salon/billiards.svg'); mask-image: url('/assets/ico/salon/billiards.svg'); } .icon--extra_rest_time { -webkit-mask-image: url('/assets/ico/salon/extra_rest_time.svg'); mask-image: url('/assets/ico/salon/extra_rest_time.svg'); } .company__meta { display: grid; gap: .6rem; padding: .8rem; border: 1px solid var(--search-outline); border-radius: var(--radius); background: #0b0b0b; } .company__count { font-size: 1.35rem; } .company__count b { color: var(--yellow); font-weight: 800; } .company__count .ok { color: var(--green); } .company__upd { display: flex; align-items: center; gap: .5rem; color: #9b9b9b; font-size: 1.2rem; } .company__upd svg { width: 1.4rem; height: 1.4rem; stroke: currentColor; fill: none; stroke-width: 1.6; } .company__staff { margin-top: var(--pad-min); } .company__staff h2 { font-size: 1.8rem; text-transform: none; margin-bottom: .6rem; } .company__more { display: grid; place-items: center; } .company__more .btn svg { width: 1.2rem; height: 1.2rem; stroke: currentColor; fill: none; stroke-width: 2; } article.mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1rem; } article.mini > div { height: 29.9rem; } @media (max-width: 1600px) { article.mini { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 1200px) { article.mini { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 900px) { article.mini { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { article.mini { grid-template-columns: repeat(2, 1fr); } } article.mini > div a { padding: 0; } article.slide { margin-bottom: var(--pad-min); padding-top: .6rem; overflow: hidden; height: var(--one-row-height, 34.5rem); transition: height 0.3s ease; } article.sinarea aside i { display: none; } article.sinarea details summary { left: auto; right: 0.3rem; bottom: 0.3rem; transform: none; } article.mini details summary { right: 8rem; bottom: -2.5rem; } article.mini h3 span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #staff-toggle:checked ~ article.slide { height: auto; } .btn-less { display: none; } #staff-toggle:checked ~ .company__more .btn-more { display: none; } #staff-toggle:checked ~ .company__more .btn-less { display: inline; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: 0 .9rem; height: var(--btn-height); border-radius: var(--btn-radius); font-size: var(--btn-font); font-weight: 700; cursor: pointer; } .btn--pill { border-radius: 999px; } .btn--ghost { border: 1px solid var(--search-outline); background: transparent; color: var(--text); } .btn--primary { background: var(--accent-grad); color: #000; border: none; } .btn--premium { background: var(--premium); color: #000; } .content-grid--triple h2 .btn { font-family: var(--font-base); text-decoration: none; } .content-grid--triple h2 .btn--premium { color: var(--bg); } .btn--ghost:hover, .btn--premium:hover { border-color: var(--yellow); color: var(--yellow); background: none; } .content-grid--triple h2 { display: flex; } .content-grid--triple h2 .title { color: var(--yellow); padding-top: 0.5rem; justify-content: flex-start; width: 60%; } .content-grid--triple h2 .actions { margin: 0; justify-content: flex-end; max-width: 40%; } .company__more svg { transition: transform 0.3s ease; } #staff-toggle:checked ~ .company__more svg { transform: rotate(180deg); } @media (max-width: 768px) { .fs-open header form { display: block !important; position: fixed; inset: 0; z-index: 10000; background: #0b0b0b; border: none; border-radius: 0; margin: 0; padding: 12px var(--pad,16px) 16px; overflow-y: auto; } .fs-open header form > div { position: static !important; top: auto !important; left: auto !important; right: auto !important; inset: auto !important; z-index: auto !important; margin-top: .8rem; width: auto; } .filters-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.55); } .filters-close { position: fixed; top: 10px; right: 10px; z-index: 10001; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.45); color: #ddd; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(3px); } .fs-open header form fieldset.selector-wrapper { display: flex !important; } .fs-open body { overflow: hidden; } } @media (max-width: 768px) { .menu-open header nav + nav li.o777, .menu-open header nav + nav li.o888, .menu-open header nav + nav li.o999, .menu-open header nav + nav li.o1111, .menu-open header nav + nav li.o0 { display: list-item !important; } .menu-open header nav + nav a.o777, .menu-open header nav + nav a.o888, .menu-open header nav + nav a.o999, .menu-open header nav + nav a.o1111, .menu-open header nav + nav a.o0 { display: block !important; } .menu-overlay { position: fixed; inset: 0; z-index: 9999; backdrop-filter: blur(2px) saturate(1.02); background: rgba(0, 0, 0, .55); } .menu-open header nav + nav { position: fixed; inset: 0; z-index: 10000; overflow-y: auto; padding: calc(var(--pad) + env(safe-area-inset-top)) calc(var(--pad) + env(safe-area-inset-right)) calc(var(--pad) + env(safe-area-inset-bottom)) calc(var(--pad) + env(safe-area-inset-left)); border: 1px solid rgba(255, 255, 255, .06); background: linear-gradient(180deg, rgba(10, 10, 10, .96), rgba(10, 10, 10, .98)); } .menu-close { position: fixed; top: 10px; right: 10px; z-index: 10001; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 12px; background: rgba(255, 255, 255, .04); color: #ddd; backdrop-filter: blur(4px); } .menu-close:hover { background: rgba(255, 255, 255, .08); } .menu-open body { overflow: hidden; } .menu-open header nav + nav > ul { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: .2rem; padding-top: .4rem; } .menu-open header nav + nav > ul > li > a { display: flex !important; justify-content: flex-start; align-items: center; gap: .9rem; padding: 1.2rem 0 !important; border: 0 !important; font-weight: 700; font-size: 1.8rem !important; letter-spacing: .01em; text-transform: none; color: #f1f1f1; } .menu-open header nav + nav > ul > li > a .nav { margin-left: auto; width: 1.2rem; height: 1.2rem; opacity: .9; transition: transform .25s ease, opacity .2s ease; } .menu-open header nav + nav > ul > li.is-open > a .nav { transform: rotate(180deg); } .menu-open header nav + nav > ul > li > a:hover { color: var(--yellow); } .menu-open header nav + nav > ul > li > a:focus-visible { outline: 2px solid rgba(255, 204, 0, .45); outline-offset: 2px; border-radius: 8px; } .menu-open header nav + nav > ul ul { position: static !important; opacity: 1 !important; transform: none !important; pointer-events: auto !important; margin: 0; padding: .2rem 0 .8rem 1.4rem !important; border: 0 !important; background: none !important; box-shadow: none !important; } .menu-open header nav + nav > ul ul li a { display: block; padding: .65rem 0 !important; border: 0 !important; font-weight: 500; font-size: 1.5rem !important; color: #d6d6d6; } .menu-open header nav + nav > ul ul li a:hover { color: var(--yellow); } .menu-open header nav + nav > ul > li > ul { max-height: 0; overflow: hidden; transition: max-height .26s ease; } .menu-open header nav + nav > ul > li.is-open > ul { max-height: 900px; } .menu-open header nav + nav > ul > li { border-bottom: 1px solid rgba(255, 255, 255, .06); } .menu-open header nav + nav > ul > li:last-child { border-bottom: 0; } .menu-open header nav > div { display: none; } } @media (max-width: 768px) { #puta { display: flex; flex-direction: column-reverse; margin: 0 !important; padding: 0 !important; } #puta > section { width: 100%; margin: 0; padding: var(--pad) var(--pad) calc(var(--pad) * 1.2); } #puta > figure { position: relative !important; top: auto !important; left: auto !important; display: flex; gap: .6rem; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; width: 100% !important; margin: 0; padding: 0; transform: none !important; } #puta > figure::-webkit-scrollbar { display: none; } #puta > figure > a { overflow: hidden; flex: 0 0 100%; width: 100%; height: var(--heroH, 78svh); border-radius: 0; background: #000; scroll-snap-align: center; } #puta > figure > a img { width: 100%; height: 100%; object-fit: cover; transform: none !important; } #puta > figure > i { display: none !important; } #puta > section > .header { margin: .6rem 0 var(--pad); padding-right: 3.8rem; } #puta > section > .header h1 { padding: 0; font-size: clamp(2.2rem, 2rem + 2vw, 3rem); line-height: 1.05; letter-spacing: -.03rem; text-transform: none; } #puta > section > .header button { top: .2rem; right: .2rem; width: 3.6rem; height: 3.6rem; } #puta > section > .header strong { position: static; display: block; margin-top: .4rem; font-size: 1.2rem; color: var(--grey); } #puta > section > .header span { margin: .6rem 0 0; padding: .9rem 1rem; font-size: 1.35rem; line-height: 1.4; } #puta .phones { gap: .6rem; margin: 1rem 0 var(--pad); } #puta .phones a { padding: .9rem 1.2rem .9rem 4.6rem; font-size: 1.5rem; } #puta > section > div > ol.params { gap: .2rem; } #puta > section > div > ol.params > li { /* width: calc(50% - .4rem); height: 8.6rem; */ } .list { /* grid-template-columns: 1fr !important; */ } .list li { padding-bottom: .6rem; font-size: 1.5rem; } #puta div.descr { font-size: 1.5rem; } #puta div.descr p { padding: .7rem 0 0; } .reviews { margin-top: 1.6rem; } .review { padding: 1rem var(--pad); } .review p { font-size: 1.45rem; } article .horario div { border-right: 1px solid rgba(255,255,255,.2); } #puta > figure > a:hover img { transform: none; } } @media (max-width: 768px) { #puta { display: flex; flex-direction: column-reverse; margin: 0 !important; padding: 0 !important; } #puta > figure { position: relative !important; display: flex; gap: 0; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; width: 100% !important; margin: 0; padding: 0; background: #000; } #puta > figure::-webkit-scrollbar { display: none; } #puta > figure > a { position: relative; overflow: hidden; flex: 0 0 100%; width: 100%; height: var(--heroH, 78svh); border-radius: 0; background: #000; scroll-snap-align: center; } #puta > figure > a img { width: 100%; height: 100%; object-fit: cover; transform: none !important; } #puta > figure > i { display: none !important; } .pg-nav { position: absolute; inset: 0; pointer-events: none; } .pg-btn { position: absolute; top: 50%; display: grid; place-items: center; width: clamp(36px, 6.2vw, 48px); height: clamp(36px, 6.2vw, 48px); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(0,0,0,.35); color: #fff; backdrop-filter: blur(2px); cursor: pointer; pointer-events: auto; opacity: .95; transform: translateY(-50%); transition: transform .18s ease, background .18s ease, opacity .18s ease; } .pg-btn:active { transform: translateY(-50%) scale(.96); } .pg-prev { left: max(10px, env(safe-area-inset-left)); } .pg-next { right: max(10px, env(safe-area-inset-right)); } .pg-btn svg { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 2.2; } .pg-btn[disabled] { opacity: .35; pointer-events: none; } .pg-count { position: absolute; left: 50%; bottom: calc(8px + env(safe-area-inset-bottom)); padding: .35rem .8rem; border: 1px solid rgba(255,255,255,.18); border-radius: .6rem; background: rgba(0,0,0,.45); color: #eaeaea; font: 600 1.2rem/1.2 var(--font-base, system-ui); letter-spacing: .02em; pointer-events: none; transform: translateX(-50%); } .pg-thumbs { position: absolute; left: 0; right: 0; bottom: calc(36px + env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: .3rem .6rem; } .pg-thumbs::-webkit-scrollbar { display: none; } .pg-thumb { position: relative; overflow: hidden; flex: 0 0 auto; width: 38px; height: 54px; border-radius: .4rem; outline: 1px solid rgba(255,255,255,.18); background: #111; opacity: .8; transform: translateZ(0); } .pg-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .pg-thumb.is-active { outline: 2px solid var(--yellow); box-shadow: 0 0 0 2px rgba(0,0,0,.25); opacity: 1; } .pg-gradient-top, .pg-gradient-bottom { position: absolute; left: 0; right: 0; pointer-events: none; } .pg-gradient-top { top: 0; height: 20svh; background: linear-gradient(to bottom, rgba(0,0,0,.45), transparent); } .pg-gradient-bottom { bottom: 0; height: 28svh; background: linear-gradient(to top, rgba(0,0,0,.55), transparent); } #puta > section { width: 100%; margin: 0; padding: var(--pad) var(--pad) calc(var(--pad) * 1.2); } #puta > section > .header { margin: .8rem 0 var(--pad); padding-right: 3.8rem; } #puta > section > .header h1 { font-size: clamp(2.2rem, 2rem + 2vw, 3rem); line-height: 1.05; letter-spacing: -.02rem; text-transform: none; } } @media (max-width: 768px) { #puta > figure { position: relative !important; top: auto !important; left: auto !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; width: 100% !important; margin: 0 !important; transform: none !important; transition: none !important; } #puta > figure > a { display: block !important; flex: 0 0 100% !important; width: 100% !important; height: var(--heroH, 78svh) !important; border-radius: 0 !important; scroll-snap-align: center !important; } #puta > figure > a img { width: 100% !important; height: 100% !important; object-fit: cover !important; transform: none !important; } #puta > figure > i { display: none !important; } } @media (max-width: 768px) { #puta > figure { position: relative !important; overflow: hidden !important; width: 100% !important; margin: 0 !important; } #puta > figure .pg__track { display: flex !important; flex-wrap: nowrap !important; gap: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } #puta > figure .pg__track::-webkit-scrollbar { display: none; } #puta > figure .pg__track > a { flex: 0 0 100% !important; width: 100% !important; height: var(--heroH, 78svh) !important; border-radius: 0 !important; scroll-snap-align: center !important; } #puta > figure .pg__track > a img { width: 100% !important; height: 100% !important; object-fit: cover !important; transform: none !important; } #puta > figure .pg__thumbs, #puta > figure .pg__counter, #puta > figure .pg__nav-prev, #puta > figure .pg__nav-next { position: absolute !important; z-index: 5 !important; } #puta > figure .pg__thumbs { left: 0; right: 0; bottom: .8rem; display: flex; justify-content: center; gap: .4rem; pointer-events: auto; } #puta > figure .pg__thumbs button { overflow: hidden; width: 7.5vw; height: 7.5vw; max-width: 44px; max-height: 44px; border: 1px solid rgba(255,255,255,.25); border-radius: .5rem; background: #000; opacity: .9; } #puta > figure .pg__thumbs img { width: 100%; height: 100%; object-fit: cover; } #puta > figure .pg__counter { position: absolute !important; left: 50%; bottom: calc(.8rem + 9vw); padding: .35rem .7rem; border: 1px solid rgba(255,255,255,.14); border-radius: .5rem; background: rgba(0,0,0,.45); color: #eee; font: 600 1.2rem/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; pointer-events: none; transform: translateX(-50%); } #puta > figure .pg__nav-prev, #puta > figure .pg__nav-next { top: 50%; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(0,0,0,.35); color: #fff; transform: translateY(-50%); } #puta > figure .pg__nav-prev { left: .8rem; } #puta > figure .pg__nav-next { right: .8rem; } #puta > figure .pg__nav-prev svg, #puta > figure .pg__nav-next svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; } #puta > figure > i { display: none !important; } #puta > figure { transform: none !important; } } @media (max-width: 768px) { #puta .horario div:nth-last-child(-n+3) { display: none !important; } } @media (max-width: 768px) { #salones .company { overflow: hidden; margin: .8rem .6rem 1rem; border: 1px solid var(--search-outline); border-radius: 12px; background: var(--bg-header); box-shadow: 0 6px 24px rgba(0,0,0,.18); } #salones .company__head { display: grid; grid-template-columns: 1fr; align-items: start; gap: .35rem; padding: .8rem .8rem .5rem; border-bottom: 1px dashed var(--search-outline); } #salones .company__title h1 { margin: 0; font-size: clamp(1.05rem, 2.4vw, 1.35rem); line-height: 1.15; } #salones .company__subtitle { margin: .25rem 0 0; font-size: .85rem; opacity: .8; } #salones .company__head .costo { place-self: start; font-size: .9rem; line-height: 1.2; text-align: left; } #salones .company__head .costo a { display: block; margin-top: .15rem; font-size: .8rem; opacity: .75; } #salones .company__main { gap: .75rem; padding: .8rem; } #salones .company__cover { overflow: hidden; margin: 0; border-radius: 10px; } #salones .company__cover a, #salones .company__cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; } #salones .company__info { display: flex; flex-direction: column; gap: .8rem; } #salones .company__facts { display: grid; gap: .45rem; list-style: none; margin: 0; padding: 0; } #salones .company__facts li { display: flex; align-items: flex-start; gap: .55rem; font-size: .92rem; line-height: 1.25; } #salones .company__facts svg { width: 1.05rem; height: 1.05rem; margin-top: .15rem; opacity: .9; } #salones .company__facts b { font-weight: 700; } #salones .company__phone { display: flex; justify-content: center; align-items: center; gap: .55rem; width: 100%; padding: .8rem 1rem; border: none; border-radius: 999px; background: linear-gradient(180deg, #19c37d, #12a56a); box-shadow: 0 6px 18px rgba(25,195,125,.25); color: #000; font-weight: 700; font-size: 1rem; text-decoration: none; transition: transform .15s ease; } #salones .company__phone svg { width: 1.1rem; height: 1.1rem; } #salones .company__phone:active { transform: translateY(1px) scale(.99); } #salones .company__amenities { display: flex; overflow: auto; gap: .5rem; padding: .25rem 0 .2rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent); } #salones .company__amenities li { display: flex; align-items: center; gap: .45rem; padding: .45rem .6rem; border: 1px solid var(--search-outline); border-radius: 999px; background: rgba(255,255,255,.03); white-space: nowrap; font-size: .85rem; scroll-snap-align: start; } #salones .company__amenities i.icon { display: inline-block; width: 1.05rem; height: 1.05rem; } #salones .company__amenities span { display: none; } #salones .company__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; font-size: .9rem; opacity: .9; } #salones .company__count .ok { color: #1a9c63; font-weight: 700; } #salones .company__staff { padding: .4rem .8rem 1rem; } #salones .company__staff article.mini.cards { --gap: .5rem; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--gap); } #salones .company__staff article.mini.cards > div { overflow: hidden; border: 1px solid var(--search-outline); border-radius: 12px; background: var(--bg-header); transition: box-shadow .2s ease, transform .15s ease; } #salones .company__staff article.mini.cards > div:hover { box-shadow: 0 10px 24px rgba(0,0,0,.22); transform: translateY(-1px); } #salones .company__staff figure { margin: 0; } #salones .company__staff figure img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; } #salones .company__staff h3 { display: flex; justify-content: space-between; gap: .4rem; margin: .5rem .5rem 0; font-size: .92rem; line-height: 1.15; } #salones .company__staff aside { display: flex; justify-content: space-between; gap: .4rem; margin: .2rem .5rem .55rem; font-size: .8rem; opacity: .9; } #salones .company__more { display: flex; justify-content: center; margin-top: .6rem; } #salones .company__more .btn { border-radius: 999px; } } @media (max-width: 920px) { #salones .company__main { grid-template-columns: 1fr; gap: .8rem; } } @media (prefers-color-scheme: dark) { #salones .company { position: relative; border-color: #1b222b; background: #0d0f12; box-shadow: none; } #salones .company__amenities li { border-color: #202833; background: #12161b; } } .leaflet-container .leaflet-popup-content-wrapper.map-popup, .leaflet-container .leaflet-popup-tip.map-popup { background: transparent; border: 0; box-shadow: none; } .leaflet-container .leaflet-popup-close-button { top: 6px; right: 6px; width: 28px; height: 28px; line-height: 28px; border: none; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; text-align: center; } .leaflet-container .leaflet-popup-content { margin: 0; } .map-card { overflow: hidden; width: clamp(260px, 38vw, 360px); border: 1px solid var(--search-outline); border-radius: var(--radius); background: var(--bg-header); box-shadow: 0 10px 28px rgba(0,0,0,.35); color: var(--text); } .map-card__cover { position: relative; aspect-ratio: 16 / 9; background: #0c0c0c; } .map-card__cover img { display: block; width: 100%; height: 100%; object-fit: cover; } .map-card__pill { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .6rem; border-radius: 999px; background: rgba(0,0,0,.45); color: #fff; font: 700 .78rem/1 var(--font-base); backdrop-filter: saturate(140%) blur(6px); } .map-card__pill i { width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; opacity: .9; } .map-card__badges { position: absolute; top: 10px; right: 10px; display: inline-flex; gap: .35rem; } .map-card__badge { white-space: nowrap; padding: .28rem .5rem; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font: 700 .75rem/1 var(--font-base); backdrop-filter: blur(6px); } .map-card__badge--on { background: #1dbf73; } .map-card__badge--pre { background: #8b5cf6; } .map-card__badge--ver { background: #0ea5e9; } .map-card__body { display: grid; gap: .55rem; padding: .9rem; } .map-card__title { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; } .map-card__title h3 { margin: 0; font-family: var(--font-base); font-weight: 700; font-size: 1.04rem; line-height: 1.18; letter-spacing: .01em; text-transform: none; color: var(--text); } .map-card__price { white-space: nowrap; font-family: var(--font-head); font-weight: 700; font-size: .98rem; color: var(--premium); } .map-card__meta { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--base); opacity: .9; } .map-card__meta svg { width: 1rem; height: 1rem; opacity: .9; } .map-card__chips { display: flex; flex-wrap: wrap; gap: .35rem; } .map-card__chip { padding: .28rem .5rem; border: 1px solid var(--search-outline); border-radius: 999px; background: rgba(255,255,255,.03); color: var(--base); font-size: .78rem; } .map-card__actions { display: flex; gap: .5rem; margin-top: .1rem; } .map-card__btn { display: inline-flex; justify-content: center; align-items: center; gap: .5rem; flex: 1 1 0; padding: .6rem .75rem; border: 1px solid var(--search-outline); border-radius: var(--radius); background: var(--bg); color: var(--text); font-weight: 700; font-size: .95rem; text-decoration: none; transition: transform .12s, border-color .2s ease, color .2s ease, background .2s ease; } .map-card__btn:hover { border-color: var(--yellow); color: var(--yellow); } .map-card__btn:active { transform: translateY(1px); } .map-card__btn--cta { border-color: transparent; background: var(--accent-grad); color: #000; } .map-card__btn svg { width: 1.05rem; height: 1.05rem; } @media (max-width: 420px) { .map-card { width: min(92vw, 360px); } } .vlb__wrap { display: flex; justify-content: center; align-items: center; max-height: 100vh; padding: clamp(8px, 1.5vw, 16px); } .vlb__box { display: grid; grid-template-rows: auto 1fr auto; gap: .6rem; max-width: 92vw; max-height: 90vh; margin: 0 auto; } .vlb__video { display: block; width: 100%; height: auto; max-width: 100%; max-height: 80vh; object-fit: contain; background: #000; } .vlb--landscape .vlb__box { width: min(92vw, 1400px); } .vlb--landscape .vlb__video { width: 100%; height: auto; } .vlb--portrait .vlb__box { width: auto; max-width: 92vw; } .vlb--portrait .vlb__video { width: auto; height: 80vh; max-height: 80vh; } .vlb--zoom .vlb__video { object-fit: cover; } .vlb__stage { display: grid; grid-template-columns: auto 1fr auto; align-items: center; } .vlb__prev, .vlb__next { align-self: center; } .vlb__stop { display: none !important; } .fotos { position: relative; display: flex; flex-direction: row; margin: 0 16px 16px; padding: 10px; border-radius: 5px; background: var(--bg-header); color: var(--base); font-family: var(--font-base); } .fotos.is_new::after { content: ''; position: absolute; top: 6px; left: -4px; z-index: 96; width: 58px; height: 57px; background: url(/assets/imgs/new_label.svg) no-repeat center / contain; } .fotos > aside { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: calc(100% - (5 * 120px + 4 * 5px + 10px)); padding-right: 10px; } .fotos > aside .header { display: flex; align-items: center; gap: .6rem; margin-top: 16px; color: var(--premium); font-size: 54px; font-weight: 100; line-height: 1; } .fotos > aside .header i { color: var(--premium); font-size: 18px; font-style: normal; font-weight: 300; line-height: 1.2; } .fotos > aside > a { position: relative; display: inline-block; margin-top: 12px; color: var(--base); font-family: var(--font-head); font-size: 2rem; text-decoration: none; } .fotos > aside > a u { display: block; color: var(--grey); font-family: var(--font-base); font-size: 1.2rem; text-decoration: none; } .fotos > aside > a:hover, .fotos > aside > a:hover u { color: var(--premium); } .fotos.is_hot > aside::before { content: ''; position: absolute; right: 16px; bottom: 0; z-index: 10; width: 22px; height: 22px; background: url(/assets/del/Spice_3_small_card_icon.svg) no-repeat center / contain; opacity: .9; } .fotos > figure { position: relative; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 5px; width: 620px; margin: 0; overflow: hidden; } .fotos > figure > a { position: relative; display: block; flex-shrink: 0; width: 120px; height: 160px; border-radius: 4px; background-position: center; background-size: cover; cursor: zoom-in; line-height: 1; } .fotos > figure > a:nth-of-type(n+6) { display: none; } .fotos > figure > a[rel="video"]::after { content: ""; position: absolute; inset: 50% auto auto 50%; z-index: 2; width: 40px; height: 40px; transform: translate(-50%,-50%); background: url(/assets/del/Play_stories_button.svg) no-repeat center / contain; } .fotos > figure > a.mas { position: absolute; top: 0; right: 0; z-index: 3; display: flex; justify-content: center; align-items: center; width: 120px; height: 160px; border-radius: 4px; background: rgba(0,0,0,.6); color: var(--white); font-family: var(--font-head); font-size: 24px; text-align: center; cursor: pointer; } .fotos > figure > a[rel="video"], .fotos > figure > a.mas { cursor: pointer; } @media (max-width: 1200px) { .fotos { margin: 0 var(--pad) var(--pad); } .fotos > aside { flex: 1 1 auto; width: auto; padding-right: 12px; } .fotos > figure { flex: 0 0 auto; width: auto; } } @media (max-width: 768px) { .fotos { flex-direction: column; gap: .8rem; padding: var(--pad-min); border-radius: var(--radius); } .fotos.is_new::after { top: .6rem; left: .6rem; width: 48px; height: 47px; } .fotos > aside { width: 100%; padding-right: 0; } .fotos > aside .header { gap: .5rem; margin-top: .2rem; font-size: clamp(2.2rem, 6vw, 3rem); } .fotos > aside .header i { font-size: 1.4rem; opacity: .9; } .fotos > aside > a { margin-top: .2rem; font-size: 1.7rem; } .fotos > aside > a u { font-size: 1.2rem; } .fotos > figure { flex-wrap: wrap; gap: .6rem; width: 100%; overflow: visible; } .fotos > figure > a { width: calc(50% - .3rem); height: auto; aspect-ratio: 3 / 4; border-radius: .6rem; } .fotos > figure > a:nth-of-type(n+3) { display: none; } .fotos > figure > a.mas { position: static; order: 99; width: 100%; height: 3.2rem; margin-top: .2rem; border: 1px solid var(--search-outline); border-radius: var(--radius); background: transparent; color: var(--premium); font-family: var(--font-base); font-size: 1.5rem; aspect-ratio: auto; } .fotos > figure > a.mas:hover { border-color: var(--yellow); background: rgba(255,255,255,.04); color: var(--yellow); } } .fecha { position: relative; display: flex; align-items: center; gap: .8rem; margin: 26px 0 0 16px; padding-right: 140px; color: var(--base); font: 500 18px/36px var(--font-base); --line-left: 250px; } .fecha::before { content: ""; position: absolute; top: 50%; left: var(--line-left); right: 16px; height: 1px; border-top: 1px dashed #686868; transform: translateY(-50%); } .fecha::after { position: relative; top: -1px; display: inline-block; margin-left: 10px; height: 20px; padding: 0 10px; border-radius: 4px; background-color: var(--badge-bg, #666); color: #fff; font: 500 13px/20px var(--font-base); font-style: italic; text-transform: uppercase; white-space: nowrap; content: ""; } .fecha.hoy::after { content: "hoy"; --badge-bg: #9b59b6; } .fecha.ayer::after { content: "ayer"; --badge-bg: #9b59b6; } .fecha:is(.dias2,.dias3,.dias4,.dias5)::after { --badge-bg: #666; } .fecha.dias2::after { content: "2 días atrás"; } .fecha.dias3::after { content: "3 días atrás"; } .fecha.dias4::after { content: "4 días atrás"; } .fecha.dias5::after { content: "5 días atrás"; } @media (max-width: 900px) { .fecha { --line-left: 180px; } } @media (max-width: 640px) { .fecha { margin: 18px var(--pad) 0; padding-right: 0; gap: .6rem; line-height: 30px; --line-left: 140px; } } @media (max-width: 480px) { .fecha::before { display: none; } } .site-footer { --ft-bg: var(--bg-header); --ft-fg: var(--text); --ft-muted: var(--grey); --ft-line: #222; --ft-card: rgba(255,255,255,.03); --ft-gap: var(--gap); --ft-gap-lg: var(--gap-lg); --ft-pad: var(--pad); --ft-pad-min: var(--pad-min); --ft-radius: var(--radius); margin-top: 9rem; border-top: 1px solid var(--ft-line); background: var(--ft-bg); color: var(--ft-fg); } .site-footer a { color: inherit; text-decoration: none; } .site-footer .vh { position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0,0,0,0); white-space: nowrap; } .site-footer > .footer-top, .site-footer > .footer-nav { max-width: 1360px; margin: 0 auto; padding-left: var(--ft-pad); padding-right: var(--ft-pad); } .site-footer .footer-top { display: grid; grid-template-columns: 1fr auto 1.2fr; align-items: center; column-gap: clamp(1.2rem, 3vw, 3.2rem); row-gap: 1rem; padding-top: var(--ft-pad); padding-bottom: calc(var(--ft-pad) * .75); } .site-footer .brand { display: flex; flex-direction: column; gap: .4rem; font-family: var(--font-head); font-size: 2rem; text-transform: uppercase; } .site-footer .brand span b { margin-right: .6rem; padding: .6rem .6rem .5rem; border-radius: .4rem; background: var(--accent-grad); color: #000; font-weight: 900; } .site-footer .brand em { font-family: var(--font-base); font-size: 1.3rem; font-style: normal; opacity: .7; text-transform: none; } .site-footer .trust { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: .8rem; min-width: 0; } .site-footer .trust li { display: inline-flex; align-items: center; gap: .6rem; height: var(--btn-height); padding: 0 1.1rem; border: 1px solid var(--ft-line); border-radius: var(--btn-radius); background: var(--ft-card); color: var(--base); font-size: 1.3rem; white-space: nowrap; } .site-footer .trust svg { width: 1.8rem; height: 1.8rem; opacity: .8; } .site-footer .actions { justify-self: end; display: flex; gap: .8rem; margin-top: 0; } .site-footer .btn { display: inline-flex; align-items: center; gap: .6rem; height: var(--btn-height); padding: 0 1.2rem; border: 1px solid var(--search-outline); border-radius: var(--btn-radius); font-size: var(--btn-font); line-height: 1; white-space: nowrap; transition: border-color .2s ease, color .2s ease, background .2s ease; } .site-footer .btn svg { width: 1.6rem; height: 1.6rem; } .site-footer .btn.add { border-color: transparent; background: var(--accent-grad); color: #000; } .site-footer .btn.ghost:hover { border-color: var(--yellow); color: var(--yellow); } .site-footer .footer-nav { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1.2fr; column-gap: clamp(2rem, 4vw, 5rem); row-gap: 2.2rem; padding-top: 0; padding-bottom: var(--ft-pad); } .site-footer .footer-nav .col { min-width: 0; } .site-footer .ft-h { margin: 0 0 .9rem 0; color: var(--grey); font-family: var(--font-cali); font-size: 1.9rem; letter-spacing: .04em; text-transform: uppercase; } .site-footer .footer-nav ul { margin: 0; padding: 0; list-style: none; } .site-footer .footer-nav ul li + li { margin-top: .6rem; } .site-footer .footer-nav a { display: inline-block; color: var(--base); font-size: 1.45rem; opacity: .95; } .site-footer .footer-nav a:hover { color: var(--yellow); } .site-footer .col-controls .prefs { display: grid; gap: .8rem; padding: .8rem; border: 1px solid var(--ft-line); border-radius: var(--ft-radius); background: var(--ft-card); } .site-footer .prefs .select { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .8rem; padding: .6rem .8rem; border: 1px solid var(--search-outline); border-radius: var(--radius); background: var(--search-bg); } .site-footer .prefs .search { position: relative; gap: .8rem; padding: .6rem .8rem; border: 1px solid var(--search-outline); border-radius: var(--radius); background: var(--search-bg); } .site-footer .prefs select { padding: .1rem .3rem; border: 1px solid var(--search-outline); border-radius: var(--radius); } .site-footer .prefs .select > svg { width: 1.6rem; height: 1.6rem; opacity: .8; } .site-footer .prefs .select > span { color: var(--grey); font-size: 1.2rem; } .site-footer .prefs select, .site-footer .prefs input[type="search"] { background: transparent; color: var(--text); font-size: 1.3rem; height: 2.4rem; } .site-footer .prefs input[type="search"] { width: 100%; } .site-footer .prefs .search button { position: absolute; top: 50%; right: .4rem; width: 2.4rem; height: 2.4rem; transform: translateY(-50%); opacity: .7; } .site-footer .prefs .search button:hover { opacity: 1; } .site-footer .footer-bottom { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1.2rem; min-height: 44px; padding: .6rem var(--pad); border-top: 1px solid var(--ft-line); color: var(--ft-muted); font-size: 1.2rem; } .site-footer .footer-bottom p { margin: 0; line-height: 1.4; } .site-footer .footer-bottom .legal-note { padding-left: var(--ft-pad); padding-right: var(--ft-pad); } .site-footer .to-top-btn { all: unset; display: inline-flex; justify-content: center; align-items: center; gap: .5rem; height: 32px; padding: 0 .8rem; border: 1px solid var(--ft-line); border-radius: 999px; background: var(--ft-card); color: var(--base); font-size: 1.2rem; cursor: pointer; justify-self: end; } .site-footer .to-top-btn svg { width: 16px; height: 16px; } .site-footer .to-top-btn:hover { border-color: var(--yellow); color: var(--yellow); } .site-footer :where(a,button,select,input):focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; } .footer-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; padding: .4rem max(env(safe-area-inset-left), .6rem) calc(.4rem + env(safe-area-inset-bottom)) max(env(safe-area-inset-right), .6rem); border-top: 1px solid var(--ft-line); background: rgba(0,0,0,.8); backdrop-filter: blur(6px); } .footer-dock a, .footer-dock button { flex: 1 0 20%; display: inline-flex; flex-direction: column; align-items: center; gap: .2rem; color: var(--base); font-size: 1.1rem; } .footer-dock svg { width: 2.2rem; height: 2.2rem; } .footer-dock .add { flex: 0; padding: .3rem 2.2rem; border-radius: 999px; background: var(--accent-grad); color: #000; } .footer-dock .add svg { width: 3.5rem; height: 3.5rem; } @media (max-width: 1200px) { .site-footer .footer-top { grid-template-columns: 1fr 1fr auto; } .site-footer .trust { flex-wrap: wrap; justify-content: center; row-gap: .6rem; } .site-footer .footer-nav { grid-template-columns: 1fr 1fr 1fr; } .site-footer .actions { justify-self: start; } } @media (max-width: 900px) { .site-footer .footer-top { grid-template-columns: 1fr; row-gap: 1rem; } .site-footer .trust { justify-content: flex-start; } } @media (max-width: 820px) { .site-footer .footer-nav { grid-template-columns: 1fr 1fr; column-gap: 3rem; } } @media (max-width: 640px) { .site-footer .footer-nav { row-gap: 1.6rem; } .site-footer .footer-nav .col { padding-top: .8rem; border-top: 1px solid var(--ft-line); } .site-footer .footer-bottom { grid-template-columns: 1fr; gap: .4rem; text-align: center; } .site-footer .to-top-btn { justify-self: center; } .footer-dock { display: flex; justify-content: space-between; } body { padding-bottom: 62px; } } .site-footer .social { display: none !important; } .group { margin-bottom: var(--pad); } .group__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; padding: .6rem 0; z-index: 30; } .premium .group__head { margin-bottom: 1.2rem; } .group__title { position: relative; display: flex; align-items: center; gap: .8rem; } .group__title h2 { margin: 0; font-family: var(--font-cali); font-weight: 600; font-size: clamp(1.8rem, 2.6vw, 2.4rem); letter-spacing: -.03em; text-transform: none; } .group__dot { width: .9rem; height: .9rem; border-radius: 999px; background: var(--yellow); box-shadow: 0 0 0 3px rgba(255,204,0,.15); } .group__title sup { position: relative; top: -0.2rem; margin-left: .2rem; } .group__meta { display: flex; align-items: center; gap: 1.2rem; white-space: nowrap; } .group__hint { padding: .3rem .8rem; border: 1px solid var(--search-outline); border-radius: 999px; background: rgba(255,255,255,.04); color: var(--grey); font-size: 1.25rem; } .group.hot .group__dot { background: #ff4d2e; box-shadow: 0 0 0 3px rgba(255,77,46,.18); } .group.premium .group__dot { background: var(--premium); box-shadow: 0 0 0 3px rgba(252,195,127,.18); } .group.stars .group__dot { background: #ffd85a; box-shadow: 0 0 0 3px rgba(255,216,90,.18); } .group.daily .group__dot { background: #c23b5a; box-shadow: 0 0 0 3px rgba(194,59,90,.18); } @media (min-width: 960px) { .group__head { position: sticky; top: 0; z-index: 2; background: linear-gradient(180deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0)); } } @media (max-width: 640px) { .group__head { align-items: center; gap: .6rem; } .group__title h2 { font-size: 1.8rem; } .group__hint { display: none; } } .group__all { --all-fg: var(--tiffany); --all-bg: rgba(255, 255, 255, .04); --all-br: rgba(255, 255, 255, .12); position: relative; display: inline-grid; grid-auto-flow: column; align-items: center; gap: .5rem; padding: .55rem 1.1rem .5rem .95rem; border: 1px solid var(--all-br); border-radius: 999px; background: var(--all-bg); color: var(--all-fg); font: 600 1.25rem/1 var(--font-base); transition: color .2s ease, border-color .2s ease, background .2s ease, transform .15s ease; will-change: transform; } .group__all::after { opacity: .9; transform: translateX(0); font-weight: 700; transition: transform .2s ease, opacity .2s ease; content: "→"; } .group__all:hover, .group__all:focus-visible { border-color: var(--yellow); background: rgba(255, 255, 255, .06); color: var(--yellow); transform: translateY(-1px); outline: none; } .group__all:hover::after { transform: translateX(2px); opacity: 1; } .group.hot .group__all { --all-fg: #f63; --all-br: rgba(255, 106, 61, .25); } .group.stars .group__all { --all-fg: #fd5; --all-br: rgba(255, 216, 90, .25); } .group.daily .group__all { --all-fg: #e06584; --all-br: rgba(224, 101, 132, .25); } .group.premium .group__all { --all-fg: var(--premium); --all-br: rgba(252, 195, 127, .28); background: linear-gradient(180deg, rgba(252, 195, 127, .1), rgba(252, 195, 127, 0)); } @media (max-width: 640px) { .group__all { padding: .45rem .9rem; font-size: 1.2rem; } } .slider-wrap { position: relative; } .slider { --cols: 5; position: relative; overflow-x: auto; overflow-y: hidden; padding: .6rem 0; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .slider article { display: grid; grid-auto-flow: column; grid-template-rows: 1fr; grid-template-columns: unset !important; grid-auto-columns: calc((100% - (var(--cols) - 1) * 1rem) / var(--cols)); gap: 1rem; } .slider article > div { scroll-snap-align: start; } .slider::before, .slider::after { content: ""; position: sticky; top: 0; bottom: 0; width: 40px; pointer-events: none; z-index: 2; } .slider::before { left: 0; background: linear-gradient(90deg, rgba(0,0,0,.7), rgba(0,0,0,0)); } .slider::after { right: 0; background: linear-gradient(270deg, rgba(0,0,0,.7), rgba(0,0,0,0)); } .slider__btn { position: absolute; top: 50%; left: auto; right: auto; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; border: none; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; font-size: 2.4rem; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .25s ease, background .25s ease; } .slider__btn:hover { background: rgba(0,0,0,.7); } .slider__btn--prev { left: 1rem; } .slider__btn--next { right: 1rem; } .slider-wrap:hover .slider__btn { opacity: 1; pointer-events: auto; } @media (min-width: 1600px) { .slider { --cols: 6; } } @media (max-width: 1199.98px) { .slider { --cols: 4; } } @media (max-width: 900px) { .slider__btn { display: none !important; } } @media (max-width: 640px) { .slider { --cols: 2; } .slider article { grid-template-rows: repeat(2, 1fr); grid-auto-columns: calc((100% - (var(--cols) - 1) * 1rem) / var(--cols)); } .slider__btn { display: none !important; } } .contact-form textarea { background: var(--search-bg); color: var(--text); border: 1px solid var(--search-outline); border-radius: var(--radius); padding: 1rem; font-size: 1.5rem; resize: vertical; } .contact-form textarea:focus { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255,204,0,.12); outline: none; } .contact-form .consent { display: grid; grid-auto-flow: column; align-items: start; gap: .8rem; margin-top: .6rem; color: var(--base); font-size: 1.35rem; } .contact-form .consent input { margin-top: .3rem; } .contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-note { margin-top: .8rem; color: var(--grey); font-size: 1.3rem; } .cards-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(.8rem, 2vw, 1.2rem); margin-top: .8rem; } @media (max-width: 640px) { .cards-grid { grid-template-columns: 1fr; } } .card { display: grid; gap: .35rem; padding: 1rem 1.2rem; border: 1px solid var(--search-outline); border-radius: var(--radius); background: rgba(255,255,255,.03); color: var(--text); text-decoration: none; transition: border-color .2s ease, transform .15s ease, background .2s ease; } .card:hover { border-color: var(--yellow); background: rgba(255,255,255,.05); transform: translateY(-1px); } .card h3 { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; text-transform: none; } .card p { margin: 0; color: var(--base); font-size: 1.35rem; } .card strong { color: var(--tiffany); font-size: 1.35rem; letter-spacing: .02em; } .pw { position: relative; display: flex; align-items: center; } .pw-toggle { position: absolute; right: .8rem; background: none; border: none; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: .6; transition: opacity .2s; } .pw-toggle:hover { opacity: 1; } .pw-field { width: 100%; padding-right: 2.5rem; } .grid-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; } .grid-two > * { min-width: 0; } .grid-two .input-xl { width: 100%; } .visually-hidden { position: absolute !important; overflow: hidden !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; } @media (max-width: 640px) { .grid-two { grid-template-columns: 1fr; } .visually-hidden.show-on-mobile { position: static !important; display: block !important; color: #bbb; width: auto !important; height: auto !important; margin: 0 0 .35rem !important; clip: auto !important; white-space: normal !important; font-size: 1.25rem; line-height: 1.2; } } .auth-card--wide { margin: var(--pad) auto; padding: var(--pad); border-radius: var(--radius); } @media (max-width: 960px) { .auth-card--wide { width: min(100%, 840px); } } @media (max-width: 640px) { .auth-card--wide { width: 100%; padding: var(--pad); } } .auth-card--wide [aria-label="Progreso"] ol { flex-wrap: wrap; } .company__head { display: block; } .company__title { margin-bottom: 1rem; } .company__head [aria-label="Progreso"] { } .auth-card .xnote { margin: var(--pad) 0 0; padding: var(--pad-min) var(--pad); } .auth-card .xnote::before { display: none; } .phone-field { display: flex; align-items: stretch; gap: .4rem; } .phone-field .phone-cc { flex: 0 0 7rem; max-width: 9rem; min-width: 8rem; padding-right: 1.8rem; appearance: none; background: #222; border: 1px solid #444; border-radius: 4px; color: #fff; } .phone-field .phone-input { flex: 1 1 auto; background: #222; border: 1px solid #444; border-radius: 4px; color: #fff; } @media (max-width: 640px) { .phone-field { flex-direction: column; gap: .6rem; } .phone-field .phone-cc { flex: 1 1 auto; max-width: 100%; } } .actions { display: flex; justify-content: flex-end; gap: .6rem; width: 100%; margin-top: 1rem; } .account-nav { position: sticky; top: 1rem; align-self: start; } .account-nav .toc__title { font-weight: 700; margin-bottom: .4rem; } .account-nav .toc__list { list-style: none; margin: 0; padding: 0; } .account-nav .toc__list li { margin: .2rem 0; } .account-nav .toc__list li.sep { margin: .6rem 0; border-top: 1px solid var(--search-outline); } .account-nav a { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: .5rem; } .account-nav a svg { width: 18px; height: 18px; opacity: .9; } .account-nav .is-active > a { background: rgba(255, 255, 255, .06); border: 1px solid var(--search-outline); } .account-nav .badge { margin-left: auto; padding: .1rem .5rem; border-radius: 1rem; background: #333; font-size: .75rem; } .account-nav .pill { margin-left: auto; padding: .1rem .5rem; border: 1px solid var(--search-outline); border-radius: 999px; opacity: .9; font-size: .75rem; } @media (max-width: 880px) { .account-nav { position: static; } .account-nav .toc__title { display: none; } .account-nav .toc__list { display: flex; overflow: auto; gap: .4rem; padding-bottom: .4rem; } .account-nav .toc__list li, .account-nav .toc__list li.sep { margin: 0; border: 0; } .account-nav a { white-space: nowrap; border: 1px solid var(--search-outline); } } .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } @media (max-width: 1024px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .svc-grid { grid-template-columns: 1fr; } } .svc-card { padding: 1rem; border: 1px solid var(--search-outline); border-radius: .8rem; } .svc-card header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; } .svc-card .price { padding: .1rem .6rem; border: 1px solid var(--search-outline); border-radius: 999px; } .svc-card .desc { min-height: 2.2em; opacity: .9; } .svc-card .svc-form { display: flex; flex-wrap: wrap; gap: .5rem; } .to-top-btn { padding-left: var(--pad-min); padding-right: var(--pad-min); } .sp-hero { max-width: min(100%, 980px); margin: var(--pad) auto; padding: clamp(24px, 2.6vw, 44px) var(--pad); line-height: 1.65; letter-spacing: .01em; color: var(--base); } .sp-hero--card { background: var(--bg-header); border: 1px solid #1e1e1e; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); } .sp-hero :where(h1, h2, h3) { margin: 0 0 .6rem 0; letter-spacing: -.01em; text-transform: none; color: var(--text); } .sp-hero h1 { position: relative; padding-bottom: .6rem; font-family: var(--font-cali); font-weight: 600; font-size: clamp(2.6rem, 3.6vw, 4.2rem); line-height: 1.05; font-size: 3.33rem; } .sp-hero h2 { margin-top: clamp(1.2rem, 1.6vw, 1.6rem); font-family: var(--font-cali); font-weight: 600; font-size: clamp(1.9rem, 2.4vw, 2.6rem); line-height: 1.2; } .sp-hero h3 { margin-top: clamp(1rem, 1.2vw, 1.2rem); font-family: var(--font-head); font-weight: 700; font-size: clamp(1.6rem, 2vw, 2rem); line-height: 1.25; color: #e8e8e8; opacity: .95; } .sp-hero p { margin: .6rem 0 0 0; font-weight: 400; font-size: 1.8rem; color: #eaeaea; } .sp-hero strong { font-weight: 400; } .sp-hero p.lead { font-weight: 300; color: var(--white); } .sp-hero :where(ul, ol) { display: grid; gap: .35rem; margin: .6rem 0 0 0; padding: 0; list-style: none; font-size: clamp(1.5rem, 1vw + 1rem, 1.9rem); } .sp-hero ul li { position: relative; padding-left: 1.6rem; color: var(--base); } .sp-hero ul li::before { position: absolute; left: 0; top: .9em; transform: translateY(-50%); width: .66rem; height: .66rem; border-radius: 999px; background: var(--accent-grad); box-shadow: 0 0 0 2px rgba(255, 255, 255, .06); content: ""; } .sp-hero ol { counter-reset: spc; } .sp-hero ol li { position: relative; padding-left: 2rem; counter-increment: spc; } .sp-hero ol li::before { position: absolute; left: 0; top: 0; font-weight: 400; color: var(--yellow); content: counter(spc) "."; } .sp-hero strong { font-weight: 600; color: var(--white); } .sp-hero hr { margin: clamp(1rem, 2vw, 1.6rem) 0; height: 1px; border: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent); } @media (prefers-color-scheme: dark) { .sp-hero p { color: #eaeaea; } } @media (max-width: 640px) { .sp-hero { padding: 20px var(--pad); } } section.content .cards-grid a { text-decoration: none !important; } .red { color: red; } [aria-describedby="obDesc"] .auth-form { padding: var(--pad) 0; } [aria-describedby="obDesc"] .auth-form h2 { text-align: center; text-transform: none; font-size: 3rem; letter-spacing: -0.1rem; color: var(--premium); } .progress { width: 100%; } .progress-steps { display: flex; justify-content: space-between; align-items: center; gap: .6rem; list-style: none; padding: 0; margin: 0; } .progress-steps .chip { height: 3.2rem; user-select: none; } .onboarding .company__subtitle { margin: 0; padding: var(--pad-min) 0; } .onboarding .company__title { margin: 0; } .onboarding .auth-intro { padding-bottom: var(--pad-min); } /* =============== DASH / BLOQUES =============== */ .dash-block { margin: 1.2rem var(--pad); padding: 1rem; border: 1px solid var(--search-outline); border-radius: var(--radius); background: var(--bg-header); } /* =============== TABLAS Y MÉTRICAS =============== */ .stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0.8rem; margin: 0 var(--pad); } @media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .stats-grid { grid-template-columns: 1fr; } } .stat-card { display: grid; gap: .2rem; padding: .9rem 1rem; border: 1px solid var(--search-outline); border-radius: var(--radius); background: rgba(255,255,255,.03); } .stat-label { color: var(--grey); font-size: 1.25rem; } .stat-value { font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; color: var(--text); } /* Tabla genérica para listados del panel, pedidos, moderación, etc. */ .stats-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: .8rem 0; } .stats-table th, .stats-table td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--search-outline); vertical-align: middle; font-size: 1.35rem; color: var(--base); } .stats-table thead th { color: var(--grey); font-weight: 700; background: rgba(255,255,255,.03); } .stats-table tr:hover td { background: rgba(255,255,255,.02); } /* =============== LISTAS DEL PANEL =============== */ .notif-list { display: grid; gap: .6rem; margin: .6rem 0; padding: 0; list-style: none; } .notif-time { display: inline-block; min-width: 8rem; margin-right: .6rem; color: var(--grey); font-size: 1.2rem; } .notif-text { color: var(--base); } .exp-list { display: grid; gap: .35rem; margin: .4rem 0; } /* Acciones rápidas (panel) */ .quick-actions { gap: .6rem; flex-wrap: wrap; } /* =============== ESTADOS / CHIPS =============== */ .status { display: inline-grid; place-items: center; min-width: 8.8ch; padding: .25rem .6rem; border: 1px solid var(--search-outline); border-radius: 999px; font: 700 1.2rem/1 var(--font-base); color: var(--base); background: rgba(255,255,255,.03); } .status.active, .status.on, .status-approved, .status.approved { border-color: rgba(25,195,125,.35); color: #19c37d; } .status.pending, .status-pending { border-color: rgba(255,204,0,.35); color: var(--yellow); } .status.rejected, .status-rejected { border-color: rgba(255,77,46,.35); color: #ff4d2e; } .status.paid, .status-paid { border-color: rgba(0,153,255,.35); color: #0ea5e9; } /* =============== PROMOS / PAQUETES =============== */ .promo-packages-list, .promo-packages-catalog { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; margin: .8rem 0 0; } .promo-packages-list, .promo-packages-catalog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: .8rem 0 0; } .promo-packages-list > :last-child, .promo-packages-catalog > :last-child { grid-column: 2; /* вторая колонка */ } @media (max-width: 1024px) { .promo-packages-list, .promo-packages-catalog { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .promo-packages-list, .promo-packages-catalog { grid-template-columns: 1fr; } } .promo-card { display: grid; gap: .35rem; padding: 1rem; border: 1px solid var(--search-outline); border-radius: var(--radius); background: var(--bg-header); color: var(--text); transition: border-color .2s ease, transform .15s ease, background .2s ease; } .promo-card:hover { border-color: var(--yellow); transform: translateY(-1px); } .promo-card input[type="radio"] { margin-right: .6rem; } .promo-card-body { display: grid; gap: .3rem; } .promo-title { margin: 0; font: 700 1.4rem/1.2 var(--font-head); } /* =============== MEDIA UPLOAD (fotos / videos del local y perfiles) =============== */ .media-upload-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .6rem; padding: .4rem 0; } @media (max-width: 960px) { .media-upload-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 640px) { .media-upload-grid { grid-template-columns: repeat(2, 1fr); } } .media-placeholder { display: grid; place-items: center; width: 100%; height: 10rem; border: 1px dashed var(--search-outline); border-radius: var(--radius); background: rgba(255,255,255,.02); color: var(--grey); cursor: pointer; } .media-placeholder input[type="file"] { display: none; } .media-placeholder .upload-btn { display: inline-grid; place-items: center; gap: 0; padding: .3rem .8rem .3rem; background: none; border: none; color: var(--text); cursor: pointer; } .media-placeholder:hover .upload-btn { color: var(--yellow); } .media-placeholder .upload-btn svg { width: 3rem; height: 3rem; } /* =============== HORARIO LOCAL / SCHEDULE =============== */ .schedule-grid { display: grid; gap: .6rem; } .grid-three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.1rem; align-items: center; margin-top: 0.6rem; } @media (max-width: 520px) { .grid-three { grid-template-columns: 1fr; } .grid-three .label { color: var(--grey); } } /* =============== OTROS LISTADOS ÚTILES =============== */ .addon-list, .feature-list, .message-thread { display: grid; gap: .6rem; } .msg-in, .msg-out { padding: .6rem .8rem; border: 1px solid var(--search-outline); border-radius: var(--radius); background: rgba(255,255,255,.03); } .msg-out { background: rgba(255,255,255,.05); } /* =============== NAV MINI / MIGAS (si hicieran falta dentro del card) =============== */ .auth-actions { display: flex; justify-content: flex-end; gap: .6rem; margin: .6rem var(--pad) 0; } /* FIELDSET (grupos de checkboxes/radios) */ .field-xl fieldset, fieldset.field-xl { margin: 1.2rem 0; padding: 1rem 1.2rem 1.2rem; border: 1px solid var(--search-outline); border-radius: var(--radius); background: rgba(255,255,255,.02); /* лёгкий тёмный фон */ } .flex-justify { display: flex; justify-content: space-evenly; } .field-xl legend, fieldset.field-xl legend, .field-xl .label, fieldset.field-xl .label { font-size: 1.3rem; font-weight: 700; margin-bottom: .8rem; color: var(--grey); } .content-grid--triple .field-xl .label { margin-bottom: 0; padding: 0 0.6rem; } .content-grid--triple fieldset.field-xl { margin-bottom: 0; } .content-grid--triple .field-xl textarea { padding-top: 1rem; padding-bottom: 1rem; min-height: 12rem; } fieldset.field-xl .grid-two { margin-top: .6rem; display: grid; /* gap: .4rem; */ gap: 1.1rem; } .dbl-top { margin: var(--pad) 25% 0; } input[type="file"].input-xl { position: absolute; left: -9999px; opacity: 0; width: 0; height: 0; pointer-events: none; } .upload-btn { display: inline-grid; place-items: center; gap: .3rem; padding: .6rem 1rem; border: 1px solid var(--search-outline); border-radius: var(--radius); background: var(--bg-header); color: var(--text); font-size: 1.3rem; cursor: pointer; transition: all .2s ease; } .upload-btn:hover { border-color: var(--yellow); color: var(--yellow); } /* ==== Complaint detail (ficha de queja) ==== */ .complaint-detail { margin: var(--pad) auto; padding: 1rem 1.2rem; border: 1px solid var(--search-outline); /* 1px, тонко */ border-radius: var(--radius); background: var(--bg-header); /* тёмный фон карточки */ width: 100%; margin: 0; border: none; } .complaint-detail h2 { margin: 0 0 .6rem; font-family: var(--font-head); font-size: 1.6rem; text-transform: none; } .complaint-detail p { margin: .35rem 0; font-size: 1.35rem; color: var(--base); } .complaint-detail b { color: var(--text); font-weight: 700; } /* блок действий внизу карточки */ .complaint-detail .auth-row { /* margin-top: .8rem; */ margin: var(--pad-min) 0 0; gap: .6rem; justify-content: flex-end; } /* Статусы для complaints.status (open / resolved / ignored) */ .status-open { border: 1px solid rgba(255,204,0,.35); color: var(--yellow); background: rgba(255,255,255,.03); border-radius: 999px; padding: .25rem .6rem; font: 700 1.2rem/1 var(--font-base); display: inline-grid; place-items: center; } .status-resolved { border: 1px solid rgba(25,195,125,.35); color: #19c37d; background: rgba(255,255,255,.03); border-radius: 999px; padding: .25rem .6rem; font: 700 1.2rem/1 var(--font-base); display: inline-grid; place-items: center; } .status-ignored { border: 1px solid rgba(255,255,255,.15); color: #aaa; background: rgba(255,255,255,.02); border-radius: 999px; padding: .25rem .6rem; font: 700 1.2rem/1 var(--font-base); display: inline-grid; place-items: center; } .auth-card .auth-card { background: var(--bg-header); } .anti .toc-submenu[hidden] { display: none; } .anti .toc-toggle { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; } .anti .caret { inline-size: 1em; text-align: center; } .anti a.is-active { font-weight: 600; text-decoration: underline; } .anti .caret::after { content: "▸"; text-decoration: none; } .anti a[aria-expanded="true"] .caret::after { content: "▾"; text-decoration: none; } .photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.888rem; margin-top: 1rem; } @media (max-width: 768px) { .photo-grid { grid-template-columns: repeat(3, 1fr); } } .photo-card { position: relative; aspect-ratio: 1/1; border-radius: var(--radius); overflow: hidden; background: #111 url(/assets/ico/loading.gif) center center no-repeat; background-size: 24px 24px; box-shadow: 0 0 0 1px rgba(255,255,255,.06); cursor: grab; transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; } .photo-card:active { cursor: grabbing; } .photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1); transition: transform .25s ease; } @media (pointer: fine) { .photo-card:hover, .photo-card:focus-within { transform: scale(1.04); box-shadow: 0 0 12px rgba(0,0,0,.55); } .photo-card:hover img, .photo-card:focus-within img { transform: scale(1.05); } } .photo-card:focus-within { outline: 2px solid var(--tiffany); outline-offset: 2px; } .photo-del { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(0,0,0,.55); color: #fff; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .18s ease, transform .12s ease, border-color .18s ease; } .photo-card:hover .photo-del, .photo-card:focus-within .photo-del { background: rgba(0,0,0,.75); border-color: rgba(255,255,255,.35); } .photo-del:hover { transform: scale(1.04); } .photo-del:active { transform: scale(0.96); } .photo-card.dragging { opacity: .8; transform: scale(.98); box-shadow: 0 0 0 2px var(--tiffany); } @media (prefers-reduced-motion: reduce) { .photo-card, .photo-card img, .photo-del { transition: none !important; } } .photo-grid:hover .photo-card { opacity: 0.7; } .photo-grid:hover .photo-card:hover { opacity: 1; z-index: 2; } .photo-grid .photo-card:first-child::before { content: "Portada"; position: absolute; top: 0.5rem; left: -5rem; display: flex; align-items: center; justify-content: center; width: 5.5rem; height: 2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid rgba(252, 195, 127, 0.3); border-radius: 0.4rem; background-color: rgba(252, 195, 127, 0.07); color: var(--premium); font-size: 0.85rem; font-weight: bold; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: 0 0 6px rgba(252, 195, 127, 0.15); transform: rotate(-90deg); transform-origin: top right; z-index: 5; pointer-events: none; } .free-grid { padding: var(--pad); } .field-xl small { margin: 0rem 0 0.8rem; padding-left: 0.8rem; padding-right: 8rem; text-align: left; font-style: italic; user-select: none; } .xfiltros.auth-row { margin: 0; padding: var(--pad-min) 4.8rem 0; gap: 1rem; } .xfiltros .btn-green { margin: 2rem 0 0; padding: 0 0.8rem; border: 1px solid; font-size: 1.3rem; height: 3rem; color: var(--premium); } .xfiltros .btn-green:hover { background: var(--premium); color: var(--bg); } .xfiltros .field-xl { gap: .2rem } .xfiltros .field-xl .label { font-weight: 400; font-size: 1.1rem; font-style: italic; } .xfiltros .input-xl { height: 3rem; font-size: 1.2rem; } .field-xl.likeform { margin-left: var(--pad); margin-right: var(--pad); } .field-xl.likeform table small { display: block; margin: 0; padding: 0; } .stats-table thead th { font-size: 1.2rem; } .stats-table thead th:first-of-type { border-radius: var(--radius) 0 0 0; } .stats-table thead th:last-of-type { border-radius: 0 var(--radius) 0 0; } .stats-table svg.inf { width: 2rem; height: 2rem; margin-right: 0.6rem; vertical-align: middle; margin-top: -0.4rem; cursor: pointer; opacity: .6; } .stats-table svg.inf:hover { opacity: 1; } .auth-intro { padding: var(--pad-min) 4rem 0; color: #aaa !important; } #payDesc.auth-intro { margin: 0; padding: 0; } input[type="file"].input-xl { } .content-grid--triple .auth-card { padding-bottom: var(--pad); } .complaint-detail .auth-row .btn-ghost { padding-left: var(--pad-min); padding-right: var(--pad-min); } section.content .yellow strong { color: var(--yellow); } .toc a.goout { margin-left: 0.3rem; font-size: 1.2rem; color: #fff; opacity: .9; } .tarifas { margin: 2rem 0; font-family: var(--font-base, sans-serif); color: var(--base, #ddd); width: 51.5rem; } .tarif-table { width: 100%; border-collapse: collapse; font-size: 1.5rem; line-height: 1.4; } .tarif-table th, .tarif-table td { padding: 0.8rem 0; border-bottom: 1px solid rgba(255,255,255,0.15); } .tarif-table th { text-align: left; font-weight: 500; color: var(--premium, #ffcc00); white-space: nowrap; } .tarif-table td { text-align: right; font-weight: 400; } .tarif-table td small { font-size: 1.25rem; } .tarif-table tr:last-child th, .tarif-table tr:last-child td { border-bottom: none; } .profile-map h3 { text-transform: none; } .map-mini{ width: 100%; height: 220px; border: 1px solid var(--bg-header); border-radius: var(--radius); overflow: hidden; margin-top: var(--pad); background: #0b0b0b; } .leaflet-marker-icon.pin, .leaflet-marker-shadow { background: none !important; } .pin span{ display:block; width:12px; height:12px; border-radius:50%; background: var(--yellow); box-shadow: 0 0 0 4px rgba(255,204,0,.18), 0 0 18px rgba(255,204,0,.35); } .leaflet-tooltip{ background: rgba(0,0,0,.8); border: 1px solid rgba(255,255,255,.12); color: #fff; border-radius: 6px; padding: 4px 8px; font: 500 12px/1 var(--font-base, sans-serif); } /* ====== Tarjetas de paquetes ====== */ .promo-card { cursor: pointer; position: relative; transition: border-color .2s ease, transform .15s ease, background .2s ease; } .promo-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .promo-card .promo-card-body { display: grid; gap: .4rem; } .promo-card .stat-value { font-size: 2.2rem; font-weight: 700; color: var(--premium); } .promo-card .muted { font-size: 1.25rem; color: var(--grey); } /* hover */ .promo-card:hover { border-color: var(--yellow); transform: translateY(-2px); } /* seleccionado */ .promo-card input:checked + .promo-card-body, .promo-card input:checked ~ .promo-card-body { border-color: var(--yellow); background: rgba(255, 204, 0, 0.06); box-shadow: 0 0 10px rgba(255, 204, 0, 0.15); } /* ====== Destacado: paquete más popular ====== */ .promo-card.is-popular { border-color: var(--yellow); background: rgba(255, 204, 0, 0.05); } .promo-card.is-popular::after { content: "Más popular"; position: absolute; top: -0.8rem; right: 1rem; background: var(--accent-grad); color: #000; font: 700 1.1rem/1 var(--font-base); padding: .2rem .7rem; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.25); letter-spacing: .03em; } /* ====== Botón comprar ====== */ .btn-primary { display: block; width: 100%; margin-top: 1.4rem; height: var(--btn-height); border-radius: var(--btn-radius); background: var(--accent-grad); color: #000; font: 700 1.5rem/1 var(--font-base); text-transform: uppercase; cursor: pointer; transition: all .25s ease; } .btn-primary:hover { filter: brightness(1.1); } /* Grid para catálogo */ .promo-packages-catalog, .promo-packages-list { margin-top: var(--pad); } /* Bundles destacan más */ .promo-card.bundle { border-width: 2px; background: rgba(255,255,255,.02); } .promo-card.bundle .feature-list { margin: .6rem 0 0; font-size: 1.25rem; color: var(--base); } .promo-card.bundle .feature-list li::before { content: "✓ "; color: var(--yellow); } /* Sticky checkout */ .checkout-sticky { position: sticky; bottom: 0; padding: 1rem; border-top: 1px solid var(--search-outline); background: rgba(0,0,0,.9); backdrop-filter: blur(6px); margin-top: 2rem; } .checkout-sticky h3 { margin: 0 0 .5rem; font: 700 1.4rem var(--font-head); } .checkout-sticky .stat-value { margin: .8rem 0; font-size: 1.8rem; color: var(--premium); } .promo-card-body .status { text-transform: capitalize; } /* Сетка методов оплаты */ .pay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .8rem; margin-top: .6rem; } .pay-card { display: block; cursor: pointer; } .pay-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .pay-card-body { display: grid; gap: .2rem; padding: 1.6rem 1rem .8rem; border: 1px solid var(--search-outline); border-radius: var(--radius); background: var(--bg-header); transition: border-color .2s ease, transform .15s ease, background .2s ease; } .pay-card:hover .pay-card-body { border-color: var(--yellow); transform: translateY(-1px); } .pay-card input[type="radio"]:checked + .pay-card-body { border-color: var(--yellow); box-shadow: 0 0 0 2px rgba(255,204,0,.15) inset; } .pay-card-body b { font: 700 1.35rem/1 var(--font-head); } .pay-card-body i { color: var(--base); font-size: 1.25rem; } .pay-card-body small { color: var(--grey); font-size: 1.15rem; } .pay-instructions { margin-top: .8rem; padding: .8rem 1rem; border: 1px dashed var(--search-outline); border-radius: var(--radius); background: rgba(255,255,255,.02); } .pay-instructions h4 { font-family: var(--font-head); font-size: 1.45rem; text-transform: none; margin: 0 0 .4rem; } .pay-accounts { display: grid; gap: .4rem; margin: .4rem 0; padding: 0; list-style: none; } .pay-accounts li { display: grid; gap: .1rem; padding: .5rem .6rem; border: 1px solid var(--search-outline); border-radius: var(--radius); background: rgba(255,255,255,.02); } .pay-accounts li b { color: var(--premium); font-weight: 700; } .pay-accounts li span { font-weight: 600; } .pay-accounts li em { color: var(--base); font-style: normal; } .pay-accounts li small { color: var(--grey); } section.content .promo-card h3.promo-title { font-size: 1.6rem; } .field-xl .pay-card-body small { padding-left: 0; padding-right: 0; } /* ===== PAY PAGE ADD-ONS ===== */ .pay-card { padding-bottom: var(--pad); } .status-badge{ display:inline-grid; place-items:center; margin-left:.6rem; padding:.22rem .6rem; border:1px solid var(--search-outline); border-radius:999px; font:700 1.1rem/1 var(--font-base); text-transform:uppercase; letter-spacing:.02em; } .status-created, .status-awaiting_payment { color: var(--yellow); border-color: rgba(255,204,0,.35); } .status-paid { color:#19c37d; border-color: rgba(25,195,125,.35); } .status-failed, .status-cancelled { color:#ff4d2e; border-color: rgba(255,77,46,.35); } .pay-summary{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:.6rem; margin: .8rem 0 1.2rem; padding:.8rem; border:1px solid var(--search-outline); border-radius:var(--radius); background: rgba(255,255,255,.03); } .pay-summary > div{ display:grid; gap:.2rem; } .pay-summary b{ color:var(--grey); font-size:1.2rem; } .pay-summary span{ color:var(--base); font-size:1.35rem; } .pay-hero{ margin: .8rem 0 1.2rem; padding: .9rem 1.1rem; border:1px solid var(--search-outline); border-radius:var(--radius); background: var(--bg-header); } .pay-hero h3{ margin:0 0 .3rem; text-transform:none; font-family:var(--font-head); font-size:1.6rem; } .pay-hero p{ margin:.2rem 0; color:var(--base); } .pay-hero .stat-line{ display:flex; justify-content:space-between; margin-top:.4rem; } .pay-hero .stat-line span{ color:var(--grey); font-size:1.2rem; } .pay-hero .stat-line b{ font-family:var(--font-head); font-size:1.6rem; } .pay-cta{ margin-top:.6rem; display:inline-block; } .warn{ color:#ffcc00 !important; text-align: center; } .pay-accounts-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.8rem; } @media (max-width: 800px){ .pay-accounts-grid{ grid-template-columns:1fr; } } .pay-account{ display:block; border:1px solid var(--search-outline); border-radius:var(--radius); background: var(--bg-header); cursor:pointer; transition:border-color .2s ease, transform .12s ease; } .pay-account:hover{ border-color: var(--yellow); transform: translateY(-1px); } .pay-account input{ display:none; } .pay-account-body{ display:grid; gap:.3rem; padding: .9rem 1.1rem; } .pay-account-body b{ font:700 1.4rem/1.2 var(--font-head); } .pay-account-body i{ color:var(--grey); font-style:normal; font-size:1.2rem; } .pay-dest{ display:flex; gap:.6rem; align-items:baseline; } .dest-tag{ font:700 1.1rem/1 var(--font-base); color:var(--grey); text-transform:uppercase; } .dest-value{ font:700 1.35rem/1 var(--font-head); letter-spacing:.02em; } .qr{ display:grid; place-items:center; margin:.2rem 0 0; border:1px dashed var(--search-outline); border-radius:var(--radius); background: rgba(255,255,255,.02); padding:.6rem; } .qr img{ max-width: 180px; height:auto; display:block; } .pay-note{ margin:.2rem 0 0; color:var(--base); font-size:1.25rem; border-top:1px solid var(--search-outline); padding-top:.4rem; } /* микроправка: капитализация коротких бейджей внутри карточек */ .promo-card-body .status { text-transform: capitalize; } .receipt-upload { display: grid; gap: .4rem; margin: .8rem 0 1.2rem; } .receipt-upload .upload-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 100%; min-height: 8rem; padding: 1rem; border: 1px dashed var(--search-outline); border-radius: var(--radius); background: rgba(255,255,255,.02); color: var(--grey); cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease; } .receipt-upload .upload-btn:hover { border-color: var(--yellow); color: var(--yellow); background: rgba(255,255,255,.04); } .receipt-upload .upload-btn svg { width: 2.5rem; height: 2.5rem; } .receipt-upload .upload-btn span { font-size: 1.35rem; font-weight: 600; } .receipt-upload input[type="file"] { display: none; } .receipt-upload small { color: var(--grey); font-size: 1.2rem; } .pay-summary.likeform { margin-bottom: 0; } #payDesc .status-badge { position: relative; top: -1rem; } /* ===== Brand chips para Yape / Plin ===== */ .brand { display:inline-block; width:2.1rem; height:2.1rem; border-radius:.4rem; margin-right:.4rem; } .brand.yape { background: #6F2DBD; /* фиолетовый Yape */ } .brand.plin { background: #00B5AD; /* бирюзовый Plin */ } /* ===== Контейнеры получателей ===== */ .pay-accounts-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:.8rem; } @media (max-width:1024px){ .pay-accounts-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width:640px){ .pay-accounts-grid{ grid-template-columns: 1fr; } } .pay-dest{ display:block; border:1px solid var(--search-outline); border-radius: var(--radius); background: var(--bg-header); color: var(--text); cursor:pointer; transition: border-color .2s ease, transform .12s ease, background .2s ease; } .pay-dest:hover{ border-color: var(--yellow); transform: translateY(-1px); } .pay-dest input[type="radio"]{ position:absolute; opacity:0; pointer-events:none; } .pay-dest-body{ display:grid; gap:.6rem; padding:.9rem; } .pay-dest-head{ display:flex; align-items:center; gap:.4rem; } .pay-dest-head b{ font:700 1.35rem/1 var(--font-head); } .pay-dest-head small{ color:var(--grey); margin-left:auto; font-size:1.2rem; } /* ===== QR ===== */ .qr-box{ display:grid; place-items:center; width:38rem; height:38rem; border:1px dashed var(--search-outline); border-radius: var(--radius); background: rgba(255,255,255,.02); overflow:hidden; margin: 0 auto; } .qr-box img{ width:38rem; height:38rem; object-fit:contain; display:block; } .qr-empty{ color:var(--grey); font-size:1.3rem; } /* ===== Линии с номером/именем ===== */ .pay-lines{ display:grid; gap:.4rem; } .pay-lines .line{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; } .label-mini{ color:var(--grey); font-size:1.15rem; } .pill{ display:inline-block; padding:.35rem .6rem; border-radius:999rem; background: rgba(255,255,255,.05); border:1px solid var(--search-outline); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace; font-size:1.25rem; color:var(--base); } /* ===== Шаги ===== */ .pay-steps{ margin:.2rem 0 0; padding-left:1.1rem; display:grid; gap:.25rem; list-style: decimal; color: var(--base); font-size:1.25rem; } /* ===== Upload чека (переносим стили из media-placeholder) ===== */ .receipt-upload{ display:grid; gap:.4rem; margin:.6rem 0 0; } .upload-btn{ display:inline-grid; place-items:center; gap:.3rem; padding:.7rem 1.1rem; border:1px dashed var(--search-outline); border-radius: var(--radius); background: rgba(255,255,255,.02); color: var(--text); cursor:pointer; transition: border-color .2s ease, color .2s ease, background .2s ease; } .upload-btn:hover{ border-color: var(--yellow); color: var(--yellow); } .upload-btn svg{ width:2.2rem; height:2.2rem; } .upload-btn input[type="file"]{ display:none; } /* ===== Статус бейдж в заголовке ===== */ .status-badge{ display:inline-grid; place-items:center; padding:.25rem .6rem; margin-left:.6rem; border-radius:999px; font:700 1.15rem/1 var(--font-base); border:1px solid var(--search-outline); background: rgba(255,255,255,.03); color: var(--base); } .status-badge.status-pending{ border-color: rgba(255,204,0,.35); color: var(--yellow); } .status-badge.status-paid{ border-color: rgba(25,195,125,.35); color: #19c37d; } .status-badge.status-failed{ border-color: rgba(255,77,46,.35); color: #ff4d2e; } .payme { text-align: center; } .payme ul, .payme li { list-style: none; } .payme li::before, .payme li::after { display: none; } .payme .pay-lines { width: 380px; margin: 1rem auto; }