/* ============================================================ SÓCRATES CREATIVE STUDIO TÉRMINOS Y CONDICIONES DISEÑO + SIDEBAR FIJO + SCROLLSPY ============================================================ */ #sc-terms-conditions { --sc-navy: #002F57; --sc-blue: #0074C7; --sc-cyan: #31B4E7; --sc-green: #73BC25; --sc-yellow: #F6BD00; --sc-orange: #FF5300; --sc-white: #FFFFFF; position: relative; width: 100%; padding: 75px 20px 120px; box-sizing: border-box; /* Nunca limitar la altura del widget */ height: auto !important; min-height: 0 !important; max-height: none !important; overflow-x: visible !important; overflow-y: visible !important; color: #FFFFFF; font-family: "Ubuntu Sans", Ubuntu, Arial, sans-serif; } #sc-terms-conditions *, #sc-terms-conditions *::before, #sc-terms-conditions *::after { box-sizing: border-box; } .sc-terms__container { width: 100%; max-width: 1280px; margin: 0 auto; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } /* ============================================================ IDIOMAS ============================================================ */ .sc-terms__language { display: none; overflow: visible !important; } .sc-terms__language.is-active { display: block; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } /* ============================================================ HERO ============================================================ */ .sc-terms__hero { position: relative; max-width: 950px; padding: 20px 0 55px; } /* Texto superior */ .sc-terms__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; color: #FFFFFF; font-size: 11px; font-weight: 700; letter-spacing: .16em; } /* Punto celeste */ .sc-terms__eyebrow-dot { display: block; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--sc-cyan); box-shadow: 0 0 0 6px rgba(49,180,231,.10); } /* ============================================================ TÍTULO PRINCIPAL MÁS PEQUEÑO ============================================================ */ .sc-terms__hero h1 { margin: 0 0 25px; padding: 0; font-family: "Exo 2", sans-serif; font-size: clamp( 42px, 5vw, 67px ); line-height: .98; letter-spacing: -.035em; font-weight: 700; text-transform: uppercase; color: #FFFFFF; } /* Antes naranja. Ahora CELeste corporativo. */ .sc-terms__hero h1 span { color: var(--sc-cyan); } /* Bajada */ .sc-terms__lead { max-width: 800px; margin: 0; color: rgba(255,255,255,.75); font-size: 18px; line-height: 1.65; font-weight: 400; } /* ============================================================ INFORMACIÓN HERO ============================================================ */ .sc-terms__meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .sc-terms__meta-item { display: inline-flex; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid rgba(255,255,255,.10); border-radius: 6px; background: rgba(255,255,255,.035); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: rgba(255,255,255,.70); font-size: 12px; } .sc-terms__meta-icon { color: var(--sc-cyan); font-size: 15px; } /* ============================================================ GRID PRINCIPAL ============================================================ */ .sc-terms__grid { position: relative; display: grid; grid-template-columns: 245px minmax(0,1fr); gap: 55px; align-items: start; overflow: visible !important; } /* ============================================================ SIDEBAR ============================================================ */ .sc-terms__sidebar { position: relative; min-width: 0; overflow: visible !important; } .sc-terms__sidebar-inner { position: sticky; top: 105px; width: 100%; max-height: calc(100dvh - 125px); overflow-x: hidden; overflow-y: auto; padding: 24px 22px; border: 1px solid rgba(255,255,255,.10); border-radius: 11px; background: linear-gradient( 145deg, rgba(255,255,255,.055), rgba(255,255,255,.020) ); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); scrollbar-width: thin; scrollbar-color: rgba(49,180,231,.35) transparent; } /* ============================================================ SIDEBAR FIJO CONTROLADO POR JAVASCRIPT ============================================================ */ .sc-terms__sidebar-inner.sc-menu-fixed, .sc-terms__sidebar-inner.sc-menu-bottom { /* V2: sticky nativo para evitar cálculos incorrectos de altura. */ position: sticky !important; top: 105px !important; bottom: auto !important; left: auto !important; z-index: 100; } /* Scroll sidebar */ .sc-terms__sidebar-inner::-webkit-scrollbar { width: 4px; } .sc-terms__sidebar-inner::-webkit-scrollbar-track { background: transparent; } .sc-terms__sidebar-inner::-webkit-scrollbar-thumb { background: rgba(49,180,231,.28); border-radius: 20px; } /* ============================================================ TÍTULO DEL ÍNDICE ============================================================ */ .sc-terms__sidebar-title { margin-bottom: 18px; font-family: "Exo 2", sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .15em; color: var(--sc-cyan); } /* ============================================================ MENÚ ============================================================ */ .sc-terms__toc { display: flex; flex-direction: column; } .sc-terms__toc a { position: relative; display: grid; grid-template-columns: 29px 1fr; gap: 6px; align-items: center; min-height: 34px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.055); color: rgba(255,255,255,.58); text-decoration: none !important; font-size: 11px; line-height: 1.3; transition: color .25s ease, padding-left .25s ease; } .sc-terms__toc a:last-child { border-bottom: 0; } /* Número */ .sc-terms__toc a span { font-family: "Exo 2", sans-serif; font-size: 9px; font-weight: 600; color: rgba(49,180,231,.70); transition: color .25s ease; } /* Hover */ .sc-terms__toc a:hover { padding-left: 4px; color: #FFFFFF; } .sc-terms__toc a:hover span { color: var(--sc-cyan); } /* ============================================================ OPCIÓN ACTIVA ============================================================ */ .sc-terms__toc a.is-active { padding-left: 7px; color: #FFFFFF; font-weight: 600; } .sc-terms__toc a.is-active span { color: var(--sc-cyan); } /* Indicador lateral */ .sc-terms__toc a.is-active::before { content: ""; position: absolute; left: -22px; top: 7px; bottom: 7px; width: 2px; border-radius: 5px; background: var(--sc-cyan); box-shadow: 0 0 10px rgba(49,180,231,.30); } /* ============================================================ CONTENIDO ============================================================ */ .sc-terms__content { min-width: 0; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } /* ============================================================ TARJETAS ============================================================ */ .sc-terms__card { position: relative; margin-bottom: 18px; padding: 40px 44px; /* Evita que el navegador/Elementor recorte contenido interno */ overflow: visible; height: auto !important; min-height: 0 !important; max-height: none !important; border: 1px solid rgba(255,255,255,.09); border-radius: 13px; background: linear-gradient( 135deg, rgba(255,255,255,.050) 0%, rgba(255,255,255,.018) 100% ); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform .35s ease, border-color .35s ease, background .35s ease; } /* Línea lateral celeste */ .sc-terms__card::before { content: ""; position: absolute; left: 0; top: 27px; bottom: 27px; width: 2px; background: var(--sc-cyan); opacity: .28; transition: opacity .35s ease; } .sc-terms__card:hover { transform: translateY(-2px); border-color: rgba(49,180,231,.23); background: linear-gradient( 135deg, rgba(255,255,255,.066) 0%, rgba(255,255,255,.022) 100% ); } .sc-terms__card:hover::before { opacity: .9; } /* Número decorativo */ .sc-terms__number { position: absolute; right: 27px; top: 22px; pointer-events: none; font-family: "Exo 2", sans-serif; font-size: 49px; line-height: 1; font-weight: 700; color: rgba(255,255,255,.035); } /* ============================================================ TÍTULOS INTERNOS ============================================================ */ .sc-terms__card h2 { max-width: 82%; margin: 0 0 21px; padding: 0; font-family: "Exo 2", sans-serif; font-size: clamp( 24px, 2.7vw, 33px ); line-height: 1.08; letter-spacing: -.02em; font-weight: 600; color: #FFFFFF; } /* ============================================================ PÁRRAFOS ============================================================ */ .sc-terms__card p { margin: 0 0 18px; padding: 0; color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.72; } .sc-terms__card p:last-child { margin-bottom: 0; } .sc-terms__card strong { color: #FFFFFF; font-weight: 600; } /* ============================================================ LISTAS ============================================================ */ .sc-terms__card ul { list-style: none !important; padding: 0 !important; margin: 22px 0 25px !important; } .sc-terms__card ul li { position: relative; margin: 0 !important; padding: 7px 0 7px 27px !important; color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.55; } /* Bullet celeste */ .sc-terms__card ul li::before { content: ""; position: absolute; left: 1px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--sc-cyan); box-shadow: 0 0 0 4px rgba(49,180,231,.08); } /* ============================================================ TARJETA INTRO ============================================================ */ .sc-terms__card--intro { border-color: rgba(49,180,231,.22); } .sc-terms__card--intro::before { background: var(--sc-cyan); opacity: .75; } /* ============================================================ HIGHLIGHTS YA NO NARANJA ============================================================ */ .sc-terms__highlight { display: grid; grid-template-columns: 34px 1fr; gap: 15px; align-items: start; margin-top: 28px; padding: 20px 22px; border: 1px solid rgba(49,180,231,.22); border-radius: 8px; background: rgba(49,180,231,.055); } .sc-terms__highlight-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid rgba(49,180,231,.28); border-radius: 6px; background: rgba(49,180,231,.14); color: var(--sc-cyan); font-size: 12px; font-weight: 700; } .sc-terms__highlight p { margin: 2px 0 0 !important; color: rgba(255,255,255,.84); } /* ============================================================ ENLACES INTERNOS ============================================================ */ .sc-terms__text-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 5px; color: var(--sc-cyan) !important; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-decoration: none !important; transition: gap .25s ease, opacity .25s ease; } .sc-terms__text-link span { font-size: 17px; } .sc-terms__text-link:hover { gap: 15px; opacity: .82; } /* ============================================================ CONTACTO ============================================================ */ .sc-terms__card--contact { padding: 52px 46px; border-color: rgba(49,180,231,.24); background: radial-gradient( circle at 100% 0%, rgba(49,180,231,.11), transparent 42% ), linear-gradient( 135deg, rgba(255,255,255,.065), rgba(255,255,255,.018) ); } .sc-terms__card--contact::before { background: var(--sc-cyan); opacity: .90; } /* ============================================================ CTA ÚNICO USO PRINCIPAL DEL NARANJA ============================================================ */ .sc-terms__button { display: inline-flex; align-items: center; justify-content: center; gap: 27px; min-height: 50px; margin-top: 15px; padding: 0 18px 0 22px; border: 1px solid var(--sc-orange); border-radius: 4px; background: var(--sc-orange); color: #FFFFFF !important; font-family: "Ubuntu Sans", sans-serif; font-size: 12px; line-height: 1; font-weight: 700; letter-spacing: .08em; text-decoration: none !important; transition: transform .25s ease, background .25s ease, box-shadow .25s ease; } .sc-terms__button-arrow { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 3px; background: rgba(0,0,0,.13); color: #FFFFFF; font-size: 17px; } .sc-terms__button:hover { transform: translateY(-2px); background: #FF6721; box-shadow: 0 14px 35px rgba(255,83,0,.20); } /* ============================================================ OFFSET DE ANCLAS ============================================================ */ #sc-terms-conditions [id^="sc-terms-es-"], #sc-terms-conditions [id^="sc-terms-pt-"], #sc-terms-conditions [id^="sc-terms-en-"] { scroll-margin-top: 125px; } /* ============================================================ TABLET ============================================================ */ @media (max-width: 1024px) { #sc-terms-conditions { padding-top: 60px; } .sc-terms__grid { grid-template-columns: 205px minmax(0,1fr); gap: 28px; } .sc-terms__sidebar-inner { padding: 20px 16px; } .sc-terms__toc a.is-active::before { left: -16px; } .sc-terms__card { padding: 35px 33px; } .sc-terms__hero h1 { font-size: clamp( 40px, 6vw, 58px ); } } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 767px) { #sc-terms-conditions { padding: 48px 16px 80px; } .sc-terms__hero { padding: 15px 0 38px; } .sc-terms__eyebrow { margin-bottom: 17px; font-size: 9px; } .sc-terms__hero h1 { font-size: clamp( 34px, 10vw, 47px ); line-height: .98; margin-bottom: 20px; } .sc-terms__lead { font-size: 15px; line-height: 1.6; } .sc-terms__meta { flex-direction: column; align-items: flex-start; margin-top: 23px; } .sc-terms__meta-item { font-size: 11px; } .sc-terms__grid { display: block; } /* En móvil ocultamos el índice lateral. */ .sc-terms__sidebar { display: none; } .sc-terms__card { padding: 30px 23px 30px 25px; border-radius: 10px; margin-bottom: 12px; } .sc-terms__card::before { top: 21px; bottom: 21px; } .sc-terms__number { right: 16px; top: 16px; font-size: 36px; } .sc-terms__card h2 { max-width: 84%; margin-bottom: 18px; font-size: 24px; } .sc-terms__card p { font-size: 14px; line-height: 1.68; } .sc-terms__card ul li { font-size: 14px; padding-left: 23px !important; } .sc-terms__highlight { grid-template-columns: 30px 1fr; gap: 12px; padding: 16px; } .sc-terms__highlight-icon { width: 30px; height: 30px; } .sc-terms__card--contact { padding: 35px 25px; } .sc-terms__button { width: 100%; justify-content: space-between; } } /* ============================================================ PROTECCIÓN CONTRA RECORTE DE ELEMENTOR ============================================================ */ /* ============================================================ ACCESIBILIDAD ============================================================ */ @media (prefers-reduced-motion: reduce) { #sc-terms-conditions *, #sc-terms-conditions *::before, #sc-terms-conditions *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* SÓCRATES PHP CORE 4.5.1 — isolated legal compatibility */ #sc-terms-conditions{margin:0!important;} @media(min-width:1025px){ #sc-terms-conditions .sc-terms__sidebar-inner, #sc-terms-conditions .sc-terms__sidebar-inner.sc-menu-fixed, #sc-terms-conditions .sc-terms__sidebar-inner.sc-menu-bottom{ position:sticky!important;top:118px!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important; } } @media(max-width:1024px){ #sc-terms-conditions .sc-terms__sidebar-inner, #sc-terms-conditions .sc-terms__sidebar-inner.sc-menu-fixed, #sc-terms-conditions .sc-terms__sidebar-inner.sc-menu-bottom{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;} } html[data-theme="light"] #sc-terms-conditions{color:#002F57!important;} html[data-theme="light"] #sc-terms-conditions .sc-terms__hero h1, html[data-theme="light"] #sc-terms-conditions .sc-terms__eyebrow, html[data-theme="light"] #sc-terms-conditions .sc-terms__card h2, html[data-theme="light"] #sc-terms-conditions .sc-terms__sidebar-title{color:#002F57!important;} html[data-theme="light"] #sc-terms-conditions .sc-terms__lead, html[data-theme="light"] #sc-terms-conditions .sc-terms__card p, html[data-theme="light"] #sc-terms-conditions .sc-terms__card li{color:#4d6070!important;} html[data-theme="light"] #sc-terms-conditions .sc-terms__card, html[data-theme="light"] #sc-terms-conditions .sc-terms__sidebar-inner, html[data-theme="light"] #sc-terms-conditions .sc-terms__meta-item{background:rgba(255,255,255,.84)!important;border-color:rgba(0,47,87,.14)!important;} html[data-theme="light"] #sc-terms-conditions .sc-terms__toc a{color:#526a79!important;border-color:rgba(0,47,87,.10)!important;} html[data-theme="light"] #sc-terms-conditions .sc-terms__toc a:hover, html[data-theme="light"] #sc-terms-conditions .sc-terms__toc a.is-active{color:#002F57!important;}