/* Rediseño 2026 · curvas, figuras de fondo y destacados.
   Solo la cargan las páginas públicas (las que usan js/layout.js). Para volver al diseño anterior, quita el <link> a este archivo.
   Destacar una tarjeta: agrégale la clase "dest" (los planes con etiqueta "Más elegido" o "Recomendado" ya se destacan solos). */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 12'%3E%3Cpath d='M2 6c6-6 11-6 17 0s11 6 17 0 11-6 17 0 11 6 17 0 9-5 12-2' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E")}
.or{--cb:var(--or)}.mt{--cb:var(--mint)}.dk{--cb:var(--ink)}

/* ── secciones con bordes curvos ── */
main>section,footer{position:relative;overflow:clip}
main>section>.w,footer>.w{position:relative;z-index:1}
main>section:is(.dk,.or,.mt),main>section[style*="background"]{border-radius:50% 50% 50% 50%/48px 48px 64px 64px;margin:10px 0}
main>section.hero,main>section:first-child{border-radius:0 0 50% 50%/0 0 72px 72px;margin-top:0}
footer{border-radius:50% 50% 0 0/64px 64px 0 0;margin-top:24px}

/* ── figuras flotantes de fondo (las pone js/layout.js) ── */
.fx{position:absolute;inset:0;pointer-events:none;z-index:0;--fa:var(--or);--fb:var(--mint)}
.or>.fx,.mt>.fx{--fa:var(--cream);--fb:var(--ink)}
.fx i{position:absolute;display:block;will-change:transform}
.fx .bl{width:clamp(170px,24vw,360px);aspect-ratio:1;background:var(--fa);opacity:.13;border-radius:42% 58% 63% 37%/45% 41% 59% 55%;animation:morph 15s ease-in-out infinite alternate,flota 19s ease-in-out infinite alternate}
.dk>.fx .bl{opacity:.2}
.fx .an{width:clamp(80px,9vw,130px);aspect-ratio:1;border-radius:50%;border:clamp(10px,1.2vw,16px) solid var(--fb);opacity:.4;animation:flota 13s ease-in-out infinite alternate-reverse}
.fx .pt{width:150px;height:104px;background:radial-gradient(var(--fb) 2.4px,transparent 2.9px) 0 0/18px 18px;opacity:.55;animation:flota 17s ease-in-out infinite alternate}
.fx .ol{width:clamp(110px,12vw,170px);height:24px;background:var(--fa);-webkit-mask:var(--wave) center/contain no-repeat;mask:var(--wave) center/contain no-repeat;opacity:.6;animation:flota 11s ease-in-out infinite alternate-reverse}
.fx .se{width:46px;aspect-ratio:1;background:var(--fb);opacity:.5;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:gira 22s linear infinite}
@keyframes morph{50%{border-radius:61% 39% 43% 57%/58% 62% 38% 42%}100%{border-radius:38% 62% 56% 44%/39% 55% 45% 61%}}
@keyframes flota{to{transform:translate(var(--tx,24px),var(--ty,-30px)) rotate(var(--tr,14deg))}}
@keyframes gira{to{transform:rotate(360deg)}}

/* ── títulos con onda ── */
main section>.w>h2::after,main .two>div>h2::after,main .tsh h2::after,footer>.w>h2::after{content:"";display:block;width:84px;height:12px;margin-top:14px;background:var(--or);-webkit-mask:var(--wave) left center/contain no-repeat;mask:var(--wave) left center/contain no-repeat}
main section.or>.w>h2::after{background:var(--ink)}
.dk h2::after{background:var(--mint)!important}

/* ── botones: brillo al pasar ── */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s ease}
.btn:hover::after{transform:translateX(120%)}

/* ── fotos con formas orgánicas ── */
.ph:has(img,video){border:0}
.ph{border-radius:30px}
.hero .ph{border-radius:58% 42% 50% 50%/48% 54% 46% 52%;box-shadow:18px 18px 0 var(--or);animation:morph 16s ease-in-out infinite alternate}
.two .ph.t{border-radius:46% 54% 30px 30px/36% 36% 30px 30px;box-shadow:-14px 14px 0 var(--mint)}
.r .ph{border-radius:26px 26px 26px 8px}

