/* Carla de Weber · sistema 2026 · capa de diseño para las páginas existentes.
   Se carga la última en cada página: limpia las formas antiguas y aplica botones, menú y pie nuevos. */
:root{--r-new:10px;--r-new-lg:22px;--glass:rgba(255,249,240,.78)}
html{scroll-padding-top:96px}
body{background:var(--crema)}

/* 1 · fuera: banners en medio, pegatinas, ondas y formas sueltas */
html body .bar,html body #bar,html body .marquee,html body .sticker,html body [data-drag],html body .scal,html body .blob,html body .scal--up{display:none !important}

/* 2 · menú en píldora */
html body .nav{position:sticky;top:14px;z-index:60;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;margin:14px 0 0;padding:0}
html body .nav__in{height:60px;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(31,30,30,.14);border-radius:999px;padding:0 10px 0 22px;box-shadow:0 14px 28px -22px rgba(31,30,30,.5)}
html body .logo{transform:none !important}
html body .logo img{height:22px;width:auto}
html body .nav__links a{font-family:var(--body);font-weight:500;font-size:.72rem;letter-spacing:.12em}
html body .nav__links a::after{background:var(--rosa);height:2px}
html body .lang{border:0;background:none;padding:0}
html body .lang button{font-family:var(--body);font-weight:500;color:var(--gris);background:none;border-radius:99px}
html body .lang button[aria-pressed=true],html body .lang button.on,html body[lang] .lang button.is-on{color:var(--tinta)}
html[lang=es] body .lang [data-set=es],html[lang=en] body .lang [data-set=en]{color:var(--tinta);background:var(--t-rosa);box-shadow:inset 0 0 0 1px rgba(31,30,30,.18)}
html body .burger{border:1px solid rgba(31,30,30,.2);background:rgba(255,255,255,.7)}
html body .logo{display:flex;align-items:center;height:100%}
html body .logo img{display:block}
@media(max-width:1040px){
  html body .nav .nav__in{width:auto;margin-inline:12px;height:56px;padding:0 8px 0 18px;gap:6px}
  html body .nav .burger{margin-left:auto;width:42px;height:42px}
  html body .nav .nav__end{margin-left:0}
  /* menú desplegable: tarjeta bajo la píldora, sin ocupar la pantalla entera */
  html body .nav .nav__links{position:absolute;top:calc(100% + 8px);left:0;right:0;height:auto;max-height:calc(100dvh - 110px);margin:0;display:none;flex-direction:column;gap:0;padding:8px;overflow:auto;background:var(--crema);border:1px solid rgba(31,30,30,.14);border-radius:24px;box-shadow:0 24px 40px -24px rgba(31,30,30,.45);opacity:1;visibility:visible;transform:none}
  html body .nav.open .nav__links{display:flex}
  html body .nav .nav__links a{font-family:var(--body);font-weight:500;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;padding:15px 14px;border-bottom:1px solid rgba(31,30,30,.08)}
  html body .nav .nav__links a:last-child{border-bottom:0}
}

