/* =================================================================
   EL CIERRE DEL BLOG (templates/parts/temario-cierre.php al final de cada
   entrada): lo que usa de 40-temario.css, copiado tal cual, para no cargar
   ese fichero entero (66 KB) en el blog. head.php lo carga en las entradas
   en lugar de 40-temario. En el blog el cierre va sin animación (sin
   temario-hero.js ni .tmf--anim), con abanicos de páginas y el botón de la
   ventana del tema gratis: fuera quedan los estados iniciales de la
   animación, las tarjetas de pregunta (.tmf--q) y el formulario antiguo.
   Si cambia el cierre en 40-temario.css, cambiarlo también aquí.
   ================================================================= */

/* Manrope hasta 800 (la misma fuente que 46-comunes: el navegador la baja una vez) */
@font-face { font-family: 'Manrope Tmh'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/manrope-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Manrope Tmh'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/manrope-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.tmf {
    --tmf-ink: #0D1411; --tmf-ink2: #3F4F4A; --tmf-mut: #66766F; --tmf-g: #1E9E5A; --tmf-gd: #1A6B40; --tmf-gm: #5BD08F; --tmf-gl: #E9F7EF;
    --tmf-metal-ink: linear-gradient(100deg, #0D1411 0%, #0D1411 38%, #5E6E68 50%, #0D1411 62%, #0D1411 100%);
    --tmf-metal-g: linear-gradient(100deg, #1A6B40 0%, #1E9E5A 36%, #8FE6B5 50%, #1E9E5A 64%, #1A6B40 100%);
    --tmf-font: 'Manrope Tmh', 'Manrope', 'Segoe UI', Arial, sans-serif;
    position: relative; padding: 56px 24px 72px; background: #fff;
    font-family: var(--tmf-font); color: var(--tmf-ink); -webkit-font-smoothing: antialiased;
}
.tmf *, .tmf *::before, .tmf *::after { box-sizing: border-box; }

/* Metalizado */
.tmf-mt { background: var(--tmf-metal-ink); background-size: 260% 100%; background-position: 0 0; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; transition: background-position 1.6s cubic-bezier(.4, 0, .2, 1); }
.tmf-mt--g { background-image: var(--tmf-metal-g); }
.tmf-mt--loop { animation: tmf-sheen 6s ease-in-out infinite 2s; }
@keyframes tmf-sheen { 0%, 70% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Panel de cristal blanco */
.tmf-pan { position: relative; max-width: 1160px; margin: 0 auto; border-radius: 32px; overflow: hidden; background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(246, 251, 248, .75)); border: 1px solid rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); padding: 64px 40px 56px; text-align: center; isolation: isolate; box-shadow: 0 40px 80px -40px rgba(13, 40, 25, .35), 0 3px 10px rgba(13, 20, 17, .04), inset 0 1px 0 #fff; }
.tmf-pan::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(13, 20, 17, .08) 1px, transparent 1.2px); background-size: 20px 20px; -webkit-mask-image: radial-gradient(60% 70% at 50% 40%, #000, transparent); mask-image: radial-gradient(60% 70% at 50% 40%, #000, transparent); z-index: -1; }
.tmf-glow { position: absolute; width: 560px; height: 320px; left: 50%; top: -140px; margin-left: -280px; border-radius: 50%; background: #9BE6BE; filter: blur(110px); opacity: .5; z-index: -1; animation: tmf-breath 6s ease-in-out infinite; }
@keyframes tmf-breath { 50% { opacity: .7; transform: scale(1.08); } }

/* Páginas en abanico (estado final; el inicial, con .tmf--anim) */
.tmf-fan { position: absolute; top: 50%; width: 228px; aspect-ratio: 16 / 9; z-index: -1; pointer-events: none; }
.tmf-fan--l { left: -4px; margin-top: -84px; }
.tmf-fan--r { right: -4px; margin-top: -84px; }
.tmf-wob { position: absolute; inset: 0; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.tmf-pg { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 22px 40px -18px rgba(13, 40, 25, .45), 0 0 0 1px rgba(13, 20, 17, .06); display: grid; grid-template-columns: 38% 1fr; transition: transform 1s cubic-bezier(.2, .9, .2, 1), opacity .8s; }
.tmf-pg > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.tmf-pg__a { background: linear-gradient(160deg, #1E9E5A, #0F4D2D); color: #fff; padding: 10px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; min-width: 0; }
.tmf-pg__a b { font-size: 28px; font-weight: 800; letter-spacing: -.05em; line-height: .9; }
.tmf-pg__a span { font-size: 8.5px; font-weight: 800; line-height: 1.2; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.tmf-pg__z { position: relative; }
.tmf-pg__z i { position: absolute; border-radius: 6px; background: #E9F7EF; border: 1px solid #BFE6CF; }
.tmf-pg__z i.c { left: 34%; top: 42%; width: 34%; height: 16%; background: linear-gradient(180deg, #2BB56C, #1A6B40); border: 0; }
.tmf-pg__z i.p { width: 26%; height: 11%; }
.tmf-pg__z i.p1 { left: 8%; top: 12%; } .tmf-pg__z i.p2 { right: 8%; top: 12%; } .tmf-pg__z i.p3 { left: 8%; bottom: 14%; } .tmf-pg__z i.p4 { right: 8%; bottom: 14%; }
.tmf-free { position: absolute; top: 8px; right: 8px; padding: 3px 7px; border-radius: 999px; background: #0D1411; color: #8FE6B5; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.tmf-fan--l .tmf-pg:nth-child(1) { transform: translate(-10px, 40px) rotate(-14deg); }
.tmf-fan--l .tmf-pg:nth-child(2) { transform: translate(14px, 6px) rotate(-6deg); transition-delay: .08s; }
.tmf-fan--l .tmf-pg:nth-child(3) { transform: translate(36px, -28px) rotate(3deg); transition-delay: .16s; }
.tmf-fan--r .tmf-pg:nth-child(1) { transform: translate(10px, 40px) rotate(14deg); }
.tmf-fan--r .tmf-pg:nth-child(2) { transform: translate(-14px, 6px) rotate(6deg); transition-delay: .08s; }
.tmf-fan--r .tmf-pg:nth-child(3) { transform: translate(-36px, -28px) rotate(-3deg); transition-delay: .16s; }

/* Texto */
.tmf-eye { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: #fff; border: 1px solid #BFE6CF; box-shadow: 0 6px 14px -8px rgba(26, 107, 64, .4); font-size: 11.5px; font-weight: 800; letter-spacing: .14em; color: var(--tmf-gd); text-transform: uppercase; }
.tmf-eye i { width: 7px; height: 7px; border-radius: 50%; background: var(--tmf-g); box-shadow: 0 0 0 0 rgba(91, 208, 143, .6); animation: tmf-ping 2s infinite; }
@keyframes tmf-ping { 0% { box-shadow: 0 0 0 0 rgba(91, 208, 143, .6); } 80%, 100% { box-shadow: 0 0 0 9px rgba(91, 208, 143, 0); } }
.tmf .tmf-h2 { margin: 18px auto 0; max-width: 640px; font-family: var(--tmf-font); font-size: clamp(36px, 4.6vw, 58px); line-height: 1.02; font-weight: 800; letter-spacing: -.035em; color: var(--tmf-ink); }
.tmf .tmf-lead { margin: 16px auto 0; max-width: 500px; font-size: 16.5px; line-height: 1.6; color: var(--tmf-ink2); }

/* Fila de confianza */
.tmf-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(13, 20, 17, .08); font-size: 13px; font-weight: 700; color: var(--tmf-ink2); }
.tmf-trust span { display: inline-flex; align-items: center; gap: 7px; }
.tmf-trust svg { width: 15px; height: 15px; color: var(--tmf-g); flex: none; }

@media (max-width: 980px) {
    .tmf { padding: 40px 14px 56px; }
    .tmf-pan { padding: 196px 20px 40px; border-radius: 26px; }
    .tmf-fan { width: 180px; top: 44px; margin-top: 0; }
    .tmf-fan--l { left: 50%; margin-left: -150px; }
    .tmf-fan--r { display: none; }
    .tmf .tmf-lead { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .tmf *, .tmf *::before, .tmf *::after { animation: none !important; transition: none !important; }
    .tmf .tmf-mt { background-position: 0 0; }
}