/* =========================================================
   VIOLETTA SOFTWARE — PAGINAS INTERNAS (2026-08)
   ---------------------------------------------------------
   Homologa Nosotros, Términos, Privacidad y Blog con el
   lenguaje visual de la landing.

   El problema no era el diseño de cada página por separado,
   sino que vivían en sistemas distintos: violetta_landing.css
   usa 65 referencias a tokens y 2 colores fijos, mientras que
   violetta_about_us.css usaba 0 tokens y 9 colores fijos. De
   ahí que no se parecieran a nada.

   Esta hoja se carga DESPUES de la de cada vista y reescribe
   los componentes existentes sin tocar el HTML, usando los
   mismos tokens --c-* de violetta_global.css.
   ========================================================= */

/* =========================================================
   0. UNIFICACION DE SISTEMAS
   ---------------------------------------------------------
   Convivian tres sistemas de estilo distintos:

     a) violetta_global.css  -> --c-*, --vt-*, --font  (el bueno,
        el que usa la landing)
     b) violetta_about_us.css / violetta_home.css -> Montserrat y
        Poppins escritas a mano, y ademas var(--primary) y
        var(--secondary), que NO existen en el sistema global
     c) El <style> propio de Terminos y Privacidad -> su propio
        :root con --primary/--secondary/--dark/--gray... y
        body { font-family: 'Poppins' }

   Consecuencias reales:
     - La landing salia en Montserrat y las internas en Poppins.
     - En /about, que carga about_us.css pero no tiene ese <style>,
       --primary y --secondary quedaban SIN DEFINIR y los colores
       se perdian. Solo "funcionaban" en los legales, por casualidad,
       porque alli el <style> si las declaraba.

   Aqui se mapean los nombres antiguos sobre los tokens reales, de
   modo que las hojas viejas sigan funcionando pero pintando con la
   paleta de la landing.
========================================================= */

.page-canvas {
    --primary: var(--c-purple-800, #42265C);
    --secondary: var(--c-purple-500, #7C3AED);
    --accent: var(--c-purple-400, #A855F7);
    --light: var(--c-purple-100, #F5F0FF);
    --dark: var(--c-text-primary, #1A0A2E);
    --gray: var(--c-text-muted, #7E6A96);
    --light-purple: var(--c-purple-100, #F5F0FF);
    --transition: var(--transition-base, all .3s ease);
}

/* La familia se fuerza desde aqui porque esta hoja se carga DESPUES
   del <style> de cada vista: sin esto ganaba el 'Poppins' de los
   legales y las internas no coincidian con la landing. */
.page-canvas,
.page-canvas body,
body.page-canvas {
    font-family: var(--font, 'Montserrat', sans-serif);
}

.page-canvas h1,
.page-canvas h2,
.page-canvas h3,
.page-canvas h4,
.page-canvas h5,
.page-canvas h6,
.page-canvas p,
.page-canvas li,
.page-canvas a,
.page-canvas span,
.page-canvas input,
.page-canvas textarea,
.page-canvas button {
    font-family: inherit;
}

/* =========================================================
   1. LIENZO Y RITMO COMUN
========================================================= */

.page-canvas {
    background:
        radial-gradient(1100px 520px at 12% -8%, var(--c-purple-100), transparent 60%),
        radial-gradient(900px 460px at 92% 4%, rgba(168, 85, 247, .10), transparent 62%),
        var(--c-bg);
    min-height: 100vh;
}

.page-canvas .container {
    width: min(100% - 40px, 1120px);
    margin-inline: auto;
}

/* =========================================================
   2. CABECERA DE PAGINA
   Replica el trio eyebrow / title / subtitle de la landing.
========================================================= */

.page-canvas .hero-section,
.page-canvas .policy-header,
.page-canvas .header-section {
    position: relative;
    padding: 72px 0 44px;
    text-align: center;
    background: none;
    border: 0;
}

/* Retícula de puntos, como el dot-grid-bg de la landing */
.page-canvas .hero-section::before,
.page-canvas .policy-header::before,
.page-canvas .header-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(var(--c-border-2, rgba(124, 58, 237, .28)) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 72%);
    mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 72%);
    opacity: .5;
}

.page-canvas .hero-section > *,
.page-canvas .policy-header > *,
.page-canvas .header-section > * {
    position: relative;
    z-index: 1;
}

.page-canvas .hero-section h1,
.page-canvas .policy-header h1,
.page-canvas .header-section h1,
.page-canvas .header-section h2 {
    font-size: clamp(30px, 4.4vw, 48px);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -.02em;
    color: var(--c-text-primary);
    margin: 0 0 14px;
}

.page-canvas .hero-section p,
.page-canvas .policy-header p,
.page-canvas .header-section p {
    max-width: 62ch;
    margin: 0 auto;
    color: var(--c-text-muted);
    font-size: clamp(15px, 1.6vw, 17px);
    line-height: 1.7;
}

/* Distintivo superior reutilizable */
.page-eyebrow {
    display: inline-block;
    margin-bottom: 16px;
    padding: 7px 15px;
    border-radius: 999px;
    background: var(--c-purple-100);
    border: 1px solid var(--c-border);
    color: var(--c-purple-600);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* =========================================================
   3. TITULOS DE SECCION
========================================================= */

.page-canvas .section-title {
    font-size: clamp(24px, 3.2vw, 36px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--c-text-primary);
    line-height: 1.2;
}

.page-canvas .section {
    padding: 56px 0;
}

/* =========================================================
   4. TARJETAS — mismo patron que .service-card de la landing
========================================================= */

.page-canvas .value-card,
.page-canvas .mv-card,
.page-canvas .about-content,
.page-canvas .policy-section,
.page-canvas .toc-container,
.page-canvas .blog-card {
    position: relative;
    overflow: hidden;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg, 18px);
    box-shadow: var(--shadow-card, 0 6px 24px rgba(30, 10, 53, .07));
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/* Filo superior que se despliega al pasar el ratón */
.page-canvas .value-card::after,
.page-canvas .mv-card::after,
.page-canvas .blog-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-purple-500), var(--c-purple-300));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s ease;
}

.page-canvas .value-card:hover,
.page-canvas .mv-card:hover,
.page-canvas .blog-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover, 0 18px 44px rgba(124, 58, 237, .16));
    border-color: rgba(124, 58, 237, .25);
}

.page-canvas .value-card:hover::after,
.page-canvas .mv-card:hover::after,
.page-canvas .blog-card:hover::after {
    transform: scaleX(1);
}

.page-canvas .value-card,
.page-canvas .mv-card {
    padding: 32px 28px;
}

/* Icono en cápsula degradada, como .service-card-icon */
.page-canvas .value-icon,
.page-canvas .mv-card i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 18px;
    border-radius: 15px;
    font-size: 22px;
    color: #fff;
    background: linear-gradient(135deg, var(--c-purple-500), var(--c-purple-400));
    box-shadow: 0 8px 20px rgba(124, 58, 237, .28);
}

