/* Capa editorial: reutiliza tokens, tipografía y componentes del estilo existente. */
.seo-main { padding-block: 32px 24px;
 max-width: 1120px;
 }
.seo-breadcrumb { display: flex;
 flex-wrap: wrap;
 gap: 9px;
 font-size: .88rem;
 color: var(--ink-soft, #52505c);
 }
.seo-breadcrumb a, .seo-section a, .seo-directory a { text-decoration: underline;
 text-underline-offset: 4px;
 }
.seo-hero { max-width: 900px;
 padding-block: 52px 28px;
 }
.seo-hero h1 { font-size: clamp(2.1rem, 4.8vw, 4.3rem);
 letter-spacing: -.04em;
 line-height: 1.08;
 }
.seo-hero .lead { max-width: 800px;
 font-size: clamp(1.05rem, 2vw, 1.24rem);
 }
.seo-section { padding-block: 30px;
 border-top: 1px solid #dfdce8;
 }
.seo-section h2 { font-size: clamp(1.45rem, 3vw, 2rem);
 line-height: 1.2;
 margin-bottom: 22px;
 }
.seo-section > p, .seo-section > ul, .seo-faq { max-width: 80ch;
 }
.seo-section li { margin-block: 12px;
 line-height: 1.65;
 }
.seo-examples { display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 24px;
 }
.seo-piece { margin: 0;
 border-radius: 24px;
 padding: 24px;
 background: #f2edf9;
 border: 1px solid #e0d7ed;
 }
.seo-piece:nth-child(even) { background: #fcecf0;
 border-color: #ecd6df;
 }
.seo-piece figcaption { font-size: .82rem;
 color: #555060;
 padding-bottom: 16px;
 }
.seo-piece ol { list-style: none;
 margin: 0;
 padding: 0;
 }
.seo-piece li { padding: 16px 0;
 margin: 0;
 border-top: 1px solid #d9cde4;
 }
.seo-piece li span { font-size: .8rem;
 color: #61546f;
 }
.seo-piece li:first-child p { font-size: clamp(1.4rem, 3vw, 2rem);
 font-weight: 650;
 line-height: 1.2;
 }
.seo-piece p { margin: 8px 0 0;
 }
.seo-faq details { padding: 18px 0;
 border-top: 1px solid #dfdce8;
 }
.seo-faq summary { cursor: pointer;
 font-weight: 650;
 }
.seo-faq p { padding-inline: 0 18px;
 line-height: 1.7;
 }
.seo-directory { display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 list-style: none;
 padding: 0;
 gap: 16px;
 }
.seo-directory li { border: 1px solid #e0d7ed;
 background: #fff;
 border-radius: 18px;
 }
.seo-directory a { display: block;
 padding: 20px;
 height: 100%;
 }
.seo-page .header-nav { display: flex;
 flex-wrap: wrap;
 gap: 18px;
 }
.seo-page .footer-links { flex-wrap: wrap;
 }
.seo-cta { margin-top: 36px;
 }
.seo-cta .actions a { text-decoration: underline;
 text-underline-offset: 5px;
 }
.seo-local-note { border-left: 4px solid #70528c;
 padding: 16px 20px;
 background: #f2edf9;
 }
.seo-page a, .seo-page p, .seo-page li, .seo-page summary { overflow-wrap: anywhere;
 }
@media (max-width: 700px) {
 .seo-main { padding-top: 24px;
 }
 .seo-hero { padding-block: 32px 20px;
 }
 .seo-examples, .seo-directory { grid-template-columns: 1fr;
 }
 .seo-page .header-inner { flex-wrap: wrap;
 gap: 14px;
 padding-block: 16px;
 }
 .seo-page .header-nav { font-size: .88rem;
 gap: 14px;
 }
 .seo-piece { padding: 20px;
 }
}
/* Interactividad primero. El texto editorial completo vive en detalles nativos. */
.seo-hero.interactive-hero { display: grid;
 grid-template-columns: 1.15fr .85fr;
 align-items: center;
 gap: 36px;
 max-width: none;
 padding: 32px 0;
 }
.interactive-hero h1 { font-size: clamp(2rem, 4vw, 3.5rem);
 }
.interactive-hero .lead { font-size: 1.05rem;
 line-height: 1.55;
 }
.art-slot { position: relative;
 display: grid;
 place-items: center;
 min-height: 240px;
 margin: 0;
 border-radius: 32px;
 background: #f1e9f8;
 overflow: hidden;
 isolation: isolate;
 color: #665371;
 }
.art-slot::after { content: '';
 position: absolute;
 inset: 20px;
 border: 1px dashed #a38ab5;
 border-radius: 24px;
 z-index: -1;
 }
.art-shapes { display: flex;
 align-items: center;
 justify-content: center;
 gap: 10px;
 opacity: .65;
 }
.art-shapes i { display: block;
 width: 58px;
 height: 86px;
 border-radius: 38px 38px 18px 18px;
 background: #c94945;
 transform: rotate(-12deg);
 }
.art-shapes i:nth-child(2) { width: 86px;
 height: 86px;
 border-radius: 50%;
 background: #174b36;
 transform: translateY(-22px);
 }
.art-shapes i:nth-child(3) { width: 58px;
 height: 58px;
 background: #f2c94c;
 border-radius: 50% 50% 12px 50%;
 transform: rotate(18deg);
 }
.art-slot figcaption { position: absolute;
 bottom: 28px;
 font-size: .76rem;
 letter-spacing: .02em;
 }
.art-slot.small { min-height: 62px;
 width: 78px;
 border-radius: 18px;
 float: right;
 margin: 0 0 12px 16px;
 }
.art-slot.small::after { inset: 6px;
 border-radius: 12px;
 }
.art-slot.small .art-shapes { gap: 3px;
 }
.art-slot.small .art-shapes i { width: 12px;
 height: 20px;
 }
.art-slot.small .art-shapes i:nth-child(2) { width: 18px;
 height: 18px;
 transform: translateY(-5px);
 }
.art-slot.small .art-shapes i:nth-child(3) { width: 12px;
 height: 12px;
 }
.art-slot.small figcaption { display: none;
 }
.seo-playground { padding: 20px;
 background: #fff;
 border: 1px solid #e4d8ef;
 border-radius: 28px;
 box-shadow: 0 16px 60px #54386b09;
 }
.tool-tabs { display: flex;
 gap: 6px;
 flex-wrap: wrap;
 border-bottom: 1px solid #e4d8ef;
 padding-bottom: 16px;
 }
.tool-tabs a { padding: 10px 15px;
 border-radius: 999px;
 text-decoration: none;
 font-size: .9rem;
 font-weight: 600;
 }
.tool-tabs a[aria-selected="true"] { color: #fff;
 background: #633184;
 }
.seo-tool { padding: 16px 0;
 }
.seo-tool > summary { padding: 14px 0;
 font-weight: 650;
 cursor: pointer;
 }
.seo-enhanced .seo-tool > summary { display: none;
 }
.seo-enhanced .seo-readable { display: none;
 }
.seo-enhanced .seo-tool[hidden], .seo-gl[hidden], .idea-card[hidden] { display: none !important;
 }
.tool-content::after { content: '';
 display: block;
 clear: both;
 }
.idea-filters { display: flex;
 flex-wrap: wrap;
 gap: 14px;
 padding: 0 0 12px;
 }
.idea-filters label { display: grid;
 gap: 5px;
 font-size: .85rem;
 font-weight: 550;
 }
.idea-filters select { min-height: 44px;
 min-width: 148px;
 padding: 8px 12px;
 border: 1px solid #b5a1c7;
 border-radius: 12px;
 background: #fff;
 color: #30213f;
 }
.idea-track { clear: both;
 position: relative;
 margin: 0;
 }
.idea-card { display: flex;
 flex-direction: column;
 justify-content: space-between;
 width: min(270px, 82vw);
 min-height: 190px;
 padding: 22px;
 border: 1px solid #e3d6ef;
 border-radius: 24px;
 background: #f4eefb;
 }
.idea-card:nth-child(even) { background: #fdf0f3;
 border-color: #f0d8e2;
 }
.idea-card h3 { font-size: 1.3rem;
 line-height: 1.25;
 margin-block: 16px;
 font-weight: 600;
 }
.idea-tag { font-size: .75rem;
 color: #664779;
 }
.idea-controls { display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 16px;
 }
.idea-controls .quiet { margin: 0;
 font-size: .85rem;
 }
.week-grid { clear: both;
 display: grid;
 grid-template-columns: repeat(7, minmax(0, 1fr));
 gap: 8px;
 margin: 22px 0;
 }
.week-grid a { min-height: 110px;
 padding: 12px;
 border: 1px solid #ded0ec;
 border-radius: 16px;
 text-decoration: none;
 background: #f7f3fc;
 }
.week-grid b { font-size: .78rem;
 }
.week-grid span { display: block;
 font-size: .74rem;
 margin-top: 14px;
 line-height: 1.4;
 }
.week-grid .has-idea { background: #e7f2e7;
 border-color: #aec6af;
 }
.error-cards { clear: both;
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 16px;
 }
.error-card { display: block;
 padding: 24px;
 border-radius: 22px;
 background: #fff3e3;
 border: 1px solid #ebcba1;
 text-decoration: none;
 }
.seo-mini-cta { display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 22px 0;
 }
.seo-readable { margin: 20px 0;
 padding: 20px;
 border: 1px solid #ddd2e9;
 border-radius: 20px;
 }
.seo-readable details { margin: 16px 0;
 }
.seo-readable summary { cursor: pointer;
 font-weight: 600;
 }
.seo-gl { background: #34213f55;
 -webkit-backdrop-filter: blur(8px);
 backdrop-filter: blur(8px);
 z-index: 100;
 transition-duration: .22s;
 }
.seo-gl .gl-panel { color: #30213f;
 background: linear-gradient(135deg, #fffffff5, #f5edf9f5 65%, #fff0eaf5);
 width: min(800px, 100%);
 max-height: min(820px, 90dvh);
 border: 1px solid #fff;
 padding: 32px;
 box-shadow: 0 24px 90px #30213f33;
 transition: transform .3s cubic-bezier(.22,1,.36,1);
 overscroll-behavior: contain;
 }
.seo-gl .gl-panel > h2 { font-family: var(--ad-sans, sans-serif);
 font-size: clamp(1.5rem, 3vw, 2rem);
 font-weight: 600;
 padding-right: 40px;
 line-height: 1.2;
 }
.seo-gl .gl-panel p { color: #51435b;
 line-height: 1.65;
 }
.seo-gl .gl-panel .quiet { color: #675b70;
 }
.seo-gl .gl-x { float: none;
 position: sticky;
 top: 0;
 margin-left: auto;
 display: block;
 width: 44px;
 height: 44px;
 background: #fff;
 border-color: #b9a4cc;
 color: #30213f;
 cursor: pointer;
 z-index: 2;
 }
.seo-gl .gl-cta { display: inline-flex;
 justify-content: center;
 align-items: center;
 min-height: 48px;
 padding: 12px 22px;
 border: 0;
 border-radius: 999px;
 background: var(--ad-action, #633184) !important;
 text-decoration: none;
 font: inherit;
 font-weight: 650;
 cursor: pointer;
 }
.seo-gl label { font-weight: 550;
 }
.seo-gl input:not([type="radio"]) { width: 100%;
 min-height: 46px;
 padding: 10px 12px;
 border: 1px solid #a891bd;
 border-radius: 12px;
 background: #fff;
 color: #30213f;
 font: inherit;
 }
.seo-gl fieldset { border: 1px solid #d6c6e3;
 border-radius: 18px;
 margin: 18px 0;
 padding: 16px;
 }
.seo-gl fieldset label { display: flex;
 align-items: center;
 gap: 10px;
 font-weight: 400;
 }
.seo-gl input[type="radio"] { accent-color: #633184;
 width: 20px;
 height: 20px;
 flex: 0 0 auto;
 }
.seo-gl output { display: block;
 padding: 18px;
 margin-top: 18px;
 border-radius: 16px;
 background: #e7f2e7;
 line-height: 1.6;
 }
.post-demo { max-width: 430px;
 border: 1px solid #d8cbe4;
 border-radius: 22px;
 overflow: hidden;
 margin: 24px auto;
 background: #fff;
 }
.post-demo header { display: flex;
 align-items: center;
 gap: 8px;
 padding: 14px;
 font-size: .85rem;
 }
.post-avatar { width: 25px;
 height: 25px;
 border-radius: 50%;
 background: #d9c5ef;
 flex: 0 0 auto;
 }
.example-label { padding: 3px 8px;
 border-radius: 999px;
 background: #e7f2e7;
 font-size: .7rem;
 margin-left: auto;
 }
.post-demo .art-slot { border-radius: 0;
 min-height: 250px;
 }
.post-demo p { margin: 0;
 padding: 10px 18px;
 font-size: .9rem;
 }
.flip-card { position: relative;
 min-height: 200px;
 margin: 24px 0;
 perspective: 1000px;
 }
.flip-card > div { padding: 24px;
 background: #fff1dc;
 border: 1px solid #e4c69f;
 border-radius: 22px;
 }
.seo-enhanced .flip-card > div { backface-visibility: hidden;
 transition: transform .35s, visibility .35s;
 }
.seo-enhanced .flip-card [data-error-back] { position: absolute;
 inset: 0;
 background: #e7f2e7;
 transform: rotateY(180deg);
 visibility: hidden;
 }
.seo-enhanced .flip-card.is-flipped [data-error-front] { transform: rotateY(-180deg);
 visibility: hidden;
 }
.seo-enhanced .flip-card.is-flipped [data-error-back] { transform: rotateY(0);
 visibility: visible;
 }
.try-steps { list-style: none;
 padding: 0;
 }
.try-steps li { padding: 16px 0;
 border-bottom: 1px solid #dfd1ea;
 }
.try-steps li > b { display: grid;
 place-items: center;
 width: 35px;
 height: 35px;
 flex: 0 0 auto;
 background: #e9daf7;
 border-radius: 50%;
 }
.try-steps h3 { margin: 0;
 }
.seo-page :focus-visible { outline: 3px solid #8a00d4;
 outline-offset: 4px;
 }
@media (max-width: 700px) {
 .seo-hero.interactive-hero { grid-template-columns: 1fr;
 gap: 18px;
 padding-block: 26px;
 }
 .interactive-hero > .art-slot { min-height: 155px;
 }
 .interactive-hero .art-shapes { transform: scale(.75);
 }
 .art-slot figcaption { bottom: 18px;
 }
 .seo-playground { padding: 16px;
 border-radius: 24px;
 }
 .tool-tabs { flex-wrap: nowrap;
 overflow-x: auto;
 margin: 0 -4px;
 padding: 4px 4px 14px;
 }
 .tool-tabs a { white-space: nowrap;
 padding: 9px 13px;
 }
 .idea-filters { gap: 10px;
 }
 .idea-filters select { min-width: 125px;
 }
 .art-slot.small { width: 58px;
 min-height: 55px;
 margin-left: 8px;
 }
 .week-grid { grid-template-columns: repeat(2,minmax(0,1fr));
 }
 .week-grid a { min-height: 95px;
 }
 .error-cards { grid-template-columns: 1fr;
 }
 .seo-gl { place-items: end center;
 padding: 0;
 }
 .seo-gl .gl-panel { width: 100%;
 max-height: 92dvh;
 border-radius: 28px 28px 0 0;
 padding: 20px 22px 28px;
 transform: translateY(100%);
 }
 .seo-gl.on .gl-panel { transform: none;
 }
 .seo-gl .art-slot { min-height: 175px;
 }
 .flip-card { min-height: 260px;
 }
}
@media (prefers-reduced-motion: reduce) {
 .seo-gl, .seo-gl .gl-panel, .flip-card > div { transition: none !important;
 }
}
/* El primer gesto debe quedar cerca también en pantallas pequeñas. */
@media (max-width: 700px) {
 .seo-page .header-inner { padding-block: 10px; min-height: 0; gap: 6px; }
 .seo-page .brand-name { font-size: 18px; }
 .seo-page .header-nav { width: 100%; gap: 16px; }
 .seo-page .header-nav a:first-child { display: inline; }
 .seo-page .header-nav a { padding-block: 6px; font-size: 12px; }
 .seo-main { padding-top: 14px; }
 .seo-breadcrumb { gap: 5px 8px; font-size: .74rem; }
 .seo-hero.interactive-hero { gap: 8px; padding-block: 16px; }
 .interactive-hero h1 { margin-bottom: 12px; font-size: clamp(1.8rem, 7.6vw, 2.2rem); }
 .interactive-hero .eyebrow { margin-bottom: 8px; font-size: .58rem; }
 .interactive-hero .lead { font-size: .9rem; margin-bottom: 10px; }
 .interactive-hero > .art-slot { min-height: 98px; border-radius: 22px; }
 .interactive-hero .art-shapes { transform: scale(.48) translateY(-18px); }
 .interactive-hero .art-slot figcaption { bottom: 10px; font-size: .65rem; }
 .interactive-hero .art-slot::after { inset: 10px; border-radius: 16px; }
}

.idea-filters { clear: both; }
.seo-gl .art-slot.small { min-height: 62px; }
@media (max-width: 700px) { .seo-gl .art-slot.small { min-height: 55px; } }