/* =========================================================
   MATYKART · DISEÑO APROBADO · NO EDITAR
   (los textos e imágenes se cambian en contenido/contenido.js)
   ========================================================= */
/* MatykArt theme · main styles (fonts are loaded by functions.php) */

html:has(.mk), body:has(.mk){overflow-x:clip}

.mk{
  --mk-cream:#FFFFFF; --mk-paper:#FFFFFF; --mk-red:#E5224E; --mk-red-dark:#C0153C;
  --mk-ink:#171717; --mk-text:#171717; --mk-muted:rgba(23,23,23,.68); --mk-teal:#087F8C;
  --mk-yellow:#087F8C; --mk-line:#ECECEC; --mk-r:18px;
  --mk-shadow:0 10px 30px rgba(23,23,23,.10);
  font-family:'DM Sans',system-ui,sans-serif; font-size:16px; line-height:1.6;
  color:var(--mk-text); background:var(--mk-cream); -webkit-font-smoothing:antialiased;
}
.mk *, .mk *::before, .mk *::after{box-sizing:border-box}
.mk img{max-width:100%; height:auto; display:block}
.mk a{color:inherit; text-decoration:none}
.mk h1,.mk h2,.mk h3,.mk h4{font-family:'DM Sans',sans-serif; color:var(--mk-ink); line-height:1.08; margin:0; letter-spacing:-.01em}
.mk p{margin:0 0 1em}
.mk ul{list-style:none; margin:0; padding:0}
.mk-wrap{max-width:1200px; margin:0 auto; padding:0 24px}
.mk-section{padding:80px 0}
.mk-red{color:var(--mk-red)!important}
.mk-brush{font-family:'Caveat Brush',cursive!important; font-weight:400!important; letter-spacing:0}
.mk-eyebrow{font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--mk-ink); margin-bottom:14px}
.mk-lead{font-size:1.02rem; max-width:520px}
.mk-heart{color:var(--mk-red); font-family:'Caveat Brush',cursive; display:inline-block; transform:rotate(12deg)}

/* ---------- Títulos ---------- */
.mk-h-brush{font-family:'Caveat Brush',cursive!important; font-weight:400!important; font-size:clamp(2.6rem,6vw,4.2rem)!important; line-height:1!important; isolation:isolate}
.mk-under{position:relative; display:inline-block}
.mk-under::after{content:""; position:absolute; left:-2%; right:-4%; bottom:.06em; height:.14em; background:var(--mk-red); border-radius:40px; transform:rotate(-2deg); z-index:-1}
.mk-h-page{font-size:clamp(2.4rem,5.5vw,3.6rem)!important; font-weight:800!important}