/* =========================================================
   5. PAGINAS LEGALES
========================================================= */

.page-canvas .policy-content {
    display: grid;
    gap: 20px;
    padding-bottom: 64px;
}

.page-canvas .policy-section {
    padding: 28px 30px;
}

.page-canvas .policy-section h2,
.page-canvas .policy-section h3 {
    color: var(--c-text-primary);
    font-weight: 800;
    letter-spacing: -.01em;
    margin: 0 0 12px;
}

.page-canvas .policy-section h2 { font-size: clamp(19px, 2.2vw, 24px); }
.page-canvas .policy-section h3 { font-size: 17px; margin-top: 20px; }

.page-canvas .policy-section p,
.page-canvas .policy-section li {
    color: var(--c-text-body);
    line-height: 1.75;
    font-size: 15px;
}

.page-canvas .policy-section ul,
.page-canvas .policy-section ol {
    padding-left: 22px;
    margin: 12px 0;
}

.page-canvas .policy-section li { margin-bottom: 7px; }

/* Índice.
   El .toc-container es un HERMANO ANTERIOR a .policy-content, no una barra
   lateral. Hacerlo sticky sin cambiar el flujo lo dejaba flotando SOBRE el
   contenido que le sigue. Se convierte el contenedor en dos columnas para
   que sea una barra lateral de verdad. */
/* Estado base SEGURO: bloque normal en el flujo, sin sticky ni z-index.
   La vista trae en su <style> propio `margin: -30px auto 40px`,
   `position: relative` y `z-index: 10`, que por si solos ya levantan el
   indice por encima del contenido siguiente. Hay que neutralizarlos aqui:
   si el sticky dependiera de que la rejilla funcione, cualquier fallo
   (navegador sin :has(), CSS cacheado) devolvia el solapamiento. */
.page-canvas .toc-container {
    position: static;
    z-index: auto;
    margin: 0 0 26px;
    max-width: none;
    padding: 22px 24px;
}

/* Mejora progresiva: con :has() pasa a barra lateral de verdad, y solo
   entonces se vuelve pegajosa dentro de su propia columna. */
@supports selector(:has(*)) {
    .page-canvas .container:has(> .toc-container) {
        display: grid;
        grid-template-columns: 264px minmax(0, 1fr);
        gap: 30px;
        align-items: start;
    }

    .page-canvas .container:has(> .toc-container) > .policy-footer {
        grid-column: 1 / -1;
    }

    .page-canvas .container:has(> .toc-container) > .toc-container {
        position: sticky;
        top: 104px;
        margin: 0;
        max-height: calc(100vh - 130px);
        overflow-y: auto;
    }
}

.page-canvas .toc-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-purple-600);
    margin-bottom: 12px;
}

