/* Home (ES): 2026 redesign from Claude Design ("Inicio.dc.html").
   Builds on css/service-landing.css (tokens, type, library block and footer). */
.hm-top { padding-top: var(--svc-header); }
.hm-strip { display: block; width: 100%; height: 18px; }
.hm-wrap { max-width: 1440px; margin: 0 auto; padding-right: var(--svc-gutter); padding-left: var(--svc-gutter); }
.hm-section { padding-top: clamp(64px, 7vw, 96px); padding-bottom: clamp(64px, 7vw, 96px); }
.hm-badge { display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: var(--svc-gradient); box-shadow: 0 10px 22px rgba(41, 9, 166, .25); }
.hm-badge svg { display: block; }

/* Hero */
.hm-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(32px, 5vw, 72px); align-items: center; padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(56px, 7vw, 96px); }
.hm-hero__copy { display: flex; flex-direction: column; gap: 24px; animation: svcRise .7s ease both; }
.hm-hero__heading { display: flex; flex-direction: column; gap: 24px; }
.hm-hero__heading > .svc-eyebrow, .hm-hero__title, .hm-hero__tagline { text-align: right; }
.hm-hero__title { font-size: clamp(40px, 4vw + 16px, 74px); line-height: 1.02; letter-spacing: -.025em; font-weight: 800; color: var(--svc-brand); text-wrap: balance; }
.hm-hero__tagline { margin-top: -8px !important; font-size: clamp(20px, 1vw + 14px, 26px); line-height: 1.3; font-weight: 600; font-style: italic; color: var(--svc-violet); }
.hm-hero__media { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 26px; background: var(--svc-soft); animation: svcRise .8s .1s ease both; }
.hm-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }

