/* She Is Studio · biblioteca de templates (estilo Template Club, branding aesthetic) */
body.aes .sc-hero { padding: 80px 0 60px; }
.sc-g { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; } @media (max-width: 900px) { .sc-g { grid-template-columns: 1fr; } }
body.aes .sc-hero h1 { font-size: clamp(48px, 6.8vw, 92px); margin: 16px 0 14px; }
.sc-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 26px; max-width: 520px; } .sc-nums div { background: #fff; border-radius: 18px; padding: 12px; text-align: center; box-shadow: 0 0 0 1px rgba(17,17,17,.07); } .sc-nums b { display: block; font: 400 32px/1 "Instrument Serif", serif; } .sc-nums span { font-size: 12px; color: #6B6661; }
.sc-vis { position: relative; min-height: 420px; display: grid; place-items: center; }
.sc-stack { position: relative; width: 300px; height: 360px; } .sc-stack .tp-cover { position: absolute; width: 230px; aspect-ratio: 4/5; border-radius: 18px; box-shadow: 0 30px 60px rgba(17,17,17,.16); }
.sc-stack .tp-s.s1 { position: absolute; inset: 14%; width: auto; left: 14%; top: 14%; transform: none; }
.sc-stack .c1 { left: 0; top: 30px; transform: rotate(-8deg); } .sc-stack .c2 { left: 40px; top: 0; z-index: 2; } .sc-stack .c3 { left: 80px; top: 50px; transform: rotate(8deg); }
.sc-marq { background: #111; color: #F7F4EF; overflow: hidden; padding: 14px 0; } .sc-marq div { display: flex; gap: 22px; width: max-content; animation: scm 28s linear infinite; font: italic 400 22px "Instrument Serif", serif; text-transform: lowercase; } .sc-marq i { color: #E59AB9; font-style: normal; } @keyframes scm { to { transform: translateX(-50%); } }
.sc-sec { padding: 90px 0; }
.tc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; } @media (max-width: 900px) { .tc-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .tc-grid { grid-template-columns: 1fr; } }
.tc { background: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 0 0 1px rgba(17,17,17,.07); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .3s, opacity .8s ease var(--d,0s); } .tc:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(17,17,17,.07), 0 26px 50px rgba(17,17,17,.1); }
.tc-b { padding: 16px 20px 20px; display: grid; gap: 6px; } body.aes .tc-b h3 { margin: 0; font-size: 28px; } .tc-b p { margin: 0; color: #6B6661; font-size: 14px; } .tc-lock { font-size: 12.5px; font-weight: 600; color: #6B6661; } .tc-open { justify-self: start; margin-top: 6px; }
.sc-steps { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 860px) { .sc-steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .sc-steps { grid-template-columns: 1fr; } }
.sc-steps li { background: #fff; border-radius: 22px; padding: 22px; box-shadow: 0 0 0 1px rgba(17,17,17,.07); } .sc-steps b { font: 400 34px/1 "Instrument Serif", serif; color: #E59AB9; } body.aes .sc-steps h3 { margin: 10px 0 6px; font-size: 24px; } .sc-steps p { margin: 0; color: #6B6661; font-size: 14.5px; }
.sc-plan { background: #111; color: #F7F4EF; border-radius: 32px; padding: 40px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; } @media (max-width: 860px) { .sc-plan { grid-template-columns: 1fr; padding: 26px; } }
body.aes .sc-plan .tag { background: rgba(247,244,239,.08) !important; color: #F7F4EF !important; } .sc-plan ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; } .sc-plan li::before { content: "✓  "; color: #E59AB9; font-weight: 800; }
.sc-price { background: #F7F4EF; color: #111; border-radius: 24px; padding: 26px; display: grid; gap: 10px; text-align: center; } .sc-price .pr { font: 400 64px/1 "Instrument Serif", serif; } .sc-price .pr small { font: 500 15px Inter; color: #6B6661; } .sc-try { font-size: 14px; color: #6B6661; }
.tp-cover { position: relative; aspect-ratio: 4/3; background: color-mix(in srgb, var(--c1) 70%, #fff); overflow: hidden; }
.tp-s { position: absolute; width: 46%; aspect-ratio: 4/5; border-radius: 10px; background: var(--c1); box-shadow: 0 14px 30px rgba(17,17,17,.12); display: grid; place-content: center; text-align: center; color: var(--c2); padding: 10px; }
.tp-s.s1 { left: 27%; top: 12%; z-index: 3; } .tp-s.s2 { left: 10%; top: 20%; transform: rotate(-8deg); opacity: .85; } .tp-s.s3 { left: 44%; top: 20%; transform: rotate(8deg); opacity: .85; }
.tp-s i { font: italic 400 15px "Instrument Serif", serif; } .tp-s b { font: 400 26px/1 "Instrument Serif", serif; }
.tp-cover em { position: absolute; right: 10px; bottom: 10px; font: 600 11px Inter, sans-serif; background: #fff; color: #111; border-radius: 99px; padding: 5px 10px; font-style: normal; }
.sc-stack .tp-cover { aspect-ratio: 4/5; } .sc-stack .tp-s.s1 { width: auto; inset: 14%; }
.tc-lock[hidden] { display: none; }
.tp-s.im { padding: 0; overflow: hidden; } .tp-s.im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-stack .tp-s.im { inset: 0; border-radius: 18px; }
.sc-stack .tp-s.im { width: 100%; height: 100%; left: 0; top: 0; aspect-ratio: auto; box-shadow: none; }
.sc-ed { background: #fff; border-radius: 32px; padding: 40px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; box-shadow: 0 0 0 1px rgba(17,17,17,.07); }
@media (max-width: 860px) { .sc-ed { grid-template-columns: 1fr; padding: 26px; } }
body.aes .sc-ed h2 { font-size: clamp(32px, 4vw, 50px); margin: 12px 0 14px; }
.sc-ed-l { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; color: #6B6661; } .sc-ed-l li::before { content: "✓  "; color: #E59AB9; font-weight: 800; }
.sc-ed-vis { position: relative; min-height: 340px; }
.sc-ed-vis > div { position: absolute; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 50px -18px rgba(17,17,17,.35); }
.sc-ed-vis img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-ed-vis .e1 { left: 0; top: 20px; width: 42%; aspect-ratio: 4/5; transform: rotate(-5deg); }
.sc-ed-vis .e2 { left: 30%; top: 0; width: 40%; aspect-ratio: 4/5; background: #FBE3EC; display: grid; place-items: center; align-content: center; gap: 8px; z-index: 2; } .sc-ed-vis .e2 b { font: italic 400 34px "Instrument Serif", serif; } .sc-ed-vis .e2 small { font-size: 11px; color: #6B6661; }
.sc-ed-vis .e3 { right: 0; top: 40px; width: 36%; aspect-ratio: 9/16; transform: rotate(5deg); } .sc-ed-vis .e3 b { position: absolute; left: 0; right: 0; top: 18px; text-align: center; color: #fff; font: 600 10px Inter; letter-spacing: .14em; text-transform: uppercase; }
.sh-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; } @media (max-width: 760px) { .sh-faq { grid-template-columns: 1fr; } }
.sh-faq details { background: #fff; border-radius: 18px; padding: 18px 20px; box-shadow: 0 0 0 1px rgba(17,17,17,.07); } .sh-faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; } .sh-faq summary::-webkit-details-marker { display: none; } .sh-faq summary::after { content: "+"; font-size: 22px; line-height: 1; transition: transform .25s; } .sh-faq details[open] summary::after { transform: rotate(45deg); } .sh-faq p { margin: 10px 0 0; color: #6B6661; }