/* Modern base & accessibility */
:root{ --radius:16px; --shadow:0 8px 24px rgb(15 23 42 / .08); }
*, *::before, *::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; text-rendering:optimizeLegibility; font-feature-settings:"liga","kern" }
body{ margin:0; font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial,"Noto Sans"; line-height:1.6 }
img, video{ max-width:100%; height:auto }
.container{ max-width: 1120px; margin-inline:auto; padding: clamp(16px, 3vw, 28px); }
.site-header{ position:sticky; top:0; z-index:50; backdrop-filter: blur(8px); background: rgba(255,255,255,.86); border-bottom: 1px solid #e5e7eb }
.navbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.navbar .brand{ display:flex; align-items:center; gap:10px; font-weight:800 }
.navbar .brand img{ width:32px; height:32px; border-radius:8px }
.navbar .menu{ display:flex; flex-wrap:wrap; gap:8px; }
.menu a{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; text-decoration:none; color:#0f172a; background:#f8fafc; border:1px solid #e5e7eb; }
.menu a:hover{ background:#eef2ff; border-color:#c7d2fe }
.menu a.active{ background:#2563eb; border-color:#2563eb; color:#fff; }
footer.site-footer{ margin-top:64px }
@media (prefers-color-scheme: dark){
  html{ color-scheme: light dark }
  body{ background:#0B1220; color:#e5e9f2 }
  .site-header{ background: rgba(10,16,27,.75); border-color: #1f2937 }
  .menu a{ background:#0f172a; color:#d1d5db; border-color:#1f2937 }
  .menu a:hover{ background:#111827 }
}


/* === Original styles from source (kept) === */

    :root{
      --bg: #ffffff;
      --surface: #ffffff;
      --surface-2: #f8fafc;
      --border: #e5e7eb;
      --muted: #475569;
      --text: #0f172a;
      --brand: #2563eb;
      --radius: 16px;
      --shadow: 0 8px 24px rgb(15 23 42 / .08);
      --max: 1100px;
      --yellow: #fff3c4;
      --yellow-border:#fde68a;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    html{scroll-behavior:smooth}
    body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans";background:var(--bg);color:var(--text);line-height:1.6;}
    a{color: var(--brand); text-decoration: none}
    a:hover{text-decoration: underline}
    img{max-width:100%; display:block; border-radius: calc(var(--radius) - 6px)}
    .container{max-width: var(--max); margin-inline:auto; padding: clamp(16px, 3vw, 28px)}
    .grid{display:grid; gap: clamp(14px, 2vw, 22px)}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--brand);color:white;padding:10px 14px;border-radius:12px;border:0;cursor:pointer;box-shadow:var(--shadow);font-weight:600;transition:transform .08s ease}
    .btn:active{transform:scale(.98)}
    .btn.small{padding:8px 12px; font-size:.94rem}

    header{position:sticky;top:0;z-index:10;backdrop-filter:blur(6px);background:rgba(255,255,255,.85);border-bottom:1px solid var(--border)}
    .nav{display:flex;align-items:center;justify-content:space-between}
    .brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px}
    .brand img{width:32px;height:32px;border-radius:8px}
    .pill{display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--border);padding:6px 10px;border-radius:99px;color:#334155;font-size:.85rem}

    h1{font-size: clamp(1.8rem, 3.6vw, 2.4rem); line-height:1.2; margin:.2em 0 .4em}
    h2{font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin:0}
    h3{margin:0}
    .lead{color:var(--muted)}
    section{margin-top: clamp(28px, 6vw, 56px)}
    .section-title{display:flex; align-items:baseline; justify-content:space-between}
    .card{background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:16px; box-shadow: var(--shadow)}

    /* Intro */
    .intro-wrap{display:grid;gap:18px;grid-template-columns:1.2fr .8fr;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
    .intro-text{padding:clamp(18px,3vw,28px)}
    .intro-video{padding:clamp(12px,2vw,18px);background:var(--surface-2)}
    .intro-video video{width:100%;height:auto;border-radius:12px;outline:0}
    .fade{position:absolute;inset:auto 0 0 0;height:70px;background:linear-gradient(180deg,transparent,var(--surface));pointer-events:none;border-radius:0 0 var(--radius) var(--radius);display:none}
    .readmore{overflow:hidden;transition:max-height .45s ease}
    .readmore.collapsed{max-height:210px}
    .readmore.collapsed + .fade{display:block}

    .banner{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)}

    /* Rosco (igual v10) */
    .rosco{position:relative;width: 520px;max-width:100%;margin:56px auto 56px;aspect-ratio:1/1}
    .rosco .ring{position:absolute;inset:0;border-radius:50%;background:
        radial-gradient(circle 46% at 50% 50%, var(--surface) 0 99%, transparent 100%),
        conic-gradient(from 0deg,#60a5fa 0 36deg,#93c5fd 36deg 90deg,#60a5fa 90deg 144deg,#93c5fd 144deg 198deg,#60a5fa 198deg 252deg,#93c5fd 252deg 306deg,#60a5fa 306deg 360deg);
      border:10px solid var(--border); box-shadow:var(--shadow)}
    .rosco .center{position:absolute;inset:21%;border-radius:50%;background:var(--surface);border:1px solid var(--border);padding:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}
    .rosco .pills{position:absolute;inset:0;list-style:none;margin:0;padding:0}
    .rosco .pill-item{position:absolute;transform:translate(-50%,-50%);background:var(--surface);border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:999px;font-size:.76rem;line-height:1;white-space:nowrap;box-shadow:var(--shadow);transition:background .2s,color .2s,border-color .2s,transform .15s ease;cursor:pointer}
    .rosco .pill-item.active{background:var(--brand);border-color:var(--brand);color:#fff}
    .rosco .pill-item:focus-visible{outline:3px solid #bfdbfe}
    .center .step{font-size:.9rem;color:var(--muted)}
    .center h3{margin:.1em 0}
    .arrows{display:flex;gap:8px}
    .circle-btn{width:36px;height:36px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);cursor:pointer}

    /* Móvil cards */
    .rosco-mobile{ display:none; }
    .rosco-mobile-title{ display:none; }
    @media (max-width: 900px){
      .intro-wrap{grid-template-columns:1fr}
      .rosco{display:none}
      .rosco-mobile-title{display:block;margin-top:28px;font-weight:700;color:#0f172a}
      .rosco-mobile{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:8px}
      .rosco-slide{scroll-snap-align:start;flex:0 0 86%;max-width:86%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
      .rosco-slide h3{margin:.1em 0}.rosco-slide p{color:var(--muted)}
    }

    .notice{margin-top:18px;border:1px solid var(--yellow-border);background:var(--yellow);border-radius:12px;padding:14px 16px;color:#3f3a05;box-shadow:var(--shadow)}

    /* Mitos */
    .mitos-intro p{margin:.5em 0}
    .mitos-carousel{position:relative;margin-top:14px}
    .track{display:flex;gap:16px;overflow:hidden}
    .slide{
      min-width:100%;flex:0 0 100%;
      background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
      padding: clamp(16px, 3vw, 24px);
    }
    .slide h4{margin:0 0 .4em 0}
    .slide .myth{display:inline-block;background:#eef2ff;border:1px solid #e5e7eb;padding:6px 10px;border-radius:999px;font-weight:700}
    .slide p{color:var(--muted)}
    .carousel-controls{display:flex;justify-content:center;gap:10px;margin-top:12px}
    .circle-btn{width:36px;height:36px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);cursor:pointer}
    .counter{font-size:.9rem;color:var(--muted);text-align:center;margin-top:6px}

    /* Two per view on desktop */
    @media (min-width: 900px){
      .slide{min-width:50%;flex:0 0 50%}
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      .readmore{transition:none}
    }
  



/* Rojales chip y footer */
.pill.always-active{ background:#1e59ff; color:#fff; border-color:#1e59ff; }
.pill.always-active:hover{ filter:brightness(.96); color:#fff; }

footer.site-footer{ background:#111; color:#e9eef7; padding:48px 0 28px; margin-top:64px; }
footer .container{ max-width:1080px; margin:0 auto; padding:0 16px; }
.footer-brand{ text-align:center; margin-bottom:16px; }
.footer-brand img.crest{ width:84px; height:auto; margin-bottom:10px; }
.footer-title{ font-size:28px; font-weight:800; margin:8px 0 12px; }
.footer-grid{ display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:32px; align-items:start; }
.footer-list{ list-style:none; padding:0; margin:0; }
.footer-list li{ margin:8px 0; display:flex; align-items:center; gap:10px; color:#cfd8e3; }
.footer-list a{ color:#cfd8e3; text-decoration:none; }
.footer-list a:hover{ text-decoration:underline; }
.footer-bottom{ margin-top:26px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:flex-start; align-items:center; gap:18px; }
.footer-bottom img.dipu{ height:28px; width:auto; opacity:.9; }

@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr; }
}




.section-block{margin:48px auto; max-width:1100px;}
.section-block .container{padding:0 12px;}
.section-title{font-size:28px; font-weight:800; margin:18px 0 8px;}
.section-lead{color:#4b5563; margin-bottom:18px;}
.banner-wrap{border-radius:16px; overflow:hidden; margin-bottom:16px; background:#eef3ff;}
.banner-img{width:100%; display:block; height:auto;}
.video-wrap{border-radius:14px; overflow:hidden; box-shadow:0 8px 24px rgba(16,24,40,.08); background:#000;}
.video-player{display:block; width:100%; height:540px; max-height:60vh; background:#000;}
@media (max-width:800px){ .video-player{height:240px;} }



.faq-accordion{ margin: 14px 0 18px; display:grid; gap:10px }
.faq-item{ border:1px solid var(--border); border-radius:12px; background:var(--surface); box-shadow:var(--shadow); padding:0 }
.faq-item > summary{ list-style:none; cursor:pointer; padding:12px 14px; font-weight:700; }
.faq-item > summary::-webkit-details-marker{ display:none }
.faq-a{ padding:0 14px 14px 14px; color:var(--muted) }
.faq-item[open] > summary{ background:#eef2ff; border-bottom:1px solid var(--border) }



      .os-banner-strong{
        margin-top:14px;
        border:1px solid var(--border);
        background:#f0f9ff;
        color:#0c4a6e;
        border-radius:12px;
        padding:14px 16px;
        box-shadow:var(--shadow);
      }
      .os-legend{ display:flex; gap:8px; margin-bottom:14px }
      .chip{
        display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%;
        background:var(--c); border:1px solid rgba(0,0,0,.06); box-shadow:var(--shadow);
      }
      .cards-masonry{ column-count: 1; column-gap: 14px; }
      @media (min-width: 760px){ .cards-masonry{ column-count: 2; } }
      .os-card{
        display:block; break-inside: avoid; margin:0 0 14px 0;
        border:1px solid var(--border); border-radius:16px; overflow:hidden; background:white; box-shadow:var(--shadow);
      }
      .os-card .cover{
        height:110px; display:flex; align-items:center; justify-content:flex-start; gap:10px; padding:12px 14px;
        background: var(--grad, linear-gradient(135deg,#e0e7ff,#eef2ff));
        border-bottom:1px solid var(--border);
      }
      .os-card .icon{
        width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:20px;
        background: rgba(255,255,255,.7); border:1px solid rgba(0,0,0,.06);
      }
      .os-card .title{ font-weight:800 }
      .os-card .body{ padding:12px 14px; color:var(--muted) }
      .mcq{ display:grid; gap:12px }
      .mcq-term{ font-weight:700 }
      .badge{
        display:inline-flex; align-items:center; gap:8px;
        padding:8px 12px; border-radius:999px; background:#e0f2fe; border:1px solid #bae6fd;
      }
      .mcq-options{ display:grid; gap:10px }
      .mcq-option{
        border:1px solid var(--border); border-radius:12px; padding:10px; background:white; box-shadow:var(--shadow);
        cursor:pointer; transition: transform .06s ease;
      }
      .mcq-option:active{ transform:scale(.99) }
      .mcq-option.ok{ border-color:#22c55e; background:#ecfdf5 }
      .mcq-option.bad{ border-color:#ef4444; background:#fef2f2 }
      .with-icon{ display:flex; align-items:center }
    


      /* Prevención: estilos coherentes con el sitio */
      #prevencion{ margin-top: clamp(28px, 6vw, 56px) }
      .its-grid{ display:grid; gap:14px; grid-template-columns: repeat(1, 1fr); margin-top:12px }
      @media (min-width: 760px){ .its-grid{ grid-template-columns: repeat(2, 1fr); } }
      @media (min-width: 1024px){ .its-grid{ grid-template-columns: repeat(3, 1fr); } }

      .flip{ perspective: 1000px; }
      .flip-inner{
        position: relative; width: 100%; height: 100%;
        transform-style: preserve-3d; transition: transform .5s ease;
      }
      .flip:hover .flip-inner, .flip.flip-active .flip-inner{ transform: rotateY(180deg); }
      .flip-face{
        backface-visibility: hidden; position:absolute; inset:0;
        border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; background:white; box-shadow: var(--shadow);
        display:flex; flex-direction:column; padding:14px;
      }
      .flip-front{ background: linear-gradient(180deg,#eff6ff,#fff); }
      .flip-back{ transform: rotateY(180deg); background: var(--surface); }
      .flip-title{ font-weight:800; margin-bottom:8px }
      .flip-sub{ color:var(--muted); font-size:.94rem }

      .info-banner.solid, .warn-banner{
        display:flex; gap:12px; align-items:flex-start; margin-top:18px;
        border:1px solid var(--border); border-radius:12px; padding:12px 14px; box-shadow:var(--shadow);
      }
      .info-banner.solid{ background:#ecfeff; color:#0e7490 }
      .info-banner .i{
        width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
        background:#cffafe; border:1px solid #a5f3fc; font-weight:800
      }
      .warn-banner{ background:#fff7ed; color:#9a3412 }
      .warn-banner .alert{
        width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
        background:#fed7aa; border:1px solid #fdba74; font-weight:800
      }

      /* Tabs */
      .tabs{ margin-top:14px }
      .tabs-nav{ display:flex; flex-wrap:wrap; gap:8px }
      .tab-btn{
        padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:var(--surface-2);
        cursor:pointer
      }
      .tab-btn.active{ background:#e0f2fe; border-color:#bae6fd }
      .tab-panels{ margin-top:12px }
      .tab-panel{ display:none }
      .tab-panel.show{ display:block }
      .method-grid{ display:grid; gap:12px; grid-template-columns: repeat(1,1fr) }
      @media (min-width: 760px){ .method-grid{ grid-template-columns: repeat(2,1fr) } }
      .method-card{
        border:1px solid var(--border); border-radius: var(--radius); background:white; box-shadow:var(--shadow);
        padding:14px
      }
      .method-card h4{ margin:0 0 .4em 0 }
      .method-card p{ color:var(--muted); margin:0 }
      .video-embed{ margin-top:10px }
    
      /* --- Ajustes solicitados (v12) --- */
      .tabs-nav{ margin-bottom: 10px; }
      .tabs + .method-grid{ margin-top: 16px; }
      .tab-btn.active{ background:#2563eb; border-color:#2563eb; color:#fff; }
      .tab-btn:hover{ border-color:#93c5fd; }
      /* Iconos circulares perfectos */
      .info-banner .i, .warn-banner .alert{
        width: 32px; aspect-ratio: 1 / 1; height: auto; line-height: 1; 
        border-radius: 999px;
      }



      /* === Recursos === */
      #recursos{ margin-top: clamp(28px, 6vw, 56px) }
      .mosaic-wrap{ position: relative; }
      .mosaic{
        display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr);
        gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 42px;
        scrollbar-width: thin;
      }
      .mosaic::-webkit-scrollbar{ height: 6px }
      .mosaic::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.15); border-radius: 999px }
      .mosaic-card{
        scroll-snap-align: start;
        border:1px solid var(--border); border-radius: var(--radius); background:white; box-shadow: var(--shadow);
        display:flex; flex-direction:column; overflow:hidden; min-height: 220px;
      }
      .mosaic-card .cover{ height:120px; background:#eef2ff; display:flex; align-items:center; justify-content:center; font-weight:800 }
      .mosaic-card .body{ padding:12px 12px 10px 12px; display:flex; flex-direction:column; gap:6px }
      .mosaic-card h4{ margin:0 }
      .mosaic-card p{ margin:0; color: var(--muted); line-height:1.4; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
      .mosaic-card .actions{ margin-top:auto; display:flex; gap:8px }
      .mosaic-card .btn.small{ padding:6px 10px; font-size:.9rem }

      .mosaic-arrow{
        position:absolute; top:50%; transform: translateY(-50%);
        width:34px; height:34px; border-radius:999px; border:1px solid var(--border);
        background:white; box-shadow: var(--shadow); display:grid; place-items:center; cursor:pointer;
      }
      .mosaic-arrow.prev{ left:4px } .mosaic-arrow.next{ right:4px }

      .tech-grid{ display:grid; gap:12px; grid-template-columns: repeat(1, 1fr); margin-top:10px }
      @media (min-width: 760px){ .tech-grid{ grid-template-columns: repeat(2, 1fr); } }
      @media (min-width: 1024px){ .tech-grid{ grid-template-columns: repeat(3, 1fr); } }
      .tech-card{
        border:1px solid var(--border); border-radius: var(--radius); background:white; box-shadow: var(--shadow);
        padding:14px; display:flex; align-items:center; gap:12px; cursor:pointer;
      }
      .logo{
        width:64px; aspect-ratio:1/1; border-radius:12px; background:#eef2ff; display:grid; place-items:center; font-weight:800; border:1px solid #e5e7eb;
      }
      .tech-info{ display:grid; gap:2px }
      .tech-info .name{ font-weight:800 }
      .tech-info .url{ color: var(--muted); font-size:.95rem }

      /* Modal */
      .modal-backdrop{
        position: fixed; inset:0; background: rgba(15,23,42,.5);
        display:none; align-items: center; justify-content:center; padding: 16px; z-index: 1000;
      }
      .modal-backdrop.show{ display:flex }
      .modal{
        background:white; border-radius: 16px; border:1px solid var(--border); box-shadow: var(--shadow);
        max-width: 720px; width:100%; padding:18px;
      }
      .modal header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px }
      .modal h4{ margin:0 }
      .modal .content{ color:var(--muted); display:grid; gap:10px }
      .modal .actions{ display:flex; justify-content:flex-end; margin-top:12px }
    
      /* v12d ajustes recursos */
      .mosaic{ scrollbar-width: none; }
      .mosaic::-webkit-scrollbar{ display:none; }
      .mosaic-controls{
        display:flex; align-items:center; justify-content:center; gap:10px; margin-top:10px;
      }
      .mosaic-controls .ctrl.round{
        width:36px; height:36px; border-radius:999px; border:1px solid var(--border);
        background:white; box-shadow: var(--shadow); display:grid; place-items:center; cursor:pointer;
        transition: transform .08s ease, background .15s ease;
      }
      .mosaic-controls .ctrl.round:hover{ background:#eff6ff; }
      .mosaic-controls .ctrl.round:active{ transform: scale(.96); }
      .pager-sep{ width:10px; height:2px; background:transparent; }
      .modal .actions{ display:none } /* quitar botón duplicado */
      .modal a.btn{ display:inline-flex; align-items:center; gap:6px }

      /* v12e ajustes: homogenizar altura de cards técnicas y botones inline */
      .tech-card{ min-height: 116px; }
      .modal .btnrow{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px }
      .modal .btn.small{ padding:6px 10px; }

      /* v12f: uniform tech-card sizing and clamps */
      .tech-card{
        height: 150px; /* Uniform */
        overflow: hidden;
      }
      .tech-info{ display:flex; flex-direction:column; gap:4px; align-self:stretch; }
      .tech-info .name{
        display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
      }
      .tech-info .desc{
        display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
      }
      .tech-card .btnrow{ margin-top:auto; }

      /* v12g: uniform logos, smaller buttons, spacing, fixed heights */
      .logo{ width:64px; height:64px; border-radius:12px; overflow:hidden; }
      .logo img{ width:100%; height:100%; object-fit:cover; }
      .tech-card{ height: 160px; padding:16px; }
      .tech-card .btnrow .btn.small{ padding:5px 10px; font-size:.92rem }
      .tech-card .btnrow{ gap:8px; margin-top:auto }
      .tech-card{ display:flex; align-items:flex-start; gap:14px }
      .tech-info{ flex:1; min-width:0 }
      .mosaic-card{ min-height: 260px; }
      .mosaic-card .body{ height: 140px; display:flex; flex-direction:column }
      .mosaic-card .actions{ margin-top:auto }

      /* v12i tweaks: keep 3-line space and button gaps */
      .mosaic-card .body p{ min-height: calc(1.4em * 3); }
      .tech-card .btnrow{ gap:12px; }
      .modal .btnrow{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }

      /* v12i-fix: safe tweaks */
      .mosaic-card .body{ display:flex; flex-direction:column; }
      .mosaic-card .body p{ min-height: calc(1.45em * 3); }
      .mosaic-card .actions{ margin-top:auto; }
      .tech-card .btnrow{ display:flex; gap:12px; margin-top:auto; }

      /* v12i-fix3: cards in sensibilización - ensure uniform height & bottom spacing */
      .mosaic{ padding: 8px 42px 22px 42px; } /* extra bottom so buttons never se cortan */
      .mosaic-card{ min-height: 300px; }
      .mosaic-card .cover{ height: 120px; }
      .mosaic-card .body{ min-height: 170px; display:flex; flex-direction:column; }
      .mosaic-card .body h4{ margin-bottom: 4px; }
      .mosaic-card .body p{ min-height: calc(1.45em * 3); }
      .mosaic-card .actions{ margin-top:auto; padding-bottom: 2px; }

      /* v12i-fix4: fixed uniform card height & pinned action */
      .mosaic-card{ height: 320px; }
      .mosaic-card .body{ display:grid; grid-template-rows: auto 1fr auto; min-height: unset; }
      .mosaic-card .body p{ min-height: auto; }
      .mosaic-card .actions{ margin-top:0; }

      /* v12i-fix5: mosaic controls stuck to bottom, edge-to-edge */
      .mosaic-wrap{ position: relative; padding-bottom: 0; }
      .mosaic-controls{ display:flex; align-items:center; justify-content:center; gap:14px; padding:12px 16px; border-top:1px solid var(--border); background:#fff; width:100%; box-sizing:border-box; }

      /* v12i-fix7: clamp text in mosaic so button never overlaps */
      .mosaic-card{ height: 320px; }
      .mosaic-card .body{ display:grid; grid-template-rows:auto 1fr auto; }
      .mosaic-card .body p{
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }

      /* v12n: compact tech-card layout and aligned buttons */
      .tech-card .tech-info{ display:flex; flex-direction:column; }
      .tech-card .name{
        margin:0; font-weight:600; line-height:1.25;
        display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
        min-height: 44px; /* fuerza altura similar de título */
      }
      .tech-card .btnrow{ margin-top:6px; display:flex; gap:10px; }
      .tech-card .btn.smal, .tech-card .btn.small{ padding:6px 12px; }



  /* Solo afecta a las tarjetas del mosaico de sensibilización */
  .mosaic-card{
    height: 360px !important;                /* misma altura */
    display: flex !important;
    flex-direction: column !important;
  }
  .mosaic-card .cover{ height: 120px; }

  /* Estructura: título | texto (flex) | acciones */
  .mosaic-card .body{
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-rows: auto 1fr auto !important;
    min-height: 0 !important;
  }
  .mosaic-card .body h4{ margin: 0 0 .5rem 0; }

  /* Texto usa el espacio disponible, sin solapar */
  .mosaic-card .body p{
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;        /* ajustable */
    -webkit-box-orient: vertical !important;
    margin: 0 0 .5rem 0 !important;
  }

  /* Botón siempre en la última fila, no flotante */
  .mosaic-card .actions{
    margin-top: 0 !important;
    padding-top: 6px !important;
  }



/* Footer Rojales (self-contained, appended at end to avoid head dependencies) */

.site-footer .brand { text-align:center; margin-bottom:22px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.site-footer .brand img { width:110px; height:auto; display:block; margin:0 auto; }
.site-footer .brand .t { font-size:32px; font-weight:800; text-align:center; }

html, body { height: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; }
.site-footer { margin-top: auto; background:#111; color:#e9eef7; font-family: inherit; }
.site-footer .wrap { max-width:1080px; margin:0 auto; padding:48px 16px 28px; }
.site-footer .brand { text-align:center; margin-bottom:18px; }
.site-footer .brand img { width:84px; height:auto; display:block; margin:0 auto 10px; }
.site-footer .brand .t { font-size:28px; font-weight:800; }
.site-footer .grid { display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:32px; align-items:flex-start; }
.site-footer ul { list-style:none; margin:0; padding:0; }
.site-footer li { display:flex; align-items:center; gap:10px; margin:8px 0; color:#cfd8e3; }
.site-footer a { color:#cfd8e3; text-decoration:none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .bottom { margin-top:26px; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); display:flex; align-items:center; gap:18px; }
.site-footer .bottom img { height:28px; width:auto; opacity:.9; }
@media (max-width:900px){ .site-footer .grid { grid-template-columns:1fr; } }