.hm-picks { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.svc .hm-pick { display: flex; align-items: center; gap: 18px; padding: 18px 20px 18px 18px; border: 1px solid var(--svc-line); border-radius: 18px; background: #fff; box-shadow: 0 10px 24px rgba(26, 26, 46, .05); color: var(--svc-ink); transition: transform .2s ease, border-color .2s ease; }
.svc .hm-pick:hover { transform: translateY(-3px); border-color: rgba(41, 9, 166, .35); color: var(--svc-ink); }
.hm-pick .hm-badge { width: 64px; height: 64px; border-radius: 19px; }
.hm-pick__text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.hm-pick__text strong { font-size: 20px; font-weight: 800; color: var(--svc-brand); }
.hm-pick__text small { font-size: 13px; font-weight: 600; color: var(--svc-muted); }
.hm-pick > .svc-icon { font-size: 22px; color: var(--svc-brand); }
.hm-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1.5px solid rgba(41, 9, 166, .22); border-radius: 999px; background: #fff; font: inherit; font-size: 15px; font-weight: 700; color: var(--svc-brand); white-space: nowrap; cursor: pointer; }
.hm-more:hover { color: var(--svc-violet); }
.hm-more .svc-icon { font-size: 20px; transition: transform .2s ease; }
.hm-more[aria-expanded="true"] .svc-icon { transform: rotate(180deg); }
.hm-more-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.hm-more-list[hidden] { display: none; }
.svc .hm-more-link { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 16px 8px 10px; border-radius: 14px; background: var(--svc-soft); color: var(--svc-brand); transition: transform .2s ease; }
.svc .hm-more-link:hover { transform: translateY(-2px); color: var(--svc-brand); }
.hm-more-link .hm-badge { width: 48px; height: 48px; border-radius: 12px; }
.hm-more-link .hm-badge .svc-icon { font-size: 21px; }
.hm-more-link > span:nth-child(2) { flex: 1; font-size: 16px; font-weight: 700; }
.hm-more-link > .svc-icon { font-size: 18px; }

/* Mobile hero ("Inicio.dc.html", vista Celular): tighter heading block, bigger title,
   compact class picks and "Más clases" as a text link under them. */
@media (max-width: 899px) {
  .hm-hero__heading { gap: 8px; }
  .hm-hero__title { font-size: clamp(52px, 4vw + 30px, 84px); line-height: .98; letter-spacing: -.03em; }
  .hm-hero__tagline { margin-top: 0 !important; font-size: clamp(18px, .8vw + 14px, 26px); }
  .hm-picks { gap: 10px; margin-top: 0; }
  .svc .hm-pick { gap: 14px; padding: 12px 16px 12px 12px; }
  .hm-pick .hm-badge { width: 52px; height: 52px; border-radius: 16px; }
  .hm-pick .hm-badge svg { width: 30px; height: 30px; }
  .hm-pick__text strong { font-size: 18px; }
  .hm-more { gap: 4px; margin-top: -10px; padding: 0; border: 0; background: none; }
}

/* Phone only: read the three title lines first, then the image, then the class choices. */
@media (max-width: 640px) {
  .hm-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hm-hero__copy { display: contents; animation: none; }
  .hm-hero__heading { order: 1; }
  .hm-hero__media { order: 2; }
  .hm-picks { order: 3; margin-top: 0; }
  .hm-more { order: 4; margin-top: 0; }
  .hm-more-list { order: 5; }
}

/* Ways to learn */
.hm-ways { border-top: 1px solid var(--svc-line); }
.hm-ways .hm-wrap, .hm-classes .hm-wrap { display: flex; flex-direction: column; }
.hm-ways .hm-wrap { gap: 40px; }
.hm-ways__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.hm-way { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.5vw, 32px); border: 1px solid var(--svc-line); border-radius: 18px; background: #fff; box-shadow: 0 10px 24px rgba(26, 26, 46, .05); transition: transform .2s ease, border-color .2s ease; }
.hm-way:hover { transform: translateY(-4px); border-color: rgba(41, 9, 166, .28); }
.hm-way__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hm-way .hm-badge { width: 60px; height: 60px; border-radius: 18px; }
.hm-way .hm-badge .svc-icon { font-size: 30px; }
.hm-way__n { font-size: 14px; font-weight: 800; letter-spacing: .08em; color: var(--svc-violet); }
.hm-way h3 { margin-top: 8px !important; font-size: 22px; line-height: 1.25; font-weight: 800; color: var(--svc-ink); }
.hm-way p { font-size: 16px; line-height: 1.6; color: var(--svc-muted); }
.svc .hm-way__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: auto; padding-top: 8px; font-size: 15px; font-weight: 700; color: var(--svc-blue); }
.hm-way__link .svc-icon { font-size: 18px; }

/* Our classes */
.hm-classes { background: var(--svc-soft); }
.hm-classes .hm-wrap { gap: 32px; }
.hm-langs { display: flex; flex-wrap: wrap; gap: 12px; }
.hm-lang { display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; border: 1.5px solid rgba(41, 9, 166, .22); border-radius: 999px; background: #fff; font: inherit; font-size: 17px; font-weight: 800; color: var(--svc-brand); cursor: pointer; transition: transform .2s ease; }
.hm-lang:hover { transform: translateY(-2px); }
.hm-lang[aria-pressed="true"] { border-color: transparent; background: var(--svc-gradient); color: #fff; }
.hm-offer { display: flex; flex-wrap: wrap; align-items: stretch; gap: 20px; }
.hm-offer[hidden] { display: none; }
.svc .hm-offer__main { flex: 1.4 1 380px; display: flex; flex-direction: column; gap: 16px; padding: clamp(26px, 3vw, 38px); border-radius: 22px; background: var(--svc-gradient); color: #fff; box-shadow: 0 18px 40px rgba(41, 9, 166, .28); transition: transform .2s ease; }
.svc .hm-offer__main:hover { transform: translateY(-4px); color: #fff; }
.hm-offer__main > .hm-icon-glass { display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 20px; background: rgba(255, 255, 255, .16); transform: rotate(-6deg); }
.hm-offer__main h3 { margin-top: 8px !important; font-size: clamp(24px, 1.2vw + 14px, 32px); line-height: 1.15; font-weight: 800; color: #fff; }
.hm-offer__main p { font-size: 16px; line-height: 1.55; color: #fff; }
.svc .hm-offer__side { flex: 1 1 300px; display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.5vw, 32px); border: 1px solid var(--svc-line); border-radius: 18px; background: #fff; box-shadow: 0 10px 24px rgba(26, 26, 46, .05); transition: transform .2s ease, border-color .2s ease; }
.svc .hm-offer__side:hover { transform: translateY(-4px); border-color: rgba(41, 9, 166, .28); }
.hm-offer__side .hm-badge { width: 52px; height: 52px; border-radius: 16px; transform: rotate(5deg); }
.hm-offer__side .hm-badge .svc-icon { font-size: 27px; }
.hm-offer__side h3 { margin-top: 8px !important; font-size: 22px; line-height: 1.25; font-weight: 800; color: var(--svc-ink); }
.hm-offer__side p { font-size: 16px; line-height: 1.55; color: var(--svc-muted); }
.hm-checks { display: flex; flex-direction: column; gap: 8px; }
.hm-checks li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--svc-brand); }
.hm-offer__main .hm-checks li { color: #fff; }
.hm-checks .svc-icon { font-size: 18px; }

/* Practice (library block from service-landing.css) */
.hm-practice { padding-bottom: clamp(64px, 7vw, 96px); }

/* Blog */
.hm-blog { padding-bottom: clamp(64px, 7vw, 96px); }
.hm-blog__panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(24px, 4vw, 56px); border-radius: 26px; background: var(--svc-soft); }
.hm-blog__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hm-blog__copy .svc-h2 { color: var(--svc-brand); }
.hm-blog__copy .svc-lead { max-width: 52ch; }
.hm-blog__copy .svc-btn--ghost { min-height: 48px; margin-top: 8px; padding: 0 24px; font-size: 15px; }
.hm-blog__copy .svc-btn--ghost .svc-icon { font-size: 18px; }
.hm-blog__art { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px; background: var(--svc-gradient); container-type: inline-size; }
.hm-blog__back { position: absolute; left: 22%; top: 14%; width: 52%; height: 70%; border-radius: 16px; background: rgba(255, 255, 255, .22); transform: rotate(-8deg); }
.hm-blog__page { position: absolute; left: 26%; top: 12%; display: flex; flex-direction: column; gap: 3cqi; width: 52%; height: 74%; padding: 5cqi; border-radius: 16px; background: #fff; box-shadow: 0 24px 50px rgba(26, 26, 46, .28); transform: rotate(3deg); }
.hm-blog__kicker { align-self: flex-start; padding: 1cqi 2.6cqi; border-radius: 999px; background: var(--svc-soft); font-size: clamp(10px, 2.6cqi, 14px); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--svc-violet); }
.hm-blog__headline { font-size: clamp(20px, 7.4cqi, 44px); line-height: 1; letter-spacing: -.02em; font-weight: 800; color: var(--svc-brand); }
.hm-blog__lines { display: flex; flex-direction: column; gap: 2.2cqi; }
.hm-blog__lines i, .hm-blog__tags i { display: block; height: 10px; border-radius: 999px; background: var(--svc-line); }
.hm-blog__tags { display: flex; gap: 2cqi; margin-top: auto; }
.hm-blog__tags i:first-child { width: 28%; background: var(--svc-blue); }
.hm-blog__tags i:last-child { width: 18%; background: var(--svc-soft); }
.hm-blog__chip { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 1.6cqi; }
.hm-blog__chip--es { right: 7%; top: 10%; transform: rotate(8deg); }
.hm-blog__chip--en { left: 7%; bottom: 9%; transform: rotate(-8deg); }
.hm-blog__tile { display: grid; place-items: center; width: 17cqi; height: 17cqi; border-radius: 5cqi; background: #fff; box-shadow: 0 16px 32px rgba(26, 26, 46, .28); }
.hm-blog__chip--en .hm-blog__tile { border-radius: 5cqi 5cqi 5cqi 1.2cqi; }
.hm-blog__tile svg { width: 9.5cqi; height: auto; }
.hm-blog__hi { font-size: 6.6cqi; line-height: 1; font-weight: 800; letter-spacing: -.02em; background: var(--svc-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hm-blog__code { padding: .6cqi 2cqi; border-radius: 999px; background: #fff; font-size: clamp(9px, 2.4cqi, 13px); font-weight: 800; letter-spacing: .12em; color: var(--svc-brand); }

@media (prefers-reduced-motion: reduce) {
  .hm-hero__copy, .hm-hero__media { animation: none; }
}