/* 3 · botones nuevos: píldora con círculo */
html body .btn{display:inline-flex;align-items:center;gap:.9em;font:600 .95rem/1 var(--body);letter-spacing:0;padding:6px 6px 6px 20px;min-height:46px;border-radius:999px;border:1px solid rgba(31,30,30,.14);background:rgba(255,255,255,.7);color:var(--tinta);box-shadow:none;text-transform:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s,transform .2s,box-shadow .2s;position:relative;overflow:hidden}
html body .btn::before{display:none}
html body .btn::after{content:"";flex:none;width:34px;height:34px;border-radius:50%;background:var(--tinta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFF9F0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/15px no-repeat;transition:background-color .2s,transform .25s cubic-bezier(.22,.9,.28,1)}
html body .btn:hover{background:#fff;transform:translateY(-2px);box-shadow:0 10px 22px -14px rgba(31,30,30,.5)}
html body .btn:hover::after{background-color:var(--rosa);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231F1E1E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");transform:translateX(3px) rotate(-45deg)}
html body .btn--solid,html body .btn--ink{background:var(--tinta);color:var(--crema);border-color:var(--tinta)}
html body .btn--solid::after,html body .btn--ink::after{background-color:var(--crema);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231F1E1E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E")}
html body .btn--solid:hover,html body .btn--ink:hover{background:var(--tinta);color:var(--crema)}
html body .btn--sm{min-height:42px;font-size:.88rem;padding:4px 4px 4px 16px}
html body .btn--sm::after{width:32px;height:32px}

/* 4 · etiquetas, chips y tarjetas más limpias */
html body .tag{background:rgba(255,255,255,.7);border:1px solid rgba(31,30,30,.18);border-radius:999px;padding:.5em .9em;font-family:var(--body);font-weight:500;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;transform:none !important;box-shadow:none;color:var(--tinta)}
html body .tag::after{display:none}
html body .chip{border:1px solid rgba(31,30,30,.2);background:rgba(255,255,255,.6);border-radius:999px}
html body .chip--solid{background:var(--tinta);color:var(--crema);border-color:var(--tinta)}
html body .note{transform:none !important;border-radius:var(--r-new);box-shadow:none}
html body .hl,html body mark{background-repeat:no-repeat}

/* 5 · portadas: fondo crema con resplandor suave en vez de manchas */
html body .sh{background:radial-gradient(45% 70% at 88% 18%,var(--t-rosa),rgba(255,129,167,.22) 45%,transparent 75%),radial-gradient(40% 55% at 4% 100%,var(--t-webs),transparent 70%),var(--crema)}
html body .sh::before,html body .sh::after{display:none}

/* 6 · secciones: línea fina en vez de punteado, sin fondos de color llenos salvo contacto */
html body .sec--dotted{border-top:1px solid var(--tinta)}

/* 7 · pie limpio */
html body .foot{border-top:1px solid var(--tinta);background:var(--crema)}
html body .foot__nav a,html body .foot__bot{font-family:var(--body);font-weight:500;letter-spacing:.1em}
html body .foot__big{font-family:var(--display);font-weight:400;font-style:normal;text-transform:none;text-shadow:none;color:var(--tinta);letter-spacing:-.03em;line-height:1}
html body .foot__bot{border-top:1px solid rgba(31,30,30,.2)}
html body .foot__logo img{height:26px}
@media (prefers-reduced-motion:reduce){html body .btn,html body .btn::after{transition:none}}

/* 8 · colores de tarjeta suaves (las tarjetas usan --pink/--sky/--sage como fondo) */
:root{--pink:var(--rosa-t);--sky:var(--cielo-t);--sage:var(--salvia-t)}
html body .ext,html body .vs__c,html body .bundle,html body .stk,html body .step,html body .tp,html body .offer{border:1px solid var(--tinta);border-radius:var(--r-new-lg);box-shadow:none}
html body .ext:hover,html body .vs__c:hover,html body .bundle:hover,html body .stk:hover,html body .step:hover,html body .tp:hover,html body .offer:hover{transform:translateY(-5px);box-shadow:0 18px 30px -22px rgba(31,30,30,.5)}
html body .vs__c--me,html body .bundle--hot{background:var(--rosa-t)}
html body .tp--all{background:var(--durazno)}
html body .win,html body .phone{border:1px solid var(--tinta);box-shadow:0 44px 60px -38px rgba(31,30,30,.55),0 16px 26px -18px rgba(31,30,30,.35)}
html body .win__bar{background:#F4F1EC;border-bottom:1px solid rgba(31,30,30,.12)}
html body .win__bar i,html body .win__bar span{border:0}
html body .arch{background:var(--rosa-t);border:1px solid var(--tinta);box-shadow:0 44px 60px -40px rgba(31,30,30,.5)}
html body .arch img{filter:none}
html body .polaroid,html body .polaroid *{border-radius:var(--r-new)}
html body .polaroid{box-shadow:0 30px 40px -26px rgba(31,30,30,.5)}
html body #contact{background:var(--rosa-t) !important}
html body #contact .display em{--hl:var(--rosa)}
html body #about{background:var(--crema)}
html body #packs{background:var(--crema)}
html body #por-dentro,html body #faq{background:var(--crema)}
html body .faq details{border-top:1px solid var(--tinta)}
html body .faq details:last-child{border-bottom:1px solid var(--tinta)}
html body .faq summary::after{background:var(--tinta);color:var(--crema)}
html body .bar3__t,html body .tp__web,html body .tp__ph{border-width:1px}
html body .ticks{border-top:1px solid rgba(31,30,30,.25)}
html body .note{background:var(--rosa-t);border:1px solid rgba(31,30,30,.2)}
html body .tpl,html body .card,html body .svc__card,html body .case,html body .reel,html body .brand,html body .kc,html body .sk,html body .hw,html body .tl__card,html body .box{border-width:1px;border-radius:var(--r-new-lg)}
html body .tpl:hover,html body .svc__card:hover,html body .case:hover,html body .kc:hover{transform:translateY(-5px) !important;box-shadow:0 18px 30px -22px rgba(31,30,30,.5)}

/* móvil: etiquetas largas de las cifras del media kit no se salen de la tarjeta */
@media(max-width:480px){html body .kc__lab{flex-wrap:wrap;overflow-wrap:anywhere;letter-spacing:.06em;font-size:.66rem}html body .kc{padding-inline:14px}}