/* ── tarjetas: esquinas suaves y un círculo que crece ── */
.r,.dsc,.jn{border-radius:40px 14px 40px 14px}
.c,.czc,.psop button,.mc,.ct{border-radius:28px}
.r,.dsc,.c,.czc,.psop button,.ct{position:relative;overflow:hidden;isolation:isolate}
.r::after,.dsc::after,.c::after,.czc::after,.psop button::after{content:"";position:absolute;z-index:-1;width:200px;aspect-ratio:1;border-radius:50%;right:-70px;bottom:-80px;background:currentColor;opacity:.06;transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .4s}
.r:hover::after,.dsc:hover::after,.c:hover::after,.czc:hover::after,.psop button:hover::after{transform:scale(1.5);opacity:.1}
.dsc .dsi{display:grid;place-items:center;width:58px;height:58px;border-radius:42% 58% 55% 45%/50% 45% 55% 50%;background:rgba(255,255,255,.35);font-size:28px;transition:transform .4s}
.dsc.dk .dsi{background:rgba(255,248,245,.12)}.dsc.cr .dsi{background:var(--cream)}
.dsc:hover .dsi{transform:rotate(-8deg) scale(1.08)}

/* ── DESTACADOS: lo que más queremos vender ── */
.dest,.c.f,.czc:has(.bd),.dsc:has(.dsn){border:3px solid transparent!important;background:linear-gradient(var(--cb,#fff),var(--cb,#fff)) padding-box,conic-gradient(from var(--ang),var(--or),var(--mint),#FFC2A6,var(--or)) border-box!important;animation:borde 5s linear infinite;box-shadow:0 26px 56px -18px rgba(255,106,43,.55)}
.c.f{--cb:var(--cream);scale:1.05;z-index:1}
.czc{--cb:#fff}.czc:has(.bd){scale:1.03}
.czc:has(.bd)[aria-pressed=true]{box-shadow:0 0 0 3px var(--or) inset,0 26px 56px -18px rgba(255,106,43,.55)}
@keyframes borde{to{--ang:360deg}}
.bd{position:relative}.bd,.dsn{animation:latido 2.4s ease-in-out infinite}
@keyframes latido{0%,100%{box-shadow:0 0 0 0 rgba(255,106,43,.55)}50%{box-shadow:0 0 0 9px rgba(255,106,43,0)}}
.c.f .pr,.czc:has(.bd) .czpr{font-size:1.18em}
@media(min-width:760px){.dsg:has(.dest){grid-template-columns:repeat(3,minmax(0,1fr))}.dsc.dest{grid-column:1/-1;min-height:270px;padding:38px 40px 32px}.dsc.dest h3{font-size:clamp(28px,3.4vw,40px)}.dsc.dest p{font-size:17px;max-width:52ch}
  .dsc.dest .dsi{width:84px;height:84px;font-size:40px}.dsc.dest::after{width:340px;right:-90px;bottom:-140px}}
.dsc.dest .dsl{align-self:flex-start;background:var(--ink);color:var(--cream);padding:9px 18px;border-radius:100px;font-weight:600}
.dsc.dest.dk .dsl{background:var(--cream);color:var(--ink)}

/* ── celular ── */
@media(max-width:700px){
main>section:is(.dk,.or,.mt),main>section[style*="background"]{border-radius:50% 50% 50% 50%/26px 26px 36px 36px}
main>section.hero,main>section:first-child{border-radius:0 0 50% 50%/0 0 40px 40px}
footer{border-radius:50% 50% 0 0/36px 36px 0 0}
.fx .pt,.fx .se{display:none}.fx .bl{opacity:.1}
.c.f,.czc:has(.bd){scale:1}}

/* ── sin animaciones para quien las desactiva ── */
@media(prefers-reduced-motion:reduce){.fx i,.hero .ph,.dest,.c.f,.czc:has(.bd),.dsc:has(.dsn),.bd,.dsn{animation:none!important}}