/* EKONATURA · SISTEMA VISUAL GLOBAL V1 (ATO-546 · P1)
*
* Una sola fuente de tokens y reglas para toda la web de preview:
* grafito #292d2e, grafito medio #35393a, piedra #e9e6e0, crema #f5f1eb y
* coral #dfa089 (coral profundo #96523e para texto y acentos sobre claro).
*
* Tipografía: Geist Serif (titulares) + Onest (cuerpo/UI), autoalojadas en
* /assets con licencia OFL. Sin CDN, sin serif/system-ui/"Ekonatura Onest" visibles.
*
* Esta capa no reimprime la Home ni /resenas/: solo fija el contrato
* compartido (tipografía, color, enlaces, botones, cards, overlays, buscador,
* divisores y foco) que todas las familias consumen.
*/
/* ---------- 1 · Tipografía autoalojada ---------- */
@font-face{
font-family:"Ekonatura Onest";
src:url("/assets/ekonatura-onest-variable.ttf") format("truetype");
font-style:normal;font-weight:100 900;font-display:swap;
}
@font-face{
font-family:"Ekonatura Geist Serif";
src:url("/assets/ekonatura-geist-serif.woff2") format("woff2");
font-style:normal;font-weight:400;font-display:swap;
}
:root{
/* Familias: contrato único para toda la web. */
--ek-font-body:"Ekonatura Onest",system-ui,sans-serif;
--ek-font-display:"Ekonatura Onest",system-ui,sans-serif;
--ek-font-heading:"Ekonatura Geist Serif",serif;
/* Paleta V1 y reasignación de los tokens heredados que aún llevaban
verde o azul estructurales. */
--ek-v1-graphite:#292d2e;
--ek-v1-graphite-mid:#35393a;
--ek-v1-stone:#e9e6e0;
--ek-v1-cream:#f5f1eb;
--ek-v1-coral:#dfa089;
--ek-v1-coral-dark:#96523e;
--ek-v1-rule:rgba(41,45,46,.14);
--ek-v1-focus:#96523e;
--ek-paper:#f5f1eb;
--ek-white:#faf7f1;
--ek-ink:#292d2e;
--ek-text:#292d2e;
--ek-muted:#6b6862;
--ek-coral:#96523e;
--ek-almond:#f5f1eb;
--ek-line:#d8d2c8;
--ek-surface-alt:#e9e6e0;
--ek-graphite:#292d2e;
--ek-surface:var(--ek-paper);
/* Nombres heredados: se reapuntan a la paleta V1 para que ningún
componente conserve verde o azul como color estructural. */
--ek-accent:#96523e;
--ek-action:#96523e;
--ek-action-hover:#dfa089;
--ek-on-action:#f5f1eb;
--ek-on-accent:#292d2e;
--ek-on-coral:#292d2e;
--ek-teal:#292d2e;
--ek-aqua:#e9e6e0;
--ek-alice:#f5f1eb;
--ek-cream:#e9e6e0;
--ek-deep:#292d2e;
--ek-green:#292d2e;
--ek-blue-deep:#292d2e;
--ek-blue-soft:#e9e6e0;
--ek-blue-pale:#f5f1eb;
--ek-warm-soft:#f5f1eb;
--ek-warm-accent:#96523e;
--ek-brand-coral:#96523e;
--brand-coral:#96523e;
}
:root[data-ek-theme="dark"]{
--ek-paper:#292d2e;
--ek-white:#35393a;
--ek-ink:#f5f1eb;
--ek-text:#f5f1eb;
--ek-muted:#cac5bd;
--ek-coral:#f0b399;
--ek-almond:#35393a;
--ek-line:#666561;
--ek-surface-alt:#35393a;
--ek-graphite:#292d2e;
--ek-accent:#f0b399;
--ek-action:#f0b399;
--ek-action-hover:#dfa089;
--ek-on-action:#292d2e;
--ek-on-accent:#292d2e;
--ek-teal:#292d2e;
--ek-aqua:#35393a;
--ek-alice:rgba(245,241,235,.10);
--ek-cream:#35393a;
--ek-deep:#292d2e;
--ek-green:#292d2e;
--ek-blue-deep:#292d2e;
--ek-blue-soft:#35393a;
--ek-blue-pale:#292d2e;
--ek-warm-soft:#35393a;
--ek-warm-accent:#f0b399;
--ek-v1-focus:#dfa089;
}
/* ---------- 2 · Base ---------- */
body{
font-family:var(--ek-font-body)!important;
background:var(--ek-paper)!important;
color:var(--ek-ink)!important;
}
h1,h2,h3,h4,h5,h6{
font-family:var(--ek-font-heading)!important;
}
:is(p,li,dd,figcaption,blockquote,label,input,select,textarea,button,summary,small,time){
font-family:var(--ek-font-body);
}
/* ---------- 3 · Enlaces ---------- */
/* F7 · Un solo indicador por enlace. El subrayado lo aporta `text-decoration`;
el borde permanente del cuerpo se retiró en `system.css` para que hover y
foco no dibujen dos rayas. */
a{text-underline-offset:.2em;text-decoration-thickness:1px}
p a,li a,dd a{color:var(--ek-v1-coral-dark)}
@media(hover:hover){
p a:hover,p a:focus-visible,li a:hover,li a:focus-visible,dd a:hover,dd a:focus-visible{
color:var(--ek-v1-coral-dark);text-decoration:underline
}
}
/* Sobre grafito el enlace descansa en crema y vira a coral al interactuar. */
:root[data-ek-theme="dark"] p a,:root[data-ek-theme="dark"] li a,:root[data-ek-theme="dark"] dd a{
color:var(--ek-v1-cream)!important;
}
@media(hover:hover){
:root[data-ek-theme="dark"] p a:is(:hover,:focus-visible),
:root[data-ek-theme="dark"] li a:is(:hover,:focus-visible),
:root[data-ek-theme="dark"] dd a:is(:hover,:focus-visible){
color:var(--ek-v1-coral)!important;text-decoration:underline;
}
}
:root[data-ek-theme="dark"] .ek-footer a{color:var(--ek-v1-cream)}
@media(hover:hover){
.ek-footer a:hover,.ek-footer a:focus-visible{color:var(--ek-v1-coral);text-decoration:underline}
}
/* ---------- 4 · Botones ---------- */
.button,.pill,.cta-banner__button,.ek-final-cta .button{
border-radius:99px;transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.button:hover,.pill:hover,.cta-banner__button:hover{
background:var(--ek-v1-coral)!important;color:var(--ek-v1-graphite)!important;
border-color:transparent!important;
}
:is(a.button,.pill,.cta-banner__button):focus-visible{
outline:2px solid var(--ek-v1-coral)!important;outline-offset:3px!important;
}
/* Encabezado: el CTA no compite con el menú ni con el coral de acento. */
.ek-header .button{
background:transparent;color:var(--ek-ink);border-color:var(--ek-line);
}
@media(hover:hover){
.ek-header .button:hover{background:var(--ek-v1-coral)!important;color:var(--ek-v1-graphite)!important}
}
/* ---------- 5 · Divisores y superficies ---------- */
body.ek-unified:not([data-route="/sobre-mi/detalle/"]) .ek-reading-progress{
background:var(--ek-v1-coral)!important
}
.ek-reading-track{background:#d8d2c8!important}
.ek-search-results :is(a,.ek-search-card),
.ek-search-card{border-color:var(--ek-v1-rule)!important;outline-color:var(--ek-v1-coral)!important}
/* Cierre de página: píldora crema sobre grafito, coral al pasar el cursor. */
body .ek-footer .ek-final-cta .cta-banner__button,
body .ek-footer .ek-final-cta .cta-banner__button:visited{
border-color:var(--ek-v1-cream)!important;background:var(--ek-v1-cream)!important;
color:var(--ek-v1-graphite)!important
}
body .ek-footer .ek-final-cta .cta-banner__button:is(:hover,:focus-visible){
background:var(--ek-v1-coral)!important;color:var(--ek-v1-graphite)!important;border-color:transparent!important
}
body .ek-footer .ek-final-cta .cta-banner__phone{
background:transparent!important;color:var(--ek-v1-cream)!important;
border-color:rgba(245,241,235,.55)!important
}
body .ek-footer .ek-final-cta .cta-banner__phone:is(:hover,:focus-visible){
background:var(--ek-v1-coral)!important;color:var(--ek-v1-graphite)!important;border-color:transparent!important
}
body .ek-footer .ek-final-cta .cta-banner__number{color:#d2c9c1!important}
:root[data-ek-theme="dark"] body[data-route="/contacto/"] .contact-first .ek-contact-button--primary{
background:var(--ek-v1-cream)!important;color:var(--ek-v1-graphite)!important;border-color:var(--ek-v1-cream)!important
}
/* ---------- 6 · Overlays ---------- */
.ek-dialog,.ek-library,.ek-review-dialog,.ek-sheet,.ek-bottom-sheet,.ek-page-share{
background:var(--ek-v1-cream)!important;color:var(--ek-v1-graphite)!important;
border-color:var(--ek-v1-rule)!important;
}
.ek-dialog a,.ek-library a,.ek-review-dialog a,.ek-sheet a,.ek-bottom-sheet a,.ek-page-share a{
color:var(--ek-v1-coral-dark)
}
@media(hover:hover){
.ek-dialog a:hover,.ek-library a:hover,.ek-review-dialog a:hover,.ek-sheet a:hover,
.ek-bottom-sheet a:hover,.ek-page-share a:hover{color:var(--ek-v1-coral-dark);text-decoration:underline}
}
/* F5/F6 · El menú móvil y el buscador son superficies del tema: en oscuro son
grafito de verdad (fondo, divisores, enlaces, chips y resultados), nunca crema
con texto crema. La regla de crema vive solo en el tema claro. */
:root[data-ek-theme="dark"] :is(.ek-dialog,.ek-library,.ek-review-dialog,.ek-sheet,.ek-bottom-sheet,.ek-page-share){
background:var(--ek-v1-graphite)!important;
color:var(--ek-v1-cream)!important;
border-color:#5f6362!important;
}
:root[data-ek-theme="dark"] :is(.ek-dialog,.ek-library,.ek-review-dialog,.ek-sheet,.ek-bottom-sheet,.ek-page-share)
:is(a,.ek-exp-link,.ek-review-share,.ek-search-card h3,.ek-result-title){
color:var(--ek-v1-coral)!important;
}
:root[data-ek-theme="dark"] :is(.ek-dialog,.ek-library,.ek-review-dialog,.ek-sheet,.ek-bottom-sheet,.ek-page-share)
:is(p,li,h2,h3,h4,label,small,strong,blockquote,dd){
color:var(--ek-v1-cream)!important;
}
:root[data-ek-theme="dark"] :is(.ek-dialog,.ek-library) :is(.ek-muted,.ek-result-type,.ek-search-description){
color:#c9c4bc!important;
}
/* Divisores del menú en oscuro: una línea, visible sobre grafito. */
:root[data-ek-theme="dark"] #ek-menu [data-menu-level] :is(a,button),
:root[data-ek-theme="dark"] #ek-menu nav>a,
:root[data-ek-theme="dark"] #ek-menu .mobile-explore>summary{
border-bottom-color:#5f6362!important;
}
/* ---------- 6b · Buscador: un solo indicador ---------- */
/* F6 · Estado inactivo sin borde; al enfocar, UNA línea coral fina. Nunca
borde + outline + sombra a la vez, y el foco sigue siendo visible. */
#ek-search .ek-search-input{
border:0!important;border-bottom:1px solid var(--ek-line)!important;
border-radius:0!important;background:transparent!important;
}
#ek-search .ek-search-input:focus-visible{
outline:none!important;outline-offset:0!important;
border-bottom:2px solid var(--ek-coral)!important;
}
:root[data-ek-theme="dark"] #ek-search .ek-search-input{
border-bottom-color:#5f6362!important;color:var(--ek-v1-cream)!important;
}
:root[data-ek-theme="dark"] #ek-search .ek-search-input:focus-visible{
border-bottom-color:var(--ek-v1-coral)!important;
}
/* Resultados con aire real: nada pegado al borde ni cortado. */
#ek-search .ek-search-results{padding-top:4px!important}
#ek-search .ek-search-card{
padding:16px 0!important;border-top:1px solid var(--ek-v1-rule)!important;
}
#ek-search .ek-search-results>a{
padding:20px 0!important;border-top:1px solid var(--ek-v1-rule)!important;
}
/* Chips del buscador: legibles en claro y en oscuro, con las cuatro
sugerencias reales; el borde solo aparece al interactuar. */
#ek-search .ek-search-suggestions button{
border:1px solid var(--ek-v1-rule)!important;
background:transparent!important;
color:var(--ek-ink)!important;
}
:root[data-ek-theme="dark"] #ek-search .ek-search-suggestions button{
border-color:#5f6362!important;background:transparent!important;color:var(--ek-v1-cream)!important;
}
@media(hover:hover){
#ek-search .ek-search-suggestions button:is(:hover,:focus-visible){
border-color:var(--ek-v1-coral)!important;
}
}
/* ---------- 6c · Compartir reseña: Feed ↔ Story como texto ligero ------- */
/* F10 · El formato deja de ser un par de botones grandes que compiten con
«Compartir»: es un control textual con flecha bidireccional. El único CTA
principal sigue siendo «Compartir». */
/* Los selectores llevan el prefijo `.ek-review-export ` para ganar a la capa
heredada theme-experiences.css (misma especificidad, fichero anterior). */
.ek-review-export .ek-review-export-formats{
display:flex!important;flex:none!important;align-items:center!important;
gap:8px!important;margin:0 0 14px!important;
}
.ek-review-export .ek-review-export-formats button{
flex:none!important;min-height:44px!important;padding:0 2px!important;
border:0!important;border-radius:0!important;background:transparent!important;
box-shadow:none!important;color:var(--ek-v1-coral-dark)!important;
font:400 15px/1.3 var(--ek-font-body)!important;
text-decoration:underline!important;text-underline-offset:4px!important;
text-decoration-thickness:1px!important;
}
.ek-review-export .ek-review-export-formats button[aria-checked="true"]{
color:var(--ek-v1-coral-dark)!important;text-decoration-thickness:2px!important;
}
.ek-review-export .ek-review-export-formats button:is(:hover,:focus-visible){
color:var(--ek-v1-coral-dark)!important;text-decoration-thickness:2px!important;
}
.ek-review-export-arrow{
color:var(--ek-muted,#6b6862);font-size:15px;line-height:1;flex:none;
}
:root[data-ek-theme="dark"] .ek-review-export .ek-review-export-formats button{
color:var(--ek-v1-coral)!important;
}
:root[data-ek-theme="dark"] .ek-review-export-arrow{color:#c9c4bc}
/* Una sola línea cuando el ancho lo permite; nunca texto cortado. */
.ek-review-export .ek-review-export-intro{
margin:0 0 14px!important;max-width:none!important;
font:400 14px/1.45 var(--ek-font-body,"Ekonatura Onest",sans-serif)!important;text-wrap:pretty;
}
/* ---------- 6d · F7 · Un solo indicador de enlace -------------------- */
/* system.css neutraliza el subrayado global (a{text-decoration:none}) y
p a,li a anulan el borde inferior: la raya es el único indicador del
texto corrido. Los enlaces-botón conservan su píldora sin subrayado. */
.reading p a:not(.button):not(.pill),
.reading li a:not(.button):not(.pill){
text-decoration:underline;
text-underline-offset:3px;
text-decoration-thickness:from-font;
}
/* ---------- 7 · Foco ---------- */
:is(a,button,summary,[role="button"],input,select,textarea):focus-visible{
outline:2px solid var(--ek-v1-focus)!important;outline-offset:3px!important;
}
/* ---------- 8 · Artículos y testimonios en claro ---------- */
body.ek-long-article{
--ink:#292d2e;--muted:#6b6862;--sea:#96523e;--cream:#e9e6e0;
--paper:#f5f1eb;--line:#d8d2c8;--moss:#292d2e;
--ek-ink:#292d2e;--ek-muted:#6b6862;--ek-paper:#f5f1eb;--ek-cream:#e9e6e0;
--ek-green:#292d2e;--ek-accent:#96523e;--ek-action:#96523e;
--ek-blue-deep:#292d2e;--ek-blue-soft:#96523e;--ek-teal:#292d2e;
}
body.ek-long-article .reading a,
body.ek-long-article .reading p a,
body.ek-long-article .reading li a{color:var(--ek-v1-coral-dark)!important}
:root[data-ek-theme="dark"] body.ek-long-article .reading a,
:root[data-ek-theme="dark"] body.ek-long-article .reading p a,
:root[data-ek-theme="dark"] body.ek-long-article .reading li a{color:var(--ek-v1-cream)!important}
@media(hover:hover){
:root[data-ek-theme="dark"] body.ek-long-article .reading a:is(:hover,:focus-visible){color:var(--ek-v1-coral)!important}
}
body.ek-long-article .reading :is(h1,h2,h3){font-family:var(--ek-font-heading)!important}
body.ek-long-article :is(p,li,dd,figcaption,blockquote){font-family:var(--ek-font-body)!important}
body.ek-long-article .ek-header .button{
background:transparent!important;color:var(--ek-v1-graphite)!important;border-color:var(--ek-v1-graphite)!important
}
body.ek-long-article .ek-nav a,
body.ek-long-article .ek-explore>summary{color:var(--ek-v1-graphite)}
@media(hover:hover){
body.ek-long-article .ek-header .button:hover{background:var(--ek-v1-coral)!important;color:var(--ek-v1-graphite)!important;border-color:transparent!important}
}
body.ek-long-article .ek-icon{color:var(--ek-v1-graphite)}
body.ek-long-article .ek-header.is-pill .ek-header-inner{
background:rgba(245,241,235,.88)!important;border-color:rgba(41,45,46,.08)!important
}
body.ek-long-article nav.breadcrumbs>*:last-child{color:var(--ek-v1-coral-dark)!important}
body.ek-long-article .breadcrumbs>span{color:rgba(41,45,46,.28)!important}
body.ek-long-article .breadcrumbs a{color:var(--ek-v1-muted,#6b6862)!important}
body.ek-long-article .breadcrumbs a:is(:hover,:focus-visible){color:var(--ek-v1-coral-dark)!important}
/* ---------- 9 · Reseñas (/resenas/ y módulos originales) ----------------
Conservan su maquetación propia; solo se reapuntan los colores heredados
a la paleta V1 para que no quede verde ni azul estructural. */
.ek-originals,.ek-share,.ek-stories{
--ek-ink:#292d2e;--ek-muted:#6b6862;--ek-paper:#f5f1eb;--ek-coral:#96523e;
--ek-accent:var(--ek-coral);--ek-teal:#292d2e;--ek-line:rgba(41,45,46,.20);
--ek-surface-alt:#e9e6e0;--ek-blue-deep:#292d2e;--ek-green:#292d2e;--brand-coral:#96523e
}
main.ek-originals .ek-reviews-cta{background:#292d2e!important;color:#f5f1eb!important}
main.ek-originals .ek-reviews-cta .eyebrow{color:#d2c9c1!important}
main.ek-originals .ek-reviews-cta h3{color:#f5f1eb!important}
main.ek-originals .ek-reviews-cta p{color:#e6e1d9!important}
main.ek-originals .ek-reviews-cta .button{background:#f5f1eb!important;color:#292d2e!important;border-color:#f5f1eb!important}
main.ek-originals .ek-reviews-cta .button:hover{background:#dfa089!important;color:#292d2e!important}
/* ATO-556 · ronda visual móvil 03/11 · revisión del propietario.
Correcciones focales: footer, legibilidad oscuro y fotografía de servicios.
No tocar originales, producción, copy ni comportamiento JS. */
/* Footer: un solo selector sin marco, centrado bajo el copyright (incluida Home). */
body .ek-footer .ek-footer-quickprefs,
body .ek-footer .ek-footer-quickprefs .ek-quick-theme{
border:0!important;box-shadow:none!important;background:transparent!important;
outline:0!important;
}
@media(max-width:700px){
body .ek-footer .ek-footer-close{
display:flex!important;flex-direction:column!important;
align-items:center!important;justify-content:center!important;
text-align:center!important;
}
body .ek-footer .ek-footer-quickprefs{
display:flex!important;align-self:center!important;justify-content:center!important;
width:max-content!important;max-width:100%!important;
margin:10px auto 0!important;padding:0!important;
}
}
/* Menu y acciones en apariencia oscura: texto marfil / coral pálido legible. */
:root[data-ek-theme="dark"]{
--ek-v1-coral:#f4d5c6;
--ek-v1-coral-dark:#f4d5c6;
--ek-coral:#f4d5c6;
--ek-accent:#f4d5c6;
}
:root[data-ek-theme="dark"] body.ek-integrated #ek-menu
[data-menu-level] :is(a,button,summary){
color:#fff8f2!important;
}
:root[data-ek-theme="dark"] body.ek-integrated #ek-menu
[data-menu-level] :is(a,button,summary):is(:hover,:focus-visible){
color:#fff!important;
}
/* Las acciones sobre fondo oscuro usan coral claro sin alterar botones de fondo crema. */
:root[data-ek-theme="dark"] body.ek-integrated :is(.ek-hero-full,.ek-sheet)
:is(a:not(.button),button:not(.button)):where(:not(.ek-sheet-close):not(.ek-sheet-grab)){
--ek-v1-coral:#f4d5c6;
}
/* Editorial hero finish. Contact is the reference and the problem hub keeps its own art direction. */
:root{
--ek-editorial-hero-veil:rgba(49, 45, 40,.38);
--ek-editorial-hero-chroma:rgba(127,127,127,.18);
}
body.ek-integrated:not([data-route="/problemas/"],[data-route="/contacto/"]) .ek-global-hero .ph-stage::before,
body.ek-integrated.ek-concept-page .ek-concept-main .hero>.photo::before{
content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
background:var(--ek-editorial-hero-chroma);mix-blend-mode:saturation;
}
body.ek-integrated:not([data-route="/problemas/"],[data-route="/contacto/"]) .ek-global-hero .ph-overlay{
z-index:1;background:var(--ek-editorial-hero-veil);
}
body.ek-integrated.ek-concept-page .ek-concept-main .hero>.photo::after{
z-index:1;
background:linear-gradient(to bottom,rgba(0,0,0,.34),transparent 32%),var(--ek-editorial-hero-veil)!important;
}
/* ATO-556 · Review móvil ronda anterior · Home conceptual y compartir reseña.
Exclusivo de la preview Home salvo el diálogo de compartir global. */
/* 1) Hero: panel ligeramente más oscuro, sin desenfoque ni sombras añadidas. */
body.ek-concept-page .ek-concept-main .hero-card{
background:rgba(32,34,34,.54)!important;
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
box-shadow:none!important;
}
body.ek-concept-page .ek-concept-main .hero-card :is(h1,p,.eyebrow,a){
text-shadow:none!important;
}
/* 2) Entrada móvil: fotografía entera encima y copy debajo. */
@media(max-width:800px){
body.ek-concept-page .ek-concept-main .entry-card{
display:flex!important;flex-direction:column!important;
grid-template-columns:none!important;min-height:0!important;height:auto!important;
padding:0!important;overflow:hidden!important;
}
body.ek-concept-page .ek-concept-main .entry-card>.photo{
position:relative!important;display:block!important;flex:none!important;
width:100%!important;height:clamp(230px,54vw,335px)!important;
min-height:0!important;max-height:none!important;border-radius:0!important;
}
body.ek-concept-page .ek-concept-main .entry-card>.photo img{
width:100%!important;height:100%!important;object-fit:cover!important;
}
body.ek-concept-page .ek-concept-main .entry-card>.entry-card-content{
box-sizing:border-box!important;width:100%!important;
padding:clamp(22px,5.8vw,30px)!important;
}
}
/* 3) Compartir reseña: formatos como texto, sin recuadros ni flecha decorativa. */
body .ek-review-export .ek-review-export-formats{
display:flex!important;align-items:center!important;
gap:20px!important;padding:0!important;border:0!important;
}
body .ek-review-export .ek-review-export-formats button,
:root[data-ek-theme="dark"] body .ek-review-export .ek-review-export-formats button{
display:inline-flex!important;min-width:0!important;min-height:44px!important;
padding:0!important;border:0!important;border-radius:0!important;
background:transparent!important;box-shadow:none!important;
color:var(--ek-v1-cream)!important;-webkit-text-fill-color:currentColor!important;
font:500 16px/1.4 var(--ek-font-body)!important;
text-decoration:none!important;
}
body .ek-review-export .ek-review-export-formats button[aria-checked="true"],
:root[data-ek-theme="dark"] body .ek-review-export .ek-review-export-formats button[aria-checked="true"]{
background:transparent!important;border:0!important;
text-decoration:underline!important;text-underline-offset:5px!important;
text-decoration-thickness:2px!important;
}
body .ek-review-export .ek-review-export-arrow{display:none!important}
@media(min-width:900px){
body .ek-review-export .ek-review-export-panel{
box-sizing:border-box!important;width:min(740px,calc(100vw - 48px))!important;
max-width:740px!important;
}
body .ek-review-export .ek-review-export-intro{
white-space:nowrap!important;max-width:none!important;
font-size:16px!important;
}
}
@media(max-width:899px){
body .ek-review-export .ek-review-export-intro{
white-space:normal!important;
}
}
/* 4) Presentación de Iván: fotografía editorial grande, sin ancho capado a 450px. */
body.ek-concept-page .ek-concept-main .bio{
grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)!important;
align-items:center!important;
}
body.ek-concept-page .ek-concept-main .bio>.photo{
width:100%!important;max-width:none!important;
aspect-ratio:4/5!important;height:auto!important;
border-radius:24px!important;
}
body.ek-concept-page .ek-concept-main .bio>.photo img{
width:100%!important;height:100%!important;
object-fit:cover!important;object-position:50% 14%!important;
}
@media(max-width:800px){
body.ek-concept-page .ek-concept-main .bio{
grid-template-columns:minmax(0,1fr)!important;
gap:32px!important;
}
body.ek-concept-page .ek-concept-main .bio>.photo{
max-width:none!important;aspect-ratio:4/5!important;
}
}
/* ATO-545 · selector apariencia sin iconos invisibles; vínculos legales con
contraste en ambos temas. El indicador de selección queda BAJO el SVG. */
body.ek-integrated #ek-preferences .ek-pref-options button{
isolation:isolate;
}
body.ek-integrated #ek-preferences .ek-pref-options button::before{
z-index:0!important;
}
body.ek-integrated #ek-preferences .ek-pref-options button svg{
position:relative!important;z-index:1!important;display:block!important;
visibility:visible!important;opacity:1!important;
fill:none!important;stroke:currentColor!important;
width:19px!important;height:19px!important;
}
:root:not([data-ek-theme="dark"]) body.ek-integrated #ek-preferences .ek-pref-options button{
color:#292d2e!important;
}
:root[data-ek-theme="dark"] body.ek-integrated #ek-preferences .ek-pref-options button{
color:#f5f1eb!important;
}
/* El diálogo pertenece a la interfaz, nunca hereda el blanco de los links del footer. */
:root:not([data-ek-theme="dark"]) body.ek-integrated #ek-preferences .ek-pref-links a{
color:#292d2e!important;-webkit-text-fill-color:#292d2e!important;
}
:root[data-ek-theme="dark"] body.ek-integrated #ek-preferences .ek-pref-links a{
color:#f5f1eb!important;-webkit-text-fill-color:#f5f1eb!important;
}
body.ek-integrated #ek-preferences .ek-pref-links a{
text-decoration:underline;text-underline-offset:4px;
}
/* EKNT 07/11/2026 · HOME FLAT REVIEW · ATO-545
* Preview-only: A,C,D,E,F + legibility corrections from owner.
* No content, imagery, markup, navigation logic, semantics or functional changes.
* Preserves visible keyboard focus and >=44px touch controls.
*/
/* A · Navigation: no floating shadow or hover underline, in either mode. */
body.ek-integrated .ek-header .ek-header-inner,
body.ek-integrated .ek-header.is-pill .ek-header-inner{
box-shadow:none!important;
}
body.ek-integrated .ek-header :is(.ek-nav>a,.ek-explore>summary),
body.ek-integrated .ek-header :is(.ek-nav>a,.ek-explore>summary):is(:hover,:focus-visible,[aria-current="page"]){
text-decoration:none!important;
border-bottom-color:transparent!important;
}
body.ek-integrated .ek-header .ek-explore>nav{
background:var(--ek-v1-graphite)!important;
color:var(--ek-v1-cream)!important;
border:0!important;box-shadow:none!important;
}
body.ek-integrated .ek-header .ek-explore>nav a{
color:var(--ek-v1-cream)!important;
-webkit-text-fill-color:var(--ek-v1-cream)!important;
text-decoration:none!important;
}
body.ek-integrated .ek-header .ek-explore>nav a:is(:hover,:focus-visible){
color:var(--ek-v1-coral)!important;
-webkit-text-fill-color:var(--ek-v1-coral)!important;
background:var(--ek-v1-graphite-mid)!important;
text-decoration:none!important;
}
/* All photographic heroes: small, top-only gradient for white navigation;
photo pixels elsewhere and established editorial overlay stay untouched. */
:is(.ek-global-hero,.ek-photo-hero,.ek-home .hero) .ph-stage{
position:absolute;
}
:is(.ek-global-hero,.ek-photo-hero,.ek-home .hero) .ph-stage::after{
content:"";pointer-events:none;position:absolute;inset:0;z-index:2;
background:linear-gradient(to bottom,rgba(0,0,0,.54) 0%,rgba(0,0,0,.29) 13%,rgba(0,0,0,.09) 25%,transparent 38%);
}
/* C · Search remains a modal; one graphite surface, no nested decorative frames. */
body.ek-integrated dialog#ek-search{
background:var(--ek-v1-graphite)!important;
background-color:var(--ek-v1-graphite)!important;
color:var(--ek-v1-cream)!important;
border:0!important;
}
body.ek-integrated #ek-search :is(.ek-search-results,.ek-search-card,.ek-search-field,.ek-search-suggestions){
background:transparent!important;box-shadow:none!important;
}
body.ek-integrated #ek-search :is(.ek-search-card,.ek-search-results>a){
border:0!important;outline:0!important;
}
body.ek-integrated #ek-search :is(.ek-search-input,.ek-search-input::placeholder){
color:var(--ek-v1-cream)!important;
}
body.ek-integrated #ek-search .ek-search-input{
border:0!important;border-bottom:1px solid rgba(245,241,235,.35)!important;
box-shadow:none!important;background:transparent!important;
}
body.ek-integrated #ek-search .ek-search-input:focus-visible{
border-bottom:2px solid var(--ek-v1-coral)!important;
outline:none!important;
}
body.ek-integrated #ek-search .ek-search-suggestions button{
border:0!important;background:var(--ek-v1-graphite-mid)!important;
color:var(--ek-v1-cream)!important;
}
body.ek-integrated #ek-search .ek-search-suggestions button:is(:hover,:focus-visible){
background:rgba(245,241,235,.16)!important;
}
body.ek-integrated #ek-search :is(h2,h3,label,p,small,.ek-result-title,.ek-result-type,.ek-search-description,.ek-search-card a,.ek-search-results a){
color:var(--ek-v1-cream)!important;
}
body.ek-integrated #ek-search :is(a,button,[role="button"]):focus-visible{
outline:2px solid var(--ek-v1-coral)!important;outline-offset:3px!important;
}
/* D/E · Flat graphite surfaces; preserve photo tiles, click areas and semantics. */
body.ek-integrated .ek-home .home-problems :is(.directory-item,.ek-problem-card,.problem-card),
body.ek-integrated .ek-home .home-problems :is(.directory-item,.ek-problem-card,.problem-card):is(:hover,:focus-within){
box-shadow:none!important;border-color:transparent!important;outline-offset:3px;
}
body.ek-integrated .ek-home .home-experience .ek-review-card.review{
border:0!important;box-shadow:none!important;border-radius:14px!important;
background:var(--ek-v1-graphite-mid)!important;
}
body.ek-integrated .ek-home .home-experience .ek-review-card.review blockquote{
font-family:var(--ek-font-heading)!important;
}
body.ek-integrated .ek-home :is(.button--secondary,.home-text-link){
box-shadow:none!important;
}
body.ek-integrated .ek-home .home-problems :is(.directory-item,.ek-problem-card,.problem-card) a:focus-visible{
outline:2px solid var(--ek-v1-coral)!important;outline-offset:3px!important;
}
/* F · Small optical adjustment: unchanged section order and responsive layout. */
@media(min-width:701px){
body.ek-integrated .ek-home .home-block{padding-block:clamp(48px,5vw,68px)}
}
@media(max-width:700px){
body.ek-integrated .ek-home .home-block{padding-block:clamp(34px,5.5vw,42px)}
}
/* EKNT 07/11 · Production-home component parity (isolated preview branch).
* The published Home is .ek-concept-page / .ek-concept-main, NOT .ek-home.
* Keep every existing card, photo, content block, route and interaction.
*/
/* Upper hero contrast: limit the treatment to the region behind navigation. */
body.ek-concept-page .ek-concept-main .hero>.photo::after{
background:
linear-gradient(to bottom,rgba(0,0,0,.52),rgba(0,0,0,.24) 15%,transparent 34%),
linear-gradient(90deg,rgba(21,29,25,.24),transparent 64%),
linear-gradient(to top,rgba(21,29,25,.22),transparent 45%)!important;
}
/* Flatten existing Home discovery, problem tiles and entry cards, without
removing the visual grouping supplied by the graphite/stone backgrounds. */
body.ek-concept-page .ek-concept-main .home-discovery .search-block{
border:0!important;box-shadow:none!important;
background:var(--ek-v1-stone)!important;
}
body.ek-concept-page .ek-concept-main .home-discovery .quick-links{
border-bottom:0!important;
}
body.ek-concept-page .ek-concept-main #problemas .problem-card,
body.ek-concept-page .ek-concept-main .entry-card{
border:0!important;box-shadow:none!important;
}
body.ek-concept-page .ek-concept-main .home-experience .ek-review-card.review{
border:0!important;box-shadow:none!important;border-radius:14px!important;
}
body.ek-concept-page .ek-concept-main .home-experience .ek-review-card.review blockquote{
font-family:var(--ek-font-heading)!important;
}
/* Primary call-to-action stays prominent; text links stay text, with no
duplicated decorative underline on hover. Keyboard focus remains visible. */
body.ek-concept-page .ek-concept-main :is(.text-link,.entry-card .bottom a){
text-decoration:none!important;box-shadow:none!important;
}
body.ek-concept-page .ek-concept-main :is(.text-link,.entry-card .bottom a):focus-visible,
body.ek-concept-page .ek-concept-main #problemas .problem-card:focus-visible{
outline:2px solid var(--ek-v1-coral)!important;outline-offset:4px!important;
}
/* Only small reductions in whitespace; no grid or section restructuring. */
@media(min-width:701px){
body.ek-concept-page .ek-concept-main > .section:not(.home-experience):not(.contact){
padding-block:clamp(52px,6vw,78px)!important;
}
}
@media(max-width:700px){
body.ek-concept-page .ek-concept-main > .section:not(.home-experience):not(.contact){
padding-block:clamp(38px,7vw,56px)!important;
}
}
/* Maintain graphite surface hierarchy when the owner switches theme. */
:root[data-ek-theme="dark"] body.ek-concept-page .ek-concept-main .home-discovery .search-block{
background:var(--ek-v1-graphite-mid)!important;
}
:root[data-ek-theme="dark"] body.ek-concept-page .ek-concept-main :is(#problemas .problem-card,.entry-card){
background:var(--ek-v1-graphite-mid)!important;
border:0!important;
}
/* Ekonatura · Search Interaction PASS v1.0 · 07/11/2026
Shared visual contract for the GLOBAL Home search on every route and
the /problemas/ side-drawer/mobile-sheet. Keep both existing engines,
result destinations, content and event handlers. This is NOT a new search.
Approved Home: padded result surface, subtle hover, no boxed-outlining
or underline duplication; neutral graphite/cream in light and dark. */
body.ek-integrated #ek-search,
body.ek-integrated[data-route="/problemas/"] .ek-search-drawer{
--ek-search-ink:#f5f1eb;
--ek-search-muted:#d1cbc5;
--ek-search-surface:#292d2e;
--ek-search-hover:rgba(245,241,235,.10);
--ek-search-focus:#dfa089;
--ek-search-space-desktop:18px 20px;
--ek-search-space-mobile:17px 16px;
color:var(--ek-search-ink)!important;
}
/* Global search surface. This file is the existing shared search contract,
loaded on every route after legacy theme/chrome styles. The global menu
invokes this one modal; do not duplicate it or change its search engine. */
body.ek-integrated dialog#ek-search{
background:var(--ek-search-surface)!important;
background-image:none!important;
color:var(--ek-search-ink)!important;
border:0!important;
box-shadow:none!important;
color-scheme:dark;
}
body.ek-integrated #ek-search :is(.ek-search-field,.ek-search-results,.ek-search-suggestions){
background:transparent!important;
border:0!important;
box-shadow:none!important;
}
body.ek-integrated #ek-search .ek-search-input{
box-sizing:border-box!important;
border:0!important;
border-bottom:0!important;
border-radius:0!important;
background:transparent!important;
background-image:none!important;
color:var(--ek-search-ink)!important;
caret-color:#dc7a35!important;
box-shadow:none!important;
outline:0!important;
text-decoration:none!important;
}
:root[data-ek-theme="dark"] body.ek-integrated #ek-search .ek-search-input{
caret-color:var(--ek-v1-coral,#dfa089)!important;
}
body.ek-integrated #ek-search .ek-search-input:focus-visible{
border:0!important;
border-bottom:0!important;
outline:0!important;
box-shadow:none!important;
}
body.ek-integrated #ek-search .ek-search-field{
border:0!important;
border-bottom:0!important;
outline:0!important;
background:transparent!important;
background-image:none!important;
box-shadow:none!important;
}
/* Use the input's native 1px blinking insertion caret, not decorative
pseudo-elements or a second line. Never override reduced-motion settings. */
body.ek-integrated #ek-search .ek-search-suggestions button{
border:0!important;
box-shadow:none!important;
background:rgba(245,241,235,.065)!important;
color:var(--ek-search-ink)!important;
}
body.ek-integrated #ek-search .ek-search-suggestions button:is(:hover,:focus-visible){
background:rgba(245,241,235,.11)!important;
color:var(--ek-search-ink)!important;
}
body.ek-integrated #ek-search .ek-dialog-head [data-close]{
border:0!important;
background:transparent!important;
box-shadow:none!important;
color:var(--ek-search-ink)!important;
}
body.ek-integrated #ek-search :is(.ek-search-input,.ek-search-suggestions button,.ek-dialog-head [data-close]):focus-visible{
outline-offset:3px!important;
}
/* Same single result affordance, on every page. In Home the earlier
.ek-concept-page rule already declares the same geometry, so it stays
pixel-consistent. No visual border at rest or when hovered. */
body.ek-integrated #ek-search :is(.ek-search-card,.ek-search-results>a){
box-sizing:border-box!important;
min-width:0!important;
padding:var(--ek-search-space-desktop)!important;
border:0!important;
border-radius:16px!important;
background:transparent!important;
box-shadow:none!important;
text-decoration:none!important;
outline:0!important;
transition:background-color .16s ease;
}
body.ek-integrated #ek-search :is(.ek-search-card,.ek-search-results>a):is(:hover,:focus-within){
background:var(--ek-search-hover)!important;
border-color:transparent!important;
text-decoration:none!important;
}
body.ek-integrated #ek-search :is(.ek-search-card,.ek-search-results>a):focus:not(:focus-visible){
outline:none!important;
}
body.ek-integrated #ek-search .ek-search-results>a:focus-visible,
body.ek-integrated #ek-search .ek-search-card:focus-within:has(:focus-visible){
outline:2px solid var(--ek-search-focus)!important;
outline-offset:2px!important;
}
body.ek-integrated #ek-search :is(.ek-search-results>a,.ek-search-card) :is(h3,p,small,span,.ek-result-title,.ek-result-type,.ek-search-description){
color:var(--ek-search-ink)!important;
text-decoration:none!important;
}
body.ek-integrated #ek-search :is(.ek-search-results>a,.ek-search-card) small,
body.ek-integrated #ek-search .ek-result-type{
color:var(--ek-search-muted)!important;
}
body.ek-integrated #ek-search .ek-search-results{
gap:4px!important;
border:0!important;
padding-top:4px!important;
}
body.ek-integrated #ek-search .ek-search-results>a{
border:0!important;
text-decoration:none!important;
}
body.ek-integrated #ek-search .ek-search-card :is(.ek-search-expand,a){
min-height:44px;
}
/* No underline anywhere inside search result hit targets, even when
global link :hover / :focus styles would normally reintroduce one. */
body.ek-integrated #ek-search :is(.ek-search-results>a,.ek-search-card,.ek-search-results>a :is(a,span,h3,p,strong,small),.ek-search-card :is(a,span,h3,p,strong,small)):is(:hover,:focus,:focus-visible,:focus-within),
body.ek-integrated #ek-search :is(.ek-search-results>a,.ek-search-card) :is(a,span,h3,p,strong,small),
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-results :is(a,a:hover,a:focus-visible,a *,a:hover *,a:focus-visible *){
text-decoration:none!important;
text-decoration-line:none!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-results :is(.search-hit a,a.symptom-result):is(:hover,:focus-visible){
color:var(--ek-search-ink)!important;
background:var(--ek-search-hover)!important;
}
/* One sensible palette for the Problems results surface; the overall shell
remains a drawer on desktop, an accessible bottom sheet on mobile. */
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer{
background:var(--ek-search-surface)!important;
color:var(--ek-search-ink)!important;
border:0!important;
box-shadow:-12px 0 44px rgba(0,0,0,.16)!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-head{
box-sizing:border-box!important;
gap:20px!important;
padding:34px 32px 16px!important;
border:0!important;
border-bottom:0!important;
background:transparent!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-head h2{
font:400 clamp(26px,2.4vw,32px)/1.2 var(--ek-font-heading,Georgia,serif)!important;
color:var(--ek-search-ink)!important;
margin:0 0 7px!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer :is(.ek-search-drawer-eyebrow,.symptom-status){
color:var(--ek-search-muted)!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-close{
box-sizing:border-box!important;
flex:0 0 44px!important;
display:grid!important;place-items:center!important;
width:44px!important;height:44px!important;
min-width:44px!important;min-height:44px!important;
border:1px solid rgba(245,241,235,.48)!important;
border-radius:50%!important;
background:transparent!important;color:var(--ek-search-ink)!important;
padding:0!important;box-shadow:none!important;
}
@media(hover:hover) and (pointer:fine){
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-close:hover{
background:var(--ek-search-hover)!important;
}
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-close:focus-visible{
outline:2px solid var(--ek-search-focus)!important;
outline-offset:2px!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-body{
box-sizing:border-box!important;
padding:10px 24px calc(32px + env(safe-area-inset-bottom,0px))!important;
min-height:0!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-results{
display:grid!important;
grid-template-columns:minmax(0,1fr)!important;
gap:4px!important;
padding:0!important;margin:0!important;
list-style:none!important;
max-width:100%!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-results>li,
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-result{
box-sizing:border-box!important;
min-width:0!important;
border:0!important;
background:transparent!important;
box-shadow:none!important;
margin:0!important;
padding:0!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-results :is(.search-hit a,a.symptom-result){
box-sizing:border-box!important;
display:block!important;
width:100%!important;
min-height:44px!important;
padding:var(--ek-search-space-desktop)!important;
border:0!important;
border-radius:16px!important;
background:transparent!important;
color:var(--ek-search-ink)!important;
box-shadow:none!important;
text-decoration:none!important;
outline:0!important;
transition:background-color .16s ease;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-results :is(.search-hit a,a.symptom-result):is(:hover,:focus-visible){
background:var(--ek-search-hover)!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-results :is(.search-hit a,a.symptom-result):focus-visible{
outline:2px solid var(--ek-search-focus)!important;
outline-offset:2px!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-results :is(.search-hit a,a.symptom-result) :is(h2,h3,h4,p,span,small,strong){
color:inherit!important;
text-decoration:none!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-results :is(.search-hit a,a.symptom-result) :is(h2,h3,h4,.search-hit-title){
font:400 clamp(23px,2vw,28px)/1.22 var(--ek-font-heading,Georgia,serif)!important;
margin:0 0 6px!important;
letter-spacing:normal!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-results :is(.search-hit a,a.symptom-result) :is(p,small,.search-hit-excerpt,.search-hit-description){
font:400 14px/1.52 var(--ek-font-body,system-ui,sans-serif)!important;
color:var(--ek-search-muted)!important;
margin:0!important;
overflow-wrap:anywhere;
}
/* Drawer is one list — not a dense, multi-column card wall — at all widths.
Header stays readable and close target never clips on a 390px screen. */
@media(max-width:700px){
body.ek-integrated #ek-search :is(.ek-search-card,.ek-search-results>a){
padding:var(--ek-search-space-mobile)!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer{
border:0!important;
border-radius:24px 24px 0 0!important;
box-shadow:0 -10px 40px rgba(0,0,0,.16)!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-head{
position:relative!important;
align-items:center!important;
padding:42px 18px 15px!important;
gap:14px!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-grab{
top:13px!important;width:44px!important;height:5px!important;
border-radius:999px!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-head h2{
font-size:25px!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-body{
padding:10px 12px calc(24px + env(safe-area-inset-bottom,0px))!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-results :is(.search-hit a,a.symptom-result){
padding:var(--ek-search-space-mobile)!important;
}
}
/* Canonical inline symptom search (Home/Problems/article entry):
the earlier modal-only CSS never targeted this real input. Remove the
rectangular frame and both decorative baselines without changing JS. */
body.ek-integrated :is(.home-search,.hub-search,.symptom-search) .symptom-field{
border:0!important;border-bottom:0!important;outline:0!important;
box-shadow:none!important;background:transparent!important;
}
body.ek-integrated :is(.home-search,.hub-search,.symptom-search) .symptom-field::before,
body.ek-integrated :is(.home-search,.hub-search,.symptom-search) .symptom-field::after{
content:none!important;display:none!important;
}
body.ek-integrated :is(.home-search,.hub-search,.symptom-search) .symptom-field input{
border:0!important;border-bottom:0!important;outline:0!important;
box-shadow:none!important;background:transparent!important;
background-image:none!important;border-radius:0!important;
text-decoration:none!important;caret-color:#dc7a35!important;
}
:root[data-ek-theme="dark"] body.ek-integrated :is(.home-search,.hub-search,.symptom-search) .symptom-field input{
caret-color:var(--ek-v1-coral,#dfa089)!important;
}
body.ek-integrated :is(.home-search,.hub-search,.symptom-search) .symptom-field input:focus-visible{
outline:0!important;border:0!important;box-shadow:none!important;
}
/* One quiet search icon, never its own underline. */
body.ek-integrated :is(.home-search,.hub-search,.symptom-search) .symptom-submit{
border:0!important;border-bottom:0!important;
outline-offset:3px;background:transparent!important;box-shadow:none!important;
text-decoration:none!important;
}
body.ek-integrated :is(.home-search,.hub-search,.symptom-search) .symptom-submit::after{
content:none!important;display:none!important;
}
/* Shared search renderer: ....
A text underline, border or pseudo-rule must never survive hover;
the graphite highlight remains the sole hover affordance. */
body.ek-integrated .symptom-results :is(a.symptom-result,.search-hit>a,.search-hit a),
body.ek-integrated .symptom-results :is(a.symptom-result,.search-hit>a,.search-hit a):is(:hover,:focus-visible,:active),
body.ek-integrated .ek-search-drawer .symptom-results a.symptom-result:is(:hover,:focus-visible,:active){
text-decoration:none!important;text-decoration-line:none!important;
border:0!important;border-bottom:0!important;box-shadow:none!important;
background-image:none!important;
}
body.ek-integrated .ek-search-drawer .symptom-results>li,
body.ek-integrated .ek-search-drawer .symptom-results>li:is(:hover,:focus-within){
border:0!important;border-top:0!important;border-bottom:0!important;
box-shadow:none!important;background-image:none!important;
}
body.ek-integrated .ek-search-drawer .symptom-results a.symptom-result :is(.symptom-result__heading,strong,small,span,mark),
body.ek-integrated .ek-search-drawer .symptom-results a.symptom-result:is(:hover,:focus-visible,:active) *{
text-decoration:none!important;text-decoration-line:none!important;
border:0!important;border-bottom:0!important;box-shadow:none!important;
background-image:none!important;
}
body.ek-integrated .ek-search-drawer .symptom-results a.symptom-result::before,
body.ek-integrated .ek-search-drawer .symptom-results a.symptom-result::after,
body.ek-integrated .ek-search-drawer .symptom-results a.symptom-result .symptom-result__heading::before,
body.ek-integrated .ek-search-drawer .symptom-results a.symptom-result .symptom-result__heading::after,
body.ek-integrated .ek-search-drawer .symptom-results a.symptom-result strong::before,
body.ek-integrated .ek-search-drawer .symptom-results a.symptom-result strong::after{
content:none!important;display:none!important;border:0!important;box-shadow:none!important;
}
body.ek-integrated .symptom-results :is(a.symptom-result,.search-hit>a,.search-hit a):is(:hover,:focus-visible){
background:var(--ek-v1-graphite-mid,#35393a)!important;
color:var(--ek-v1-cream,#f5f1eb)!important;
}
/* ATO-545 · La raya bajo el título NO era un borde ni un text-decoration:
era un gradiente de 1px en el `background` del , desplegado por el
hover con `background-size:100% 1px`. `background-image:none` no lo borra,
porque en un gradiente la imagen ES la propia propiedad `background`.
Aquí se anula el relleno del título en el resultado real del drawer
(`.search-hit > a > strong`) y en el renderer compartido
(`a.symptom-result`): la superficie grafito queda como único realce. */
body.ek-integrated .symptom-results :is(a.symptom-result,.search-hit>a,.search-hit a) strong,
body.ek-integrated .symptom-results :is(a.symptom-result,.search-hit>a,.search-hit a):is(:hover,:focus-visible,:active) strong,
body.ek-integrated .symptom-results :is(a.symptom-result,.search-hit>a,.search-hit a) :is(strong,b,em,mark,small,span,p){
background:none!important;
background-image:none!important;
background-size:0 0!important;
box-shadow:none!important;
border:0!important;border-bottom:0!important;
text-decoration:none!important;text-decoration-line:none!important;
}
body.ek-integrated .symptom-results :is(a.symptom-result,.search-hit>a,.search-hit a) strong{
transition:color .2s!important;
}
@media(prefers-reduced-motion:reduce){
body.ek-integrated #ek-search :is(.ek-search-card,.ek-search-results>a),
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-results a{
transition:none!important;
}
}
/* Compact, aligned drawer heading — visual QA feedback 07/11/2026.
Heading is metadata, not a second result card. The header text baseline
aligns with result card text: desktop 24+20=44px; mobile 12+16=28px.
Existing X remains a 44px touch target and mobile grab stays visible. */
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-head{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
padding:20px 28px 8px 44px!important;
gap:16px!important;
min-height:0!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-head>div{
flex:1 1 auto!important;
min-width:0!important;
margin:0!important;
padding:0!important;
text-align:left!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-eyebrow{
display:none!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-head h2{
font-size:20px!important;
line-height:1.24!important;
font-weight:400!important;
margin:0 0 4px!important;
text-align:left!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-status{
display:block!important;
margin:0!important;
padding:0!important;
font-size:12px!important;
line-height:1.45!important;
text-align:left!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-body{
padding-top:12px!important;
}
@media(max-width:700px){
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-head{
padding:38px 16px 8px 28px!important;
align-items:center!important;
gap:10px!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-head h2{
font-size:19px!important;
line-height:1.25!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-status{
font-size:12px!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-body{
padding-top:12px!important;
}
}
/* EKNT · Cross-page UI contract · 07/11/2026.
* One visual language for photo hero glass, full-reading dialogs, review
* catalogue and shared review export, search drawer and dark/light.
* Keep semantics, route content, and click handling in original components.
* The backdrop-filter samples ONLY the pixels physically behind the element.
*/
:root{
--ek-frost-ink:#f5f1eb;
--ek-frost-glass:linear-gradient(112deg,rgba(26,30,31,.70) 0%,rgba(29,33,34,.69) 58%,rgba(31,34,34,.67) 100%);
--ek-frost-modal-glass:linear-gradient(112deg,rgba(26,30,31,.76),rgba(29,33,34,.72));
--ek-frost-modal-blur:18px;
--ek-frost-scrim:rgba(12,17,19,.22);
--ek-frost-scrim-blur:4px;
--ek-frost-close-target:44px;
--ek-share-panel-surface:#2b3031;
--ek-frost-blur:14px;
--ek-frost-contrast:rgba(245,241,235,.34);
--ek-frost-corner:24px;
}
body.ek-integrated :is(
.ek-global-hero .ek-hero-card,
.ek-hub-hero .ph-card--hub,
.ek-showcase-hero .ph-card,
.ek-photo-hero .ph-card,
.ek-restored-hero .ph-card,
.ek-concept-main .hero-card
){
background:var(--ek-frost-glass)!important;
background-color:transparent!important;
border:0!important;
border-radius:var(--ek-frost-corner)!important;
box-shadow:none!important;
-webkit-backdrop-filter:blur(var(--ek-frost-blur)) saturate(.92)!important;
backdrop-filter:blur(var(--ek-frost-blur)) saturate(.92)!important;
color:var(--ek-frost-ink)!important;
isolation:isolate;
}
/* No giant pseudo-element filter behind a local photographic card. */
body.ek-integrated .ek-global-hero .ek-hero-card::before,
body.ek-integrated .ek-concept-main .hero-card::before{
filter:none!important;box-shadow:none!important;
}
/* The large image is NEVER blurred globally; only the card above it. */
body.ek-integrated :is(.ek-global-hero,.ek-hub-hero,.ek-showcase-hero,.ek-photo-hero) .ph-stage img{
-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
body.ek-integrated .ek-global-hero .ek-hero-expand,
body.ek-integrated .ek-concept-main .hero-card a,
body.ek-integrated .ek-global-hero .ek-hero-card button{
color:var(--ek-frost-ink)!important;
}
body.ek-integrated .ek-global-hero .ek-hero-expand:focus-visible,
body.ek-integrated .ek-concept-main .hero-card a:focus-visible{
outline:2px solid var(--ek-frost-ink)!important;outline-offset:3px!important;
}
@media(min-width:701px){
body.ek-integrated .ek-sheet.ek-hero-modal .ek-sheet-panel,
body .ek-sheet.ek-hero-modal .ek-sheet-panel{
background:var(--ek-frost-modal-glass)!important;
border:0!important;border-radius:24px!important;
color:var(--ek-frost-ink)!important;
box-shadow:none!important;
-webkit-backdrop-filter:blur(var(--ek-frost-modal-blur)) saturate(.9)!important;
backdrop-filter:blur(var(--ek-frost-modal-blur)) saturate(.9)!important;
}
body .ek-sheet.ek-hero-modal .ek-sheet-head{
background:transparent!important;color:inherit!important;
border:0!important;box-shadow:none!important;
}
body .ek-sheet.ek-hero-modal .ek-sheet-close{
color:var(--ek-frost-ink)!important;
background:transparent!important;
border:1px solid var(--ek-frost-contrast)!important;
border-radius:50%!important;
}
}
/* The full-screen sheet shell must NOT inherit the opaque cream/graphite
background from legacy .ek-sheet. Otherwise the backdrop and glass modal
only sample a solid surface, especially noticeable in light mode. */
body .ek-sheet.ek-hero-modal,
:root[data-ek-theme="dark"] body .ek-sheet.ek-hero-modal{
background:transparent!important;
background-color:transparent!important;
background-image:none!important;
}
body .ek-sheet.ek-hero-modal .ek-sheet-scrim,
:root[data-ek-theme="dark"] body .ek-sheet.ek-hero-modal .ek-sheet-scrim{
background:var(--ek-frost-scrim)!important;
backdrop-filter:blur(var(--ek-frost-scrim-blur))!important;
-webkit-backdrop-filter:blur(var(--ek-frost-scrim-blur))!important;
}
body .ek-sheet.ek-hero-modal .ek-sheet-close:focus-visible{
outline:2px solid currentColor!important;outline-offset:3px!important;
}
/* Shared hero-read surface: the SAME translucent glass on mobile as desktop.
The older theme sheets otherwise repaint mobile as an opaque gray block. */
body .ek-sheet.ek-hero-modal .ek-sheet-close{
display:grid!important;place-items:center!important;
box-sizing:border-box!important;
flex:0 0 var(--ek-frost-close-target)!important;
width:var(--ek-frost-close-target)!important;
height:var(--ek-frost-close-target)!important;
min-width:var(--ek-frost-close-target)!important;
min-height:var(--ek-frost-close-target)!important;
border-radius:50%!important;
color:var(--ek-frost-ink)!important;
background:transparent!important;
box-shadow:none!important;
}
body .ek-sheet.ek-hero-modal .ek-sheet-close svg{
display:block!important;width:20px!important;height:20px!important;
stroke:currentColor!important;opacity:1!important;
}
body .ek-sheet.ek-hero-modal .ek-sheet-body .ek-hero-full,
body .ek-sheet.ek-hero-modal .ek-sheet-body .ek-hero-full :is(p,li,h2,h3){
color:var(--ek-frost-ink)!important;
}
body .ek-sheet.ek-hero-modal .ek-sheet-body .ek-hero-full :is(a.button,.button){
color:var(--ek-frost-ink)!important;
border-color:rgba(245,241,235,.65)!important;
}
@media(max-width:700px){
body .ek-sheet.ek-hero-modal .ek-sheet-panel,
:root[data-ek-theme="dark"] body .ek-sheet.ek-hero-modal .ek-sheet-panel{
background:var(--ek-frost-modal-glass)!important;
-webkit-backdrop-filter:blur(var(--ek-frost-modal-blur)) saturate(.9)!important;
backdrop-filter:blur(var(--ek-frost-modal-blur)) saturate(.9)!important;
color:var(--ek-frost-ink)!important;
border:0!important;border-radius:24px 24px 0 0!important;
box-shadow:none!important;
}
}
/* EKONATURA · Shared header stencil · ATO-545/546 · 07 Nov 2026
* One global photographic/editorial nav component on every public route.
* Existing markup, search controller, Explore dropdown and mobile menu stay
* unchanged. Use the same soft graphite glass in light/dark and at rest/scroll.
* Previously scoped only to /problemas/; no URL-specific header overrides. */
:root{
--ek-header-glass:rgba(29,33,34,.91);
--ek-header-glass-photo:rgba(19,24,25,.12);
--ek-header-glass-ink:var(--ek-v1-cream,#f5f1eb);
--ek-header-glass-line:rgba(245,241,235,.66);
}
body.ek-integrated .ek-header .ek-header-inner,
body.ek-integrated .ek-header.is-pill .ek-header-inner{
background:var(--ek-header-glass)!important;
background-image:none!important;
color:var(--ek-header-glass-ink)!important;
border:0!important;
border-radius:999px!important;
box-shadow:none!important;
-webkit-backdrop-filter:blur(14px) saturate(.85)!important;
backdrop-filter:blur(14px) saturate(.85)!important;
}
/* The screenshot is a lightly tinted frosted pill over a photograph.
* On plain paper/cream pages the same component needs a stronger surface
* for readable white navigation. Compact scroll state remains dark. */
body.ek-integrated:has(
.ek-global-hero,.ek-photo-hero,.ek-showcase-hero,.ek-restored-hero,
.ek-hub-hero,.ek-concept-main .hero,main.ek-photo-hero-page
) .ek-header:not(.is-pill) .ek-header-inner{
background:var(--ek-header-glass-photo)!important;
-webkit-backdrop-filter:blur(6px) saturate(.92)!important;
backdrop-filter:blur(6px) saturate(.92)!important;
}
body.ek-integrated .ek-header .brand,
body.ek-integrated .ek-header .ek-nav>a,
body.ek-integrated .ek-header .ek-explore>summary,
body.ek-integrated .ek-header :is(.ek-search-open,.ek-menu,.ek-icon){
color:var(--ek-header-glass-ink)!important;
-webkit-text-fill-color:var(--ek-header-glass-ink)!important;
}
body.ek-integrated .ek-header .brand img{
filter:brightness(0) invert(1)!important;
}
body.ek-integrated .ek-header .ek-header-inner>a.button,
body.ek-integrated .ek-header.is-pill .ek-header-inner>a.button{
background:transparent!important;
background-image:none!important;
color:var(--ek-header-glass-ink)!important;
-webkit-text-fill-color:var(--ek-header-glass-ink)!important;
border:1px solid var(--ek-header-glass-line)!important;
border-radius:999px!important;
box-shadow:none!important;
}
body.ek-integrated .ek-header .ek-header-inner>a.button:is(:hover,:focus-visible),
body.ek-integrated .ek-header.is-pill .ek-header-inner>a.button:is(:hover,:focus-visible){
background:rgba(245,241,235,.12)!important;
color:var(--ek-header-glass-ink)!important;
-webkit-text-fill-color:var(--ek-header-glass-ink)!important;
border-color:var(--ek-header-glass-ink)!important;
}
body.ek-integrated .ek-header :is(.ek-nav>a,.ek-explore>summary):is(:hover,:focus-visible){
color:var(--ek-header-glass-ink)!important;
-webkit-text-fill-color:var(--ek-header-glass-ink)!important;
text-decoration:none!important;
}
body.ek-integrated .ek-header :is(.ek-nav>a,.ek-explore>summary)[aria-current="page"]{
color:var(--ek-header-glass-ink)!important;
text-decoration:underline!important;
text-decoration-color:rgba(245,241,235,.76)!important;
text-decoration-thickness:1px!important;
text-underline-offset:5px!important;
}
body.ek-integrated .ek-header :is(.ek-icon,.ek-search-open):hover{
background:rgba(245,241,235,.10)!important;
}
body.ek-integrated .ek-header .ek-explore>nav{
background:rgba(41,45,46,.97)!important;
color:var(--ek-header-glass-ink)!important;
border:0!important;
box-shadow:none!important;
-webkit-backdrop-filter:blur(14px)!important;
backdrop-filter:blur(14px)!important;
}
body.ek-integrated .ek-header .ek-explore>nav a{
color:var(--ek-header-glass-ink)!important;
-webkit-text-fill-color:var(--ek-header-glass-ink)!important;
}
@supports not (backdrop-filter:blur(1px)){
body.ek-integrated .ek-header .ek-header-inner{
background:rgba(29,33,34,.95)!important;
}
}
/* Compact, aligned results drawer — matching the search cards' text edge:
desktop 24px body inset + 20px item inset = 44px.
phone 12px inset + 16px item inset = 28px. */
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-head{
padding:21px 24px 14px 44px!important;
min-height:0!important;align-items:start!important;
gap:14px!important;
border:0!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-eyebrow{
display:block!important;
margin:0 0 8px!important;
color:#d1cbc5!important;
font:500 10px/1.35 var(--ek-font-body,system-ui,sans-serif)!important;
letter-spacing:.08em!important;
text-transform:uppercase!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-head h2{
font:400 22px/1.2 var(--ek-font-heading,serif)!important;
margin:0 0 5px!important;
color:#f5f1eb!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-status{
font:400 12px/1.45 var(--ek-font-body,system-ui,sans-serif)!important;
color:#d1cbc5!important;
margin:0!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-close{
display:grid!important;place-items:center!important;
flex:0 0 44px!important;width:44px!important;height:44px!important;
color:#f5f1eb!important;border:1px solid rgba(245,241,235,.5)!important;
border-radius:50%!important;background:transparent!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-close svg{
width:20px!important;height:20px!important;stroke:currentColor!important;
}
@media(max-width:700px){
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-head{
padding:42px 16px 12px 28px!important;align-items:center!important;
gap:12px!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-head h2{
font-size:21px!important;line-height:1.2!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-eyebrow{
font-size:10px!important;
}
}
/* Review catalogue only: quotations get the editorial serif;
Stories' actual body remains the approved Onest sans. */
body.ek-integrated[data-route="/resenas/"] .ek-reviews-list .ek-exp-quote{
font-family:"Ekonatura Geist Serif",serif!important;
font-weight:400!important;
}
body .ek-stories .ek-stories-text{
font-family:var(--ek-font-body,"Ekonatura Onest",system-ui,sans-serif)!important;
}
body .ek-stories .ek-stories-nav{
display:grid!important;place-items:center!important;
width:44px!important;height:44px!important;
border:1px solid rgba(245,241,235,.6)!important;
border-radius:50%!important;
background:rgba(41,45,46,.93)!important;
color:#f5f1eb!important;
-webkit-text-fill-color:#f5f1eb!important;
font-size:0!important;box-shadow:none!important;
}
body .ek-stories .ek-stories-nav svg{
display:block!important;width:20px!important;height:20px!important;
fill:none!important;stroke:currentColor!important;
opacity:1!important;visibility:visible!important;
}
body .ek-stories .ek-stories-nav:focus-visible{outline:2px solid #dfa089!important;outline-offset:3px!important}
/* Trust header: verified provider count lives in source; theme-safe stars. */
body.ek-integrated[data-route="/resenas/"] .ek-reviews-tools .stars{
color:#292d2e!important;-webkit-text-fill-color:#292d2e!important;
}
:root[data-ek-theme="dark"] body.ek-integrated[data-route="/resenas/"] .ek-reviews-tools .stars{
color:#f5f1eb!important;-webkit-text-fill-color:#f5f1eb!important;
}
/* Ekonatura photo finish · Contact is the untouched visual reference.
* One shared hero component; only photographic grading differs per source.
* No replaced files, new tokens, added overlays or per-page components.
* Recorded values: saturation / contrast / brightness / neutral scrim alpha.
* About .80/.93/.95/.24; Reviews .78/.93/.95/.24;
* FAQ .80/.94/.96/.23; Osteopathy .81/.94/.95/.25;
* Body ITV .81/.94/.95/.28 (stronger veil by request).
*/
body.ek-integrated[data-route="/sobre-mi/"] .ek-global-hero .ph-stage img{
filter:saturate(.80) contrast(.93) brightness(.95)!important;
}
body.ek-integrated[data-route="/resenas/"] .ek-global-hero .ph-stage img{
filter:saturate(.78) contrast(.93) brightness(.95)!important;
}
body.ek-integrated[data-route="/preguntas-habituales/"] .ek-global-hero .ph-stage img{
filter:saturate(.80) contrast(.94) brightness(.96)!important;
}
body.ek-integrated[data-route="/osteopatia/"] .ek-global-hero .ph-stage img{
filter:saturate(.81) contrast(.94) brightness(.95)!important;
}
body.ek-integrated[data-route="/itv-corporal/"] .ek-global-hero .ph-stage img{
filter:saturate(.81) contrast(.94) brightness(.95)!important;
}
body.ek-integrated[data-route="/sobre-mi/"] .ek-global-hero .ph-overlay,
body.ek-integrated[data-route="/resenas/"] .ek-global-hero .ph-overlay{
background:rgba(20,24,26,.24)!important;
}
body.ek-integrated[data-route="/preguntas-habituales/"] .ek-global-hero .ph-overlay{
background:rgba(20,24,26,.23)!important;
}
body.ek-integrated[data-route="/osteopatia/"] .ek-global-hero .ph-overlay{
background:rgba(20,24,26,.25)!important;
}
body.ek-integrated[data-route="/itv-corporal/"] .ek-global-hero .ph-overlay{
background:rgba(20,24,26,.28)!important;
}
/* Single canonical share renderer on Home, catalog, Stories and inline cards.
Do not repaint the generated review image; the canvas always stays cream. */
/* Identical Home-approved graphite for sharing on every route, including Stories.
Preserve one JS renderer and one set of export formats. */
body .ek-review-export .ek-review-export-panel,
:root[data-ek-theme="light"] body .ek-review-export .ek-review-export-panel,
:root[data-ek-theme="dark"] body .ek-review-export .ek-review-export-panel{
background:var(--ek-share-panel-surface)!important;color:#f5f1eb!important;
border:1px solid rgba(245,241,235,.26)!important;border-radius:26px!important;
box-shadow:0 18px 55px rgba(7,10,11,.25)!important;
}
body .ek-review-export .ek-review-export-panel :is(h2,p,.ek-review-export-intro,.ek-review-export-note,.ek-review-export-status){
color:#f5f1eb!important;-webkit-text-fill-color:#f5f1eb!important;
}
body .ek-review-export .ek-review-export-panel header [data-share-close]{
color:#f5f1eb!important;
background:transparent!important;
border:1px solid rgba(245,241,235,.42)!important;
border-radius:50%!important;
}
body .ek-review-export .ek-review-export-panel .ek-review-export-preview{
background:#e6e3dd!important;
}
body .ek-review-export .ek-review-export-actions [data-share-native]{
background:#f5f1eb!important;color:#292d2e!important;
border:0!important;border-radius:999px!important;
}
body .ek-review-export .ek-review-export-formats button{
color:#f5f1eb!important;-webkit-text-fill-color:#f5f1eb!important;
background:transparent!important;
}
body .ek-review-export .ek-review-export-formats button[aria-checked="true"]{
color:#dfa089!important;-webkit-text-fill-color:#dfa089!important;
}
@media(max-width:700px){
body .ek-review-export .ek-review-export-panel{
border:0!important;border-radius:26px 26px 0 0!important;
}
}
@media(prefers-reduced-motion:reduce){
body .ek-stories .ek-stories-nav,
body.ek-integrated .ek-global-hero .ek-hero-card{
transition:none!important;
}
}
/* /problemas/ · flat search drawer + desktop drag affordance · 07/11/2026 */
/* Keep the header aligned with the result text. This is a flat, quiet surface. */
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-f5-search-sidebar.ek-search-drawer{
border:0!important;box-shadow:none!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-head{
width:100%!important;max-width:none!important;box-sizing:border-box!important;
padding:21px 16px 12px 46px!important;
border:0!important;background:transparent!important;box-shadow:none!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-head>div{
flex:1 1 auto!important;min-width:0!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-head h2{
font-size:19px!important;line-height:1.25!important;
letter-spacing:normal!important;margin-bottom:4px!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-eyebrow{
margin-bottom:5px!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-close{
border:0!important;box-shadow:none!important;background:transparent!important;
}
/* Mirror the scale and rhythm of the global search, not a second huge index. */
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .symptom-results{
gap:0!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .search-hit a{
display:block!important;min-height:44px!important;
padding:14px 12px!important;
background:transparent!important;border:0!important;box-shadow:none!important;
border-radius:0!important;text-shadow:none!important;transform:none!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .search-hit :is(h2,h3,strong,.search-hit-title,.symptom-result-title){
font:400 21px/1.24 var(--ek-font-heading,Georgia,serif)!important;
letter-spacing:-.015em!important;margin:0 0 5px!important;
text-shadow:none!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .search-hit :is(p,small,.search-hit-description,.symptom-result-description){
font-size:13px!important;line-height:1.45!important;margin:0!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .search-hit a:is(:hover,:focus-visible){
background:rgba(245,241,235,.06)!important;color:#f5f1eb!important;
}
/* The rail handles navigation by dragging, but a simple click still follows a card. */
@media(min-width:901px) and (hover:hover) and (pointer:fine){
body.ek-integrated[data-route="/problemas/"] .ek-f2-group>.ek-f2-rail,
body.ek-integrated[data-route="/problemas/"] .ek-f2-group>.ek-f2-rail :is(.ek-ed-card,.ek-ed-card-hit,.ek-ed-card-hit *,img){
cursor:grab!important;
}
body.ek-integrated[data-route="/problemas/"] .ek-f2-group>.ek-f2-rail:active,
body.ek-integrated[data-route="/problemas/"] .ek-f2-group>.ek-f2-rail:active :is(.ek-ed-card,.ek-ed-card-hit,.ek-ed-card-hit *,img){
cursor:grabbing!important;
}
}
@media(max-width:700px){
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-head{
padding:36px 16px 12px 32px!important;align-items:start!important;gap:8px!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .ek-search-drawer-head h2{
font-size:19px!important;line-height:1.25!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .search-hit :is(h2,h3,strong,.search-hit-title,.symptom-result-title){
font-size:20px!important;
}
body.ek-integrated[data-route="/problemas/"] .hub-search .ek-search-drawer .search-hit a{
padding:13px 16px!important;
}
}
/* EKNT · Shared reading surface contrast · theme-independent */
/* Sheet, full review reader and share UI are autonomous dark components.
Keep the paper-coloured exported image; do not borrow page theme ink. */
:root{
--ek-reader-surface:#292d2e;
--ek-reader-text:#f5f1eb;
--ek-reader-muted:#c8ccc7;
--ek-reader-rule:rgba(245,241,235,.22);
}
body .ek-sheet .ek-sheet-panel,
body .ek-review-dialog{
background:var(--ek-reader-surface)!important;
background-image:none!important;
color:var(--ek-reader-text)!important;
border:0!important;
box-shadow:none!important;
color-scheme:dark;
}
body .ek-sheet .ek-sheet-head{
background:transparent!important;
color:var(--ek-reader-text)!important;
border:0!important;box-shadow:none!important;
}
body .ek-sheet .ek-sheet-grab{background:rgba(245,241,235,.7)!important}
body .ek-sheet .ek-sheet-close,
body .ek-review-dialog :is(.ek-review-dialog-close,.ek-review-dialog-nav button){
color:var(--ek-reader-text)!important;
-webkit-text-fill-color:var(--ek-reader-text)!important;
background:transparent!important;
box-shadow:none!important;
}
body .ek-sheet .ek-sheet-title,
body .ek-sheet .ek-sheet-body,
body .ek-sheet .ek-sheet-body :is(
.ph-copy,.ek-hub-intro-preview,.ph-more-body,.ek-hub-extra-copy,
.ek-hero-full,.ek-exp-body,.review-expanded,.ek-ed-card-desc,
.home-topic-more,.owner-response,.ek-exp-reply,
p,blockquote,li,h2,h3,h4,strong,span,small,a
),
body .ek-review-dialog :is(
.ek-review-dialog-head h2,.ek-review-dialog-body,
.ek-review-dialog-body p,.ek-review-dialog-body blockquote,
.ek-review-dialog-body li,.ek-review-dialog-body h2,
.ek-review-dialog-body h3,.ek-review-dialog-body strong,
.ek-review-dialog-body span,.ek-review-dialog-body a,
.ek-review-dialog-body small
){
color:var(--ek-reader-text)!important;
-webkit-text-fill-color:var(--ek-reader-text)!important;
opacity:1!important;
}
body .ek-sheet .ek-sheet-body :is(.review-kicker,.ek-exp-label),
body .ek-review-dialog .ek-review-dialog-body :is(.review-kicker,.ek-exp-label){
color:var(--ek-reader-muted)!important;
-webkit-text-fill-color:var(--ek-reader-muted)!important;
}
body .ek-sheet .ek-sheet-body :is(.owner-response,.ek-exp-reply),
body .ek-review-dialog .ek-review-dialog-body :is(.owner-response,.ek-exp-reply){
background:transparent!important;box-shadow:none!important;
border:0!important;border-top:1px solid var(--ek-reader-rule)!important;
border-radius:0!important;
}
body .ek-sheet .ek-sheet-body :is(a,button):focus-visible,
body .ek-review-dialog :is(a,button):focus-visible,
body .ek-review-export .ek-review-export-panel :is(a,button):focus-visible{
outline:2px solid var(--ek-reader-text)!important;
outline-offset:3px!important;
}
/* Share controls use the same high-contrast ink in either page theme.
Exclude the generated cream preview and native light action button. */
body .ek-review-export .ek-review-export-panel{
color-scheme:dark;color:var(--ek-reader-text)!important;
}
body .ek-review-export .ek-review-export-panel :is(
header h2,.ek-review-export-intro,.ek-review-export-note,
.ek-review-export-status,.ek-review-export-formats button
){
color:var(--ek-reader-text)!important;
-webkit-text-fill-color:var(--ek-reader-text)!important;
}
/* ATO-553 · F1B · Mobile drawer navigation, single owner.
Uses the existing #ek-menu dialog (native focus trap / Escape) as a
accessible left-hand drawer with a backdrop. No new overlay libraries.
The existing root/Explore hierarchy and destinations are preserved. */
@media(max-width:800px){
body.ek-integrated dialog#ek-menu[open],
:root[data-ek-theme="dark"] body.ek-integrated dialog#ek-menu[open]{
position:fixed!important;inset:0 auto 0 0!important;left:0!important;right:auto!important;
box-sizing:border-box!important;display:flex!important;flex-direction:column!important;
width:min(88vw,480px)!important;max-width:min(88vw,480px)!important;
height:100dvh!important;max-height:100dvh!important;min-height:100dvh!important;
margin:0!important;
padding:max(16px,env(safe-area-inset-top,0px)) clamp(20px,5vw,32px)
max(18px,env(safe-area-inset-bottom,0px))!important;
border:0!important;border-radius:0 18px 18px 0!important;
background:#292d2e!important;color:#f5f1eb!important;
background-image:none!important;box-shadow:none!important;
overflow:hidden!important;overscroll-behavior:contain!important;
}
/* Closed state must beat theme-specific rules. The drawer is mounted
in HTML but cannot paint or intercept clicks before showModal(). */
html body.ek-integrated dialog#ek-menu:not([open]),
html[data-ek-theme] body.ek-integrated dialog#ek-menu:not([open]){
display:none!important;visibility:hidden!important;pointer-events:none!important
}
body.ek-integrated #ek-menu .ek-dialog-head{
flex:0 0 auto!important;display:flex!important;align-items:center!important;
justify-content:space-between!important;gap:14px!important;
margin:0 0 20px!important;padding:0 0 14px!important;
border-bottom:1px solid #6a6a66!important;
}
body.ek-integrated #ek-menu .ek-dialog-head h2{
font:400 clamp(22px,6vw,27px)/1.2 var(--ek-font-heading,Georgia,serif)!important;
letter-spacing:-.02em!important;margin:0!important;color:#f5f1eb!important;
}
body.ek-integrated #ek-menu .ek-dialog-head [data-close]{
display:grid!important;place-items:center!important;flex:none!important;
width:auto!important;height:44px!important;min-width:89px!important;
margin:0!important;padding:9px 12px!important;border:1px solid #6a6a66!important;
border-radius:999px!important;background:transparent!important;color:#f5f1eb!important;
display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;
font:500 14px/1.2 var(--ek-font-body,system-ui,sans-serif)!important;
}
body.ek-integrated #ek-menu nav.ek-mobile-levels{
display:flex!important;flex-direction:column!important;
min-height:0!important;flex:1 1 auto!important;width:100%!important;
overflow:hidden!important;background:transparent!important;
}
body.ek-integrated #ek-menu nav.ek-mobile-levels [data-menu-level]{
box-sizing:border-box!important;display:flex!important;flex-direction:column!important;
flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;
overscroll-behavior:contain!important;
padding:0 1px 2px!important;margin:0!important;background:transparent!important;
}
body.ek-integrated #ek-menu nav.ek-mobile-levels [data-menu-level][hidden]{
display:none!important
}
body.ek-integrated #ek-menu nav.ek-mobile-levels [data-menu-level]>:is(a,button):not(.ek-mobile-booking-cta):not(.ek-mobile-call-cta){
display:flex!important;align-items:center!important;flex:0 0 auto!important;
box-sizing:border-box!important;width:100%!important;min-height:54px!important;
padding:12px 10px!important;margin:0!important;border:0!important;
border-bottom:0!important;border-radius:10px!important;
background:transparent!important;color:#f5f1eb!important;
-webkit-text-fill-color:#f5f1eb!important;
font:400 clamp(17px,4.9vw,21px)/1.35 var(--ek-font-body,system-ui,sans-serif)!important;
text-decoration:none!important;
}
body.ek-integrated #ek-menu nav.ek-mobile-levels [data-menu-level]>[data-menu-forward] svg{
margin-left:auto!important;flex:0 0 18px!important;width:18px!important;height:18px!important
}
body.ek-integrated #ek-menu nav.ek-mobile-levels [data-menu-level]>:is(a,button):is(:hover,:focus-visible,[aria-current="page"]){
background:#383c3d!important;
}
/* Both original actions remain links, but read as large tappable buttons. */
body.ek-integrated #ek-menu nav.ek-mobile-levels [data-menu-level="root"]>a.ek-mobile-booking-cta{
display:flex!important;align-items:center!important;justify-content:center!important;
flex:0 0 auto!important;box-sizing:border-box!important;
width:100%!important;min-height:54px!important;
margin:auto 0 10px!important;padding:13px 18px!important;
border:1px solid #f5f1eb!important;border-radius:12px!important;
background:#f5f1eb!important;box-shadow:none!important;
color:#292d2e!important;-webkit-text-fill-color:#292d2e!important;
font:650 16px/1.3 var(--ek-font-body,system-ui,sans-serif)!important;
text-align:center!important;text-decoration:none!important;
}
body.ek-integrated #ek-menu nav.ek-mobile-levels [data-menu-level="root"]>a.ek-mobile-call-cta{
display:flex!important;align-items:center!important;justify-content:center!important;
flex:0 0 auto!important;box-sizing:border-box!important;
width:100%!important;min-height:54px!important;
margin:0!important;padding:13px 18px!important;
border:1px solid #f5f1eb!important;border-radius:12px!important;
background:transparent!important;box-shadow:none!important;
color:#f5f1eb!important;-webkit-text-fill-color:#f5f1eb!important;
font:600 16px/1.3 var(--ek-font-body,system-ui,sans-serif)!important;
text-align:center!important;text-decoration:none!important;
}
body.ek-integrated #ek-menu nav.ek-mobile-levels [data-menu-level="root"]>a.ek-mobile-booking-cta::before,
body.ek-integrated #ek-menu nav.ek-mobile-levels [data-menu-level="root"]>a.ek-mobile-booking-cta::after{
content:none!important;display:none!important;
}
body.ek-integrated #ek-menu nav.ek-mobile-levels [data-menu-level="root"]>a.ek-mobile-booking-cta:is(:hover,:focus-visible){
background:#e7e1da!important;color:#292d2e!important;
-webkit-text-fill-color:#292d2e!important;
}
body.ek-integrated #ek-menu nav.ek-mobile-levels [data-menu-level="root"]>a.ek-mobile-call-cta:is(:hover,:focus-visible){
background:#383c3d!important;color:#f5f1eb!important;
-webkit-text-fill-color:#f5f1eb!important;
}
body.ek-integrated #ek-menu nav.ek-mobile-levels [data-menu-level="root"]>a:is(.ek-mobile-booking-cta,.ek-mobile-call-cta):focus-visible,
body.ek-integrated #ek-menu :is([data-close],[data-menu-forward],[data-menu-back],a):focus-visible{
outline:2px solid #dfa089!important;outline-offset:2px!important;
}
}
@media(max-width:800px) and (max-height:610px){
body.ek-integrated #ek-menu .ek-dialog-head{margin-bottom:9px!important;padding-bottom:8px!important}
body.ek-integrated #ek-menu nav.ek-mobile-levels [data-menu-level]>:is(a,button):not(.ek-mobile-booking-cta):not(.ek-mobile-call-cta){
min-height:48px!important;padding:9px 10px!important;font-size:17px!important
}
body.ek-integrated #ek-menu nav.ek-mobile-levels [data-menu-level="root"]>a:is(.ek-mobile-booking-cta,.ek-mobile-call-cta){
min-height:48px!important;padding:10px 15px!important
}
}
/* F1B: drawer owns its layer. Underlying sticky header and floating
controls are hidden while it is open; no new DOM overlay or footer band. */
@media(max-width:800px){
body.ek-integrated dialog#ek-menu::backdrop{
background:rgba(18,22,24,.32)!important;backdrop-filter:blur(1px)!important;
}
body.ek-integrated:has(dialog#ek-menu[open]) > .ek-header,
body.ek-integrated:has(dialog#ek-menu[open]) > .ek-index-button,
body.ek-integrated:has(dialog#ek-menu[open]) > .ek-toc-fab,
body.ek-integrated:has(dialog#ek-menu[open]) > .top-button,
body.ek-integrated:has(dialog#ek-menu[open]) > .ek-reading-indicator,
body.ek-integrated:has(dialog#ek-menu[open]) > .ek-page-share{
visibility:hidden!important;pointer-events:none!important;
}
body.ek-integrated #ek-menu .ek-menu-close svg{
width:17px!important;height:17px!important;flex:none!important;stroke:currentColor!important;
}
}
/* State-driven fallback: no legacy sticky header or floating buttons can
appear over the drawer. JavaScript also sets inline visibility. */
@media(max-width:800px){
html.ek-mobile-menu-active .ek-header,
html.ek-mobile-menu-active .ek-index-button,
html.ek-mobile-menu-active .ek-toc-fab,
html.ek-mobile-menu-active .top-button,
html.ek-mobile-menu-active .ek-reading-indicator,
html.ek-mobile-menu-active .ek-page-share{
visibility:hidden!important;pointer-events:none!important;
}
html.ek-mobile-menu-active body.ek-integrated dialog#ek-menu{
isolation:isolate!important;z-index:2147483647!important;
}
}
/* F1B: visible only while drawer is open. Retains the intelligent pill
header in normal browsing; prevents it covering drawer on Android. */
@media(max-width:800px){
html.ek-mobile-menu-active body .ek-header,
html.ek-mobile-menu-active body .ek-header.is-pill,
html.ek-mobile-menu-active body .ek-header.is-hidden{
display:none!important;
}
body.ek-integrated #ek-menu nav.ek-mobile-levels [data-menu-level="root"]>a.ek-mobile-booking-cta,
body.ek-integrated #ek-menu nav.ek-mobile-levels [data-menu-level="root"]>a.ek-mobile-call-cta{
border-radius:999px!important;
}
}