/* ---------- Botones ---------- */
.mk-btn{display:inline-flex; align-items:center; gap:10px; background:var(--mk-red); color:#fff!important; padding:14px 26px; border-radius:50px; font-family:'DM Sans',sans-serif!important; font-weight:800!important; font-size:13px!important; letter-spacing:.06em; text-transform:uppercase; border:0; cursor:pointer; transition:.2s}
.mk-btn:hover{background:var(--mk-red-dark); transform:translateY(-2px)}
.mk-btn-dark{background:var(--mk-ink)}
.mk-btn-light{background:#fff; color:var(--mk-ink)!important}
.mk-btn-light:hover{background:var(--mk-yellow)}
.mk-btn-sm{padding:10px 18px}
.mk-link{font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--mk-red)!important}
.mk-link:hover{text-decoration:underline}

/* ---------- Encabezado ---------- */
.mk-header{background:var(--mk-cream); border-bottom:1px solid var(--mk-line)}
.mk-header-in{position:relative; display:flex; align-items:center; justify-content:space-between; height:86px}
.mk-logo{display:inline-flex; align-items:center; line-height:0}
.mk-logo span{font-family:'DM Sans',sans-serif; font-size:.52rem; letter-spacing:.25em; text-transform:uppercase; font-weight:600; margin:-2px 0 0 36px}
.mk-logo img{height:74px; width:auto}
.mk-footer .mk-logo img{height:78px}
.mk-nav{display:flex; gap:30px; align-items:center}
.mk-nav a{font-size:.9rem; font-weight:500; color:var(--mk-ink); padding:6px 0; border-bottom:2px solid transparent; transition:.2s}
.mk-nav a:hover, .mk-nav a.is-active{color:var(--mk-red); border-color:var(--mk-red)}
.mk-menu-toggle{display:none}
.mk-burger{display:none; cursor:pointer; font-size:1.9rem; color:var(--mk-ink)}

/* ---------- Manchas de pintura ---------- */
.mk-splash{position:absolute; z-index:0; pointer-events:none; border-radius:42% 58% 63% 37% / 41% 44% 56% 59%}
.mk-splash.s1{width:230px; height:160px; background:var(--mk-yellow); top:-50px; left:36%; transform:rotate(-12deg); opacity:.75}
.mk-splash.s2{width:150px; height:250px; background:var(--mk-red); top:-70px; right:-50px; transform:rotate(25deg)}
.mk-splash.s3{width:130px; height:130px; background:var(--mk-red); bottom:40px; left:-60px; opacity:.85}
.mk-splash.s4{width:280px; height:130px; background:var(--mk-yellow); bottom:-60px; right:18%; opacity:.5}
.mk-dots{position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.35;
  background-image:radial-gradient(var(--mk-ink) 1.2px, transparent 1.4px); background-size:28px 28px;
  -webkit-mask-image:linear-gradient(120deg, transparent 55%, #000); mask-image:linear-gradient(120deg, transparent 55%, #000)}

/* ---------- Hero (inicio) ---------- */
.mk-hero{position:relative; overflow:hidden; padding:56px 0 48px}
.mk-hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.05fr .95fr; gap:32px; align-items:center}
.mk-hero h1{font-size:clamp(2.8rem,6vw,4.6rem); font-weight:800; margin-bottom:18px}
.mk-hero h1 .mk-brush{color:var(--mk-red); font-size:1.18em; display:inline-block; transform:rotate(-3deg); line-height:.9}
.mk-hero-art{position:relative}
.mk-note{position:absolute; font-family:'Caveat',cursive; font-weight:700; font-size:1.9rem; line-height:1.05; color:var(--mk-ink); transform:rotate(-8deg)}
.mk-hero-art .mk-note{top:2%; right:-4%}
.mk-hero-photo{position:relative}
.mk-hero-photo img{border-radius:28px; aspect-ratio:4/5; object-fit:cover; width:100%; box-shadow:var(--mk-shadow)}
.mk-hero-photo .mk-paper-note{top:-14px; right:-8px}
.mk-social{display:flex; gap:12px; margin-top:26px}
.mk-social a{width:42px; height:42px; border-radius:50%; background:var(--mk-ink); color:#fff!important; display:grid; place-items:center; font-weight:800; font-size:.85rem; transition:.2s}
.mk-social a:hover{background:var(--mk-red)}
.mk-social svg{width:19px; height:19px}

/* ---------- Estadísticas ---------- */
.mk-stats{position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); background:var(--mk-paper); border-radius:var(--mk-r); box-shadow:var(--mk-shadow); margin-top:40px; padding:22px 10px}
.mk-stat{text-align:center; padding:4px 10px; border-left:1px solid var(--mk-line)}
.mk-stat:first-child{border-left:0}
.mk-stat b{display:block; font-size:clamp(1.8rem,3.5vw,2.5rem); font-weight:800; color:var(--mk-red); line-height:1.1}
.mk-stat span{font-size:.82rem; font-weight:600; color:var(--mk-ink)}

/* ---------- Cabecera de sección ---------- */
.mk-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px; margin-bottom:26px}

/* ---------- Filtro del portafolio (sin JavaScript) ---------- */
.mk-filter>input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.mk-filter-bar{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px}
.mk-filter-bar label{cursor:pointer; padding:9px 22px; border-radius:50px; background:#F3F3F3; font-size:.82rem; font-weight:600; color:var(--mk-ink); transition:.2s}
.mk-filter-bar label:hover{background:#E6E6E6}
#mkf-all:checked~.mk-filter-bar label[for="mkf-all"],
#mkf-ill:checked~.mk-filter-bar label[for="mkf-ill"],
#mkf-bra:checked~.mk-filter-bar label[for="mkf-bra"],
#mkf-gra:checked~.mk-filter-bar label[for="mkf-gra"],
#mkf-per:checked~.mk-filter-bar label[for="mkf-per"]{background:var(--mk-red); color:#fff}
#mkf-ill:checked~.mk-grid .mk-card:not(.cat-ill),
#mkf-bra:checked~.mk-grid .mk-card:not(.cat-bra),
#mkf-gra:checked~.mk-grid .mk-card:not(.cat-gra),
#mkf-per:checked~.mk-grid .mk-card:not(.cat-per){display:none}

/* ---------- Tarjetas de trabajos ---------- */
.mk-grid{display:grid; gap:22px}
.mk-grid-6{grid-template-columns:repeat(6,1fr)}
.mk-grid-3{grid-template-columns:repeat(3,1fr)}
.mk-card{display:block}
.mk-card-img{border-radius:14px; overflow:hidden; background:#F3F3F3; aspect-ratio:1/1; margin-bottom:12px}
.mk-grid-3 .mk-card-img{aspect-ratio:4/3}
.mk-card-img img{width:100%; height:100%; object-fit:cover; transition:transform .4s}
.mk-card:hover .mk-card-img img{transform:scale(1.05)}
.mk-card h3{font-size:.95rem; font-weight:700; margin-bottom:2px}
.mk-card p{font-size:.84rem; color:var(--mk-muted); margin:0}

/* ---------- Bloques en dos columnas ---------- */
.mk-split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
.mk-about{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center}
.mk-photo{position:relative}
.mk-photo>img{border-radius:22px; aspect-ratio:4/5; object-fit:cover; width:100%; box-shadow:var(--mk-shadow)}
.mk-paper-note{position:absolute; background:var(--mk-paper); padding:14px 18px; font-family:'Caveat',cursive; font-weight:700; font-size:1.5rem; line-height:1.1; color:var(--mk-ink); box-shadow:0 8px 20px rgba(0,0,0,.12); transform:rotate(4deg); z-index:2}
.mk-paper-note::before{content:""; position:absolute; top:-10px; left:50%; width:70px; height:20px; margin-left:-35px; background:rgba(8,127,140,.5); transform:rotate(-4deg)}
.mk-photo .mk-paper-note{bottom:18px; right:-18px}

/* ---------- Servicios ---------- */
.mk-services{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.mk-service{background:var(--mk-paper); border:1px solid var(--mk-line); border-radius:var(--mk-r); padding:30px 22px; text-align:center; transition:.25s}
.mk-service:hover{transform:translateY(-6px); box-shadow:var(--mk-shadow)}
.mk-icon{width:70px; height:70px; margin:0 auto 16px; border-radius:50%; background:#FDE8ED; color:var(--mk-red); display:grid; place-items:center}
.mk-icon svg{width:34px; height:34px}
.mk-service h3{font-family:'Caveat Brush',cursive; font-weight:400; font-size:1.9rem; margin-bottom:8px}
.mk-service p{font-size:.86rem; color:var(--mk-muted)}

/* ---------- Banner verde (CTA) ---------- */
.mk-cta{display:grid; grid-template-columns:1fr 1fr; border-radius:24px; overflow:hidden; background:var(--mk-teal); margin-top:48px}
.mk-cta-img img{width:100%; height:100%; object-fit:cover; min-height:280px}
.mk-cta-body{padding:48px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:22px}
.mk-cta-body h2{color:#fff; font-size:clamp(1.8rem,3.5vw,2.6rem); font-weight:700}

/* ---------- Blog ---------- */
.mk-post{background:var(--mk-paper); border-radius:var(--mk-r); overflow:hidden; box-shadow:0 4px 16px rgba(23,23,23,.06); display:flex; flex-direction:column}
.mk-post-img{aspect-ratio:4/3; overflow:hidden}
.mk-post-img img{width:100%; height:100%; object-fit:cover; transition:transform .4s}
.mk-post:hover .mk-post-img img{transform:scale(1.05)}
.mk-post-body{padding:18px 18px 22px; display:flex; flex-direction:column; flex:1}
.mk-post h3{font-size:1rem; font-weight:700; margin-bottom:6px}
.mk-post p{font-size:.85rem; color:var(--mk-muted)}
.mk-meta{font-size:.75rem; color:var(--mk-muted); margin:auto 0 14px; display:flex; gap:14px}

/* ---------- Contacto ---------- */
.mk-contact{position:relative; background:var(--mk-paper); border-radius:24px; padding:40px; box-shadow:var(--mk-shadow); overflow:hidden}
.mk-contact-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:end}
.mk-form{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px}
.mk-form .mk-full{grid-column:1/-1}
.mk-form input, .mk-form textarea{width:100%; font:inherit; font-size:.9rem; padding:13px 16px; border:1px solid var(--mk-line); border-radius:10px; background:#fff; color:var(--mk-ink)}
.mk-form textarea{min-height:130px; resize:vertical}
.mk-form input:focus, .mk-form textarea:focus{outline:2px solid var(--mk-red); border-color:transparent}
.mk-form .mk-btn{justify-self:start}
.mk-info{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:32px; padding-top:24px; border-top:1px solid var(--mk-line)}
.mk-info-item{display:flex; gap:10px; font-size:.8rem; line-height:1.4}
.mk-info-item svg{flex:none; width:26px; height:26px; color:var(--mk-red)}
.mk-info-item b{display:block; color:var(--mk-ink)}

/* ---------- FAQ ---------- */
.mk-dark{background:var(--mk-ink); color:#E9E3DA}
.mk-dark h2, .mk-dark h3{color:#fff}
.mk-faq{display:grid; grid-template-columns:1fr 1fr; gap:12px 22px; align-items:start}
.mk-faq details{border:1px solid var(--mk-line); border-radius:12px; background:var(--mk-paper)}
.mk-dark .mk-faq details{background:transparent; border-color:rgba(255,255,255,.18)}
.mk-faq summary{cursor:pointer; list-style:none; padding:16px 50px 16px 20px; font-weight:600; font-size:.92rem; position:relative; color:var(--mk-ink)}
.mk-dark .mk-faq summary{color:#fff}
.mk-faq summary::-webkit-details-marker{display:none}
.mk-faq summary::after{content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:1.4rem; font-weight:400; color:var(--mk-red)}
.mk-faq details[open] summary::after{content:"−"}
.mk-faq details p{padding:0 20px 18px; margin:0; font-size:.88rem}

/* ---------- Encabezado de páginas internas ---------- */
.mk-pagehead{position:relative; overflow:hidden; padding:48px 0 56px}
.mk-pagehead-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; position:relative; z-index:1}
.mk-crumbs{font-size:.8rem; color:var(--mk-muted); margin-bottom:12px}
.mk-crumbs a:hover{color:var(--mk-red)}
.mk-pagehead h1{margin-bottom:16px}
.mk-pagehead-art{position:relative; width:100%; max-width:400px; justify-self:end}

/* ---------- Pie de página ---------- */
.mk-footer{background:var(--mk-ink); color:#CFC8BE; padding:64px 0 28px}
.mk-footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:36px; align-items:start}
.mk-footer .mk-logo{color:#fff; margin-bottom:16px}
.mk-footer h4{color:#fff; font-size:.9rem; margin-bottom:14px}
.mk-footer li{margin-bottom:8px; font-size:.85rem}
.mk-footer a:hover{color:var(--mk-red)}
.mk-footer p{font-size:.85rem; max-width:320px}
.mk-footer .mk-social a{background:rgba(255,255,255,.1)}
.mk-footer-note{background:var(--mk-paper); color:var(--mk-ink); font-family:'Caveat',cursive; font-weight:700; font-size:1.9rem; line-height:1.05; padding:18px 24px; transform:rotate(3deg); display:inline-block; position:relative; margin-bottom:20px}
.mk-copy{border-top:1px solid rgba(255,255,255,.12); margin-top:44px; padding-top:22px; text-align:center; font-size:.78rem; color:#8F877E}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .mk-hero-grid{grid-template-columns:1fr 1fr}
  .mk-hero-text{grid-column:1/-1}
  .mk-grid-6{grid-template-columns:repeat(3,1fr)}
  .mk-split{grid-template-columns:1fr; gap:64px}
  .mk-footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .mk-burger{display:block}
  .mk-logo img{height:52px}
  .mk-nav{display:none; position:absolute; top:86px; left:0; right:0; z-index:20; background:var(--mk-cream); flex-direction:column; align-items:flex-start; padding:18px 24px; gap:12px; border-bottom:1px solid var(--mk-line); box-shadow:var(--mk-shadow)}
  .mk-menu-toggle:checked~.mk-nav{display:flex}
}
@media (max-width:760px){
  .mk-section{padding:56px 0}
  .mk-hero-grid, .mk-pagehead-grid, .mk-about, .mk-cta, .mk-contact-grid, .mk-faq{grid-template-columns:1fr}
  .mk-hero-art .mk-note{right:0}
  .mk-stats{grid-template-columns:1fr 1fr; row-gap:18px}
  .mk-stat:nth-child(3){border-left:0}
  .mk-grid-6, .mk-grid-3, .mk-services, .mk-info{grid-template-columns:1fr 1fr}
  .mk-contact{padding:26px}
  .mk-contact-art{display:none}
  .mk-cta-body{padding:32px}
  .mk-pagehead-art{justify-self:center}
  .mk-photo .mk-paper-note{right:8px}
}
@media (max-width:480px){
  .mk-grid-3, .mk-services, .mk-form, .mk-footer-grid{grid-template-columns:1fr}
}

/* Tarjetas sobre fondo blanco */
.mk-post, .mk-stats{border:1px solid var(--mk-line)}

/* =========================================================
   TIPOGRAFÍA Y JERARQUÍA DE COLOR · MATYKART
   Chewy    -> títulos y subtítulos
   Pacifico -> palabra destacada, nombre y notas (solo frases cortas)
   DM Sans  -> párrafos, menú, botones (13 px / 800)
   Negro #171717 · Rojo #E5224E · Azul petróleo #087F8C · Blanco #FFFFFF
   ========================================================= */
.mk h1,.mk h2,.mk h3,.mk h4{font-family:'Chewy','DM Sans',sans-serif!important; font-weight:400!important; letter-spacing:.01em}

/* Nivel 1 · Título principal (hero) */
.mk-hero h1{font-size:clamp(3rem,7vw,5.2rem); line-height:1.02}
.mk-hero h1 .mk-brush,.mk-brush{font-family:'Pacifico','DM Sans',sans-serif!important; color:var(--mk-red); line-height:1.35}
.mk-hero h1 .mk-brush{font-size:.95em; transform:rotate(-4deg)}

/* Nivel 2 · Título de página y de sección */
.mk-h-page{font-size:clamp(2.6rem,6vw,4rem)!important}
.mk-h-brush{font-family:'Chewy','DM Sans',sans-serif!important; font-size:clamp(2.4rem,5vw,3.4rem)!important; line-height:1.05!important}

/* Nivel 3 · Títulos de tarjetas */
.mk-service h3{font-family:'Chewy','DM Sans',sans-serif!important; color:var(--mk-teal)!important; font-size:1.7rem}
.mk-card h3,.mk-post h3{font-size:1.2rem; line-height:1.15}

/* Nombre y notas a mano */
.mk-name{font-family:'Pacifico','DM Sans',sans-serif; color:var(--mk-teal); font-size:1.35em; line-height:1.2; font-weight:400}
.mk-note,.mk-paper-note,.mk-footer-note{font-family:'Pacifico','DM Sans',sans-serif!important; font-weight:400!important; line-height:1.45!important}
.mk-note{font-size:1.35rem}
.mk-paper-note{font-size:1.05rem}
.mk-footer-note{font-size:1.35rem}

/* Números de estadísticas */
.mk-stat b{font-family:'Chewy','DM Sans',sans-serif; font-weight:400; font-size:clamp(2.2rem,4vw,3rem)}

/* Etiquetas, enlaces y migas en azul petróleo */
.mk-eyebrow{color:var(--mk-teal); font-weight:800; font-size:12px}
.mk-link{color:var(--mk-teal)!important}
.mk-crumbs a{color:var(--mk-teal)}

/* Párrafos */
.mk p{font-size:16px}
.mk-lead{font-size:17px}

/* =========================================================
   ANIMACIONES · MATYKART
   (sin JavaScript; se apagan solas si la persona tiene
   activado "reducir movimiento" en su celular)
   ========================================================= */
@keyframes mk-up{from{opacity:0; translate:0 30px} to{opacity:1; translate:0 0}}
@keyframes mk-pop{0%{opacity:0; scale:.5} 70%{opacity:1; scale:1.12} 100%{opacity:1; scale:1}}
@keyframes mk-wave{0%,30%,100%{translate:0 0} 15%{translate:0 -.14em}}
@keyframes mk-blob{0%,100%{border-radius:42% 58% 63% 37%/41% 44% 56% 59%} 33%{border-radius:63% 37% 45% 55%/55% 60% 40% 45%} 66%{border-radius:38% 62% 52% 48%/38% 52% 48% 62%}}
@keyframes mk-drift{0%,100%{translate:0 0} 50%{translate:16px -14px}}
@keyframes mk-bob{0%,100%{translate:0 0} 50%{translate:0 -12px}}
@keyframes mk-sway{0%,100%{rotate:3deg} 50%{rotate:-3deg}}
@keyframes mk-beat{0%,60%,100%{scale:1} 10%{scale:1.25} 20%{scale:1} 30%{scale:1.15}}
@keyframes mk-wiggle{0%,100%{rotate:0deg} 25%{rotate:-6deg} 75%{rotate:6deg}}
@keyframes mk-grow{from{scale:0 1} to{scale:1 1}}
@keyframes mk-fade{from{opacity:0} to{opacity:1}}
@keyframes mk-zoom{from{opacity:0; scale:.85} to{opacity:1; scale:1}}

/* Encabezado (hero): entrada en cascada */
.mk-hero .mk-eyebrow{animation:mk-up .7s both}
.mk-hero h1{animation:mk-up .8s .15s both}
.mk-hero h1 .mk-brush{animation:mk-pop .9s .6s both}
.mk-hero .mk-lead{animation:mk-up .8s .35s both}
.mk-hero .mk-btn{animation:mk-up .8s .5s both}
.mk-hero .mk-social{animation:mk-up .8s .65s both}
.mk-hero-art img{animation:mk-up .9s .3s both, mk-bob 6s 1.2s ease-in-out infinite}
.mk-hero-photo{animation:mk-up .9s .45s both}
.mk-hero .mk-stats{animation:mk-up .9s .8s both}

/* "Stories": las letras hacen una ola cada pocos segundos */
.mk-letters span{display:inline-block; animation:mk-wave 4s ease-in-out infinite; animation-delay:calc(1.6s + var(--i) * .08s)}

/* Notas, manchas y corazones que respiran */
.mk-note{animation:mk-bob 4.5s ease-in-out infinite}
.mk-paper-note,.mk-footer-note{animation:mk-sway 6s ease-in-out infinite}
.mk-splash{animation:mk-blob 12s ease-in-out infinite, mk-drift 9s ease-in-out infinite}
.mk-splash.s2{animation-delay:-4s,-3s} .mk-splash.s3{animation-delay:-8s,-6s} .mk-splash.s4{animation-delay:-2s,-5s}
.mk-heart{animation:mk-beat 2.6s ease-in-out infinite}

/* Al pasar el dedo o el mouse */
.mk-logo img{transition:.3s} .mk-logo:hover img{rotate:-3deg; scale:1.05}
.mk-btn:hover{animation:mk-wiggle .45s}
.mk-social a:hover{translate:0 -4px; rotate:-8deg}
.mk-hero-photo img{transition:.4s} .mk-hero-photo:hover img{rotate:2deg; scale:1.03}
.mk-photo>img{transition:.4s} .mk-photo:hover>img{rotate:-2deg; scale:1.03}
.mk-card-img{transition:.35s}
.mk-card:hover .mk-card-img{rotate:-2deg; box-shadow:0 14px 30px rgba(23,23,23,.18)}
.mk-card:hover .mk-card-img img{transform:scale(1.08)}
.mk-card h3,.mk-post h3{transition:color .25s}
.mk-card:hover h3,.mk-post:hover h3{color:var(--mk-red)}
.mk-post{transition:.35s} .mk-post:hover{rotate:1deg; translate:0 -6px; box-shadow:0 14px 30px rgba(23,23,23,.14)}
.mk-service:hover .mk-icon{animation:mk-wiggle .5s}
.mk-stat:hover b{animation:mk-pop .5s}

/* Páginas internas: entrada del título */
.mk-pagehead .mk-crumbs{animation:mk-up .6s both}
.mk-pagehead h1{animation:mk-up .8s .1s both}
.mk-pagehead .mk-lead{animation:mk-up .8s .25s both}
.mk-pagehead-art{animation:mk-up .9s .3s both}

/* Aparecen al bajar (navegadores modernos; en los demás se ven normal) */
@supports (animation-timeline: view()){
  .mk-section .mk-h-brush,.mk-card,.mk-post,.mk-service,.mk-faq details,.mk-photo,.mk-contact,.mk-cta{
    animation:mk-up linear both; animation-timeline:view(); animation-range:entry 0% entry 45%}
  .mk-under::after{transform-origin:left center; animation:mk-grow linear both; animation-timeline:view(); animation-range:entry 30% entry 80%}
}

/* =========================================================
   GALERÍA ANIMADA DEL INICIO (cuadritos que se deslizan solos)
   ========================================================= */
.mk-mq{overflow:hidden; padding:14px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mk-mq-track{display:flex; gap:20px; width:max-content; animation:mk-scroll var(--mk-speed,40s) linear infinite}
.mk-mq.is-reverse .mk-mq-track{animation-direction:reverse; animation-duration:calc(var(--mk-speed,40s) * 1.15)}
.mk-mq:hover .mk-mq-track{animation-play-state:paused}
@keyframes mk-scroll{from{transform:translateX(0)} to{transform:translateX(calc(-50% - 10px))}}
.mk-mq-item{position:relative; flex:none; width:210px; aspect-ratio:1/1; border-radius:22px; overflow:hidden; background:var(--mk-soft); box-shadow:0 8px 22px rgba(23,23,23,.10); rotate:-2deg; transition:rotate .35s, scale .35s, box-shadow .35s}
.mk-mq-item:nth-child(even){rotate:2deg}
.mk-mq-item img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.mk-mq-item::after{content:attr(data-title); position:absolute; left:0; right:0; bottom:0; padding:34px 14px 12px; font-family:'Pacifico','DM Sans',sans-serif; font-size:1rem; line-height:1.3; color:#fff; background:linear-gradient(transparent, rgba(23,23,23,.75)); opacity:0; translate:0 10px; transition:.35s}
.mk-mq-item:hover{rotate:0deg; scale:1.06; box-shadow:0 16px 34px rgba(23,23,23,.2); z-index:2}
.mk-mq-item:hover img{transform:scale(1.08)}
.mk-mq-item:hover::after{opacity:1; translate:0 0}
.mk-mq-item.is-red{border:4px solid var(--mk-red)} .mk-mq-item.is-teal{border:4px solid var(--mk-teal)}
/* Visor a pantalla completa */
.mk-lightbox{position:fixed; inset:0; z-index:99999; background:rgba(23,23,23,.94); display:none; align-items:center; justify-content:center; padding:70px 20px}
.mk-lightbox:target{display:flex; animation:mk-fade .3s both}
.mk-lightbox img{max-width:min(92vw,1000px); max-height:78vh; width:auto; border-radius:18px; animation:mk-zoom .35s both}
.mk-lightbox p{position:absolute; bottom:18px; left:0; right:0; margin:0; text-align:center; color:#fff; font-family:'Pacifico','DM Sans',sans-serif; font-size:1.3rem}
.mk-lb-close{position:absolute; top:14px; right:22px; color:#fff!important; font-size:2.6rem; line-height:1}
.mk-lb-prev,.mk-lb-next{position:absolute; top:50%; translate:0 -50%; width:48px; height:48px; border-radius:50%; background:var(--mk-red); color:#fff!important; display:grid; place-items:center; font-size:1.3rem; transition:.25s}
.mk-lb-prev:hover,.mk-lb-next:hover{background:var(--mk-teal)}
.mk-lb-prev{left:16px} .mk-lb-next{right:16px}
@media (max-width:760px){
  .mk-mq-item{width:150px; border-radius:18px}
  .mk-mq-track{gap:14px}
  .mk-mq-item::after{opacity:1; translate:0 0; font-size:.8rem; padding:24px 10px 8px}
}
@media (prefers-reduced-motion:reduce){.mk-mq{overflow-x:auto}}

/* Reducir movimiento: todo quieto */
@media (prefers-reduced-motion:reduce){.mk *,.mk *::after{animation:none!important; transition:none!important}}

/* MatykArt theme · WordPress-specific styles */
body{margin:0;background:#fff}
.mk-site{min-height:100vh}
.mk-skip{position:absolute;left:-9999px;top:8px;z-index:100000;background:var(--mk-ink);color:#fff!important;padding:10px 16px;border-radius:50px}
.mk-skip:focus{left:12px}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}

/* Logo: the same file, shown white on the dark footer */
.mk-logo img{max-width:220px;object-fit:contain}
.mk-logo.is-light img{filter:invert(1) hue-rotate(180deg) saturate(1.4)}

/* Layout variants when an image is not set */
.mk-hero-grid.is-one{grid-template-columns:1.1fr .9fr}
.mk-hero-grid.is-text-only{grid-template-columns:1fr}
.mk-hero-grid.is-text-only .mk-lead{max-width:640px}
.mk-about.is-solo,.mk-contact-grid.is-solo{grid-template-columns:1fr}
.mk-cta.is-solo{grid-template-columns:1fr}
.mk-split>.mk-contact:only-child{max-width:820px}

/* Portfolio filter (buttons) */
.mk-filter-bar button{cursor:pointer;padding:9px 22px;border:0;border-radius:50px;background:#F3F3F3;font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:700;color:var(--mk-ink);transition:.2s}
.mk-filter-bar button:hover{background:#E6E6E6}
.mk-filter-bar button.is-active{background:var(--mk-red);color:#fff}
.mk-card[hidden]{display:none!important}
.mk-card-img img{aspect-ratio:1/1}
.mk-grid-3 .mk-card-img img{aspect-ratio:4/3}

/* Blog cards */
.mk-btn{white-space:nowrap}
.mk-meta{flex-wrap:wrap;gap:4px 14px}
.mk-meta span{white-space:nowrap}
.mk-post h3 a{color:inherit}
.mk-post-img{display:block}
.mk-post-img.is-empty{background:linear-gradient(135deg,#FDE8ED,#E3F2F3);display:grid;place-items:center;font-size:3rem}
.mk-meta-head{margin:6px 0 0}

/* Inner content (pages, posts, projects) */
.mk-narrow{max-width:860px}
.mk-feature{margin-bottom:32px}
.mk-feature img{width:100%;border-radius:22px;box-shadow:var(--mk-shadow)}
.mk-content{font-size:17px;line-height:1.75}
.mk-content>*+*{margin-top:1.1em}
.mk-content p{margin:0}
.mk-content h2,.mk-content h3,.mk-content h4{margin:1.6em 0 .4em;line-height:1.1}
.mk-content h2{font-size:2.2rem}
.mk-content h3{font-size:1.7rem}
.mk-content a{color:var(--mk-red);text-decoration:underline;text-underline-offset:3px}
.mk-content img{border-radius:16px;height:auto}
.mk-content ul,.mk-content ol{padding-left:1.4em}
.mk-content ul{list-style:disc}
.mk-content blockquote{margin:1.6em 0;padding:18px 24px;border-left:5px solid var(--mk-red);background:#FDE8ED;border-radius:0 16px 16px 0;font-family:'Pacifico','DM Sans',sans-serif;font-size:1.25rem;line-height:1.6}
.mk-content figure{margin:1.6em 0}
.mk-content figcaption,.wp-caption-text{font-size:.85rem;color:var(--mk-muted);text-align:center;margin-top:8px}
.alignleft{float:left;margin:0 1.5em 1em 0}
.alignright{float:right;margin:0 0 1em 1.5em}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.mk-content .wp-block-button__link{background:var(--mk-red);color:#fff;border-radius:50px;font-family:'DM Sans',sans-serif;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.06em;padding:14px 26px;text-decoration:none}

/* Contact form */
.mk-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.mk-notice{padding:12px 16px;border-radius:12px;font-weight:700;margin:16px 0 0}
.mk-notice.is-ok{background:#E3F2F3;color:var(--mk-teal)}
.mk-notice.is-error{background:#FDE8ED;color:var(--mk-red)}
.mk-notice a{text-decoration:underline}
.mk-form-plugin{margin-top:22px}
.mk-form-plugin input:not([type=submit]):not([type=checkbox]):not([type=radio]),.mk-form-plugin textarea,.mk-form-plugin select{width:100%;font:inherit;padding:13px 16px;border:1px solid var(--mk-line);border-radius:10px;background:#fff}
.mk-form-plugin input[type=submit],.mk-form-plugin button[type=submit]{background:var(--mk-red);color:#fff;border:0;border-radius:50px;padding:14px 26px;font-family:'DM Sans',sans-serif;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}

/* FAQ answers */
.mk-faq-a{padding:0 20px 18px;font-size:.92rem}
.mk-faq-a p{margin:0 0 .8em;padding:0}
.mk-faq-a p:last-child{margin-bottom:0}
.mk-dark .mk-faq-a{color:#E9E3DA}

/* Only visible to people who can edit the site */
.mk-hint{background:#FFFBEA;border:2px dashed #E5B800;color:#5c4a00;padding:14px 18px;border-radius:14px;font-size:.9rem;margin:10px 0}
.mk-hint a{text-decoration:underline;font-weight:700}
.mk-dark .mk-hint{background:#2a2a2a;color:#fff;border-color:#666}

@media (max-width:760px){
  .mk-hero-grid.is-one{grid-template-columns:1fr}
  .mk-logo img{max-width:170px}
  .alignleft,.alignright{float:none;margin:1em 0}
}

/* Project gallery (project pages) */
.mk-pgal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.mk-pgal-item{display:block;border-radius:18px;overflow:hidden;aspect-ratio:1/1;background:#F3F3F3;box-shadow:0 6px 18px rgba(23,23,23,.08);transition:transform .35s, box-shadow .35s}
.mk-pgal-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.mk-pgal-item:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:0 14px 30px rgba(23,23,23,.16)}
.mk-pgal-item:hover img{transform:scale(1.06)}
@media (max-width:760px){.mk-pgal{grid-template-columns:repeat(2,1fr);gap:10px}}


/* Static site extras */
.mk-post-img img{width:100%;height:100%;object-fit:cover}
.mk-back{margin-top:40px}
.mk-empty{color:var(--mk-muted)}
.mk-thanks{text-align:center;padding:90px 0}


/* =========================================================
   NUEVAS ANIMACIONES (v2)
   ========================================================= */

/* --- Tarjetas que se apilan al bajar (What I Do) --- */
.mk-services.mk-stack{display:block; padding-bottom:10px}
.mk-stack .mk-service{position:sticky; top:calc(28px + var(--i) * 22px); text-align:left; min-height:260px; padding:34px 32px; margin-bottom:26px;
  border:0; border-radius:30px; color:#fff; box-shadow:0 -10px 30px rgba(23,23,23,.14); transform:none!important}
.mk-stack .mk-service:last-child{margin-bottom:0}
.mk-stack .mk-service.is-red{background:var(--mk-red)}
.mk-stack .mk-service.is-teal{background:var(--mk-teal)}
.mk-stack .mk-service.is-black{background:var(--mk-ink)}
.mk-stack .mk-service h3{color:#fff!important; font-size:clamp(2rem,4vw,2.6rem); margin:0 0 10px}
.mk-stack .mk-service p{color:rgba(255,255,255,.9); font-size:1rem; max-width:34ch}
.mk-stack .mk-icon{margin:0 0 18px; background:#fff}
.mk-stack .is-red .mk-icon{color:var(--mk-red)} .mk-stack .is-teal .mk-icon{color:var(--mk-teal)} .mk-stack .is-black .mk-icon{color:var(--mk-ink)}
.mk-stack .mk-link{color:#fff!important; display:inline-block; margin-top:8px; border-bottom:2px solid rgba(255,255,255,.6)}
.mk-stack .mk-service:hover{box-shadow:0 -10px 30px rgba(23,23,23,.14)}
@supports (animation-timeline: view()){ .mk-stack .mk-service{animation:none} }

/* --- Flecha que gira (↘ → ↗) --- */
.mk-turn{position:absolute; z-index:2; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-size:1.35rem; font-weight:800;
  transition:transform .35s cubic-bezier(.3,1.6,.5,1), background .3s, color .3s}
.mk-stack .mk-turn{top:24px; right:24px; background:rgba(255,255,255,.18); color:#fff; border:2px solid rgba(255,255,255,.7)}
.mk-stack .mk-service:hover .mk-turn{transform:rotate(-90deg); background:#fff}
.mk-stack .is-red:hover .mk-turn{color:var(--mk-red)} .mk-stack .is-teal:hover .mk-turn{color:var(--mk-teal)} .mk-stack .is-black:hover .mk-turn{color:var(--mk-ink)}
.mk-card-img{position:relative}
.mk-card .mk-turn{right:10px; bottom:10px; width:38px; height:38px; font-size:1.1rem; background:var(--mk-red); color:#fff; box-shadow:0 4px 12px rgba(23,23,23,.2)}
.mk-card:hover .mk-turn{transform:rotate(-90deg); background:var(--mk-ink)}

/* --- Botón flotante para subir --- */
.mk-totop{position:fixed; z-index:50; right:calc(18px + env(safe-area-inset-right,0px)); bottom:calc(18px + env(safe-area-inset-bottom,0px));
  width:54px; height:54px; border-radius:50%; border:0; background:var(--mk-red); color:#fff; font:800 1.5rem 'DM Sans',sans-serif; cursor:pointer;
  box-shadow:0 8px 22px rgba(23,23,23,.28); border:3px solid #fff; opacity:0; transform:translateY(20px) scale(.8); pointer-events:none; transition:opacity .3s, transform .3s, background .2s}
.mk-totop.is-on{opacity:1; transform:none; pointer-events:auto}
.mk-totop:hover{background:var(--mk-teal); transform:translateY(-3px)}
.mk-totop:focus-visible{outline:3px solid var(--mk-ink); outline-offset:3px}

/* --- Carrusel del blog (solo celular) --- */
.mk-carousel{position:relative}
.mk-car-btn{display:none}
@media (max-width:760px){
  .mk-carousel .mk-grid{display:flex!important; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:6px; -webkit-overflow-scrolling:touch}
  .mk-carousel .mk-grid::-webkit-scrollbar{display:none}
  .mk-carousel .mk-post{flex:0 0 84%; scroll-snap-align:start}
  .mk-car-btn{display:grid; place-items:center; position:absolute; top:28%; z-index:3; width:44px; height:44px; border-radius:50%; border:0;
    background:var(--mk-red); color:#fff; font:800 1.2rem 'DM Sans',sans-serif; cursor:pointer; box-shadow:0 6px 16px rgba(23,23,23,.2)}
  .mk-car-btn.is-prev{left:-6px} .mk-car-btn.is-next{right:-6px}
  .mk-stack .mk-service{min-height:230px; padding:28px 24px; top:calc(16px + var(--i) * 16px)}
}
@media (prefers-reduced-motion:reduce){ .mk-turn,.mk-totop{transition:none} }
/* el carrusel no debe estirar la columna */
.mk-split > *, .mk-carousel, [data-mk="blog-home"]{min-width:0}
.mk-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:1024px){ .mk-split{grid-template-columns:minmax(0,1fr)} }

/* ===== v3 · Ilustración y foto del mismo tamaño ===== */
.mk-hero-grid{grid-template-columns:1.1fr 1fr 1fr}
.mk-hero-art img,.mk-hero-photo img{display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:28px; box-shadow:var(--mk-shadow); background:#fff}
.mk-hero-art img{animation:mk-up .9s .3s both; transition:.4s}
.mk-hero-art:hover img{rotate:-2deg; scale:1.03}
@media (max-width:1024px){.mk-hero-grid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.mk-hero-grid{grid-template-columns:1fr 1fr; gap:14px}.mk-hero-text{grid-column:1/-1}.mk-hero-art img,.mk-hero-photo img{border-radius:18px}}
.mk-hero-art .mk-note{top:-16px; left:-12px; right:auto; z-index:2; background:#fff; padding:10px 16px; font-size:1.2rem; line-height:1.25; box-shadow:0 8px 20px rgba(23,23,23,.12); transform:rotate(-5deg)}
@media (max-width:760px){.mk-hero-art .mk-note,.mk-hero-photo .mk-paper-note{font-size:.85rem; padding:6px 10px}}
@media (max-width:760px){.mk-hero-art,.mk-hero-photo{margin-top:22px}}

/* ===== v4 · Proyectos con secciones, servicios, fotos ===== */
.mk-subnav{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--mk-line)}
.mk-subnav .mk-wrap{display:flex; gap:8px; overflow-x:auto; padding-top:12px; padding-bottom:12px; scrollbar-width:none}
.mk-subnav .mk-wrap::-webkit-scrollbar{display:none}
.mk-subnav a{flex:none; padding:9px 16px; border-radius:999px; background:var(--mk-soft,#F3F3F3); color:var(--mk-ink); font-weight:800; font-size:13px; text-decoration:none; transition:.25s}
.mk-subnav a:hover{background:var(--mk-red); color:#fff}
.mk-sec{scroll-margin-top:90px; padding-top:56px}
.mk-sec-head{display:flex; align-items:baseline; gap:14px; margin-bottom:14px}
.mk-sec-num{font-family:'Chewy',cursive; font-size:2.4rem; color:var(--mk-red); line-height:1}
.mk-sec-head h2,.mk-sec-more{font-family:'Chewy',cursive; font-weight:400; font-size:clamp(1.8rem,3.4vw,2.4rem); margin:0}
.mk-sec-more{margin:56px 0 18px}
.mk-sec-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px; align-items:start}
.mk-sec-grid.is-one{grid-template-columns:1fr}
.mk-sec-item{display:block; border-radius:18px; overflow:hidden; background:#F3F3F3; box-shadow:0 6px 18px rgba(23,23,23,.08); transition:transform .35s, box-shadow .35s}
.mk-sec-item img{display:block; width:100%; height:auto}
.mk-sec-item:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(23,23,23,.16)}
.mk-feature .mk-sec-item{border-radius:22px}
.mk-ficha{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin:26px 0 8px; padding:20px 22px; background:var(--mk-soft,#F6F4F1); border-radius:18px}
.mk-ficha dt{font-weight:800; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--mk-teal,#087F8C); margin-bottom:4px}
.mk-ficha dd{margin:0; font-size:15px; line-height:1.45}
.mk-svc{scroll-margin-top:20px}
.mk-svc.is-soft{background:var(--mk-soft,#F6F4F1)}
.mk-svc-head{display:flex; align-items:center; gap:16px; margin-bottom:14px}
.mk-svc-head .mk-icon{width:58px; height:58px; border-radius:50%; background:var(--mk-red); color:#fff; display:grid; place-items:center; flex:none}
.mk-svc-head .mk-icon svg{width:28px; height:28px}
.mk-svc-head h2{font-family:'Chewy',cursive; font-weight:400; font-size:clamp(2rem,4vw,2.8rem); margin:0}
.mk-svc-text{max-width:760px; margin-bottom:26px}
.mk-photos{columns:3 260px; column-gap:16px}
.mk-photos-item{display:block; break-inside:avoid; margin-bottom:16px; border-radius:20px; overflow:hidden; box-shadow:0 8px 22px rgba(23,23,23,.10); transition:transform .35s}
.mk-photos-item img{display:block; width:100%; height:auto}
.mk-photos-item:nth-child(3n+1){rotate:-1.2deg} .mk-photos-item:nth-child(3n+2){rotate:1deg}
.mk-photos-item:hover{rotate:0deg; transform:scale(1.02)}
@media (max-width:760px){.mk-sec-grid{grid-template-columns:1fr}.mk-sec{padding-top:40px}}
.mk-sec-grid.is-one{justify-items:start}.mk-sec-grid.is-one .mk-sec-item{max-width:680px}
.mk-svc-head{justify-content:flex-start; text-align:left}
.mk-svc-head .mk-icon{margin:0!important}
.mk-svc-head h2{text-align:left; margin:0!important; color:var(--mk-ink)}