/* La vista trae `.toc-list { columns: 2 }`. En una barra lateral de 264px
   eso deja dos columnas de ~117px y los titulos largos ("5. Cookies y
   Tecnologias Similares") se salian del contenedor. */
.page-canvas .toc-list {
    columns: 1;
    column-gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.page-canvas .toc-list a {
    display: block;
    padding: 8px 11px;
    margin-bottom: 2px;
    border-radius: 10px;
    color: var(--c-text-muted);
    text-decoration: none;
    font-size: 13.5px;
    line-height: 1.45;
    /* Sin esto, una palabra larga sin espacios seguiria desbordando */
    overflow-wrap: anywhere;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

/* La vista desplaza el enlace 5px al pasar el raton, lo que dentro de una
   columna estrecha lo empujaba fuera del borde. */
.page-canvas .toc-list a:hover {
    background: var(--c-purple-100);
    color: var(--c-purple-600);
    transform: none;
}

/* El bullet absoluto de la vista se sustituye por un indicador propio que
   no depende de padding-left fijo. */
.page-canvas .toc-list a { padding-left: 11px; }
.page-canvas .toc-list a::before { content: none; }

.page-canvas .policy-footer {
    padding: 26px 0 72px;
    text-align: center;
    color: var(--c-text-muted);
    font-size: 14px;
}

/* Volver arriba */
.page-canvas .back-to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--c-purple-500), var(--c-purple-600));
    box-shadow: 0 10px 26px rgba(124, 58, 237, .38);
    text-decoration: none;
    z-index: 900;
    transition: transform .2s ease;
}

.page-canvas .back-to-top:hover { transform: translateY(-3px); }

/* =========================================================
   6. BLOG
========================================================= */

.page-canvas .blogs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 26px;
    padding-bottom: 72px;
}

.page-canvas .blog-card { display: flex; flex-direction: column; }

.page-canvas .blog-image-wrapper {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--c-purple-100);
}

.page-canvas .blog-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.page-canvas .blog-card:hover .blog-image-wrapper img { transform: scale(1.05); }

.page-canvas .blog-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 22px 24px;
    flex: 1;
}

.page-canvas .blog-date {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-purple-600);
}

.page-canvas .blog-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
    color: var(--c-text-primary);
    margin: 0;
}

.page-canvas .blog-excerpt {
    color: var(--c-text-muted);
    font-size: 14.5px;
    line-height: 1.65;
    flex: 1;
}

.page-canvas .blog-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--c-border);
    color: var(--c-text-muted);
    font-size: 13px;
}

.page-canvas .read-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: 14px;
    color: var(--c-purple-600);
    text-decoration: none;
}

.page-canvas .read-more:hover { gap: 11px; }
.page-canvas .read-more i { transition: transform .2s ease; }

.page-canvas .blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    padding-bottom: 30px;
}

.page-canvas .filter-dropdown,
.page-canvas .filter-group select {
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text-body);
    font-size: 14px;
    font-weight: 600;
}

.page-canvas .no-blogs {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--c-text-muted);
}

/* =========================================================
   7. NOSOTROS
========================================================= */

.page-canvas .about-container,
.page-canvas .mv-container,
.page-canvas .values-container { padding: 0; }

.page-canvas .about-content { padding: 34px 32px; }

.page-canvas .about-content p {
    color: var(--c-text-body);
    line-height: 1.8;
    font-size: 15.5px;
}

.page-canvas .about-image img {
    width: 100%;
    border-radius: var(--radius-lg, 18px);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-card, 0 6px 24px rgba(30, 10, 53, .07));
}

.page-canvas .values-grid,
.page-canvas .mv-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: 24px;
}

.page-canvas .mv-highlight {
    color: var(--c-purple-600);
    font-weight: 700;
}

/* =========================================================
   8. RESPONSIVE Y MOVIMIENTO
========================================================= */

@media (max-width: 900px) {
    /* Una sola columna: la barra lateral vuelve a bloque superior */
    @supports selector(:has(*)) {
        .page-canvas .container:has(> .toc-container) {
            grid-template-columns: minmax(0, 1fr);
            gap: 0;
        }

        .page-canvas .container:has(> .toc-container) > .toc-container {
            position: static;
            max-height: none;
            overflow-y: visible;
            margin: 0 0 24px;
        }
    }
}

@media (max-width: 820px) {
    .page-canvas .section { padding: 40px 0; }
    .page-canvas .hero-section,
    .page-canvas .policy-header,
    .page-canvas .header-section { padding: 52px 0 32px; }
}

@media (max-width: 560px) {
    .page-canvas .container { width: min(100% - 24px, 1120px); }
    .page-canvas .value-card,
    .page-canvas .mv-card,
    .page-canvas .about-content { padding: 24px 20px; }
    .page-canvas .policy-section { padding: 22px 20px; }
    .page-canvas .blogs-grid { grid-template-columns: 1fr; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .page-canvas * { transition: none !important; }
}

img { max-width: 100%; height: auto; }