/* AI Home Designer — CSS base. Los colores, radios, sombras y fuentes llegan como variables desde el diseño activo. */ /* ============ 1. Sitio completo ============ */ body.aihd-on{background:var(--aihd-bg)!important;color:var(--aihd-tx)!important;font-family:var(--aihd-fb)!important;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} body.aihd-on :is(h1,h2,h3,h4,h5,h6){font-family:var(--aihd-fh)!important;letter-spacing:-.015em} body.aihd-on ::selection{background:var(--aihd-p);color:var(--aihd-on-p)} body.aihd-on :focus-visible{outline:2px solid var(--aihd-a);outline-offset:2px} /* Formularios */ body.aihd-on :is(input[type=text],input[type=search],input[type=email],input[type=url],input[type=tel],textarea,select){background-color:var(--aihd-bg);color:var(--aihd-tx);border:1px solid var(--aihd-bd);border-radius:calc(var(--aihd-r)*.7)} body.aihd-on :is(.the-content,.entry-content,.widget,.comment-respond,.wpcf7) :is(input[type=submit],button[type=submit]):not(.aihd-home-wrap *){background:var(--aihd-p);color:var(--aihd-on-p);border:0;border-radius:calc(var(--aihd-r)*.7);font-weight:700;cursor:pointer} /* ============ 2. Contenido de entradas y páginas ============ */ .aihd-on :is(.the-content,.entry-content){color:var(--aihd-tx);font-size:1.075rem;line-height:1.75} .aihd-on :is(.the-content,.entry-content) a:not(.aihd-home-wrap a):not([class*="btn"]):not([class*="button"]){color:var(--aihd-lk);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--aihd-p2);transition:text-decoration-color .2s} .aihd-on :is(.the-content,.entry-content) a:not(.aihd-home-wrap a):not([class*="btn"]):not([class*="button"]):hover{text-decoration-color:currentColor} .aihd-on :is(.the-content,.entry-content) :is(h2,h3,h4):not(.aihd-home-wrap *){color:var(--aihd-tx);text-align:left;line-height:1.25;background:none;border:0;padding:0;box-shadow:none} .aihd-on :is(.the-content,.entry-content) h2:not(.aihd-home-wrap *){font-size:clamp(1.45rem,2.6vw,1.95rem);font-weight:800;margin:2.1em 0 .75em} .aihd-on :is(.the-content,.entry-content) h3:not(.aihd-home-wrap *){font-size:clamp(1.2rem,2vw,1.4rem);font-weight:700;margin:1.8em 0 .6em} /* Variantes H2 */ body.aihd-h2-caja :is(.the-content,.entry-content) h2:not(.aihd-home-wrap *){background:var(--aihd-sf);border-left:4px solid var(--aihd-p);padding:.65em .9em;border-radius:0 var(--aihd-r) var(--aihd-r) 0} body.aihd-h2-linea :is(.the-content,.entry-content) h2:not(.aihd-home-wrap *){display:flex;align-items:center;gap:.7em} body.aihd-h2-linea :is(.the-content,.entry-content) h2:not(.aihd-home-wrap *)::after{content:"";flex:1 1 40px;min-width:40px;height:2px;background:linear-gradient(90deg,var(--aihd-p),transparent)} body.aihd-h2-subrayado :is(.the-content,.entry-content) h2:not(.aihd-home-wrap *){text-decoration:underline;text-decoration-color:var(--aihd-a);text-decoration-thickness:.16em;text-underline-offset:.16em;text-decoration-skip-ink:none} body.aihd-h2-barra :is(.the-content,.entry-content) h2:not(.aihd-home-wrap *)::before{content:"";display:block;width:2.2em;height:.2em;border-radius:3px;background:var(--aihd-a);margin-bottom:.55em} /* Variantes H3 */ body.aihd-h3-lateral :is(.the-content,.entry-content) h3:not(.aihd-home-wrap *){border-left:3px solid var(--aihd-a);padding-left:.7em} body.aihd-h3-punto :is(.the-content,.entry-content) h3:not(.aihd-home-wrap *)::before{content:"";display:inline-block;width:.5em;height:.5em;border-radius:50%;background:var(--aihd-p);margin-right:.55em;vertical-align:.12em} body.aihd-h3-simple :is(.the-content,.entry-content) h3:not(.aihd-home-wrap *){color:var(--aihd-lk)} .aihd-on :is(.the-content,.entry-content) img:not(.aihd-home-wrap *){border-radius:var(--aihd-r);height:auto} .aihd-on :is(.the-content,.entry-content) iframe:not(.aihd-home-wrap *){border-radius:var(--aihd-r);max-width:100%;border:0} .aihd-on :is(.the-content,.entry-content) blockquote:not(.aihd-home-wrap *){border-left:4px solid var(--aihd-a);background:var(--aihd-sf);padding:1em 1.3em;border-radius:0 var(--aihd-r) var(--aihd-r) 0;margin:1.6em 0;font-style:normal;color:var(--aihd-tx)} .aihd-on :is(.the-content,.entry-content) li:not(.aihd-home-wrap *)::marker{color:var(--aihd-p)} .aihd-on :is(.the-content,.entry-content) hr:not(.aihd-home-wrap *){border:0;height:1px;background:var(--aihd-bd);margin:2.5em 0} /* Botones del contenido (incluye plantillas de fichas con clases tipo "btn" / "boton") */ body.aihd-on .wp-block-button__link, .aihd-on :is(.the-content,.entry-content) a:is([class*="btn"],[class*="boton"],[class*="button"]):not(.aihd-home-wrap a){display:inline-block;background:var(--aihd-p);color:var(--aihd-on-p)!important;border:0;border-radius:calc(var(--aihd-r) + 4px);padding:.72em 1.35em;font-weight:700;text-decoration:none!important;transition:filter .2s,transform .2s} body.aihd-on .wp-block-button__link:hover, .aihd-on :is(.the-content,.entry-content) a:is([class*="btn"],[class*="boton"],[class*="button"]):not(.aihd-home-wrap a):hover{filter:brightness(1.08);transform:translateY(-1px)} /* Directorio: tarjetas/fichas de plantillas propias */ .aihd-mode-directorio :is(.the-content,.entry-content) :is(div,section,article):is([class*="card"],[class*="ficha"],[class*="tarjeta"]):not(.aihd-home-wrap *){background:var(--aihd-sf);border:1px solid var(--aihd-bd);border-radius:var(--aihd-r);box-shadow:var(--aihd-sh);color:var(--aihd-tx)} /* ============ 3. Tablas ============ */ .aihd-on :is(.the-content,.entry-content) table:not(.aihd-home-wrap *){width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--aihd-bd);border-radius:var(--aihd-r);overflow:hidden;margin:1.4em 0;font-size:.96rem;background:var(--aihd-bg)} .aihd-on :is(.the-content,.entry-content) :is(th,td):not(.aihd-home-wrap *){padding:.75em 1em;border:0;border-bottom:1px solid var(--aihd-bd);text-align:left;vertical-align:top;color:var(--aihd-tx);background:transparent} .aihd-on :is(.the-content,.entry-content) :is(th,thead td):not(.aihd-home-wrap *){background:var(--aihd-p);color:var(--aihd-on-p);font-family:var(--aihd-fh);font-weight:700} .aihd-on :is(.the-content,.entry-content) tr:last-child > :is(td,th):not(.aihd-home-wrap *){border-bottom:0} .aihd-on :is(.the-content,.entry-content) tbody tr:hover > td:not(.aihd-home-wrap *){background:var(--aihd-p1)} body.aihd-tb-rayas :is(.the-content,.entry-content) tbody tr:nth-child(even) > td:not(.aihd-home-wrap *){background:var(--aihd-sf)} body.aihd-tb-minimal :is(.the-content,.entry-content) table:not(.aihd-home-wrap *){border:0;border-radius:0;background:transparent} body.aihd-tb-minimal :is(.the-content,.entry-content) :is(th,thead td):not(.aihd-home-wrap *){background:transparent;color:var(--aihd-mt);border-bottom:2px solid var(--aihd-p)} body.aihd-tb-tarjeta :is(.the-content,.entry-content) table:not(.aihd-home-wrap *){box-shadow:var(--aihd-sh)} .aihd-on :is(.the-content,.entry-content) tr.aihd-today > td{background:var(--aihd-p2)!important;font-weight:700} @media (max-width:700px){ /* Una tabla con display:block deja de ser una tabla: la caja llena el ancho —de ahí el borde redondeado a toda anchura— pero las filas pasan a una caja anónima que se encoge a su contenido, y quedaban ocupando el 45-56% con medio recuadro vacío al lado. Además, esa caja de bloque con overflow:hidden y border-radius pinta su borde inferior por debajo de donde termina el flujo, y en iOS se come el encabezado siguiente. Se queda como tabla y se deja que las celdas partan el texto, que es lo que permite que una tabla ancha quepa sin necesidad de romperla. */ .aihd-on :is(.the-content,.entry-content) table:not(.aihd-home-wrap *){ display:table;width:100%;table-layout:auto} .aihd-on :is(.the-content,.entry-content) :is(th,td):not(.aihd-home-wrap *){ overflow-wrap:break-word;word-break:break-word} body.aihd-tb-tarjeta :is(.the-content,.entry-content) table.aihd-lbl{display:block;border:0;box-shadow:none;background:transparent;overflow:visible} body.aihd-tb-tarjeta :is(.the-content,.entry-content) table.aihd-lbl :is(thead,tr.aihd-hrow){display:none} body.aihd-tb-tarjeta :is(.the-content,.entry-content) table.aihd-lbl :is(tbody,tr){display:block} body.aihd-tb-tarjeta :is(.the-content,.entry-content) table.aihd-lbl tr{border:1px solid var(--aihd-bd);border-radius:var(--aihd-r);margin-bottom:.8em;overflow:hidden;background:var(--aihd-sf)} body.aihd-tb-tarjeta :is(.the-content,.entry-content) table.aihd-lbl td{display:flex;justify-content:space-between;gap:1em} body.aihd-tb-tarjeta :is(.the-content,.entry-content) table.aihd-lbl td[data-label]::before{content:attr(data-label);font-weight:700;color:var(--aihd-mt)} } /* Horario, filtro, barra de lectura y botón subir */ .aihd-open{display:inline-flex;align-items:center;gap:.55em;margin:0 0 .7em;padding:.4em .95em;border-radius:999px;font:700 .9rem/1.2 var(--aihd-fh)} .aihd-open::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor} .aihd-open.is-open{background:var(--aihd-ok-bg);color:var(--aihd-ok)} .aihd-open.is-closed{background:var(--aihd-no-bg);color:var(--aihd-no)} .aihd-fx .aihd-open.is-open::before{animation:aihd-pulse 2s infinite} @keyframes aihd-pulse{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}} .aihd-filter-w{margin:1.2em 0 -.4em} body.aihd-on input.aihd-filter{width:100%;max-width:420px;padding:.75em 1em .75em 2.6em;font:inherit;font-size:.97rem;background:var(--aihd-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat .9em center/16px;border:1px solid var(--aihd-bd);border-radius:calc(var(--aihd-r) + 4px)} body.aihd-on input.aihd-filter:focus{border-color:var(--aihd-p);outline:0;box-shadow:0 0 0 3px var(--aihd-p2)} .aihd-filter-empty{display:none;color:var(--aihd-mt);font-size:.92rem;margin:.6em 0} .aihd-progress{position:fixed;top:0;left:0;width:100%;height:3px;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--aihd-p),var(--aihd-a));z-index:99999;pointer-events:none} .aihd-top{position:fixed;right:18px;bottom:22px;z-index:9999;width:46px;height:46px;padding:0;border-radius:50%;border:0;background:var(--aihd-p);color:var(--aihd-on-p);display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 24px -8px rgba(0,0,0,.45);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s,transform .3s} .aihd-top.show{opacity:1;transform:none;pointer-events:auto} .aihd-top svg{width:20px;height:20px} /* ============ 4. Página de portada dentro del tema ============ */ body.aihd-home :is(.asap-hero,.entry-header,.page-header,h1.entry-title,.post-title,.breadcrumbs,.breadcrumb,#breadcrumbs,.rank-math-breadcrumb,.comments-area,#comments,.post-navigation){display:none!important} body.aihd-home :is(#sidebar,#secondary,.sidebar,aside.widget-area){display:none!important} body.aihd-home :is(#primary,.content-area,.site-main,.content-page,.content-single,.content-loop){width:100%!important;max-width:100%!important;float:none!important;flex:1 1 100%!important;margin-left:auto;margin-right:auto} body.aihd-home :is(.the-content,.entry-content){max-width:none!important;padding:0!important;margin:0!important} body.aihd-home.aihd-full{overflow-x:hidden;overflow-x:clip} .aihd-full .aihd-home-wrap{width:100vw;position:relative;left:50%;margin-left:-50vw} /* Reset: evita que los estilos de contenido del tema se cuelen en la portada */ body .aihd-home-wrap :is(h1,h2,h3,p,ul,ol,li,figure){margin:0;padding:0;border:0;background:none;text-align:inherit;box-shadow:none} body .aihd-home-wrap :is(p,li){color:inherit;font-size:inherit;line-height:inherit;font-family:inherit} body .aihd-home-wrap :is(ul,ol){list-style:none} body .aihd-home-wrap li::before,body .aihd-home-wrap li::after{content:none} body .aihd-home-wrap a{text-decoration:none;color:inherit;box-shadow:none;border-bottom:0} body .aihd-home-wrap img{max-width:100%;border-radius:0} /* ============ 5. Portada: estructura ============ */ .aihd-home-wrap{font-family:var(--aihd-fb);color:var(--aihd-tx);font-size:16px;line-height:1.6} .aihd-home-wrap *,.aihd-home-wrap *::before,.aihd-home-wrap *::after{box-sizing:border-box} .aihd-sec{position:relative;padding:calc(var(--aihd-k)*clamp(56px,8vw,104px)) 0;background:var(--aihd-bg)} .aihd-sec.aihd-alt{background:var(--aihd-sf)} .aihd-in{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 clamp(18px,4vw,36px)} .aihd-head{max-width:46rem;margin:0 0 calc(var(--aihd-k)*2.2rem)} .aihd-home-wrap .aihd-title{font:800 clamp(1.7rem,3.4vw,2.6rem)/1.12 var(--aihd-fh);letter-spacing:-.02em;color:var(--aihd-tx);margin:0 0 .4em} .aihd-home-wrap .aihd-sub{font-size:1.1rem;color:var(--aihd-mt);max-width:40rem} .aihd-center-p{margin-top:calc(var(--aihd-k)*2rem)!important;text-align:center} /* Botones y chips */ .aihd-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 1.6em} .aihd-home-wrap .aihd-btn{display:inline-flex;align-items:center;gap:.5em;padding:.95em 1.7em;border-radius:calc(var(--aihd-r) + 6px);background:var(--aihd-p);color:var(--aihd-on-p);font:700 1rem/1 var(--aihd-fh);transition:transform .2s ease,filter .2s ease,border-color .2s ease} .aihd-home-wrap .aihd-btn:hover{transform:translateY(-2px);filter:brightness(1.07)} .aihd-home-wrap .aihd-btn--ghost{background:transparent;color:var(--aihd-tx);border:1.5px solid var(--aihd-bd)} .aihd-home-wrap .aihd-btn--ghost:hover{border-color:var(--aihd-p);color:var(--aihd-lk);filter:none} .aihd-chips{display:flex;flex-wrap:wrap;gap:8px} .aihd-home-wrap .aihd-chip{display:inline-flex;align-items:center;gap:.5em;padding:.5em 1em;border-radius:999px;background:var(--aihd-sf);border:1px solid var(--aihd-bd);color:var(--aihd-tx);font-size:.93rem;font-weight:600;transition:border-color .2s,color .2s} .aihd-alt .aihd-chip{background:var(--aihd-bg)} .aihd-home-wrap .aihd-chip:hover{border-color:var(--aihd-p);color:var(--aihd-lk)} .aihd-chip small{font-size:.78em;color:var(--aihd-mt);font-weight:700} .aihd-home-wrap .aihd-chip--lg{padding:.75em 1.25em;font-size:1rem} /* ============ 6. Hero ============ */ .aihd-sec--hero{padding:calc(var(--aihd-k)*clamp(84px,12vw,160px)) 0;overflow:hidden;isolation:isolate} .aihd-hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none} .aihd-hero-bg span{position:absolute;border-radius:50%;filter:blur(80px);opacity:0} .aihd-home-wrap .aihd-h1{font:800 clamp(2.3rem,6vw,4.5rem)/1.03 var(--aihd-fh);letter-spacing:-.035em;color:var(--aihd-tx);margin:0 0 .4em;max-width:17ch} .aihd-home-wrap .aihd-lead{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--aihd-mt);max-width:36rem;margin:0 0 1.8em} .aihd-center{text-align:center} .aihd-center .aihd-h1{margin-left:auto;margin-right:auto;max-width:19ch} .aihd-center .aihd-lead{margin-left:auto;margin-right:auto} .aihd-center :is(.aihd-chips,.aihd-actions){justify-content:center} .aihd-v--minimal .aihd-h1{font-size:clamp(2.6rem,7.5vw,5.6rem);max-width:14ch} .aihd-bgh-gradiente{background:linear-gradient(150deg,var(--aihd-p) 0%,var(--aihd-pd) 100%)} .aihd-bgh-gradiente .aihd-hero-bg span:first-child{width:540px;height:540px;right:-160px;top:-200px;background:var(--aihd-a);opacity:.35} .aihd-home-wrap .aihd-bgh-gradiente :is(.aihd-h1,.aihd-lead){color:var(--aihd-on-p)} .aihd-bgh-gradiente .aihd-lead{opacity:.88} .aihd-home-wrap .aihd-bgh-gradiente .aihd-btn{background:var(--aihd-on-p);color:var(--aihd-p)} .aihd-home-wrap .aihd-bgh-gradiente .aihd-chip{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.3);color:var(--aihd-on-p)} .aihd-bgh-gradiente .aihd-chip small{color:inherit;opacity:.75} .aihd-bgh-solido{background:var(--aihd-tx)} .aihd-home-wrap .aihd-bgh-solido :is(.aihd-h1,.aihd-lead){color:var(--aihd-bg)} .aihd-bgh-solido .aihd-lead{opacity:.78} .aihd-home-wrap .aihd-bgh-solido .aihd-btn{background:var(--aihd-a);color:var(--aihd-on-a)} .aihd-home-wrap .aihd-bgh-solido .aihd-chip{background:transparent;border-color:var(--aihd-mt);color:var(--aihd-bg)} .aihd-bgh-solido .aihd-chip small{color:inherit;opacity:.7} .aihd-bgh-solido .aihd-float{border-color:transparent} .aihd-bgh-malla .aihd-hero-bg span:first-child{width:600px;height:600px;left:-180px;top:-240px;background:var(--aihd-p);opacity:.26} .aihd-bgh-malla .aihd-hero-bg span:last-child{width:500px;height:500px;right:-140px;bottom:-240px;background:var(--aihd-a);opacity:.22} .aihd-bgh-patron .aihd-hero-bg{background:radial-gradient(var(--aihd-bd) 1.3px,transparent 1.5px) 0 0/22px 22px;-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 25%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 40%,#000 25%,transparent 72%)} /* Buscador */ .aihd-search{display:flex;gap:6px;max-width:620px;margin:0 0 1.4em;padding:6px;background:var(--aihd-bg);border:1px solid var(--aihd-bd);border-radius:calc(var(--aihd-r) + 8px);box-shadow:var(--aihd-sh);transition:border-color .2s,box-shadow .2s} .aihd-center .aihd-search{margin-left:auto;margin-right:auto} .aihd-search:focus-within{border-color:var(--aihd-p);box-shadow:0 0 0 4px var(--aihd-p2)} .aihd-search input{flex:1;min-width:0;border:0!important;background:transparent!important;padding:.85em 1em!important;font:inherit;font-size:1.05rem;color:var(--aihd-tx)!important;outline:none;box-shadow:none!important;border-radius:0!important} .aihd-search button{flex:none;border:0;border-radius:calc(var(--aihd-r) + 3px);background:var(--aihd-p);color:var(--aihd-on-p);font:700 1rem var(--aihd-fh);padding:0 1.5em;cursor:pointer;transition:filter .2s} .aihd-home-wrap .aihd-search button:hover{filter:brightness(1.08)} /* Hero dividido: pila de tarjetas reales */ .aihd-split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,72px);align-items:center} .aihd-stack{position:relative;min-height:430px} .aihd-home-wrap .aihd-float{position:absolute;width:74%;display:block;background:var(--aihd-bg);border:1px solid var(--aihd-bd);border-radius:var(--aihd-r);overflow:hidden;box-shadow:0 30px 60px -25px rgba(0,0,0,.5);color:var(--aihd-tx);transition:transform .45s cubic-bezier(.2,.7,.2,1)} .aihd-float:nth-child(1){top:0;right:0;transform:rotate(2.5deg);z-index:1} .aihd-float:nth-child(2){top:30%;left:0;transform:rotate(-3deg);z-index:2} .aihd-float:nth-child(3){bottom:0;right:5%;transform:rotate(1.5deg);z-index:3} .aihd-float:hover{transform:rotate(0) translateY(-6px);z-index:5} .aihd-float .aihd-media{aspect-ratio:16/8} .aihd-float strong{display:block;padding:.85em 1em;font:700 .98rem/1.3 var(--aihd-fh)} /* Entrada orquestada del hero (una sola vez) */ @keyframes aihd-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .aihd-fx .aihd-hero-c > *{animation:aihd-rise .8s cubic-bezier(.2,.7,.2,1) both} .aihd-fx .aihd-hero-c > :nth-child(2){animation-delay:.08s} .aihd-fx .aihd-hero-c > :nth-child(3){animation-delay:.16s} .aihd-fx .aihd-hero-c > :nth-child(4){animation-delay:.24s} .aihd-fx .aihd-stack{animation:aihd-rise 1s .25s cubic-bezier(.2,.7,.2,1) both} /* ============ 7. Tarjetas, rejillas y listas ============ */ .aihd-grid{display:grid;gap:calc(var(--aihd-k)*24px);grid-template-columns:repeat(auto-fill,minmax(270px,1fr))} .aihd-grid--sm{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:calc(var(--aihd-k)*16px)} .aihd-grid--3{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))} .aihd-card{position:relative;display:flex;flex-direction:column;background:var(--aihd-sf);border:1px solid var(--aihd-bd);border-radius:var(--aihd-r);overflow:hidden;box-shadow:var(--aihd-sh);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s} .aihd-alt .aihd-card{background:var(--aihd-bg)} .aihd-media{aspect-ratio:16/10;overflow:hidden;background:var(--aihd-p1)} .aihd-home-wrap .aihd-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease} .aihd-ph{display:grid;place-items:center;background:linear-gradient(135deg,var(--aihd-p),var(--aihd-pd));color:var(--aihd-on-p);font:800 2.6rem var(--aihd-fh);text-transform:uppercase} .aihd-card-b{padding:calc(var(--aihd-k)*20px);display:flex;flex-direction:column;gap:.45em;flex:1} .aihd-home-wrap .aihd-card h3{font:700 1.12rem/1.3 var(--aihd-fh);color:var(--aihd-tx)} .aihd-home-wrap .aihd-card p{color:var(--aihd-mt);font-size:.95rem} .aihd-home-wrap .aihd-meta{font-size:.82rem;font-weight:700;color:var(--aihd-lk)} .aihd-stretch::after{content:"";position:absolute;inset:0;z-index:1} .aihd-home-wrap .aihd-tcard{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:.35em;min-height:118px;padding:calc(var(--aihd-k)*22px);background:var(--aihd-sf);border:1px solid var(--aihd-bd);border-radius:var(--aihd-r);color:var(--aihd-tx);transition:transform .3s,border-color .3s,box-shadow .3s} .aihd-alt .aihd-tcard{background:var(--aihd-bg)} .aihd-tcard strong{font:700 1.08rem/1.25 var(--aihd-fh)} .aihd-tcard span{font-size:.9rem;color:var(--aihd-mt)} .aihd-tcard small{margin-top:auto;font-size:.82rem;font-weight:700;color:var(--aihd-lk)} .aihd-tcard::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--aihd-a);transform:scaleY(0);transform-origin:bottom;transition:transform .3s} .aihd-tcard:hover::after{transform:scaleY(1)} /* Hover según el diseño */ .aihd-hv-elevar :is(.aihd-card,.aihd-tcard):hover{transform:translateY(-6px);box-shadow:0 26px 50px -24px rgba(0,0,0,.45)} .aihd-hv-elevar .aihd-card:hover .aihd-media img{transform:scale(1.04)} .aihd-hv-borde :is(.aihd-card,.aihd-tcard):hover{border-color:var(--aihd-p);box-shadow:0 0 0 1px var(--aihd-p),var(--aihd-sh)} .aihd-hv-brillo :is(.aihd-card,.aihd-tcard)::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.2) 50%,transparent 65%);transform:translateX(-100%);transition:transform .8s ease} .aihd-hv-brillo :is(.aihd-card,.aihd-tcard):hover::before{transform:translateX(100%)} /* Mosaico */ .aihd-mosaic{display:grid;gap:calc(var(--aihd-k)*14px);grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(140px,auto)} .aihd-home-wrap .aihd-tile{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:.2em;padding:1.2em;border-radius:var(--aihd-r);background:var(--aihd-sf);border:1px solid var(--aihd-bd);color:var(--aihd-tx);transition:transform .35s cubic-bezier(.2,.7,.2,1)} .aihd-alt .aihd-tile{background:var(--aihd-bg)} .aihd-home-wrap .aihd-tile:nth-child(1){grid-column:span 2;grid-row:span 2;background:linear-gradient(150deg,var(--aihd-p),var(--aihd-pd));color:var(--aihd-on-p);border:0} .aihd-home-wrap .aihd-tile:nth-child(4){grid-column:span 2} .aihd-home-wrap .aihd-tile:nth-child(5){background:var(--aihd-a);color:var(--aihd-on-a);border:0} .aihd-home-wrap .aihd-tile[style*="--img"]{background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.08) 70%),var(--img) center/cover no-repeat;color:#fff;border:0} .aihd-tile strong{font:800 clamp(1.05rem,1.8vw,1.45rem)/1.15 var(--aihd-fh)} .aihd-tile:nth-child(1) strong{font-size:clamp(1.5rem,3vw,2.3rem)} .aihd-tile small{font-size:.85rem;opacity:.85;font-weight:600} .aihd-tile:hover{transform:scale(1.015)} /* Listas */ .aihd-home-wrap .aihd-list{display:grid;gap:2px} .aihd-home-wrap .aihd-list--2{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));column-gap:28px} .aihd-home-wrap .aihd-row{position:relative;display:flex;align-items:center;gap:14px;padding:12px 10px;border-bottom:1px solid var(--aihd-bd);border-radius:calc(var(--aihd-r)*.6);transition:background .2s} .aihd-row:hover{background:var(--aihd-p1)} .aihd-home-wrap .aihd-row img{width:64px;height:64px;object-fit:cover;flex:none;border-radius:calc(var(--aihd-r)*.7)} .aihd-row a{font:700 1rem/1.3 var(--aihd-fh);color:var(--aihd-tx)} .aihd-row .aihd-meta{display:block;margin-top:.2em} /* Revista */ .aihd-mag{display:grid;grid-template-columns:1.35fr 1fr;gap:calc(var(--aihd-k)*28px);align-items:start} .aihd-mag-main .aihd-media{aspect-ratio:16/9} .aihd-home-wrap .aihd-mag-main .aihd-card h3{font-size:1.5rem} /* Destacado */ .aihd-feature{position:relative;display:grid;grid-template-columns:1.2fr 1fr;background:var(--aihd-sf);border:1px solid var(--aihd-bd);border-radius:var(--aihd-r);overflow:hidden;box-shadow:var(--aihd-sh)} .aihd-alt .aihd-feature{background:var(--aihd-bg)} .aihd-feature .aihd-media{aspect-ratio:auto;min-height:340px;height:100%} .aihd-feature-b{padding:clamp(24px,4vw,48px);display:flex;flex-direction:column;justify-content:center;gap:.7em} .aihd-home-wrap .aihd-feature h3{font:800 clamp(1.5rem,2.8vw,2.2rem)/1.15 var(--aihd-fh);color:var(--aihd-tx)} .aihd-home-wrap .aihd-feature p{color:var(--aihd-mt)} .aihd-more{font-weight:700;color:var(--aihd-lk)} .aihd-v--grande .aihd-feature{grid-template-columns:1fr;min-height:460px} .aihd-v--grande .aihd-feature .aihd-media{position:absolute;inset:0;min-height:0} .aihd-v--grande .aihd-feature::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,.08) 65%)} .aihd-v--grande .aihd-feature-b{position:relative;z-index:2;justify-content:flex-end;max-width:760px} .aihd-home-wrap .aihd-v--grande .aihd-feature :is(h3,p,.aihd-meta,.aihd-more){color:#fff} /* Por categoría */ .aihd-bycats{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:calc(var(--aihd-k)*32px)} .aihd-v--filas .aihd-bycats{grid-template-columns:1fr;gap:calc(var(--aihd-k)*44px)} .aihd-bycat-h{display:flex;align-items:baseline;justify-content:space-between;gap:1em;padding-bottom:.7em;margin-bottom:.8em;border-bottom:2px solid var(--aihd-p)} .aihd-home-wrap .aihd-bycat-h h3{font:800 1.25rem/1.2 var(--aihd-fh)} .aihd-home-wrap .aihd-bycat-h a{font-size:.88rem;font-weight:700;color:var(--aihd-lk);white-space:nowrap} /* Cifras */ .aihd-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:calc(var(--aihd-k)*18px)} .aihd-stat{padding:calc(var(--aihd-k)*28px) 24px;background:var(--aihd-sf);border:1px solid var(--aihd-bd);border-radius:var(--aihd-r)} .aihd-alt .aihd-stat{background:var(--aihd-bg)} .aihd-num{display:block;font:800 clamp(2.2rem,4.5vw,3.3rem)/1 var(--aihd-fh);letter-spacing:-.03em;color:var(--aihd-lk);font-variant-numeric:tabular-nums} .aihd-stat-l{display:block;margin-top:.5em;color:var(--aihd-mt);font-weight:600} .aihd-v--linea .aihd-stat{background:none;border:0;border-left:2px solid var(--aihd-a);border-radius:0;padding:6px 0 6px 22px} /* Texto SEO */ .aihd-seo{display:grid;gap:8px} .aihd-home-wrap .aihd-prose{max-width:44rem;font-size:1.07rem;line-height:1.8;color:var(--aihd-tx)} .aihd-home-wrap .aihd-prose p{margin:0 0 1.1em} .aihd-v--dos_columnas .aihd-seo{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,64px);align-items:start} .aihd-v--dos_columnas .aihd-seo .aihd-head{position:sticky;top:100px} /* FAQ */ .aihd-faq{display:grid;gap:10px;max-width:52rem} .aihd-v--dos_columnas .aihd-faq{max-width:none;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:start} .aihd-faq details{background:var(--aihd-sf);border:1px solid var(--aihd-bd);border-radius:var(--aihd-r);transition:border-color .2s} .aihd-alt .aihd-faq details{background:var(--aihd-bg)} .aihd-faq details[open]{border-color:var(--aihd-p)} .aihd-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1em;padding:1.05em 1.25em;font:700 1.03rem/1.4 var(--aihd-fh);color:var(--aihd-tx)} .aihd-faq summary::-webkit-details-marker{display:none} .aihd-faq summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--aihd-lk);border-bottom:2px solid var(--aihd-lk);transform:rotate(45deg) translateY(-3px);transition:transform .25s} .aihd-faq details[open] summary::after{transform:rotate(-135deg)} .aihd-faq details > div{padding:0 1.25em 1.1em;color:var(--aihd-mt)} /* CTA */ .aihd-home-wrap .aihd-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap} .aihd-home-wrap .aihd-cta p{color:var(--aihd-mt);margin-top:.3em;max-width:38rem} .aihd-sec--cta.aihd-v--banda{background:linear-gradient(150deg,var(--aihd-p),var(--aihd-pd))} .aihd-home-wrap .aihd-v--banda .aihd-cta :is(.aihd-title,p){color:var(--aihd-on-p)} .aihd-v--banda .aihd-cta p{opacity:.85} .aihd-home-wrap .aihd-v--banda .aihd-btn{background:var(--aihd-on-p);color:var(--aihd-p)} .aihd-home-wrap .aihd-v--tarjeta .aihd-cta{position:relative;overflow:hidden;padding:clamp(28px,5vw,56px);border-radius:calc(var(--aihd-r)*1.5);background:var(--aihd-bg);border:1px solid var(--aihd-bd);box-shadow:var(--aihd-sh)} .aihd-v--tarjeta .aihd-cta::before{content:"";position:absolute;top:0;bottom:0;left:0;width:6px;background:var(--aihd-a)} /* Cómo funciona (secuencia real: aquí sí van números) */ .aihd-home-wrap .aihd-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:calc(var(--aihd-k)*22px)} .aihd-home-wrap .aihd-step{position:relative;padding:calc(var(--aihd-k)*26px);background:var(--aihd-sf);border:1px solid var(--aihd-bd);border-radius:var(--aihd-r)} .aihd-alt .aihd-step{background:var(--aihd-bg)} /* El número lo imprime PHP en un .aihd-step-n. Iba en un ::before con counter-increment hasta la 2.7, y salían todos como «1»: las secciones alejadas llevan content-visibility, que implica contención de estilo, y la contención reinicia los contadores. */ .aihd-home-wrap .aihd-step-n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--aihd-p);color:var(--aihd-on-p);font:800 1.1rem/1 var(--aihd-fh);margin-bottom:1em} .aihd-home-wrap .aihd-step h3{font:700 1.1rem/1.3 var(--aihd-fh);margin-bottom:.35em} .aihd-home-wrap .aihd-step p{color:var(--aihd-mt)} /* El numero redondo lo pone el plugin (.aihd-step-n). Si el tema numera las listas con ::before o ::marker, salia un segundo numero cuadrado a su izquierda: se neutraliza en los pasos, sin tocar el variante linea. */ .aihd-home-wrap .aihd-steps{list-style:none!important} .aihd-home-wrap .aihd-v--pasos .aihd-step{list-style:none!important} .aihd-home-wrap .aihd-v--pasos .aihd-step::marker{content:""!important} .aihd-home-wrap .aihd-v--pasos .aihd-step::before{content:none!important} /* Texto de las tarjetas de paso: alineado a la izquierda y con aire, para que en columnas estrechas no se justifique con huecos ni se parta con guion. */ .aihd-home-wrap .aihd-step :is(p,li){text-align:left;-webkit-hyphens:manual;hyphens:manual;line-height:1.6} .aihd-home-wrap .aihd-v--linea .aihd-steps{grid-template-columns:1fr;max-width:46rem;gap:0} .aihd-home-wrap .aihd-v--linea .aihd-step{background:none;border:0;border-left:2px solid var(--aihd-bd);border-radius:0;padding:0 0 2em 2.2em;margin-left:22px} .aihd-home-wrap .aihd-v--linea .aihd-step-n{position:absolute;left:-23px;top:0;margin-bottom:0} body.aihd-rtl .aihd-home-wrap .aihd-v--linea .aihd-step-n{left:auto;right:-23px} /* Aparición al hacer scroll (solo con JS y animaciones activas) */ .aihd-js .aihd-reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)} .aihd-js .aihd-reveal.is-in{opacity:1;transform:none} /* ============ 8. Responsive y accesibilidad ============ */ @media (max-width:900px){ .aihd-split{grid-template-columns:1fr} .aihd-stack{min-height:0;display:grid;gap:12px} .aihd-home-wrap .aihd-float{position:relative;width:100%;transform:none!important;inset:auto} .aihd-float:nth-child(3){display:none} .aihd-mag,.aihd-feature,.aihd-v--dos_columnas .aihd-seo{grid-template-columns:1fr} .aihd-v--dos_columnas .aihd-seo .aihd-head{position:static} .aihd-feature .aihd-media{min-height:220px} } @media (max-width:780px){ .aihd-mosaic{grid-template-columns:1fr 1fr} .aihd-home-wrap .aihd-tile:nth-child(1){grid-column:span 2;grid-row:span 1;min-height:180px} .aihd-home-wrap .aihd-tile:nth-child(4){grid-column:auto} .aihd-home-wrap .aihd-search button{padding:0 1em} .aihd-home-wrap .aihd-cta{flex-direction:column;align-items:flex-start} } @media (prefers-reduced-motion:reduce){ .aihd-home-wrap *,.aihd-home-wrap *::before,.aihd-home-wrap *::after,.aihd-open::before,.aihd-top{animation:none!important;transition:none!important} .aihd-js .aihd-reveal{opacity:1;transform:none} } /* ============ 9. Temas de bloques (FSE) ============ */ /* Los temas de bloques no usan #primary ni .site-main: sin estas reglas la portada quedaba encajonada en el ancho de contenido del theme.json. */ body.aihd-fse :is(.wp-site-blocks,.wp-block-group,.wp-block-post-content){background-color:transparent} body.aihd-fse.aihd-home :is(.wp-block-post-title,.wp-block-post-date,.wp-block-post-author,.wp-block-comments,.wp-block-post-navigation-link){display:none!important} body.aihd-fse.aihd-home .wp-block-post-content{max-width:none!important;padding:0!important;margin:0!important} body.aihd-fse.aihd-home .wp-block-post-content > .aihd-home-wrap{max-width:none!important} body.aihd-fse.aihd-home :is(.wp-block-post-content,.entry-content) > *{max-width:none} body.aihd-fse .aihd-home-wrap :is(.wp-block-group,.entry-content){padding:0} .aihd-fse .aihd-home-wrap{--wp--style--global--content-size:none;--wp--style--global--wide-size:none} /* El reset del contenido del tema aplicado a los bloques del núcleo */ body.aihd-on.aihd-fse :is(.wp-block-post-content,.entry-content) a:not(.aihd-home-wrap a):not(.wp-block-button__link){color:var(--aihd-lk)} /* ============ 10. Enlace de salto y foco ============ */ .aihd-skip{position:absolute;left:-9999px;top:0;z-index:100000;padding:.8em 1.3em;background:var(--aihd-p);color:var(--aihd-on-p);font:700 1rem var(--aihd-fh);border-radius:0 0 var(--aihd-r) 0} .aihd-skip:focus{left:0} /* ============ 11. Impresión ============ */ @media print{ .aihd-sec{padding:14px 0;background:#fff!important;break-inside:avoid} .aihd-hero-bg,.aihd-top,.aihd-progress,.aihd-filter-w,.aihd-search{display:none!important} .aihd-home-wrap :is(.aihd-h1,.aihd-title,.aihd-card h3){color:#000!important} .aihd-home-wrap .aihd-card{box-shadow:none;border:1px solid #ccc;break-inside:avoid} .aihd-faq details{break-inside:avoid} .aihd-faq details > div{display:block!important} .aihd-home-wrap a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;color:#555} } /* ============ 12. Contenedor: tarjetas que se adaptan a su hueco ============ */ @supports (container-type:inline-size){ .aihd-grid,.aihd-bycats,.aihd-mag{container-type:inline-size} @container (max-width:420px){ .aihd-feature{grid-template-columns:1fr} } } /* ============ 13. Clusters de blog de nicho ============ */ .aihd-clusters{display:grid;gap:calc(var(--aihd-k)*56px)} .aihd-cluster-h{display:grid;gap:.35em;margin:0 0 calc(var(--aihd-k)*1.5rem);padding-bottom:.8em;border-bottom:2px solid var(--aihd-p)} .aihd-home-wrap .aihd-cluster-h h2{font:800 clamp(1.35rem,2.6vw,1.95rem)/1.15 var(--aihd-fh);letter-spacing:-.02em} .aihd-home-wrap .aihd-cluster-h h2 a{color:var(--aihd-tx)} .aihd-home-wrap .aihd-cluster-h h2 a:hover{color:var(--aihd-lk)} .aihd-home-wrap .aihd-cluster-d{color:var(--aihd-mt);max-width:48rem;font-size:.98rem} .aihd-home-wrap .aihd-cluster-all{justify-self:start;font:700 .88rem var(--aihd-fh);color:var(--aihd-lk)} .aihd-cluster--inv .aihd-cluster-h{border-bottom-color:var(--aihd-a)} .aihd-cluster--inv .aihd-cluster-h h2::before{content:"";display:block;width:2.2em;height:.2em;border-radius:3px;background:var(--aihd-a);margin-bottom:.4em} /* Rejillas de columnas fijas (clusters y shortcodes) */ .aihd-cols-1{grid-template-columns:1fr} .aihd-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .aihd-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .aihd-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))} .aihd-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))} .aihd-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))} @media (max-width:1000px){.aihd-cols-4,.aihd-cols-5,.aihd-cols-6{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:760px){.aihd-cols-3,.aihd-cols-4,.aihd-cols-5,.aihd-cols-6{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:480px){.aihd-cols-2,.aihd-cols-3,.aihd-cols-4,.aihd-cols-5,.aihd-cols-6{grid-template-columns:1fr}} /* ============ 14. Jerarquía del directorio ============ */ .aihd-jer{display:grid;gap:calc(var(--aihd-k)*26px)} .aihd-jer--cols{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .aihd-jer-b{padding:calc(var(--aihd-k)*20px) calc(var(--aihd-k)*22px);background:var(--aihd-sf);border:1px solid var(--aihd-bd);border-radius:var(--aihd-r)} .aihd-alt .aihd-jer-b{background:var(--aihd-bg)} .aihd-home-wrap .aihd-jer-b h3{font:800 1.18rem/1.2 var(--aihd-fh);margin-bottom:.7em} .aihd-home-wrap .aihd-jer-b h3 a{color:var(--aihd-tx)} .aihd-home-wrap .aihd-jer-b h3 a:hover{color:var(--aihd-lk)} .aihd-home-wrap .aihd-jer-b h3 small{font-size:.72em;font-weight:600;color:var(--aihd-mt)} /* ============ 15. Cercanía ============ */ .aihd-geo-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 calc(var(--aihd-k)*1.6rem)} .aihd-home-wrap .aihd-geo-ask{background:var(--aihd-sf);color:var(--aihd-tx);border:1.5px solid var(--aihd-bd);padding:.7em 1.25em;font-size:.95rem;cursor:pointer} .aihd-home-wrap .aihd-geo-ask:hover{border-color:var(--aihd-p);color:var(--aihd-lk);transform:none;filter:none} .aihd-home-wrap .aihd-geo-ask[disabled]{opacity:.6;cursor:progress} .aihd-geo-msg{font-size:.9rem;color:var(--aihd-mt)} .aihd-dist{display:inline-block;margin-top:.4em;padding:.15em .6em;border-radius:999px;background:var(--aihd-p1);color:var(--aihd-lk);font:700 .78rem/1.5 var(--aihd-fh);font-variant-numeric:tabular-nums} .aihd-row .aihd-dist{margin-top:.15em} .aihd-geo-ok > :first-child{outline:2px solid var(--aihd-a);outline-offset:3px;border-radius:var(--aihd-r)} /* ============ 16. Shortcodes fuera de la portada ============ */ .aihd-sc{margin:2em 0} .aihd-sc .aihd-sc-title{font-family:var(--aihd-fh);margin:0 0 .8em} .aihd-sc :is(.aihd-grid,.aihd-chips,.aihd-mosaic,.aihd-list){margin:0} .aihd-sc-empty{color:var(--aihd-mt);font-style:italic} .aihd-sc-buscar{margin:0 0 1em} .aihd-sc-input{width:100%;max-width:420px;padding:.7em 1em;font:inherit;background:var(--aihd-bg);color:var(--aihd-tx);border:1px solid var(--aihd-bd);border-radius:calc(var(--aihd-r) + 4px)} .aihd-sc-input:focus{border-color:var(--aihd-p);outline:0;box-shadow:0 0 0 3px var(--aihd-p2)} /* Fuera de .aihd-home-wrap los enlaces del tema heredan subrayado: lo quitamos */ .aihd-sc :is(a.aihd-chip,a.aihd-tcard,a.aihd-tile,.aihd-card a,.aihd-row a){text-decoration:none;box-shadow:none;border-bottom:0;color:inherit} .aihd-sc :is(ul,ol){list-style:none;margin:0;padding:0} .aihd-sc li::before{content:none} .aihd-sc img{max-width:100%;height:auto} /* ============ 17. Idiomas de derecha a izquierda ============ */ body.aihd-rtl .aihd-home-wrap{direction:rtl;text-align:right} body.aihd-rtl .aihd-left{text-align:right} body.aihd-rtl :is(.aihd-tcard::after,.aihd-v--tarjeta .aihd-cta::before){left:auto;right:0} body.aihd-rtl .aihd-h2-caja :is(.the-content,.entry-content) h2{border-left:0;border-right:4px solid var(--aihd-p);border-radius:var(--aihd-r) 0 0 var(--aihd-r)} body.aihd-rtl .aihd-v--linea .aihd-step{border-left:0;border-right:2px solid var(--aihd-bd);padding:0 2.2em 2em 0;margin:0 22px 0 0} body.aihd-rtl .aihd-v--linea .aihd-step::before{left:auto;right:-23px} body.aihd-rtl .aihd-top{right:auto;left:18px} /* Tipografías CJK: interletrado y altura de línea distintos */ body:is(.aihd-lang-ja,.aihd-lang-zh,.aihd-lang-ko) .aihd-home-wrap{line-height:1.85} body:is(.aihd-lang-ja,.aihd-lang-zh,.aihd-lang-ko) .aihd-home-wrap :is(.aihd-h1,.aihd-title){letter-spacing:0;line-height:1.35} body:is(.aihd-lang-ja,.aihd-lang-zh,.aihd-lang-ko) .aihd-home-wrap .aihd-h1{max-width:22ch} /* ============================================================ 18. Escala tipográfica modular (sustituye a los clamp() sueltos) Los tamaños vienen de --aihd-t-2 … --aihd-t7, calculados en PHP a partir de la razón elegida por el diseño. ============================================================ */ .aihd-home-wrap{font-size:var(--aihd-t0,1rem);line-height:var(--aihd-lh-texto,1.68)} .aihd-home-wrap .aihd-h1{font-size:var(--aihd-t6);line-height:var(--aihd-lh-titular);letter-spacing:var(--aihd-ls-titular);max-width:16ch} .aihd-v--minimal .aihd-h1{font-size:var(--aihd-t7);max-width:13ch} .aihd-home-wrap .aihd-lead{font-size:var(--aihd-t1);line-height:var(--aihd-lh-medio);max-width:var(--aihd-medida)} .aihd-home-wrap .aihd-title{font-size:var(--aihd-t3);line-height:var(--aihd-lh-medio);letter-spacing:var(--aihd-ls-medio)} .aihd-home-wrap .aihd-sub{font-size:var(--aihd-t0);max-width:var(--aihd-medida)} .aihd-home-wrap .aihd-card h3{font-size:var(--aihd-t1);line-height:var(--aihd-lh-medio);letter-spacing:var(--aihd-ls-medio)} .aihd-home-wrap .aihd-mag-main .aihd-card h3{font-size:var(--aihd-t2)} .aihd-home-wrap .aihd-feature h3{font-size:var(--aihd-t4);letter-spacing:var(--aihd-ls-medio)} .aihd-home-wrap .aihd-cluster-h h2{font-size:var(--aihd-t3);letter-spacing:var(--aihd-ls-medio)} .aihd-home-wrap .aihd-meta{font-size:var(--aihd-tm1);letter-spacing:var(--aihd-ls-micro);text-transform:uppercase} .aihd-home-wrap .aihd-prose{font-size:var(--aihd-t0);line-height:var(--aihd-lh-texto);max-width:var(--aihd-medida-ancha)} .aihd-num{font-size:var(--aihd-t5);line-height:1;letter-spacing:var(--aihd-ls-titular)} .aihd-home-wrap .aihd-chip{font-size:var(--aihd-tm1)} .aihd-home-wrap .aihd-chip--lg{font-size:var(--aihd-t0)} .aihd-home-wrap .aihd-tcard strong{font-size:var(--aihd-t1)} .aihd-tile strong{font-size:var(--aihd-t1)} .aihd-home-wrap .aihd-tile:nth-child(1) strong{font-size:var(--aihd-t3)} .aihd-home-wrap .aihd-btn{font-size:var(--aihd-t0)} .aihd-faq summary{font-size:var(--aihd-t0)} .aihd-home-wrap .aihd-step h3{font-size:var(--aihd-t1)} /* Ritmo vertical: las secciones y los encabezados usan la misma unidad */ .aihd-sec{padding-block:calc(var(--aihd-ritmo-3) * var(--aihd-k,1))} .aihd-sec--hero{padding-block:calc(var(--aihd-ritmo-4) * var(--aihd-k,1))} .aihd-head{margin-bottom:calc(var(--aihd-ritmo) * var(--aihd-k,1))} /* Equilibrado de líneas: evita la palabra huérfana en titulares y la línea corta final en párrafos. Es gratis y se nota en todas las pantallas. */ .aihd-home-wrap :is(.aihd-h1,.aihd-title,.aihd-card h3,.aihd-feature h3,.aihd-cluster-h h2,.aihd-tcard strong){text-wrap:balance} .aihd-home-wrap :is(.aihd-lead,.aihd-sub,.aihd-prose p,.aihd-card p){text-wrap:pretty} .aihd-home-wrap{font-optical-sizing:auto;font-synthesis-weight:none} .aihd-num,.aihd-chip small,.aihd-dist{font-variant-numeric:tabular-nums} /* ============================================================ 19. Imágenes: color dominante y duotono ============================================================ */ .aihd-media{background:var(--aihd-img,var(--aihd-p1))} .aihd-home-wrap .aihd-media img{transition:transform .6s ease,filter .5s ease} /* Respaldo primero: si el navegador no entiende el color relativo, la regla siguiente se descarta entera y queda el degradado de marca de siempre. */ .aihd-ph{position:relative;background:linear-gradient(140deg, var(--aihd-p), var(--aihd-pd))} @supports (background:linear-gradient(hsl(from red h s l), #000)){ .aihd-ph{background:linear-gradient(140deg, hsl(from var(--aihd-p) calc(h + var(--aihd-giro,0deg)) s l) 0%, hsl(from var(--aihd-pd) calc(h + var(--aihd-giro,0deg)) s l) 100%)} } .aihd-ph span{font:800 clamp(2rem,4vw,3.2rem)/1 var(--aihd-fh);color:var(--aihd-on-p);text-transform:uppercase;opacity:.85} .aihd-duo-def{width:0;height:0;overflow:hidden} /* ============================================================ 20. Inclinación y foco de luz en tarjetas ============================================================ */ .aihd-fx-tilt .aihd-home-wrap :is(.aihd-card,.aihd-tcard,.aihd-tile){transform-style:preserve-3d;will-change:transform} .aihd-fx-tilt .aihd-home-wrap :is(.aihd-card,.aihd-tcard,.aihd-tile).aihd-tilt-on{ transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateZ(0); transition:transform .12s linear} /* El foco de luz va solo en .aihd-card y .aihd-tile: .aihd-tcard ya usa su ::after para la barra de acento lateral y se la comeríamos. */ .aihd-fx-tilt .aihd-home-wrap :is(.aihd-card,.aihd-tile)::after{ content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0; transition:opacity .3s ease;border-radius:inherit; background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgb(255 255 255 / .16), transparent 62%)} .aihd-fx-tilt .aihd-home-wrap :is(.aihd-card,.aihd-tile).aihd-tilt-on::after{opacity:1} /* En las tarjetas de categoría el foco se pinta como fondo, no como capa. */ .aihd-fx-tilt .aihd-home-wrap .aihd-tcard.aihd-tilt-on{ background-image:radial-gradient(200px circle at var(--mx,50%) var(--my,50%), rgb(255 255 255 / .12), transparent 60%)} /* La tarjeta ya usaba ::after para el enlace extendido en algunos casos: ese va en .aihd-stretch, que conserva su propio z-index por encima. */ .aihd-stretch::after{z-index:4} /* Variante de hover «foco»: halo del color de acento */ .aihd-hv-foco :is(.aihd-card,.aihd-tcard,.aihd-tile):hover{ box-shadow:0 0 0 2px var(--aihd-a), 0 18px 40px -22px rgb(0 0 0 / .5); border-color:transparent} /* ============================================================ 21. Revelado por palabras ============================================================ */ .aihd-w{display:inline-block;will-change:transform,opacity} .aihd-fx-reveal .aihd-w{opacity:0;transform:translateY(.5em) rotate(1.5deg)} .aihd-fx-reveal .aihd-w-in .aihd-w{ opacity:1;transform:none; transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i,0) * 55ms)} .aihd-mov-expresivo .aihd-fx-reveal .aihd-w{transform:translateY(.75em) rotate(3deg) scale(.97)} /* ============================================================ 22. Parallax del hero ============================================================ */ .aihd-fx-parallax .aihd-sec--hero .aihd-hero-c{transform:translateY(var(--py,0));opacity:var(--pf,1)} @supports (animation-timeline: view()){ .aihd-fx-parallax .aihd-sec--hero .aihd-hero-c{ transform:none;opacity:1; animation:aihd-par linear both; animation-timeline:view(); animation-range:exit -20% exit 90%} .aihd-fx-parallax .aihd-sec--hero .aihd-stack{ animation:aihd-par-lento linear both; animation-timeline:view(); animation-range:exit -20% exit 100%} /* Aparición de secciones ligada al scroll: sin JS y sin saltos */ .aihd-fx .aihd-reveal{ animation:aihd-entrar linear both; animation-timeline:view(); animation-range:entry 8% entry 46%} .aihd-js .aihd-reveal{opacity:1;transform:none;transition:none} } @keyframes aihd-par{to{transform:translateY(-14%);opacity:.25}} @keyframes aihd-par-lento{to{transform:translateY(-6%)}} @keyframes aihd-entrar{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} /* Transiciones de vista entre páginas */ ::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal} /* El contenido no debe parpadear al cambiar de variable */ .aihd-home-wrap,.aihd-home-wrap :is(.aihd-card,.aihd-tcard,.aihd-tile,.aihd-stat,.aihd-jer-b,.aihd-step,.aihd-faq details){ transition:background-color .3s ease,border-color .3s ease,color .3s ease} /* ============================================================ 24. Reducir movimiento: todo lo anterior se apaga ============================================================ */ @media (prefers-reduced-motion:reduce){ .aihd-fx-reveal .aihd-w{opacity:1;transform:none;transition:none} .aihd-fx-tilt .aihd-home-wrap :is(.aihd-card,.aihd-tcard,.aihd-tile).aihd-tilt-on{transform:none} .aihd-fx-parallax .aihd-sec--hero .aihd-hero-c{transform:none;opacity:1;animation:none} } /* ============================================================ 25. MÓVIL 1 — Barra de acciones en la zona del pulgar En un teléfono de 6", el tercio superior es inalcanzable con una mano. Las acciones que importan van abajo. ============================================================ */ .aihd-barra{display:none} @media (max-width:760px){ .aihd-barra{ position:fixed;left:0;right:0;bottom:0;z-index:9998; display:grid;grid-auto-flow:column;grid-auto-columns:1fr; background:color-mix(in srgb, var(--aihd-bg) 88%, transparent); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border-top:1px solid var(--aihd-bd); padding-bottom:env(safe-area-inset-bottom,0); transition:transform .28s cubic-bezier(.2,.7,.2,1)} @supports not (backdrop-filter:blur(1px)){.aihd-barra{background:var(--aihd-bg)}} .aihd-barra.es-oculta{transform:translateY(110%)} .aihd-barra-i{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; /* 56px de alto: por encima del mínimo de 44px de las pautas táctiles */ min-height:56px;padding:8px 4px;border:0;background:none;cursor:pointer; color:var(--aihd-mt);font:600 .69rem/1.1 var(--aihd-fh);text-decoration:none; -webkit-tap-highlight-color:transparent} .aihd-barra-i svg{width:22px;height:22px;flex:none} .aihd-barra-i:active{background:var(--aihd-p1)} .aihd-barra-i.es-principal{color:var(--aihd-lk)} .aihd-barra-i.es-principal svg{stroke-width:2.2} .aihd-barra-i span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} /* Sitio para la barra al final de la página y encima de los flotantes */ body.aihd-con-barra{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))} body.aihd-con-barra .aihd-top{bottom:calc(74px + env(safe-area-inset-bottom,0px))} .aihd-barra-buscar{ position:fixed;left:0;right:0;bottom:calc(60px + env(safe-area-inset-bottom,0px));z-index:9997; padding:12px;background:var(--aihd-sf);border-top:1px solid var(--aihd-bd); transform:translateY(120%);transition:transform .28s cubic-bezier(.2,.7,.2,1)} .aihd-barra-buscar.es-abierto{transform:none} .aihd-barra-buscar .aihd-search{margin:0;max-width:none} } @media (prefers-reduced-motion:reduce){ .aihd-barra,.aihd-barra-buscar{transition:none} } /* ============================================================ 26. MÓVIL 2 — Rejillas que se convierten en carrusel Seis tarjetas apiladas son seis pantallas de alto que nadie recorre. Con scroll-snap se deslizan con el pulgar. ============================================================ */ .aihd-car-nav{display:none} @media (max-width:760px){ .aihd-home-wrap .aihd-desliza, .aihd-sc .aihd-desliza{ display:grid; grid-auto-flow:column; grid-auto-columns:78%; grid-template-columns:none; gap:14px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:clamp(18px,4vw,36px); /* El carrusel sangra hasta el borde: se ve que hay más a la derecha */ margin-inline:calc(clamp(18px,4vw,36px) * -1); padding-inline:clamp(18px,4vw,36px); padding-bottom:6px; scrollbar-width:none} .aihd-desliza::-webkit-scrollbar{display:none} .aihd-desliza > *{scroll-snap-align:start;min-width:0} .aihd-desliza.aihd-cols-2{grid-auto-columns:86%} .aihd-desliza.aihd-mosaic > *{grid-column:auto!important;grid-row:auto!important;min-height:150px} /* La inclinación estorba en un carrusel táctil */ .aihd-desliza > *{transform:none!important} .aihd-car-nav{ display:flex;justify-content:center;gap:7px;margin-top:14px; padding:0} .aihd-car-p{ width:7px;height:7px;padding:0;border:0;border-radius:99px;cursor:pointer; background:var(--aihd-bd);transition:width .25s ease,background .25s ease; /* El punto es pequeño, pero su área táctil no */ position:relative} .aihd-car-p::after{content:"";position:absolute;inset:-14px -5px} .aihd-car-p.es-activo{width:20px;background:var(--aihd-p)} } @media (prefers-reduced-motion:reduce){ .aihd-desliza{scroll-behavior:auto} .aihd-car-p{transition:none} } /* ============================================================ 27. MÓVIL 3 — Ergonomía y rendimiento ============================================================ */ @media (max-width:760px){ /* Altura de ventana estable: con 100vh el hero salta cuando la barra del navegador se recoge. svh es la altura pequeña, que no cambia. */ .aihd-sec--hero{min-height:auto;padding-block:clamp(56px,14svh,110px)} .aihd-v--minimal.aihd-sec--hero{min-height:78svh;display:grid;align-content:center} /* Áreas táctiles: nada por debajo de 44px, que es el mínimo de las pautas de accesibilidad de Apple y del WCAG 2.2 (criterio 2.5.8). */ .aihd-home-wrap :is(.aihd-btn,.aihd-chip,.aihd-search button,.aihd-faq summary){min-height:44px} .aihd-home-wrap .aihd-chip{padding-block:.7em} .aihd-home-wrap .aihd-row{padding-block:14px} .aihd-faq summary{padding-block:1.1em} .aihd-top{width:48px;height:48px} /* iOS amplía automáticamente cualquier campo con menos de 16px al enfocarlo, y luego no vuelve. Se evita fijando 16px exactos. */ .aihd-home-wrap :is(input,select,textarea), body.aihd-on :is(input[type=text],input[type=search],input[type=email],input[type=tel],textarea,select){font-size:16px} /* El texto no se reescala solo al girar el teléfono */ body.aihd-on{-webkit-text-size-adjust:100%;text-size-adjust:100%} /* El navegador se salta el pintado de las secciones fuera de pantalla. La altura estimada evita que la barra de desplazamiento pegue saltos. */ .aihd-home-wrap .aihd-sec:nth-child(n+4){ content-visibility:auto; contain-intrinsic-size:auto 600px} /* En móvil no hay puntero: la inclinación y el foco de luz sobran, y el parallax con la barra del navegador recogiéndose se ve mal. */ .aihd-fx-tilt .aihd-home-wrap :is(.aihd-card,.aihd-tcard,.aihd-tile)::after{display:none} .aihd-fx-parallax .aihd-sec--hero .aihd-hero-c{transform:none;opacity:1;animation:none} /* Las tablas largas se desplazan con indicación de que hay más */ .aihd-on :is(.the-content,.entry-content) table:not(.aihd-home-wrap *){ -webkit-overflow-scrolling:touch; background-image:linear-gradient(to right, var(--aihd-bg) 30%, transparent), linear-gradient(to left, var(--aihd-bg) 30%, transparent); background-position:left center, right center; background-repeat:no-repeat; background-size:28px 100%, 28px 100%; background-attachment:local, local} /* El titular no debe partirse en cinco líneas de dos palabras */ .aihd-home-wrap .aihd-h1{max-width:none;hyphens:auto} .aihd-home-wrap .aihd-lead{max-width:none} /* Separación entre acciones para no pulsar la equivocada */ .aihd-actions{gap:10px} .aihd-home-wrap .aihd-btn{flex:1 1 auto;justify-content:center} } /* Pantallas muy estrechas: una columna limpia */ @media (max-width:380px){ .aihd-home-wrap .aihd-desliza{grid-auto-columns:86%} .aihd-barra-i span{font-size:.64rem} } /* ============================================================ 28. EL CONTENIDO, CON EL MISMO SISTEMA QUE LA PORTADA El contenido va envuelto por el plugin en .aihd-doc, así que hay un único selector fiable en todos los temas. Todo lo de aquí usa los mismos tokens que la portada: la escala tipográfica, el ritmo vertical y las rampas de color. ============================================================ */ body.aihd-on.aihd-doc-on .aihd-doc{ --aihd-doc-w:var(--aihd-medida-ancha,46em); font-family:var(--aihd-fb); font-size:var(--aihd-t0); line-height:var(--aihd-lh-texto); color:var(--aihd-tx); max-width:var(--aihd-doc-w); margin-inline:auto; padding-inline:clamp(18px,4vw,28px); text-wrap:pretty} body.aihd-on.aihd-doc-on .aihd-doc--ancho{--aihd-doc-w:60em} body.aihd-on.aihd-doc-on .aihd-doc--estrecho{--aihd-doc-w:38em} /* --- Ritmo vertical: el espacio es lo que hacía que se viera «todo junto». Los encabezados llevan mucho aire arriba y poco abajo, para que se lean pegados a lo que titulan y separados de lo anterior. --- */ /* --- La escala de espaciado (--aihd-sp-*) manda también aquí. Convivían dos sistemas en el mismo contenedor: los hijos directos se separaban con --aihd-ritmo, un valor plano que ni se comprime en móvil ni responde al eje de ritmo del diseño, mientras que todo lo anidado usaba --aihd-sp-2. Resultado: en un teléfono, dos párrafos sueltos quedaban a 20,7 px y un bloque del editor a 24 px. Mismo contenedor, dos medidas. --- */ body.aihd-on.aihd-doc-on .aihd-doc > * + *{margin-top:var(--aihd-sp-2,1.5rem)} body.aihd-on.aihd-doc-on .aihd-doc :is(h2,h3,h4,h5,h6){ font-family:var(--aihd-fh); color:var(--aihd-tx); line-height:var(--aihd-lh-medio); letter-spacing:var(--aihd-ls-medio); text-wrap:balance; scroll-margin-top:calc(var(--aihd-cab-h,0px) + 20px)} body.aihd-on.aihd-doc-on .aihd-doc > h2{font-size:var(--aihd-t3);font-weight:800;margin-top:var(--aihd-ritmo-3,2.6em);margin-bottom:calc(var(--aihd-ritmo,1.1em) * .45)} body.aihd-on.aihd-doc-on .aihd-doc > h3{font-size:var(--aihd-t2);font-weight:700;margin-top:var(--aihd-ritmo-2,1.9em);margin-bottom:calc(var(--aihd-ritmo,1.1em) * .35)} body.aihd-on.aihd-doc-on .aihd-doc > h4{font-size:var(--aihd-t1);font-weight:700;margin-top:calc(var(--aihd-ritmo) * 1.4);margin-bottom:calc(var(--aihd-ritmo) * .3)} body.aihd-on.aihd-doc-on .aihd-doc > :is(h5,h6){font-size:var(--aihd-t0);font-weight:700;margin-top:var(--aihd-ritmo);margin-bottom:.3em} body.aihd-on.aihd-doc-on .aihd-doc > h2:first-child, body.aihd-on.aihd-doc-on .aihd-doc > h3:first-child{margin-top:0} /* --- Fix de ritmo (2.13.1): un titulo puede ir anidado dentro de un grupo, columna o bloque, y entonces NO era hijo directo de .aihd-doc y se quedaba sin margen superior, montandose sobre el parrafo anterior. Aqui el aire de los encabezados se aplica tambien anidados, con valor de reserva. --- */ body.aihd-on.aihd-doc-on .aihd-doc :is(h2,h3,h4,h5,h6){margin-top:var(--aihd-ritmo-2,1.9em);margin-bottom:.5em} body.aihd-on.aihd-doc-on .aihd-doc h2{margin-top:var(--aihd-ritmo-3,2.6em)} body.aihd-on.aihd-doc-on .aihd-doc h4{margin-top:calc(var(--aihd-ritmo,1.1em) * 1.4)} /* Quitarle el aire al primer encabezado solo tiene sentido si ese encabezado abre EL DOCUMENTO. Escrito con combinador descendente, como estaba, se lo quitaba a cualquiera que abriese un div, una sección o un grupo del editor —que es lo normal en el HTML que escribe el modelo—, y entonces un h2 que venía después de una tabla se quedaba pegado a ella. El caso real que hay que seguir cubriendo es otro y está más abajo: una caja con fondo propio, donde el margen se metería dentro de la caja. */ body.aihd-on.aihd-doc-on .aihd-doc > :is(h2,h3,h4,h5,h6):first-child{margin-top:0} /* Parrafos y bloques anidados tambien mantienen separacion del titulo. */ body.aihd-on.aihd-doc-on .aihd-doc :is(h2,h3,h4,h5,h6) + *{margin-top:calc(var(--aihd-ritmo,1.1em) * .5)} /* --- Párrafos: medida, interlineado y una entradilla para el primero --- */ body.aihd-on.aihd-doc-on .aihd-doc p{color:var(--aihd-tx);margin-block:0} body.aihd-on.aihd-doc-on .aihd-doc > p:first-of-type{ font-size:var(--aihd-t1); line-height:1.6; color:var(--aihd-tx)} /* --- Enlaces: subrayados que se ven, con el color ya verificado --- */ body.aihd-on.aihd-doc-on .aihd-doc a:not(.aihd-btn):not([class*="button"]):not([class*="btn"]){ color:var(--aihd-lk); text-decoration:underline; text-decoration-thickness:.09em; text-underline-offset:.19em; text-decoration-color:color-mix(in srgb, var(--aihd-lk) 42%, transparent); transition:text-decoration-color .18s ease,color .18s ease} body.aihd-on.aihd-doc-on .aihd-doc a:not(.aihd-btn):hover{ text-decoration-color:currentColor; color:var(--aihd-p-hover,var(--aihd-lk))} /* --- Listas: con aire entre elementos y marcador de marca --- */ body.aihd-on.aihd-doc-on .aihd-doc :is(ul,ol){padding-left:1.5em;margin-block:0} body.aihd-on.aihd-doc-on .aihd-doc :is(ul,ol) li + li{margin-top:.55em} body.aihd-on.aihd-doc-on .aihd-doc li{color:var(--aihd-tx);padding-left:.2em} body.aihd-on.aihd-doc-on .aihd-doc li::marker{color:var(--aihd-p);font-weight:700} body.aihd-on.aihd-doc-on .aihd-doc li > :is(ul,ol){margin-top:.55em} /* --- Cita: un bloque de verdad, no un párrafo con una barra --- */ body.aihd-on.aihd-doc-on .aihd-doc :is(blockquote,.wp-block-quote){ margin-block:var(--aihd-ritmo-2); padding:1.3em 1.5em; background:var(--aihd-sf); border:1px solid var(--aihd-bd-sf); border-left:4px solid var(--aihd-a); border-radius:0 var(--aihd-r) var(--aihd-r) 0; font-size:var(--aihd-t1); line-height:1.55; font-style:normal; color:var(--aihd-tx)} body.aihd-on.aihd-doc-on .aihd-doc blockquote :is(cite,.wp-block-quote__citation){ display:block;margin-top:.8em;font-size:var(--aihd-tm1);font-style:normal; color:var(--aihd-mt);font-family:var(--aihd-fh);font-weight:600} body.aihd-on.aihd-doc-on .aihd-doc .wp-block-pullquote{ border:0;border-block:3px solid var(--aihd-p);background:none;padding:1.6em 0;text-align:center} /* --- Imágenes y figuras --- */ body.aihd-on.aihd-doc-on .aihd-doc :is(img,video,iframe){ max-width:100%;height:auto;border-radius:var(--aihd-r);display:block} body.aihd-on.aihd-doc-on .aihd-doc :is(figure,.wp-block-image){margin-block:var(--aihd-ritmo-2);margin-inline:0} body.aihd-on.aihd-doc-on .aihd-doc figcaption{ margin-top:.7em;font-size:var(--aihd-tm1);line-height:1.5; color:var(--aihd-mt);text-align:center; padding-inline:1em;border-left:0} body.aihd-on.aihd-doc-on .aihd-doc .alignwide, body.aihd-on.aihd-doc-on .aihd-doc .wp-block-image.alignwide{ width:min(100vw - 32px, calc(var(--aihd-doc-w) + 14vw)); max-width:none;margin-inline:calc(50% - min(50vw - 16px, (var(--aihd-doc-w) + 14vw)/2))} body.aihd-on.aihd-doc-on .aihd-doc :is(.alignleft,.alignright){max-width:44%} @media (max-width:640px){ body.aihd-on.aihd-doc-on .aihd-doc :is(.alignleft,.alignright,.alignwide){float:none;max-width:100%;width:auto;margin-inline:0} } /* --- Separador: el mismo gesto que en la portada --- */ body.aihd-on.aihd-doc-on .aihd-doc :is(hr,.wp-block-separator){ border:0;height:0;margin-block:var(--aihd-ritmo-3); border-top:1px solid var(--aihd-bd-f); max-width:none;opacity:1} body.aihd-on.aihd-doc-on .aihd-doc .wp-block-separator.is-style-dots{border:0;text-align:center;color:var(--aihd-p)} /* --- Código --- */ body.aihd-on.aihd-doc-on .aihd-doc code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88em;padding:.18em .45em;border-radius:5px; background:var(--aihd-sf-2);border:1px solid var(--aihd-bd-sf);color:var(--aihd-tx)} body.aihd-on.aihd-doc-on .aihd-doc :is(pre,.wp-block-code){ background:var(--aihd-sf-2);border:1px solid var(--aihd-bd-sf); border-radius:var(--aihd-r);padding:1.1em 1.3em;overflow-x:auto; margin-block:var(--aihd-ritmo);line-height:1.6} body.aihd-on.aihd-doc-on .aihd-doc pre code{background:none;border:0;padding:0} /* --- Tablas: bordes visibles y cabecera con la marca --- */ body.aihd-on.aihd-doc-on .aihd-doc :is(table,.wp-block-table table){ width:100%;border-collapse:separate;border-spacing:0; border:1px solid var(--aihd-bd-f);border-radius:var(--aihd-r);overflow:hidden; margin-block:var(--aihd-ritmo);font-size:var(--aihd-tm1);background:var(--aihd-bg)} body.aihd-on.aihd-doc-on .aihd-doc :is(th,td){ padding:.85em 1.1em;border:0;border-bottom:1px solid var(--aihd-bd-sf); text-align:left;vertical-align:top;color:var(--aihd-tx)} body.aihd-on.aihd-doc-on .aihd-doc :is(th,thead td){ background:var(--aihd-p);color:var(--aihd-on-p); font-family:var(--aihd-fh);font-weight:700;border-bottom:0} body.aihd-on.aihd-doc-on .aihd-doc tr:last-child > :is(td,th){border-bottom:0} body.aihd-on.aihd-doc-on .aihd-doc tbody tr:hover > td{background:var(--aihd-p1)} /* --- Botones dentro del contenido --- */ body.aihd-on.aihd-doc-on .aihd-doc :is(.wp-block-button__link,a[class*="btn"],a[class*="boton"],a[class*="button"]){ display:inline-flex;align-items:center;gap:.5em; background:var(--aihd-p);color:var(--aihd-on-p)!important; border:0;border-radius:calc(var(--aihd-r) + 4px); padding:.8em 1.5em;min-height:44px; font:700 var(--aihd-t0)/1 var(--aihd-fh); text-decoration:none!important; transition:background .2s ease,transform .2s ease} body.aihd-on.aihd-doc-on .aihd-doc :is(.wp-block-button__link,a[class*="btn"]):hover{ background:var(--aihd-p-hover,var(--aihd-p));transform:translateY(-1px)} body.aihd-on.aihd-doc-on .aihd-doc .is-style-outline .wp-block-button__link{ background:transparent;color:var(--aihd-lk)!important;border:1.5px solid var(--aihd-bd-f)} /* --- Bloques de Gutenberg que suelen quedar sueltos --- */ body.aihd-on.aihd-doc-on .aihd-doc .wp-block-group:not(.aihd-doc){padding:0;background:none} body.aihd-on.aihd-doc-on .aihd-doc .wp-block-group.has-background{ padding:clamp(18px,4vw,32px);border-radius:var(--aihd-r);border:1px solid var(--aihd-bd-sf)} body.aihd-on.aihd-doc-on .aihd-doc .wp-block-columns{gap:clamp(18px,3vw,32px);margin-block:var(--aihd-ritmo-2)} body.aihd-on.aihd-doc-on .aihd-doc .wp-block-media-text{ gap:clamp(18px,3vw,32px);margin-block:var(--aihd-ritmo-2);border-radius:var(--aihd-r);overflow:hidden} body.aihd-on.aihd-doc-on .aihd-doc .wp-block-embed{margin-block:var(--aihd-ritmo-2)} body.aihd-on.aihd-doc-on .aihd-doc .wp-block-embed__wrapper{border-radius:var(--aihd-r);overflow:hidden} body.aihd-on.aihd-doc-on .aihd-doc :is(.wp-block-gallery,.blocks-gallery-grid){gap:12px;margin-block:var(--aihd-ritmo-2)} body.aihd-on.aihd-doc-on .aihd-doc .wp-block-details{ background:var(--aihd-sf);border:1px solid var(--aihd-bd-sf); border-radius:var(--aihd-r);padding:1em 1.25em;margin-block:var(--aihd-ritmo)} body.aihd-on.aihd-doc-on .aihd-doc .wp-block-details summary{ cursor:pointer;font-family:var(--aihd-fh);font-weight:700;color:var(--aihd-tx);min-height:44px;display:flex;align-items:center} /* --- Formularios dentro del contenido --- */ body.aihd-on.aihd-doc-on .aihd-doc :is(input,select,textarea){ width:100%;max-width:100%;padding:.75em 1em; background:var(--aihd-bg);color:var(--aihd-tx); border:1px solid var(--aihd-bd-f);border-radius:calc(var(--aihd-r) * .7); font:inherit;min-height:44px} body.aihd-on.aihd-doc-on .aihd-doc :is(input,select,textarea):focus{ border-color:var(--aihd-p);outline:2px solid transparent;box-shadow:0 0 0 3px var(--aihd-p2)} body.aihd-on.aihd-doc-on .aihd-doc label{display:block;margin-bottom:.35em;font-weight:600;color:var(--aihd-tx)} body.aihd-on.aihd-doc-on .aihd-doc :is(input[type=submit],button[type=submit]){ width:auto;background:var(--aihd-p);color:var(--aihd-on-p);border:0;cursor:pointer; font:700 var(--aihd-t0)/1 var(--aihd-fh);padding:.85em 1.6em} /* --- Tarjetas y fichas con clases propias del tema --- */ body.aihd-on.aihd-doc-on .aihd-doc :is(div,section,article)[class*="card"], body.aihd-on.aihd-doc-on .aihd-doc :is(div,section,article)[class*="ficha"], body.aihd-on.aihd-doc-on .aihd-doc :is(div,section,article)[class*="tarjeta"]{ background:var(--aihd-sf);border:1px solid var(--aihd-bd-sf); border-radius:var(--aihd-r);padding:clamp(16px,3vw,26px); box-shadow:var(--aihd-sh);color:var(--aihd-tx)} /* ============================================================ 29. Cabecera del artículo y bloque de relacionados ============================================================ */ .aihd-art-h{position:relative;isolation:isolate; padding-block:calc(var(--aihd-ritmo-3) * var(--aihd-k,1)) calc(var(--aihd-ritmo-2) * var(--aihd-k,1)); margin-bottom:var(--aihd-ritmo-2); border-bottom:1px solid var(--aihd-bd)} .aihd-art-in{max-width:var(--aihd-medida-ancha,46em);margin-inline:auto;padding-inline:clamp(18px,4vw,28px);position:relative;z-index:1} .aihd-art-t{ font:800 var(--aihd-t4)/var(--aihd-lh-titular) var(--aihd-fh); letter-spacing:var(--aihd-ls-titular);color:var(--aihd-tx); margin:0 0 .35em;text-wrap:balance} .aihd-art-e{font-size:var(--aihd-t1);line-height:1.55;color:var(--aihd-mt);margin:0 0 1em;max-width:38em} .aihd-art-m{display:flex;flex-wrap:wrap;align-items:center;gap:.55em; font:600 var(--aihd-tm1)/1.4 var(--aihd-fh);color:var(--aihd-mt)} .aihd-art-m a{color:var(--aihd-lk);text-decoration:none} .aihd-art-m a:hover{text-decoration:underline} .aihd-art-cat{ background:var(--aihd-p);color:var(--aihd-on-p)!important; padding:.3em .8em;border-radius:999px;font-weight:700; text-transform:uppercase;letter-spacing:var(--aihd-ls-micro)} .aihd-art-sep{opacity:.5} .aihd-migas{margin:0 0 1em;font-size:var(--aihd-tm1)} .aihd-migas ol{display:flex;flex-wrap:wrap;gap:.4em;list-style:none;margin:0;padding:0} .aihd-migas li{color:var(--aihd-mt)} .aihd-migas li + li::before{content:"/";margin-right:.45em;opacity:.55} .aihd-migas a{color:var(--aihd-mt);text-decoration:none} .aihd-migas a:hover{color:var(--aihd-lk)} .aihd-rel{margin-top:var(--aihd-ritmo-4);padding-block:calc(var(--aihd-ritmo-3) * var(--aihd-k,1)); background:var(--aihd-sf);border-top:1px solid var(--aihd-bd)} .aihd-rel-in{max-width:1200px;margin-inline:auto;padding-inline:clamp(18px,4vw,36px)} .aihd-rel-t{font:800 var(--aihd-t3)/var(--aihd-lh-medio) var(--aihd-fh); letter-spacing:var(--aihd-ls-medio);color:var(--aihd-tx);margin:0 0 var(--aihd-ritmo)} .aihd-rel .aihd-card{background:var(--aihd-bg)} .aihd-rel :is(ul,ol){list-style:none;margin:0;padding:0} .aihd-rel a{text-decoration:none;color:inherit} /* ============================================================ 30. Cabecera propia del sitio ============================================================ */ .aihd-cab{position:relative;z-index:900;background:var(--aihd-bg);border-bottom:1px solid var(--aihd-bd)} .aihd-cab.es-fija{position:sticky;top:0} body.admin-bar .aihd-cab.es-fija{top:32px} @media (max-width:782px){body.admin-bar .aihd-cab.es-fija{top:46px}} .aihd-cab.es-encogida{ background:color-mix(in srgb, var(--aihd-bg) 86%, transparent); -webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px); box-shadow:0 6px 24px -18px rgb(0 0 0 / .6)} @supports not (backdrop-filter:blur(1px)){.aihd-cab.es-encogida{background:var(--aihd-bg)}} .aihd-cab-in{ display:flex;align-items:center;gap:clamp(14px,3vw,34px); max-width:1200px;margin-inline:auto;padding:0 clamp(18px,4vw,36px); min-height:var(--aihd-cab-h,70px); transition:min-height .25s ease} .aihd-cab.es-encogida .aihd-cab-in{min-height:58px} .aihd-marca{display:flex;flex-direction:column;gap:1px;text-decoration:none;color:var(--aihd-tx);flex:none;max-width:46%} .aihd-marca-n{font:800 var(--aihd-t1)/1.1 var(--aihd-fh);letter-spacing:var(--aihd-ls-medio);color:var(--aihd-tx)} .aihd-marca-n strong{color:var(--aihd-lk);font-weight:800} .aihd-marca-l{font-size:var(--aihd-tm2,.72rem);color:var(--aihd-mt);font-weight:600;letter-spacing:var(--aihd-ls-micro);text-transform:uppercase} .aihd-marca--img .aihd-logo{max-height:44px;width:auto;border-radius:0} .aihd-nav{margin-right:auto} .aihd-nav-l{display:flex;align-items:center;gap:clamp(6px,1.4vw,22px);list-style:none;margin:0;padding:0} .aihd-nav-l li{position:relative} .aihd-nav-l a{ display:block;padding:.6em .2em;text-decoration:none; font:600 var(--aihd-t0) var(--aihd-fh);color:var(--aihd-tx); white-space:nowrap} .aihd-nav-l > li > a span{position:relative;display:inline-block} .aihd-nav-l > li > a span::after{ content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px; background:var(--aihd-p);border-radius:2px; transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.7,.2,1)} .aihd-nav-l > li:is(:hover,.current-menu-item,.current-menu-ancestor) > a span::after{transform:scaleX(1)} .aihd-nav-l > li.current-menu-item > a{color:var(--aihd-lk)} /* Submenús */ .aihd-nav-l .sub-menu{ position:absolute;left:-14px;top:100%;min-width:210px; display:grid;gap:2px;padding:8px;margin:0;list-style:none; background:var(--aihd-bg);border:1px solid var(--aihd-bd); border-radius:var(--aihd-r);box-shadow:0 20px 44px -24px rgb(0 0 0 / .5); opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:10} .aihd-nav-l li:is(:hover,:focus-within) > .sub-menu{opacity:1;visibility:visible;transform:none} .aihd-nav-l .sub-menu a{padding:.55em .7em;border-radius:calc(var(--aihd-r) * .55);font-weight:500} .aihd-nav-l .sub-menu a:hover{background:var(--aihd-p1);color:var(--aihd-lk)} .aihd-cab-acc{display:flex;align-items:center;gap:8px;flex:none} .aihd-cab-b{ width:42px;height:42px;display:grid;place-items:center;flex:none; background:none;border:1px solid var(--aihd-bd);border-radius:calc(var(--aihd-r) * .8); color:var(--aihd-tx);cursor:pointer;transition:border-color .2s ease,color .2s ease} .aihd-cab-b:hover{border-color:var(--aihd-p);color:var(--aihd-lk)} .aihd-cab-menu{display:none} .aihd-cab-cta{ display:inline-flex;align-items:center;min-height:42px;padding:0 1.3em; background:var(--aihd-p);color:var(--aihd-on-p);border-radius:calc(var(--aihd-r) * .8); font:700 var(--aihd-tm1) var(--aihd-fh);text-decoration:none;white-space:nowrap; transition:background .2s ease} .aihd-cab-cta:hover{background:var(--aihd-p-hover,var(--aihd-p))} .aihd-hamb{display:grid;gap:4px;width:20px} .aihd-hamb i{display:block;height:2px;background:currentColor;border-radius:2px;transition:transform .25s ease,opacity .2s ease} [aria-expanded="true"] .aihd-hamb i:nth-child(1){transform:translateY(6px) rotate(45deg)} [aria-expanded="true"] .aihd-hamb i:nth-child(2){opacity:0} [aria-expanded="true"] .aihd-hamb i:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .aihd-cab-panel{border-top:1px solid var(--aihd-bd);background:var(--aihd-sf);padding:14px clamp(18px,4vw,36px)} .aihd-cab-panel .aihd-search{max-width:620px;margin-inline:auto} /* Panel lateral de navegación en móvil */ .aihd-panel-nav{ position:fixed;inset:0;z-index:9990; background:rgb(0 0 0 / .5);opacity:0;transition:opacity .28s ease} .aihd-panel-nav.es-abierto{opacity:1} .aihd-panel-c{ position:absolute;right:0;top:0;bottom:0;width:min(84vw,360px); background:var(--aihd-bg);border-left:1px solid var(--aihd-bd); padding:26px 24px calc(26px + env(safe-area-inset-bottom,0px)); overflow-y:auto;transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.7,.2,1)} .aihd-panel-nav.es-abierto .aihd-panel-c{transform:none} .aihd-panel-x{ position:absolute;top:14px;right:16px;width:42px;height:42px; background:none;border:0;font-size:30px;line-height:1;color:var(--aihd-tx);cursor:pointer} .aihd-nav--panel{margin:44px 0 0} .aihd-nav--panel .aihd-nav-l{flex-direction:column;align-items:stretch;gap:2px} .aihd-nav--panel .aihd-nav-l a{ padding:.85em .6em;border-radius:calc(var(--aihd-r) * .6); font-size:var(--aihd-t1);min-height:48px;display:flex;align-items:center} .aihd-nav--panel .aihd-nav-l a:hover{background:var(--aihd-p1)} .aihd-nav--panel .aihd-nav-l > li > a span::after{display:none} .aihd-nav--panel .sub-menu{ position:static;opacity:1;visibility:visible;transform:none; border:0;box-shadow:none;background:none;padding:0 0 0 14px; border-left:2px solid var(--aihd-bd)} @media (max-width:900px){ .aihd-cab .aihd-nav{display:none} .aihd-cab-menu{display:grid} .aihd-cab-cta{display:none} .aihd-marca{max-width:62%;margin-right:auto} } @media (prefers-reduced-motion:reduce){ .aihd-panel-c,.aihd-panel-nav,.aihd-cab-in,.aihd-nav-l a span::after{transition:none} } /* ============================================================ 31. Pie propio del sitio ============================================================ */ .aihd-pie{ margin-top:var(--aihd-ritmo-4); background:var(--aihd-sf); border-top:1px solid var(--aihd-bd); color:var(--aihd-tx)} .aihd-pie-in{max-width:1200px;margin-inline:auto;padding:calc(var(--aihd-ritmo-3) * var(--aihd-k,1)) clamp(18px,4vw,36px) var(--aihd-ritmo)} .aihd-pie-cols{ display:grid;gap:clamp(24px,4vw,48px); grid-template-columns:1.4fr repeat(auto-fit,minmax(150px,1fr))} .aihd-pie-c h3{ font:700 var(--aihd-tm1)/1.3 var(--aihd-fh); text-transform:uppercase;letter-spacing:var(--aihd-ls-micro); color:var(--aihd-mt);margin:0 0 1em} .aihd-pie-d{color:var(--aihd-mt);font-size:var(--aihd-tm1);line-height:1.65;margin:.9em 0 0;max-width:32em} .aihd-pie-l{list-style:none;margin:0;padding:0;display:grid;gap:.6em} .aihd-pie-l a,.aihd-pie .aihd-nav-l a{ color:var(--aihd-mt);text-decoration:none;font-size:var(--aihd-tm1); padding:0;font-weight:500;transition:color .18s ease} .aihd-pie-l a:hover,.aihd-pie .aihd-nav-l a:hover{color:var(--aihd-lk)} .aihd-pie .aihd-nav{margin:0} .aihd-pie .aihd-nav-l{flex-direction:column;align-items:flex-start;gap:.6em} .aihd-pie .aihd-nav-l > li > a span::after{display:none} .aihd-pie .sub-menu{display:none} .aihd-pie .aihd-marca{max-width:none} .aihd-pie-bajo{ display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center; margin-top:var(--aihd-ritmo-2);padding-top:var(--aihd-ritmo); border-top:1px solid var(--aihd-bd); color:var(--aihd-mt);font-size:var(--aihd-tm1)} @media (max-width:760px){ .aihd-pie-cols{grid-template-columns:1fr 1fr} .aihd-pie-c--marca{grid-column:1/-1} body.aihd-con-barra .aihd-pie-in{padding-bottom:calc(var(--aihd-ritmo) + 60px)} } @media (max-width:420px){ .aihd-pie-cols{grid-template-columns:1fr} } /* ============================================================ 32. Coherencia global: el tema no vuelve a colarse ============================================================ */ body.aihd-doc-on :is(.site-main,#primary,.content-area,main,.wp-block-post-content){ background:transparent} body.aihd-doc-on :is(#sidebar,#secondary,.sidebar,aside.widget-area){ background:var(--aihd-sf);border:1px solid var(--aihd-bd);border-radius:var(--aihd-r);padding:clamp(16px,3vw,24px)} body.aihd-doc-on :is(#sidebar,#secondary,.sidebar) :is(h2,h3,.widget-title){ font:700 var(--aihd-t1)/1.3 var(--aihd-fh);color:var(--aihd-tx)} body.aihd-doc-on :is(#sidebar,#secondary,.sidebar) a{color:var(--aihd-lk);text-decoration:none} /* La paginación y los comentarios también son parte del sitio */ body.aihd-on :is(.nav-links,.page-links,.pagination) a, body.aihd-on :is(.nav-links,.page-links,.pagination) span{ display:inline-flex;align-items:center;justify-content:center; min-width:44px;min-height:44px;padding:0 .8em;margin:2px; border:1px solid var(--aihd-bd);border-radius:calc(var(--aihd-r) * .7); color:var(--aihd-tx);text-decoration:none;font-family:var(--aihd-fh);font-weight:600} body.aihd-on :is(.nav-links,.pagination) a:hover{border-color:var(--aihd-p);color:var(--aihd-lk)} body.aihd-on :is(.nav-links,.pagination) .current{background:var(--aihd-p);color:var(--aihd-on-p);border-color:var(--aihd-p)} /* Botón de submenú del panel móvil (lo inserta el JS) */ .aihd-nav--panel li:has(> .sub-menu){display:grid;grid-template-columns:1fr auto;align-items:center} .aihd-nav--panel li:has(> .sub-menu) > .sub-menu{grid-column:1/-1} .aihd-sub-t{ width:44px;height:44px;background:none;border:1px solid var(--aihd-bd); border-radius:calc(var(--aihd-r) * .6);color:var(--aihd-tx); font-size:20px;line-height:1;cursor:pointer} /* ============================================================ 33. COMPOSICIÓN DEL TEXTO Alineación de los encabezados y justificación del texto, en toda la web a la vez: portada, contenido, cabecera de artículo, relacionados y lo que pinte el tema dentro del contenido. Lo gobierna AIHD_Composicion con cuatro clases en el body: .aihd-cmp-c encabezados centrados .aihd-cmp-l encabezados a la izquierda .aihd-cmp-b encabezados en negrita .aihd-cmp-j texto justificado siempre .aihd-cmp-jw texto justificado solo en pantallas anchas Este bloque va al final del archivo a propósito: varias de sus reglas empatan en especificidad con las variantes decorativas de la sección 2, y al empatar gana la última. ============================================================ */ /* --- 33.1 Encabezados centrados ------------------------------ El ámbito es deliberadamente el de los títulos de documento y de sección. Las tarjetas quedan fuera: un titular centrado sobre un extracto alineado a la izquierda, dentro de una caja de 300 px, no se lee como una decisión sino como un fallo. --- */ body.aihd-cmp-c .aihd-home-wrap :is(.aihd-h1,.aihd-title), body.aihd-cmp-c .aihd-home-wrap .aihd-head :is(h1,h2,h3,h4), body.aihd-cmp-c .aihd-home-wrap .aihd-hero-c :is(h1,h2), body.aihd-cmp-c .aihd-home-wrap .aihd-cluster-h :is(h2,h3), body.aihd-cmp-c .aihd-doc :is(h1,h2,h3,h4):not(.aihd-home-wrap *), body.aihd-cmp-c :is(.the-content,.entry-content) > :is(h1,h2,h3,h4):not(.aihd-home-wrap *), body.aihd-cmp-c :is(.the-content,.entry-content) > * > :is(h1,h2,h3,h4):not(.aihd-home-wrap *), body.aihd-cmp-c :is(.aihd-art-t,.aihd-rel-t){ text-align:center} /* Los bloques que rodean al título van con él. Centrar el título y dejar el subtítulo pegado al margen izquierdo es peor que no centrar nada: se ve el escalón. */ body.aihd-cmp-c .aihd-home-wrap .aihd-head{margin-inline:auto;text-align:center} body.aihd-cmp-c .aihd-home-wrap :is(.aihd-sub,.aihd-lead){margin-inline:auto} body.aihd-cmp-c .aihd-home-wrap .aihd-h1{margin-inline:auto} body.aihd-cmp-c .aihd-home-wrap .aihd-hero-c.aihd-left{text-align:center} body.aihd-cmp-c .aihd-home-wrap .aihd-hero-c.aihd-left .aihd-actions{justify-content:center} body.aihd-cmp-c .aihd-art-in{text-align:center} body.aihd-cmp-c .aihd-art-e{margin-inline:auto} body.aihd-cmp-c .aihd-art-m{justify-content:center} body.aihd-cmp-c .aihd-migas ol{justify-content:center} /* --- 33.2 Adornos recolocados -------------------------------- Las variantes decorativas de h2 y h3 están construidas para texto a la izquierda: una caja con la barra en el borde izquierdo, una línea que sale hacia la derecha, una barra corta encima y un punto delante. Centrado el texto y no el adorno, el adorno se queda descolgado en una esquina. --- */ /* Caja: la barra lateral pasa a ser una barra superior, y el radio deja de ser asimétrico porque ya no hay un lado «abierto». */ body.aihd-cmp-c.aihd-h2-caja :is(.the-content,.entry-content,.aihd-doc) h2:not(.aihd-home-wrap *){ border-left:0;border-top:4px solid var(--aihd-p); border-radius:0 0 var(--aihd-r) var(--aihd-r); padding:.75em .9em .65em} body.aihd-rtl.aihd-cmp-c.aihd-h2-caja :is(.the-content,.entry-content,.aihd-doc) h2{ border-right:0;border-top:4px solid var(--aihd-p); border-radius:0 0 var(--aihd-r) var(--aihd-r)} /* Línea: era un flex con una línea detrás. Centrado, se le pone otra delante y se reparten el espacio sobrante a partes iguales. */ body.aihd-cmp-c.aihd-h2-linea :is(.the-content,.entry-content,.aihd-doc) h2:not(.aihd-home-wrap *){ justify-content:center} body.aihd-cmp-c.aihd-h2-linea :is(.the-content,.entry-content,.aihd-doc) h2:not(.aihd-home-wrap *)::before{ content:"";flex:1 1 40px;min-width:24px;height:2px; background:linear-gradient(270deg,var(--aihd-p),transparent)} body.aihd-cmp-c.aihd-h2-linea :is(.the-content,.entry-content,.aihd-doc) h2:not(.aihd-home-wrap *)::after{ flex:1 1 40px;min-width:24px} /* Barra corta encima: es un bloque de 2,2 em; sin margen automático se queda pegado al borde izquierdo con el título centrado encima. */ body.aihd-cmp-c.aihd-h2-barra :is(.the-content,.entry-content,.aihd-doc) h2:not(.aihd-home-wrap *)::before{ margin-inline:auto} body.aihd-cmp-c .aihd-cluster--inv .aihd-cluster-h h2::before{margin-inline:auto} /* Lateral: un borde izquierdo con el texto centrado señala a la nada. Se sustituye por un subrayado corto centrado, que es el mismo gesto pero en el eje que corresponde. */ body.aihd-cmp-c.aihd-h3-lateral :is(.the-content,.entry-content,.aihd-doc) h3:not(.aihd-home-wrap *){ border-left:0;padding-left:0;padding-bottom:.4em;position:relative} body.aihd-cmp-c.aihd-h3-lateral :is(.the-content,.entry-content,.aihd-doc) h3:not(.aihd-home-wrap *)::after{ content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%); width:2.4em;height:3px;border-radius:3px;background:var(--aihd-a)} body.aihd-rtl.aihd-cmp-c.aihd-h3-lateral :is(.the-content,.entry-content,.aihd-doc) h3{ border-right:0;padding-right:0} /* Punto: es inline, así que se centra con el texto. Se le pone el simétrico para que el conjunto quede equilibrado. */ body.aihd-cmp-c.aihd-h3-punto :is(.the-content,.entry-content,.aihd-doc) h3:not(.aihd-home-wrap *)::after{ content:"";display:inline-block;width:.5em;height:.5em;border-radius:50%; background:var(--aihd-p);margin-left:.55em;vertical-align:.12em} /* --- 33.3 Encabezados en negrita ----------------------------- */ body.aihd-cmp-b .aihd-home-wrap :is(.aihd-h1,.aihd-title), body.aihd-cmp-b .aihd-doc :is(h1,h2):not(.aihd-home-wrap *), body.aihd-cmp-b :is(.the-content,.entry-content) :is(h1,h2):not(.aihd-home-wrap *), body.aihd-cmp-b :is(.aihd-art-t,.aihd-rel-t){font-weight:800} body.aihd-cmp-b .aihd-doc :is(h3,h4,h5,h6):not(.aihd-home-wrap *), body.aihd-cmp-b :is(.the-content,.entry-content) :is(h3,h4):not(.aihd-home-wrap *){font-weight:700} /* --- 33.4 Texto justificado ---------------------------------- Solo el texto corrido. Las exclusiones van dentro de un :not() en lugar de en una regla de reset posterior, y la diferencia importa. Un reset tiene que decidir a qué valor vuelve —y no hay uno bueno: `start` rompe el pie de foto, que está centrado a propósito, e `inherit` rompe la celda de tabla, que hereda de la tabla—. Al excluirlo en el selector no se toca nada: el elemento conserva la alineación que ya tenía, venga de donde venga. Los dos modos van dentro de una media query, no uno dentro y otro con una anulación detrás, porque una anulación tendría que empatar en especificidad con un selector que lleva :not() y eso obliga a repetir el :not() igualmente. Así el límite inferior se lee de un vistazo: justificado por debajo de 421 px no se activa nunca. La partición de palabras se pide aquí pero el valor lo decide AIHD_Composicion::css() con la variable --aihd-hyph, según tenga o no diccionario el idioma del contenido. --- */ /* «Sí, en toda la web»: desde 421 px. Con cuatro o cinco palabras por línea el reparto no tiene margen y abre huecos aunque haya diccionario, así que en el móvil estrecho no se justifica. */ @media (min-width:421px){ body.aihd-cmp-j :is(.aihd-doc,.the-content,.entry-content,.aihd-home-wrap) :is(p,li,blockquote,dd):not( .aihd-meta,.aihd-chip,.aihd-dist,.aihd-sub,.aihd-lead,.aihd-center-p, .aihd-card *,.aihd-step *,.aihd-row,.aihd-row *,.aihd-feature *,.aihd-tcard *,.aihd-float *, .aihd-num *,.aihd-barra *,figcaption,figcaption *,td *,th *,dt, .wp-block-button *,.wp-block-pullquote *,.aihd-btn * ){ text-align:justify; -webkit-hyphens:var(--aihd-hyph,manual); hyphens:var(--aihd-hyph,manual); hyphenate-limit-chars:7 3 3} } /* «Solo en pantallas anchas»: el mismo criterio a partir de 700 px, donde la medida ya da de sí lo suficiente para justificar sin necesidad de partir palabras. */ @media (min-width:700px){ body.aihd-cmp-jw :is(.aihd-doc,.the-content,.entry-content,.aihd-home-wrap) :is(p,li,blockquote,dd):not( .aihd-meta,.aihd-chip,.aihd-dist,.aihd-sub,.aihd-lead,.aihd-center-p, .aihd-card *,.aihd-step *,.aihd-row,.aihd-row *,.aihd-feature *,.aihd-tcard *,.aihd-float *, .aihd-num *,.aihd-barra *,figcaption,figcaption *,td *,th *,dt, .wp-block-button *,.wp-block-pullquote *,.aihd-btn * ){ text-align:justify; -webkit-hyphens:var(--aihd-hyph,manual); hyphens:var(--aihd-hyph,manual); hyphenate-limit-chars:7 3 3} } /* Los encabezados nunca se parten con guion, vayan centrados o no: un titular con un guion de partición se lee como una errata. */ body:is(.aihd-cmp-j,.aihd-cmp-jw) :is(h1,h2,h3,h4,h5,h6){-webkit-hyphens:manual;hyphens:manual} /* ============================================================ 34. TABLA DE CONTENIDOS La construye PHP, así que existe antes de que corra ningún script. El JavaScript solo marca por dónde va la lectura. ============================================================ */ body.aihd-on .aihd-toc{ margin:0 0 var(--aihd-ritmo-2); padding:1.1em 1.3em; background:var(--aihd-sf); border:1px solid var(--aihd-bd-sf); border-left:3px solid var(--aihd-a); border-radius:0 var(--aihd-r) var(--aihd-r) 0} body.aihd-rtl.aihd-on .aihd-toc{ border-left:1px solid var(--aihd-bd-sf);border-right:3px solid var(--aihd-a); border-radius:var(--aihd-r) 0 0 var(--aihd-r)} body.aihd-on .aihd-toc-t{ font:700 var(--aihd-tm1)/1.3 var(--aihd-fh)!important; text-transform:uppercase;letter-spacing:var(--aihd-ls-micro); color:var(--aihd-mt);margin:0 0 .8em!important;text-align:start!important} body.aihd-on .aihd-toc-l, body.aihd-on .aihd-toc-sub{list-style:none;margin:0;padding:0} body.aihd-on .aihd-toc-l > li + li{margin-top:.5em} body.aihd-on .aihd-toc-sub{margin:.45em 0 0 1.1em;padding-inline-start:.8em; border-inline-start:1px solid var(--aihd-bd-sf)} body.aihd-on .aihd-toc-sub li + li{margin-top:.35em} body.aihd-on .aihd-toc a{ color:var(--aihd-tx);text-decoration:none; font-size:var(--aihd-tm1);line-height:1.45; border-bottom:1px solid transparent; transition:color .18s ease,border-color .18s ease} body.aihd-on .aihd-toc a:hover{color:var(--aihd-lk);border-bottom-color:currentColor} body.aihd-on .aihd-toc a.es-actual{color:var(--aihd-lk);font-weight:700} body.aihd-on .aihd-toc-sub a{font-size:var(--aihd-tm2,.82rem);color:var(--aihd-mt)} /* Un h3 sin h2 por encima: su contenedor no tiene enlace propio. */ body.aihd-on .aihd-toc-suelto > .aihd-toc-sub{margin-left:0;border:0;padding-inline-start:0} @media print{ .aihd-toc{display:none} } /* ============================================================ 35. ARCHIVO, BÚSQUEDA Y 404 ============================================================ */ body.aihd-on .aihd-arch-in{ max-width:1200px;margin-inline:auto; padding:0 clamp(18px,4vw,36px) var(--aihd-ritmo-4)} body.aihd-on .aihd-arch-h{margin-bottom:var(--aihd-ritmo-2)} body.aihd-on .aihd-search--grande{ display:flex;gap:8px;max-width:34em;margin:0 auto var(--aihd-ritmo-2)} body.aihd-on .aihd-search--grande input[type=search]{ flex:1;min-height:48px;padding:0 1em;font-size:16px; background:var(--aihd-sf);color:var(--aihd-tx); border:1px solid var(--aihd-bd);border-radius:var(--aihd-r)} body.aihd-on .aihd-search--grande button{ min-height:48px;padding:0 1.4em;border:0;cursor:pointer; background:var(--aihd-p);color:var(--aihd-on-p); font:700 var(--aihd-t0) var(--aihd-fh);border-radius:var(--aihd-r)} body.aihd-on .aihd-vacio{ text-align:center;color:var(--aihd-mt); font-size:var(--aihd-t1);margin:var(--aihd-ritmo-2) 0} body.aihd-on .aihd-pag{ display:flex;flex-wrap:wrap;justify-content:center;gap:4px; margin-top:var(--aihd-ritmo-2)} /* Bloque de rescate: la salida cuando no hay resultados. Los destinos se comprueban contra el contenido publicado, así que una página de error no puede llevar a otro error. */ body.aihd-on .aihd-rescate{ margin-top:var(--aihd-ritmo-3);padding-top:var(--aihd-ritmo-2); border-top:1px solid var(--aihd-bd)} body.aihd-on .aihd-rescate-l{ list-style:none;margin:var(--aihd-ritmo) 0 0;padding:0; display:grid;gap:10px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr))} body.aihd-on .aihd-rescate-l a{ display:flex;align-items:center;min-height:56px; padding:.8em 1.1em;text-decoration:none; background:var(--aihd-sf);color:var(--aihd-tx); border:1px solid var(--aihd-bd-sf);border-radius:var(--aihd-r); font-family:var(--aihd-fh);font-weight:600; transition:border-color .2s ease,transform .2s ease} body.aihd-on .aihd-rescate-l a:hover{ border-color:var(--aihd-p);transform:translateY(-2px);color:var(--aihd-lk)} /* ============================================================ 36. Marca con logotipo Y nombre ============================================================ */ .aihd-marca--mixta{flex-direction:row;align-items:center;gap:10px} .aihd-marca--mixta .aihd-logo{max-height:40px;width:auto;flex:none} .aihd-marca-t{display:flex;flex-direction:column;gap:1px;min-width:0} @media (max-width:520px){ .aihd-marca--mixta .aihd-marca-l{display:none} } /* ============================================================ 37. ANCHO DEL LIENZO Los 1200 px estaban repartidos por seis sitios del archivo, así que cambiarlos obligaba a cambiarlos seis veces y siempre se olvidaba alguno. Ahora salen todos de la misma variable. ============================================================ */ body.aihd-on{--aihd-lienzo:1200px} body.aihd-lienzo-ancho{--aihd-lienzo:1440px} body.aihd-lienzo-completo{--aihd-lienzo:min(1800px, 94vw)} body.aihd-on :is(.aihd-in,.aihd-rel-in,.aihd-cab-in,.aihd-pie-in,.aihd-arch-in){ max-width:var(--aihd-lienzo)} /* Columna extra en pantallas muy anchas. Una rejilla de tres en un monitor de 27 pulgadas deja tarjetas de 450 px con una foto estirada y tres palabras de extracto. El límite está en 1600 px porque por debajo de eso una cuarta columna aprieta los títulos a dos líneas. */ @media (min-width:1600px){ body.aihd-col-extra.aihd-lienzo-ancho .aihd-cols-3, body.aihd-col-extra.aihd-lienzo-completo .aihd-cols-3{ grid-template-columns:repeat(4,minmax(0,1fr))} body.aihd-col-extra.aihd-lienzo-ancho .aihd-cols-2, body.aihd-col-extra.aihd-lienzo-completo .aihd-cols-2{ grid-template-columns:repeat(3,minmax(0,1fr))} body.aihd-col-extra .aihd-grid{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} } /* ============================================================ 38. COLUMNA DE HERRAMIENTAS DEL ARTÍCULO En móvil no hay sitio para una columna al lado, así que lo que en escritorio sería una barra lateral aquí es una tira plegable pegada bajo la cabecera. Mismo contenido, la forma que cabe. ============================================================ */ body.aihd-on .aihd-herr{ position:sticky; top:calc(var(--aihd-cab-h,0px) + 8px); z-index:20; margin:0 0 var(--aihd-ritmo); background:var(--aihd-sf); border:1px solid var(--aihd-bd-sf); border-radius:var(--aihd-r)} body.aihd-on .aihd-herr-t{ display:flex;align-items:center;justify-content:space-between;gap:10px; width:100%;min-height:48px;padding:.6em 1em; background:none;border:0;cursor:pointer; font:700 var(--aihd-tm1) var(--aihd-fh); color:var(--aihd-tx);text-align:start} body.aihd-on .aihd-herr-t svg{transition:transform .22s ease;flex:none} body.aihd-on .aihd-herr.es-abierta .aihd-herr-t svg{transform:rotate(180deg)} body.aihd-on .aihd-herr-c{display:none;padding:0 1em 1em} body.aihd-on .aihd-herr.es-abierta .aihd-herr-c{display:block} /* La caja de herramientas ya tiene su propio marco: el índice de dentro no necesita otro. */ body.aihd-on .aihd-herr .aihd-toc{ margin:0;padding:0;background:none;border:0;border-radius:0} body.aihd-on .aihd-herr .aihd-toc-t{margin-bottom:.6em!important} body.aihd-on .aihd-herr-a{ display:flex;flex-wrap:wrap;gap:8px; margin-top:1em;padding-top:1em; border-top:1px solid var(--aihd-bd-sf)} body.aihd-on .aihd-h-b{ display:inline-flex;align-items:center;gap:.5em; min-height:44px;padding:0 .9em;cursor:pointer; background:var(--aihd-bg);color:var(--aihd-tx); border:1px solid var(--aihd-bd);border-radius:calc(var(--aihd-r) * .8); font:600 var(--aihd-tm1) var(--aihd-fh); transition:border-color .18s ease,color .18s ease} body.aihd-on .aihd-h-b:hover{border-color:var(--aihd-p);color:var(--aihd-lk)} body.aihd-on .aihd-herr-av{ margin:.7em 1em 1em;font-size:var(--aihd-tm1);color:var(--aihd-ok);font-weight:600} /* Solo móvil (el ajuste por defecto). Por encima del corte no se pinta: se oculta con display:none y no con visibility, para que el sticky no siga reservando sitio. */ @media (min-width:1100px){ body.aihd-herr-movil .aihd-herr{display:none} } @media (max-width:1099px){ body.aihd-herr-escritorio .aihd-herr{display:none} } /* Escritorio: barra lateral de verdad, colgada junto al texto y sin plegar, porque ahí el sitio sobra y el desplegable solo añade un clic. Va con float y no con grid ni con position:absolute. Grid convertiría en celdas a todos los hijos del contenedor, y ese contenedor es el documento entero: se llevaría por delante el ritmo vertical, los márgenes negativos de las imágenes anchas y el `> * + *` del que depende el espaciado. Y `absolute` no puede quedarse pegado al hacer scroll, que es justo lo que se le pide. Un float sí admite `position:sticky`. */ @media (min-width:1100px){ body:is(.aihd-herr-escritorio,.aihd-herr-ambos) .aihd-doc--con-herr{ --aihd-herr-w:clamp(180px,16vw,230px); --aihd-herr-gap:clamp(24px,3vw,40px); padding-inline-start:calc(var(--aihd-herr-w) + var(--aihd-herr-gap))} body:is(.aihd-herr-escritorio,.aihd-herr-ambos) .aihd-herr{ float:inline-start; width:var(--aihd-herr-w); margin-inline-start:calc(-1 * (var(--aihd-herr-w) + var(--aihd-herr-gap))); max-height:calc(100vh - var(--aihd-cab-h,0px) - 32px); overflow-y:auto} body:is(.aihd-herr-escritorio,.aihd-herr-ambos) .aihd-herr-t{ cursor:default;pointer-events:none} body:is(.aihd-herr-escritorio,.aihd-herr-ambos) .aihd-herr-t svg{display:none} body:is(.aihd-herr-escritorio,.aihd-herr-ambos) .aihd-herr-c{display:block} body:is(.aihd-herr-escritorio,.aihd-herr-ambos) .aihd-herr-a{flex-direction:column;align-items:stretch} } @media print{ .aihd-herr{display:none} } /* ============================================================ 39. MEGAMENÚ A partir de ocho elementos, un desplegable vertical se sale de la ventana por abajo y obliga a hacer scroll dentro del menú. ============================================================ */ @media (min-width:1100px){ .aihd-cab .aihd-nav-l > li.es-mega{position:static} .aihd-cab .aihd-nav-l > li.es-mega > :is(.sub-menu,ul){ left:50%;transform:translateX(-50%); width:min(var(--aihd-lienzo,1200px) - 48px, 92vw); columns:var(--aihd-mega-cols,2); column-gap:clamp(18px,3vw,40px); padding:1.2em 1.6em} .aihd-cab .aihd-nav-l > li.es-mega > :is(.sub-menu,ul) > li{ break-inside:avoid;-webkit-column-break-inside:avoid} } /* ============================================================ 40. PUNTERO FINO Detalles que solo tienen sentido con ratón: en táctil no hay hover que revelar y la barra de desplazamiento no se ve. `pointer:fine` es la consulta correcta —`min-width` no lo es, porque hay tabletas de 1280 px sin ratón—. ============================================================ */ @media (hover:hover) and (pointer:fine){ body.aihd-on{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--aihd-p) 55%, var(--aihd-bd)) transparent} body.aihd-on ::-webkit-scrollbar{width:11px;height:11px} body.aihd-on ::-webkit-scrollbar-track{background:transparent} body.aihd-on ::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--aihd-p) 45%, var(--aihd-bd)); border:3px solid var(--aihd-bg); border-radius:99px} body.aihd-on ::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb, var(--aihd-p) 75%, var(--aihd-bd))} /* Subrayado que se revela de izquierda a derecha. Va con background-size y no con text-decoration porque el subrayado no se puede animar: solo aparece o no. */ body.aihd-on .aihd-home-wrap a:not(.aihd-btn):not(.aihd-stretch):not([class*="cab"]), body.aihd-on .aihd-pie-l a, body.aihd-on .aihd-nav-l > li > a > span{ background-image:linear-gradient(currentColor,currentColor); background-repeat:no-repeat; background-position:0 100%; background-size:0 1px; transition:background-size .28s cubic-bezier(.2,.7,.3,1)} body.aihd-on .aihd-home-wrap a:not(.aihd-btn):hover, body.aihd-on .aihd-pie-l a:hover, body.aihd-on .aihd-nav-l > li > a:hover > span{background-size:100% 1px} body.aihd-on .aihd-nav-l > li > a > span{padding-bottom:2px} } @media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){ body.aihd-on :is(.aihd-home-wrap a,.aihd-pie-l a,.aihd-nav-l > li > a > span){transition:none} } /* ============================================================ 41. REGLA FIJA DE ENCABEZADOS Y TEXTO Con fondo oscuro: encabezados en blanco y texto base en casi blanco. Con fondo claro: encabezados en negro y texto base en casi negro. Al pulsar el conmutador, lo que era blanco pasa a negro y al revés. EN TODAS LAS URL DEL SITIO. La primera versión de esta regla listaba contenedores —.aihd-home-wrap, .aihd-doc, .entry-content— y por eso solo funcionaba en la portada: en una entrada, los encabezados del tema viven en un contenedor que se llama de otra manera en cada tema (.post-content, .single-content, .elementor-widget-container, .td-post-content y así hasta el infinito), y ninguna lista los cubre todos. Ahora el ámbito es el documento entero. La regla no pregunta dónde está el encabezado, solo que sea un encabezado. POR QUÉ AQUÍ SÍ VA `!important`. Normalmente es tapar un problema de especificidad en lugar de resolverlo, y en la 2.x ya costó un disgusto. La diferencia es que el color no se escribe literal, se escribe como `var(--aihd-h)`: el valor lo decide el token, y el token lo puede redefinir cualquier contenedor que tenga el fondo al revés. Así que `!important` gana a las reglas del tema sin quitarle al diseño la capacidad de invertirse donde hace falta. Sin el token, este `!important` pintaría de negro los títulos de un hero azul. ============================================================ */ /* --- 41.0 El fondo tiene que llegar hasta abajo -------------- Sin esto, la regla de los colores no se puede cumplir por más que se escriba bien, y era la mitad del problema: en una entrada, el texto salía en casi blanco sobre el fondo blanco que pinta el tema. El plugin pone el fondo del diseño en `body`, pero casi todos los temas vuelven a pintarlo en sus propios contenedores —#page, .site-content, .site-main, article— y esa capa tapa la nuestra. Había una regla que los volvía transparentes, pero solo se activaba con la clase `aihd-doc-on`, que existe únicamente en entradas y páginas con el diseño del contenido activado. En los archivos, en las categorías y con ese ajuste desactivado, el fondo del tema seguía ahí. Se excluye lo nuestro, que sí tiene fondo propio a propósito: las tarjetas, la cabecera, el pie y los bloques de relacionados se verían como cajas sin caja. --- */ body.aihd-on :is(#page,#main,#content,#primary,.site,.site-content,.site-main, .content-area,.wp-site-blocks,.wp-block-post-content,.hentry, main,article,section):not(:where( .aihd-card,.aihd-tcard,.aihd-float,.aihd-row, .aihd-cab,.aihd-pie,.aihd-rel,.aihd-art-h,.aihd-herr,.aihd-toc, .aihd-sec,.aihd-home-wrap,.aihd-home-wrap * )){ background-color:transparent!important; /* El color va sin `!important` para que los componentes de dentro que tienen el suyo propio —metadatos, pies de foto, subtítulos— lo sigan teniendo. Aquí solo se trata de que el contenedor no imponga el gris del tema a todo lo que cuelga de él. */ color:var(--aihd-tx)} /* --- 41.1 Todos los encabezados, en todas las URL ------------ */ /* El `html` delante no es decorativo: sube la especificidad a (0,1,3) sin recurrir a ningún truco. Con `!important` a los dos lados, un tema que escriba `.entry .titulo{color:X!important}` —(0,2,1)— ganaría a un selector de una sola clase. Con html + body van tres elementos por delante y la regla se sostiene. */ html body.aihd-on :is(h1,h2,h3), html body.aihd-on :is(.aihd-h1,.aihd-title,.aihd-art-t,.aihd-rel-t){ color:var(--aihd-h)!important} /* Un encabezado dentro de un botón o de una pastilla de color no es texto de documento: lleva el color que le toque a su fondo. */ body.aihd-on :is(.aihd-btn,.aihd-chip,.aihd-art-cat,.aihd-step-n,button) :is(h1,h2,h3){ color:inherit!important} /* --- 41.2 El texto base ------------------------------------- El texto se hereda, así que basta con ponerlo en el body y reforzarlo donde los temas suelen escribirlo a mano. Va sin `!important` a propósito: aquí no hay un token que salve las excepciones una a una, y forzar el color de todos los párrafos del documento apagaría los subtítulos, los metadatos y los pies de foto, que son grises a propósito. --- */ body.aihd-on{color:var(--aihd-tx)} body.aihd-on :is(.aihd-doc,.the-content,.entry-content,.post-content,.single-content,.page-content,.td-post-content,.elementor-widget-text-editor,article,main) :is(p,li,dd,blockquote):not(:where( .aihd-sub,.aihd-lead,.aihd-meta,.aihd-dist,figcaption, .aihd-card *,.aihd-row *,.aihd-feature *,.aihd-tcard *,.aihd-float *, .aihd-pie *,.aihd-cab *,.aihd-herr *,.aihd-toc *, .aihd-btn,.wp-block-button * )){ color:var(--aihd-tx)} /* --- 41.3 Donde la regla se invierte ------------------------ Un encabezado dentro de una banda de color no puede seguir la regla de la página: sobre un fondo de marca saturado, el negro no se lee aunque el resto del sitio sea claro. Se redefine el token en el contenedor y todo lo de dentro lo hereda, en lugar de repintar cada elemento. Es también lo que hace que el `!important` de 41.1 sea inofensivo: no impone un color, impone que se obedezca al token. --- */ body.aihd-on :is(.aihd-v--banda .aihd-cta,.aihd-ph,.aihd-skip), body.aihd-on .aihd-home-wrap .aihd-tile:nth-child(1), body.aihd-on .aihd-home-wrap .aihd-bgh-gradiente{ --aihd-h:var(--aihd-on-p); --aihd-tx:var(--aihd-on-p)} body.aihd-on .aihd-home-wrap .aihd-bgh-solido{ --aihd-h:var(--aihd-bg); --aihd-tx:var(--aihd-bg)} /* Las cabeceras de tabla llevan fondo de marca. */ body.aihd-on :is(th,thead td){ --aihd-h:var(--aihd-on-p)} /* Cualquier bloque del tema con fondo de color propio: si un tema pinta una sección con su color de marca, el encabezado de dentro no puede heredar la regla de la página. No hay forma de detectarlo en CSS, así que se ofrece la clase para ponerla a mano. */ body.aihd-on .aihd-invertir{ --aihd-h:var(--aihd-on-p); --aihd-tx:var(--aihd-on-p)} /* --- 41.4 Lo que conserva su color -------------------------- Un enlace dentro de un encabezado sigue siendo un enlace: si se pinta igual que el resto del título, deja de parecer pulsable. La excepción son las tarjetas, donde el título ES el enlace y el área pulsable es la tarjeta entera. --- */ body.aihd-on :is(h1,h2,h3) a:not(.aihd-btn):not(.aihd-stretch){ color:var(--aihd-lk)!important} body.aihd-on :is(.aihd-card,.aihd-row,.aihd-tcard,.aihd-float) :is(h1,h2,h3) a{ color:inherit!important} /* ============================================================ 24. Caja de autor (colores desde el diseño, combina con la página) ============================================================ */ .aihd-autor{display:flex;align-items:center;gap:20px;margin:36px 0;padding:20px 22px; background:var(--aihd-sf,#f3f5f9);color:var(--aihd-tx,#161b26); border:1px solid var(--aihd-bd,#e2e6ee);border-left:4px solid var(--aihd-p,#1f5fbf); border-radius:var(--aihd-r,12px);box-shadow:var(--aihd-sh,0 8px 28px -14px rgba(20,30,50,.22)); font-family:var(--aihd-fb,inherit)} .aihd-autor-img{flex-shrink:0} .aihd-autor-img img{width:96px;height:96px;border-radius:50%;object-fit:cover;display:block; border:3px solid var(--aihd-bg,#fff);box-shadow:0 2px 6px rgba(0,0,0,.12)} .aihd-autor-c{min-width:0} .aihd-autor-n{margin:0 0 6px;font-family:var(--aihd-fh,inherit);font-weight:700;font-size:1.15em; line-height:1.2;color:var(--aihd-p,#1f5fbf)} .aihd-autor-d{margin:0;color:var(--aihd-mt,#556070);font-size:.95em;line-height:1.6} .aihd-autor-d p{margin:0 0 .6em} .aihd-autor-d p:last-child{margin-bottom:0} @media (max-width:600px){.aihd-autor{flex-direction:column;text-align:center;gap:14px} .aihd-autor-img img{width:84px;height:84px}} /* ===================================================================== ADN VISUAL — capa de familias (2.13) --------------------------------------------------------------------- Una sola clase body.aihd-fam-* reescribe los tokens que ya consume TODA la portada (radio, sombra, ritmo, encabezados, superficie), así que cada familia se siente como un diseño distinto, no como otro color. Mayor especificidad que :root, luego gana sobre los tokens inline sin tocar el generador PHP. «base» (o ausencia) no aplica nada: los diseños antiguos se ven igual. La intensidad (aihd-int-*) gradúa la decoración; el movimiento respeta prefers-reduced-motion; el móvil simplifica lo pesado. La legibilidad la siguen imponiendo AIHD_Contraste/Validador: aquí NO se tocan colores de texto/fondo. ===================================================================== */ /* Tokens de familia con defaults neutros (los usa la decoración opcional). */ body.aihd-on{--aihd-fam-bd:1px;--aihd-fam-track:0;--aihd-fam-kick:none;--aihd-fam-deco:0} /* ---- EDITORIAL: serif de titular, mucho aire, bordes finos, plano ---- */ body.aihd-fam-editorial{--aihd-r:6px;--aihd-sh:none;--aihd-k:1.18;--aihd-fam-bd:1px;--aihd-fam-track:-.015em} body.aihd-fam-editorial .aihd-home-wrap :is(.aihd-h1,.aihd-title){font-weight:600;letter-spacing:var(--aihd-fam-track);line-height:1.06} body.aihd-fam-editorial .aihd-home-wrap .aihd-card{box-shadow:none;border-color:var(--aihd-bd)} body.aihd-fam-editorial .aihd-home-wrap .aihd-lead{max-width:40ch} /* ---- SWISS: rejilla estricta, sin redondeo, kicker en mayúsculas ---- */ body.aihd-fam-swiss{--aihd-r:0px;--aihd-sh:none;--aihd-k:.92;--aihd-fam-bd:1px;--aihd-fam-track:-.01em;--aihd-fam-kick:block} body.aihd-fam-swiss .aihd-home-wrap :is(.aihd-h1,.aihd-title){font-weight:800;letter-spacing:var(--aihd-fam-track);text-transform:none} body.aihd-fam-swiss .aihd-home-wrap .aihd-head{border-top:2px solid var(--aihd-tx);padding-top:.7em} body.aihd-fam-swiss .aihd-home-wrap .aihd-meta{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem} /* ---- MINIMAL: máximo espacio, casi sin decoración, hairline ---- */ body.aihd-fam-minimal{--aihd-r:4px;--aihd-sh:none;--aihd-k:1.32;--aihd-fam-bd:1px} body.aihd-fam-minimal .aihd-home-wrap .aihd-card{box-shadow:none;border-color:color-mix(in oklab,var(--aihd-bd) 60%,transparent)} body.aihd-fam-minimal .aihd-home-wrap :is(.aihd-h1,.aihd-title){font-weight:600} /* ---- LUXURY: serif, tracking amplio, sombra suave, sereno ---- */ body.aihd-fam-luxury{--aihd-r:10px;--aihd-sh:0 10px 34px -18px rgb(20 20 30 / .28);--aihd-k:1.22;--aihd-fam-track:.02em} body.aihd-fam-luxury .aihd-home-wrap :is(.aihd-h1,.aihd-title){font-weight:500;letter-spacing:var(--aihd-fam-track);line-height:1.1} body.aihd-fam-luxury .aihd-home-wrap .aihd-meta{letter-spacing:.18em;text-transform:uppercase;font-size:.7rem} /* ---- BRUTALIST: bordes gruesos, sin redondeo, titular enorme, sombra dura ---- */ body.aihd-fam-brutalist{--aihd-r:0px;--aihd-sh:6px 6px 0 0 var(--aihd-tx);--aihd-k:1;--aihd-fam-bd:2px;--aihd-fam-track:-.03em} body.aihd-fam-brutalist .aihd-home-wrap :is(.aihd-h1,.aihd-title){font-weight:900;letter-spacing:var(--aihd-fam-track);line-height:.98} body.aihd-fam-brutalist .aihd-home-wrap :is(.aihd-card,.aihd-tcard,.aihd-feature){border-width:var(--aihd-fam-bd);border-color:var(--aihd-tx)} body.aihd-fam-brutalist .aihd-home-wrap .aihd-btn{border:2px solid var(--aihd-tx)} /* ---- TECH: esquinas justas, acento luminoso, rejilla/puntos ---- */ body.aihd-fam-tech{--aihd-r:8px;--aihd-sh:0 0 0 1px color-mix(in oklab,var(--aihd-a) 30%,transparent),0 12px 40px -22px var(--aihd-a);--aihd-k:.96;--aihd-fam-track:-.015em} body.aihd-fam-tech .aihd-home-wrap :is(.aihd-h1,.aihd-title){font-weight:750;letter-spacing:var(--aihd-fam-track)} body.aihd-fam-tech .aihd-home-wrap .aihd-card:hover{border-color:var(--aihd-a)} /* ---- SOFT: redondeado, sombra suave, aireado ---- */ body.aihd-fam-soft{--aihd-r:20px;--aihd-sh:0 14px 40px -20px rgb(30 40 60 / .22);--aihd-k:1.16} body.aihd-fam-soft .aihd-home-wrap :is(.aihd-h1,.aihd-title){font-weight:700;letter-spacing:-.01em} body.aihd-fam-soft .aihd-home-wrap .aihd-btn{border-radius:999px} /* ---- MAGAZINE: escalas mixtas, encabezados asimétricos, cuadrícula densa ---- */ body.aihd-fam-magazine{--aihd-r:6px;--aihd-sh:0 8px 26px -16px rgb(20 30 50 / .2);--aihd-k:.9;--aihd-fam-kick:block} body.aihd-fam-magazine .aihd-home-wrap :is(.aihd-h1,.aihd-title){font-weight:800;letter-spacing:-.025em;line-height:1.02} body.aihd-fam-magazine .aihd-home-wrap .aihd-grid{gap:calc(var(--aihd-k)*18px)} body.aihd-fam-magazine .aihd-home-wrap .aihd-head{max-width:52rem} /* ---- Kicker editorial (eyebrow) sobre los encabezados, en familias que lo piden ---- */ body:is(.aihd-fam-swiss,.aihd-fam-magazine) .aihd-home-wrap .aihd-head::before{ content:"";display:var(--aihd-fam-kick,none);width:2.4rem;height:3px;background:var(--aihd-a);margin:0 0 .9rem;border-radius:2px} /* =========================== INTENSIDAD ============================= */ /* Escala cuánta decoración/relieve se permite, encima de la familia. */ body.aihd-int-sutil{--aihd-fam-deco:0} body.aihd-int-equilibrada{--aihd-fam-deco:.5} body.aihd-int-expresiva{--aihd-fam-deco:1} body.aihd-int-audaz{--aihd-fam-deco:1} /* «sutil» apaga sombras y relieve aunque la familia los traiga: menos es más. */ body.aihd-int-sutil .aihd-home-wrap :is(.aihd-card,.aihd-tcard,.aihd-feature,.aihd-search){box-shadow:none} /* Decoración de rejilla sutil para tech/swiss, solo con intensidad alta. Es estática (un degradado repetido), sin coste de JS ni de scroll. */ body:is(.aihd-fam-tech,.aihd-fam-swiss):is(.aihd-int-expresiva,.aihd-int-audaz) .aihd-home-wrap .aihd-sec--hero::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:calc(.14*var(--aihd-fam-deco)); background-image:linear-gradient(var(--aihd-bd) 1px,transparent 1px),linear-gradient(90deg,var(--aihd-bd) 1px,transparent 1px); background-size:44px 44px;-webkit-mask-image:radial-gradient(circle at 50% 30%,#000,transparent 75%);mask-image:radial-gradient(circle at 50% 30%,#000,transparent 75%)} /* Elevación en hover un punto más viva en intensidades altas (respeta reduce). */ @media (prefers-reduced-motion:no-preference){ body:is(.aihd-int-expresiva,.aihd-int-audaz) .aihd-home-wrap .aihd-card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s} body.aihd-int-audaz.aihd-hv-elevar .aihd-home-wrap .aihd-card:hover{transform:translateY(-6px)} } /* ========================= MÓVIL: simplificar ====================== */ /* En pantallas pequeñas se calma lo pesado de cada familia para no romper la composición ni el rendimiento. */ @media (max-width:640px){ body.aihd-fam-brutalist{--aihd-sh:4px 4px 0 0 var(--aihd-tx)} body:is(.aihd-fam-editorial,.aihd-fam-minimal,.aihd-fam-luxury,.aihd-fam-magazine){--aihd-k:1.02} body:is(.aihd-fam-tech,.aihd-fam-swiss) .aihd-home-wrap .aihd-sec--hero::before{display:none} } /* Quien pide menos movimiento no recibe transiciones añadidas por intensidad. */ @media (prefers-reduced-motion:reduce){ body .aihd-home-wrap .aihd-card{transition:none} } /* ===================== fin ADN visual (2.13) ======================= */ /* ===================================================================== ART DIRECTION ENGINE — capa de composición (2.14) --------------------------------------------------------------------- La composición era la dimensión que faltaba: aquí se re-compone el MISMO DOM (.aihd-grid/.aihd-card/.aihd-sec) en layouts distintos con CSS Grid/flow, sin tocar el HTML por sección. El orden semántico se conserva -> accesibilidad y retrocompatibilidad intactas. «base» (o ausencia) no aplica nada. Todo es count-agnostic (sirve para 2 o 30 tarjetas), colapsa en móvil y respeta prefers-reduced-motion. Los colores/legibilidad los siguen imponiendo Contraste/Validador. ===================================================================== */ /* ---------------- COMPOSICIÓN (filosofía de layout) ---------------- */ /* EDITORIAL: columna estrecha, encabezados a la izquierda, pocas columnas anchas. La Home se lee como un artículo. */ body.aihd-comp-editorial .aihd-home-wrap .aihd-in{max-width:920px} body.aihd-comp-editorial .aihd-home-wrap .aihd-head{max-width:none;text-align:left} body.aihd-comp-editorial .aihd-home-wrap .aihd-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:calc(var(--aihd-k)*28px)} /* MODULAR: rejilla estricta y apretada, todo del mismo tamaño. */ body.aihd-comp-modular .aihd-home-wrap .aihd-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:calc(var(--aihd-k)*14px)} body.aihd-comp-modular .aihd-home-wrap .aihd-card{border-radius:calc(var(--aihd-r)*.5)} /* BENTO: cuadrícula densa con celdas de distinto tamaño. Los spans usan nth-child, así que funcionan con cualquier número de tarjetas; el flujo denso rellena los huecos. */ body.aihd-comp-bento .aihd-home-wrap .aihd-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));grid-auto-flow:dense;gap:calc(var(--aihd-k)*16px)} body.aihd-comp-bento .aihd-home-wrap .aihd-grid > :nth-child(6n+1){grid-column:span 2} body.aihd-comp-bento .aihd-home-wrap .aihd-grid > :nth-child(6n+1) .aihd-media{aspect-ratio:16/9} body.aihd-comp-bento .aihd-home-wrap .aihd-grid > :nth-child(8n+4){grid-row:span 2} /* RAIL: carrusel horizontal con scroll-snap accesible (los enlaces internos reciben foco y arrastran el scroll). */ body.aihd-comp-rail .aihd-home-wrap .aihd-grid{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(240px,72vw);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:10px;scrollbar-width:thin} @media (min-width:700px){body.aihd-comp-rail .aihd-home-wrap .aihd-grid{grid-auto-columns:minmax(260px,320px)}} body.aihd-comp-rail .aihd-home-wrap .aihd-grid > *{scroll-snap-align:start} /* ASIMÉTRICA: rejilla rota. Secciones pares se ensanchan al borde, impares se estrechan y se alinean a la izquierda. */ body.aihd-comp-asimetrica .aihd-home-wrap .aihd-sec:nth-of-type(odd) .aihd-in{max-width:960px;margin-left:clamp(0px,6vw,140px)} body.aihd-comp-asimetrica .aihd-home-wrap .aihd-sec:nth-of-type(even) .aihd-in{max-width:1320px} body.aihd-comp-asimetrica .aihd-home-wrap .aihd-grid > :nth-child(5n+1){grid-column:span 2} /* ESCAPARATE (spotlight): la primera pieza de cada rejilla manda. */ body.aihd-comp-escaparate .aihd-home-wrap .aihd-grid{grid-auto-flow:dense;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))} body.aihd-comp-escaparate .aihd-home-wrap .aihd-grid > :first-child{grid-column:span 2;grid-row:span 2} body.aihd-comp-escaparate .aihd-home-wrap .aihd-grid > :first-child .aihd-media{height:100%;min-height:260px} /* REVISTA (magazine): muy densa, primera pieza grande, títulos apretados. */ body.aihd-comp-revista .aihd-home-wrap .aihd-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));grid-auto-flow:dense;gap:calc(var(--aihd-k)*14px)} body.aihd-comp-revista .aihd-home-wrap .aihd-grid > :nth-child(7n+1){grid-column:span 2;grid-row:span 2} /* APILADA (arquitectónica): una columna ancha, muchísimo aire, escala grande. */ body.aihd-comp-apilada .aihd-home-wrap .aihd-in{max-width:1040px} body.aihd-comp-apilada .aihd-home-wrap .aihd-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:calc(var(--aihd-k)*34px)} body.aihd-comp-apilada .aihd-home-wrap .aihd-title{font-size:clamp(2rem,4.6vw,3.4rem)} /* Móvil: cualquier composición pesada colapsa a pila legible. */ @media (max-width:640px){ body:is(.aihd-comp-bento,.aihd-comp-escaparate,.aihd-comp-revista,.aihd-comp-modular,.aihd-comp-editorial,.aihd-comp-apilada) .aihd-home-wrap .aihd-grid{grid-template-columns:1fr!important;grid-auto-flow:row!important} body:is(.aihd-comp-bento,.aihd-comp-escaparate,.aihd-comp-revista) .aihd-home-wrap .aihd-grid > *{grid-column:auto!important;grid-row:auto!important} body.aihd-comp-asimetrica .aihd-home-wrap .aihd-sec .aihd-in{margin-left:auto!important;max-width:100%!important} } /* ---------------- SUPERFICIE (familia de bloques) ----------------- */ body.aihd-surf-papel .aihd-home-wrap :is(.aihd-card,.aihd-tcard,.aihd-feature){background:var(--aihd-bg);box-shadow:none;border-color:var(--aihd-bd)} body.aihd-surf-contorno .aihd-home-wrap :is(.aihd-card,.aihd-tcard,.aihd-feature){background:transparent;box-shadow:none;border:1.5px solid var(--aihd-bd)} body.aihd-surf-vidrio .aihd-home-wrap :is(.aihd-card,.aihd-tcard){background:color-mix(in oklab,var(--aihd-sf) 62%,transparent);border-color:color-mix(in oklab,var(--aihd-tx) 12%,transparent)} @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ body.aihd-surf-vidrio .aihd-home-wrap :is(.aihd-card,.aihd-tcard){-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} } body.aihd-surf-tinta .aihd-home-wrap :is(.aihd-card,.aihd-tcard){box-shadow:none;border:0;border-left:4px solid var(--aihd-a);border-radius:0 var(--aihd-r) var(--aihd-r) 0;background:var(--aihd-sf)} body.aihd-surf-flotante .aihd-home-wrap :is(.aihd-card,.aihd-tcard,.aihd-feature){border-color:transparent;box-shadow:0 22px 50px -24px rgb(20 30 50 / .42)} body.aihd-surf-ninguna .aihd-home-wrap :is(.aihd-card,.aihd-tcard,.aihd-feature){background:transparent;border:0;box-shadow:none;border-radius:0} body.aihd-surf-ninguna .aihd-home-wrap .aihd-card-b{padding-left:0;padding-right:0} /* ---------------- PROFUNDIDAD (capas / relieve) ------------------- */ body.aihd-depth-plana .aihd-home-wrap :is(.aihd-card,.aihd-tcard,.aihd-feature,.aihd-search){box-shadow:none} body.aihd-depth-elevada .aihd-home-wrap :is(.aihd-card,.aihd-tcard){box-shadow:0 18px 44px -22px rgb(20 30 50 / .38)} @media (prefers-reduced-motion:no-preference){ body.aihd-depth-elevada .aihd-home-wrap .aihd-card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s} body.aihd-depth-elevada .aihd-home-wrap .aihd-card:hover{transform:translateY(-5px)} } /* «capas»: un plano decorativo detrás del hero para dar profundidad real. */ body.aihd-depth-capas .aihd-home-wrap .aihd-sec--hero{isolation:isolate} body.aihd-depth-capas .aihd-home-wrap .aihd-sec--hero::after{content:"";position:absolute;right:-6%;top:-10%;width:46%;height:120%;z-index:-1; background:radial-gradient(closest-side,color-mix(in oklab,var(--aihd-a) 22%,transparent),transparent);pointer-events:none} /* ---------------- RITMO (cadencia vertical) ----------------------- */ body.aihd-rit-denso .aihd-home-wrap .aihd-sec{padding-top:calc(var(--aihd-k)*clamp(34px,5vw,60px));padding-bottom:calc(var(--aihd-k)*clamp(34px,5vw,60px))} body.aihd-rit-espacioso .aihd-home-wrap .aihd-sec{padding-top:calc(var(--aihd-k)*clamp(80px,11vw,150px));padding-bottom:calc(var(--aihd-k)*clamp(80px,11vw,150px))} body.aihd-rit-editorial .aihd-home-wrap .aihd-sec{padding-top:calc(var(--aihd-k)*clamp(64px,9vw,120px));padding-bottom:calc(var(--aihd-k)*clamp(64px,9vw,120px))} /* alterno: secciones pares apretadas, impares amplias. */ body.aihd-rit-alterno .aihd-home-wrap .aihd-sec:nth-of-type(even){padding-top:calc(var(--aihd-k)*44px);padding-bottom:calc(var(--aihd-k)*44px)} body.aihd-rit-alterno .aihd-home-wrap .aihd-sec:nth-of-type(odd){padding-top:calc(var(--aihd-k)*104px);padding-bottom:calc(var(--aihd-k)*104px)} /* crescendo: el aire crece al bajar. */ body.aihd-rit-crescendo .aihd-home-wrap .aihd-sec:nth-of-type(1){padding-block:calc(var(--aihd-k)*52px)} body.aihd-rit-crescendo .aihd-home-wrap .aihd-sec:nth-of-type(2){padding-block:calc(var(--aihd-k)*68px)} body.aihd-rit-crescendo .aihd-home-wrap .aihd-sec:nth-of-type(n+3){padding-block:calc(var(--aihd-k)*92px)} /* cinematografico: mucho aire y más bandas alternas de fondo. */ body.aihd-rit-cinematografico .aihd-home-wrap .aihd-sec{padding-block:calc(var(--aihd-k)*clamp(76px,10vw,140px))} body.aihd-rit-cinematografico .aihd-home-wrap .aihd-sec.aihd-alt{background:color-mix(in oklab,var(--aihd-sf) 82%,var(--aihd-tx))} @media (max-width:640px){ body:is(.aihd-rit-espacioso,.aihd-rit-cinematografico,.aihd-rit-editorial) .aihd-home-wrap .aihd-sec, body.aihd-rit-alterno .aihd-home-wrap .aihd-sec{padding-block:calc(var(--aihd-k)*46px)} } /* ===================== fin Art Direction Engine (2.14) ============ */ /* ===================================================================== VISUAL COMPOSITION ENGINE — DOM por arquetipo (2.15) --------------------------------------------------------------------- Estas clases dan forma al DOM que emite AIHD_Compositor cuando el árbol de composición asigna a una sección un arquetipo distinto de la rejilla. El contenido (tarjetas/tiles reales) es el mismo; lo que cambia es la ESTRUCTURA. Sin arquetipo -> se usa .aihd-grid de siempre (paridad). Todo colapsa a pila legible en móvil y respeta reduced-motion. ===================================================================== */ /* RAIL: carrusel horizontal accesible (los enlaces internos reciben foco y arrastran el scroll). */ .aihd-home-wrap .aihd-arch--rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,74vw);gap:calc(var(--aihd-k,1)*20px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:10px;scrollbar-width:thin} @media (min-width:700px){.aihd-home-wrap .aihd-arch--rail{grid-auto-columns:minmax(250px,300px)}} .aihd-home-wrap .aihd-arch--rail > *{scroll-snap-align:start} /* ESCAPARATE (spotlight): una pieza domina y el resto la acompaña. */ .aihd-home-wrap .aihd-arch--spot{display:grid;gap:calc(var(--aihd-k,1)*22px)} @media (min-width:820px){.aihd-home-wrap .aihd-arch--spot{grid-template-columns:1.4fr 1fr;align-items:start}} .aihd-home-wrap .aihd-arch-spot-main{min-height:100%} .aihd-home-wrap .aihd-arch-spot-main > *{height:100%} .aihd-home-wrap .aihd-arch-spot-main :is(.aihd-tcard,.aihd-card){min-height:220px;font-size:1.08em} .aihd-home-wrap .aihd-arch-spot-rest{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:calc(var(--aihd-k,1)*14px)} /* ÍNDICE: lista editorial numerada. */ .aihd-home-wrap .aihd-arch--index{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0} .aihd-home-wrap .aihd-arch-idx-row{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,3vw,32px);align-items:center;padding:calc(var(--aihd-k,1)*18px) 0;border-top:1px solid var(--aihd-bd)} .aihd-home-wrap .aihd-arch-idx-row:last-child{border-bottom:1px solid var(--aihd-bd)} .aihd-home-wrap .aihd-arch-idx-n{font:800 clamp(1.4rem,4vw,2.6rem)/1 var(--aihd-fh);color:var(--aihd-a);opacity:.85;font-variant-numeric:tabular-nums} /* Dentro del índice las tarjetas pierden su caja: mandan la tipografía y el número. */ .aihd-home-wrap .aihd-arch--index :is(.aihd-tcard,.aihd-card){background:transparent;border:0;box-shadow:none;border-radius:0;padding:0;flex-direction:row;align-items:baseline;gap:.6em} .aihd-home-wrap .aihd-arch--index :is(.aihd-tcard,.aihd-card) small{color:var(--aihd-mt)} /* BENTO: celdas de distinto tamaño; los spans usan nth-child (cualquier número de items) y el flujo denso rellena huecos. */ .aihd-home-wrap .aihd-arch--bento{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));grid-auto-flow:dense;gap:calc(var(--aihd-k,1)*16px)} .aihd-home-wrap .aihd-arch--bento > :nth-child(6n+1){grid-column:span 2;grid-row:span 2} .aihd-home-wrap .aihd-arch--bento > :nth-child(4n+3){grid-column:span 2} /* EDITORIAL: flujo a columnas, tipográfico, sin peso de tarjeta. */ .aihd-home-wrap .aihd-arch--edcol{columns:2 260px;column-gap:clamp(24px,5vw,64px)} .aihd-home-wrap .aihd-arch--edcol > *{break-inside:avoid;margin:0 0 calc(var(--aihd-k,1)*16px)} .aihd-home-wrap .aihd-arch--edcol :is(.aihd-tcard,.aihd-card){background:transparent;border:0;border-top:2px solid var(--aihd-tx);box-shadow:none;border-radius:0;padding:.7em 0 0} /* Móvil: cualquier arquetipo pesado colapsa a una columna legible. */ @media (max-width:640px){ .aihd-home-wrap .aihd-arch--bento{grid-template-columns:1fr} .aihd-home-wrap .aihd-arch--bento > *{grid-column:auto!important;grid-row:auto!important} .aihd-home-wrap .aihd-arch--spot{grid-template-columns:1fr} .aihd-home-wrap .aihd-arch--edcol{columns:1} } /* ===================== fin Composition Engine (2.15) ============== */ /* ===================================================================== ARQUITECTURAS DE HERO — presentación del DOM (2.16) --------------------------------------------------------------------- El árbol del hero lo decide AIHD_Render::hero_arch(): cada arquitectura emite un DOM distinto (columnas, superposición, media primero, filete…). Aquí solo se PRESENTA ese árbol. Móvil: todo colapsa a pila legible. ===================================================================== */ .aihd-hero-a{position:relative;z-index:1} .aihd-hero-a .aihd-hero-c{display:flex;flex-direction:column;gap:clamp(14px,2vw,22px)} /* SPLIT / MEDIA / EDITORIAL: dos zonas (contenido y media). */ .aihd-hero-a--split,.aihd-hero-a--media{display:grid;gap:clamp(24px,5vw,56px);align-items:center} @media (min-width:860px){ .aihd-hero-a--split{grid-template-columns:1.05fr .95fr} .aihd-hero-a--media{grid-template-columns:.95fr 1.05fr} } .aihd-hero-a--editorial{display:grid;gap:clamp(22px,4vw,44px)} @media (min-width:860px){.aihd-hero-a--editorial{grid-template-columns:1.15fr .85fr;align-items:end}} .aihd-hero-rule{border:0;border-top:2px solid var(--aihd-tx);width:min(120px,40%);margin:.2em 0 .1em;opacity:.5} /* La pila de media del hero (tarjetas flotantes reales). */ .aihd-hero-stack{display:grid;gap:14px;grid-template-columns:1fr 1fr} .aihd-hero-stack .aihd-float{position:static;width:auto;display:block;background:var(--aihd-bg);border:1px solid var(--aihd-bd);border-radius:var(--aihd-r);overflow:hidden;box-shadow:var(--aihd-sh);color:var(--aihd-tx)} .aihd-hero-stack .aihd-float:first-child{grid-column:1 / -1} .aihd-hero-stack .aihd-float strong{display:block;padding:.6em .8em;font:600 .98rem var(--aihd-fh)} /* OVERLAY / INMERSIVO: media de fondo + contenido superpuesto. */ .aihd-hero-a--overlay{position:relative;min-height:clamp(360px,52vh,560px);display:grid;isolation:isolate} .aihd-hero-a--overlay .aihd-hero-bgmedia{position:absolute;inset:0;z-index:-1;overflow:hidden} .aihd-hero-a--overlay .aihd-hero-bgmedia img,.aihd-hero-a--overlay .aihd-hero-bgmedia .aihd-media{width:100%;height:100%;object-fit:cover} .aihd-hero-a--overlay .aihd-hero-bgmedia::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,color-mix(in oklab,var(--aihd-tx) 78%,transparent),color-mix(in oklab,var(--aihd-tx) 20%,transparent))} .aihd-hero-a--overlay .aihd-hero-over{align-self:end;padding:clamp(20px,5vw,54px);position:relative;z-index:1} .aihd-hero-a--overlay .aihd-hero-over :is(.aihd-h1,.aihd-lead){color:#fff} /* SEARCH_FIRST / ESCAPARATE: herramienta como foco + fila secundaria. */ .aihd-hero-a--searchfirst .aihd-hero-tool{margin:.3em auto 0;max-width:640px;width:100%} .aihd-hero-a--searchfirst .aihd-hero-secondary{margin-top:.4em} /* STATEMENT: titular sobredimensionado. */ .aihd-h1--xl{font-size:clamp(2.8rem,8vw,6rem);line-height:.98;letter-spacing:-.04em} .aihd-actions--min .aihd-btn{background:transparent;color:var(--aihd-tx);border:0;border-bottom:2px solid var(--aihd-a);border-radius:0;padding-left:0;padding-right:0} /* MINIMAL: alineado a la izquierda, compacto (ya cubierto por .aihd-hero-c). */ .aihd-hero-a--minimal .aihd-hero-c{max-width:44ch} @media (max-width:640px){ .aihd-hero-a--split,.aihd-hero-a--media,.aihd-hero-a--editorial{grid-template-columns:1fr} .aihd-hero-a--media{display:flex;flex-direction:column-reverse} .aihd-hero-stack{grid-template-columns:1fr 1fr} .aihd-hero-a--overlay{min-height:auto} .aihd-hero-a--overlay .aihd-hero-bgmedia{position:relative;aspect-ratio:16/10} .aihd-hero-a--overlay{display:flex;flex-direction:column} .aihd-hero-a--overlay .aihd-hero-over :is(.aihd-h1,.aihd-lead){color:var(--aihd-tx)} } /* ===================== fin arquitecturas de hero (2.16) ========== */ /* ===================================================================== ARQUITECTURAS DE SECCIÓN — cifras / FAQ / CTA / cómo_funciona (2.17) --------------------------------------------------------------------- El DOM lo deciden los métodos s_* (distinto árbol por arquitectura). Aquí solo se presenta. Datos idénticos; estructura distinta. ===================================================================== */ /* ---- CIFRAS ---- */ .aihd-stats-feat{display:grid;gap:clamp(20px,4vw,40px);align-items:center} @media (min-width:800px){.aihd-stats-feat{grid-template-columns:1fr 1.2fr}} .aihd-stats-feat .aihd-metric-lead .aihd-num{font-size:clamp(3rem,9vw,6rem);line-height:1} .aihd-stats-feat .aihd-metric-rest{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:18px} .aihd-stats-ed{display:grid;gap:0;max-width:640px} .aihd-stats-ed .aihd-stat{display:grid;grid-template-columns:auto 1fr;gap:1em;align-items:baseline;padding:clamp(12px,2vw,20px) 0;border-top:1px solid var(--aihd-bd)} .aihd-stats-ed .aihd-stat:last-child{border-bottom:1px solid var(--aihd-bd)} .aihd-stats-ed .aihd-num{font-size:clamp(1.8rem,4vw,2.8rem)} .aihd-stats-stack{display:flex;flex-direction:column;gap:clamp(18px,3vw,34px);text-align:center} .aihd-stats-stack .aihd-num{font-size:clamp(2.6rem,7vw,5rem);line-height:1} .aihd-stats-cmp{display:grid;gap:clamp(20px,4vw,44px)} @media (min-width:760px){.aihd-stats-cmp{grid-template-columns:1fr 1fr}.aihd-stats-cmp-c{border-left:2px solid var(--aihd-bd);padding-left:clamp(16px,3vw,32px)}.aihd-stats-cmp-c:first-child{border-left:0;padding-left:0}} .aihd-stats-cmp-c{display:grid;gap:16px} /* ---- FAQ ---- */ .aihd-faq--index{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .aihd-faq-idx-row{display:grid;grid-template-columns:auto 1fr;gap:clamp(12px,3vw,26px);align-items:start;padding:calc(var(--aihd-k,1)*14px) 0;border-top:1px solid var(--aihd-bd)} .aihd-faq-idx-row:last-child{border-bottom:1px solid var(--aihd-bd)} .aihd-faq-idx-n{font:800 clamp(1.2rem,3.4vw,2rem)/1 var(--aihd-fh);color:var(--aihd-a);font-variant-numeric:tabular-nums} .aihd-faq-idx-b>details{border:0;padding:0} .aihd-faq--feat{display:grid;gap:clamp(18px,3vw,34px)} @media (min-width:820px){.aihd-faq--feat{grid-template-columns:1.1fr .9fr;align-items:start}} .aihd-faq--feat .aihd-faq-lead>details{border:1px solid var(--aihd-bd);border-radius:var(--aihd-r);padding:1em 1.2em;background:var(--aihd-sf)} .aihd-faq--feat .aihd-faq-lead summary{font-size:1.12em} .aihd-faq--2col{display:grid;gap:clamp(16px,3vw,32px)} @media (min-width:820px){.aihd-faq--2col{grid-template-columns:1fr 1fr;align-items:start}} .aihd-faq--split{display:grid;gap:0;margin:0} @media (min-width:820px){.aihd-faq--split{grid-template-columns:1fr 1.4fr;column-gap:clamp(20px,4vw,48px)}} .aihd-faq--split dt{font:700 1.05rem/1.4 var(--aihd-fh);color:var(--aihd-tx);padding:clamp(12px,2vw,18px) 0 .2em;border-top:1px solid var(--aihd-bd)} .aihd-faq--split dd{margin:0 0 .2em;color:var(--aihd-mt);padding-bottom:clamp(12px,2vw,18px)} @media (min-width:820px){.aihd-faq--split dd{border-top:1px solid var(--aihd-bd);padding-top:clamp(12px,2vw,18px)}} /* ---- CTA ---- */ .aihd-cta--split{display:grid;gap:clamp(18px,3vw,40px);align-items:center;text-align:left} @media (min-width:760px){.aihd-cta--split{grid-template-columns:1.4fr auto}} .aihd-cta--statement{text-align:center;display:flex;flex-direction:column;gap:.6em;align-items:center} .aihd-title--xl{font-size:clamp(2.2rem,6vw,4.4rem);line-height:1;letter-spacing:-.03em} .aihd-cta--centered{text-align:center;display:flex;flex-direction:column;gap:.5em;align-items:center} .aihd-cta--panel{background:transparent;padding:0} .aihd-cta--panel .aihd-cta-panel{display:grid;gap:20px;align-items:center;background:var(--aihd-sf);border:1px solid var(--aihd-bd);border-radius:calc(var(--aihd-r) + 6px);box-shadow:var(--aihd-sh);padding:clamp(24px,5vw,52px)} @media (min-width:760px){.aihd-cta--panel .aihd-cta-panel{grid-template-columns:1.4fr auto}} /* ---- CÓMO FUNCIONA ---- */ .aihd-steps-tl{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);gap:0;overflow-x:auto;counter-reset:none} .aihd-tl-node{position:relative;padding:0 clamp(14px,2vw,24px);scroll-snap-align:start} .aihd-tl-node::before{content:"";position:absolute;top:18px;left:0;right:0;height:2px;background:var(--aihd-bd);z-index:0} .aihd-tl-node .aihd-step-n{position:relative;z-index:1;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--aihd-p);color:var(--aihd-on-p);font-weight:800} .aihd-tl-node h3{margin-top:.6em} .aihd-steps-alt{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(16px,3vw,30px)} @media (min-width:760px){ .aihd-steps-alt .aihd-step--l{margin-right:auto;width:60%} .aihd-steps-alt .aihd-step--r{margin-left:auto;width:60%;text-align:right} } .aihd-steps-conn{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,22px);align-items:stretch} .aihd-conn-node{flex:1 1 180px;position:relative;padding:clamp(16px,2vw,22px);border:1px solid var(--aihd-bd);border-radius:var(--aihd-r);background:var(--aihd-sf)} .aihd-conn-node:not(:last-child)::after{content:"→";position:absolute;right:-.85em;top:50%;transform:translateY(-50%);color:var(--aihd-a);font-weight:700;z-index:1} .aihd-steps-lg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(20px,4vw,44px)} .aihd-steps-lg .aihd-step--lg{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,34px);align-items:center;border-top:1px solid var(--aihd-bd);padding-top:clamp(16px,3vw,30px)} .aihd-steps-lg .aihd-step--lg .aihd-step-n{font:800 clamp(2.4rem,7vw,4.6rem)/1 var(--aihd-fh);color:var(--aihd-a);opacity:.9} @media (max-width:640px){ .aihd-cta--split,.aihd-cta--panel .aihd-cta-panel{grid-template-columns:1fr;text-align:center} .aihd-faq--2col,.aihd-faq--feat,.aihd-stats-feat,.aihd-stats-cmp{grid-template-columns:1fr} .aihd-faq--split{grid-template-columns:1fr} .aihd-steps-conn .aihd-conn-node:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-.9em;transform:translateX(-50%)} .aihd-steps-alt .aihd-step--l,.aihd-steps-alt .aihd-step--r{width:100%;text-align:left;margin:0} } /* ===================== fin arquitecturas de sección (2.17) ======= */ /* ===================================================================== COMPOSICIÓN COMO DATOS — grupos, foco, peso, aire, transiciones (2.18) --------------------------------------------------------------------- El DOM lo decide AIHD_Render a partir de datos de la spec (wrappers de grupo, clases de foco, atributos data-peso/-trans/-aire). Aquí solo se presentan. Móvil colapsa con seguridad. ===================================================================== */ /* GRUPOS: contenedor real de secciones afines. */ .aihd-home-wrap .aihd-group{position:relative} .aihd-home-wrap .aihd-group--confianza{background:color-mix(in oklab,var(--aihd-sf) 70%,var(--aihd-bg))} .aihd-home-wrap .aihd-group--confianza > .aihd-sec.aihd-alt{background:transparent} /* PESO VISUAL (data-peso): espacio físico real del contenido. */ .aihd-home-wrap .aihd-sec[data-peso="full"] > .aihd-in{max-width:none;padding-inline:0} .aihd-home-wrap .aihd-sec[data-peso="wide"] > .aihd-in{max-width:1360px} .aihd-home-wrap .aihd-sec[data-peso="narrow"] > .aihd-in{max-width:820px} /* contained = por defecto */ /* FOCO: la sección primaria manda visualmente (más aire y titular mayor). */ .aihd-home-wrap .aihd-sec--foco{padding-block:calc(var(--aihd-k,1)*clamp(72px,10vw,132px))} .aihd-home-wrap .aihd-sec--foco .aihd-title{font-size:clamp(2rem,4.4vw,3.2rem)} /* NEGATIVE SPACE (data-aire): densidad global de la página. */ .aihd-home-wrap[data-aire="compact"] .aihd-sec{padding-block:calc(var(--aihd-k,1)*46px)} .aihd-home-wrap[data-aire="spacious"] .aihd-sec{padding-block:calc(var(--aihd-k,1)*clamp(76px,11vw,140px))} .aihd-home-wrap[data-aire="dramatic"] .aihd-sec{padding-block:calc(var(--aihd-k,1)*clamp(96px,14vw,180px))} /* TRANSICIONES entre secciones (data-trans): relación estructural, no margin. */ .aihd-home-wrap .aihd-sec[data-trans="hard_cut"]{border-top:1px solid var(--aihd-bd)} .aihd-home-wrap .aihd-sec[data-trans="framed"] > .aihd-in{border:1px solid var(--aihd-bd);border-radius:calc(var(--aihd-r) + 4px);padding-block:clamp(28px,4vw,52px)} .aihd-home-wrap .aihd-sec[data-trans="overlap"]{margin-top:clamp(-64px,-6vw,-28px);z-index:1} .aihd-home-wrap .aihd-sec[data-trans="full_bleed"].aihd-alt{margin-inline:0} /* ---- Markup interno nuevo de los arquetipos ---- */ /* Colecciones */ .aihd-home-wrap .aihd-arch--rail .aihd-rail-i{scroll-snap-align:start} .aihd-home-wrap .aihd-arch--bento{display:grid;gap:calc(var(--aihd-k,1)*16px)} @media (min-width:760px){.aihd-home-wrap .aihd-arch--bento{grid-template-columns:1.3fr 1fr}} .aihd-home-wrap .aihd-bento-rest{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr));gap:calc(var(--aihd-k,1)*14px)} .aihd-home-wrap .aihd-arch--edcol{columns:2 260px;column-gap:clamp(24px,5vw,56px);list-style:none;padding:0;margin:0} .aihd-home-wrap .aihd-arch--edcol .aihd-ed-i{break-inside:avoid;margin:0 0 calc(var(--aihd-k,1)*16px)} .aihd-home-wrap .aihd-arch--edcol .aihd-ed-i :is(.aihd-tcard,.aihd-card){background:transparent;border:0;border-top:2px solid var(--aihd-tx);box-shadow:none;border-radius:0;padding:.7em 0 0} /* Cifras */ .aihd-home-wrap .aihd-stats-stack .aihd-stat-st{display:flex;flex-direction:column;gap:.15em;text-align:center} .aihd-home-wrap .aihd-stats-stack .aihd-stat-st .aihd-stat-l{order:0} .aihd-home-wrap .aihd-stats-stack .aihd-stat-st .aihd-num{order:1;font-size:clamp(2.4rem,7vw,4.6rem);line-height:1} .aihd-home-wrap dl.aihd-stats-ed{display:grid;gap:0;max-width:680px;margin:0} .aihd-home-wrap dl.aihd-stats-ed .aihd-stat-ed{display:grid;grid-template-columns:auto 1fr;gap:1em;align-items:baseline;padding:clamp(12px,2vw,20px) 0;border-top:1px solid var(--aihd-bd)} .aihd-home-wrap dl.aihd-stats-ed .aihd-stat-ed:last-child{border-bottom:1px solid var(--aihd-bd)} .aihd-home-wrap dl.aihd-stats-ed dt.aihd-num{font-size:clamp(1.8rem,4vw,2.8rem);margin:0} .aihd-home-wrap dl.aihd-stats-ed dd{margin:0;color:var(--aihd-mt)} /* Cómo funciona: markup interno propio por arquetipo */ .aihd-home-wrap .aihd-tl-node .aihd-tl-dot{position:relative;z-index:1;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--aihd-p);color:var(--aihd-on-p);font-weight:800} .aihd-home-wrap .aihd-tl-node .aihd-tl-c{margin-top:.6em} .aihd-home-wrap .aihd-step--alt{display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,2vw,26px);align-items:start} .aihd-home-wrap .aihd-step--alt .aihd-alt-n{font:800 clamp(1.6rem,4vw,2.6rem)/1 var(--aihd-fh);color:var(--aihd-a)} .aihd-home-wrap .aihd-conn-node .aihd-conn-h{display:flex;align-items:center;gap:.5em;margin-bottom:.3em} .aihd-home-wrap .aihd-conn-node .aihd-conn-h .aihd-step-n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--aihd-p);color:var(--aihd-on-p);font-weight:800;font-size:.9rem} .aihd-home-wrap .aihd-step--lg{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,34px);align-items:center;border-top:1px solid var(--aihd-bd);padding-top:clamp(16px,3vw,30px)} .aihd-home-wrap .aihd-step--lg .aihd-lg-n{font:800 clamp(2.6rem,8vw,5rem)/1 var(--aihd-fh);color:var(--aihd-a);opacity:.9} @media (max-width:640px){ .aihd-home-wrap .aihd-arch--bento{grid-template-columns:1fr} .aihd-home-wrap .aihd-arch--edcol{columns:1} .aihd-home-wrap .aihd-sec[data-trans="overlap"]{margin-top:0} .aihd-home-wrap .aihd-sec[data-peso="full"] > .aihd-in{padding-inline:clamp(18px,4vw,36px)} } /* ===================== fin composición como datos (2.18) ========= */ /* ===================================================================== ESPACIADO — jerarquía tipográfica (2.19) --------------------------------------------------------------------- EL FALLO QUE ARREGLA. El aire entre textos estaba repartido en tres sistemas que no se hablaban: el ritmo vertical del contenido envuelto, unos cuantos px fijos en los contenedores de la portada, y el reset `margin:0` de .aihd-home-wrap, que delega todo el espacio en los gap. Donde los tres se tocaban quedaban huecos de cero: - .aihd-doc > * + * solo alcanza a los HIJOS DIRECTOS, mientras que p y las listas llevan margin-block:0. Un párrafo dentro de un grupo, una columna o un bloque del editor se quedaba pegado al anterior, sin nada que lo separase. - .aihd-seo repartía 8 px entre el título de sección y su texto, y .aihd-faq 10 px entre preguntas: cifras fijas que no se enteran de la densidad ni de la escala tipográfica del diseño. - Los titulares usan --aihd-lh-titular, que baja a 1,04. Un titular de una línea a ese interlineado es exactamente lo que se busca; uno de tres líneas junta los trazos altos de una línea con los bajos de la de arriba, y si además el margen superior se ha quedado en cero, la primera línea del título aterriza sobre el último renglón del párrafo anterior. CÓMO SE ARREGLA. Con una escala de cuatro pasos derivada del ritmo que ya calcula AIHD_Escala, no con un margen grande para todo: sp-0 dentro del mismo grupo (título -> subtítulo, texto -> acción) sp-1 entre elementos relacionados (pregunta -> pregunta) sp-2 entre bloques (párrafo -> párrafo, lista -> párrafo) sp-3 entre bloques distintos (párrafo -> h3) sp-4 entre secciones (párrafo -> h2) Y con dos cautelas: - Los encabezados combinan el paso con un SUELO EN em: max(paso, 1,45em). El em escala con el propio encabezado, así que un h2 grande sigue recibiendo más aire que un h3 pequeño —la jerarquía no se aplana— y el suelo garantiza que ninguna densidad, ningún tema y ninguna arquitectura puedan dejarlo pegado al bloque anterior. - La escala se MODULA por el eje de ritmo del motor visual. Un diseño «denso» y uno «cinematográfico» siguen respirando distinto: lo que se unifica es la proporción entre los pasos, no su tamaño. ===================================================================== */ /* --- La escala. Se declara en body y no en :root a propósito: las clases del eje de ritmo viven en body, y un token derivado sustituye el valor que gane la cascada EN SU PROPIO elemento. En :root no se enterarían. --- */ body{ --aihd-sp-k:1; --aihd-sp-vp:1; --aihd-sp-u:calc(var(--aihd-ritmo,1.5rem) * var(--aihd-sp-k) * var(--aihd-sp-vp)); --aihd-sp-0:calc(var(--aihd-sp-u) * .30); --aihd-sp-1:calc(var(--aihd-sp-u) * .58); --aihd-sp-2:var(--aihd-sp-u); --aihd-sp-3:calc(var(--aihd-sp-u) * 1.80); --aihd-sp-4:calc(var(--aihd-sp-u) * 2.90); --aihd-sp-5:calc(var(--aihd-sp-u) * 3.70)} /* Cada cadencia del motor visual conserva su carácter. */ body.aihd-rit-denso{--aihd-sp-k:.78} body.aihd-rit-alterno{--aihd-sp-k:.94} body.aihd-rit-crescendo{--aihd-sp-k:1.04} body.aihd-rit-editorial{--aihd-sp-k:1.08} body.aihd-rit-espacioso{--aihd-sp-k:1.2} body.aihd-rit-cinematografico{--aihd-sp-k:1.26} /* Responsive: la escala se comprime, no se apaga. Una sección corta no puede acabar ocupando media pantalla en un teléfono, y dos párrafos tampoco pueden quedarse pegados por ahorrar 4 px. */ @media (max-width:760px){body{--aihd-sp-vp:.88}} @media (max-width:420px){body{--aihd-sp-vp:.8}} /* --------------------------------------------------------------------- 1. CONTENIDO ENVUELTO (.aihd-doc) Aquí el plugin es dueño de todo el flujo —pone margin-block:0 en párrafos y listas—, así que puede repartir el espacio entero sin sumarse a nada del tema. --------------------------------------------------------------------- */ /* Encabezados: mucho aire arriba, poco abajo, para que se lean pegados a lo que titulan y separados de lo anterior. Sin :not(:first-child): un encabezado que abre un div, una sección o un grupo del editor sigue viniendo detrás de una tabla o de un párrafo para quien lee, y tiene que separarse de ellos igual. Las excepciones reales van justo debajo. */ body.aihd-on.aihd-doc-on .aihd-doc :is(h2,h3,h4,h5,h6){ margin-top:max(var(--aihd-sp-3), 1.3em); margin-bottom:max(var(--aihd-sp-0), .4em)} body.aihd-on.aihd-doc-on .aihd-doc h2{ margin-top:max(var(--aihd-sp-4), 1.45em); margin-bottom:max(var(--aihd-sp-1), .5em)} body.aihd-on.aihd-doc-on .aihd-doc :is(h4,h5,h6){ margin-top:max(var(--aihd-sp-2), 1.15em)} /* Las dos únicas excepciones. 1. El encabezado que abre el documento: encima no hay nada de lo que separarse. Cuenta también si abre el primer bloque, porque entonces sigue siendo lo primero que se lee. 2. El encabezado que abre una caja con fondo, borde o relleno propios: ahí el margen no separa de nada, se mete dentro de la caja y la descuadra. */ body.aihd-on.aihd-doc-on .aihd-doc > :is(h1,h2,h3,h4,h5,h6):first-child, body.aihd-on.aihd-doc-on .aihd-doc > :first-child > :is(h1,h2,h3,h4,h5,h6):first-child, body.aihd-on.aihd-doc-on .aihd-doc :is(.aihd-card,.aihd-tcard,.aihd-toc,.aihd-herr,.aihd-rel,.aihd-art-h, blockquote,figure,details,summary,td,th,li, [class*="card"],[class*="ficha"],[class*="tarjeta"]) :is(h1,h2,h3,h4,h5,h6):first-child{ margin-top:0} /* Un encabezado detrás de otro es un subtítulo, no un salto de sección: el h3 que abre el primer apartado de un h2 pertenece a ese h2 y se separa de él mucho menos que de un párrafo. */ body.aihd-on.aihd-doc-on .aihd-doc :is(h1,h2,h3,h4,h5,h6) + :is(h2,h3,h4,h5,h6), body.aihd-on :is(.the-content,.entry-content) :is(h1,h2,h3,h4,h5,h6) + :is(h2,h3,h4,h5,h6):not(.aihd-home-wrap *){ margin-top:max(var(--aihd-sp-1), .7em)} /* Flujo anidado: lo que no es hijo directo de .aihd-doc también separa. Se excluye lo que tiene su propio espaciado (celdas, pies de figura, resumen de un desplegable) y los componentes del propio plugin. */ body.aihd-on.aihd-doc-on .aihd-doc :is(p,ul,ol,dl,blockquote,figure,table,pre,details,hr,h1,h2,h3,h4,h5,h6) + :is(p,ul,ol,dl,blockquote,figure,table,pre,details):not( :where(td,th,figcaption,summary,.aihd-toc,.aihd-herr,.aihd-rel,.aihd-art-h,.aihd-barra,.aihd-card,.aihd-tcard) * ){ margin-top:var(--aihd-sp-2)} /* Detrás de un encabezado el hueco es menor: el texto pertenece al título. */ body.aihd-on.aihd-doc-on .aihd-doc :is(h1,h2,h3,h4,h5,h6) + :is(p,ul,ol,dl,blockquote,figure,table,pre,details){ margin-top:max(var(--aihd-sp-0), .4em)} /* Una lista pertenece al párrafo que la introduce; lo que viene después de la lista ya es otro bloque. */ body.aihd-on.aihd-doc-on .aihd-doc p + :is(ul,ol){margin-top:var(--aihd-sp-1)} body.aihd-on.aihd-doc-on .aihd-doc :is(ul,ol) + p{margin-top:var(--aihd-sp-2)} /* Texto y botón: ni pegados ni desconectados. */ body.aihd-on.aihd-doc-on .aihd-doc :is(p,ul,ol) + :is(.aihd-btn,.wp-block-button,.wp-block-buttons), body.aihd-on.aihd-doc-on .aihd-doc :is(p,ul,ol) + p > :is(.aihd-btn,a[class*="button"]){ margin-top:var(--aihd-sp-2)} /* El valor de reserva que faltaba: si --aihd-ritmo no llega (una página sin diseño publicado), calc(var(--aihd-ritmo) * 1.4) invalidaba la propiedad entera y el h4 se quedaba sin margen ninguno. */ body.aihd-on.aihd-doc-on .aihd-doc > h4{ margin-top:max(calc(var(--aihd-ritmo,1.5rem) * 1.4), 1.15em); margin-bottom:max(calc(var(--aihd-ritmo,1.5rem) * .3), .3em)} /* --------------------------------------------------------------------- 2. CONTENIDO SIN ENVOLVER (.the-content / .entry-content) Aquí el flujo lo reparte el tema. Se corrigen SOLO los encabezados, que son los que el plugin ya venía escribiendo (margin:2.1em 0 .75em), para no sumar márgenes encima de los del tema y descuadrarlo. --------------------------------------------------------------------- */ body.aihd-on :is(.the-content,.entry-content) h2:not(.aihd-home-wrap *){ margin-top:max(var(--aihd-sp-4), 1.45em); margin-bottom:max(var(--aihd-sp-1), .5em)} body.aihd-on :is(.the-content,.entry-content) h3:not(.aihd-home-wrap *){ margin-top:max(var(--aihd-sp-3), 1.3em); margin-bottom:max(var(--aihd-sp-0), .4em)} body.aihd-on :is(.the-content,.entry-content) h4:not(.aihd-home-wrap *){ margin-top:max(var(--aihd-sp-2), 1.15em); margin-bottom:max(var(--aihd-sp-0), .35em)} /* --------------------------------------------------------------------- 3. TITULARES DE VARIAS LÍNEAS --aihd-lh-titular baja a 1,04 y ahí está bien: es el interlineado de un H1 enorme de una o dos líneas. En un título que ocupa tres, las mayúsculas acentuadas y los signos de apertura se montan sobre la línea de arriba. Se pone un suelo sin tocar la variable, para que el hero grande de escritorio conserve su tensión. --------------------------------------------------------------------- */ .aihd-art-t{line-height:1.12;line-height:max(var(--aihd-lh-titular,1.04), 1.12)} @media (max-width:640px){ .aihd-home-wrap .aihd-h1{line-height:1.1;line-height:max(var(--aihd-lh-titular,1.03), 1.1)} .aihd-home-wrap .aihd-title{line-height:1.16} } /* --------------------------------------------------------------------- 4. PORTADA GENERADA El reset margin:0 de .aihd-home-wrap se queda como está: la portada se compone con gap y tocar los márgenes rompería las arquitecturas. Lo que se corrige son los CONTENEDORES cuyo gap estaba en píxeles fijos. --------------------------------------------------------------------- */ .aihd-seo{gap:var(--aihd-sp-1)} .aihd-faq{gap:var(--aihd-sp-1)} /* Prosa del bloque de texto SEO: wpautop entrega párrafos sueltos, y el margen inferior fijo dejaba además un hueco colgando al final. */ .aihd-home-wrap .aihd-prose p{margin:0} .aihd-home-wrap .aihd-prose > :is(p,ul,ol,blockquote,h2,h3,h4) + :is(p,ul,ol,blockquote,h2,h3,h4){ margin-top:var(--aihd-sp-2)} .aihd-home-wrap .aihd-prose > :is(h2,h3,h4){ margin-top:var(--aihd-sp-3);margin-bottom:max(var(--aihd-sp-0), .4em)} .aihd-home-wrap .aihd-prose > :is(h2,h3,h4) + *{margin-top:max(var(--aihd-sp-0), .4em)} /* Dentro de las tarjetas: título, descripción y acción son un grupo, pero .45em entre un título de 1,12rem y su descripción es demasiado poco. */ .aihd-card-b{gap:max(var(--aihd-sp-0), .55em)} .aihd-home-wrap .aihd-tcard{gap:max(var(--aihd-sp-0), .45em)} .aihd-home-wrap .aihd-tile{gap:.3em} /* Móvil: botones que no se tocan y tarjetas que no se comprimen. */ @media (max-width:760px){ .aihd-actions{gap:12px} .aihd-card-b{padding:max(calc(var(--aihd-k) * 20px), 16px)} .aihd-home-wrap .aihd-tcard{padding:max(calc(var(--aihd-k) * 22px), 17px)} /* Una palabra muy larga no puede sacar barra horizontal a la página. */ body.aihd-on :is(.aihd-doc,.the-content,.entry-content) :is(p,li,dd,h1,h2,h3,h4){ overflow-wrap:break-word} } /* ===================================================================== RTL — árabe y hebreo (2.19) --------------------------------------------------------------------- El plugin ya traía body.aihd-rtl y unas cuantas reglas, pero solo alcanzaban a la portada: el CONTENIDO del artículo, el índice, las migas y la barra del teléfono se quedaban fuera, así que un artículo en árabe salía escrito en árabe y maquetado de izquierda a derecha. Aquí se completa, y solo con lo que tiene sentido direccional: las imágenes, los duotonos y los logotipos no se invierten. ===================================================================== */ body.aihd-rtl :is(.aihd-doc,.aihd-art-h,.aihd-rel,.aihd-toc,.aihd-herr){ direction:rtl;text-align:right} body.aihd-rtl.aihd-on :is(.the-content,.entry-content):not(.aihd-home-wrap *){ direction:rtl;text-align:right} body.aihd-rtl.aihd-on.aihd-doc-on .aihd-doc :is(ul,ol){ padding-left:0;padding-inline-start:1.5em} body.aihd-rtl.aihd-on.aihd-doc-on .aihd-doc :is(blockquote,.wp-block-quote){ border-left:1px solid var(--aihd-bd-sf);border-right:4px solid var(--aihd-a); border-radius:var(--aihd-r) 0 0 var(--aihd-r)} /* Migas: la barra separadora va del otro lado. */ body.aihd-rtl .aihd-migas li + li::before{margin-right:0;margin-left:.45em} /* FAQ: el galón del desplegable apunta hacia dentro, no hacia fuera. */ body.aihd-rtl .aihd-faq summary::after{transform:rotate(135deg) translateY(-3px)} body.aihd-rtl .aihd-faq details[open] summary::after{transform:rotate(-45deg)} /* Listas numeradas editoriales: el número pasa a la derecha. */ body.aihd-rtl :is(.aihd-faq-idx-row,.aihd-home-wrap .aihd-arch-idx-row, .aihd-home-wrap .aihd-step--alt,.aihd-home-wrap .aihd-step--lg){ direction:rtl} /* Cadena de pasos: la flecha señala al paso siguiente, que en RTL está a la izquierda. Es de los pocos iconos cuya dirección significa algo. */ body.aihd-rtl .aihd-conn-node:not(:last-child)::after{ content:"←";right:auto;left:-.85em} /* CTA y rejillas: el orden de lectura, no la posición de las cajas. */ body.aihd-rtl .aihd-home-wrap :is(.aihd-cta,.aihd-grid,.aihd-list,.aihd-chips,.aihd-actions){ direction:rtl} /* Barra del teléfono. Lleva su propio dir="rtl" desde PHP porque vive en wp_footer, fuera de cualquier contenedor que pudiera heredárselo. */ body.aihd-rtl .aihd-barra{direction:rtl} body.aihd-rtl .aihd-barra-buscar{direction:rtl;text-align:right} /* Lo que NO se invierte: el sentido de un carrusel táctil lo decide el navegador a partir de direction, y forzarlo aquí lo rompería; las imágenes y sus filtros no tienen lado. */ body.aihd-rtl .aihd-home-wrap .aihd-media{direction:ltr} /* ===================================================================== MÓVIL 4 — El menú, en la zona del pulgar (2.13.4) --------------------------------------------------------------------- En un teléfono, la esquina superior derecha es el punto más lejano del pulgar de quien sujeta el aparato con una mano, y ahí estaban los dos únicos controles de navegación: la lupa y la hamburguesa. Además la lupa duplicaba la búsqueda que la barra inferior ya ofrece. Lo que se hace aquí es SOLO recolocar. El botón es el mismo elemento con las mismas clases, el mismo aria-controls y el mismo manejador de front.js; lo único que cambia es dónde se dibuja y por debajo de qué ancho. Nada de esto toca escritorio: todo vive dentro del breakpoint de 760 px, que es el que el plugin ya usa para lo que es ergonomía de teléfono (la barra inferior, los carruseles, las áreas táctiles). El otro breakpoint del sistema, 900 px, sigue decidiendo cuándo la navegación se pliega en hamburguesa, y no se toca: entre 761 y 900 px —tabletas, donde no hay barra inferior— el botón y la lupa siguen exactamente donde estaban. ===================================================================== */ @media (max-width:760px){ /* Zócalo del que arrancan los controles flotantes. Con barra inferior son los 74 px que el botón de subir ya usaba; sin ella, un margen cómodo que respeta el área segura (el viewport va con viewport-fit=cover, así que 18 px a secas caerían bajo el indicador de inicio en los teléfonos con muesca). */ body{--aihd-flot-b:max(18px, calc(env(safe-area-inset-bottom,0px) + 10px))} body.aihd-con-barra{--aihd-flot-b:calc(74px + env(safe-area-inset-bottom,0px))} /* La lupa de arriba se retira en el teléfono: duplica la búsqueda que ya ofrece la barra inferior y ocupa la esquina más incómoda de alcanzar. Se retira sin condiciones, que es lo pedido. */ .aihd-cab-buscar{display:none} /* Y con la lupa fuera y el menú abajo, la cabecera deja de reservar los 70 px que sostenían esos dos botones. La altura pasa a marcarla lo que quede dentro, en lugar de quedarse una banda vacía encima del contenido. */ /* 4px y no mas: con un nombre de sitio que parte en dos lineas a 320px, un relleno mayor haria la cabecera MAS alta que antes, que es justo lo contrario de lo que se busca. El aire lo pone el min-height:44px que ya tiene la marca. */ .aihd-cab-in{min-height:0;padding-block:4px} .aihd-cab.es-encogida .aihd-cab-in{min-height:0} /* Si dentro no queda nada visible —el caso de una portada con la marca desactivada, donde la cabecera solo contenía la lupa y la hamburguesa— entonces la cabecera no tiene que ocupar nada en absoluto: ni banda, ni borde inferior, ni el hueco de la sombra. El contenido empieza arriba. La navegación no se pierde: sigue entera en el botón flotante. */ .aihd-cab:not(:has(.aihd-marca)){display:none} /* El botón, flotante abajo a la derecha. 56 px: por encima del mínimo táctil de 44 px y un punto mayor que el botón de subir, que es un control secundario. Redondo porque es la forma que el plugin ya usa para lo que flota (.aihd-top), no una forma nueva. */ .aihd-cab-b.aihd-cab-menu{ position:fixed;right:16px;bottom:var(--aihd-flot-b,18px);z-index:9989; width:56px;height:56px;border-radius:50%; background:var(--aihd-bg);border:1px solid var(--aihd-bd); color:var(--aihd-tx); box-shadow:0 10px 28px -10px rgb(0 0 0 / .38)} .aihd-cab-menu:active{background:var(--aihd-p1)} .aihd-cab-menu .aihd-hamb{width:22px} /* El botón ya no está dentro de la cabecera del tema, así que no puede fiarse de que el tema defina .screen-reader-text: si no lo hiciera, la palabra «Menú» saldría escrita dentro del círculo. El nombre accesible lo da el aria-label, que sale del sistema de idiomas. */ .aihd-cab-menu .screen-reader-text{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} body.aihd-rtl .aihd-cab-menu{right:auto;left:16px} /* El botón de subir se aparta hacia arriba: los dos flotantes ocupaban la misma esquina y se habrían tapado. 68 px = 56 del botón + 12 de separación táctil. Solo cuando hay menú flotante, o sea cuando el plugin pinta su propia cabecera. */ body.aihd-cab-on .aihd-top{bottom:calc(var(--aihd-flot-b) + 68px)} } /* z-index: por debajo de .aihd-panel-nav (9990) a propósito. Al abrirse, el panel tapa el botón y se cierra con su propia aspa o tocando el velo, que es el comportamiento que ya tenía. Por encima queda todo lo de la zona inferior (9997-9999), que nunca coincide en el espacio con el botón. */ /* ===================================================================== ÁREAS TÁCTILES (2.13.5) --------------------------------------------------------------------- Salidas de una auditoría de la interfaz en teléfono. Tres controles se quedaban por debajo del mínimo táctil, y uno de ellos además solapaba con su vecino, que es peor que ser pequeño: hace pulsar el equivocado. ===================================================================== */ /* El aspa que cierra el panel de navegación medía 42 px. Es el único control de cierre visible con el menú abierto, así que es justo el que no puede quedarse corto. */ .aihd-panel-x{width:48px;height:48px;display:grid;place-items:center} /* Los botones de la cabecera, en anchos táctiles. En escritorio se quedan en 42 px, que con ratón sobra y es el tamaño con el que se diseñó. */ @media (max-width:900px){ .aihd-cab-b{width:44px;height:44px} } /* Los puntos del carrusel. El área táctil medía 17 px de ancho y los puntos iban a 7 px unos de otros: las áreas de dos puntos contiguos se pisaban 3 px, de modo que había una franja donde el dedo podía activar cualquiera de los dos. Se separan y se ensancha el área hasta que cada una es suya y llega al mínimo de 24 px del criterio 2.5.8 de WCAG 2.2. */ @media (max-width:760px){ .aihd-car-nav{gap:18px;margin-top:18px} .aihd-car-p::after{inset:-14px -9px} } /* ===================================================================== CORRECCIONES DE UNA AUDITORÍA EN NAVEGADOR REAL (2.13.6) --------------------------------------------------------------------- Medidas tomadas con Chromium sin interfaz a 320, 360, 375, 390, 414, 430, 768 y 844 px. Lo que sigue son fallos que solo se ven midiendo. ===================================================================== */ /* --- 1. El alto real de la barra inferior ----------------------------- La barra se declara con min-height:56px en cada botón, pero .aihd-barra vive FUERA de .aihd-home-wrap, que es donde estaba el box-sizing:border-box. Con content-box, esos 56 px son solo la caja de contenido: los 8 px de relleno arriba y abajo se suman, y con el borde superior la barra mide 73 px de verdad. Todo lo que se colocaba respecto a ella usaba 60 ó 74: - body reservaba 60 px -> 13 px de página tapados para siempre; - el botón flotante quedaba a 1 px de la barra, no a los 14 previstos; - el panel de búsqueda se montaba 13 px encima de la propia barra. Se arregla midiendo una sola vez y derivando todo de esa medida. */ @media (max-width:760px){ .aihd-barra,.aihd-barra-i,.aihd-barra-buscar{box-sizing:border-box} body{--aihd-barra-h:57px} /* 56 del botón + 1 del borde */ body.aihd-con-barra{ padding-bottom:calc(var(--aihd-barra-h) + 8px + env(safe-area-inset-bottom,0px)); --aihd-flot-b:calc(var(--aihd-barra-h) + 16px + env(safe-area-inset-bottom,0px))} .aihd-barra-buscar{bottom:calc(var(--aihd-barra-h) + env(safe-area-inset-bottom,0px))} body.aihd-con-barra .aihd-top{bottom:calc(var(--aihd-flot-b) + 68px)} body.aihd-con-barra .aihd-pie-in{padding-bottom:calc(var(--aihd-ritmo,1.5rem) + var(--aihd-barra-h))} } /* --- 2. El hero no cabía a 320 px ------------------------------------- .aihd-hero-c es un ítem de rejilla, y un ítem de rejilla trae min-width:auto, que es min-content: no encoge por debajo de lo que ocupa su hijo más ancho. A 320 px la columna pedía 315 px contra 284 disponibles, y .aihd-sec--hero{overflow:hidden} recortaba la diferencia: el botón «Buscar» del hero se quedaba 24 px fuera, sin forma de pulsarlo. Dejar encoger al ítem es la corrección estándar para esto. */ .aihd-hero-a > *, .aihd-home-wrap .aihd-hero-c, .aihd-home-wrap .aihd-hero-c > *{min-width:0} /* --- 3. Enlaces de pie, migas y menú en pantalla táctil --------------- Medían 16 px de alto. No incumplen el criterio 2.5.8 de WCAG 2.2 porque la separación entre ellos ya los salva, pero pulsarlos con el pulgar es incómodo. Se les da altura sin engordar el bloque. */ @media (max-width:760px){ .aihd-pie-l a, .aihd-pie .aihd-nav-l a{display:inline-flex;align-items:center;min-height:32px} .aihd-migas a{display:inline-block;padding-block:4px} } /* --- 4. El formulario de búsqueda del hero, a 320 px ------------------ Con el hero centrado, .aihd-search recibe margin-inline:auto. Unos márgenes automáticos en un ítem flex ANULAN el estiramiento al ancho del contenedor, y el formulario se quedaba dimensionado por su contenido: 315 px dentro de una columna de 284. El cierre de 620 px se conserva para pantallas anchas; lo que se añade es el tope del padre. */ .aihd-search{max-width:min(620px,100%)} /* --- 5. Dos enlaces más por debajo del mínimo táctil ------------------ Medidos en el navegador: el enlace de metadatos de la cabecera del artículo salía a 19 px de alto, por debajo de los 24 px que exige el criterio 2.5.8 de WCAG 2.2; y la marca del sitio, que es el enlace a la portada y de los más pulsados, se quedaba en 38. Ninguno de los dos cambia de sitio ni de aspecto: solo crece su zona de toque dentro de la caja que ya ocupaban. */ @media (max-width:760px){ .aihd-art-m a{display:inline-flex;align-items:center;min-height:32px} .aihd-marca{min-height:44px;justify-content:center} } /* ===================================================================== RÓTULOS DE NAVEGACIÓN EN VERTICAL (2.13.7) --------------------------------------------------------------------- .aihd-nav-l a lleva white-space:nowrap, y ahí está bien: es la barra horizontal de escritorio, donde un rótulo partido en dos líneas descuadra la fila. El problema es que esa misma lista se reutiliza en dos sitios donde el eje es el contrario —el panel lateral del móvil y la columna del pie— y ninguno de los dos anulaba el nowrap. Con un menú de rótulos largos («Convenience Store Efter stationerne») la línea no podía partirse y se salía del panel: medido a 390 px, el rótulo terminaba en 391 px contra un límite de 366, y con una tipografía serif ancha el recorte es bastante mayor. El que envuelve el texto es además ítem flex del enlace, así que necesita min-width:0 para poder encoger por debajo de su palabra más larga; y overflow-wrap parte las palabras que no quepan ni así. */ .aihd-nav--panel .aihd-nav-l a, .aihd-pie .aihd-nav-l a{ white-space:normal; overflow-wrap:break-word} .aihd-nav--panel .aihd-nav-l a span, .aihd-pie .aihd-nav-l a span{min-width:0;max-width:100%} /* ===================================================================== BLOQUES INDEPENDIENTES Y JERARQUÍA DE LOS SHORTCODES (2.13.8) --------------------------------------------------------------------- EL FALLO. Medido en navegador sobre la estructura real: el encabezado que va detrás de la tabla de horarios recibía 60,1 px en móvil, que es EXACTAMENTE el mismo aire que recibe detrás de un párrafo corriente. La escala solo sabía de encabezados y de texto corrido, así que una tabla, una figura o una rejilla —piezas cerradas, con borde y fondo propios— contaban como un párrafo más. Por eso el H2 siguiente parecía la continuación del bloque de horarios en lugar del principio de otro. Y la jerarquía de los shortcodes salía INVERTIDA: padre→hija 37,3 px frente a hija→nieta 49,1 px. El motivo es que la separación emergía de la etiqueta del encabezado (h2 > h3 > h4, cada vez menos aire) mientras .aihd-sc repartía un `margin:2em 0` plano que dominaba en los niveles profundos. Dos sistemas peleando, y el resultado al revés de lo que pide la estructura. LA CORRECCIÓN. Dos cosas, ninguna de ellas un margen global: 1. Un paso más de escala, --aihd-sp-5, para la relación «bloque cerrado → encabezado que abre otro bloque». Se aplica por SELECTOR HERMANO, así que solo alcanza al encabezado que de verdad viene detrás de un bloque, y escala con el nivel del encabezado para no romper la jerarquía: h2 recibe sp-5, h3 sp-4, h4 sp-3. Con :has() cubre también el caso de que el bloque o el encabezado vengan envueltos, que es lo que hace el editor, sin necesidad de una excepción por componente. 2. El bloque de shortcode pasa a ser el dueño de su propia separación, en lugar de heredarla de la etiqueta de su título. Cada nivel declara la suya y el título deja de aportar la propia, así que padre, hija y nieta quedan en orden decreciente por construcción. Nada de esto depende del idioma: son relaciones del DOM. ===================================================================== */ body.aihd-on :is(.aihd-doc,.the-content,.entry-content) :is(table,figure,blockquote,pre,details,iframe,hr,.aihd-sc,.aihd-grid,.aihd-list,.aihd-filter-w,.aihd-open,.wp-block-table,.wp-block-image,.wp-block-embed,.wp-block-gallery,.wp-block-columns,:is(div,section,article):has(> :is(table,figure,.aihd-grid,.aihd-list,.wp-block-table,.wp-block-image))) + h2:not(.aihd-home-wrap *), body.aihd-on :is(.aihd-doc,.the-content,.entry-content) :is(table,figure,blockquote,pre,details,iframe,hr,.aihd-sc,.aihd-grid,.aihd-list,.aihd-filter-w,.aihd-open,.wp-block-table,.wp-block-image,.wp-block-embed,.wp-block-gallery,.wp-block-columns,:is(div,section,article):has(> :is(table,figure,.aihd-grid,.aihd-list,.wp-block-table,.wp-block-image))) + :is(div,section,article):has(> h2:first-child):not(.aihd-home-wrap *){ margin-top:var(--aihd-sp-5)} body.aihd-on :is(.aihd-doc,.the-content,.entry-content) :is(table,figure,blockquote,pre,details,iframe,hr,.aihd-sc,.aihd-grid,.aihd-list,.aihd-filter-w,.aihd-open,.wp-block-table,.wp-block-image,.wp-block-embed,.wp-block-gallery,.wp-block-columns,:is(div,section,article):has(> :is(table,figure,.aihd-grid,.aihd-list,.wp-block-table,.wp-block-image))) + h3:not(.aihd-home-wrap *), body.aihd-on :is(.aihd-doc,.the-content,.entry-content) :is(table,figure,blockquote,pre,details,iframe,hr,.aihd-sc,.aihd-grid,.aihd-list,.aihd-filter-w,.aihd-open,.wp-block-table,.wp-block-image,.wp-block-embed,.wp-block-gallery,.wp-block-columns,:is(div,section,article):has(> :is(table,figure,.aihd-grid,.aihd-list,.wp-block-table,.wp-block-image))) + :is(div,section,article):has(> h3:first-child):not(.aihd-home-wrap *){ margin-top:var(--aihd-sp-4)} body.aihd-on :is(.aihd-doc,.the-content,.entry-content) :is(table,figure,blockquote,pre,details,iframe,hr,.aihd-sc,.aihd-grid,.aihd-list,.aihd-filter-w,.aihd-open,.wp-block-table,.wp-block-image,.wp-block-embed,.wp-block-gallery,.wp-block-columns,:is(div,section,article):has(> :is(table,figure,.aihd-grid,.aihd-list,.wp-block-table,.wp-block-image))) + :is(h4,h5,h6):not(.aihd-home-wrap *), body.aihd-on :is(.aihd-doc,.the-content,.entry-content) :is(table,figure,blockquote,pre,details,iframe,hr,.aihd-sc,.aihd-grid,.aihd-list,.aihd-filter-w,.aihd-open,.wp-block-table,.wp-block-image,.wp-block-embed,.wp-block-gallery,.wp-block-columns,:is(div,section,article):has(> :is(table,figure,.aihd-grid,.aihd-list,.wp-block-table,.wp-block-image))) + :is(div,section,article):has(> :is(h4,h5,h6):first-child):not(.aihd-home-wrap *){ margin-top:var(--aihd-sp-3)} /* --- Jerarquía de los bloques de shortcode ----------------------------- El nivel lo declara el propio bloque. .aihd-sc--padres abre un nivel nuevo y pide la separación de bloque; hijas y fichas, cada vez menos, porque pertenecen visualmente al nivel de encima. */ .aihd-sc{--aihd-sp-nivel:var(--aihd-sp-4)} .aihd-sc--padres{--aihd-sp-nivel:var(--aihd-sp-5)} .aihd-sc--hijas{--aihd-sp-nivel:var(--aihd-sp-4)} .aihd-sc--fichas{--aihd-sp-nivel:var(--aihd-sp-3)} body.aihd-on .aihd-sc, body.aihd-on.aihd-doc-on .aihd-doc .aihd-sc{ margin-top:var(--aihd-sp-nivel); margin-bottom:var(--aihd-sp-2)} /* El título no aporta su propio aire: lo pone el bloque, que es quien conoce el nivel. Si lo aportara también, se sumarían dos criterios y volveríamos al desorden anterior. */ body.aihd-on .aihd-sc > .aihd-sc-title:first-child, body.aihd-on.aihd-doc-on .aihd-doc .aihd-sc > .aihd-sc-title:first-child{margin-top:0} /* --- Hallazgo aparte: la barra horizontal de escritorio no podía encoger. .aihd-nav-l es un flex cuyos ítems llevan white-space:nowrap y el min-width:auto que trae todo ítem flex, así que con rótulos largos no había forma de repartir: medido, una cabecera de 1346 px en una ventana de 1440 sacaba barra horizontal en toda la página (scrollWidth 1792). Es previo a este cambio —el ZIP original da exactamente lo mismo— y se resuelve dejando que la fila envuelva en lugar de desbordar. Cada rótulo sigue sin partirse por dentro, que es lo que la barra necesita. --- */ .aihd-cab .aihd-nav{min-width:0} .aihd-cab .aihd-nav-l{flex-wrap:wrap;row-gap:4px}