.elementor-71 .elementor-element.elementor-element-a34f9f7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-fc4aefd *//* ==============================
   Meitsu Home — Ethereal Cyber
   ============================== */

/* Tema / variables */
:root{
  --bg:#0c0c12; --ink:#ecebff; --muted:#b6b3e6;
  --glass:rgba(255,255,255,.07);
  --accent:#a896ff; --accent2:#74f1ff; --chip:#141427;
  --ring:0 0 0 2px color-mix(in oklab, var(--accent) 40%, transparent);
}
:root.light{ --bg:#f7f7ff; --ink:#171331; --muted:#4f4a7a; --glass:rgba(0,0,0,.06); --chip:#ffffff; }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:ui-sans-serif, system-ui, Inter, "Segoe UI", Arial;
  background:
    radial-gradient(1200px 800px at 12% -10%, #22204a 0%, transparent 60%),
    radial-gradient(1200px 800px at 105% 10%, #0a2a38 0%, transparent 60%),
    var(--bg);
  color:var(--ink); line-height:1.65;
}

/* Aura */
.aura{
  position:fixed; inset:-25vmax; pointer-events:none; mix-blend:screen;
  background:
    radial-gradient(40vmax 30vmax at 20% 10%, color-mix(in oklab, var(--accent) 30%, transparent), transparent),
    radial-gradient(35vmax 25vmax at 80% 0%, color-mix(in oklab, var(--accent2) 35%, transparent), transparent),
    radial-gradient(50vmax 35vmax at 50% 100%, color-mix(in oklab, #ff7bd5 24%, transparent), transparent);
  filter: blur(60px) saturate(120%); opacity:.6;
  animation: drift 28s ease-in-out infinite alternate;
}
@keyframes drift{ to{ transform: translate3d(2rem,-1rem,0) scale(1.03);} }

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  display:grid; grid-template-columns:auto 1fr auto; gap:1rem;
  align-items:center; padding:14px max(16px,6vw);
  backdrop-filter: blur(10px);
  background: linear-gradient(to bottom, color-mix(in oklab, var(--bg) 60%, transparent), transparent);
  border-bottom:1px solid color-mix(in oklab, var(--ink) 10%, transparent);
}
.brand{display:flex; align-items:center; gap:.6rem;}
.logo{color:var(--ink); text-decoration:none; font-weight:700; letter-spacing:.4px;}
.logo span{opacity:.7; margin-left:.3rem; font-weight:500}
.spark{filter:drop-shadow(0 0 6px var(--accent)); animation: twinkle 2.3s infinite ease-in-out}
@keyframes twinkle{50%{opacity:.4; transform:translateY(-1px)}}
.main-nav{display:flex; gap:1rem; justify-self:center; flex-wrap:wrap}
.main-nav a{color:var(--ink); text-decoration:none; opacity:.85}
.main-nav a:hover{opacity:1; text-decoration:underline}
.pill{border:1px solid color-mix(in oklab, var(--ink) 18%, transparent); padding:.4rem .8rem; border-radius:999px}
.actions{display:flex; gap:.5rem}
.btn{padding:.5rem .8rem; border-radius:999px; border:1px solid transparent; background:var(--accent); color:#fff; cursor:pointer}
.btn.ghost{background:transparent; color:var(--ink); border-color: color-mix(in oklab, var(--ink) 18%, transparent)}
.btn:focus-visible{outline:none; box-shadow:var(--ring)}

/* Hero */
.hero{display:grid; grid-template-columns: 1.2fr 1fr; gap:2rem; padding: max(24px, 7vw) max(16px, 6vw) 2rem}
.hero-media img{width:100%; height:auto; border-radius:20px; object-fit:cover; box-shadow:0 30px 90px rgba(0,0,0,.35)}
.hero-copy h1{margin:0 0 .6rem; font-size: clamp(1.6rem, 2.4vw + 1rem, 3rem)}
.grad{background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-copy p{opacity:.9; max-width:48ch}
.hero-ctas{display:flex; gap:.7rem; margin-top:1rem}
.btn.ghost{border-color: color-mix(in oklab, var(--ink) 20%, transparent)}

/* Secciones */
.section{padding: 32px max(16px,6vw) 18px}
.section-head{margin-bottom:12px}
.section-head h2{margin:.2rem 0}
.section-cta{display:flex; gap:1rem; align-items:center; margin-top:12px}
.link-more{color:var(--accent2); text-decoration:none}

/* Masonry (arte) */
.masonry{columns: 1; column-gap:14px}
@media(min-width:620px){ .masonry{columns:2} }
@media(min-width:980px){ .masonry{columns:3} }
.tile{display:block; width:100%; margin:0 0 14px; padding:0; border:0; background:transparent; cursor:pointer}
.tile img{width:100%; height:auto; border-radius:16px; display:block; transition:transform .2s}
.tile:hover img{transform: translateY(-2px)}

/* Chips y filtros */
.filters{display:flex; justify-content:flex-start; margin:8px 0 14px}
.chips{display:flex; gap:.5rem; flex-wrap:wrap}
.chip{
  background:var(--chip); color:var(--ink); opacity:.85;
  border:1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  padding:.45rem .8rem; border-radius:999px; cursor:pointer
}
.chip:is(:hover,.is-active){border-color:var(--accent); opacity:1}

/* Grid cards (web + blog) */
.grid{display:grid; gap:14px; grid-template-columns: repeat(auto-fill, minmax(260px,1fr))}
.card, .post{
  background:linear-gradient(180deg, color-mix(in oklab, var(--glass) 80%, transparent), transparent 70%);
  border:1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  border-radius:16px; overflow:hidden; transition: transform .25s, border-color .25s;
}
.card:hover,.post:hover{ transform: translateY(-2px); border-color: color-mix(in oklab, var(--accent) 35%, transparent)}
.cover{display:block; position:relative; aspect-ratio:16/9}
.cover img{width:100%; height:100%; object-fit:cover}
.badge{position:absolute; right:8px; bottom:8px; background:rgba(0,0,0,.55); color:#fff; padding:.25rem .5rem; border-radius:8px; font-size:.8rem}
.meta{padding:.9rem .9rem 1rem}
.title{margin:.1rem 0 .4rem; font-size:1.02rem}
.desc,.excerpt{opacity:.85}

/* About */
.about-wrap{display:grid; gap:1rem; grid-template-columns: 140px 1fr; align-items:start}
.about-wrap img{width:140px; height:140px; object-fit:cover; border-radius:16px}
.ticks{margin: .6rem 0 .8rem; padding-left:1.1rem}
.ticks li{margin:.2rem 0}

/* Contacto */
.contact-form{max-width:820px}
.contact-form .row{display:grid; gap:12px; grid-template-columns: 1fr 1fr}
.contact-form label{display:block; font-weight:600; margin:.4rem 0}
.contact-form input, .contact-form textarea, .contact-form select{
  width:100%; padding:.7rem .9rem; border-radius:12px; border:1px solid color-mix(in oklab, var(--ink) 14%, transparent);
  background:var(--glass); color:var(--ink)
}
.tiny{opacity:.75; font-size:.9rem}

/* Footer */
.site-footer{ text-align:center; padding:32px 16px; opacity:.85; border-top:1px solid color-mix(in oklab, var(--ink) 10%, transparent) }

/* Modal imagen */
dialog{ border:0; padding:0; background:color-mix(in oklab, var(--bg) 80%, #000 20%); border-radius:16px; width:min(95%, 980px); }
dialog::backdrop{ background: rgba(0,0,0,.6); backdrop-filter: blur(2px)}
#imgFull{display:block; width:100%; height:auto; border-radius:16px}
.close{position:absolute; right:8px; top:8px}

/* Accesibilidad y motion */
.btn:focus-visible, a:focus-visible, .chip:focus-visible{outline:none; box-shadow:var(--ring)}
@media(prefers-reduced-motion: reduce){ .aura{animation:none} .card,.post{transition:none} }

/* Responsive hero */
@media(max-width:900px){
  .hero{grid-template-columns:1fr; gap:1rem}
}/* End custom CSS */