/* MailEditor Flow V59 — Interacciones visuales sin alterar el editor o el backend.
   Paleta: dorado, negro, blanco y gris. */
:root{--mef-motion-gold:#e2e63a;--mef-motion-ink:#05031b;--mef-motion-edge:#d8c7a7}

/* Carrusel de muestra integrado en la misma ilustración de portada. */
.hero-art[data-mef-hero]{isolation:isolate}
.hero-art[data-mef-hero] .hero-window{transition:filter .42s ease,box-shadow .42s ease;}
.hero-art[data-mef-hero] .mock-photo{transition:background .45s ease}
.hero-art[data-mef-hero] .mock-photo>span{transition:color .4s ease, transform .4s ease}
.hero-art[data-mef-hero] .shape-orange,.hero-art[data-mef-hero] .shape-green,.hero-art[data-mef-hero] .shape-purple{transition:background-color .6s ease,transform .6s ease}
.hero-art[data-mef-slide="1"] .mock-photo{background:#e8e7e3}
.hero-art[data-mef-slide="1"] .mock-photo>span{color:#05031b;transform:rotate(-2deg)}
.hero-art[data-mef-slide="1"] .shape-orange{background:#e2e63a;transform:translate(-5px,-12px)}
.hero-art[data-mef-slide="1"] .shape-green{background:#454440;transform:translate(-22px,12px) rotate(20deg)}
.hero-art[data-mef-slide="1"] .shape-purple{background:#bebbb3;transform:translate(14px,-10px) rotate(-32deg)}
.hero-art[data-mef-slide="2"] .mock-photo{background:#05031b}
.hero-art[data-mef-slide="2"] .mock-photo>span{color:#f3f1fe;transform:rotate(-3deg)}
.hero-art[data-mef-slide="2"] .shape-orange{background:#b68e4e;transform:translate(-12px,7px)}
.hero-art[data-mef-slide="2"] .shape-green{background:#c5befc;transform:translate(-11px,0) rotate(18deg)}
.hero-art[data-mef-slide="2"] .shape-purple{background:#555148;transform:translate(17px,-25px) rotate(-25deg)}
.hero-art[data-mef-slide="2"] .mock-star{color:#e2e63a}
.hero-art[data-mef-hero] .float-card{animation:mef-float 5s ease-in-out infinite}
.hero-art[data-mef-hero] .float-tag{animation:mef-float 6s ease-in-out 1s infinite}
.hero-art[data-mef-hero] .mini-bars i{animation:mef-bar 2.9s ease-in-out infinite alternate;transform-origin:bottom}
.hero-art[data-mef-hero] .mini-bars i:nth-child(2n){animation-delay:.65s}
.hero-art[data-mef-hero] .mini-bars i:nth-child(3n){animation-delay:1.2s}
@keyframes mef-float{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes mef-bar{from{transform:scaleY(.78)}to{transform:scaleY(1.08)}}
.mef-hero-controls{position:absolute;z-index:12;bottom:0;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:8px 13px;border:1px solid #d9c7a2;border-radius:999px;background:rgba(255,255,255,.96);box-shadow:0 12px 29px #1716141f;white-space:nowrap}
.mef-hero-controls button,.mef-carousel-controls button{appearance:none;touch-action:manipulation;display:grid;place-items:center;flex:none;border:1px solid #c8aa73;background:#fff;color:var(--mef-motion-ink);border-radius:50%;height:40px;width:40px;font-size:22px;line-height:1;cursor:pointer;transition:background .2s,transform .2s,border-color .2s}
.mef-hero-controls button:hover,.mef-carousel-controls button:hover{background:#e8d3aa;transform:translateY(-2px)}
.mef-hero-controls button:disabled,.mef-carousel-controls button:disabled{opacity:.38;cursor:default;transform:none}
.mef-hero-controls .mef-hero-dot{border:0;background:#777491;height:8px;width:8px;padding:0;margin:0 2px;box-shadow:none;transition:width .25s,background-color .25s}
.mef-hero-controls .mef-hero-dot[aria-current="true"]{background:#bb8e44;width:29px;border-radius:20px}
.mef-hero-dots{display:flex;gap:6px;align-items:center}
.mef-hero-count{font-size:11px;font-weight:900;letter-spacing:.08em;color:#312bc4;min-width:40px;text-align:center}
.mef-hero-progress{position:absolute;bottom:-5px;left:15px;right:15px;height:3px;border-radius:4px;overflow:hidden;background:#ddd0b9}
.mef-hero-progress i{display:block;height:100%;background:#b68840;width:100%;transform-origin:left;animation:mef-countdown 5800ms linear forwards}
@keyframes mef-countdown{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* En funciones y plantillas, respetamos las tarjetas y sus botones existentes. */
.site .feature-grid.mef-carousel-track,.site .landing-templates.mef-carousel-track{display:grid!important;grid-auto-flow:column!important;grid-template-columns:none!important;overflow-x:auto;overscroll-behavior-inline:contain;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:19px;padding:7px 2px 26px;max-width:100%;}
.mef-carousel-track::-webkit-scrollbar{display:none}
.site .feature-grid.mef-carousel-track{grid-auto-columns:calc((100% - 19px)/2)}
.site .landing-templates.mef-carousel-track{grid-auto-columns:calc((100% - 38px)/3)}
.mef-carousel-track>*{scroll-snap-align:start;scroll-snap-stop:always;min-width:0;}
.mef-carousel-track .feature-card{min-height:100%}
.mef-carousel-track .template-preview{width:100%;max-width:100%}
.mef-carousel-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin:8px auto 4px}
.mef-carousel-controls .mef-carousel-page{font-size:12px;letter-spacing:.12em;font-weight:900;color:#706a5e;min-width:54px;text-align:center}
.mef-carousel-controls .mef-carousel-page strong{color:#92713c}
.mef-carousel-hint{text-align:center;font-size:11px;color:#77736c;letter-spacing:.02em;margin:8px auto 0}
.mef-carousel-track:focus-visible{outline:3px solid #e2e63a;outline-offset:2px}

/* Microinteracciones: no ocultan elementos si JavaScript falla. */
.site .step{transition:background-color .3s,transform .3s,box-shadow .3s}
.site .step:hover{transform:translateY(-3px);background:#e8e5fb;box-shadow:0 8px 22px #1716140b}
.site .home-plan,.site .feature-card{transition:transform .3s ease,box-shadow .3s ease}
.site .home-plan:hover,.site .feature-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px #2c2a2522}
.site .feature-card .feature-visual{transition:filter .3s}
.site .feature-card:hover .feature-visual{filter:contrast(1.06)}
.mef-reveal{transition:opacity .55s ease,translate .55s cubic-bezier(.23,.7,.22,1)}
.mef-reveal.mef-reveal-prepared{opacity:0;translate:0 14px}
.mef-reveal.mef-reveal-visible{opacity:1;translate:0 0}

@media(max-width:900px){
 .site .feature-grid.mef-carousel-track{grid-auto-columns:calc((100% - 18px)/2)}
 .site .landing-templates.mef-carousel-track{grid-auto-columns:calc((100% - 18px)/2)}
}
@media(max-width:640px){
 .site .feature-grid.mef-carousel-track{grid-auto-columns:calc(100% - 18px);gap:14px}
 .site .landing-templates.mef-carousel-track{grid-auto-columns:calc(78% - 6px);gap:12px}
 .mef-carousel-controls button{height:44px;width:44px}
 .mef-hero-controls{gap:9px;bottom:20px;padding:9px 12px;transform:translateX(-50%) scale(1.26);transform-origin:bottom center}
 .mef-hero-controls button{height:34px;width:34px;font-size:19px}
 .hero-art[data-mef-hero]{margin-bottom:20px}
}
@media(max-width:395px){
 .mef-hero-controls{bottom:8px;transform:translateX(-50%) scale(1.34)}
 .site .landing-templates.mef-carousel-track{grid-auto-columns:88%}
}
@media(prefers-reduced-motion:reduce){
 .hero-art[data-mef-hero] .float-card,.hero-art[data-mef-hero] .float-tag,.hero-art[data-mef-hero] .mini-bars i{animation:none!important}
 .mef-hero-progress i{animation:none!important}
 .mef-carousel-track{scroll-behavior:auto!important}
 .mef-reveal{transition:none!important}
 .site .step,.site .home-plan,.site .feature-card{transition:none!important}
}
/* Último ajuste de dispositivos estrechos, sin tocar los componentes del editor. */
@media(max-width:320px){
 .site .stripe-row{flex-wrap:wrap;gap:12px}
 .site .stripe-row h2{min-width:0;overflow-wrap:anywhere;font-size:21px}
 .site .stripe-row .btn{margin:0;min-width:0;max-width:100%;white-space:normal}
 .site .last-cta h2{font-size:35px;overflow-wrap:anywhere}
 .site .footer-links{flex-wrap:wrap;gap:22px}
 .site .footer-links>div{min-width:calc(50% - 14px)}
 .site .footer-links button,.site .footer-links a{overflow-wrap:anywhere}
}