@charset "UTF-8";
/* ==========================================================================
   RenovaPress · Biblioteca de componentes
   Piezas sacadas de los temas de Blogger de Nauzet (tema "Mantenimiento Web
   WordPress"), sin código de Blogger y con la paleta de RenovaPress.
   Catálogo con ejemplos y código para copiar: /componentes (requiere login).
   ========================================================================== */

/* Las entradas laterales (.reveal.from-left / .from-right / .zoom) están en el sistema de movimiento de main.css */

/* ---------- Slider de cabecera con imágenes ---------- */
.slideshow { position: relative; height: min(100vh, 820px); min-height: 520px; overflow: hidden; background: #111; color: #fff; }
.slideshow-slide { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), visibility .9s; }
.slideshow-slide.is-active { opacity: 1; visibility: visible; }
.slideshow-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 7s linear; }
.slideshow-slide.is-active img { transform: scale(1); }
.slideshow-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgb(86 20 213 / 70%), rgb(0 0 0 / 45%)); }
.slideshow-caption { position: relative; z-index: 2; max-width: 900px; padding: 0 80px; }
.slideshow-title { font-size: clamp(32px, 5.5vw, 57px); font-weight: 700; line-height: 1.1; letter-spacing: -1.5px; margin: 0 0 18px; color: #fff; }
.slideshow-text { font-size: clamp(16px, 2vw, 20px); font-weight: 500; margin: 0 0 30px; }
.slideshow-slide .slideshow-caption > * { opacity: 0; transform: translateY(30px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.slideshow-slide.is-active .slideshow-caption > * { opacity: 1; transform: none; }
.slideshow-slide.is-active .slideshow-caption > :nth-child(2) { transition-delay: .15s; }
.slideshow-slide.is-active .slideshow-caption > :nth-child(3) { transition-delay: .3s; }
.slideshow-arrow { position: absolute; top: 50%; z-index: 3; width: 54px; height: 54px; margin-top: -27px; border: 0; border-radius: 50%; background: rgb(255 255 255 / 12%); color: #fff; font-size: 26px; transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.slideshow-arrow:hover { background: rgb(255 255 255 / 25%); }
.slideshow-arrow.prev { left: 24px; }
.slideshow-arrow.next { right: 24px; }
.slideshow-arrow.prev:hover { transform: translateX(-4px); }
.slideshow-arrow.next:hover { transform: translateX(4px); }
.slideshow-dots { position: absolute; left: 0; right: 0; bottom: 110px; z-index: 3; display: flex; justify-content: center; gap: 10px; }
.slideshow-dots button { width: 12px; height: 12px; padding: 0; border: 2px solid #fff; border-radius: 20px; background: transparent; transition: width var(--dur) var(--ease), background var(--dur) var(--ease); }
.slideshow-dots button[aria-current="true"] { width: 34px; background: #fff; }
.slideshow .scroll-btn { z-index: 3; }

/* ---------- Tarjetas con círculo (Velocidad, Backups, Protección…) ---------- */
.circle-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 70px 24px; margin-top: 70px; }
.circle-box { position: relative; padding: 78px 22px 30px; border-radius: 12px; background: #fff; box-shadow: var(--shadow); text-align: center; }
.circle-icon { position: absolute; top: -55px; left: 50%; width: 115px; height: 115px; margin-left: -57.5px; display: grid; place-items: center; border-radius: 50%; background: var(--cyan); color: #fff; font-size: 40px; box-shadow: 0 10px 30px rgb(0 187 211 / 35%); transition: transform var(--dur-slow) var(--ease), background var(--dur) var(--ease); }
.circle-box:is(:hover, :focus-visible) .circle-icon { transform: rotate(360deg); background: var(--violet); }
.circle-box h3 { font-size: 19px; margin: 0 0 10px; }
.circle-box p { margin: 0; color: var(--muted); }

/* ---------- Bloque de dos columnas con foto y círculo degradado ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.split.reverse > :first-child { order: 2; }
.split.split-single { grid-template-columns: 1fr; max-width: 820px; }
a.circle-box { display: block; color: inherit; }
.photo-circle { position: relative; z-index: 0; }
.photo-circle::before { content: ''; position: absolute; z-index: -1; top: 50%; left: 50%; width: 112%; aspect-ratio: 1; transform: translate(-50%, -46%); border-radius: 50%; background: linear-gradient(225deg, #e6f9fc 0%, rgb(233 244 255 / 0%) 70%); }
.photo-circle.circle-violet::before { background: linear-gradient(225deg, #f3f0fe 0%, rgb(233 244 255 / 0%) 70%); }
.photo-circle img { display: block; margin: 0 auto; border-radius: 12px; }

/* ---------- Tarjetas de equipo ---------- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.team-card { padding: 20px 20px 16px; border-radius: 12px; background: #fff; box-shadow: var(--shadow); text-align: center; }
.team-photo { position: relative; overflow: hidden; border-radius: 10px; aspect-ratio: 19 / 14; background: var(--bg-soft); }
.team-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: .85; transition: transform var(--dur-slow) var(--ease), filter var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease); }
.team-card:hover .team-photo img { transform: scale(1.1); filter: none; opacity: 1; }
.team-role { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px; background: linear-gradient(0deg, rgb(105 69 232 / 92%), rgb(105 69 232 / 0%)); color: #fff; font-size: 15px; font-weight: 600; transform: translateY(100%); transition: transform var(--dur) var(--ease); }
.team-card:hover .team-role, .team-card:focus-within .team-role { transform: none; }
.team-name { font-size: 17px; font-weight: 600; letter-spacing: -.5px; margin: 22px 0 4px; }
.team-text { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.social-circles { display: flex; justify-content: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.social-circles a { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--cyan); color: var(--cyan); font-size: 19px; transition: transform var(--dur-slow) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); }
.social-circles a:hover, .social-circles a:focus-visible { transform: rotate(360deg); background: var(--cyan); color: #fff; }

/* ---------- Barras de habilidades animadas ---------- */
.skillbars { margin: 10px 0 0; }
.skillbar { margin-bottom: 22px; }
.skillbar-head { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 8px; }
.skillbar-track { height: 6px; border-radius: 6px; background: #e7e6ec; overflow: hidden; }
.skillbar-fill { height: 100%; width: 0; border-radius: 6px; background: var(--grad); transition: width 1.6s var(--ease); }
.skillbars.in .skillbar-fill { width: var(--p); }

/* ---------- Selector de periodo en precios (mensual / trimestral / anual) ---------- */
.billing-toggle { display: inline-flex; gap: 4px; padding: 5px; margin: 0 auto 40px; border-radius: 50px; background: #fff; box-shadow: var(--shadow); }
.billing-wrap { text-align: center; }
.billing-toggle button { height: 42px; padding: 0 24px; border: 0; border-radius: 50px; background: transparent; color: var(--ink); font-weight: 600; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.billing-toggle button[aria-pressed="true"] { background: var(--cyan); color: #fff; }
[data-period]:not(.is-current) { display: none; }
.price-card .discount-bubble.green { background: var(--green); }
.plan-details { margin-top: 16px; border-top: 1px solid #e4e5ff; padding-top: 10px; text-align: left; }
.plan-details .acc-btn { font-weight: 600; font-size: 14px; color: var(--violet); --acc-size: 22px; } /* acordeón: motion.css */
.plan-details .acc-panel p { margin: 8px 0 0; font-size: 14px; color: var(--muted); }

/* ---------- Preguntas frecuentes en dos columnas ---------- */
.faq.faq-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; align-items: start; }

/* ---------- Prefooter con círculos de contacto ---------- */
.prefooter { background: var(--grad); color: #fff; padding: 70px 0; }
.prefooter-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; align-items: center; }
.prefooter-logo { font-size: 30px; font-weight: 700; letter-spacing: -1px; margin: 0 0 10px; color: #fff; }
.prefooter p { opacity: .92; }
.contact-circle { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: #fff; font-weight: 500; }
.contact-circle .lnr { width: 90px; height: 90px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #fff; font-size: 34px; transition: transform var(--dur-slow) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); }
.contact-circle:hover .lnr, .contact-circle:focus-visible .lnr { transform: rotate(360deg); background: #fff; color: var(--violet); }

/* ---------- Casilla de verificación personalizada ---------- */
.check-control { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.check-control input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; }
.check-control .check-box { flex: 0 0 20px; height: 20px; border: 1px solid #cec1f9; border-radius: 4px; background: #f3f0fe; display: grid; place-items: center; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.check-control .check-box::after { content: ''; width: 5px; height: 10px; margin-top: -2px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform var(--dur-fast) var(--ease); }
.check-control input:checked + .check-box { background: var(--cyan); border-color: var(--cyan); }
.check-control input:checked + .check-box::after { transform: rotate(45deg) scale(1); }
.check-control input:focus-visible + .check-box { outline: 3px solid var(--cyan); outline-offset: 2px; }

/* ---------- Catálogo /componentes ---------- */
.lib-nav { position: sticky; top: calc(var(--header-h) + 10px); z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; margin-bottom: 30px; border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.lib-nav a { padding: 4px 12px; border-radius: 30px; background: var(--bg-soft); font-size: 13px; font-weight: 500; }
.lib-nav a:hover { background: var(--cyan); color: #fff; }
.lib-item { margin-bottom: 70px; }
.lib-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; border-bottom: 1px solid #e4e5ff; padding-bottom: 10px; margin-bottom: 26px; }
.lib-head h2 { font-size: 22px; margin: 0; }
.lib-head code { font-size: 13px; color: var(--violet); }
/* ---------- Tarjetas de equipo con vídeo al pasar el ratón (.yw-animation-team) ---------- */
.yw-team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.yw-team-grid.yw-team-grid--few { grid-template-columns: repeat(auto-fit, minmax(0, 380px)); justify-content: center; }
.yw-team-card { overflow: hidden; border-radius: 24px; background: #fff; box-shadow: var(--shadow); text-align: center; }
.yw-animation-team { position: relative; overflow: hidden; aspect-ratio: 16 / 9; line-height: 0; background: var(--bg-soft); }
.yw-animation-team .base, .yw-animation-team .over { width: 100%; height: 100%; object-fit: cover; }
.yw-animation-team .base { display: block; }
/* El vídeo solo se ve cuando ya está reproduciéndose: sin fotogramas negros ni saltos */
.yw-animation-team .over { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.yw-animation-team.is-playing .over { opacity: 1; }
.yw-team-body { padding: 30px 26px 34px; background: linear-gradient(180deg, var(--bg-blue) 0%, #fff 55%); }
.yw-team-name { margin: 0 0 8px; font-size: 21px; font-weight: 700; letter-spacing: -.3px; color: #0d1b3e; }
.yw-team-text { margin: 0 auto; max-width: 30ch; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.yw-team-role { display: inline-block; margin-top: 14px; font-size: 16px; font-weight: 500; color: #6b7a99; }

/* ---------- Página de servicio · PROPUESTA de rediseño (?propuesta=1) ---------- */
.svc-hero { position: relative; overflow: hidden; padding: 64px 0 90px; background: var(--grad-hero); background-size: 300% 300%; animation: hero-gradient 22s ease infinite; color: #fff; }
.svc-hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(45deg, rgba(0, 0, 0, .18) 50%, rgba(0, 0, 0, 0) 50%); background-size: 3px 3px; pointer-events: none; }
.svc-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: center; }
.svc-hero .breadcrumbs { justify-content: flex-start; }
.svc-hero h1 { margin: 14px 0 16px; font-size: clamp(32px, 4.6vw, 52px); line-height: 1.1; letter-spacing: -1.4px; color: #fff; }
.svc-hero-text { max-width: 560px; margin: 0; font-size: 18px; opacity: .95; }
.svc-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.svc-hero-points { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; padding: 0; font-size: 14.5px; font-weight: 500; }
.svc-hero-points .lnr { color: var(--green); margin-right: 4px; }
.svc-quote-card { position: relative; padding: 36px 32px 30px; border-radius: 30px 8px 30px 8px; background: #fff; color: var(--ink); box-shadow: 0 30px 70px rgb(13 5 60 / 30%); text-align: center; }
.svc-quote-icon { position: absolute; top: -34px; left: 50%; width: 68px; height: 68px; margin-left: -34px; display: grid; place-items: center; border-radius: 50%; background: var(--cyan); color: #fff; font-size: 28px; box-shadow: 0 10px 30px rgb(0 187 211 / 40%); transition: transform var(--dur-slow) var(--ease), background var(--dur) var(--ease); }
.svc-quote-card:hover .svc-quote-icon { transform: rotate(360deg); background: var(--violet); }
.svc-quote-label { margin: 18px 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.svc-quote-price { margin: 0; font-size: clamp(28px, 3vw, 36px); font-weight: 700; letter-spacing: -1px; line-height: 1.15; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.svc-quote-note { margin: 10px 0 22px; font-size: 13.5px; color: var(--muted); }
.svc-quote-card .btn { width: 100%; }
.svc-quote-phone { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 600; color: var(--violet); }
.svc-quote-phone:hover { color: var(--cyan); }
.svc-subnav { position: sticky; top: var(--header-h); z-index: 20; background: rgb(255 255 255 / 92%); backdrop-filter: blur(8px); border-bottom: 1px solid #eef1f8; }
.svc-subnav .row { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.svc-subnav .row::-webkit-scrollbar { display: none; }
.svc-subnav a { flex: 0 0 auto; padding: 16px 14px; font-size: 14.5px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.svc-subnav a:hover, .svc-subnav a:focus-visible { color: var(--cyan); border-bottom-color: var(--cyan); }
.svc-subnav .svc-subnav-cta { margin-left: auto; padding: 9px 20px; border: 0; border-radius: 50px; background: var(--cyan); color: #fff; font-weight: 600; }
.svc-subnav .svc-subnav-cta:hover { background: var(--violet); color: #fff; }
.svc-v2 [id] { scroll-margin-top: 140px; }
.svc-intro-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px; align-items: start; }
.svc-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.svc-feature { padding: 32px 28px; border-radius: 26px 6px 26px 6px; background: #fff; box-shadow: var(--shadow); }
.svc-feature h3 { margin: 18px 0 8px; font-size: 18.5px; letter-spacing: -.3px; }
.svc-feature p { margin: 0; color: var(--muted); font-size: 15px; }
.svc-feature-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; font-size: 24px; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.svc-feature-icon .lnr { transition: transform var(--dur-slow) var(--ease); }
.svc-feature:hover .svc-feature-icon .lnr { transform: rotate(360deg); }
.svc-c-cyan { background: #00bbd31f; color: var(--cyan); }
.svc-c-violet { background: #6945e81a; color: var(--violet); }
.svc-c-magenta { background: #d53fd41a; color: var(--magenta); }
.svc-c-pink { background: #e705781a; color: var(--pink); }
.svc-c-green { background: #29dfa426; color: #16a87a; }
.svc-feature:hover .svc-feature-icon { background: var(--grad); color: #fff; }
.svc-timeline { list-style: none; position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 28px; margin: 0; padding: 0; }
.svc-timeline::before { content: ''; position: absolute; top: 34px; left: 12%; right: 12%; border-top: 2px dashed #c9d3ea; }
.svc-timeline li { position: relative; text-align: center; }
.svc-step { position: relative; z-index: 1; display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 50%; background: #fff; border: 2px solid var(--cyan); color: var(--cyan); font-size: 24px; font-weight: 700; box-shadow: 0 0 0 8px #fff; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.svc-timeline li:hover .svc-step { background: var(--cyan); color: #fff; }
.svc-timeline h3 { margin: 0 0 8px; font-size: 18px; }
.svc-timeline p { margin: 0; color: var(--muted); font-size: 15px; }
.svc-fit { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.svc-price-card { position: relative; overflow: hidden; padding: 42px 34px 34px; border-radius: 30px 8px 30px 8px; background: #fff; box-shadow: var(--shadow-hover); }
.svc-price-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: var(--grad); }
.svc-price-label { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--cyan); }
.svc-price { margin: 6px 0 4px; font-size: clamp(28px, 3vw, 38px); font-weight: 700; letter-spacing: -1px; line-height: 1.15; }
.svc-price-note { margin: 0; font-size: 13.5px; color: var(--muted); }
.svc-price-list { list-style: none; margin: 22px 0 26px; padding: 0; }
.svc-price-list li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed #e3e8f4; font-size: 15px; }
.svc-price-list .lnr { color: var(--green); }
.svc-price-card .btn { width: 100%; margin-top: 10px; }
.svc-midcta { padding: 100px 0; background-image: url('../img/frase-fondo.webp'); }
.svc-midcta .section-title { color: #fff; }

/* ---------- Tarjetas de opinión (página /opiniones) ---------- */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.testimonial.review-card { padding: 34px 28px 30px; border-radius: 26px 6px 26px 6px; background: #fff; box-shadow: var(--shadow); color: var(--ink); }
.review-card .pic { border-color: var(--cyan); }
.review-card .testimonial-quote { color: var(--cyan); }
.review-card .description { font-size: 15.5px; }
.review-card .post small { color: var(--muted); opacity: 1; }
.review-card .review-video { margin-top: 18px; }

.lib-demo { padding: 30px; border-radius: 14px; background: var(--bg-soft); overflow: hidden; }
.lib-demo.flush { padding: 0; overflow: hidden; }
.lib-code { margin-top: 14px; }
.lib-code .acc-btn { justify-content: flex-start; font-weight: 600; font-size: 14px; color: var(--cyan); --acc-size: 22px; }
.lib-code pre { max-height: 380px; overflow: auto; margin: 10px 0 0; padding: 18px; border-radius: 10px; background: #15161c; color: #e8e8f0; font-size: 12.5px; line-height: 1.6; }
.lib-note { font-size: 14px; color: var(--muted); margin: 10px 0 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .circle-features { grid-template-columns: 1fr 1fr; }
  .reviews-grid, .yw-team-grid { grid-template-columns: 1fr 1fr; }
  .svc-hero-grid, .svc-intro-grid, .svc-fit { grid-template-columns: 1fr; gap: 50px; }
  .svc-quote-card { max-width: 460px; }
  .svc-features { grid-template-columns: 1fr 1fr; }
  .svc-timeline { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .svc-timeline::before { display: none; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .prefooter-grid { grid-template-columns: 1fr 1fr; }
  .prefooter-grid > :first-child { grid-column: 1 / -1; text-align: center; }
}
@media (max-width: 760px) {
  .slideshow-caption { padding: 0 24px; }
  .slideshow-arrow { display: none; }
  .circle-features, .team-grid, .split, .faq.faq-2col, .reviews-grid, .yw-team-grid { grid-template-columns: 1fr; }
  .yw-team-grid.yw-team-grid--few { grid-template-columns: 1fr; }
  .svc-hero { padding: 40px 0 70px; }
  .svc-features, .svc-timeline { grid-template-columns: 1fr; }
  .svc-timeline li { display: grid; grid-template-columns: 56px 1fr; gap: 0 16px; text-align: left; }
  .svc-step { grid-row: span 2; width: 56px; height: 56px; margin: 0; font-size: 20px; box-shadow: none; }
  .svc-subnav a { padding: 13px 10px; font-size: 13.5px; }
  .svc-price-card, .svc-quote-card { padding: 32px 22px 26px; }
  .split.reverse > :first-child { order: 0; }
  .billing-toggle button { padding: 0 14px; font-size: 14px; }
  .lib-demo { padding: 18px; }
  .lib-nav { position: static; flex-wrap: nowrap; overflow-x: auto; }
  .lib-nav a { white-space: nowrap; }
}
/* Sin movimiento (html.no-motion, ver main.css) */
.no-motion :is(.slideshow-slide img, .slideshow-caption > *, .skillbar-fill) { transition: none !important; }
.no-motion .yw-animation-team .over { display: none; }

/* ---------- Notificación push de la esquina (#push-notice, includes/push-notice.php) ----------
   CSS del snippet push_notification de Nauzet, con prefijo push-notice. Cambios: margin 0 en figure
   (sin el reset de WordPress), pointer-events en la tarjeta visible (si no, la X no se puede pulsar)
   y posición en móvil para no tapar los botones flotantes. */
#push-notice { position: fixed; z-index: 999999; bottom: 20px; left: 36px; width: 300px; display: none; border: none !important; outline: none !important; pointer-events: none; box-shadow: none !important; }
#push-notice.is-ready { display: block; }
.push-notice-card { position: relative; display: flex; align-items: center; margin: 0; padding: 15px; background: #ffffffd9; -webkit-backdrop-filter: blur(.5rem); backdrop-filter: blur(.5rem); box-shadow: 0 3px 25px 0 rgb(103 151 255 / 11%), 0 0 30px 0 rgb(103 151 255 / 11%); border-radius: 9px; overflow: hidden; visibility: hidden; opacity: 0; transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease); }
.push-notice-card.is-visible { visibility: visible; opacity: 1; pointer-events: auto; }
.push-notice-media { flex: 0 0 auto; box-sizing: border-box; width: 60px; height: 60px; margin: 0 15px 0 0; padding: 3px; background: #fff; text-align: center; border: 1px solid #b7cee4; border-radius: 100%; }
.push-notice-media picture, .push-notice-media img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.push-notice-content { flex: 1; }
.push-notice-text { font-size: 14px; color: #4b5777; font-weight: 400; }
.push-notice-number { font-weight: 800; font-size: 16px; }
.push-notice-close { position: absolute; right: 5px; top: 3px; color: #183d7d; background: none; border: 1px solid #b7cee4; font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1.2; cursor: pointer; padding: 3px 8px; border-radius: 100%; }
.lib-demo .push-notice { position: absolute; left: 36px; bottom: 20px; width: 300px; max-width: calc(100% - 72px); }
.lib-demo:has(> .push-notice) { min-height: 140px; }
@media (max-width: 760px) { #push-notice { left: 12px; bottom: 16px; width: calc(100% - 92px); max-width: 300px; } }

/* ---------- Vídeo con portada (.video-thumb, video_thumb()) y botón de play ÚNICO de la web (.play-btn, video_play()) ----------
   Código de Nauzet, tal cual. Abre el modal único ([data-video] → .video-modal de main.js); YouTube solo carga al pulsar.
   .play-btn--static: fuera del centro de .video-thumb (slider de testimonios y pastilla de .video-box), tamaño con --play-btn-size. */
.video-thumb{position:relative;width:100%;max-width:800px;margin:0 auto;overflow:hidden;border-radius:21px}
.video-thumb__zoom{overflow:hidden;border-radius:12px}
.video-thumb img{width:100%;height:auto;display:block;transition:transform .6s ease}
.video-thumb:hover img{transform:scale(1.05)}
.play-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;justify-content:center;width:92px;height:92px;border:0;border-radius:50%;background:#fe3996;cursor:pointer;box-shadow:0 5px 9px -4px rgba(32,53,90,.39);z-index:2;transition:background-color .6s ease}
.play-btn__icon{width:33px;height:33px}
.video-thumb:hover .play-btn,.play-btn:focus-visible{background:#4741d7}
.play-btn::before{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(254,57,150,.35);animation:play-pulse 1.9s ease-out infinite;z-index:-1}
@keyframes play-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.2);opacity:0}}
@media (max-width:480px){.play-btn{width:80px;height:80px}.play-btn__icon{width:32px;height:32px}}
@media (prefers-reduced-motion:reduce){.play-btn::before{animation:none}} /* el zoom de la imagen es transición: funciona siempre (regla de Nauzet) */
.play-btn--static { position: relative; left: auto; top: auto; transform: none; flex: none; width: var(--play-btn-size, 92px); height: var(--play-btn-size, 92px); }
.play-btn--static .play-btn__icon { width: 36%; height: 36%; }
:is(.play-btn--static:hover, .video-box-trigger:hover .play-btn) { background: #4741d7; }

/* ---------- Slider de vídeo-testimonios con avatares (.video-slider, includes/video-slider.php) ----------
   De Sublime Rating. Ancho completo del contenedor (radio con --video-slider-radius); .video-slider--full, de borde a borde.
   Colores de la capa con data-accent: violet (por defecto), cyan, indigo, pink. JS: módulo «Slider de vídeo-testimonios» de main.js. */
.video-slider { position: relative; overflow: hidden; padding: 0 0 140px; }
.video-slider-slides { position: relative; height: 645px; border-radius: var(--video-slider-radius, 28px); overflow: hidden; box-shadow: 0 24px 64px rgba(15, 23, 42, .22); background: #0f172a; }
.video-slider-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .9s ease, visibility .9s ease; }
.video-slider-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-slider--full .video-slider-slides { border-radius: 0; box-shadow: none; }
.video-slider-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.video-slider-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 23, 42, .18) 0%, rgba(15, 23, 42, .44) 100%), linear-gradient(135deg, rgba(109, 93, 252, .62) 0%, rgba(79, 70, 229, .56) 100%); }
.video-slider-slide[data-accent="cyan"] .video-slider-overlay { background: linear-gradient(180deg, rgba(15, 23, 42, .18) 0%, rgba(15, 23, 42, .44) 100%), linear-gradient(135deg, rgba(6, 182, 212, .62) 0%, rgba(14, 116, 144, .56) 100%); }
.video-slider-slide[data-accent="indigo"] .video-slider-overlay { background: linear-gradient(180deg, rgba(15, 23, 42, .18) 0%, rgba(15, 23, 42, .44) 100%), linear-gradient(135deg, rgba(67, 56, 202, .64) 0%, rgba(49, 46, 129, .58) 100%); }
.video-slider-slide[data-accent="pink"] .video-slider-overlay { background: linear-gradient(180deg, rgba(15, 23, 42, .18) 0%, rgba(15, 23, 42, .44) 100%), linear-gradient(135deg, rgba(231, 5, 120, .6) 0%, rgba(213, 63, 212, .54) 100%); }
.video-slider-content { position: relative; z-index: 1; height: 645px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 28px 148px; text-align: center; }
.video-slider-quote { width: 100%; max-width: 980px; min-height: 210px; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.video-slider-quote p { max-width: 860px; margin: 0; color: #fff; font-size: clamp(1.9rem, 3vw, 3rem); line-height: 1.14; font-style: italic; letter-spacing: -.02em; text-wrap: balance; }
.video-slider-quote cite { display: block; margin-top: 18px; color: rgba(255, 255, 255, .92); font-size: .8rem; font-weight: 800; font-style: normal; letter-spacing: .24em; text-transform: uppercase; }
.video-slider .play-btn { margin-top: 28px; }
/* Entrada del testimonio activo: texto, firma y botón suben en cascada */
.video-slider-slide :is(.video-slider-quote p, .video-slider-quote cite, .play-btn) { opacity: 0; transform: translate3d(0, 24px, 0); }
.video-slider-slide.is-active :is(.video-slider-quote p, .video-slider-quote cite, .play-btn) { opacity: 1; transform: none; }
.video-slider-slide.is-active.is-animating .video-slider-quote p { animation: video-slider-up .72s var(--ease) .06s both; }
.video-slider-slide.is-active.is-animating .video-slider-quote cite { animation: video-slider-up .72s var(--ease) .18s both; }
.video-slider-slide.is-active.is-animating .play-btn { animation: video-slider-up .72s var(--ease) .3s both; }
.video-slider-avatars { position: relative; z-index: 3; display: flex; justify-content: center; gap: 10px; margin-top: -120px; padding: 0 16px; }
.video-slider-avatar { width: 78px; height: 78px; padding: 0; border: 0; border-radius: 999px; background: none; cursor: pointer; opacity: .78; transition: opacity .28s ease; }
.video-slider-avatar img { display: block; width: 100%; height: 100%; border: 3px solid rgba(255, 255, 255, .9); border-radius: 999px; object-fit: cover; box-shadow: 0 10px 24px rgba(15, 23, 42, .18); filter: saturate(.72); }
.video-slider-avatar:hover { opacity: .96; }
.video-slider-avatar.is-active { opacity: 1; }
.video-slider-avatar.is-active img { filter: saturate(1); box-shadow: 0 16px 32px rgba(15, 23, 42, .22); }
.video-slider-avatar:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@keyframes video-slider-up { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
@media (max-width: 820px) {
  .video-slider { padding-bottom: 112px; }
  .video-slider-slides, .video-slider-content { height: 560px; }
  .video-slider-content { padding: 38px 18px 122px; }
  .video-slider-quote { min-height: 190px; }
  .video-slider-quote p { max-width: 700px; line-height: 1.18; }
  .video-slider-avatars { margin-top: -96px; gap: 8px; }
  .video-slider-avatar { width: 64px; height: 64px; }
}
@media (max-width: 560px) {
  .video-slider { padding-bottom: 96px; }
  .video-slider-slides, .video-slider-content { height: 520px; }
  .video-slider-content { padding: 28px 16px 108px; }
  .video-slider-quote { min-height: 170px; }
  .video-slider .play-btn { --play-btn-size: 82px; margin-top: 22px; }
  .video-slider-avatars { margin-top: -84px; }
}

/* ---------- Bloque de vídeo con popup (.video-box, includes/video-box.php) ----------
   De Sublime Rating: vídeo corto en bucle (sin sonido) con la pastilla «Ver vídeo»; al pulsar, el vídeo completo
   en el modal único. El icono de la pastilla es el botón de play único (video_play()) a 42 px. */
.video-box { position: relative; display: block; }
.video-box-trigger { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 34px; overflow: hidden; background: #0f172a; cursor: pointer; box-shadow: 0 24px 64px rgba(15, 23, 42, .18); }
.video-box-trigger:focus-visible { outline: 2px solid #6d5dfc; outline-offset: 3px; }
.video-box-loop { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #0f172a; }
.video-box-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 23, 42, .04) 0%, rgba(15, 23, 42, .18) 100%); pointer-events: none; }
.video-box-watch { --play-btn-size: 42px; position: absolute; right: 35px; bottom: 35px; z-index: 2; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 24px 12px 10px; border: 1px solid rgba(255, 255, 255, .72); border-radius: 999px; background: rgba(0, 0, 0, .15); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.video-box-watch-text { font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; white-space: nowrap; }
.video-box-trigger:hover .video-box-watch { transform: translateY(-2px); background: rgba(0, 0, 0, .24); border-color: rgba(255, 255, 255, .92); box-shadow: 0 12px 28px rgba(15, 23, 42, .16); }
@media (max-width: 900px) {
  .video-box-watch { --play-btn-size: 38px; right: 20px; bottom: 20px; min-height: 56px; padding: 10px 18px 10px 10px; gap: 10px; }
  .video-box-watch-text { font-size: 14px; }
}
@media (max-width: 640px) {
  .video-box-watch { --play-btn-size: 34px; right: 14px; bottom: 14px; min-height: 50px; padding: 8px 14px 8px 8px; gap: 8px; }
  .video-box-watch-text { font-size: 13px; }
}

/* ---------- Métricas (.metrics-box > .metrics-grid > .metric-card) ----------
   De Sublime Rating: fondo oscuro y tarjetas translúcidas. El número usa el contador único [data-count] de main.js. */
.metrics-box { padding: 90px 0; background: #111; color: #fff; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.metric-card { padding: 28px 22px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 24px; background: rgba(255, 255, 255, .06); text-align: center; }
.metric-card strong { display: block; color: #fff; font-size: 52px; line-height: 1; letter-spacing: -.05em; }
.metric-card span { display: block; margin-top: 10px; color: rgba(255, 255, 255, .82); line-height: 1.5; }
@media (max-width: 1100px) { .metrics-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .metrics-grid { grid-template-columns: 1fr; } }

/* ---------- Ventajas en fila con icono (.mini-features) ----------
   Icono en cuadrado de color suave: el mismo .mega-icon del megamenú (con --cyan, --violet, --pink, --green…). En móvil, en columna. */
.mini-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 28px 0 0; padding: 0; list-style: none; }
.mini-features li { display: grid; align-content: start; gap: 4px 14px; }
.mini-features .mega-icon { width: 48px; height: 48px; margin-bottom: 8px; border-radius: 14px; font-size: 20px; } /* tamaño fijo: el móvil del megamenú lo reduce */
.mini-features strong { font-size: 16px; line-height: 1.3; }
.mini-features p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
@media (max-width: 760px) {
  .mini-features { grid-template-columns: 1fr; gap: 18px; }
  .mini-features li { grid-template-columns: 48px 1fr; }
  .mini-features .mega-icon { grid-row: span 2; margin: 0; }
}

/* ---------- Botón con flecha en círculo (.btn.btn-arrow) y nota con check (.btn-micro) ----------
   Variante del .btn de la web (misma onda): <a class="btn btn-cyan btn-arrow"><span>Texto</span><span class="btn-arrow-icon lnr lnr-arrow-right"></span></a> */
.btn-arrow { gap: 14px; padding-right: 7px; }
.btn-arrow-icon { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; background: #fff; color: var(--cyan); font-size: 14px; transition: transform var(--dur-fast) var(--ease); }
.btn-arrow:is(:hover, :focus-visible) .btn-arrow-icon { transform: translateX(3px); }
.btn-micro { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 500; }
.btn-micro .lnr { color: var(--green); font-size: 18px; }

/* ---------- Vídeo destacado (.featured-video): forma azul curva detrás y tarjeta flotante «Resultados reales» ----------
   Forma y tarjeta son decorativas (aria-hidden); las barras son CSS puro, sin cifras. Dentro va video_thumb(). */
.featured-video { position: relative; padding: 0 0 44px 34px; }
.featured-video-shape { position: absolute; left: 0; bottom: 0; width: 78%; height: 82%; border-radius: 62% 38% 46% 54% / 48% 56% 44% 52%; background: var(--cyan); }
.featured-video .video-thumb { box-shadow: var(--shadow-soft); }
.results-card { position: absolute; right: 0; bottom: 0; z-index: 3; display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 12px; padding: 14px 18px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-hover); }
.results-card-icon { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #29dfa426; color: #16a87a; font-size: 18px; }
.results-card strong { font-size: 14px; line-height: 1.2; }
.results-card-bars { display: flex; align-items: flex-end; gap: 4px; height: 24px; }
.results-card-bars span { width: 8px; border-radius: 3px; background: var(--green); }
.results-card-bars span:nth-child(1) { height: 30%; }
.results-card-bars span:nth-child(2) { height: 50%; }
.results-card-bars span:nth-child(3) { height: 72%; }
.results-card-bars span:nth-child(4) { height: 100%; }
@media (max-width: 760px) { .featured-video { padding: 0 0 40px 16px; } .results-card { padding: 12px 14px; } }

/* ---------- Servicios de la home: rejilla bento (includes/services-bento.php, bloque «Servicios de la home» de main.js) ----------
   Maqueta aprobada: docs/maquetas/maqueta-servicios.html. Tarjetas de borde fino sin sombras con la esquina asimétrica
   (--radius-card); al pasar el ratón suben con el grupo de hover del sistema de movimiento (main.css) y el borde se vuelve cian.
   Los filtros se quedan fijos bajo el menú (sticky dentro de .services-browse) y se sueltan al llegar al bloque oscuro.
   Responsive con @container: 4 columnas, 2 en tablet y 1 en móvil. */
.services-bento { container-type: inline-size; background: var(--bg-soft); padding: 80px 0 72px; }
.services-bento .row { padding: 0 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
:is(.services-head, .advantages-head) { display: grid; justify-items: center; text-align: center; max-width: 820px; margin: 0 auto; }
:is(.services-head, .benefits-head, .advantages-head, .join-head, .blog-head) .yw-text-top-title { letter-spacing: 1.2px; margin-bottom: 12px; } /* texto superior y separador: comunes a los bloques de la home */
:is(.services-head, .benefits-head, .advantages-head, .join-head, .blog-head) .section-title { margin: 0; text-wrap: balance; }
:is(.services-head, .benefits-head, .advantages-head, .join-head, .blog-head) .section-title::after { content: ''; display: block; width: 46px; height: 3px; margin-top: 18px; border-radius: 3px; background: var(--cyan); }
:is(.services-head, .advantages-head, .join-head, .blog-head) .section-title { font-size: 44px; letter-spacing: -1.6px; line-height: 1.08; }
:is(.services-head, .advantages-head) .section-title::after { margin-inline: auto; }
:is(.services-lead, .advantages-lead) { max-width: 58ch; margin: 16px auto 0; color: #333; font-size: 16px; }
.services-browse { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.services-filters { position: sticky; top: calc(var(--header-h) + 12px); z-index: 5; display: flex; align-items: center; justify-content: center; gap: 8px 14px; width: fit-content; max-width: 100%; margin: 0 auto; padding: 7px; border: 1px solid transparent; border-radius: 50px; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.services-filters.is-stuck { background: rgb(255 255 255 / 92%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: var(--line); }
.services-filters-label { padding-left: 10px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.services-filters-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.services-filter { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 18px; border: 1px solid var(--line); border-radius: 50px; background: var(--white); color: var(--black); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.services-filter:hover { border-color: var(--cyan); color: var(--cyan-dark); }
.services-filter[aria-pressed="true"] { background: var(--cyan); border-color: var(--cyan); color: var(--white); }
.services-filter .spark { width: 14px; height: 14px; }
.services-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 20px; margin: 0; padding: 0; list-style: none; scroll-margin-top: calc(var(--header-h) + 80px); }
.service-tile { --shadow-hover: none; position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur) var(--ease); }
.service-tile:is(:hover, :has(:focus-visible)) { border-color: var(--line-hover); }
.service-tile.is-main { grid-column: span 2; grid-row: span 2; background: var(--grad-soft); border-color: var(--line-cyan); }
.service-tile.is-wide { grid-column: span 2; flex-direction: row; }
.service-tile.is-out { opacity: 0; transform: scale(.97); }
.service-tile[hidden] { display: none; }
.service-tile-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 0; }
.service-tile.is-main .service-tile-body { gap: 14px; padding: 36px 36px 0; }
.service-tile.is-wide .service-tile-body { flex: 1 1 46%; padding: 26px 20px 26px 26px; }
.service-tile-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.service-tile-num { font-variant-numeric: tabular-nums; }
.service-tile-num b { color: var(--cyan); font-weight: 600; }
.service-tile-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; background: var(--pink-soft); color: var(--pink); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.service-tile-badge svg { width: 11px; height: 11px; }
.service-tile-title { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -.5px; text-wrap: balance; }
.service-tile.is-main .service-tile-title { font-size: 34px; letter-spacing: -1.2px; }
.service-tile-text { margin: 0; color: #333; font-size: 14.5px; line-height: 1.6; }
.service-tile.is-main .service-tile-text { max-width: 34ch; font-size: 16.5px; }
.service-tile-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.service-tile-tags li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 1px solid var(--line-cyan); border-radius: 30px; background: var(--white); font-size: 12.5px; font-weight: 500; }
.service-tile-tags li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.service-tile-link { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin-top: 4px; color: var(--cyan-dark); font-size: 14.5px; font-weight: 600; }
.service-tile-link::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; } /* toda la tarjeta es el enlace */
.service-tile-link svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease-out); }
.service-tile:hover .service-tile-link svg { transform: translateX(5px); }
.service-tile.is-main .service-tile-link { height: 46px; margin-top: 8px; padding: 0 24px; border-radius: 50px; background: var(--cyan); color: var(--white); }
.service-tile-link:focus-visible { outline: none; }
.service-tile:has(.service-tile-link:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 3px; }
.service-tile-art { position: relative; display: flex; justify-content: center; align-items: flex-end; margin-top: auto; padding: 14px 18px 0; }
.service-tile-art svg { display: block; width: 100%; max-width: 100%; height: auto; transform-origin: 50% 100%; transition: transform var(--dur-slow) var(--ease-out); }
.service-tile:hover .service-tile-art svg { transform: scale(1.035); }
.service-tile.is-main .service-tile-art { flex: 1; padding: 24px 22px 0; }
.service-tile.is-main .service-tile-art svg { max-width: 560px; }
.service-tile.is-wide .service-tile-art { flex: 1 1 54%; align-items: center; padding: 16px 18px; }
.service-tile-art.is-panel { margin: 10px 10px 10px 0; border-radius: 20px 4px 20px 20px; background: var(--grad-soft); }
.service-tile-art.is-panel svg { max-width: 320px; transform-origin: 50% 50%; }
.service-tile:hover .service-tile-art.is-panel svg { transform: scale(1.02); }
.services-cta { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 40px; padding: 40px 44px; border-radius: var(--radius-card); background: var(--dark); color: var(--white); }
.services-cta::before { content: ''; position: absolute; right: -80px; top: -120px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgb(105 69 232 / 45%) 0%, rgb(105 69 232 / 0%) 70%); pointer-events: none; }
.services-cta-kicker { margin: 0 0 8px; color: var(--cyan); font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }
.services-cta h3 { max-width: 26ch; margin: 0; color: var(--white); font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -.8px; text-wrap: balance; }
.services-cta p:not(.services-cta-kicker) { margin: 8px 0 0; color: #c3cbe0; }
.services-cta-actions { position: relative; display: flex; flex-wrap: wrap; gap: 12px; }
.services-cta-note { position: absolute; top: -34px; left: 6px; color: var(--green); font-family: var(--font-note); font-size: 24px; font-weight: 600; line-height: 1; white-space: nowrap; transform: rotate(-4deg); }
/* Tablet: 2 columnas; la grande a lo ancho con la ilustración al lado */
@container (max-width: 1060px) {
  .services-filters-label { display: none; }
  .services-head .section-title { font-size: 38px; }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-tile.is-main { grid-row: span 1; flex-direction: row; align-items: stretch; }
  .service-tile.is-main .service-tile-body { flex: 1 1 46%; padding: 32px 0 32px 32px; }
  .service-tile.is-main .service-tile-art { flex: 1 1 54%; align-items: center; padding: 20px 20px 0; }
  .service-tile.is-main .service-tile-title { font-size: 30px; }
  .services-cta { grid-template-columns: 1fr; }
  .services-cta-note { position: static; display: block; margin-bottom: 6px; }
  .services-cta-actions { flex-direction: column; align-items: flex-start; }
}
/* Móvil: una columna, ilustración más compacta y filtros en una fila con scroll lateral */
@container (max-width: 640px) {
  .services-bento { padding: 56px 0 48px; }
  .services-bento .row { gap: 28px; padding: 0 16px; }
  .services-head .section-title { font-size: 30px; letter-spacing: -1px; }
  .services-lead { font-size: 15px; }
  .services-filters { top: calc(var(--header-h) + 8px); width: 100%; padding: 6px; }
  .services-filter { flex: 0 0 auto; height: 38px; padding: 0 14px; font-size: 13.5px; }
  .services-filters-list { min-width: 0; flex-wrap: nowrap; justify-content: safe center; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .services-filters-list::-webkit-scrollbar { display: none; }
  .services-grid { grid-template-columns: 1fr; gap: 16px; }
  .service-tile.is-main, .service-tile.is-wide { grid-column: auto; flex-direction: column; }
  .service-tile-body { padding: 24px 22px 0; }
  .service-tile.is-main .service-tile-body, .service-tile.is-wide .service-tile-body { padding: 26px 22px 0; }
  .service-tile.is-main .service-tile-title { font-size: 28px; }
  .service-tile.is-main .service-tile-text { font-size: 15px; }
  .service-tile-art { padding: 12px 16px 0; }
  .service-tile.is-main .service-tile-art, .service-tile.is-wide .service-tile-art { padding: 16px 16px 0; }
  .service-tile-art.is-panel { margin: 16px 12px 12px; padding: 16px 12px; }
  .service-tile:not(.is-main) .service-tile-art svg { width: auto; max-height: 150px; }
  .service-tile:not(.is-main) .service-tile-art.is-panel svg { width: 100%; max-height: none; }
  .services-cta { padding: 32px 22px; }
  .services-cta h3 { font-size: 23px; }
  .services-cta-actions { flex-direction: column; align-items: stretch; }
  .services-cta-actions .btn { width: 100%; }
}

/* ---------- Beneficios de la home (includes/benefits.php, bloque «Beneficios de la home» de main.js) ----------
   Maqueta aprobada: docs/maquetas/maqueta-beneficios.html. Mismo estilo que el módulo de servicios: borde fino, --radius-card,
   --grad-soft, texto superior y separador comunes (reglas de .services-head de arriba). Foto fija a la izquierda en ordenador;
   pasos con una línea cian que se rellena (--progress) al bajar. Responsive con @container: foto pequeña junto al título
   en tablet y una columna en móvil. Sin JavaScript la línea sale entera. */
.benefits { container-type: inline-size; background: var(--white); padding: 96px 0 88px; }
.benefits .row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "media head" "media steps"; align-items: start; gap: 34px 64px; padding: 0 24px; }
.benefits-head { grid-area: head; }
.benefits-head .section-title { font-size: 40px; letter-spacing: -1.5px; line-height: 1.1; }
:is(.benefits-lead, .join-lead) { max-width: 52ch; margin: 16px 0 0; color: #333; font-size: 16px; }
.benefits-media { grid-area: media; position: sticky; top: calc(var(--header-h) + 30px); margin: 0; }
.benefits-photo { position: relative; aspect-ratio: 5 / 6; overflow: hidden; border: 1px solid var(--line-cyan); border-radius: var(--radius-card); background: var(--grad-soft); }
.benefits-photo img { position: absolute; inset: auto 0 0; width: 100%; height: 94%; object-fit: cover; object-position: 50% 0; mix-blend-mode: multiply; }
.benefits-photo::before { content: ''; position: absolute; left: 50%; top: 18%; width: 78%; aspect-ratio: 1; border: 1px dashed rgb(0 187 211 / 45%); border-radius: 50%; translate: -50% 0; }
.benefits-chip { position: absolute; z-index: 1; display: flex; align-items: center; gap: 10px; max-width: 230px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 16px 4px 16px 16px; background: rgb(255 255 255 / 94%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.benefits-chip b { display: block; color: var(--black); font-size: 13.5px; font-weight: 600; }
.benefits-chip svg { flex: 0 0 34px; width: 34px; height: 34px; }
.benefits-chip.is-top { top: 22px; right: 18px; }
.benefits-chip.is-bottom { bottom: 22px; left: 18px; }
.benefits-note { position: absolute; z-index: 1; left: 22px; top: 24px; margin: 0; color: var(--violet); font-family: var(--font-note); font-size: 26px; font-weight: 600; line-height: 1; rotate: -6deg; }
.benefits-note svg { display: block; width: 52px; height: 34px; margin: 4px 0 0 34px; }
.benefits-steps { grid-area: steps; position: relative; display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.benefits-steps::before, .benefits-steps::after { content: ''; position: absolute; left: 27px; top: 40px; bottom: 40px; border-left: 1px dashed var(--cyan); }
.benefits-steps::after { left: 26px; bottom: auto; height: calc((100% - 80px) * var(--progress, 0)); border-left: 2px solid var(--cyan); transition: height var(--dur-slow) var(--ease-out); }
html:not(.js) .benefits-steps { --progress: 1; }
.benefit-step { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 20px; }
.benefit-marker { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--cyan); border-radius: 50%; background: var(--white); color: var(--cyan-dark); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.benefit-card { --shadow-hover: none; display: grid; grid-template-columns: minmax(0, 1fr) 176px; align-items: center; gap: 22px; padding: 22px 14px 22px 26px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--white); transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.benefit-kicker { display: inline-block; margin-bottom: 4px; color: var(--cyan-dark); font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.benefit-title { margin: 0 0 6px; font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -.5px; }
.benefit-text { margin: 0; color: #333; font-size: 14.5px; line-height: 1.6; }
.benefit-art { align-self: stretch; display: grid; place-items: center; padding: 10px; border-radius: 18px 4px 18px 18px; background: var(--grad-soft); }
.benefit-art svg { display: block; width: 100%; height: auto; transition: transform var(--dur-slow) var(--ease-out); }
.benefit-step:is(.is-active, :hover) .benefit-marker { background: var(--cyan); border-color: var(--cyan); color: var(--white); }
.benefit-step:is(.is-active, :hover) .benefit-card { border-color: var(--line-hover); }
.benefit-step:hover .benefit-art svg { transform: scale(1.04); }
.benefits-more { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: -8px; padding-left: 76px; }
.benefits-link { color: var(--cyan-dark); font-size: 15px; font-weight: 600; } /* en línea: si el texto se parte, la flecha sigue a la última palabra */
.benefits-link svg { display: inline-block; width: 16px; height: 16px; margin-left: 4px; vertical-align: -3px; transition: transform var(--dur) var(--ease-out); }
.benefits-link:is(:hover, :focus-visible) svg { transform: translateX(5px); }
.benefits-more .note { color: var(--green); font-family: var(--font-note); font-size: 22px; font-weight: 600; line-height: 1; rotate: -3deg; }
@container (max-width: 1060px) {
  .benefits { padding: 80px 0 72px; }
  .benefits .row { grid-template-columns: minmax(0, 290px) minmax(0, 1fr); grid-template-areas: "media head" "steps steps"; align-items: center; column-gap: 40px; }
  .benefits-media { position: static; }
  .benefits-head .section-title { font-size: 34px; }
  .benefits-chip.is-top, .benefits-note { display: none; }
  .benefits-chip.is-bottom { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .benefits-more { grid-column: 1 / -1; }
}
@container (max-width: 640px) {
  .benefits { padding: 56px 0 52px; }
  .benefits .row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "media" "steps"; row-gap: 26px; padding: 0 16px; }
  .benefits-head .section-title { font-size: 28px; letter-spacing: -1px; }
  .benefits-lead { font-size: 15px; }
  .benefits-photo { aspect-ratio: 4 / 3.4; }
  .benefits-photo img { left: auto; right: 0; width: 74%; height: 100%; }
  .benefits-photo::before { left: 63%; top: 10%; width: 64%; }
  .benefits-note { display: block; left: 16px; top: 18px; font-size: 22px; }
  .benefits-note svg { width: 42px; margin-left: 24px; }
  .benefits-chip.is-bottom { left: 12px; right: auto; max-width: 200px; }
  .benefits-steps::before, .benefits-steps::after { left: 19px; top: 30px; bottom: 30px; }
  .benefits-steps::after { left: 18px; height: calc((100% - 60px) * var(--progress, 0)); }
  .benefit-step { grid-template-columns: 40px minmax(0, 1fr); align-items: start; gap: 12px; }
  .benefit-marker { width: 40px; height: 40px; margin-top: 20px; font-size: 13px; }
  .benefit-card { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px 18px 14px; }
  .benefit-title { font-size: 18px; }
  .benefit-art { padding: 10px 14px; }
  .benefit-art svg { max-width: 190px; }
  .benefits-more { margin-top: 0; padding-left: 52px; }
}

/* ---------- Ventajas de la home (includes/advantages.php) ----------
   Maqueta aprobada: docs/maquetas/maqueta-ventajas-2.html. Misma línea que servicios y beneficios: cabecera, texto superior,
   separador y entradilla con las reglas comunes de .services-head; tarjetas de borde fino con --radius-card; píldora
   .service-tile-badge. Un sello central «Todo incluido» que gira (se para con «Reducir movimiento», como toda animación
   automática) y 3 ventajas a cada lado, en espejo y unidas al sello con líneas cian. Responsive con @container:
   en tablet el sello arriba y 2 columnas sin espejo ni líneas; en móvil una columna. Sube al pasar el ratón con el grupo
   de hover del sistema de movimiento (main.css). */
.advantages { container-type: inline-size; overflow: hidden; background: var(--white); padding: 96px 0 92px; }
.advantages .row { display: grid; gap: 56px; padding: 0 24px; }
.advantages-board { display: grid; grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr); grid-template-areas: "left hub right"; align-items: center; column-gap: 40px; }
.advantages-col { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.advantages-col.is-left { grid-area: left; }
.advantages-col.is-right { grid-area: right; }
.advantage { --shadow-hover: none; position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-content: start; gap: 6px 16px; padding: 22px 22px 20px 20px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--white); transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.advantage:hover { border-color: var(--line-hover); }
.advantage-icon { grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--line-cyan); border-radius: 16px 4px 16px 16px; background: var(--grad-soft); }
.advantage-icon svg { width: 30px; height: 30px; transition: transform var(--dur-slow) var(--ease-out); }
.advantage:hover .advantage-icon svg { transform: scale(1.1) rotate(-4deg); }
.advantage-title { margin: 0; padding-top: 4px; font-size: 17.5px; font-weight: 600; line-height: 1.2; letter-spacing: -.4px; }
.advantage-text { margin: 0; color: #333; font-size: 14.5px; line-height: 1.6; }
:is(.advantage, .join-step) .service-tile-badge { border: 1px solid #f9cfe3; } /* píldora con borde rosa: ventajas y pasos de «Únete» */
.advantage .service-tile-badge { position: absolute; top: -11px; right: 18px; }
/* Columna izquierda en espejo: el icono mira hacia el sello */
.is-left .advantage { grid-template-columns: minmax(0, 1fr) 52px; padding: 22px 20px 20px 22px; border-radius: 6px 26px 26px 26px; text-align: right; }
.is-left .advantage-icon { grid-column: 2; grid-row: 1 / span 2; border-radius: 4px 16px 16px 16px; }
.is-left :is(.advantage-title, .advantage-text) { grid-column: 1; grid-row: auto; }
.is-left .advantage .service-tile-badge { right: auto; left: 18px; }
/* Líneas que unen cada tarjeta con el sello; las de arriba y abajo se inclinan hacia el centro */
.advantage::before, .advantage::after { content: ''; position: absolute; top: 50%; pointer-events: none; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.advantage::before { width: 40px; border-top: 1px dashed var(--cyan); }
.advantage::after { width: 9px; height: 9px; margin-top: -4px; border: 1px solid var(--cyan); border-radius: 50%; background: var(--white); }
.is-left .advantage::before { left: 100%; }
.is-left .advantage::after { left: calc(100% + 36px); }
.is-right .advantage::before { right: 100%; }
.is-right .advantage::after { right: calc(100% + 36px); }
.advantage:hover::before { border-top-style: solid; }
.advantage:hover::after { background: var(--cyan); }
.is-left .advantage:first-child::before { rotate: 14deg; transform-origin: 0 0; }
.is-left .advantage:last-child::before { rotate: -14deg; transform-origin: 0 0; }
.is-right .advantage:first-child::before { rotate: -14deg; transform-origin: 100% 0; }
.is-right .advantage:last-child::before { rotate: 14deg; transform-origin: 100% 0; }
.advantage:first-child::after { margin-top: 5px; }
.advantage:last-child::after { margin-top: -13px; }
/* El sello central */
.advantages-hub { grid-area: hub; display: grid; justify-items: center; gap: 22px; text-align: center; }
.seal { position: relative; display: grid; place-items: center; width: 300px; aspect-ratio: 1; }
.seal-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: seal-spin 40s linear infinite; }
.seal-ring text { fill: var(--cyan-dark); font-size: 11.5px; font-weight: 600; letter-spacing: 3.2px; text-transform: uppercase; }
@keyframes seal-spin { to { rotate: 360deg; } }
.seal-core { position: relative; display: grid; place-content: center; justify-items: center; gap: 2px; width: 66%; aspect-ratio: 1; border: 1px solid var(--line-cyan); border-radius: 50%; background: var(--grad-soft); box-shadow: 0 0 0 10px var(--white), 0 0 0 11px var(--line); } /* doble aro, no es una sombra */
.seal-check { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 50%; background: var(--pink); color: var(--white); rotate: -8deg; }
.seal-check svg { width: 22px; height: 22px; }
.seal-big { font-size: 30px; font-weight: 700; line-height: 1.02; letter-spacing: -1px; }
.seal-small { max-width: 15ch; color: var(--muted); font-size: 13px; line-height: 1.35; }
.seal-note { position: absolute; right: -36px; top: 6px; color: var(--violet); font-family: var(--font-note); font-size: 24px; font-weight: 600; line-height: 1; rotate: 10deg; }
:is(.advantages-btn, .join-btn) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 50px; font-weight: 600; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } /* botones de los bloques de la home */
:is(.advantages-btn, .join-btn.is-primary) { background: var(--cyan); color: var(--white); }
:is(.advantages-btn, .join-btn.is-primary):is(:hover, :focus-visible) { background: var(--cyan-dark); color: var(--white); }
:is(.advantages-btn, .join-btn) svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease-out); }
:is(.advantages-btn, .join-btn):is(:hover, :focus-visible) svg { transform: translateX(5px); }
.advantages-btn { height: 48px; padding: 0 26px; font-size: 15px; }
.advantages-hub small { margin-top: -12px; color: var(--muted); font-size: 13px; }
@container (max-width: 1060px) {
  .advantages { padding: 80px 0 72px; }
  .advantages .row { gap: 44px; }
  .advantages-head .section-title { font-size: 36px; }
  .advantages-board { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "hub hub" "left right"; gap: 48px 16px; }
  .seal { width: 250px; }
  .seal-big { font-size: 26px; }
  .advantage::before, .advantage::after { display: none; }
  .is-left .advantage { grid-template-columns: 52px minmax(0, 1fr); padding: 22px 22px 20px 20px; border-radius: var(--radius-card); text-align: left; }
  .is-left .advantage-icon { grid-column: 1; border-radius: 16px 4px 16px 16px; }
  .is-left :is(.advantage-title, .advantage-text) { grid-column: 2; }
  .is-left .advantage .service-tile-badge { left: auto; right: 18px; }
}
@container (max-width: 640px) {
  .advantages { padding: 56px 0 52px; }
  .advantages .row { gap: 36px; padding: 0 16px; }
  .advantages-head .section-title { font-size: 28px; letter-spacing: -1px; }
  .advantages-lead { font-size: 15px; }
  .advantages-board { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hub" "left" "right"; row-gap: 20px; }
  .advantages-hub { margin-bottom: 18px; }
  .advantages-col { gap: 20px; }
  .seal { width: 230px; }
  .seal-big { font-size: 24px; }
  .seal-small { font-size: 12px; }
  .seal-note { right: -18px; top: -4px; font-size: 21px; }
  .advantage, .is-left .advantage { grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; padding: 18px 16px; }
  .advantage-icon { width: 46px; height: 46px; }
  .advantage-icon svg { width: 26px; height: 26px; }
  .advantage-title { font-size: 16.5px; }
  .advantage-text { font-size: 14px; }
  .advantages-btn { width: 100%; }
}

/* ---------- Únete al equipo (includes/join.php, bloque «Únete» de main.js) ----------
   Maqueta aprobada: docs/maquetas/maqueta-unete-4.html. Misma línea que servicios, beneficios y ventajas: cabecera,
   entradilla y botones con las reglas comunes de arriba; píldora de tiempo .service-tile-badge. A la izquierda los 3 pasos
   como pestañas con una barra que se rellena (--join-time, la velocidad del panel); a la derecha, la escena de cada paso.
   Avanza solo, se para con el ratón encima, con el foco dentro o fuera de la vista (.is-paused). Con «Reducir movimiento»
   no hay barra ni avance automático. Responsive con @container: en tablet y móvil, la escena arriba y los pasos debajo. */
.join { container-type: inline-size; overflow: hidden; background: var(--white); padding: 96px 0 100px; }
.join .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-areas: "head stage" "steps stage" "cta stage"; align-items: start; column-gap: 72px; padding: 0 24px; }
.join-head { grid-area: head; }
.join-steps { grid-area: steps; display: grid; gap: 10px; margin: 30px 0 0; padding: 0; list-style: none; }
.join-step { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--white); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.join-step.is-active { border-color: var(--line-hover); box-shadow: 0 14px 34px rgb(20 30 60 / 8%); }
.join-step-btn { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%; padding: 16px 20px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.join-step-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bg-soft); color: var(--muted); font-size: 16px; font-weight: 700; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.is-active .join-step-num { background: var(--cyan); color: var(--white); box-shadow: 0 0 0 6px var(--cyan-soft); }
.join-step-title { font-size: 18px; font-weight: 600; letter-spacing: -.4px; }
.join-step-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
.is-active .join-step-body { grid-template-rows: 1fr; }
.join-step-body > p { overflow: hidden; margin: 0; padding: 0 20px 0 80px; color: #333; font-size: 14.5px; line-height: 1.6; }
.is-active .join-step-body > p { padding-bottom: 18px; }
.join-step-bar { position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.is-active .join-step-bar { animation: join-fill var(--join-time, 6s) linear forwards; }
.join:is(:hover, :focus-within, .is-paused) .join-step-bar { animation-play-state: paused; }
.no-motion .join-step-bar { display: none; } /* sin barra ni avance automático */
@keyframes join-fill { to { width: 100%; } }
.join-cta { grid-area: cta; display: grid; justify-items: start; gap: 14px; margin-top: 28px; }
.join-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.join-btn { height: 52px; padding: 0 30px; font-size: 15.5px; }
.join-btn.is-outline { border: 2px solid var(--pink); background: var(--white); color: var(--pink); }
.join-btn.is-outline:is(:hover, :focus-visible) { background: var(--pink); color: var(--white); }
.join-trust { margin: 0; color: var(--muted); font-size: 13.5px; }
/* Escenario: una escena por paso */
.join-stage { grid-area: stage; align-self: center; position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-card); background: var(--grad-soft); }
.join-stage::after { content: ''; position: absolute; z-index: -1; right: -14px; bottom: -14px; width: 120px; height: 120px; background: radial-gradient(var(--cyan) 1.4px, transparent 1.6px) 0 0 / 14px 14px; opacity: .45; }
.join-scene { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 34px; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.98); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow); }
.join-scene.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.join-note { position: absolute; z-index: 2; right: 22px; bottom: -30px; color: var(--violet); font-family: var(--font-note); font-size: 25px; font-weight: 600; line-height: 1; white-space: nowrap; rotate: -6deg; }
/* Escena 1: foto del equipo */
.join-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 22px 6px 22px 22px; box-shadow: 0 20px 44px rgb(20 30 60 / 12%); }
.join-chip { position: absolute; display: flex; align-items: center; gap: 10px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 14px 4px 14px 14px; background: var(--white); box-shadow: 0 12px 30px rgb(20 30 60 / 12%); font-size: 13px; line-height: 1.35; }
.join-chip p { margin: 0; }
.join-chip strong { display: block; font-size: 14.5px; }
.join-chip span { color: var(--muted); }
.join-chip i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgb(41 223 164 / 22%); }
.join-scene.is-team { grid-template: minmax(0, 1fr) / minmax(0, 1fr); margin: 1em 40px; } /* la foto cabe en el escenario, enmarcada por el degradado como en la maqueta */
.join-scene.is-team .join-chip { left: 14px; bottom: 50px; }
/* Escena 2: la propuesta */
.join-doc { position: relative; display: grid; gap: 14px; width: min(100%, 380px); padding: 28px 28px 24px; border: 1px solid var(--line); border-radius: 18px 4px 18px 18px; background: var(--white); box-shadow: 0 24px 50px rgb(20 30 60 / 12%); rotate: -2deg; }
.join-doc-head { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; }
.join-doc-head strong { color: var(--black); font-size: 15px; letter-spacing: -.4px; }
.join-doc-head strong span { color: var(--cyan); }
.join-doc h4 { margin: 0; font-size: 21px; line-height: 1.2; letter-spacing: -.6px; }
.join-doc ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.join-doc li { display: flex; align-items: center; gap: 9px; }
.join-doc li svg { flex: none; width: 16px; height: 16px; color: var(--cyan-dark); }
.join-doc-lines { display: grid; gap: 7px; }
.join-doc-lines i { height: 7px; border-radius: 4px; background: var(--bg-soft); }
.join-doc-lines i:nth-child(2) { width: 82%; }
.join-doc-lines i:nth-child(3) { width: 64%; }
.join-doc-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 13px; font-weight: 600; }
.join-doc-foot span { color: var(--cyan-dark); }
.join-stamp { position: absolute; right: -22px; top: -22px; display: grid; place-content: center; width: 92px; height: 92px; border: 2px dashed var(--pink); border-radius: 50%; background: #fff5fa; color: var(--pink); font-size: 11px; font-weight: 700; line-height: 1.15; letter-spacing: .4px; text-align: center; text-transform: uppercase; rotate: 12deg; }
.join-stamp b { display: block; font-size: 22px; letter-spacing: -.6px; text-transform: none; }
/* Escena 3: el informe mensual */
.join-report { display: grid; gap: 18px; width: min(100%, 400px); padding: 24px; border: 1px solid var(--line); border-radius: 18px 4px 18px 18px; background: var(--white); box-shadow: 0 24px 50px rgb(20 30 60 / 12%); }
.join-report-head { display: flex; justify-content: space-between; align-items: center; }
.join-report-head strong { font-size: 16px; letter-spacing: -.4px; }
.join-report-head span { padding: 3px 10px; border-radius: 20px; background: var(--green-soft); color: var(--green-dark); font-size: 11.5px; font-weight: 600; }
.join-report svg { width: 100%; height: auto; }
.join-report-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.join-report-tags span { padding: 5px 12px; border-radius: 20px; background: var(--bg-soft); font-size: 12.5px; font-weight: 500; }
.join-report-tags span::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--cyan); }
.join-report-tags span:nth-child(2)::before { background: var(--violet); }
.join-report-tags span:nth-child(3)::before { background: var(--pink); }
.join-report-line { stroke-dasharray: 600; stroke-dashoffset: 600; }
.join-scene.is-active .join-report-line { animation: join-draw 1.6s var(--ease-out) forwards; }
@keyframes join-draw { to { stroke-dashoffset: 0; } }
@container (max-width: 1060px) {
  .join { padding: 80px 0; }
  .join .row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "steps" "cta"; max-width: 680px; }
  .join-head { text-align: center; }
  .join-head .section-title { font-size: 36px; }
  .join-head .section-title::after { margin-inline: auto; }
  .join-lead { margin-inline: auto; }
  .join-stage { margin-top: 36px; aspect-ratio: 4 / 3; }
  .join-cta { justify-items: center; }
}
@container (max-width: 640px) {
  .join { padding: 56px 0 60px; }
  .join .row { padding: 0 16px; }
  .join-head .section-title { font-size: 28px; letter-spacing: -1px; }
  .join-lead { font-size: 15px; }
  .join-stage { margin-top: 26px; aspect-ratio: 1 / 1; }
  .join-scene { padding: 22px; }
  .join-doc { gap: 10px; padding: 20px; }
  .join-doc h4 { font-size: 17px; }
  .join-doc ul { gap: 6px; font-size: 12.5px; }
  .join-stamp { right: -8px; top: -26px; width: 70px; height: 70px; font-size: 9px; }
  .join-stamp b { font-size: 17px; }
  .join-report { gap: 12px; padding: 16px; }
  .join-chip { padding: 9px 12px; font-size: 11.5px; }
  .join-chip strong { font-size: 13px; }
  .join-scene.is-team .join-chip { left: 8px; bottom: 34px; }
  .join-note { display: none; }
  .join-step-btn { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; padding: 14px; }
  .join-step-num { width: 38px; height: 38px; font-size: 14px; }
  .join-step-title { font-size: 15.5px; }
  .join-step-body > p { padding: 0 14px 0 64px; font-size: 14px; }
  .join-cta { justify-items: stretch; }
  .join-actions { display: grid; }
  .join-btn { width: 100%; }
  .join-trust { text-align: center; }
}

/* ---------- Ebook gratis: pestaña del regalo + panel lateral (includes/ebook-panel.php, bloque «Ebook gratis» de main.js) ----------
   Pestaña violeta en el borde derecho, a media altura, por encima de los botones de llamar y WhatsApp (abajo a la derecha)
   y lejos del aviso push (abajo a la izquierda). Panel: tiempos y curvas de motion.css (--panel-…: entra suave, sale rápido).
   Sin sombras: borde fino y colores suaves de :root. Campos de .contact-form, casilla .check-control, lista .check-list. */
.ebook-tab { position: fixed; z-index: 998; right: -8px; top: clamp(90px, 50%, calc(100% - 250px)); display: grid; place-items: center; width: 54px; height: 52px; padding: 0 8px 0 0; border: 0; border-radius: 12px 0 0 12px; background: var(--violet); color: #fff; cursor: pointer; transform: translateY(-50%); transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.ebook-tab[hidden] { display: none; }
.ebook-tab::before { content: ''; position: absolute; top: 7px; left: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.ebook-tab:is(:hover, :focus-visible) { transform: translate(-8px, -50%); background: var(--magenta); }
.ebook-tab:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.ebook-tab-icon { width: 24px; height: 24px; }
.ebook-tab-icon.is-waggling { animation: chaty-animation-waggle 1s ease-in-out; } /* meneo de main.css (botón de WhatsApp) */
.ebook-tab-label { position: absolute; right: calc(100% + 10px); top: 50%; padding: 6px 12px; border-radius: 6px; background: var(--black); color: #fff; font-size: 13.5px; font-weight: 500; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(6px, -50%); transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.ebook-tab:is(:hover, :focus-visible) .ebook-tab-label { opacity: 1; transform: translate(0, -50%); }

.ebook-panel-overlay { position: fixed; inset: 0; z-index: 1000000; background: rgb(17 17 17 / 30%); opacity: 0; visibility: hidden; transition: opacity var(--panel-out-dur) var(--panel-out-ease), visibility 0s linear var(--panel-out-dur); }
.ebook-panel { position: fixed; z-index: 1000001; top: 0; right: 0; bottom: 0; width: 400px; max-width: 100%; padding: 46px 32px 32px; overflow-y: auto; overscroll-behavior: contain; background: #fff; border-left: 1px solid var(--line); visibility: hidden; transform: translateX(100%); transition: transform var(--panel-out-dur) var(--panel-out-ease), visibility 0s linear var(--panel-out-dur); }
.ebook-panel-overlay.is-open, .ebook-panel.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity var(--panel-in-dur) var(--panel-in-ease), transform var(--panel-in-dur) var(--panel-in-ease), visibility 0s; }
.ebook-panel:focus { outline: none; }
body.ebook-panel-open { overflow: hidden; }
/* Contenido escalonado: entra desde la derecha con fundido; al cerrar sale todo a la vez */
.ebook-panel-screen > * { opacity: 0; transform: translateX(28px); transition: opacity var(--panel-out-dur) var(--panel-out-ease), transform var(--panel-out-dur) var(--panel-out-ease); }
.ebook-panel.is-open .ebook-panel-screen > * { opacity: 1; transform: none; transition: opacity var(--panel-in-dur) var(--panel-in-ease), transform var(--panel-in-dur) var(--panel-in-ease); transition-delay: calc(var(--panel-stagger) * var(--i, 6)); }
@starting-style { .ebook-panel.is-open .ebook-panel-screen > * { opacity: 0; transform: translateX(28px); } } /* la pantalla «¡Revisa tu correo!» entra igual */
.ebook-panel-screen > :nth-child(1) { --i: 1; }
.ebook-panel-screen > :nth-child(2) { --i: 2; }
.ebook-panel-screen > :nth-child(3) { --i: 3; }
.ebook-panel-screen > :nth-child(4) { --i: 4; }
.ebook-panel-screen > :nth-child(5) { --i: 5; }
.ebook-panel-close { top: 12px; right: 14px; }
.ebook-panel-kicker { display: inline-block; margin: 0 0 16px; padding: 5px 14px; border-radius: 50px; background: var(--violet-soft); color: var(--violet); font-size: 13px; font-weight: 600; }
.ebook-panel-cover { display: grid; place-items: center; padding: 24px; border-radius: 16px; background: linear-gradient(135deg, var(--cyan-soft), var(--violet-soft)); perspective: 900px; }
.ebook-panel-cover img, .ebook-cover-css { width: 150px; aspect-ratio: 3 / 4; height: auto; border-radius: 4px 8px 8px 4px; object-fit: cover; transform: rotateY(-14deg); }
.ebook-cover-css { display: flex; align-items: flex-end; padding: 16px 14px; background: var(--grad-hero); color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.ebook-panel-title { margin: 22px 0 6px; font-size: 21px; font-weight: 700; line-height: 1.3; }
.ebook-panel-points { margin: 6px 0 18px; font-size: 14.5px; }
.ebook-panel-points li { padding: 4px 0; }
.ebook-panel-points .lnr { color: var(--green); }
.ebook-panel-form label { margin-bottom: 12px; }
.ebook-panel-form input:is([type=text], [type=email]) { padding: 11px 14px; }
.ebook-panel-form input[aria-invalid="true"] { border-color: var(--pink); }
.contact-form .check-control { display: flex; align-items: flex-start; font-weight: 400; font-size: 13px; line-height: 1.5; color: var(--muted); }
.contact-form .check-control .check-box { margin-top: 1px; }
.ebook-panel .check-control a { color: var(--violet); text-decoration: underline; }
.field-error { display: block; margin: 6px 0 0; font-size: 13px; font-weight: 400; color: var(--pink); }
.field-error[hidden] { display: none; }
.ebook-panel-form .btn { width: 100%; margin-top: 14px; }
.ebook-panel-note { margin: 10px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.ebook-panel-done { text-align: center; }
.ebook-panel-done-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-top: 30px; border-radius: 50%; background: var(--cyan-soft); color: var(--cyan-dark); font-size: 28px; }
.ebook-panel-done .ebook-panel-title:focus { outline: none; }
.ebook-panel-steps { margin: 22px 0 26px; padding: 0; list-style: none; counter-reset: ebook-step; text-align: left; font-size: 14.5px; }
.ebook-panel-steps li { position: relative; padding: 0 0 14px 40px; counter-increment: ebook-step; }
.ebook-panel-steps li::before { content: counter(ebook-step); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--violet-soft); color: var(--violet); font-weight: 600; font-size: 13.5px; }
.ebook-panel-done .btn { width: 100%; }
/* Catálogo /componentes: el panel abierto dentro de su caja */
.ebook-panel.is-demo { position: relative; z-index: auto; margin: 0 auto; max-height: none; border: 1px solid var(--line); }
@media (max-width: 760px) {
  .ebook-tab { top: clamp(90px, 42%, calc(100% - 250px)); width: 48px; height: 46px; }
  .ebook-tab-icon { width: 21px; height: 21px; }
  .ebook-panel { width: 100%; padding: 46px 22px 26px; }
}

/* ---------- Frase con fondo parallax y firma (.parallax-box.frase-box, includes/frase-box.php) ----------
   Fondo, capa oscura y parallax: .parallax-box de main.css (fondo normal en móvil y pantallas táctiles).
   Con «Reducir movimiento» (html.no-motion) el fondo tampoco va fijo. */
.frase-box { padding: 120px 0; background-image: url('../img/frase-fondo.webp'); }
.no-motion .frase-box { background-attachment: scroll; }
.frase-quote { font-size: 26px; opacity: .9; }
.frase-text { margin: 18px auto 24px; font-size: clamp(19px, 2.2vw, 25px); line-height: 1.55; font-weight: 300; }
@media (max-width: 760px) { .frase-box { padding: 80px 0; } }

/* ==========================================================================
   Blog: tarjetas y páginas
   Bloque de la home, /blog, la página de cada artículo y «También te puede interesar». Maquetas aprobadas en
   docs/maquetas/ (maqueta-articulos.html, maqueta-blog.html y maqueta-entrada.html). PHP: includes/blog.php,
   tarjeta única includes/post-card.php y cabecera de bloque includes/blog-head.php. JS: bloque «Blog: tarjetas y
   páginas» de main.js. Borde fino --line, esquina --radius-card, sin sombra en reposo y píldoras de un solo tono.
   El cuerpo del artículo tiene su propia sección (abajo: «Blog: elementos del artículo»).
   ========================================================================== */

/* Tono de cada categoría (blog_category(): violeta, cian, verde o rosa; se elige en /admin → Configuración → Blog) */
.tone-violet { --tone: var(--violet); --tone-soft: var(--violet-soft); }
.tone-cyan { --tone: var(--cyan-dark); --tone-soft: var(--cyan-soft); }
.tone-green { --tone: var(--green-dark); --tone-soft: var(--green-soft); }
.tone-pink { --tone: var(--pink-dark); --tone-soft: var(--pink-soft); }

/* Tarjeta: un solo enlace (el título) que con ::after cubre toda la tarjeta */
.post-card { --lift: -4px; position: relative; display: flex; flex-direction: column; min-width: 0; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); text-align: left; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.post-card:is(:hover, :focus-within) { border-color: var(--line-hover); box-shadow: 0 14px 34px rgb(20 30 60 / 8%); transform: translateY(var(--lift)); } /* sistema de movimiento con la subida de la maqueta (4 px) y sombra muy ligera */
.post-card:has(.post-card-title a:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 3px; }
.post-card-media { position: relative; flex: none; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 20px 4px 20px 20px; background: var(--tone-soft); }
.post-card-media > :first-child { width: 100%; height: 100%; transition: transform var(--dur-slow) var(--ease); }
:is(.post-card-media, .post-cover-frame) > img { display: block; object-fit: cover; }
.post-card:is(:hover, :focus-within) .post-card-media > :first-child { transform: scale(1.05); }
.post-card-new { position: absolute; top: 12px; left: 12px; padding: 2px 11px; border: 1px solid #f9cfe3; border-radius: 20px; background: #fff; color: var(--pink); font-size: 11.5px; font-weight: 600; line-height: 1.6; }
.post-card-body { display: flex; flex-direction: column; flex: 1; gap: 10px; min-width: 0; padding: 18px 14px 8px; }
.post-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.post-cat { padding: 2px 11px; border-radius: 20px; background: var(--tone-soft); color: var(--tone); font-size: 12px; font-weight: 600; }
.post-read { display: inline-flex; align-items: center; gap: 5px; }
.post-card-title { margin: 0; font-size: 19px; line-height: 1.3; letter-spacing: -.4px; }
.post-card-title a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.post-card-title a:focus-visible { outline: none; }
.post-card-excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; color: #333; font-size: 14.5px; line-height: 1.6; }
.post-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 6px; font-size: 13px; color: var(--muted); }
.post-card-go { flex: none; display: grid; place-items: center; width: 38px; height: 38px; margin-left: auto; border: 1.5px solid var(--cyan); border-radius: 50%; color: var(--cyan); font-size: 14px; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.post-card-go .lnr { transition: transform var(--dur-fast) var(--ease); }
.post-card:is(:hover, :focus-within) .post-card-go { background: var(--cyan); color: #fff; }
.post-card:is(:hover, :focus-within) .post-card-go .lnr { transform: translateX(3px); }

/* Portada automática (tarjeta y artículo): sin foto o si la foto falla, tono de la categoría con puntitos, círculo discontinuo e icono */
.post-cover { position: relative; display: grid; place-items: center; background: radial-gradient(circle, color-mix(in srgb, var(--tone) 22%, transparent) 1.3px, transparent 1.8px) 0 0 / 18px 18px, var(--tone-soft); }
.post-cover::before { content: ''; position: absolute; width: 62%; aspect-ratio: 1; border: 1.5px dashed color-mix(in srgb, var(--tone) 30%, transparent); border-radius: 50%; }
.post-cover-icon { position: relative; display: grid; place-items: center; width: 84px; height: 84px; border: 1px solid color-mix(in srgb, var(--tone) 20%, transparent); border-radius: var(--radius-card); background: #fff; color: var(--tone); font-size: 38px; }

/* Destacada: el artículo más reciente (o el fijado en el panel) */
.post-card.is-featured .post-card-body { gap: 12px; padding: 22px 20px 12px; }
.post-card.is-featured .post-card-title { font-size: 26px; line-height: 1.2; letter-spacing: -.8px; }
.post-card.is-featured .post-card-excerpt { font-size: 15.5px; }
.post-card.is-featured .post-card-go { gap: 8px; width: auto; height: 42px; padding: 0 18px; display: inline-flex; border-radius: 50px; font-size: 14px; font-weight: 600; }

/* Fila compacta: foto a la izquierda */
.post-card.is-row { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 4px; }
.post-card.is-row .post-card-media { aspect-ratio: auto; height: 100%; min-height: 150px; }
.post-card.is-row .post-card-body { gap: 8px; padding: 10px 10px 4px 14px; }
.post-card.is-row .post-card-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 17px; }
.post-card.is-row .post-card-excerpt { -webkit-line-clamp: 2; font-size: 14px; }
.post-card.is-row .post-cover-icon { width: 60px; height: 60px; font-size: 26px; }

/* Bloques con cabecera (home y «También te puede interesar»): texto a la izquierda y botón a la derecha */
.blog-section { container-type: inline-size; padding: 96px 0 100px; background: #fff; }
.blog-section.is-related { padding: 80px 0 90px; background: var(--bg-soft); }
.blog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-bottom: 40px; }
.blog-head-text { max-width: 56ch; margin: 16px 0 0; color: #333; font-size: 16px; }
.blog-head > .btn { flex: none; }
.blog-more { display: none; margin-top: 28px; }
.blog-home-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 24px; }
.blog-home-grid > .is-featured { grid-row: span 2; }
.blog-home-grid > .is-featured .post-card-media { aspect-ratio: 16 / 9; }

/* Página /blog: cabecera con el degradado de marca (.page-hero de header.php + .blog-hero) y curva blanca abajo */
.page-hero.blog-hero { padding: 56px 0 64px; }
.blog-hero .page-hero-inner { display: grid; justify-items: center; gap: 12px; }
.blog-hero .breadcrumbs { margin: 0; }
.blog-hero .page-hero-kicker { border: 1px solid rgb(255 255 255 / 30%); letter-spacing: 1.2px; }
.blog-hero h1 { margin: 0; font-size: clamp(30px, 4.2vw, 46px); letter-spacing: -1.6px; line-height: 1.08; }
.blog-hero .page-hero-text { max-width: 56ch; font-size: 16.5px; }
.blog-hero-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 0; padding-bottom: 14px; font-size: 13px; opacity: .85; }
.blog-hero-meta span + span::before { content: '·'; margin-right: 18px; }
.blog-hero .page-hero-shapes::after { content: ''; position: absolute; inset: auto 0 0; z-index: 1; height: 28px; border-radius: 28px 28px 0 0; background: #fff; }

.blog-page { container-type: inline-size; padding: 24px 0 90px; }
.blog-page > .row { display: grid; gap: 28px; }
.blog-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.blog-pills a { padding: 7px 16px; border: 1px solid var(--line); border-radius: 30px; font-size: 14px; font-weight: 500; line-height: 1.5; }
.blog-pills small { margin-left: 4px; color: var(--muted); }
.blog-pills a:is(:hover, :focus-visible) { border-color: var(--cyan); }
.blog-pills a[aria-current="page"] { border-color: var(--cyan); background: var(--cyan); color: #fff; }
.blog-pills a[aria-current="page"] small { color: #fff; opacity: .8; }
.blog-page .post-card.is-featured { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 8px; }
.blog-page .post-card.is-featured .post-card-media { aspect-ratio: auto; height: 100%; min-height: 340px; }
.blog-page .post-card.is-featured .post-card-body { justify-content: center; padding: 30px 30px 16px; }
.blog-page .post-card.is-featured .post-card-title { font-size: 30px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.blog-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blog-grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.blog-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.blog-pager a { display: grid; place-items: center; width: 42px; height: 42px; border: 1.5px solid var(--cyan); border-radius: 50%; color: var(--cyan-dark); font-weight: 600; }
.blog-pager a:is(:hover, :focus-visible), .blog-pager a[aria-current="page"] { background: var(--cyan); color: #fff; }

/* Página del artículo: misma cabecera, foto grande que monta sobre el degradado y columna «¿Te ayudamos?» fija al bajar */
.page-hero.blog-hero.is-post { padding-bottom: 150px; }
.blog-hero.is-post .page-hero-shapes::after { content: none; }
.blog-hero.is-post h1 { max-width: 24ch; font-size: clamp(26px, 3.9vw, 44px); }
.blog-hero.is-post .page-hero-text { max-width: 60ch; }
.post-by { display: flex; align-items: center; gap: 12px; margin-top: 6px; text-align: left; }
.post-by strong { display: block; font-size: 14.5px; }
.post-by small { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 13px; opacity: .9; }
.post-avatar { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--violet); font-weight: 700; }
.post-avatar.is-big { width: 64px; height: 64px; background: var(--violet-soft); font-size: 24px; }
.post-cover-wrap { position: relative; z-index: 3; max-width: 1060px; margin-top: -120px; }
.post-cover-frame { aspect-ratio: 16 / 8; overflow: hidden; border: 8px solid #fff; border-radius: var(--radius-card); outline: 1px solid var(--line); background: var(--tone-soft); }
.post-cover-frame > :first-child { width: 100%; height: 100%; }

article.post { container-type: inline-size; padding: 48px 0 80px; }
.post-layout { max-width: 1160px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 56px; align-items: start; }
.post-layout > :not(.post-help) { grid-column: 1; min-width: 0; max-width: 760px; }
.post-layout > .prose { overflow-wrap: break-word; }
.post-help { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: 100px; display: grid; gap: 10px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; }
.post-help p { margin: 0; font-size: 14px; color: #333; }
.post-help .post-help-label { width: fit-content; padding: 2px 11px; border: 1px solid #f9cfe3; border-radius: 20px; background: var(--pink-soft); color: var(--pink); font-size: 11.5px; font-weight: 600; }
.post-help .post-help-title { font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -.5px; color: var(--black); }
.post-help .btn { height: 46px; margin-top: 4px; padding: 0 24px; }
.post-help-links { display: grid; gap: 8px; margin: 8px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); list-style: none; }
.post-help-links a { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.post-help-links .lnr { color: var(--cyan); font-size: 18px; }
.post-help-links a:is(:hover, :focus-visible) { color: var(--cyan-dark); }
.post-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 40px 0 0; font-size: 13px; }
.post-tags > span { margin-right: 4px; color: var(--muted); font-weight: 600; }
.post-tags a { padding: 4px 12px; border: 1px solid var(--line); border-radius: 20px; }
.post-tags a:is(:hover, :focus-visible) { border-color: var(--cyan); }
.post-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; padding: 18px 0; border-block: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.post-share > span:first-child { margin-right: 6px; }
.post-share a { display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--cyan); border-radius: 50%; color: var(--cyan-dark); }
.post-share a:is(:hover, :focus-visible) { background: var(--cyan); color: #fff; }
.post-share-copy { display: inline-flex; align-items: center; gap: 6px; height: 40px; margin-left: auto; padding: 0 16px; border: 1px solid var(--line); border-radius: 40px; background: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.post-share-copy:is(:hover, :focus-visible), .post-share-copy.is-done { border-color: var(--cyan); color: var(--cyan-dark); }
.post-author { display: flex; align-items: flex-start; gap: 18px; margin-top: 26px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-card); }
.post-author p { margin: 0; font-size: 14.5px; color: #333; }
.post-author .post-author-label { color: var(--cyan-dark); font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.post-author .post-author-name { color: var(--black); font-size: 18px; font-weight: 600; }

/* Tablet */
@container (max-width: 1000px) {
  .blog-section { padding: 72px 0 80px; }
  .blog-head .section-title { font-size: 36px; letter-spacing: -1.2px; }
  .blog-home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-home-grid > .is-featured { grid-row: auto; grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px; }
  .blog-home-grid > .is-featured .post-card-media { aspect-ratio: auto; height: 100%; min-height: 280px; }
  .blog-home-grid > .is-row { display: flex; }
  .blog-home-grid > .is-row .post-card-media { aspect-ratio: 16 / 10; height: auto; min-height: 0; }
  .blog-home-grid > .is-row .post-card-body { padding: 16px 12px 6px; }
  .blog-home-grid > .is-row .post-cover-icon { width: 84px; height: 84px; font-size: 38px; }
  .blog-home-grid > .is-row .post-card-excerpt { display: none; }
  .blog-grid, .blog-grid[data-cols] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .blog-grid > :last-child:nth-child(odd) .post-card-media { aspect-ratio: auto; height: 100%; min-height: 220px; }
  .blog-page .post-card.is-featured .post-card-media { min-height: 300px; }
  .blog-page .post-card.is-featured .post-card-body { padding: 22px 20px 12px; }
  .blog-page .post-card.is-featured .post-card-title { font-size: 25px; }
}
@container (max-width: 900px) {
  .post-layout { grid-template-columns: minmax(0, 1fr); }
  .post-layout > :not(.post-help) { max-width: none; }
  .post-help { grid-column: 1; grid-row: auto; position: static; margin-top: 40px; background: var(--bg-soft); }
}

/* Móvil: destacada en vertical, filas compactas sin resumen y el botón abajo a todo el ancho */
@container (max-width: 640px) {
  .blog-section { padding: 56px 0 60px; }
  .blog-head { display: block; margin-bottom: 26px; }
  .blog-head > .btn { display: none; }
  .blog-head .section-title { font-size: 28px; letter-spacing: -1px; }
  .blog-head-text { font-size: 15px; }
  .blog-more { display: block; }
  .blog-more .btn { width: 100%; }
  .blog-home-grid, .blog-grid, .blog-grid[data-cols] { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .blog-home-grid > .is-featured, .blog-page .post-card.is-featured { display: flex; }
  .blog-home-grid > .is-featured .post-card-media, .blog-page .post-card.is-featured .post-card-media { aspect-ratio: 16 / 10; height: auto; min-height: 0; }
  .post-card.is-featured .post-card-body, .blog-page .post-card.is-featured .post-card-body { padding: 18px 12px 8px; }
  .post-card.is-featured .post-card-title, .blog-page .post-card.is-featured .post-card-title { font-size: 22px; letter-spacing: -.6px; }
  .post-card.is-featured .post-card-excerpt { font-size: 14.5px; }
  .blog-home-grid > .is-row, .blog-grid > .post-card, .blog-grid > :last-child:nth-child(odd) { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px; padding: 6px; }
  :is(.blog-home-grid > .is-row, .blog-grid > .post-card) .post-card-media { aspect-ratio: auto; height: 100%; min-height: 112px; border-radius: 16px 4px 16px 16px; }
  :is(.blog-home-grid > .is-row, .blog-grid > .post-card) .post-card-body { gap: 6px; padding: 6px 6px 2px 10px; }
  :is(.blog-home-grid > .is-row, .blog-grid > .post-card) .post-card-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 15.5px; }
  :is(.blog-home-grid > .is-row, .blog-grid > .post-card) :is(.post-card-excerpt, .post-card-new) { display: none; }
  :is(.blog-home-grid > .is-row, .blog-grid > .post-card) .post-cover-icon { width: 44px; height: 44px; border-radius: 14px 4px 14px 14px; font-size: 20px; }
  :is(.blog-home-grid > .is-row, .blog-grid > .post-card) .post-cover::before { display: none; }
  :is(.blog-home-grid > .is-row, .blog-grid > .post-card) .post-card-foot { padding-top: 0; font-size: 12px; }
  :is(.blog-home-grid > .is-row, .blog-grid > .post-card) .post-card-go { width: 30px; height: 30px; font-size: 12px; }
  .post-cat { font-size: 11.5px; }
  .blog-page { padding: 16px 0 60px; }
  .blog-page > .row { gap: 20px; }
  .blog-pills { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -20px; padding: 0 20px 4px; scrollbar-width: none; }
  .blog-pills a { white-space: nowrap; }
  article.post { padding: 28px 0 56px; }
  .post-share-copy { margin-left: 0; }
  .post-author { gap: 14px; padding: 18px; }
  .post-avatar.is-big { width: 52px; height: 52px; font-size: 20px; }
}
@media (max-width: 640px) {
  .page-hero.blog-hero { padding: 36px 0 44px; }
  .page-hero.blog-hero.is-post { padding-bottom: 96px; }
  .blog-hero .page-hero-text { font-size: 15px; }
  .blog-hero-meta span + span { display: none; }
  .post-by small { font-size: 12px; }
  .post-cover-wrap { margin-top: -72px; padding: 0 12px; }
  .post-cover-frame { aspect-ratio: 16 / 10; border-width: 5px; }
}

/* ==========================================================================
   Blog: elementos del artículo (.post .prose)
   Los pone post_enhance() (includes/functions.php) a partir del Markdown o del editor de /admin; reglas de uso en
   CLAUDE.md → Artículos del blog. Un solo tono suave por elemento (tonos -soft / -dark del :root de main.css), sin degradados ni sombras: borde fino --line.
   Reutiliza: acordeón .faq (motion.css + main.js), .table-wrap, .btn, .caveat-font y @keyframes pulse-ring (main.css).
   ========================================================================== */
/* Barra de lectura: línea cian arriba del todo que avanza al bajar (main.js → --progress) */
.post-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: 3px; pointer-events: none; }
.post-progress-bar { display: block; height: 100%; background: var(--cyan); transform: scaleX(var(--progress, 0)); transform-origin: left; }

/* Negrita: subrayado suave de rotulador cian */
.post .prose strong { font-weight: 600; text-decoration: underline; text-decoration-color: rgb(0 187 211 / 28%); text-decoration-thickness: .42em; text-underline-offset: -.22em; text-decoration-skip-ink: none; }

/* Índice: dentro del artículo, tras el primer párrafo; H2 numerados 01, 02… en dos columnas */
.post-toc { margin: 1.8em 0 2.2em; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.post-toc-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; list-style: none; }
.post-toc-head::-webkit-details-marker { display: none; }
.post-toc-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--cyan-soft); color: var(--cyan-dark); font-size: 18px; }
.post-toc-title { font-weight: 600; font-size: 18px; }
.post-toc-meta { font-size: 13px; color: var(--muted); }
.post-toc-toggle { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto; border: 1px solid var(--cyan); border-radius: 50%; color: var(--cyan-dark); font-size: 13px; transition: transform var(--dur) var(--ease), background-color var(--dur-fast) var(--ease); }
.post-toc details[open] .post-toc-toggle { transform: rotate(180deg); background: var(--cyan-soft); }
.post-toc-head:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; border-radius: 18px; }
.prose .post-toc-list { list-style: none; counter-reset: toc; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; padding: 0 20px 20px; }
.prose .post-toc-list li { counter-increment: toc; margin: 0; }
.prose .post-toc-list a { display: flex; gap: 12px; height: 100%; padding: 10px 12px; border-radius: 12px; background: var(--bg-soft); color: var(--black); font-size: 15px; font-weight: 500; line-height: 1.35; text-decoration: none; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.prose .post-toc-list a::before { content: counter(toc, decimal-leading-zero); flex: none; color: var(--cyan-dark); font-weight: 700; }
.prose .post-toc-list a:is(:hover, :focus-visible) { background: var(--cyan-soft); color: var(--cyan-dark); transform: translateX(4px); }

/* Lista sin numerar: checks en círculo cian suave; «✗» al principio → cruz rosa suave */
.prose .post-checks { list-style: none; display: grid; gap: 10px; margin: 1.2em 0 1.5em; padding: 0; }
.prose .post-checks li { position: relative; margin: 0; padding-left: 36px; }
/* Círculo (::before) con un check dibujado con dos bordes (::after); también en .post-checkgrid */
:is(.post-checks, .post-checkgrid) li::before { content: ''; position: absolute; left: var(--check-x, 0); top: var(--check-y, 2px); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--cyan-soft); color: var(--check, var(--cyan-dark)); font: 11px/1 'Linearicons-Free'; }
:is(.post-checks, .post-checkgrid) li:not(.post-checks-no)::after { content: ''; position: absolute; left: calc(var(--check-x, 0px) + 9px); top: calc(var(--check-y, 2px) + 5px); width: 6px; height: 11px; border: solid var(--check, var(--cyan-dark)); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.post-checks li.post-checks-no { --check: var(--pink-dark); color: var(--muted); }
.post-checks li.post-checks-no::before { content: '\e870'; background: var(--pink-soft); }

/* Lista numerada: pasos con círculo y línea fina; la negrita del principio es el título del paso */
.prose .post-steps { list-style: none; counter-reset: step; margin: 1.4em 0 1.8em; padding: 0; }
.prose .post-steps > li { counter-increment: step; position: relative; min-height: 42px; margin: 0; padding: 7px 0 22px 58px; }
.post-steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgb(0 187 211 / 35%); border-radius: 50%; background: var(--cyan-soft); color: var(--cyan-dark); font-weight: 600; }
.post-steps > li::after { content: ''; position: absolute; left: 20px; top: 46px; bottom: 6px; width: 1px; background: rgb(0 187 211 / 35%); }
.prose .post-steps > li:last-child { padding-bottom: 0; }
.post-steps > li:last-child::after { display: none; }
.post .prose .post-steps-title { display: block; font-size: 17px; text-decoration: none; }

/* Tablas: cabecera cian suave con línea fina, filas alternas y scroll en móvil (.table-wrap) */
.post .prose .table-wrap { margin: 1.6em 0; border: 1px solid var(--line); border-radius: 14px; }
.post .prose table { min-width: 520px; background: #fff; }
.post .prose th, .post .prose td { border: 0; border-bottom: 1px solid var(--line); padding: 12px 14px; }
.post .prose th { background: var(--cyan-soft); color: var(--cyan-dark); font-weight: 600; border-bottom-color: rgb(0 187 211 / 35%); }
.post .prose tbody tr:nth-child(even) td { background: var(--bg-blue); }
.post .prose tbody tr:last-child td { border-bottom: 0; }

/* Preguntas frecuentes: el acordeón .faq de la web, con borde en vez de sombra */
.post .prose .post-faq .acc { box-shadow: none; border: 1px solid var(--line); }
.post .prose .post-faq .acc-head { margin: 0; font-size: 16px; letter-spacing: 0; }

/* Resumen: «Lo esencial en 30 segundos» */
.post-summary { margin: 0 0 2em; padding: 22px 26px 8px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-blue); }
.prose .post-summary-title { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-weight: 600; font-size: 17px; }
.post-summary-title .lnr { color: var(--violet); font-size: 20px; }

/* Cajas Consejo (cian) / Importante (rosa) / Recuerda (violeta) */
.post-callout { --tone: var(--cyan-dark); --tone-soft: var(--cyan-soft); display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; margin: 1.6em 0; padding: 20px 22px; border-radius: 4px 18px 4px 18px; background: var(--tone-soft); }
.post-callout--warn { --tone: var(--pink-dark); --tone-soft: var(--pink-soft); }
.post-callout--note { --tone: var(--violet); --tone-soft: var(--violet-soft); }
.post-callout-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--tone); font-size: 20px; }
.prose .post-callout-title { margin: 2px 0; color: var(--tone); font-size: 13px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }
.post-callout p:last-child { margin-bottom: 0; }

/* Definición de un término (¿Qué es X?) */
.post-term { position: relative; margin: 1.8em 0; padding: 22px 26px 18px; border: 1px dashed rgb(105 69 232 / 40%); border-radius: 14px; }
.post-term-label { position: absolute; top: -12px; left: 20px; padding: 1px 12px; border-radius: 30px; background: var(--violet-soft); color: var(--violet); font-size: 11.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }
.prose .post-term-word { margin: 4px 0; color: var(--violet); font-size: 19px; font-weight: 600; }
.post-term-word dfn { font-style: normal; }
.post-term p:last-child { margin-bottom: 0; }

/* Glosario: «Término: definición» */
.post-glossary { margin: 1.6em 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.post-glossary > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 15px; }
.post-glossary > div:last-child { border-bottom: 0; }
.post-glossary > div:nth-child(even) { background: var(--bg-blue); }
.post-glossary dt { color: var(--violet); font-weight: 600; }
.post-glossary dd { margin: 0; }

/* Parejas: A favor / En contra (verde / rosa), Antes / Después y Mito / Realidad */
.post-procon, .post-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 1.6em 0; }
.post-myth { display: grid; gap: 10px; margin: 1.6em 0; }
:where(.post-procon, .post-compare, .post-myth) > div { --tone: var(--green-dark); --tone-soft: var(--green-soft); padding: 18px 22px 8px; border-radius: 14px; background: var(--tone-soft); }
.post-procon-con, .post-myth-myth { --tone: var(--pink-dark); --tone-soft: var(--pink-soft); }
.post-compare-before { --tone: var(--muted); --tone-soft: var(--bg-soft); color: var(--muted); }
.prose :is(.post-procon-title, .post-compare-title, .post-myth-title) { margin: 0 0 6px; color: var(--tone); font-size: 12.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }
.post-procon .post-checks { margin: 0 0 10px; font-size: 15.5px; }
.post-procon .post-checks li { --check: var(--tone); }
.post-procon .post-checks li::before { background: #fff; }
.post-procon-con .post-checks li::before { content: '\e870'; }
.post-procon-con .post-checks li::after { content: none; }
.post-myth-myth p:not(.post-myth-title) { text-decoration: line-through; text-decoration-color: var(--pink); color: var(--muted); }

/* Tarjetas con icono que gira al pasar el ratón */
.post-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin: 1.6em 0; }
.post-cards-item { padding: 22px 20px; border: 1px solid var(--line); border-radius: 4px 18px 4px 18px; background: #fff; transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.post-cards-item:hover { transform: translateY(var(--lift)); border-color: rgb(0 187 211 / 45%); }
.post-cards-icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 12px; border: 1px solid var(--cyan); border-radius: 50%; color: var(--cyan-dark); font-size: 20px; transition: transform var(--dur-slow) var(--ease), background-color var(--dur-fast) var(--ease); }
.post-cards-item:hover .post-cards-icon { transform: rotate(360deg); background: var(--cyan-soft); }
.post-cards-item p { margin: 0; font-size: 15px; }
.prose .post-cards-title { margin-bottom: 4px; font-weight: 600; font-size: 16px; }

/* Comprueba: casillas que el lector marca */
.prose .post-checklist { list-style: none; margin: 1.6em 0; padding: 8px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-blue); }
.prose .post-checklist li { margin: 0; border-bottom: 1px solid var(--line); }
.post-checklist li:last-child { border-bottom: 0; }
.post-checklist label { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; cursor: pointer; }
.post-checklist input { appearance: none; flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin: 3px 0 0; border: 1px solid var(--cyan); border-radius: 6px; background: #fff; cursor: pointer; }
.post-checklist input::after { content: '\2713'; color: #fff; font-size: 14px; font-weight: 700; line-height: 1; }
.post-checklist input:checked { background: var(--cyan); }
.post-checklist input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.post-checklist input:checked + span { color: var(--muted); text-decoration: line-through; }

/* Requisitos: checks en tarjetas a dos columnas */
.prose .post-checkgrid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 1.4em 0; padding: 0; }
.prose .post-checkgrid li { --check-x: 14px; --check-y: 13px; position: relative; margin: 0; padding: 13px 16px 13px 50px; border: 1px solid var(--line); border-radius: 12px; font-size: 15px; }

/* Clave: puntos que laten (Check List Bullets de Nauzet; usa @keyframes pulse-ring de main.css) */
.prose .pulse-list { list-style: none; display: grid; gap: 16px; margin: 1.4em 0; padding: 0; }
.prose .pulse-list li { position: relative; margin: 0; padding-left: 36px; }
.pulse-list li::before { content: '\2713'; position: absolute; left: 0; top: 4px; z-index: 1; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: var(--pink); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.pulse-list li::after { content: ''; position: absolute; left: -6px; top: -2px; width: 33px; height: 33px; border-radius: 50%; background: var(--pink); animation: pulse-ring 3.25s cubic-bezier(.215, .61, .355, 1) infinite forwards; } /* forwards: con «Reducir movimiento» queda invisible, no como círculo fijo */

/* Etiquetas */
.prose .post-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 1.2em 0; padding: 0; }
.prose .post-chips li { margin: 0; padding: 4px 16px; border-radius: 30px; background: var(--violet-soft); color: var(--violet); font-size: 14px; font-weight: 500; }

/* Haz esto ahora: lista con flechas */
.prose .post-arrows { list-style: none; display: grid; gap: 8px; margin: 1.2em 0; padding: 0; }
.prose .post-arrows li { position: relative; margin: 0; padding-left: 30px; }
.post-arrows li::before { content: '\e87a'; position: absolute; left: 0; top: 6px; color: var(--pink); font: 15px/1 'Linearicons-Free'; transition: transform var(--dur-fast) var(--ease); }
.post-arrows li:hover::before { transform: translateX(4px); }

/* Fases: línea de tiempo */
.prose .post-timeline { list-style: none; display: grid; gap: 18px; margin: 1.6em 0; padding: 0 0 0 28px; border-left: 1px solid rgb(105 69 232 / 35%); }
.prose .post-timeline li { position: relative; margin: 0; }
.post-timeline li::before { content: ''; position: absolute; left: -36px; top: 5px; width: 15px; height: 15px; border: 2px solid var(--violet); border-radius: 50%; background: #fff; }
.post-timeline-when { color: var(--violet); font-size: 12.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.post-timeline p { margin: 0; }

/* Ficha rápida: dificultad (con puntos), tiempo y coste */
.post-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 1.6em 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.post-facts > div { padding: 14px 18px; border-right: 1px solid var(--line); }
.post-facts > div:last-child { border-right: 0; }
.post-facts dt { color: var(--muted); font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; }
.post-facts dd { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.post-facts-dots { display: inline-flex; gap: 4px; }
.post-facts-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.post-facts-dots i.is-on { background: var(--cyan); }

/* Cifra destacada (solo con fuente) */
.post-stat { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin: 1.6em 0; padding: 20px 26px; border-radius: 18px; background: var(--cyan-soft); }
.prose .post-stat-num { margin: 0; color: var(--cyan-dark); font-size: 52px; font-weight: 700; letter-spacing: -2px; line-height: 1; }
.prose .post-stat-text { flex: 1 1 240px; margin: 0; }
.post-stat small { display: block; margin-top: 4px; color: var(--muted); font-size: 12.5px; }

/* Ejemplo en la zona */
.post-example { margin: 1.6em 0; padding: 18px 22px; border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 14px; }
.prose .post-example-title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--green-dark); font-weight: 600; }
.post-example p:last-child { margin-bottom: 0; }

/* Plantilla con botón Copiar (main.js → [data-copy]) */
.post-copy { margin: 1.6em 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.post-copy-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--bg-soft); }
.prose .post-copy-title { margin: 0; font-size: 14px; font-weight: 600; }
.post-copy-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 16px; border: 1px solid var(--cyan); border-radius: 30px; background: #fff; color: var(--cyan-dark); font: 600 13px 'Poppins', sans-serif; cursor: pointer; }
.post-copy-btn:is(:hover, :focus-visible), .post-copy-btn.is-done { background: var(--cyan-soft); }
html:not(.js) .post-copy-btn { display: none; }
.prose .post-copy-text { margin: 0; padding: 16px 18px; font-size: 15px; white-space: pre-line; }

/* Pestañas (main.js: clic y flechas del teclado) */
.post-tabs { margin: 1.6em 0; }
.post-tabs-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: -1px; }
.post-tabs-btn { padding: 8px 18px; border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--bg-soft); color: var(--muted); font: 500 14px 'Poppins', sans-serif; cursor: pointer; }
.post-tabs-btn.is-active { background: #fff; color: var(--violet); font-weight: 600; }
.post-tabs-btn:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }
.post-tabs-panel { padding: 16px 20px; border: 1px solid var(--line); border-radius: 0 14px 14px 14px; }
.post-tabs-panel p { margin: 0; }
.js .post-tabs-panel:not(.is-active) { display: none; }

/* Nota manuscrita (.caveat-font) */
.prose .post-note { display: block; width: fit-content; margin: 1.2em 0 1.4em 10px; color: var(--violet); }

/* Te puede interesar: tarjeta a otro artículo */
.prose .post-related { display: flex; align-items: center; gap: 16px; margin: 1.6em 0; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; color: var(--black); text-decoration: none; transition: border-color var(--dur-fast) var(--ease); }
.post-related-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--violet-soft); color: var(--violet); font-size: 20px; }
.post-related-body { flex: 1; }
.post-related small { display: block; color: var(--muted); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.post-related-title { font-weight: 600; }
.post-related-arrow { color: var(--violet); transition: transform var(--dur-fast) var(--ease); }
.prose .post-related:is(:hover, :focus-visible) { border-color: rgb(105 69 232 / 45%); }
.post-related:is(:hover, :focus-visible) .post-related-arrow { transform: translateX(4px); }

/* Siguiente paso: llamada a la acción con el botón de la web */
.post-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin: 2em 0; padding: 24px 28px; border-radius: 18px; background: var(--violet-soft); }
.prose .post-cta-text { margin: 0; max-width: 440px; font-size: 18px; font-weight: 600; }
.prose .post-cta .btn { color: #fff; text-decoration: none; }
.prose .post-cta .btn:is(:hover, :focus-visible) { box-shadow: none; }

/* Puntos clave: resumen final */
.post-keys { margin: 1.8em 0; padding: 22px 26px; border-radius: 18px; background: var(--violet-soft); }
.prose .post-keys-title { margin: 0 0 12px; font-size: 18px; font-weight: 600; }
.prose .post-keys-list { list-style: none; counter-reset: key; display: grid; gap: 10px; margin: 0; padding: 0; }
.prose .post-keys-list li { counter-increment: key; position: relative; margin: 0; padding-left: 40px; }
.post-keys-list li::before { content: counter(key); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: #fff; color: var(--violet); font-size: 13px; font-weight: 700; }

/* Frase destacada con comillas grandes; firma en Caveat */
.prose .post-quote { position: relative; margin: 2.2em 0; padding: 6px 0 6px 64px; border: 0; background: none; }
.post-quote::before { content: '\201C'; position: absolute; left: 0; top: -14px; color: var(--magenta); font-size: 90px; font-weight: 700; line-height: 1; }
.post-quote p { margin: 0; font-size: 21px; font-weight: 500; line-height: 1.5; letter-spacing: -.3px; }
.post-quote-author { display: block; margin-top: 10px; color: var(--pink); font: 24px/1.2 var(--font-note); transform: rotate(-3deg); transform-origin: left; }

@media (max-width: 620px) {
  .prose .post-toc-list, .post-procon, .post-compare, .prose .post-checkgrid { grid-template-columns: minmax(0, 1fr); }
  .post-toc-meta { display: none; }
  .post-glossary > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .post-facts > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .post-facts > div:last-child { border-bottom: 0; }
  .prose .post-quote { padding-left: 46px; }
  .post-quote::before { font-size: 70px; }
}