lo inyecta tutore-modern.js si no existe. */ .bg-fx{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; } .aurora{ position:absolute; border-radius:50%; filter:blur(85px); opacity:.26; will-change:transform; } .a1{ width:52vw; height:52vw; background:var(--green); top:-12vw; left:-8vw; animation:drift1 16s ease-in-out infinite; } .a2{ width:48vw; height:48vw; background:var(--blue); top:28vh; right:-14vw; animation:drift2 20s ease-in-out infinite; } .a3{ width:42vw; height:42vw; background:var(--teal); bottom:-14vw; left:32vw; animation:drift3 24s ease-in-out infinite; } .a4{ width:32vw; height:32vw; background:var(--green); top:118vh; right:10vw; animation:drift1 22s ease-in-out infinite; } @keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(6vw,8vh) scale(1.15) } } @keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(-8vw,-6vh) scale(1.12) } } @keyframes drift3{ 0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(5vw,-10vh) scale(1.2) } } @media (max-width:768px){ .aurora{ filter:blur(48px); opacity:.2; animation:none !important; } } /* Degradado de marca en titulares, igual que en la portada. El JS envuelve las últimas palabras de cada h1/h2 en . */ .grad-text{ background:linear-gradient(100deg,var(--green),var(--teal),var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent; } /* ================= 9 bis. PÁGINAS DE ARTÍCULO (cursos, blog, países) ===== Aquí no se agranda nada: se afina el ritmo de lectura y se moderniza el detalle. La escala de seo-pages.css se respeta tal cual. */ /* Filete degradado sobre cada apartado: marca el compás sin gritar. */ /* Fichas de normativa por país: mismo idioma de vidrio que el resto del sitio. */ /* Botones de artículo: misma pastilla que en el escaparate. */ /* Barra de navegación de artículo: pastilla activa y desenfoque. */ /* Enlaces del cuerpo: subrayado fino que se ilumina. */ /* Ruta de navegación: más discreta. */ /* --- Tarjetas de programa: el mismo vidrio y el mismo brillo de la portada --- */ /* Halo que sigue al cursor, como en las tarjetas de la portada. */ /* Antetítulo verde de sección, idéntico al de la portada. */ /* Entradilla con más presencia. */ /* Banda final: degradado de marca con vidrio, como el CTA de la portada. */ @keyframes gradientShift{ 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } /* Antetítulos del pie ("fh") con el mismo guion de ficha técnica. */ /* ================== 9 quater. COMPONENTES PROPIOS ======================== La hoja de Tailwind del sitio es un subconjunto compilado a mano: le faltan utilidades como `inline-block`, `gap-1.5`, `md:items-center`. Construir con ellas produce cajas rotas. Estas clases son CSS de verdad y no dependen de qué se compiló: se usan en todas las páginas reconstruidas. */ .tt-grid{ display:grid; gap:22px; margin-top:38px; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); } .tt-card{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:26px 26px 24px; text-decoration:none; color:inherit; min-height:100%; } .tt-card h3{ font-family:'Poppins',sans-serif; font-size:19px; font-weight:700; line-height:1.3; margin:0; color:#fff; letter-spacing:-.015em; } .tt-card p{ margin:0; font-size:14.5px; line-height:1.62; color:rgba(255,255,255,.62); } .tt-pill{ display:inline-block; padding:5px 13px; border-radius:99px; font-family:'Inter',sans-serif; font-size:12.5px; line-height:1.4; background:rgba(108,194,74,.10); border:1px solid rgba(108,194,74,.22); color:rgba(255,255,255,.76); white-space:nowrap; } .tt-more{ display:inline-flex; align-items:center; gap:7px; margin-top:auto; padding-top:12px; font-family:'Poppins',sans-serif; font-weight:700; font-size:13px; color:var(--green); transition:gap .35s var(--ease-spring); } .tt-card:hover .tt-more{ gap:13px; } /* --- Listas con iconografía de marca ---------------------------------- */ .tt-lista{ list-style:none; padding:0; margin:26px 0 0; display:grid; gap:14px; max-width:76ch; } .tt-lista li{ display:flex; align-items:flex-start; gap:14px; line-height:1.7; color:rgba(255,255,255,.74); } /* El contenido va SIEMPRE dentro de un span: en un contenedor flex, cualquier texto suelto se convierte en un elemento más y la negrita se separaría del resto de la frase formando dos columnas. */ .tt-lista .tt-txt{ flex:1 1 auto; min-width:0; text-align:justify; hyphens:auto; } .tt-lista .tt-txt strong, .tt-lista .tt-txt b{ color:#fff; font-weight:600; } .tt-ico{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; margin-top:1px; border-radius:10px; background:linear-gradient(135deg, rgba(108,194,74,.95), rgba(21,132,201,.95)); color:#fff; box-shadow:0 6px 16px -6px rgba(108,194,74,.55); transition:transform .4s var(--ease-spring), box-shadow .4s var(--ease-out); } .tt-lista li:hover .tt-ico{ transform:translateY(-2px) scale(1.06); box-shadow:0 10px 22px -8px rgba(108,194,74,.7); } .tt-num{ font-family:'Poppins',sans-serif; font-weight:700; font-size:13px; font-variant-numeric:tabular-nums; } /* --- Justificado del cuerpo ------------------------------------------- */ .tt-prosa{ max-width:76ch; margin-top:18px; line-height:1.78; color:rgba(255,255,255,.72); font-size:16.5px; text-align:justify; hyphens:auto; } /* La entradilla y los titulares NO se justifican: en textos cortos el justificado abre huecos feos entre palabras. */ body.antialiased section p.inter:not(.tt-prosa):not(.tt-txt){ text-align:left; } .tt-card p{ text-align:left; } @media (max-width:640px){ .tt-prosa, .tt-lista .tt-txt{ text-align:left; } /* en móvil el justificado deja ríos */ } /* =============== 9 quinquies. UTILIDADES QUE FALTAN EN LA HOJA =========== `tutore-tailwind.css` es un subconjunto compilado a mano y no incluye todas las utilidades que el HTML del sitio ya usaba. Al no existir, no hacían nada y provocaban cajas rotas (los botones-burbuja y las tarjetas apiladas venían de aquí). Se reponen como CSS normal. */ .inline-block{ display:inline-block; } .gap-1\.5{ gap:.375rem; } .gap-y-3{ row-gap:.75rem; } .max-w-4xl{ max-width:56rem; } .mt-10{ margin-top:2.5rem; } .mt-16{ margin-top:4rem; } .py-16{ padding-top:4rem; padding-bottom:4rem; } .text-\[16px\]{ font-size:16px; } .text-white\/25{ color:rgba(255,255,255,.25); } .space-y-3 > * + *{ margin-top:.75rem; } .space-y-4 > * + *{ margin-top:1rem; } @media (min-width:768px){ .md\:py-20{ padding-top:5rem; padding-bottom:5rem; } .md\:p-10{ padding:2.5rem; } } /* ============ 9 sexies. PIEZAS QUE VENÍAN DE LA HOJA ANTIGUA ============= Al pasar las páginas de artículo a la plantilla de la portada dejaron de cargar seo-pages.css, y con ella se fue el estilo de estos elementos. Aquí se rehacen con el lenguaje visual de la portada. */ /* --- Temario: tabla como panel de vidrio ------------------------------- */ table.temario{ width:100%; border-collapse:separate; border-spacing:0; margin-top:32px; border-radius:20px; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), var(--shadow-lift); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); font-family:'Inter',sans-serif; } table.temario caption{ caption-side:top; text-align:left; padding:0 0 14px; font-family:'Poppins',sans-serif; font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--green); } table.temario thead th{ background:linear-gradient(100deg, rgba(108,194,74,.20), rgba(21,132,201,.20)); font-family:'Poppins',sans-serif; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.9); text-align:left; padding:15px 20px; border-bottom:1px solid var(--line-strong); } table.temario td{ padding:15px 20px; font-size:15.5px; color:rgba(255,255,255,.74); border-bottom:1px solid rgba(255,255,255,.06); vertical-align:top; } table.temario tbody tr:last-child td{ border-bottom:0; } table.temario tbody tr{ transition:background .35s var(--ease-out); } table.temario tbody tr:hover{ background:rgba(108,194,74,.06); } /* Primera columna: el número dentro de una ficha de marca, centrado. La ficha va en ::before con z-index negativo, así el número queda encima sin necesidad de envolverlo en otra etiqueta. */ table.temario tbody td:first-child{ position:relative; isolation:isolate; width:76px; padding-left:22px; padding-right:22px; text-align:center; color:#fff; line-height:34px; font-family:'Poppins',sans-serif; font-weight:700; font-size:14px; font-variant-numeric:tabular-nums; } table.temario tbody td:first-child::before{ content:""; position:absolute; z-index:-1; left:50%; top:50%; transform:translate(-50%,-50%); width:34px; height:34px; border-radius:11px; background:linear-gradient(135deg, rgba(108,194,74,.95), rgba(21,132,201,.95)); box-shadow:0 6px 16px -6px rgba(108,194,74,.5); } table.temario tbody td:last-child{ white-space:nowrap; color:var(--green); font-weight:600; } @media (max-width:640px){ table.temario thead{ display:none; } table.temario tr{ display:grid; grid-template-columns:auto 1fr; gap:0 14px; padding:6px 0; } table.temario td{ border:0; padding:6px 18px; } table.temario td:first-child{ grid-row:span 2; } } /* --- Marco normativo por país: una ficha por país, no un bloque único --- `.norms` es sólo el contenedor: debe repartir, no encajonar. */ .norms{ display:grid; gap:20px; margin-top:30px; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); } .norm-card{ position:relative; overflow:hidden; border-radius:20px; padding:26px 26px 22px; border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:inset 0 1px 0 rgba(255,255,255,.09), var(--shadow-lift); transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s; } .norm-card:hover{ transform:translateY(-5px); border-color:rgba(255,255,255,.2); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 34px 66px -26px rgba(0,0,0,.85); } /* Filete superior de color: identifica el país de un vistazo. */ .norm-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--acento, var(--green)); } /* El nombre del país, en serif itálica y con su color propio. */ .norm-card h3{ font-family:'Instrument Serif', Georgia, serif; font-style:italic; font-weight:400; font-size:30px; line-height:1.1; margin:2px 0 14px; color:var(--acento, var(--green)); letter-spacing:-.01em; } .norm-card p{ margin:0 0 12px; font-size:15px; line-height:1.7; color:rgba(255,255,255,.72); text-align:justify; hyphens:auto; } .norm-card p:last-child{ margin-bottom:0; } .norm-card strong{ color:#fff; font-weight:600; } .norm-card a{ font-family:'Poppins',sans-serif; font-weight:700; font-size:13.5px; color:var(--acento, var(--green)); text-decoration:none; display:inline-flex; align-items:center; gap:6px; transition:gap .35s var(--ease-spring); } .norm-card:hover a{ gap:12px; } /* Verde, turquesa y azul: los tres tonos de la marca, uno por país. */ .norms .norm-card:nth-child(3n+1){ --acento:#6CC24A; } .norms .norm-card:nth-child(3n+2){ --acento:#2FA7A8; } .norms .norm-card:nth-child(3n+3){ --acento:#1584C9; } .curso-box{ border-radius:20px; padding:26px; margin-top:28px; border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), var(--shadow-lift); } .curso-box h2, .curso-box h3{ margin-top:0; } .meta-line{ display:inline-flex; flex-wrap:wrap; gap:10px; align-items:center; font-family:'Inter',sans-serif; font-size:14px; color:rgba(255,255,255,.6); } .cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 0; } /* --- Preguntas frecuentes dentro de un artículo ------------------------ */ .faq{ display:grid; gap:12px; margin-top:28px; } .faq h3{ font-family:'Poppins',sans-serif; font-size:17px; font-weight:700; margin:0 0 6px; color:#fff; } .faq > div, .faq > details{ border-radius:16px; padding:20px 22px; border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); } /* ============================ 10. DETALLES ============================= */ ::selection{ background:rgba(108,194,74,.32); color:#fff; } ::-webkit-scrollbar{ width:11px; } ::-webkit-scrollbar-track{ background:var(--ink); } ::-webkit-scrollbar-thumb{ background:linear-gradient(var(--green),var(--blue)); border-radius:99px; border:3px solid var(--ink); } a:focus-visible, button:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:6px; } /* Aurora un punto más contenida: con el grano y la retícula ya hay atmósfera. */ .aurora{ opacity:.26 !important; } /* ============================ 11. ACCESIBILIDAD ======================== */ @media (prefers-reduced-motion:reduce){ body::before{ animation:none; } *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .glass:hover, .seo-card:hover{ transform:none; } } /* En móvil: menos efectos costosos, misma personalidad. */ @media (max-width:768px){ body::after{ background-size:52px 52px; } .glass::after, .seo-card::after{ display:none; } .glass, .seo-card{ -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } }