/* TutorSupra Spanish · additions on top of the TutorSupra styles */

/* temporary pictures until the page is approved */
.hero-photo{background-image:url('https://picsum.photos/seed/supra-spanish-hero/1800/1200')}
.cta{background:linear-gradient(90deg,#00354ce8,#00475fd9),url('https://picsum.photos/seed/supra-spanish-cta/1800/900') center/cover}

/* three programs instead of four */
@media(min-width:1001px){.program-grid{grid-template-columns:repeat(3,1fr)}}

/* why Supra Spanish */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:30px}
.why-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 22px;box-shadow:0 8px 24px #103e5210}
.why-card .ico{font-size:1.7rem;line-height:1}
.why-card h3{font:700 1.15rem 'Playfair Display',Georgia,serif;color:var(--navy);margin:12px 0 8px}
.why-card p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.5}

/* pricing on a light background */
.pricing{background:#f6f9f8}
.price-card .price-sub{margin:-8px 0 14px;color:var(--muted);font-size:.9rem}
.guarantee{margin-top:26px;display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid #e8c65c;border-left:5px solid var(--gold);border-radius:12px;padding:16px 18px}
.guarantee b{display:block;color:var(--navy);margin-bottom:2px}
.guarantee p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.5}
.guarantee .ico{font-size:1.5rem;line-height:1}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px;counter-reset:step}
.step{position:relative;padding:26px 22px 22px;border-radius:16px;background:#ffffff14;border:1px solid #ffffff2e}
.step::before{counter-increment:step;content:counter(step);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:linear-gradient(120deg,#e8c65c,var(--gold));color:#112f40;font-weight:800;margin-bottom:12px}
.step h3{margin:0 0 6px;font:700 1.15rem 'Playfair Display',Georgia,serif;color:#fff}
.step p{margin:0;color:#d4e6ec;font-size:.95rem;line-height:1.5}
.how{background:linear-gradient(160deg,#00374d,#00475f 55%,#0b5873);color:#fff}
.how h2{color:#fff}

/* FAQ */
.faq-list{max-width:820px;margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:6px 24px}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list details:last-child{border-bottom:0}
.faq-list summary{cursor:pointer;list-style:none;padding:18px 30px 18px 0;font-weight:700;color:var(--navy);position:relative}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:'+';position:absolute;right:0;top:14px;font-size:1.4rem;color:#b98921}
.faq-list details[open] summary::after{content:'–'}
.faq-list details p{margin:0 0 16px;color:var(--muted);line-height:1.6}

@media(max-width:1000px){.why-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.why-grid,.steps{grid-template-columns:1fr}.faq-list{padding:4px 16px}}