:root {
  --ink: #1f1300;
  --brown: #6b5900;
  --muted: #8a7530;
  --pink: #e64980;
  --pink-dark: #c2255c;
  --yellow: #ffd43b;
  --yellow-light: #fff3bf;
  --cream: #fff9ec;
  --line: #f3ebcf;
  --shadow: 0 8px 28px rgba(31, 19, 0, 0.1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--cream); font-family: "Bricolage Grotesque", sans-serif; }
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }

main { min-height: 100vh; background: linear-gradient(180deg, var(--yellow) 0, #ffe066 230px, var(--cream) 500px); }
.hero, .content { width: min(calc(100% - 32px), 500px); margin: 0 auto; }
.hero { display: flex; flex-direction: column; align-items: center; padding: 42px 0 26px; text-align: center; }
.hola { display: grid; place-items: center; width: 106px; height: 106px; border: 4px solid white; border-radius: 50%; background: var(--yellow); box-shadow: var(--shadow); color: var(--ink); font: 700 43px "Caveat", cursive; animation: float 4s ease-in-out infinite; }
.eyebrow { margin: 18px 0 3px; color: var(--brown); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1 { max-width: 100%; margin: 0; font-size: clamp(33px, 9.5vw, 48px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.tagline { max-width: 390px; margin: 8px 0 0; color: var(--brown); font-weight: 600; }
.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: white; box-shadow: 0 3px 10px rgba(31,19,0,.12); color: var(--pink); font-size: 12px; font-weight: 800; transition: transform .2s, color .2s; }
.socials a:hover { color: var(--pink-dark); transform: translateY(-2px); }
.content { display: grid; gap: 22px; padding-bottom: 48px; }
.trial-card { display: flex; align-items: center; gap: 13px; padding: 16px 18px; border: 2px solid var(--pink); border-radius: 18px; background: white; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.trial-card:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(31,19,0,.14); }
.trial-card > span:nth-child(2) { min-width: 0; flex: 1; }
.trial-card strong, .trial-card small { display: block; }
.trial-card small { margin-top: 2px; color: var(--muted); font-size: 13px; }
.trial-icon { font-size: 26px; }
.arrow { color: var(--pink); font-size: 21px; }
.script-heading { margin: 0; color: var(--brown); font: 700 29px "Caveat", cursive; }
.centered { text-align: center; }
.class-list, .quotes, .faq-list { display: grid; gap: 12px; }
.class-card, .panel, details { overflow: hidden; border: 2px solid #ffe066; border-radius: 22px; background: white; box-shadow: 0 4px 16px rgba(31,19,0,.08); }
.class-toggle { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 14px; width: 100%; padding: 18px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.class-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--yellow-light); font-size: 26px; }
.class-title strong, .class-title small, .price strong, .price span { display: block; }
.class-title strong { font-size: 17px; }
.class-title small { margin-top: 3px; color: var(--muted); font-size: 13px; font-weight: 600; }
.price { text-align: right; }
.price strong { color: var(--pink); font-size: 18px; }
.chevron { color: #c9b970; font-size: 19px; transition: transform .25s; }
.class-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.class-details { padding: 0 18px 20px; }
.class-tagline { margin: 0 0 14px; color: var(--brown); font-size: 14px; font-style: italic; font-weight: 600; }
.class-details ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.class-details li { display: grid; grid-template-columns: 16px 1fr; color: #40350a; font-size: 14px; line-height: 1.45; }
.class-details li::before { content: "✓"; color: var(--pink); font-weight: 800; }
.class-details h3 { margin: 18px 0 9px; color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.packages { display: grid; gap: 8px; }
.packages > div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--cream); }
.packages .featured { border-color: var(--yellow); background: var(--yellow-light); }
.packages span:last-child { text-align: right; }
.packages strong, .packages small { display: block; }
.packages strong { font-size: 14px; }
.packages span:last-child strong { color: var(--pink); }
.packages small { margin-top: 2px; color: var(--muted); font-size: 12px; }
.book-button { display: block; margin-top: 16px; padding: 14px; border-radius: 14px; background: var(--yellow); box-shadow: 0 4px 12px rgba(255,212,59,.45); font-weight: 800; text-align: center; transition: background .2s, transform .2s; }
.book-button:hover { background: #fcc419; transform: translateY(-1px); }
.booking-link.is-disabled { cursor: not-allowed; opacity: .65; }
.booking-link.is-disabled:hover { transform: none; }
.panel { padding: 22px; border-color: transparent; }
.about p { margin: 7px 0 0; color: #40350a; font-size: 14.5px; line-height: 1.65; }
figure { margin: 0; padding: 18px; border-radius: 18px; background: var(--yellow-light); }
.stars { color: var(--pink); letter-spacing: 2px; }
blockquote { margin: 8px 0; color: #40350a; font-size: 14px; font-style: italic; line-height: 1.55; }
figcaption { color: var(--muted); font-size: 13px; font-weight: 700; }
details { border: 0; border-radius: 16px; }
summary { display: flex; justify-content: space-between; gap: 12px; padding: 16px 18px; cursor: pointer; font-size: 14.5px; font-weight: 700; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "⌄"; color: var(--pink); font-size: 18px; transition: transform .2s; }
details[open] summary::after { transform: rotate(180deg); }
details p { margin: 0; padding: 0 18px 16px; color: var(--brown); font-size: 14px; line-height: 1.55; }
footer { padding-top: 8px; color: #a99648; font-size: 12px; text-align: center; }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media (max-width: 390px) { .hero, .content { width: calc(100% - 24px); } .class-toggle { grid-template-columns: 46px 1fr auto; gap: 10px; padding: 15px; } .class-icon { width: 46px; height: 46px; } .class-title { min-width: 0; } .class-title strong { font-size: 15px; } .trial-card { padding-inline: 14px; } }