/* ============================================================ v2-articles.css — re-tematización de los artículos del blog al sistema v2 "Dos Voces" SIN tocar su HTML ni su contenido. Convierte la paleta legacy (negro/blanco/teal #47AAB4) a latte/tinta/teal #23727a. Cargar DESPUÉS de v2-shell.css. Fuente de verdad: DESIGN.md. ============================================================ */ /* Base: el cuerpo oscuro legacy pasa a latte con tinta */ :root{--goweb-green:#23727a;--rule:var(--ink);--ease-out:cubic-bezier(.2,.8,.2,1)} body{background:var(--paper)!important;color:var(--ink)!important} /* Superficies oscuras -> latte / caja suave teal */ .bg-black{background-color:var(--paper)!important} .bg-gray-900,.bg-gray-800{background-color:rgba(35,114,122,.06)!important;border-radius:24px} [class*="bg-gray-800/"],[class*="bg-gray-900/"],[class*="bg-black/"]{background-color:rgba(35,114,122,.06)!important;border-radius:24px} /* Superficies blancas/grises claras -> latte / caja suave */ .bg-white{background-color:var(--paper)!important} .bg-gray-50,.bg-gray-100{background-color:rgba(35,114,122,.05)!important} /* Tipografía: claros sobre oscuro -> tinta sobre latte */ .text-white{color:var(--ink)!important} .text-gray-100,.text-gray-200,.text-gray-300,.text-gray-400{color:var(--ink-soft)!important} /* Tipografía: oscuros (ya legibles) normalizados a tinta */ .text-black,.text-gray-900,.text-gray-800{color:var(--ink)!important} .text-gray-500,.text-gray-600,.text-gray-700{color:var(--ink-soft)!important} /* Acento: teal antiguo -> teal del sistema (texto AA sobre latte) */ .text-goweb-green{color:var(--teal)!important} .bg-goweb-green{background-color:var(--teal)!important} .border-goweb-green{border-color:var(--teal)!important} .hover\:text-goweb-green:hover{color:var(--teal)!important} .hover\:bg-goweb-green:hover{background-color:var(--teal)!important} .hover\:border-goweb-green:hover{border-color:var(--teal)!important} [class*="bg-goweb-green/"]{background-color:rgba(35,114,122,.12)!important} [class*="bg-blog-purple/"]{background-color:rgba(35,114,122,.12)!important} /* Etiquetas/badges (categoría del artículo y similares): sin fondo — con el latte ya no hace falta la pastilla; texto teal a secas (pedido de JM) */ span.inline-block.bg-goweb-green.rounded-full{background:transparent!important;color:var(--teal)!important;padding-left:0!important;padding-right:0!important} /* Botones CTA de artículo: pastilla de TINTA del sistema (no teal sólido) */ a.bg-goweb-green{background-color:var(--ink)!important;color:var(--paper)!important;box-shadow:none!important} a.bg-goweb-green:hover{background-color:var(--teal)!important;color:#ffffff!important} /* Círculos numerados de pasos: conservan el teal, número en blanco (contraste) */ div.bg-goweb-green.rounded-full{color:#ffffff!important} div.bg-goweb-green.rounded-full .text-white,div.bg-goweb-green.rounded-full span{color:#ffffff!important} /* Avatar del autor (círculo con el logo dentro): sin fondo verde (pedido de JM) */ div.bg-goweb-green.rounded-full:has(> img){background-color:transparent!important} /* Bordes grises -> línea del sistema */ .border-gray-200,.border-gray-300,.border-gray-700,.border-gray-800{border-color:var(--line)!important} /* Franjas CTA oscuras con degradado -> caja destacada v2 */ [class*="from-gray-900"],[class*="from-black"]:not([class*="bg-gradient-to-t"]){background-image:none!important;background-color:transparent!important;border:1.5px solid var(--teal);border-radius:30px} /* EXCEPCIÓN: leyendas sobre la imagen destacada (degradado hacia arriba): se conservan oscuras para que el texto siga legible sobre la foto */ [class*="bg-gradient-to-t"]{background-image:linear-gradient(to top,rgba(0,0,0,.7),transparent)!important;border:none!important} [class*="bg-gradient-to-t"] .text-white,[class*="bg-gradient-to-t"].text-white{color:#ffffff!important} [class*="bg-gradient-to-t"] .text-gray-300,[class*="bg-gradient-to-t"] .text-gray-200{color:#ffffffd9!important} /* Sombras fuera: el sistema no las usa */ .shadow,.shadow-sm,.shadow-md,.shadow-lg,.shadow-xl,.shadow-2xl{box-shadow:none!important} /* Bloque GEO "Resumen": idéntico al del resto del sitio (v2.css) */ .tldr-box{background:transparent!important;border:none!important;border-radius:0!important;padding:0!important;margin:2.2rem 0 0!important;width:100%;text-align:left} .tldr-box .tldr-label{display:inline-block;font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:lowercase;color:var(--teal)!important;margin-bottom:.6rem} .tldr-box .tldr-label::before{content:"// "} .tldr-box p{font-family:var(--font-mono)!important;font-size:.98rem!important;line-height:1.9!important;color:var(--ink-soft)!important;margin:0} /* Barra de progreso de lectura al teal del sistema */ .progress-bar,#progress-bar{background:var(--teal)!important;background-color:var(--teal)!important} /* Selección de texto como en el sistema */ ::selection{background:var(--teal);color:#fff} /* ============================================================ COMPONENTES CANÓNICOS v2 EN ARTÍCULOS Portados de v2.css para que los artículos usen las MISMAS fichas, FAQ y test-cards que el resto de la web. Markup idéntico:
01

..

..

..
01

..

..

============================================================ */ @property --trace{syntax:'';initial-value:0%;inherits:false} .article-content .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));grid-auto-rows:1fr;gap:1.1rem;margin:2rem 0} .article-content .cards.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .article-content .cards.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:1000px){.article-content .cards.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:640px){.article-content .cards.cols-2,.article-content .cards.cols-3{grid-template-columns:1fr}} .article-content .tests{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.2rem;margin:2rem 0} .article-content .card{position:relative;background:transparent!important;border:1.5px solid var(--teal)!important;border-radius:24px!important;padding:1.7rem;text-decoration:none;color:var(--ink)!important;display:flex;flex-direction:column;gap:.55rem;box-shadow:none!important;transition:transform .35s var(--ease-out)} .article-content .card::before{content:"";position:absolute;inset:-2px;border-radius:26px;padding:2px;pointer-events:none;background:conic-gradient(from -90deg,var(--rule) var(--trace),transparent var(--trace));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;--trace:0%;transition:--trace .55s var(--ease-out)} .article-content .card:hover{transform:translateY(-4px);box-shadow:none!important} .article-content .card:hover::before{--trace:100%} .article-content .card .idx{display:block;width:100%;font-family:var(--font-mono);font-size:.8rem;color:var(--teal);border-bottom:1.5px solid var(--line);padding-bottom:.7rem;margin-bottom:.4rem} .article-content .card .idx::before{content:"["} .article-content .card .idx::after{content:"]"} .article-content .card h3{font-family:var(--font-sans);font-weight:700;font-size:1.08rem;letter-spacing:.01em;text-transform:uppercase;line-height:1.3;color:var(--ink)} .article-content .card p{font-family:var(--font-mono);color:var(--ink-soft);font-size:.8rem;font-weight:400;line-height:1.75;flex:1;margin:0} .article-content .card .go{font-family:var(--font-mono);color:var(--teal);font-size:.68rem;font-weight:600;letter-spacing:.1em;display:flex;align-items:center;gap:.45rem;margin-top:.4rem} .article-content .card .go svg{stroke:var(--teal)} /* FAQ idéntica a la web */ .article-content details.card.faq-card{padding:.85rem 1.15rem;border-radius:14px!important} .article-content details.card.faq-card::before{border-radius:16px} .article-content details.card.faq-card summary{cursor:pointer;list-style:none;display:flex;flex-direction:row;align-items:center;gap:.8rem} .article-content details.card.faq-card summary::-webkit-details-marker{display:none} .article-content details.card.faq-card summary .idx{width:auto;border-bottom:none;padding-bottom:0;margin-bottom:0;flex-shrink:0} .article-content details.card.faq-card summary h3{font-size:.85rem;text-transform:none;letter-spacing:0;line-height:1.45;flex:1} .article-content details.card.faq-card summary::after{content:"+";margin-left:auto;flex-shrink:0;font-family:var(--font-mono);font-weight:600;color:var(--teal);font-size:1.15rem;line-height:1} .article-content details.card.faq-card[open] summary::after{content:"\2212"} .article-content details.card.faq-card>p{margin-top:.7rem} .article-content .cards:has(> details.faq-card){gap:.6rem;grid-auto-rows:min-content;align-items:start} /* Enlaces dentro de fichas */ .article-content .card p a:not(.btn){color:var(--teal)!important;text-decoration:underline} /* Acento teal en la palabra de los títulos de sección */ .article-content h2 em,.article-content h3 em{font-style:normal;color:var(--teal)} /* Índice de contenidos v2 (con más cuerpo: filo teal + fondo teal muy suave) */ .article-content .article-toc{border:1.5px solid var(--teal);border-radius:24px;padding:1.75rem 2rem;margin:2.5rem 0;background:rgba(35,114,122,0.04)} .article-content .article-toc .toc-label{display:inline-block;font-family:var(--font-mono);font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:lowercase;color:var(--teal);margin-bottom:1rem} .article-content .article-toc .toc-label::before{content:"// "} .article-content .article-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem} .article-content .article-toc a{font-family:var(--font-mono);font-size:.9rem;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:.55rem;transition:color .3s} .article-content .article-toc a:hover{color:var(--teal)} .article-content .article-toc a svg{display:none} .article-content .article-toc a::before{content:"—";color:var(--teal)} /* Peso de título de artículo = peso de títulos de la web (Montserrat 700, no black) */ .article-hero h1{font-weight:700!important;letter-spacing:-.025em} /* Botón del sistema (idéntico a la web) — pastilla de tinta, hover teal + hueco que crece */ .article-content .btn{display:inline-flex;align-items:center;gap:.6rem;background:var(--ink);color:var(--paper-on-ink)!important;text-decoration:none;font-family:var(--font-sans);font-weight:700;font-size:.9rem;padding:1rem 1.75rem;border-radius:100px;transition:gap .3s var(--ease-out),background .3s;border:none;cursor:pointer} .article-content .btn:hover{gap:1.1rem;background:var(--teal);color:#fff!important} .article-content .btn svg{stroke:currentColor} /* Kicker del sistema (mono lowercase con "// ") */ .article-content .kicker{display:inline-block;font-family:var(--font-mono);font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:lowercase;color:var(--teal)} .article-content .kicker::before{content:"// "} /* Sección CTA (idéntica a la web) — filo teal, radio 30, h2 con acento em teal */ .article-content .cta{background:transparent;border:1.5px solid var(--teal);color:var(--ink);border-radius:30px;padding:clamp(3rem,7vw,5.5rem);text-align:center;margin:4rem 0 0} .article-content .cta .kicker{color:var(--teal)} .article-content .cta h2{font-family:var(--font-sans);font-weight:700;font-size:clamp(1.7rem,4.5vw,3.3rem);line-height:1.15;letter-spacing:-.02em;max-width:26ch;margin:1.4rem auto 0;border:none;display:block} .article-content .cta h2 em{font-style:normal;color:var(--teal)} .article-content .cta p{font-family:var(--font-mono);color:var(--ink-soft);font-size:.95rem;max-width:62ch;margin:1.2rem auto 0} .article-content .cta .btn{margin-top:2.4rem} /* Restaura el ratio natural de las imágenes destacadas: los atributos width/height (añadidos para evitar CLS) fijaban el alto y object-cover recortaba de más. */ img.object-cover{height:auto}