/* General Styles */
body {
background-color: #fff;
font-family: 'Segoe UI', sans-serif;
color: #111;
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
/* Buttons */
button, .cta-button, .boton-cta {
padding: 14px 28px;
font-size: 1rem;
font-weight: 700;
color: #fff;
background-color: #1f4eff;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
}
button:hover, .cta-button:hover, .boton-cta:hover {
background-color: #173abf;
transform: translateY(-2px);
}
/* Forms */
input, select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 1rem;
background-color: #f9f9f9;
transition: border-color 0.3s;
}
input:focus, select:focus, textarea:focus {
border-color: #005eff;
outline: none;
}
/* Headers */
h1, h2, h3 {
font-weight: 700;
margin-bottom: 20px;
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.5rem;
}
/* Footer */
footer {
padding: 60px 20px 30px;
font-size: 14px;
border-top: 1px solid #eaeaea;
background-color: #fff;
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.footer-nav ul {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.footer-nav a {
color: #04f;
font-weight: 600;
text-decoration: none;
transition: color 0.3s;
}
.footer-nav a:hover {
color: #111;
}
/* Responsive Styles */
@media (max-width: 768px) {
.container {
flex-direction: column;
align-items: center;
}
.footer-nav ul {
flex-direction: column;
gap: 10px;
}
}
/* Additional Consolidated Styles */
.site-header,body{background-color:#fff}*,.main-nav ul.menu,.mobile-menu ul{padding:0;margin:0}.content h2,.hero-content h1{line-height:1.3;font-weight:700}.content::after,.content::before{content:"";border-radius:inherit;transition:.48s cubic-bezier(.23, 1, .32, 1);left:50%}.card,.content,.content::after,.content::before,.para{transition:.48s cubic-bezier(.23, 1, .32, 1)}.shine-text,.titulo-beneficios,.titulo-biblioteca{-webkit-text-fill-color:transparent}*{box-sizing:border-box}body{font-family:'Segoe UI',sans-serif;color:#111}.container{max-width:1200px;margin:0 auto;padding:20px 30px;display:flex;align-items:center;justify-content:space-between}.site-header{padding:60px 90px;box-shadow:0 4px 10px rgba(0,0,0,.05);position:relative;z-index:100}.header-container{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}.c1,.center-gel{margin-top:-15px}.bloque:first-child::before,.bloque:last-child::after,.hamburger,.mobile-menu{display:none}.logo img{height:250px;width:auto;max-width:100%;object-fit:contain;transition:all 0.3s ease}.main-nav ul.menu{display:flex;gap:60px;list-style:none}.main-nav ul.menu li a{text-decoration:none;font-weight:600;color:#000;transition:color .3s;font-size:16px}.main-nav ul.menu li a:hover{color:#36f}.mobile-menu{position:absolute;top:80px;right:20px;background:#fff;border-radius:8px;box-shadow:0 8px 16px rgba(0,0,0,.15);padding:20px;z-index:999}#coobook-intro,.card,.socket,.tec-right{position:relative}.mobile-menu ul{list-style:none}.mobile-menu ul li{margin:10px 0}.mobile-menu ul li a{text-decoration:none;color:#000;font-weight:500}.hamburger{flex-direction:column;cursor:pointer;gap:5px;width:25px;z-index:1000}.hamburger span{height:3px;background:#000;border-radius:3px}@media screen and (max-width:768px){
.main-nav{display:none}
.hamburger{display:flex}
.site-header{padding:15px 20px}
.header-container{max-width:100%;flex-direction:column;align-items:center;gap:20px}
.mobile-nav-wrapper{order:2}
.logo{order:1}
.logo img{height:150px;max-width:180px}
}#coobook-intro{width:100%;height:100vh;display:flex;justify-content:center;align-items:center;color:#fff;text-align:center;background:repeating-conic-gradient(from 30deg,#000 0 120deg,#1d1d1d 0 180deg),repeating-conic-gradient(from 30deg,#1d1d1d 0 60deg,#4e4f51 0 120deg,#3c3c3c 0 180deg);background-size:200px 200px;animation:20s linear infinite moveBackground;z-index:1;overflow:hidden}.content,.content-flex{flex-direction:column;display:flex}.hero-content h1{font-size:2.8rem;max-width:80%;animation:2s ease-out fadeIn}@keyframes moveBackground{0%{background-position:0 0}100%{background-position:400px 400px}}@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.blinking-text{animation:3s ease-in-out infinite blinkSoft}@keyframes blinkSoft{0%,100%{opacity:1}50%{opacity:.7}}.section-coobook{padding:80px 20px;background-color:#f9f9f9}.content-flex{gap:40px}.content h2{font-size:24px;color:#fff;margin:0}.card{display:flex;align-items:center;justify-content:center;width:320px;border-radius:24px;line-height:1.6}.content{align-items:flex-start;gap:24px;padding:36px;border-radius:22px;color:#fff;overflow:hidden;background:#0a3cff}.content::before{position:absolute;top:-4%;width:90%;height:90%;transform:translate(-50%);background:#ced8ff;z-index:-1;transform-origin:bottom}.content::after{position:absolute;top:-8%;width:80%;height:80%;transform:translate(-50%);background:#e7ecff;z-index:-2;transform-origin:bottom}.content svg{width:48px;height:48px}.para{z-index:1;opacity:1;font-size:18px}.card:hover{transform:translateY(-16px)}.card:hover .content::before{rotate:-8deg;top:0;width:100%;height:100%}.card:hover .content::after{rotate:8deg;top:0;width:100%;height:100%}.section-tecnologia{background-color:#fff;padding:100px 40px}.container-tec{display:flex;flex-direction:column;align-items:center;gap:10px}.tec-left{flex:1;max-width:600px}.shine-text{font-size:2.5rem;font-weight:700;color:#111;background:linear-gradient(to right,#111 0,#0070ff 50%,#111 100%);-webkit-background-clip:text;background-size:200% auto;animation:4s linear infinite shineText}.center-gel,.hex-brick{animation-duration:2s;animation-iteration-count:infinite}.tec-right{flex:1;display:flex;justify-content:center;align-items:center;min-height:300px}@keyframes shineText{0%{background-position:200% center}100%{background-position:-200% center}}.socket{width:200px;height:200px;margin-left:auto;margin-right:auto}.gel,.hex-brick{position:absolute}.hex-brick{background:#000;width:30px;height:17px;top:5px;animation-name:fade00;-webkit-animation-name:fade00;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite}.h2{transform:rotate(60deg);-webkit-transform:rotate(60deg)}.h3{transform:rotate(-60deg);-webkit-transform:rotate(-60deg)}.gel{height:30px;width:30px;transition:.3s;top:50%;left:50%}.center-gel{margin-left:-15px;animation-name:pulse00;-webkit-animation-name:pulse00;-webkit-animation-duration:2s;-webkit-animation-iteration-count:infinite}.c1{margin-left:-47px}.c2,.c3{margin-top:-43px}.c2{margin-left:-31px}.c3{margin-left:1px}.c4{margin-left:17px;margin-top:-15px}.c5,.c6{margin-top:13px}.c5{margin-left:-31px}.c6{margin-left:1px}.c7,.c8{margin-top:-43px}.c7{margin-left:-63px}.c8{margin-left:33px}.c9{margin-left:-15px;margin-top:41px}.c10,.c11{margin-top:13px}.c10{margin-left:-63px}.c11{margin-left:33px}.c12,.c13,.c14{margin-top:-71px}.c12{margin-left:-15px}.c13{margin-left:-47px}.c14{margin-left:17px}.c15,.c16{margin-top:41px}.c15{margin-left:-47px}.c16{margin-left:17px}.c17,.c18{margin-top:-15px}.c17{margin-left:-79px}.c18{margin-left:49px}.c19,.c20,.c21,.c22{margin-top:-99px}.c19{margin-left:-63px}.c20{margin-left:33px}.c21{margin-left:1px}.c22{margin-left:-31px}.c23,.c24,.c25,.c26{margin-top:69px}.c23{margin-left:-63px}.c24{margin-left:33px}.c25{margin-left:1px}.c26{margin-left:-31px}.c28,.c29{margin-left:-95px}.c28{margin-top:-43px}.c29{margin-top:13px}.c30{margin-left:49px;margin-top:41px}.c31{margin-left:-79px;margin-top:-71px}.c32{margin-left:-111px;margin-top:-15px}.c33,.c34{margin-left:65px}.c33{margin-top:-43px}.c34{margin-top:13px}.c35{margin-left:-79px;margin-top:41px}.c36{margin-left:49px;margin-top:-71px}.c37{margin-left:81px;margin-top:-15px}.r1,.r2,.r3{animation-name:pulse00;animation-duration:2s;animation-iteration-count:infinite}.r1,.r1>.hex-brick{animation-delay:.2s}.r2,.r2>.hex-brick{animation-delay:.4s}.r3,.r3>.hex-brick{animation-delay:.6s}@keyframes pulse00{0%,100%{transform:scale(1)}50%{transform:scale(.01)}}@keyframes fade00{0%{background:#252525}50%{background:#000}100%{background:#353535}}.section-tecnologia-vida{width:100%;padding:100px 30px;color:#fff;background:#121212;background:linear-gradient(135deg,#121212 25%,#1a1a1a 25%,#1a1a1a 50%,#121212 50%,#121212 75%,#1a1a1a 75%,#1a1a1a);background-size:40px 40px;animation:4s linear infinite move}@keyframes move{0%{background-position:0 0}100%{background-position:40px 40px}}.container-vida{max-width:900px;margin:0 auto;text-align:center}.title-vida{font-size:2.5rem;font-weight:600;margin-bottom:40px;color:#fff}.text-vida{font-size:1.1rem;line-height:1.9;margin-bottom:30px;color:#ddd}.section-beneficios{background-color:#0f0f0f;padding:100px 40px;color:#fff;text-align:center;position:relative;z-index:1}.titulo-beneficios{font-size:2.2rem;font-weight:600;margin-bottom:60px;background:linear-gradient(to right,#0070ff,#fff);-webkit-background-clip:text;display:inline-block}.blockchain-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px;justify-content:center;align-items:stretch;max-width:1200px;margin:0 auto;position:relative}.bloque{background-color:#1b1b1b;border:1px solid #2e2e2e;padding:30px 25px;border-radius:12px;box-shadow:0 0 15px rgba(0,112,255,.1);transition:transform .3s;position:relative}.bloque::after,.bloque::before{content:'';position:absolute;width:20px;height:4px;background-color:#0070ff;top:50%;transform:translateY(-50%)}.bloque::before{left:-30px}.bloque::after{right:-30px}.bloque h3{font-size:1.3rem;color:#fff;margin-bottom:10px}.bloque p{font-size:.95rem;color:#cfcfcf;line-height:1.6}.section-biblioteca{background-color:#0d0d0d;padding:100px 40px;color:#fff}.biblioteca-container{max-width:1100px;margin:0 auto;text-align:center}.biblioteca-title{font-size:2.4rem;font-weight:700;margin-bottom:20px;color:#fff}.biblioteca-description{font-size:1.1rem;color:#ccc;line-height:1.7;max-width:900px;margin:0 auto 60px}.biblioteca-cards{display:flex;flex-direction:column;gap:30px}@media (min-width:768px){.content-flex{flex-direction:row;align-items:center;justify-content:space-between}.coobook-text{max-width:600px;font-size:1.1rem;line-height:1.8;color:#333}.container-tec{flex-direction:row;justify-content:space-between;align-items:center;gap:15px}.biblioteca-cards{flex-direction:row;justify-content:space-between}}.biblioteca-card{background:#1a1a1a;border:1px solid #2b2b2b;border-radius:14px;padding:30px 25px;flex:1;transition:.3s;box-shadow:0 0 12px rgba(0,0,0,.3)}.bono-cuadro,.categoria,.categoria img{transition:transform .3s}.biblioteca-card:hover{transform:translateY(-6px);border-color:#04f;box-shadow:0 0 20px rgba(0,68,255,.4)}.biblioteca-card h3{font-size:1.4rem;color:#fff;margin-bottom:12px}.biblioteca-card p{color:#ccc;font-size:.95rem;line-height:1.6}.clasificacion-libros{padding:80px 30px;background-color:#0d0d0d;text-align:center}.titulo-biblioteca{font-size:2rem;color:#fff;margin-bottom:50px;background:linear-gradient(to right,#0070ff,#00bfff);-webkit-background-clip:text}.grid-categorias{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px;max-width:1200px;margin:0 auto}.categoria{background-color:#1a1a1a;border-radius:16px;padding:20px;box-shadow:0 0 15px rgba(0,0,0,.3)}.bloque-bono,footer{background-color:#fff}.categoria:hover{transform:translateY(-8px)}.categoria img{max-width:80px;margin-bottom:20px}.footer-legal a,.footer-nav a{transition:color .3s;text-decoration:none}.categoria:hover img{transform:scale(1.1)}.categoria h3{color:#fff;font-size:1rem;margin:0}.bloque-bono{padding:100px 10%}.titulo-bono{font-size:2.5rem;color:#000;margin-bottom:40px;font-weight:600;text-align:center}.footer-nav a:hover,footer{color:#111}.bono-descripcion{text-align:center;margin-bottom:60px}.bono-texto{font-size:1.2rem;color:#111;margin-bottom:30px}.bono-info{display:flex;justify-content:center;gap:60px;flex-wrap:wrap}.bono-item{background-color:#f8faff;padding:20px 30px;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.06)}.bono-item h3{color:#1f4eff;font-size:1.2rem;margin-bottom:8px}.bono-item p{font-size:1.1rem;color:#333}.no-mas{font-size:.95rem;color:#555;font-style:italic}.bono-beneficios-doble{display:flex;justify-content:center;align-items:flex-start;gap:60px;flex-wrap:wrap}.columna-bono{flex:1 1 420px;display:flex;flex-direction:column;gap:30px}.bono-cuadro{background-color:#f4f7fe;padding:30px;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.05)}.bono-cuadro:hover{transform:translateY(-6px)}.bono-cuadro h4{font-size:1.25rem;color:#1f4eff;margin-bottom:12px}.bono-cuadro p{font-size:1rem;color:#333;margin-bottom:10px}.bono-cuadro ul{list-style:disc;margin-left:20px;color:#444;font-size:.95rem;line-height:1.6}@media (max-width:1024px){.bono-beneficios-doble{flex-direction:column;align-items:center}.columna-bono{width:100%}}footer{padding:60px 20px 30px;font-size:14px;border-top:1px solid #eaeaea}.footer-container{max-width:1200px;margin:0 auto}.footer-top{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}.footer-logo img{width:120px;height:auto}.footer-logo p{font-weight:500;font-size:13px;margin-top:8px;color:#444}.footer-nav ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:20px}.footer-nav a{color:#04f;font-weight:600}.footer-bottom{margin-top:40px;text-align:center}.footer-bottom p{margin-bottom:10px;color:#888;font-size:13px}.footer-legal{list-style:none;display:flex;justify-content:center;gap:25px;padding:0}.footer-legal a{color:#666;font-size:13px}.footer-legal a:hover{color:#000}@media (max-width:768px){.bloque::after,.bloque::before{display:none}.footer-top{flex-direction:column}.footer-legal,.footer-nav ul{flex-direction:column;gap:10px}}.contenido-legal{max-width:800px;margin:60px auto;padding:20px}.legal-section h1{font-size:2rem;margin-bottom:20px;color:#111}.legal-section p{font-size:1rem;line-height:1.6;color:#444}.language-selector{position:relative;display:inline-block}.language-btn{background:0 0;border:none;cursor:pointer;font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:6px}.language-btn img{width:24px;height:24px;border-radius:50%}.language-dropdown{display:none;position:absolute;right:0;background-color:#fff;border:1px solid #ddd;border-radius:8px;list-style:none;margin:5px 0 0;padding:.5rem 0;z-index:1000;box-shadow:0 4px 8px rgba(0,0,0,.1)}.language-dropdown li{padding:.3rem 1rem}.language-dropdown li a{display:flex;align-items:center;gap:8px;text-decoration:none;color:#333}.language-dropdown li img{width:20px;height:20px;border-radius:50%}.language-selector:hover .language-dropdown{display:block}.selector-idioma-flotante{position:fixed;bottom:20px;right:20px;z-index:9999;background:#fff;border-radius:12px;padding:6px 12px;box-shadow:0 4px 10px rgba(0,0,0,.1);font-size:14px}.selector-idioma-flotante select{border:none;background:0 0;font-weight:700;font-family:inherit;cursor:pointer}
.section-problemas {
padding: 60px 20px;
background-color: #f9f9f9;
text-align: center;
}
.container-problemas {
max-width: 1200px;
margin: 0 auto;
}
.titulo-problemas {
font-size: 2.5em;
color: #1a73e8;
margin-bottom: 40px;
font-weight: 700;
}
.problemas-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
justify-content: center;
}
.problema-item {
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.problema-item:hover {
transform: translateY(-5px);
}
.problema-item h3 {
font-size: 1.8em;
color: #333;
margin-bottom: 15px;
}
.problema-item p {
font-size: 1.1em;
color: #666;
line-height: 1.6;
}
/* =========================
COOBOOK — LISTA DE ARTÍCULOS (MÓDULO)
Funciona con varios layouts comunes de Joomla:
- mod_articles_news / newsflash
- mod_articles_latest
- mod_articles_category
========================= */
/* Contenedor del módulo (múltiples selectores para cubrir plantillas distintas) */
.moduletable:has(.newsflash),
.moduletable:has(.mod-articlesnews),
.moduletable:has(.mod-articleslatest),
.moduletable:has(.mod-articles-category),
.moduletable:has(.mod-articles) {
max-width: 1120px;
margin: 28px auto 40px;
padding: 22px 22px 12px;
background: linear-gradient(180deg, rgba(10, 33, 74, 0.04), rgba(10, 33, 74, 0.01));
border: 1px solid rgba(10, 33, 74, 0.10);
border-radius: 18px;
box-shadow:
0 18px 42px rgba(0, 0, 0, 0.06),
0 2px 10px rgba(0, 0, 0, 0.04);
}
/* Título del módulo (en tu captura: “Matemáticas”) */
.moduletable:has(.newsflash) > h3,
.moduletable:has(.mod-articlesnews) > h3,
.moduletable:has(.mod-articleslatest) > h3,
.moduletable:has(.mod-articles-category) > h3,
.moduletable:has(.mod-articles) > h3 {
margin: 0 0 14px;
font-size: clamp(22px, 2vw, 30px);
font-weight: 800;
letter-spacing: -0.02em;
color: #0a214a;
}
/* Lista / wrapper */
.moduletable :is(.newsflash, .mod-articlesnews, .mod-articleslatest, .mod-articles-category, .mod-articles) {
display: grid;
gap: 12px;
}
/* Item (tarjeta) */
.moduletable :is(.newsflash-item, .mod-articlesnews__item, .mod-articleslatest__item, .mod-articles-category__item, .mod-articles__item),
.moduletable :is(ul.latestnews > li, ul.category-module > li) {
position: relative;
display: grid;
grid-template-columns: 140px 1fr;
gap: 14px;
align-items: center;
padding: 14px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(10, 33, 74, 0.10);
border-radius: 16px;
overflow: hidden;
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
/* Hover */
.moduletable :is(.newsflash-item, .mod-articlesnews__item, .mod-articleslatest__item, .mod-articles-category__item, .mod-articles__item):hover,
.moduletable :is(ul.latestnews > li, ul.category-module > li):hover {
transform: translateY(-2px);
border-color: rgba(10, 33, 74, 0.18);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.10);
}
/* Imagen (si el módulo la imprime) */
.moduletable :is(.newsflash-image, .item-image, .mod-articlesnews__image, .mod-articles-category__image) {
margin: 0;
}
.moduletable :is(.newsflash-image img, .item-image img, .mod-articlesnews__image img, .mod-articles-category__image img) {
width: 140px;
height: 92px;
object-fit: cover;
border-radius: 12px;
border: 1px solid rgba(10, 33, 74, 0.12);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.10);
display: block;
}
/* Si el módulo NO imprime imagen, evitamos hueco y hacemos la tarjeta a 1 columna */
.moduletable :is(ul.latestnews > li, ul.category-module > li) {
grid-template-columns: 1fr;
}
/* Enlaces (títulos de artículos) */
.moduletable :is(.newsflash-title a, .mod-articlesnews__title a, .mod-articleslatest__title a, .mod-articles-category__title a, a) {
color: #0a214a;
text-decoration: none;
font-weight: 750;
letter-spacing: -0.01em;
line-height: 1.25;
font-size: clamp(16px, 1.2vw, 18px);
display: inline-block;
}
.moduletable :is(.newsflash-title a:hover, .mod-articlesnews__title a:hover, .mod-articleslatest__title a:hover, .mod-articles-category__title a:hover, a:hover) {
color: #0d3fa6;
text-decoration: none;
}
/* Meta / introtext si existe */
.moduletable :is(.newsflash-body, .mod-articlesnews__introtext, .mod-articles-category__introtext, .mod-articles__introtext) {
margin-top: 6px;
color: rgba(10, 33, 74, 0.78);
font-size: 14px;
line-height: 1.55;
}
/* Responsive */
@media (max-width: 760px) {
.moduletable:has(.newsflash),
.moduletable:has(.mod-articlesnews),
.moduletable:has(.mod-articleslatest),
.moduletable:has(.mod-articles-category),
.moduletable:has(.mod-articles) {
margin: 18px 14px 30px;
padding: 16px 14px 10px;
}
.moduletable :is(.newsflash-item, .mod-articlesnews__item, .mod-articleslatest__item, .mod-articles-category__item, .mod-articles__item) {
grid-template-columns: 1fr;
}
.moduletable :is(.newsflash-image img, .item-image img, .mod-articlesnews__image img, .mod-articles-category__image img) {
width: 100%;
height: 170px;
}
}
/* COOBOOK — estilo para módulos de artículos (compatible) */
.moduletable,
.sidebar .moduletable,
.main .moduletable {
border-radius: 18px;
}
/* Apunta a los módulos típicos de artículos */
.moduletable .newsflash,
.moduletable .mod-articlesnews,
.moduletable .mod-articleslatest,
.moduletable .mod-articles-category,
.moduletable .mod-articles {
max-width: 1120px;
margin: 28px auto 40px;
padding: 22px 22px 12px;
background: linear-gradient(180deg, rgba(10, 33, 74, 0.04), rgba(10, 33, 74, 0.01));
border: 1px solid rgba(10, 33, 74, 0.10);
border-radius: 18px;
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.06), 0 2px 10px rgba(0, 0, 0, 0.04);
}
.moduletable > h3 {
margin: 0 0 14px;
font-size: clamp(22px, 2vw, 30px);
font-weight: 800;
letter-spacing: -0.02em;
color: #0a214a;
}
.moduletable .newsflash-item,
.moduletable .mod-articlesnews__item,
.moduletable .mod-articleslatest__item,
.moduletable .mod-articles-category__item,
.moduletable .mod-articles__item {
display: grid;
grid-template-columns: 140px 1fr;
gap: 14px;
align-items: center;
padding: 14px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(10, 33, 74, 0.10);
border-radius: 16px;
overflow: hidden;
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.moduletable .newsflash-item:hover,
.moduletable .mod-articlesnews__item:hover,
.moduletable .mod-articleslatest__item:hover,
.moduletable .mod-articles-category__item:hover,
.moduletable .mod-articles__item:hover {
transform: translateY(-2px);
border-color: rgba(10, 33, 74, 0.18);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.10);
}
/* Imagen si existe */
.moduletable .newsflash-image img,
.moduletable .item-image img {
width: 140px;
height: 92px;
object-fit: cover;
border-radius: 12px;
border: 1px solid rgba(10, 33, 74, 0.12);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.10);
display: block;
}
.moduletable a {
color: #0a214a;
text-decoration: none;
font-weight: 750;
letter-spacing: -0.01em;
line-height: 1.25;
}
.moduletable a:hover {
color: #0d3fa6;
}
@media (max-width: 760px) {
.moduletable .newsflash,
.moduletable .mod-articlesnews,
.moduletable .mod-articleslatest,
.moduletable .mod-articles-category,
.moduletable .mod-articles {
margin: 18px 14px 30px;
padding: 16px 14px 10px;
}
.moduletable .newsflash-item,
.moduletable .mod-articlesnews__item,
.moduletable .mod-articleslatest__item,
.moduletable .mod-articles-category__item,
.moduletable .mod-articles__item {
grid-template-columns: 1fr;
}
.moduletable .newsflash-image img,
.moduletable .item-image img {
width: 100%;
height: 170px;
}
}
/* =========================
Gris de la letras del menu de la biblioteca
========================= */
.cb-bib-disabled{
color: #9aa3ad;
opacity: .85;
cursor: default;
text-decoration: none;
pointer-events: none;
}
a,
a:hover,
a:focus,
a:active,
a:visited {
text-decoration: none !important;
}
/* =========================
CooBook - Hero WOW (CSS only)
========================= */
.cbk-heroX{
position: relative;
width: 100%;
overflow: hidden;
background: linear-gradient(180deg, #ffffff 0%, #fbfdff 58%, #ffffff 100%);
}
.cbk-heroX__wrap{
position: relative;
max-width: 1240px;
margin: 0 auto;
padding: clamp(28px, 4vw, 64px) clamp(16px, 3vw, 28px);
z-index: 2;
}
.cbk-heroX__layout{
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: clamp(18px, 3vw, 46px);
align-items: center;
min-height: clamp(560px, 72vh, 760px);
}
/* Background system */
.cbk-heroX__bg{
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.cbk-heroX__grain{
position: absolute;
inset: -40%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
opacity: .10;
transform: rotate(6deg);
}
.cbk-heroX__blob{
position:absolute;
border-radius: 999px;
filter: blur(0px);
opacity: .95;
animation: cbkBlobFloat 12s ease-in-out infinite;
}
.cbk-heroX__blob--1{
width: 520px; height: 520px;
left: -180px; top: -180px;
background: radial-gradient(circle at 30% 30%, rgba(59,130,246,.22), transparent 60%),
radial-gradient(circle at 70% 70%, rgba(16,185,129,.18), transparent 58%);
}
.cbk-heroX__blob--2{
width: 520px; height: 520px;
right: -220px; top: -120px;
background: radial-gradient(circle at 30% 30%, rgba(99,102,241,.18), transparent 62%),
radial-gradient(circle at 70% 70%, rgba(59,130,246,.14), transparent 58%);
animation-delay: -3s;
}
.cbk-heroX__blob--3{
width: 680px; height: 680px;
left: 40%; bottom: -420px;
background: radial-gradient(circle at 30% 30%, rgba(17,24,39,.10), transparent 62%),
radial-gradient(circle at 70% 70%, rgba(16,185,129,.12), transparent 60%);
animation-delay: -6s;
}
@keyframes cbkBlobFloat{
0%,100%{ transform: translate3d(0,0,0) scale(1); }
50%{ transform: translate3d(0,16px,0) scale(1.02); }
}
.cbk-heroX__gridlines{
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(17,24,39,.06) 1px, transparent 1px),
linear-gradient(to bottom, rgba(17,24,39,.06) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(540px 380px at 60% 32%, rgba(0,0,0,1), rgba(0,0,0,.25) 55%, transparent 78%);
opacity: .55;
}
/* Particles */
.cbk-heroX__particles{ position:absolute; inset:0; }
.cbk-heroX__particles .p{
position:absolute;
width: 6px; height: 6px;
border-radius: 999px;
background: rgba(17,24,39,.16);
box-shadow: 0 0 0 6px rgba(59,130,246,.06);
animation: cbkParticle 7.5s linear infinite;
opacity: .55;
}
.cbk-heroX__particles .p::after{
content:"";
position:absolute;
inset:-18px -18px auto auto;
width: 42px; height: 1px;
background: linear-gradient(90deg, rgba(59,130,246,.0), rgba(59,130,246,.22), rgba(16,185,129,.0));
transform: rotate(-14deg);
opacity: .35;
}
@keyframes cbkParticle{
0%{ transform: translateY(0) translateX(0); opacity:.0; }
15%{ opacity:.55; }
85%{ opacity:.55; }
100%{ transform: translateY(-90px) translateX(18px); opacity:0; }
}
.p1{ left: 6%; top: 68%; animation-delay: -0.2s; }
.p2{ left: 12%; top: 34%; animation-delay: -1.7s; }
.p3{ left: 18%; top: 78%; animation-delay: -3.2s; }
.p4{ left: 28%; top: 58%; animation-delay: -2.2s; }
.p5{ left: 38%; top: 80%; animation-delay: -4.1s; }
.p6{ left: 46%; top: 42%; animation-delay: -1.1s; }
.p7{ left: 54%; top: 72%; animation-delay: -2.9s; }
.p8{ left: 62%; top: 52%; animation-delay: -3.8s; }
.p9{ left: 70%; top: 82%; animation-delay: -1.9s; }
.p10{ left: 76%; top: 44%; animation-delay: -0.9s; }
.p11{ left: 82%; top: 70%; animation-delay: -2.6s; }
.p12{ left: 88%; top: 54%; animation-delay: -3.6s; }
.p13{ left: 92%; top: 76%; animation-delay: -1.4s; }
.p14{ left: 64%; top: 30%; animation-delay: -4.4s; }
.p15{ left: 22%; top: 28%; animation-delay: -2.0s; }
/* Copy */
.cbk-heroX__badge{
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(255,255,255,.70);
border: 1px solid rgba(17,24,39,.12);
backdrop-filter: blur(12px);
font: 700 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(17,24,39,.70);
margin-bottom: 14px;
overflow: hidden;
}
.cbk-heroX__badgeCut{
position: absolute;
right: -30px;
top: 50%;
transform: translateY(-50%) rotate(18deg);
width: 80px;
height: 120px;
background: linear-gradient(180deg, rgba(59,130,246,.18), rgba(16,185,129,.12));
filter: blur(18px);
opacity: .55;
}
.cbk-heroX__pulse{
width: 10px;
height: 10px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(59,130,246,.95), rgba(16,185,129,.95));
box-shadow: 0 0 0 0 rgba(59,130,246,.22);
animation: cbkPulse 1.8s ease-out infinite;
}
@keyframes cbkPulse{
0%{ box-shadow: 0 0 0 0 rgba(59,130,246,.20); }
70%{ box-shadow: 0 0 0 10px rgba(59,130,246,0); }
100%{ box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}
.cbk-heroX__title{
margin: 0 0 14px 0;
color: #0b1220;
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
font-weight: 900;
letter-spacing: -0.035em;
font-size: clamp(34px, 3.9vw, 56px);
line-height: 1.02;
}
.cbk-heroX__title::selection,
.cbk-heroX__lead::selection{
background: rgba(59,130,246,.18);
}
.cbk-heroX__lead{
margin: 0 0 22px 0;
color: rgba(11,18,32,.78);
font: 500 clamp(15px, 1.25vw, 18px) / 1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
max-width: 60ch;
}
/* Buttons */
.cbk-heroX__cta{
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 18px;
}
.cbk-btnX{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 16px;
border-radius: 16px;
text-decoration: none;
font: 800 14px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: .02em;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
will-change: transform;
position: relative;
overflow: hidden;
}
.cbk-btnX--primary{
color: #fff;
background: linear-gradient(135deg, rgba(17,24,39,.98), rgba(17,24,39,.90));
border: 1px solid rgba(17,24,39,.12);
box-shadow: 0 18px 40px rgba(17,24,39,.18);
}
.cbk-btnX--primary::before{
content:"";
position:absolute;
inset:-60px;
background: radial-gradient(circle at 30% 30%, rgba(59,130,246,.35), transparent 55%),
radial-gradient(circle at 70% 70%, rgba(16,185,129,.28), transparent 55%);
opacity: .0;
transition: opacity .18s ease;
}
.cbk-btnX--primary:hover{
transform: translateY(-2px);
box-shadow: 0 22px 52px rgba(17,24,39,.22);
}
.cbk-btnX--primary:hover::before{ opacity: .9; }
.cbk-btnX--glass{
color: rgba(11,18,32,.92);
background: rgba(255,255,255,.70);
border: 1px solid rgba(17,24,39,.14);
backdrop-filter: blur(12px);
box-shadow: 0 14px 30px rgba(17,24,39,.10);
}
.cbk-btnX--glass:hover{
transform: translateY(-2px);
border-color: rgba(17,24,39,.20);
box-shadow: 0 18px 42px rgba(17,24,39,.14);
}
/* Pills */
.cbk-heroX__meta{
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 16px;
}
.cbk-heroX__pill{
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 999px;
background: rgba(255,255,255,.70);
border: 1px solid rgba(17,24,39,.10);
color: rgba(11,18,32,.82);
font: 700 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
backdrop-filter: blur(12px);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cbk-heroX__pill:hover{
transform: translateY(-2px);
border-color: rgba(59,130,246,.22);
box-shadow: 0 14px 28px rgba(17,24,39,.10);
}
.cbk-heroX__icon{
width: 14px;
height: 14px;
border-radius: 4px;
display: inline-block;
position: relative;
background: rgba(17,24,39,.10);
}
.cbk-heroX__icon--v{
background: linear-gradient(135deg, rgba(59,130,246,.28), rgba(16,185,129,.26));
}
.cbk-heroX__icon--q{
background: linear-gradient(135deg, rgba(99,102,241,.24), rgba(59,130,246,.22));
}
.cbk-heroX__icon--s{
background: linear-gradient(135deg, rgba(16,185,129,.22), rgba(17,24,39,.12));
}
/* Ticker (marquee) */
.cbk-heroX__ticker{
width: min(560px, 100%);
border-radius: 16px;
border: 1px solid rgba(17,24,39,.10);
background: rgba(255,255,255,.65);
backdrop-filter: blur(12px);
overflow: hidden;
position: relative;
}
.cbk-heroX__ticker::before,
.cbk-heroX__ticker::after{
content:"";
position:absolute;
top:0; bottom:0;
width: 70px;
z-index: 2;
}
.cbk-heroX__ticker::before{
left:0;
background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0));
}
.cbk-heroX__ticker::after{
right:0;
background: linear-gradient(270deg, rgba(255,255,255,1), rgba(255,255,255,0));
}
.cbk-heroX__tickerTrack{
display: inline-flex;
align-items: center;
gap: 14px;
padding: 10px 14px;
white-space: nowrap;
animation: cbkMarquee 18s linear infinite;
}
.cbk-heroX__tickerTrack span{
font: 800 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: .08em;
text-transform: uppercase;
color: rgba(17,24,39,.60);
}
.cbk-heroX__tickerTrack b{
width: 6px; height: 6px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(59,130,246,.85), rgba(16,185,129,.85));
opacity: .9;
}
@keyframes cbkMarquee{
0%{ transform: translateX(0); }
100%{ transform: translateX(-50%); }
}
/* Visual block */
.cbk-heroX__visual{
position: relative;
min-height: 420px;
}
.cbk-holoFrame{
position: relative;
width: min(560px, 100%);
margin-left: auto;
border-radius: 26px;
background: rgba(255,255,255,.62);
border: 1px solid rgba(17,24,39,.12);
box-shadow: 0 34px 80px rgba(17,24,39,.14);
backdrop-filter: blur(14px);
overflow: hidden;
transform: perspective(900px) rotateY(-8deg) rotateX(2deg);
transition: transform .25s ease;
}
.cbk-holoFrame:hover{
transform: perspective(900px) rotateY(-5deg) rotateX(1deg) translateY(-2px);
}
.cbk-holoFrame__rim{
content:"";
position:absolute;
inset:-2px;
border-radius: 28px;
background: linear-gradient(135deg,
rgba(59,130,246,.35),
rgba(16,185,129,.25),
rgba(99,102,241,.22),
rgba(17,24,39,.10)
);
filter: blur(14px);
opacity: .55;
z-index: 0;
}
.cbk-holoFrame__scan{
position:absolute;
inset:-40%;
background: linear-gradient(90deg, transparent, rgba(59,130,246,.14), rgba(16,185,129,.10), transparent);
transform: rotate(18deg);
animation: cbkHoloSweep 4.8s ease-in-out infinite;
opacity: .55;
z-index: 1;
}
@keyframes cbkHoloSweep{
0%{ transform: translateX(-18%) rotate(18deg); opacity:.20; }
45%{ transform: translateX(18%) rotate(18deg); opacity:.60; }
100%{ transform: translateX(-18%) rotate(18deg); opacity:.20; }
}
.cbk-holoFrame__inner{
position: relative;
z-index: 2;
}
.cbk-holoTop{
display:flex;
align-items:center;
gap: 8px;
padding: 14px 16px;
border-bottom: 1px solid rgba(17,24,39,.10);
background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.54));
}
.cbk-holoTop .dot{
width: 10px; height: 10px;
border-radius: 999px;
background: rgba(17,24,39,.18);
}
.cbk-holoTop .label{
margin-left:auto;
font: 900 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(17,24,39,.55);
}
.cbk-holoBody{
position: relative;
padding: 18px 16px 18px;
min-height: 360px;
}
.cbk-holoGrid{
position:absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(17,24,39,.06) 1px, transparent 1px),
linear-gradient(to bottom, rgba(17,24,39,.06) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(320px 260px at 58% 38%, rgba(0,0,0,1), rgba(0,0,0,.2) 55%, transparent 78%);
opacity: .65;
pointer-events:none;
}
.cbk-holoCard{
border-radius: 18px;
border: 1px solid rgba(17,24,39,.10);
background: rgba(255,255,255,.60);
box-shadow: 0 16px 30px rgba(17,24,39,.08);
padding: 14px 14px 12px;
position: relative;
overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease;
}
.cbk-holoCard::after{
content:"";
position:absolute;
inset:-40px;
background: radial-gradient(circle at 30% 30%, rgba(59,130,246,.12), transparent 60%),
radial-gradient(circle at 70% 70%, rgba(16,185,129,.10), transparent 60%);
opacity: .0;
transition: opacity .18s ease;
}
.cbk-holoCard:hover{
transform: translateY(-2px);
box-shadow: 0 22px 46px rgba(17,24,39,.12);
}
.cbk-holoCard:hover::after{ opacity: .9; }
.cbk-holoCard .bar{
height: 6px;
width: 46%;
border-radius: 999px;
background: linear-gradient(90deg, rgba(59,130,246,.78), rgba(16,185,129,.74));
margin-bottom: 10px;
opacity: .95;
}
.cbk-holoCard .t{
height: 12px;
width: 74%;
border-radius: 999px;
background: rgba(17,24,39,.10);
margin-bottom: 10px;
}
.cbk-holoCard .p{
height: 10px;
width: 92%;
border-radius: 999px;
background: rgba(17,24,39,.08);
margin-bottom: 8px;
}
.cbk-holoCard .p.s{ width: 58%; }
.cbk-holoCard--a{ margin-top: 8px; }
.cbk-holoCard--b{ margin-top: 12px; transform: translateX(12px); }
.cbk-holoCard--c{ margin-top: 12px; transform: translateX(24px); opacity: .95; }
.cbk-holoStats{
display:grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 14px;
position: relative;
z-index: 2;
}
.cbk-holoStats .stat{
border-radius: 16px;
border: 1px solid rgba(17,24,39,.10);
background: rgba(255,255,255,.62);
backdrop-filter: blur(12px);
padding: 12px 12px;
box-shadow: 0 14px 28px rgba(17,24,39,.08);
}
.cbk-holoStats .k{
display:block;
font: 800 11px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(17,24,39,.55);
margin-bottom: 6px;
}
.cbk-holoStats .v{
display:block;
font: 900 18px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: -0.02em;
color: rgba(11,18,32,.90);
}
.cbk-heroX__shadow{
position:absolute;
left: 50%;
transform: translateX(-50%);
bottom: -18px;
width: min(560px, 92%);
height: 28px;
border-radius: 999px;
background: radial-gradient(circle at 50% 40%, rgba(17,24,39,.18), transparent 70%);
filter: blur(2px);
opacity: .35;
}
/* Responsive */
@media (max-width: 980px){
.cbk-heroX__layout{
grid-template-columns: 1fr;
min-height: auto;
padding-top: 6px;
}
.cbk-holoFrame{
margin: 12px auto 0;
transform: none;
}
}
@media (max-width: 520px){
.cbk-btnX{
width: 100%;
padding: 13px 16px;
}
.cbk-heroX__cta{ gap: 10px; }
.cbk-holoStats{ grid-template-columns: 1fr; }
}
/* =========================
Holographic Image Integration
========================= */
.cbk-holoFrame--img{
padding: 10px;
}
.cbk-holoImage{
display: block;
width: 100%;
height: auto;
border-radius: 18px;
background: #ffffff;
box-shadow:
inset 0 0 0 1px rgba(17,24,39,.06),
0 22px 46px rgba(17,24,39,.12);
transform: translateZ(0);
filter: saturate(1.05) contrast(1.02);
transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.cbk-holoFrame--img:hover .cbk-holoImage{
transform: translateY(-2px) scale(1.005);
box-shadow:
inset 0 0 0 1px rgba(59,130,246,.18),
0 30px 68px rgba(17,24,39,.16);
filter: saturate(1.08) contrast(1.04);
}
.cbk-holoFrame--img::after{
content:"";
position:absolute;
inset: 14px;
border-radius: 20px;
pointer-events:none;
background:
radial-gradient(60% 40% at 20% 10%, rgba(59,130,246,.22), transparent 60%),
radial-gradient(60% 40% at 80% 90%, rgba(16,185,129,.18), transparent 60%);
opacity: .55;
filter: blur(14px);
transition: opacity .25s ease;
}
.cbk-holoFrame--img:hover::after{
opacity: .85;
}
@media (max-width: 980px){
.cbk-holoFrame--img{
padding: 8px;
}
}
@media (max-width: 520px){
.cbk-holoImage{
border-radius: 16px;
}
}
/* =========================
Session: Soft Elegant (matches hero language, no cuts)
========================= */
.cbk-soft{
position: relative;
width: 100%;
background: transparent;
overflow: visible;
}
.cbk-soft__wrap{
position: relative;
max-width: 1240px;
margin: 0 auto;
padding: clamp(34px, 4vw, 78px) clamp(16px, 3vw, 28px);
}
/* subtle internal ambient (does NOT create section cut) */
.cbk-soft__wrap::before{
content:"";
position:absolute;
inset: 10px 0;
border-radius: 40px;
background:
radial-gradient(520px 380px at 10% 20%, rgba(59,130,246,.10), transparent 60%),
radial-gradient(520px 380px at 90% 30%, rgba(99,102,241,.08), transparent 62%),
radial-gradient(640px 460px at 55% 85%, rgba(16,185,129,.08), transparent 62%);
filter: blur(0px);
opacity: .95;
pointer-events:none;
z-index: 0;
/* Hard fade to edges to avoid any visible cut */
-webkit-mask-image: radial-gradient(110% 120% at 50% 50%, #000 55%, transparent 85%);
mask-image: radial-gradient(110% 120% at 50% 50%, #000 55%, transparent 85%);
}
.cbk-soft__wrap::after{
content:"";
position:absolute;
inset: 0;
pointer-events:none;
z-index: 0;
background-image:
linear-gradient(to right, rgba(17,24,39,.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(17,24,39,.05) 1px, transparent 1px);
background-size: 72px 72px;
opacity: .40;
-webkit-mask-image: radial-gradient(520px 360px at 45% 35%, #000 45%, transparent 78%);
mask-image: radial-gradient(520px 360px at 45% 35%, #000 45%, transparent 78%);
}
.cbk-soft__layout{
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: clamp(18px, 3vw, 54px);
align-items: center;
}
/* Left */
.cbk-soft__eyebrow{
margin: 0 0 12px 0;
font: 800 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(17,24,39,.55);
}
.cbk-soft__title{
margin: 0 0 12px 0;
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
font-weight: 950;
letter-spacing: -0.035em;
color: #0b1220;
font-size: clamp(28px, 3.2vw, 44px);
line-height: 1.06;
}
.cbk-soft__hl{
position: relative;
display: inline-block;
padding: 0 6px;
}
.cbk-soft__hl::before{
content:"";
position:absolute;
left:-6px; right:-6px;
bottom: .08em;
height: .55em;
border-radius: 999px;
background: linear-gradient(90deg, rgba(59,130,246,.20), rgba(16,185,129,.16));
transform: skewX(-8deg);
z-index: -1;
opacity: .90;
animation: cbkSoftBreath 3.1s ease-in-out infinite;
}
@keyframes cbkSoftBreath{
0%,100%{ opacity:.70; filter: blur(0); }
50%{ opacity:.98; filter: blur(.25px); }
}
.cbk-soft__lead{
margin: 0 0 18px 0;
max-width: 66ch;
font: 550 clamp(15px, 1.15vw, 18px) / 1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
color: rgba(11,18,32,.76);
}
.cbk-soft__checks{
display: grid;
gap: 10px;
}
.cbk-soft__check{
display:flex;
gap: 12px;
align-items:flex-start;
font: 700 14px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
color: rgba(11,18,32,.78);
}
.cbk-soft__tick{
width: 10px; height: 10px;
border-radius: 999px;
margin-top: 7px;
flex: 0 0 auto;
box-shadow: 0 0 0 8px rgba(59,130,246,.06);
animation: cbkTickFloat 6.2s ease-in-out infinite;
}
@keyframes cbkTickFloat{
0%,100%{ transform: translateY(0); }
50%{ transform: translateY(-3px); }
}
.cbk-soft__tick--a{
background: linear-gradient(135deg, rgba(59,130,246,.85), rgba(16,185,129,.75));
}
.cbk-soft__tick--b{
background: linear-gradient(135deg, rgba(99,102,241,.75), rgba(59,130,246,.70));
box-shadow: 0 0 0 8px rgba(99,102,241,.06);
animation-delay: -1.1s;
}
.cbk-soft__tick--c{
background: linear-gradient(135deg, rgba(16,185,129,.75), rgba(17,24,39,.20));
box-shadow: 0 0 0 8px rgba(16,185,129,.05);
animation-delay: -2.2s;
}
/* Right: elegant “glass island” that fades to edges */
.cbk-soft__right{
display: grid;
gap: 16px;
align-content: center;
justify-items: start;
}
.cbk-soft__free{
position: relative;
padding: 18px 18px 16px;
border-radius: 26px;
background: transparent;
isolation: isolate;
}
.cbk-soft__free::before{
content:"";
position:absolute;
inset:-14px;
border-radius: 34px;
background:
radial-gradient(120% 100% at 20% 20%, rgba(59,130,246,.16), transparent 56%),
radial-gradient(120% 100% at 85% 85%, rgba(16,185,129,.13), transparent 58%),
radial-gradient(140% 120% at 50% 55%, rgba(255,255,255,.88), rgba(255,255,255,.48));
box-shadow: 0 34px 90px rgba(17,24,39,.10);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
z-index: -2;
-webkit-mask-image: radial-gradient(120% 120% at 50% 50%, #000 62%, transparent 92%);
mask-image: radial-gradient(120% 120% at 50% 50%, #000 62%, transparent 92%);
}
.cbk-soft__free::after{
content:"";
position:absolute;
inset:-24px;
border-radius: 44px;
background: linear-gradient(135deg,
rgba(59,130,246,.18),
rgba(16,185,129,.14),
rgba(99,102,241,.12),
transparent
);
filter: blur(18px);
opacity: .55;
z-index: -3;
animation: cbkSoftRim 4.6s ease-in-out infinite;
}
@keyframes cbkSoftRim{
0%,100%{ opacity:.40; transform: translateY(0); }
50%{ opacity:.72; transform: translateY(-3px); }
}
.cbk-soft__freeTop{
display:flex;
align-items:center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.cbk-soft__chip{
display:inline-flex;
align-items:center;
padding: 10px 12px;
border-radius: 999px;
background: rgba(255,255,255,.50);
border: 1px solid rgba(17,24,39,.08);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
font: 850 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(17,24,39,.60);
}
.cbk-soft__pin{
width: 10px;
height: 10px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(59,130,246,.95), rgba(16,185,129,.95));
box-shadow: 0 0 0 0 rgba(59,130,246,.18);
animation: cbkSoftPin 1.9s ease-out infinite;
}
@keyframes cbkSoftPin{
0%{ box-shadow: 0 0 0 0 rgba(59,130,246,.18); }
70%{ box-shadow: 0 0 0 14px rgba(59,130,246,0); }
100%{ box-shadow: 0 0 0 0 rgba(59,130,246,0); }
}
.cbk-soft__big{
margin: 0 0 8px 0;
font: 950 clamp(26px, 2.6vw, 38px) / 1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: -0.03em;
color: rgba(11,18,32,.92);
}
.cbk-soft__text{
margin: 0 0 14px 0;
font: 700 14px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
color: rgba(11,18,32,.74);
}
.cbk-soft__tags{
display:flex;
flex-wrap: wrap;
gap: 10px;
}
.cbk-soft__tag{
display:inline-flex;
padding: 10px 12px;
border-radius: 999px;
background: rgba(255,255,255,.50);
border: 1px solid rgba(17,24,39,.08);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
color: rgba(11,18,32,.78);
font: 780 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cbk-soft__tag:hover{
transform: translateY(-2px);
border-color: rgba(59,130,246,.18);
box-shadow: 0 18px 44px rgba(17,24,39,.10);
}
.cbk-soft__quote{
margin: 0;
font: 800 14px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
color: rgba(17,24,39,.70);
letter-spacing: .01em;
padding-left: 14px;
position: relative;
}
.cbk-soft__quote::before{
content:"";
position:absolute;
left: 0;
top: 2px;
bottom: 2px;
width: 2px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(59,130,246,.30), rgba(16,185,129,.22), transparent);
opacity: .9;
}
/* Responsive */
@media (max-width: 980px){
.cbk-soft__layout{
grid-template-columns: 1fr;
}
.cbk-soft__right{
justify-items: start;
}
}
/* =========================
Session 3 · CooBook Orbit (corporate, minimal, elegant)
No JS
========================= */
.cbk-orbit{
width: 100%;
background: transparent;
--cbk-ink: #0b1220;
--cbk-muted: rgba(11,18,32,.72);
/* Corporate palette (CooBook-like): deep navy + cobalt + soft cyan */
--cbk-blue: #1e5eff;
--cbk-cyan: #10c2ff;
--cbk-indigo: #5a67ff;
--cbk-line: rgba(17,24,39,.10);
--cbk-glass: rgba(255,255,255,.56);
}
.cbk-orbit__wrap{
max-width: 1200px;
margin: 0 auto;
padding: clamp(62px, 6vw, 118px) clamp(16px, 3vw, 28px);
position: relative;
}
/* internal ambient that fades out (no visible section cut) */
.cbk-orbit__wrap::before{
content:"";
position:absolute;
inset: 8px 0;
border-radius: 44px;
background:
radial-gradient(560px 420px at 12% 18%, rgba(30,94,255,.12), transparent 62%),
radial-gradient(560px 420px at 88% 26%, rgba(16,194,255,.10), transparent 64%),
radial-gradient(720px 520px at 55% 86%, rgba(90,103,255,.08), transparent 66%);
pointer-events:none;
z-index: 0;
opacity: .95;
-webkit-mask-image: radial-gradient(115% 120% at 50% 50%, #000 56%, transparent 88%);
mask-image: radial-gradient(115% 120% at 50% 50%, #000 56%, transparent 88%);
}
/* faint grid, also faded */
.cbk-orbit__wrap::after{
content:"";
position:absolute;
inset: 0;
pointer-events:none;
z-index: 0;
opacity: .28;
background-image:
linear-gradient(to right, rgba(11,18,32,.06) 1px, transparent 1px),
linear-gradient(to bottom, rgba(11,18,32,.06) 1px, transparent 1px);
background-size: 78px 78px;
-webkit-mask-image: radial-gradient(520px 380px at 44% 34%, #000 44%, transparent 78%);
mask-image: radial-gradient(520px 380px at 44% 34%, #000 44%, transparent 78%);
}
/* Head */
.cbk-orbit__head{
position: relative;
z-index: 1;
max-width: 68ch;
}
.cbk-orbit__kicker{
margin: 0 0 12px 0;
font: 850 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(11,18,32,.55);
}
.cbk-orbit__title{
margin: 0 0 16px 0;
font: 950 clamp(32px, 3.5vw, 48px) / 1.06 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: -0.035em;
color: var(--cbk-ink);
}
.cbk-orbit__accent{
position: relative;
display: inline-block;
padding: 0 6px;
color: var(--cbk-ink);
}
.cbk-orbit__accent::before{
content:"";
position:absolute;
left: -6px; right: -6px;
bottom: .08em;
height: .52em;
border-radius: 999px;
background: linear-gradient(90deg, rgba(30,94,255,.22), rgba(16,194,255,.18));
transform: skewX(-10deg);
z-index: -1;
opacity: .9;
animation: cbkAccentBreath 3.2s ease-in-out infinite;
}
@keyframes cbkAccentBreath{
0%,100%{ opacity:.72; filter: blur(0); }
50%{ opacity:.98; filter: blur(.3px); }
}
.cbk-orbit__lead{
margin: 0;
font: 560 17px/1.62 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
color: var(--cbk-muted);
}
/* Stage */
.cbk-orbit__stage{
position: relative;
z-index: 1;
margin-top: clamp(36px, 5vw, 62px);
height: 360px;
}
/* Orbit halos */
.cbk-orbit__halo{
position:absolute;
left: 50%;
top: 52%;
width: 440px;
height: 440px;
border-radius: 999px;
transform: translate(-50%, -50%);
border: 1px solid rgba(11,18,32,.08);
opacity: .7;
}
.cbk-orbit__halo--1{
width: 460px; height: 460px;
background: radial-gradient(circle at 50% 50%, rgba(30,94,255,.10), transparent 62%);
animation: cbkHaloSpin 18s linear infinite;
}
.cbk-orbit__halo--2{
width: 560px; height: 560px;
background: radial-gradient(circle at 50% 50%, rgba(16,194,255,.08), transparent 64%);
animation: cbkHaloSpin 26s linear infinite reverse;
}
.cbk-orbit__halo--3{
width: 680px; height: 680px;
background: radial-gradient(circle at 50% 50%, rgba(90,103,255,.06), transparent 66%);
animation: cbkHaloSpin 34s linear infinite;
opacity: .55;
}
@keyframes cbkHaloSpin{
from{ transform: translate(-50%, -50%) rotate(0deg); }
to{ transform: translate(-50%, -50%) rotate(360deg); }
}
/* Core */
.cbk-orbit__core{
position: absolute;
left: 50%;
top: 52%;
transform: translate(-50%, -50%);
text-align: center;
padding: 18px 18px 16px;
border-radius: 28px;
background: var(--cbk-glass);
border: 1px solid rgba(11,18,32,.10);
backdrop-filter: blur(14px);
box-shadow: 0 30px 80px rgba(11,18,32,.12);
width: min(420px, 92%);
}
.cbk-orbit__coreBadge{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 12px;
border-radius: 999px;
border: 1px solid rgba(11,18,32,.10);
background: rgba(255,255,255,.60);
font: 900 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(11,18,32,.62);
}
.cbk-orbit__coreTitle{
margin: 10px 0 6px 0;
font: 950 20px/1.12 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: -0.02em;
color: var(--cbk-ink);
}
.cbk-orbit__coreMeta{
margin: 0;
font: 700 12px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: .10em;
text-transform: uppercase;
color: rgba(11,18,32,.55);
}
/* Satellites */
.cbk-orbit__sat{
position: absolute;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: 999px;
background: rgba(255,255,255,.55);
border: 1px solid rgba(11,18,32,.10);
backdrop-filter: blur(12px);
color: rgba(11,18,32,.80);
font: 800 13px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: .01em;
box-shadow: 0 18px 48px rgba(11,18,32,.10);
animation: cbkSatFloat 7.2s ease-in-out infinite;
}
.cbk-orbit__satDot{
width: 10px;
height: 10px;
border-radius: 999px;
background: linear-gradient(135deg, var(--cbk-blue), var(--cbk-cyan));
box-shadow: 0 0 0 8px rgba(30,94,255,.07);
}
/* Satellite positions */
.cbk-orbit__sat--a{ left: 10%; top: 18%; animation-delay: -1.2s; }
.cbk-orbit__sat--b{ right: 8%; top: 22%; animation-delay: -2.4s; }
.cbk-orbit__sat--c{ left: 12%; bottom: 18%; animation-delay: -3.2s; }
.cbk-orbit__sat--d{ right: 10%; bottom: 20%; animation-delay: -4.1s; }
.cbk-orbit__sat--e{ right: 30%; top: 70%; animation-delay: -5s; opacity: .92; }
@keyframes cbkSatFloat{
0%,100%{ transform: translateY(0); }
50%{ transform: translateY(-10px); }
}
/* Footer note */
.cbk-orbit__foot{
position: relative;
z-index: 1;
margin-top: 10px;
}
.cbk-orbit__note{
display: flex;
align-items: flex-start;
gap: 12px;
max-width: 72ch;
}
.cbk-orbit__noteBar{
width: 2px;
height: 44px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(30,94,255,.34), rgba(16,194,255,.24), transparent);
opacity: .95;
}
.cbk-orbit__noteText{
margin: 0;
font: 760 14px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
color: rgba(11,18,32,.68);
}
/* Responsive */
@media (max-width: 980px){
.cbk-orbit__stage{ height: 430px; }
.cbk-orbit__halo{ display: none; }
.cbk-orbit__sat--e{ right: 14%; top: 68%; }
}
@media (max-width: 720px){
.cbk-orbit__stage{
height: auto;
margin-top: 22px;
display: grid;
gap: 12px;
}
.cbk-orbit__core,
.cbk-orbit__sat{
position: relative;
left: auto; top: auto; right: auto; bottom: auto;
transform: none;
width: 100%;
justify-content: center;
text-align: center;
}
.cbk-orbit__sat{
animation: none;
}
.cbk-orbit__core{
margin: 8px 0 6px 0;
}
}
/* =========================
Session 4 · Featured Content (magazine, minimal, corporate)
No JS
========================= */
.cbk-featured{
width: 100%;
background: transparent;
--cbk-ink: #0b1220;
--cbk-muted: rgba(11,18,32,.72);
--cbk-blue: #1e5eff;
--cbk-cyan: #10c2ff;
--cbk-indigo: #5a67ff;
--cbk-line: rgba(11,18,32,.10);
--cbk-glass: rgba(255,255,255,.58);
}
.cbk-featured__wrap{
max-width: 1200px;
margin: 0 auto;
padding: clamp(60px, 6vw, 110px) clamp(16px, 3vw, 28px);
position: relative;
}
/* Internal ambient (faded, no section cut) */
.cbk-featured__wrap::before{
content:"";
position:absolute;
inset: 10px 0;
border-radius: 44px;
background:
radial-gradient(560px 420px at 16% 22%, rgba(30,94,255,.10), transparent 62%),
radial-gradient(560px 420px at 86% 24%, rgba(16,194,255,.08), transparent 64%),
radial-gradient(720px 520px at 55% 88%, rgba(90,103,255,.06), transparent 66%);
pointer-events:none;
z-index: 0;
opacity: .95;
-webkit-mask-image: radial-gradient(115% 120% at 50% 50%, #000 56%, transparent 88%);
mask-image: radial-gradient(115% 120% at 50% 50%, #000 56%, transparent 88%);
}
.cbk-featured__head{
position: relative;
z-index: 1;
max-width: 72ch;
}
.cbk-featured__kicker{
margin: 0 0 12px 0;
font: 850 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(11,18,32,.55);
}
.cbk-featured__title{
margin: 0 0 14px 0;
font: 950 clamp(30px, 3.2vw, 44px) / 1.06 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: -0.035em;
color: var(--cbk-ink);
}
.cbk-featured__accent{
position: relative;
display: inline-block;
padding: 0 6px;
}
.cbk-featured__accent::before{
content:"";
position:absolute;
left: -6px; right: -6px;
bottom: .08em;
height: .52em;
border-radius: 999px;
background: linear-gradient(90deg, rgba(30,94,255,.22), rgba(16,194,255,.18));
transform: skewX(-10deg);
z-index: -1;
opacity: .9;
animation: cbkFeaturedBreath 3.2s ease-in-out infinite;
}
@keyframes cbkFeaturedBreath{
0%,100%{ opacity:.72; filter: blur(0); }
50%{ opacity:.98; filter: blur(.3px); }
}
.cbk-featured__lead{
margin: 0;
font: 560 17px/1.62 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
color: var(--cbk-muted);
}
/* Rail */
.cbk-featured__rail{
position: relative;
z-index: 1;
margin-top: 26px;
height: 18px;
}
.cbk-featured__railLine{
position:absolute;
left: 0;
right: 0;
top: 50%;
height: 1px;
transform: translateY(-50%);
background: linear-gradient(90deg, transparent, rgba(11,18,32,.10), transparent);
opacity: .9;
}
.cbk-featured__railGlow{
position:absolute;
left: 10%;
right: 10%;
top: 50%;
height: 2px;
transform: translateY(-50%);
background: linear-gradient(90deg, transparent, rgba(30,94,255,.22), rgba(16,194,255,.16), transparent);
filter: blur(.2px);
opacity: .8;
}
/* List (no typical cards: “paper strips” with fading edges) */
.cbk-featured__list{
position: relative;
z-index: 1;
display: grid;
gap: 14px;
margin-top: 22px;
}
/* Each item looks like a floating editorial strip, not a box */
.cbk-featured__item{
position: relative;
padding: 16px 18px;
border-radius: 22px;
background: transparent;
overflow: visible;
isolation: isolate;
}
.cbk-featured__item::before{
content:"";
position:absolute;
inset: -10px;
border-radius: 26px;
background:
radial-gradient(140% 120% at 10% 30%, rgba(255,255,255,.90), rgba(255,255,255,.52)),
radial-gradient(120% 100% at 88% 78%, rgba(30,94,255,.08), transparent 62%);
border: 1px solid rgba(11,18,32,.08);
box-shadow: 0 18px 52px rgba(11,18,32,.08);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
z-index: -2;
/* Fade edges so it doesn't feel like a hard rectangle */
-webkit-mask-image: radial-gradient(120% 120% at 50% 50%, #000 64%, transparent 92%);
mask-image: radial-gradient(120% 120% at 50% 50%, #000 64%, transparent 92%);
}
/* subtle motion */
.cbk-featured__item{
transition: transform .20s ease, box-shadow .20s ease;
}
.cbk-featured__item:hover{
transform: translateY(-2px);
}
.cbk-featured__top{
display:flex;
align-items:center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.cbk-featured__tag{
display:inline-flex;
align-items:center;
padding: 8px 10px;
border-radius: 999px;
background: rgba(255,255,255,.56);
border: 1px solid rgba(11,18,32,.08);
font: 850 11px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(11,18,32,.62);
}
.cbk-featured__tag--alt{
background: rgba(255,255,255,.54);
border-color: rgba(30,94,255,.16);
}
.cbk-featured__tag--soft{
background: rgba(255,255,255,.54);
border-color: rgba(16,194,255,.16);
}
.cbk-featured__tag--health{
background: rgba(255,255,255,.54);
border-color: rgba(90,103,255,.16);
}
.cbk-featured__meta{
font: 800 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
color: rgba(11,18,32,.55);
}
.cbk-featured__h3{
margin: 0 0 8px 0;
font: 950 18px/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: -0.02em;
color: rgba(11,18,32,.92);
}
.cbk-featured__p{
margin: 0 0 12px 0;
font: 560 14px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
color: rgba(11,18,32,.72);
max-width: 80ch;
}
.cbk-featured__by{
display:flex;
align-items:center;
gap: 10px;
font: 850 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: .06em;
text-transform: uppercase;
color: rgba(11,18,32,.50);
}
.cbk-featured__dot{
width: 10px;
height: 10px;
border-radius: 999px;
background: linear-gradient(135deg, var(--cbk-blue), var(--cbk-cyan));
box-shadow: 0 0 0 10px rgba(30,94,255,.06);
}
/* Responsive */
@media (max-width: 720px){
.cbk-featured__top{
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.cbk-featured__item{
padding: 16px 16px;
}
}
/* =========================
Session · Single Pro Card (premium, corporate, minimal)
========================= */
.cbk-prosingle{
width: 100%;
background: transparent;
--cbk-ink: #0b1220;
--cbk-muted: rgba(11,18,32,.72);
--cbk-blue: #1e5eff;
--cbk-cyan: #10c2ff;
--cbk-indigo: #5a67ff;
}
.cbk-prosingle__wrap{
max-width: 1200px;
margin: 0 auto;
padding: clamp(64px, 6vw, 120px) clamp(16px, 3vw, 28px);
position: relative;
}
/* soft ambient (faded, no cut) */
.cbk-prosingle__wrap::before{
content:"";
position:absolute;
inset: 10px 0;
border-radius: 44px;
background:
radial-gradient(560px 420px at 16% 20%, rgba(30,94,255,.10), transparent 62%),
radial-gradient(560px 420px at 86% 24%, rgba(16,194,255,.08), transparent 64%),
radial-gradient(720px 520px at 52% 90%, rgba(90,103,255,.06), transparent 66%);
opacity: .95;
pointer-events:none;
z-index: 0;
-webkit-mask-image: radial-gradient(115% 120% at 50% 50%, #000 56%, transparent 88%);
mask-image: radial-gradient(115% 120% at 50% 50%, #000 56%, transparent 88%);
}
/* Head */
.cbk-prosingle__head{
position: relative;
z-index: 1;
max-width: 72ch;
}
.cbk-prosingle__kicker{
margin: 0 0 12px 0;
font: 850 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(11,18,32,.55);
}
.cbk-prosingle__title{
margin: 0 0 14px 0;
font: 950 clamp(30px, 3.2vw, 44px)/1.06 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: -0.035em;
color: var(--cbk-ink);
}
.cbk-prosingle__accent{
position: relative;
display: inline-block;
padding: 0 6px;
}
.cbk-prosingle__accent::before{
content:"";
position:absolute;
left:-6px; right:-6px;
bottom:.08em;
height:.52em;
border-radius:999px;
background: linear-gradient(90deg, rgba(30,94,255,.22), rgba(16,194,255,.18));
transform: skewX(-10deg);
z-index:-1;
opacity:.9;
animation: cbkProSingleAccent 3.2s ease-in-out infinite;
}
@keyframes cbkProSingleAccent{
0%,100%{ opacity:.72; filter: blur(0); }
50%{ opacity:.98; filter: blur(.3px); }
}
.cbk-prosingle__lead{
margin: 0;
font: 560 17px/1.62 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
color: var(--cbk-muted);
}
/* Card */
.cbk-prosingle__card{
position: relative;
z-index: 1;
margin-top: clamp(26px, 4vw, 40px);
padding: 20px 20px 18px;
border-radius: 28px;
background: transparent;
isolation: isolate;
max-width: 760px;
}
.cbk-prosingle__cardBg{
position:absolute;
inset:-12px;
border-radius: 34px;
background:
radial-gradient(140% 120% at 12% 22%, rgba(255,255,255,.92), rgba(255,255,255,.52)),
radial-gradient(120% 100% at 88% 78%, rgba(30,94,255,.10), transparent 62%);
border: 1px solid rgba(11,18,32,.08);
box-shadow: 0 26px 80px rgba(11,18,32,.12);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
z-index: -2;
-webkit-mask-image: radial-gradient(120% 120% at 50% 50%, #000 66%, transparent 92%);
mask-image: radial-gradient(120% 120% at 50% 50%, #000 66%, transparent 92%);
}
.cbk-prosingle__card::after{
content:"";
position:absolute;
inset:-26px;
border-radius: 48px;
background: linear-gradient(135deg, rgba(30,94,255,.18), rgba(16,194,255,.14), transparent);
filter: blur(20px);
opacity: .45;
z-index: -3;
animation: cbkProSingleRim 4.8s ease-in-out infinite;
}
@keyframes cbkProSingleRim{
0%,100%{ opacity:.36; transform: translateY(0); }
50%{ opacity:.62; transform: translateY(-3px); }
}
/* Top layout */
.cbk-prosingle__top{
display:flex;
gap: 16px;
align-items:center;
}
.cbk-prosingle__top .cbk-holoFrame {
width: min(80px, 100%);
}
.cbk-prosingle__top .cbk-holoImage {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center top;
max-height: none;
}
.cbk-prosingle__avatar{
position: relative;
width: 76px;
height: 76px;
border-radius: 999px;
overflow: hidden;
flex: 0 0 auto;
}
.cbk-prosingle__avatar img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: contrast(1.03) saturate(1.03);
}
/* Animated rings */
.cbk-prosingle__ring{
position: absolute;
inset: -12px;
border-radius: 999px;
border: 1px solid rgba(30,94,255,.20);
animation: cbkProSingleRing 3.8s ease-in-out infinite;
pointer-events:none;
}
.cbk-prosingle__ring--b{
inset: -20px;
border-color: rgba(16,194,255,.16);
animation-delay: -1.9s;
opacity: .75;
}
@keyframes cbkProSingleRing{
0%,100%{ transform: scale(.985); opacity: .60; }
50%{ transform: scale(1.02); opacity: .92; }
}
.cbk-prosingle__id{
min-width: 0;
}
.cbk-prosingle__name{
margin: 0 0 6px 0;
font: 950 16px/1.1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
color: rgba(11,18,32,.92);
letter-spacing: -0.01em;
}
.cbk-prosingle__role{
margin: 0 0 10px 0;
font: 750 12px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
color: rgba(11,18,32,.62);
}
/* Pills */
.cbk-prosingle__meta{
display:flex;
flex-wrap: wrap;
gap: 10px;
}
.cbk-prosingle__pill{
display:inline-flex;
padding: 9px 11px;
border-radius: 999px;
background: rgba(255,255,255,.55);
border: 1px solid rgba(11,18,32,.08);
font: 850 11px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(11,18,32,.60);
}
.cbk-prosingle__pill--alt{
border-color: rgba(30,94,255,.18);
}
.cbk-prosingle__pill--soft{
border-color: rgba(16,194,255,.18);
}
/* Middle */
.cbk-prosingle__mid{
margin-top: 14px;
}
.cbk-prosingle__desc{
margin: 0 0 14px 0;
font: 600 14px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
color: rgba(11,18,32,.74);
max-width: 74ch;
}
/* Signature detail */
.cbk-prosingle__signature{
display:flex;
align-items:center;
gap: 10px;
opacity: .8;
}
.cbk-prosingle__sigLine{
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(30,94,255,.30), rgba(16,194,255,.18), transparent);
}
.cbk-prosingle__sigMark{
font: 900 11px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(11,18,32,.55);
}
/* Footer */
.cbk-prosingle__foot{
margin-top: 14px;
display:flex;
align-items:center;
gap: 10px;
}
.cbk-prosingle__stamp{
width: 14px;
height: 14px;
border-radius: 4px;
background: linear-gradient(135deg, rgba(30,94,255,.92), rgba(16,194,255,.85));
box-shadow: 0 0 0 10px rgba(30,94,255,.06);
}
.cbk-prosingle__footText{
margin: 0;
font: 850 11px/1.35 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: .10em;
text-transform: uppercase;
color: rgba(11,18,32,.52);
}
/* Responsive */
@media (max-width: 720px){
.cbk-prosingle__top{
align-items:flex-start;
}
.cbk-prosingle__avatar{
width: 68px;
height: 68px;
}
.cbk-prosingle__top .cbk-holoFrame {
width: min(50px, 100%);
}
.cbk-prosingle__top .cbk-holoImage {
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center top;
}
}
/* =========================
Session · Join (soft CTA, premium, corporate)
No JS
========================= */
.cbk-join{
width: 100%;
background: transparent;
--cbk-ink: #0b1220;
--cbk-muted: rgba(11,18,32,.72);
--cbk-blue: #1e5eff;
--cbk-cyan: #10c2ff;
--cbk-indigo: #5a67ff;
--cbk-glass: rgba(255,255,255,.58);
--cbk-line: rgba(11,18,32,.10);
}
.cbk-join__wrap{
max-width: 1200px;
margin: 0 auto;
padding: clamp(64px, 6vw, 120px) clamp(16px, 3vw, 28px);
position: relative;
}
/* Internal ambient (faded, no visible cut) */
.cbk-join__wrap::before{
content:"";
position:absolute;
inset: 10px 0;
border-radius: 44px;
background:
radial-gradient(560px 420px at 14% 20%, rgba(30,94,255,.10), transparent 62%),
radial-gradient(560px 420px at 86% 24%, rgba(16,194,255,.08), transparent 64%),
radial-gradient(720px 520px at 52% 90%, rgba(90,103,255,.06), transparent 66%);
opacity: .95;
pointer-events:none;
z-index: 0;
-webkit-mask-image: radial-gradient(115% 120% at 50% 50%, #000 56%, transparent 88%);
mask-image: radial-gradient(115% 120% at 50% 50%, #000 56%, transparent 88%);
}
/* Head */
.cbk-join__head{
position: relative;
z-index: 1;
max-width: 76ch;
}
.cbk-join__kicker{
margin: 0 0 12px 0;
font: 850 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(11,18,32,.55);
}
.cbk-join__title{
margin: 0 0 14px 0;
font: 950 clamp(30px, 3.2vw, 44px)/1.06 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: -0.035em;
color: var(--cbk-ink);
}
.cbk-join__accent{
position: relative;
display: inline-block;
padding: 0 6px;
}
.cbk-join__accent::before{
content:"";
position:absolute;
left:-6px; right:-6px;
bottom:.08em;
height:.52em;
border-radius:999px;
background: linear-gradient(90deg, rgba(30,94,255,.22), rgba(16,194,255,.18));
transform: skewX(-10deg);
z-index:-1;
opacity:.9;
animation: cbkJoinAccent 3.2s ease-in-out infinite;
}
@keyframes cbkJoinAccent{
0%,100%{ opacity:.72; filter: blur(0); }
50%{ opacity:.98; filter: blur(.3px); }
}
.cbk-join__lead{
margin: 0;
font: 560 17px/1.62 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
color: var(--cbk-muted);
}
/* Paths */
.cbk-join__paths{
position: relative;
z-index: 1;
margin-top: clamp(26px, 4vw, 40px);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
/* Path card: not a hard card (edge-faded glass island) */
.cbk-path{
position: relative;
padding: 18px 18px 16px;
border-radius: 26px;
background: transparent;
isolation: isolate;
transition: transform .22s ease;
}
.cbk-path::before{
content:"";
position:absolute;
inset:-10px;
border-radius: 30px;
background:
radial-gradient(140% 120% at 12% 22%, rgba(255,255,255,.92), rgba(255,255,255,.52)),
radial-gradient(120% 100% at 88% 78%, rgba(30,94,255,.10), transparent 62%);
border: 1px solid rgba(11,18,32,.08);
box-shadow: 0 22px 70px rgba(11,18,32,.10);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
z-index: -2;
-webkit-mask-image: radial-gradient(120% 120% at 50% 50%, #000 66%, transparent 92%);
mask-image: radial-gradient(120% 120% at 50% 50%, #000 66%, transparent 92%);
}
.cbk-path::after{
content:"";
position:absolute;
inset:-26px;
border-radius: 44px;
background: linear-gradient(135deg, rgba(30,94,255,.18), rgba(16,194,255,.14), transparent);
filter: blur(20px);
opacity: .40;
z-index: -3;
}
.cbk-path:hover{
transform: translateY(-3px);
}
/* Top */
.cbk-path__top{
display:flex;
align-items:flex-start;
gap: 12px;
margin-bottom: 10px;
}
.cbk-path__mark{
width: 12px;
height: 12px;
border-radius: 999px;
margin-top: 6px;
background: linear-gradient(135deg, var(--cbk-blue), var(--cbk-cyan));
box-shadow: 0 0 0 10px rgba(30,94,255,.06);
flex: 0 0 auto;
animation: cbkMarkPulse 2.8s ease-in-out infinite;
}
@keyframes cbkMarkPulse{
0%,100%{ transform: scale(.98); opacity:.72; }
50%{ transform: scale(1.06); opacity:.98; }
}
.cbk-path__mark--write{
background: linear-gradient(135deg, var(--cbk-indigo), var(--cbk-blue));
box-shadow: 0 0 0 10px rgba(90,103,255,.06);
animation-delay: -1s;
}
.cbk-path__mark--follow{
background: linear-gradient(135deg, var(--cbk-cyan), var(--cbk-blue));
box-shadow: 0 0 0 10px rgba(16,194,255,.06);
animation-delay: -2s;
}
.cbk-path__h3{
margin: 0 0 6px 0;
font: 950 16px/1.2 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: -0.02em;
color: rgba(11,18,32,.92);
}
.cbk-path__sub{
margin: 0;
font: 720 12px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
color: rgba(11,18,32,.62);
}
/* Body text */
.cbk-path__text{
margin: 0 0 14px 0;
font: 600 14px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
color: rgba(11,18,32,.72);
}
/* Hint line */
.cbk-path__hint{
display:flex;
align-items:center;
gap: 10px;
opacity: .85;
}
.cbk-path__line{
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(30,94,255,.32), rgba(16,194,255,.18), transparent);
}
.cbk-path__hintText{
font: 900 11px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(11,18,32,.55);
}
/* Footer note */
.cbk-join__foot{
position: relative;
z-index: 1;
margin-top: 18px;
}
.cbk-join__note{
display:flex;
align-items:flex-start;
gap: 12px;
max-width: 78ch;
}
.cbk-join__noteBar{
width: 2px;
height: 44px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(30,94,255,.34), rgba(16,194,255,.24), transparent);
opacity: .95;
}
.cbk-join__noteText{
margin: 0;
font: 760 14px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
color: rgba(11,18,32,.68);
}
/* Responsive */
@media (max-width: 980px){
.cbk-join__paths{
grid-template-columns: 1fr;
}
}
/* =========================
Final Session · Centered Access
========================= */
.cbk-final-center{
width: 100%;
background: #ffffff;
position: relative;
overflow: hidden;
}
.cbk-final-center::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #1b66ff, #7c3aed);
}
.cbk-final-center::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 30%, rgba(27, 102, 255, 0.05) 0%, transparent 50%),
radial-gradient(circle at 70% 70%, rgba(124, 58, 237, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.cbk-final-center{
width: 100%;
background: transparent;
--ink: #0e1222;
--muted: #5a6474;
--blue: #1e5eff;
--cyan: #00d4ff;
--purple: #7c3aed;
}
.cbk-final-center__wrap{
position: relative;
min-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(80px, 10vw, 160px) 16px;
overflow: hidden;
}
/* Animated background */
.cbk-final-center__bg{
position: absolute;
inset: 0;
background:
radial-gradient(600px 400px at 50% 35%, rgba(30,94,255,.18), transparent 60%),
radial-gradient(500px 360px at 50% 65%, rgba(16,194,255,.12), transparent 62%);
filter: blur(20px);
animation: cbkBgFloat 10s ease-in-out infinite;
}
@keyframes cbkBgFloat{
0%,100%{ transform: translateY(0); }
50%{ transform: translateY(-24px); }
}
/* Content */
.cbk-final-center__content{
position: relative;
z-index: 1;
max-width: 60ch;
text-align: center;
animation: cbkFadeUp .9s ease both;
}
@keyframes cbkFadeUp{
from{
opacity: 0;
transform: translateY(16px);
}
to{
opacity: 1;
transform: translateY(0);
}
}
/* Eyebrow */
.cbk-final-center__eyebrow{
display: inline-block;
margin-bottom: 18px;
font: 900 11px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: .22em;
text-transform: uppercase;
color: #7c3aed;
}
/* Title */
.cbk-final-center__title{
margin: 0 0 22px 0;
font: 950 clamp(42px, 5vw, 64px)/1.02
ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: -0.045em;
color: var(--ink);
}
.cbk-final-center__title span{
position: relative;
}
.cbk-final-center__title span::after{
content: "";
position: absolute;
left: 0;
bottom: -.1em;
width: 100%;
height: .2em;
background: linear-gradient(90deg, var(--blue), var(--purple));
animation: cbkUnderline 2.8s ease-in-out infinite;
}
@keyframes cbkUnderline{
0%,100%{ opacity: .6; }
50%{ opacity: 1; }
}
/* Text */
.cbk-final-center__text{
margin: 0 0 38px 0;
font: 520 18px/1.7 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
color: var(--muted);
}
/* CTA */
.cbk-final-center__cta{
display: inline-block;
padding: 18px 36px;
border-radius: 999px;
background: linear-gradient(135deg, #1b66ff, #7c3aed);
color: #fff;
text-decoration: none;
font: 900 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
letter-spacing: .18em;
text-transform: uppercase;
transition: transform .25s ease, box-shadow .25s ease;
}
.cbk-final-center__cta:hover{
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(27, 102, 255, 0.35);
}
/* Responsive */
@media (max-width: 720px){
.cbk-final-center__text{
font-size: 16px;
}
}
:root{
--cb-blue: #0a4bb8;
--cb-blue-soft: rgba(10,75,184,0.15);
--cb-blue-glow: rgba(10,75,184,0.25);
}
.cb-sponsor-zone{
width: 100%;
display: flex;
justify-content: flex-start;
padding: 70px 5%;
box-sizing: border-box;
}
/* Tarjeta */
.cb-sponsor-premium{
width: min(520px, 100%);
position: relative;
border-radius: 26px;
padding: 26px;
overflow: hidden;
background: linear-gradient(
180deg,
rgba(255,255,255,0.95),
rgba(245,248,255,0.9)
);
box-shadow:
0 26px 70px rgba(10,75,184,0.18),
inset 0 0 0 1px rgba(10,75,184,0.12);
transition: transform .35s ease, box-shadow .35s ease;
}
.cb-sponsor-premium:hover{
transform: translateY(-6px);
box-shadow:
0 34px 90px rgba(10,75,184,0.26),
inset 0 0 0 1px rgba(10,75,184,0.16);
}
/* Borde elegante animado */
.cb-sponsor-premium::before{
content:"";
position:absolute;
inset:0;
padding:1px;
border-radius:26px;
background: linear-gradient(
120deg,
transparent,
var(--cb-blue),
transparent
);
opacity:.45;
mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
mask-composite: exclude;
-webkit-mask-composite: xor;
pointer-events:none;
}
/* Título Patrocinador */
.cb-sponsor-top{
margin-bottom: 18px;
}
.cb-sponsor-tag{
font-size: 0.8rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 600;
color: var(--cb-blue);
position: relative;
padding-left: 18px;
}
/* Detalle visual azul */
.cb-sponsor-tag::before{
content:"";
position:absolute;
left:0;
top:50%;
width:10px;
height:10px;
background: var(--cb-blue);
border-radius:50%;
transform: translateY(-50%);
box-shadow: 0 0 12px var(--cb-blue-glow);
}
/* Contenido */
.cb-sponsor-main{
display:flex;
align-items:center;
gap:18px;
}
.cb-sponsor-logo{
width:74px;
height:74px;
border-radius:18px;
background:#ffffff;
display:grid;
place-items:center;
box-shadow:
0 16px 34px rgba(10,75,184,0.25),
inset 0 0 0 1px var(--cb-blue-soft);
flex-shrink:0;
position:relative;
}
.cb-sponsor-logo::after{
content:"";
position:absolute;
inset:-35%;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), transparent 60%);
opacity:.5;
}
.cb-sponsor-logo img{
max-width:78%;
max-height:78%;
object-fit:contain;
position:relative;
z-index:1;
}
.cb-sponsor-name{
font-size:1.18rem;
font-weight:650;
color:#0b1b33;
line-height:1.2;
}
.cb-sponsor-slogan{
font-size:0.95rem;
color:#445066;
line-height:1.55;
}
/* Glow animado azul */
.cb-sponsor-glow{
position:absolute;
width:260px;
height:260px;
border-radius:50%;
right:-120px;
top:-140px;
background: radial-gradient(circle, var(--cb-blue-glow), transparent 65%);
animation: cbGlowFloat 6s ease-in-out infinite;
pointer-events:none;
}
/* Shine */
.cb-sponsor-shine{
position:absolute;
inset:0;
border-radius:26px;
background: linear-gradient(
115deg,
transparent 0%,
rgba(255,255,255,0.0) 40%,
rgba(255,255,255,0.45) 50%,
rgba(255,255,255,0.0) 60%,
transparent 100%
);
transform: translateX(-120%) skewX(-16deg);
animation: cbShineSweep 6s ease-in-out infinite;
pointer-events:none;
}
@keyframes cbShineSweep{
0% { transform: translateX(-140%) skewX(-16deg); opacity:0; }
20% { opacity:.6; }
45% { transform: translateX(120%) skewX(-16deg); opacity:.45; }
60% { opacity:0; }
100% { opacity:0; }
}
@keyframes cbGlowFloat{
0%,100%{ transform: translate(0,0) scale(1); }
50%{ transform: translate(-14px,18px) scale(1.04); }
}
/* Responsive */
@media (max-width:768px){
.cb-sponsor-zone{ padding:46px 6%; }
.cb-sponsor-premium{ width:100%; }
}
@media (max-width:520px){
.cb-sponsor-main{
flex-direction:column;
align-items:flex-start;
}
}
_________________
/* ===================== BIBLIOTECA - BLOQUE 1 ===================== */
.cb-bib-block {
width: 100%;
padding: 40px 5%;
box-sizing: border-box;
}
.cb-bib-card {
max-width: 1100px;
border-radius: 28px;
background: linear-gradient(180deg, #ffffff, #f6f9ff);
box-shadow:
0 26px 80px rgba(10, 75, 184, 0.16),
inset 0 0 0 1px rgba(10, 75, 184, 0.12);
overflow: hidden;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.cb-bib-card:hover {
transform: translateY(-4px);
box-shadow:
0 34px 95px rgba(10, 75, 184, 0.22),
inset 0 0 0 1px rgba(10, 75, 184, 0.16);
}
/* ---------- HEADER ---------- */
.cb-bib-header {
list-style: none;
cursor: pointer;
padding: 28px;
display: flex;
align-items: center;
justify-content: space-between;
}
.cb-bib-header::-webkit-details-marker {
display: none;
}
.cb-bib-header-left {
display: flex;
align-items: center;
gap: 26px;
}
/* Icono 120px */
.cb-bib-icon {
width: 120px;
height: 120px;
object-fit: contain;
flex-shrink: 0;
}
/* TÍTULO AJUSTADO */
.cb-bib-title {
margin: 0;
font-size: 1.8rem; /* más grande */
font-weight: 700;
letter-spacing: -0.01em;
color: #0a4bb8; /* azul corporativo */
}
/* Flecha */
.cb-bib-arrow {
width: 14px;
height: 14px;
border-right: 2px solid #0a4bb8;
border-bottom: 2px solid #0a4bb8;
transform: rotate(45deg);
transition: transform 0.25s ease;
}
.cb-bib-card[open] .cb-bib-arrow {
transform: rotate(-135deg);
}
/* ---------- CONTENT ---------- */
.cb-bib-content {
padding: 0 28px 28px;
animation: cbBibFade 0.35s ease both;
}
@keyframes cbBibFade {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Descripción */
.cb-bib-desc {
margin: 0 0 22px;
max-width: 700px;
font-size: 1rem;
line-height: 1.65;
color: #5a6b85;
}
/* Lista de ramas */
.cb-bib-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 14px;
}
.cb-bib-list a {
display: block;
padding: 16px 18px;
border-radius: 16px;
background: #ffffff;
text-decoration: none;
color: #0b1b33;
box-shadow: inset 0 0 0 1px rgba(10, 75, 184, 0.12);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cb-bib-list a:hover {
transform: translateY(-2px);
box-shadow:
0 16px 30px rgba(10, 75, 184, 0.12),
inset 0 0 0 1px rgba(10, 75, 184, 0.18);
}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
.cb-bib-header-left {
flex-direction: column;
align-items: flex-start;
}
.cb-bib-icon {
width: 90px;
height: 90px;
}
.cb-bib-title {
font-size: 1.55rem;
}
}
@media (max-width: 480px) {
.cb-bib-icon {
width: 72px;
height: 72px;
}
.cb-bib-title {
font-size: 1.35rem;
}
.cb-bib-desc {
font-size: 0.95rem;
}
}
_______________
/* =========================
Banner superior subcategoría
- 95% ancho, centrado
- Imagen sin texto incrustado
- Título (traducible) encima a la derecha
- Panel tipo glass reforzado para máxima legibilidad
========================= */
.cbk-banner-wrap{
width: min(99%, 1800px);
margin: 0 auto;
}
.cbk-banner{
position: relative;
width: 99%;
border-radius: 18px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 18px 40px rgba(0,0,0,.08);
/* Proporción estable */
aspect-ratio: 16 / 5;
/* Fallback */
min-height: 190px;
}
/* Imagen responsive: no deforma, recorta con criterio */
.cbk-banner__img{
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
/* Overlay general sutil para homogeneizar el fondo y ayudar al texto */
.cbk-banner::after{
content:"";
position:absolute;
inset:0;
background: linear-gradient(90deg,
rgba(0,0,0,.03) 0%,
rgba(0,0,0,.12) 55%,
rgba(0,0,0,.34) 100%);
pointer-events:none;
}
/* Capa de contenido (texto) */
.cbk-banner__overlay{
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: flex-end;
padding: clamp(14px, 2.6vw, 34px);
}
/* Título: escalable + legible + multilenguaje */
.cbk-banner__title{
position: relative;
margin: 0;
max-width: min(62%, 720px);
text-align: right;
font-weight: 800;
letter-spacing: .3px;
line-height: 1.05;
font-size: clamp(22px, 3.4vw, 60px);
color: #ffffff;
text-shadow:
0 2px 6px rgba(0,0,0,.55),
0 10px 24px rgba(0,0,0,.45);
overflow-wrap: anywhere;
/* Animación suave */
animation: cbkTitleFloat 4.8s ease-in-out infinite;
will-change: transform;
}
/* Panel “glass” reforzado detrás del texto */
.cbk-banner__title::before{
content:"";
position:absolute;
inset: -18px -24px -18px -24px;
border-radius: 999px;
background: rgba(255,255,255,.18);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,.38);
box-shadow:
0 22px 46px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.35);
z-index: -1;
}
/* Halo interno suave para “separar” aún más del fondo */
.cbk-banner__title::after{
content:"";
position:absolute;
inset: -18px -24px -18px -24px;
border-radius: 999px;
background:
radial-gradient(circle at 30% 25%,
rgba(255,255,255,.35),
rgba(255,255,255,0) 65%);
z-index: -1;
pointer-events:none;
}
/* Animación: flotación mínima y elegante */
@keyframes cbkTitleFloat{
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-4px) scale(1.01); }
}
/* Accesibilidad: si el usuario reduce movimiento */
@media (prefers-reduced-motion: reduce){
.cbk-banner__title{ animation: none; }
}
/* =========================
MÓVIL: expandir banner (más alto)
========================= */
@media (max-width: 640px){
.cbk-banner-wrap{
width: 94%;
}
.cbk-banner{
border-radius: 16px;
/* Más alto en móvil */
aspect-ratio: 16 / 8; /* antes 16/7 */
min-height: 240px; /* antes 200px */
}
.cbk-banner__overlay{
padding: 16px;
}
.cbk-banner__title{
max-width: 90%;
font-size: clamp(20px, 6.8vw, 36px);
}
.cbk-banner__title::before,
.cbk-banner__title::after{
inset: -14px -18px -14px -18px;
}
}
/* =========================
TABLET: ajuste suave
========================= */
@media (min-width: 641px) and (max-width: 1024px){
.cbk-banner{
aspect-ratio: 16 / 6;
}
.cbk-banner__title{
max-width: 72%;
}
}
/* =========================superposicion
/* Sección superior */
.section-a{
position: relative;
z-index: 1;
}
/* Sección que pisa a la anterior */
.overlap-top{
position: relative;
z-index: 2;
/* AQUÍ controlas cuánto se pisan */
margin-top: -40px; /* ajusta píxeles a tu gusto */
/* Opcional: para que se vea intencional y elegante */
padding-top: -40px;
}
.cbk-space-after-banner{
height: 26px; /* separación real */
}
@media (max-width: 640px){
.cbk-space-after-banner{
height: 18px;
}
}
________________
/* CONTENEDOR: alineado a la izquierda */
.cbk-sponsor-mini{
width:40%;
max-width:450px;
margin:34px 0 38px; /* izquierda */
padding:0 32px;
box-sizing:border-box;
position:relative;
}
/* Checkbox invisible */
.cbk-sponsor-mini__check{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip:rect(0 0 0 0);
clip-path: inset(40%);
white-space:nowrap;
}
/* BARRA COMPACTA */
.cbk-sponsor-mini__bar{
width:40%;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:12px 14px;
border-radius:16px;
background:rgba(255,255,255,.88);
border:1px solid rgba(0,0,0,.10);
box-shadow:
0 16px 44px rgba(0,0,0,.06),
0 2px 10px rgba(0,0,0,.04);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
/* TEXTO: no se corta en móvil */
.cbk-sponsor-mini__text{
flex:1 1 auto;
min-width:0;
font-size:14px;
font-weight:780;
letter-spacing:.12px;
color:rgba(0,0,0,.92);
white-space:normal;
line-height:1.25;
}
/* FLECHA */
.cbk-sponsor-mini__toggle{
flex:0 0 auto;
width:40px;
height:40px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(0,0,0,.10);
background:rgba(0,0,0,.015);
color:rgba(0,0,0,.78);
font-size:18px;
cursor:pointer;
user-select:none;
transition:
transform .15s ease,
background .15s ease,
border-color .15s ease,
box-shadow .15s ease;
}
.cbk-sponsor-mini__toggle:hover{
transform:translateY(-1px);
background:rgba(0,0,0,.02);
border-color:rgba(0,0,0,.14);
box-shadow:0 14px 34px rgba(0,0,0,.10);
}
/* OVERLAY */
.cbk-sponsor-mini__overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.22);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
opacity:0;
pointer-events:none;
transition:opacity .2s ease;
z-index:9998;
}
/* PANEL DERECHO */
.cbk-sponsor-mini__panel{
position:fixed;
top:0;
right:0;
height:100dvh;
width:min(420px, 92vw);
background:rgba(255,255,255,.92);
border-left:1px solid rgba(0,0,0,.10);
box-shadow:-30px 0 80px rgba(0,0,0,.18);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
transform:translateX(104%);
transition:transform .22s ease;
padding:14px 16px 18px;
box-sizing:border-box;
z-index:9999;
}
/* ESTADO ABIERTO */
.cbk-sponsor-mini__check:checked ~ .cbk-sponsor-mini__overlay{
opacity:1;
pointer-events:auto;
}
.cbk-sponsor-mini__check:checked ~ .cbk-sponsor-mini__panel{
transform:translateX(0%);
}
/* CABECERA PANEL */
.cbk-sponsor-mini__panel-head{
display:flex;
align-items:center;
justify-content:space-between;
padding-bottom:12px;
margin-bottom:12px;
border-bottom:1px solid rgba(0,0,0,.08);
}
.cbk-sponsor-mini__panel-title{
font-size:14px;
font-weight:420;
letter-spacing:.12px;
color:rgba(0,0,0,.92);
}
.cbk-sponsor-mini__close{
width:36px;
height:36px;
border-radius:14px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(0,0,0,.10);
background:rgba(0,0,0,.015);
color:rgba(0,0,0,.78);
font-size:20px;
cursor:pointer;
}
/* TEXTO PANEL */
.cbk-sponsor-mini__desc{
margin:0 0 14px;
font-size:13px;
line-height:1.35;
letter-spacing:.06px;
color:rgba(0,0,0,.64);
}
/* CTA */
.cbk-sponsor-mini__cta{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:10px 12px;
border-radius:14px;
text-decoration:none;
font-size:12.8px;
font-weight:780;
color:rgba(0,0,0,.90);
border:1px solid rgba(0,0,0,.10);
background:rgba(0,0,0,.015);
}
.cbk-sponsor-mini__cta:hover{
background:rgba(0,0,0,.02);
border-color:rgba(0,0,0,.14);
}
/* MÓVIL */
@media (max-width:700px){
.cbk-sponsor-mini{
padding:0 10px;
}
.cbk-sponsor-mini__bar{
padding:10px 12px;
}
.cbk-sponsor-mini__text{
font-size:13.2px;
}
}
____________________________
/* Contenedor de subtemas */
.cbk-subtopics{
width: min(95%, 1200px);
margin: 40px auto 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
}
/* Caja individual */
.cbk-subtopic-card{
display: flex;
align-items: center;
justify-content: center;
padding: 26px 20px;
min-height: 80px;
background: #ffffff;
border-radius: 16px;
font-size: 18px;
font-weight: 500;
letter-spacing: .2px;
color: #1f2a37;
text-align: center;
text-decoration: none;
box-shadow:
0 8px 22px rgba(0,0,0,.06),
inset 0 1px 0 rgba(255,255,255,.6);
transition:
transform .25s ease,
box-shadow .25s ease,
background .25s ease,
color .25s ease;
}
/* Hover elegante (no agresivo) */
.cbk-subtopic-card:hover{
transform: translateY(-4px);
background: #f8fafc;
color: #0f172a;
box-shadow:
0 14px 34px rgba(0,0,0,.12),
inset 0 1px 0 rgba(255,255,255,.7);
}
/* Active (feedback táctil) */
.cbk-subtopic-card:active{
transform: translateY(-1px);
}
/* Móvil */
@media (max-width: 640px){
.cbk-subtopics{
margin-top: 28px;
gap: 16px;
}
.cbk-subtopic-card{
font-size: 16px;
min-height: 72px;
padding: 22px 16px;
}
}
___________________________________________-
/* CSS DE TITULO TAMBIEN TE PUEDE INTERESAR */
.cbk-related-title{
width: min(95%, 1200px);
margin: 48px auto 24px;
font-size: clamp(20px, 2.4vw, 28px);
font-weight: 600;
letter-spacing: .2px;
color: #1f2a37;
}
___________________________________________-
/* Quitar contador de visitas Joomla */
.article-info .hits,
.article-info-term,
.article-info dd.hits,
.article-info__hits {
display: none !important;
}
___________________________________________-
/* =========================================================
CooBook – RSForm Sponsor – Premium Island (COMPAT)
Scope: .cb-sponsor-form
========================================================= */
/* Contenedor isla */
.cb-sponsor-form{
width: min(980px, calc(100% - 36px));
margin: 0 auto;
padding: clamp(20px, 3vw, 34px);
border-radius: 22px;
border: 1px solid rgba(10,20,35,.12);
background:
radial-gradient(1100px 520px at 10% 0%, rgba(66,99,235,.10), transparent 55%),
radial-gradient(900px 520px at 100% 18%, rgba(11,163,255,.10), transparent 55%),
linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.92));
box-shadow: 0 24px 70px rgba(10,20,35,.10), 0 2px 0 rgba(10,20,35,.04);
}
/* Form reset */
.cb-sponsor-form form{
margin: 0 !important;
}
/* RSForm suele renderizar en tabla */
.cb-sponsor-form table,
.cb-sponsor-form .rsformTable{
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 14px !important; /* espacio vertical entre filas */
}
/* Cada fila */
.cb-sponsor-form tr{
background: transparent !important;
}
/* Celdas: label izquierda / input derecha */
.cb-sponsor-form td{
vertical-align: middle !important;
padding: 0 !important;
}
/* Columna label */
.cb-sponsor-form td:first-child{
width: 320px !important;
padding-right: 18px !important;
}
/* Label */
.cb-sponsor-form label,
.cb-sponsor-form .rsform-block label{
display: inline-block;
margin: 0 !important;
color: rgba(10,20,35,.86) !important;
font-weight: 780 !important;
letter-spacing: -0.01em !important;
font-size: 13.5px !important;
line-height: 1.25 !important;
}
/* Asterisco requerido: discreto */
.cb-sponsor-form .formRequired,
.cb-sponsor-form .rsform-required,
.cb-sponsor-form label .required,
.cb-sponsor-form span[style*="color:red"],
.cb-sponsor-form span[style*="color: red"]{
color: rgba(10,20,35,.38) !important;
font-weight: 700 !important;
}
/* Inputs / selects / textarea (RSForm + genérico) */
.cb-sponsor-form input[type="text"],
.cb-sponsor-form input[type="email"],
.cb-sponsor-form input[type="url"],
.cb-sponsor-form input[type="tel"],
.cb-sponsor-form input[type="number"],
.cb-sponsor-form select,
.cb-sponsor-form textarea{
width: 100% !important;
height: 46px !important;
padding: 10px 12px !important;
border-radius: 14px !important;
border: 1px solid rgba(10,20,35,.14) !important;
background: rgba(255,255,255,.90) !important;
color: rgba(10,20,35,.92) !important;
box-shadow: inset 0 1px 0 rgba(10,20,35,.03) !important;
outline: none !important;
transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease !important;
}
.cb-sponsor-form textarea{
height: auto !important;
min-height: 110px !important;
resize: vertical !important;
padding: 12px !important;
line-height: 1.6 !important;
}
/* Hover */
.cb-sponsor-form input:hover,
.cb-sponsor-form select:hover,
.cb-sponsor-form textarea:hover{
border-color: rgba(66,99,235,.22) !important;
}
/* Focus */
.cb-sponsor-form input:focus,
.cb-sponsor-form select:focus,
.cb-sponsor-form textarea:focus{
border-color: rgba(66,99,235,.42) !important;
background: rgba(255,255,255,.98) !important;
box-shadow: 0 0 0 5px rgba(66,99,235,.12) !important;
}
/* Placeholder */
.cb-sponsor-form input::placeholder,
.cb-sponsor-form textarea::placeholder{
color: rgba(10,20,35,.42) !important;
}
/* Select: aspecto premium */
.cb-sponsor-form select{
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
padding-right: 44px !important;
background-image:
linear-gradient(45deg, transparent 50%, rgba(10,20,35,.55) 50%),
linear-gradient(135deg, rgba(10,20,35,.55) 50%, transparent 50%),
linear-gradient(to right, transparent, transparent);
background-position:
calc(100% - 18px) 20px,
calc(100% - 12px) 20px,
calc(100% - 42px) 0px;
background-size:
6px 6px,
6px 6px,
1px 46px;
background-repeat: no-repeat;
}
/* Bloques tipo “Nota importante”: hacemos caja editorial */
.cb-sponsor-form .rsform-block,
.cb-sponsor-form .formDescription,
.cb-sponsor-form .rsform-description{
color: rgba(10,20,35,.78) !important;
}
/* Si la nota está en un ,
o similar, lo encapsulamos */
.cb-sponsor-form .cb-legal-note,
.cb-sponsor-form .rsform-description,
.cb-sponsor-form .formDescription{
margin-top: 10px !important;
padding: 14px 14px !important;
border-radius: 16px !important;
border: 1px solid rgba(10,20,35,.12) !important;
background:
radial-gradient(900px 360px at 0% 0%, rgba(66,99,235,.08), transparent 55%),
rgba(255,255,255,.86) !important;
box-shadow: 0 12px 28px rgba(10,20,35,.06) !important;
}
/* Listas dentro de la nota */
.cb-sponsor-form ul{
margin: 10px 0 0 !important;
padding-left: 18px !important;
}
.cb-sponsor-form li{
margin: 8px 0 !important;
line-height: 1.55 !important;
}
/* reCAPTCHA centrado */
.cb-sponsor-form .g-recaptcha,
.cb-sponsor-form .rsform-block-recaptcha{
display: flex !important;
justify-content: center !important;
margin: 8px 0 0 !important;
}
/* Checkbox de condiciones centrado y limpio */
.cb-sponsor-form input[type="checkbox"]{
width: 18px !important;
height: 18px !important;
border-radius: 6px !important;
border: 1px solid rgba(10,20,35,.18) !important;
accent-color: rgba(66,99,235,.95) !important;
}
/* Botón submit: premium */
.cb-sponsor-form button[type="submit"],
.cb-sponsor-form input[type="submit"],
.cb-sponsor-form .cb-sponsor-submit{
display: block !important;
width: min(420px, 100%) !important;
height: 50px !important;
margin: 14px auto 0 !important;
border: 0 !important;
border-radius: 14px !important;
font-weight: 880 !important;
letter-spacing: -0.01em !important;
cursor: pointer !important;
color: #fff !important;
background: linear-gradient(90deg, rgba(66,99,235,.98), rgba(11,163,255,.98)) !important;
box-shadow: 0 14px 30px rgba(66,99,235,.20) !important;
transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}
.cb-sponsor-form button[type="submit"]:hover,
.cb-sponsor-form input[type="submit"]:hover,
.cb-sponsor-form .cb-sponsor-submit:hover{
transform: translateY(-1px) !important;
box-shadow: 0 18px 40px rgba(66,99,235,.24) !important;
filter: saturate(1.05) !important;
}
.cb-sponsor-form button[type="submit"]:active,
.cb-sponsor-form input[type="submit"]:active,
.cb-sponsor-form .cb-sponsor-submit:active{
transform: translateY(0) !important;
box-shadow: 0 10px 22px rgba(66,99,235,.18) !important;
}
/* Responsive: una sola columna */
@media (max-width: 860px){
.cb-sponsor-form{
width: calc(100% - 28px);
padding: 18px;
border-radius: 20px;
}
.cb-sponsor-form table,
.cb-sponsor-form .rsformTable{
border-spacing: 0 12px !important;
}
.cb-sponsor-form td:first-child{
width: auto !important;
padding-right: 0 !important;
display: block !important;
margin-bottom: 8px !important;
}
.cb-sponsor-form td:last-child{
display: block !important;
}
}
/* =========================================================
CooBook – Sponsor Form – ISLA PREMIUM (refuerzo visual)
Mantén el wrapper:
========================================================= */
.cb-sponsor-form{
/* isla más visible */
width: min(980px, calc(100% - 36px));
margin: 34px auto 80px;
padding: clamp(22px, 3.2vw, 38px);
border-radius: 26px;
border: 1px solid rgba(10,20,35,.12);
/* fondo premium: blanco + brillo suave */
background:
radial-gradient(900px 460px at 0% 0%, rgba(66,99,235,.10), transparent 55%),
radial-gradient(900px 460px at 100% 0%, rgba(11,163,255,.08), transparent 55%),
linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94));
/* sombra real (isla flotante) */
box-shadow:
0 30px 90px rgba(10,20,35,.12),
0 10px 30px rgba(10,20,35,.08),
0 2px 0 rgba(255,255,255,.9) inset;
position: relative;
overflow: hidden;
}
/* línea superior elegante (detalle tech) */
.cb-sponsor-form::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
/* borde luminoso en la parte superior */
background:
linear-gradient(90deg,
rgba(66,99,235,.0),
rgba(66,99,235,.20),
rgba(11,163,255,.20),
rgba(66,99,235,.0)
);
height: 2px;
top: 0;
left: 0;
}
/* textura muy sutil (evita que se vea plano) */
.cb-sponsor-form::after{
content:"";
position:absolute;
inset:-2px;
pointer-events:none;
background:
radial-gradient(2px 2px at 14% 22%, rgba(10,20,35,.06), transparent 60%),
radial-gradient(2px 2px at 78% 18%, rgba(10,20,35,.05), transparent 60%),
radial-gradient(2px 2px at 36% 74%, rgba(10,20,35,.05), transparent 60%);
opacity: .55;
}
/* asegura que el contenido quede por encima de los pseudo-elementos */
.cb-sponsor-form *{
position: relative;
z-index: 1;
}
/* tabla/espaciado algo más “aireado” */
.cb-sponsor-form table,
.cb-sponsor-form .rsformTable{
border-spacing: 0 16px !important;
}
/* labels un poco más “premium” */
.cb-sponsor-form label{
font-size: 13.8px !important;
color: rgba(10,20,35,.88) !important;
}
/* inputs con más presencia (sin parecer “cuadro genérico”) */
.cb-sponsor-form input[type="text"],
.cb-sponsor-form input[type="email"],
.cb-sponsor-form input[type="url"],
.cb-sponsor-form input[type="tel"],
.cb-sponsor-form input[type="number"],
.cb-sponsor-form select,
.cb-sponsor-form textarea{
border: 1px solid rgba(10,20,35,.13) !important;
background: rgba(255,255,255,.92) !important;
box-shadow:
0 10px 26px rgba(10,20,35,.06),
inset 0 1px 0 rgba(255,255,255,.9) !important;
}
/* focus más elegante */
.cb-sponsor-form input:focus,
.cb-sponsor-form select:focus,
.cb-sponsor-form textarea:focus{
box-shadow:
0 0 0 5px rgba(66,99,235,.12),
0 14px 34px rgba(66,99,235,.10) !important;
}
/* nota legal: que parezca bloque editorial */
.cb-sponsor-form .cb-legal-note,
.cb-sponsor-form .rsform-description,
.cb-sponsor-form .formDescription{
border-radius: 18px !important;
padding: 16px 16px !important;
border: 1px solid rgba(10,20,35,.12) !important;
background:
radial-gradient(700px 340px at 0% 0%, rgba(66,99,235,.08), transparent 55%),
rgba(255,255,255,.90) !important;
}
/* botón: más “call to action” premium */
.cb-sponsor-form button[type="submit"],
.cb-sponsor-form input[type="submit"],
.cb-sponsor-form .cb-sponsor-submit{
height: 52px !important;
border-radius: 16px !important;
box-shadow:
0 18px 40px rgba(66,99,235,.22),
0 2px 0 rgba(255,255,255,.20) inset !important;
}
/* responsive */
@media (max-width: 860px){
.cb-sponsor-form{
width: calc(100% - 28px);
margin: 22px auto 60px;
padding: 18px;
border-radius: 22px;
}
}
/* =========================================================
RSForm – Centrar botón Submit en isla (CooBook)
========================================================= */
/* Contenedor del botón */
.cb-sponsor-form .rsform-submit-button,
.cb-sponsor-form .formSubmit,
.cb-sponsor-form .rsform-block-submit {
display: flex;
justify-content: center;
margin-top: 28px;
}
/* Botón */
.cb-sponsor-form .rsform-submit-button button,
.cb-sponsor-form .formSubmit button,
.cb-sponsor-form button[type="submit"] {
min-width: 240px;
}
/* =========================================================
COOBOOK – Cards de Artículos (MÓDULO)
Scope: solo módulos con clase "cb-articles"
========================================================= */
.cb-articles{
--cb-bg: #ffffff;
--cb-ink: #0b1220;
--cb-muted: rgba(11,18,32,.62);
--cb-line: rgba(11,18,32,.10);
--cb-shadow: 0 18px 50px rgba(11,18,32,.08);
--cb-shadow-hover: 0 26px 70px rgba(11,18,32,.14);
--cb-radius: 18px;
--cb-radius-img: 16px;
--cb-accent: #1f6fff;
}
/* Reset básico dentro del módulo */
.cb-articles *{
box-sizing: border-box;
}
.cb-articles a{
text-decoration: none;
}
/* Contenedor del módulo (compatibilidad con distintos layouts de Joomla) */
.cb-articles .mod-articlesnews,
.cb-articles .mod-articleslatest,
.cb-articles .newsflash{
display: grid;
gap: 18px;
}
/* Item/card: soporta variaciones de markup */
.cb-articles .mod-articlesnews__item,
.cb-articles .mod-articleslatest__item,
.cb-articles .newsflash-item,
.cb-articles li,
.cb-articles .item{
background: var(--cb-bg);
border: 1px solid var(--cb-line);
border-radius: var(--cb-radius);
box-shadow: var(--cb-shadow);
overflow: hidden;
position: relative;
/* Layout interno para empujar meta al fondo */
display: flex;
flex-direction: column;
/* Animación sutil */
transform: translateY(0);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Borde/halo sutil tecnológico (sin exagerar) */
.cb-articles .mod-articlesnews__item::before,
.cb-articles .mod-articleslatest__item::before,
.cb-articles .newsflash-item::before,
.cb-articles li::before,
.cb-articles .item::before{
content: "";
position: absolute;
inset: -1px;
border-radius: calc(var(--cb-radius) + 1px);
pointer-events: none;
background: radial-gradient(600px 240px at 18% 0%,
rgba(31,111,255,.14),
transparent 55%
);
opacity: .9;
}
/* Hover */
.cb-articles .mod-articlesnews__item:hover,
.cb-articles .mod-articleslatest__item:hover,
.cb-articles .newsflash-item:hover,
.cb-articles li:hover,
.cb-articles .item:hover{
transform: translateY(-2px);
box-shadow: var(--cb-shadow-hover);
border-color: rgba(31,111,255,.22);
}
/* Imagen: hacerla “hero” y consistente */
.cb-articles img{
width: 100% !important;
height: auto;
display: block;
}
/* Caso típico: la imagen viene dentro del introtext */
.cb-articles .intro img,
.cb-articles .mod-articlesnews__item img,
.cb-articles .mod-articleslatest__item img,
.cb-articles .newsflash-item img{
width: 100% !important;
aspect-ratio: 16 / 9;
object-fit: cover;
border-bottom: 1px solid var(--cb-line);
}
/* Si Joomla mete figure/picture */
.cb-articles figure,
.cb-articles picture{
margin: 0;
}
/* Área de contenido (padding real para que no quede en el borde) */
.cb-articles .mod-articlesnews__content,
.cb-articles .mod-articleslatest__content,
.cb-articles .newsflash-item > div,
.cb-articles .intro,
.cb-articles .item-content,
.cb-articles .content{
padding: 18px 20px 14px;
}
/* Si no existe wrapper, forzamos padding a elementos comunes */
.cb-articles h1,
.cb-articles h2,
.cb-articles h3,
.cb-articles .page-header,
.cb-articles .item-title,
.cb-articles .mod-articlesnews__title,
.cb-articles .mod-articleslatest__title{
margin: 0;
padding: 0;
}
/* Título */
.cb-articles .item-title a,
.cb-articles .page-header a,
.cb-articles .mod-articlesnews__title a,
.cb-articles .mod-articleslatest__title a,
.cb-articles h3 a{
color: var(--cb-ink);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.15;
font-size: clamp(18px, 2.1vw, 26px);
display: inline-block;
}
/* Separación del título respecto al bloque */
.cb-articles .item-title,
.cb-articles .page-header,
.cb-articles .mod-articlesnews__title,
.cb-articles .mod-articleslatest__title{
padding: 16px 20px 8px;
}
/* Texto/intro */
.cb-articles .introtext,
.cb-articles .intro p,
.cb-articles p{
color: var(--cb-muted);
line-height: 1.65;
margin: 0;
padding: 0 20px 14px;
font-size: 15px;
}
/* Limitar intro a 3 líneas (se ve pro y consistente) */
.cb-articles .introtext,
.cb-articles .intro p{
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Botón “Leer más” */
.cb-articles .readmore,
.cb-articles .mod-articlesnews__readmore,
.cb-articles .mod-articleslatest__readmore{
padding: 0 20px 18px;
}
/* Enlaces de readmore típicos */
.cb-articles .readmore a,
.cb-articles a.readmore,
.cb-articles .mod-articlesnews__readmore a,
.cb-articles .mod-articleslatest__readmore a{
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(31,111,255,.10);
color: var(--cb-accent);
border: 1px solid rgba(31,111,255,.16);
padding: 10px 14px;
border-radius: 999px;
font-weight: 700;
font-size: 13px;
transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.cb-articles .readmore a:hover,
.cb-articles a.readmore:hover,
.cb-articles .mod-articlesnews__readmore a:hover,
.cb-articles .mod-articleslatest__readmore a:hover{
transform: translateY(-1px);
background: rgba(31,111,255,.14);
border-color: rgba(31,111,255,.24);
}
/* Meta: autor/fecha/vistas -> abajo y limpio */
.cb-articles .article-info,
.cb-articles .mod-articlesnews__meta,
.cb-articles .mod-articleslatest__meta{
margin-top: auto; /* empuja al fondo del card */
padding: 14px 20px 16px;
border-top: 1px solid var(--cb-line);
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
align-items: center;
color: rgba(11,18,32,.55);
font-size: 12.5px;
}
/* Joomla a veces usa dl/dd */
.cb-articles .article-info{
margin-bottom: 0;
}
.cb-articles .article-info dd{
margin: 0;
}
/* Chips para cada dato (autor/fecha/vistas) */
.cb-articles .article-info dd,
.cb-articles .article-info > *,
.cb-articles .mod-articlesnews__meta > *,
.cb-articles .mod-articleslatest__meta > *{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border: 1px solid rgba(11,18,32,.10);
border-radius: 999px;
background: rgba(11,18,32,.03);
}
/* Quitar márgenes raros de iconos/elementos internos */
.cb-articles .article-info i,
.cb-articles .article-info svg{
margin: 0;
}
/* Responsive: en móvil más aire y tipografía ajustada */
@media (max-width: 640px){
.cb-articles .item-title,
.cb-articles .page-header,
.cb-articles .mod-articlesnews__title,
.cb-articles .mod-articleslatest__title{
padding: 14px 16px 8px;
}
.cb-articles .introtext,
.cb-articles .intro p,
.cb-articles p{
padding: 0 16px 12px;
font-size: 14.5px;
}
.cb-articles .readmore,
.cb-articles .mod-articlesnews__readmore,
.cb-articles .mod-articleslatest__readmore{
padding: 0 16px 16px;
}
.cb-articles .article-info,
.cb-articles .mod-articlesnews__meta,
.cb-articles .mod-articleslatest__meta{
padding: 12px 16px 14px;
}
}
/* ===============================
COOBOOK – ARTÍCULOS (REFINADO)
=============================== */
.cb-articles {
display: flex;
flex-direction: column;
gap: 16px; /* separación entre artículos */
}
/* Tarjeta de artículo */
.cb-articles article {
background: linear-gradient(135deg, #f9fbff 0%, #ffffff 100%);
border-radius: 18px;
padding: 22px 24px; /* separación interna */
box-shadow: 0 12px 30px rgba(0, 40, 120, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cb-articles article:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(0, 40, 120, 0.14);
}
/* ===============================
METADATA (autor + fecha)
=============================== */
.cb-articles .article-info {
display: flex;
align-items: center;
gap: 14px;
font-size: 13px;
color: #6b7280;
margin-bottom: 14px;
}
.cb-articles .article-info span {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* Autor */
.cb-articles .article-info .author {
font-weight: 600;
color: #1f2937;
}
/* Fecha */
.cb-articles .article-info .date {
padding: 4px 10px;
background: rgba(37, 99, 235, 0.08);
border-radius: 999px;
font-size: 12px;
color: #2563eb;
}
/* ===============================
TÍTULO
=============================== */
.cb-articles h2,
.cb-articles h3 {
font-size: clamp(22px, 3vw, 28px);
font-weight: 700;
color: #0f172a;
line-height: 1.25;
margin-bottom: 10px;
}
/* ===============================
INTRODUCCIÓN
=============================== */
.cb-articles .intro {
font-size: 15.5px;
line-height: 1.65;
color: #475569;
margin-bottom: 18px;
max-width: 90%;
}
/* ===============================
BOTÓN LEER MÁS
=============================== */
.cb-articles .read-more {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 999px;
background: linear-gradient(135deg, #2563eb, #3b82f6);
color: #ffffff;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: all 0.25s ease;
}
.cb-articles .read-more:hover {
transform: translateX(4px);
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}
/* ===============================
RESPONSIVE
=============================== */
@media (max-width: 768px) {
.cb-articles article {
padding: 18px 18px;
}
.cb-articles .intro {
max-width: 100%;
}
}