/* ==========================================================================
   Home pública
   ========================================================================== */

/* --- HERO: nombre editorial que invade la foto vertical --- */
.hero { position: relative; padding-top: clamp(2rem, 6vw, 5rem); padding-bottom: var(--section-y); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1fr; gap: var(--s-6); align-items: end; }

.hero__title { font-size: var(--text-hero); line-height: 0.92; letter-spacing: -0.02em; color: var(--ink); position: relative; z-index: 2; }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: block; transform: translateY(105%); animation: rise var(--dur-slow) var(--ease-out) forwards; }
.hero__title .line:nth-child(2) > span { animation-delay: 90ms; }
.hero__title .line:nth-child(2) { padding-left: clamp(1.5rem, 10vw, 9rem); font-style: italic; }
@keyframes rise { to { transform: none; } }

.hero__lead {
  margin-top: var(--s-5);
  font-family: var(--font-display); font-size: var(--text-xl); font-style: italic;
  color: var(--mocha); max-width: 22ch; line-height: 1.3;
  opacity: 0; animation: fade var(--dur-slow) var(--ease-out) 300ms forwards;
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6);
  opacity: 0; animation: fade var(--dur-slow) var(--ease-out) 420ms forwards;
}
@keyframes fade { to { opacity: 1; } }

.hero__visual { position: relative; margin-inline: calc(var(--gutter) * -1) 0; margin-bottom: var(--s-7); }
.hero__photo {
  aspect-ratio: 4 / 5;
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  clip-path: inset(0 0 0 100%);
  animation: unveil 1100ms var(--ease-in-out) 150ms forwards;
  will-change: transform;
}
@keyframes unveil { to { clip-path: inset(0 0 0 0); } }
.hero__photo > img { transform: scale(1.06) translateY(var(--py, 0)); }
.hero__photo > img.is-loaded { transform: scale(1) translateY(var(--py, 0)); transition: opacity 900ms var(--ease-out), transform 90ms linear; }

.hero__card {
  position: absolute; right: var(--s-4); bottom: calc(var(--s-6) * -1);
  background: var(--porcelain); border-radius: var(--radius-md);
  padding: var(--s-4) var(--s-5);
  box-shadow: var(--shadow-float);
  min-width: 13rem;
  opacity: 0;
  animation: fade var(--dur-slow) var(--ease-out) 900ms forwards, breathe 6s var(--ease-in-out) 1800ms infinite;
}
@keyframes breathe { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.hero__card .small { color: var(--text-muted); }
.hero__card strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; color: var(--ink); line-height: 1.1; margin-top: 2px; }
.hero__card a { display: inline-block; margin-top: var(--s-3); }

.hero__stroke { position: absolute; top: 6%; right: -8%; width: 46%; color: var(--sand-deep); pointer-events: none; z-index: 0; display: none; }
.hero__stroke path { stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw-stroke 2200ms var(--ease-in-out) 500ms forwards; }
@keyframes draw-stroke { to { stroke-dashoffset: 0; } }

.hero__scroll {
  position: absolute; left: var(--gutter); bottom: var(--s-5);
  font-size: var(--text-xs); color: var(--taupe);
  display: none; align-items: center; gap: var(--s-3);
  opacity: 0; animation: fade var(--dur-slow) var(--ease-out) 1300ms forwards;
}
.hero__scroll::before {
  content: ""; width: 1px; height: 2.5rem; background: var(--sand-deep);
  animation: scroll-hint 2.2s var(--ease-in-out) infinite; transform-origin: top;
}
@keyframes scroll-hint {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

@media (min-width: 900px) {
  .hero { padding-top: clamp(3rem, 5vw, 5rem); min-height: calc(100vh - 4.5rem); display: flex; align-items: center; }
  .hero__grid { grid-template-columns: 1.15fr 0.85fr; gap: 0; align-items: center; }
  .hero__copy { position: relative; z-index: 2; padding-right: var(--s-6); }
  .hero__title { margin-right: -22%; }
  .hero__visual { margin-inline: 0; margin-bottom: 0; }
  .hero__photo { border-radius: var(--radius-lg); aspect-ratio: 3 / 4; }
  .hero__card { left: calc(var(--s-7) * -1); right: auto; bottom: 12%; }
  .hero__stroke, .hero__scroll { display: block; }
  .hero__scroll { display: flex; }
}

/* --- INTRO --- */
.intro { padding-block: var(--section-y) var(--s-8); }
.intro__grid { display: grid; gap: var(--s-6); }
.intro__text { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.2; color: var(--ink); max-width: 26ch; }
.intro__text em { color: var(--accent); font-style: italic; }
.intro__aside { color: var(--text-muted); font-size: var(--text-sm); max-width: 30ch; align-self: end; }
@media (min-width: 900px) {
  .intro__grid { grid-template-columns: 2fr 1fr; align-items: end; }
  .intro__aside { justify-self: end; text-align: right; }
}

/* --- CINTA --- */
.ribbon {
  overflow: hidden; border-block: 1px solid var(--line-strong); padding-block: var(--s-4);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ribbon__track { display: flex; gap: var(--s-7); width: max-content; animation: ribbon 40s linear infinite; }
.ribbon:hover .ribbon__track { animation-play-state: paused; }
.ribbon__item {
  font-family: var(--font-display); font-size: var(--text-xl); color: var(--mocha);
  white-space: nowrap; display: flex; align-items: center; gap: var(--s-7);
}
.ribbon__item::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
@keyframes ribbon { to { transform: translateX(-50%); } }

/* --- GALERÍA --- */
.gallery { padding-block: var(--s-8) var(--section-y); }
.gallery__head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }
.gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 34vw; gap: var(--s-2); }
.gallery__item {
  border-radius: var(--radius-sm); overflow: hidden; cursor: zoom-in; display: block; width: 100%;
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--d, 0) * 80ms);
}
.gallery__item.is-visible { opacity: 1; transform: none; }
.gallery__item .ph { width: 100%; height: 100%; }
.gallery__item img { transition: transform 900ms var(--ease-out), opacity var(--dur-slow) var(--ease-out); }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__item figcaption {
  position: absolute; inset: auto 0 0 0; padding: var(--s-4);
  color: var(--ivory); font-family: var(--font-display); font-style: italic; font-size: 1.125rem;
  background: linear-gradient(to top, rgba(35,30,27,0.55), transparent);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-out);
}
.gallery__item:hover figcaption { opacity: 1; transform: none; }
.gallery__item[data-span="tall"] { grid-row: span 2; }
.gallery__item[data-span="wide"] { grid-column: span 2; }
@media (min-width: 700px) {
  .gallery__grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 18vw; gap: var(--s-3); }
  .gallery__item[data-span="big"] { grid-column: span 2; grid-row: span 2; }
}
@media (min-width: 1200px) { .gallery__grid { grid-auto-rows: 220px; } }

/* --- SERVICIOS: índice editorial --- */
.services { background: var(--porcelain); }
.services__head { margin-bottom: var(--s-6); max-width: 40ch; }
.services__head p { margin-top: var(--s-3); color: var(--text-muted); }
.services__layout { display: grid; gap: var(--s-6); }
.services__note { color: var(--text-muted); font-size: var(--text-sm); align-self: end; }
.service-list { border-top: 1px solid var(--line-strong); }
.service-row {
  display: grid; grid-template-columns: 1fr auto;
  grid-template-areas: "name price" "desc desc" "meta cta";
  gap: var(--s-2) var(--s-4);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--line-strong);
  opacity: 0; transform: translateX(-12px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out), padding-left var(--dur-base) var(--ease-out);
  transition-delay: calc(var(--d, 0) * 70ms);
}
.service-row.is-visible { opacity: 1; transform: none; transition-delay: calc(var(--d, 0) * 70ms), calc(var(--d, 0) * 70ms), 0ms; }
.service-row:hover { padding-left: var(--s-4); }
.service-row__name { grid-area: name; font-family: var(--font-display); font-size: var(--text-xl); color: var(--ink); line-height: 1.15; }
.service-row__price { grid-area: price; font-size: var(--text-lg); color: var(--mocha); white-space: nowrap; }
.service-row__desc { grid-area: desc; color: var(--text-muted); font-size: var(--text-sm); max-width: 48ch; }
.service-row__meta { grid-area: meta; font-size: var(--text-sm); color: var(--text-muted); align-self: center; }
.service-row__cta { grid-area: cta; justify-self: end; }
@media (min-width: 900px) {
  .services__layout { grid-template-columns: 1fr 16rem; gap: var(--s-9); align-items: start; }
  .service-row { grid-template-columns: 1fr auto auto; grid-template-areas: "name meta price" "desc desc cta"; }
  .service-row__cta { align-self: end; }
}

/* --- CÓMO TRABAJO --- */
.ethos { position: relative; }
.ethos__grid { display: grid; gap: var(--s-6); }
.ethos__photo { aspect-ratio: 4 / 5; border-radius: var(--radius-lg); }
.ethos h2 { margin-bottom: var(--s-6); }
.ethos__list li { padding-block: var(--s-4); border-top: 1px solid var(--line-strong); }
.ethos__list li:last-child { border-bottom: 1px solid var(--line-strong); }
.ethos__list h3 { font-size: var(--text-lg); margin-bottom: var(--s-1); }
.ethos__list p { color: var(--text-muted); font-size: var(--text-sm); }
@media (min-width: 900px) {
  .ethos__grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--s-9); align-items: center; }
  .ethos__photo { aspect-ratio: 3 / 4; }
}

/* --- CURSOS --- */
.courses { padding-block: var(--section-y); }
.courses__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); max-width: 44ch; }
.courses__head p { color: var(--text-muted); }
.courses__grid { display: grid; gap: var(--s-6); }
.course {
  display: grid; gap: var(--s-4);
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--d, 0) * 120ms);
}
.course.is-visible { opacity: 1; transform: none; }
.course__img { aspect-ratio: 4 / 3; border-radius: var(--radius-md); }
.course__img > img { transition: transform 1200ms var(--ease-out), opacity 900ms var(--ease-out); }
.course:hover .course__img > img { transform: scale(1.03); }
.course__body { display: grid; gap: var(--s-2); }
.course__name { font-family: var(--font-display); font-size: var(--text-xl); color: var(--ink); line-height: 1.15; }
.course__desc { color: var(--text-muted); font-size: var(--text-sm); }
.course__facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--text-sm); color: var(--text); margin-top: var(--s-2); }
.course__facts span { color: var(--text-muted); }
.course__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line-strong); }
.course__price { font-size: 1.375rem; color: var(--ink); }
.course__seats { font-size: var(--text-xs); color: var(--accent); }
.course--full .course__seats { color: var(--taupe); }
.courses__empty { color: var(--text-muted); font-size: var(--text-sm); padding: var(--s-6); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); }
@media (min-width: 700px) { .courses__grid { grid-template-columns: 1fr 1fr; gap: var(--s-7); } }
@media (min-width: 900px) {
  .course { grid-template-columns: 1fr 1.1fr; gap: var(--s-5); align-items: start; }
  .course__img { aspect-ratio: 3 / 4; }
}

/* --- SOBRE BRENDA --- */
.about { background: var(--porcelain); }
.about__grid { display: grid; gap: var(--s-6); }
.about__photo {
  aspect-ratio: 1 / 1;
  border-radius: 50% 50% var(--radius-lg) var(--radius-lg) / 40% 40% var(--radius-lg) var(--radius-lg);
  max-width: 20rem;
}
.about__quote { font-family: var(--font-display); font-size: var(--text-2xl); font-style: italic; line-height: 1.2; color: var(--ink); max-width: 20ch; }
.about__body { margin-top: var(--s-5); }
.about__sign { margin-top: var(--s-5); font-family: var(--font-display); font-size: 1.75rem; font-style: italic; color: var(--accent); }
.about__placeholder {
  display: inline-block; margin-top: var(--s-4);
  font-size: var(--text-xs); color: var(--taupe);
  border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
  padding: var(--s-2) var(--s-3);
}
@media (min-width: 900px) {
  .about__grid { grid-template-columns: 1fr 1.3fr; gap: var(--s-9); align-items: center; }
  .about__photo { max-width: none; }
}

/* --- PREGUNTAS --- */
.faq { background: var(--porcelain); }
.faq__grid { display: grid; gap: var(--s-6); }
.faq__intro p { color: var(--text-muted); margin-top: var(--s-3); font-size: var(--text-sm); }
.faq__intro a { border-bottom: 1px solid var(--line-strong); }
.faq__intro a:hover { border-color: var(--ink); }
.faq__list { border-top: 1px solid var(--line-strong); }
.faq__item { border-bottom: 1px solid var(--line-strong); }
.faq__q {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  width: 100%; text-align: left; padding-block: var(--s-4);
  font-family: var(--font-display); font-size: var(--text-lg); color: var(--ink); line-height: 1.2;
  transition: color var(--dur-fast);
}
.faq__q:hover { color: var(--accent); }
.faq__icon { position: relative; width: 0.875rem; height: 0.875rem; flex: none; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; inset: 0; margin: auto; background: currentColor;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base);
}
.faq__icon::before { width: 100%; height: 1px; }
.faq__icon::after { width: 1px; height: 100%; }
.faq__item.is-open .faq__icon::after { transform: rotate(90deg); opacity: 0; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 420ms var(--ease-in-out); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { color: var(--text-muted); font-size: var(--text-sm); padding-bottom: var(--s-4); max-width: 52ch; }
@media (min-width: 900px) {
  .faq__grid { grid-template-columns: 0.8fr 1.2fr; gap: var(--s-9); align-items: start; }
  .faq__intro { position: sticky; top: 6rem; }
}

/* --- CTA --- */
.cta { background: var(--ink); color: var(--sand); padding-block: var(--section-y); position: relative; overflow: hidden; }
.cta::before {
  content: ""; position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%;
  right: -20vmax; top: -30vmax;
  background: radial-gradient(circle, rgba(122,99,83,0.18), transparent 60%);
  animation: halo 14s var(--ease-in-out) infinite alternate;
  pointer-events: none;
}
@keyframes halo { to { transform: translate(-10%, 15%) scale(1.15); } }
.cta > .container { position: relative; }
.cta h2 { color: var(--ivory); font-size: var(--text-3xl); max-width: 14ch; line-height: 1; }
.cta h2 em { font-style: italic; color: var(--sand-deep); }
.cta p { margin-top: var(--s-4); color: var(--sand-deep); }
.cta .btn--primary { background: var(--ivory); color: var(--ink); margin-top: var(--s-6); }
.cta .btn--primary:hover { background: var(--sand); }
.cta__hours { margin-top: var(--s-6); font-size: var(--text-sm); color: var(--taupe); }
.cta__grid { display: grid; gap: var(--s-6); }
@media (min-width: 900px) {
  .cta__grid { grid-template-columns: 1fr 1fr; align-items: end; }
  .cta__hours { margin-top: 0; justify-self: end; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery__item, .service-row, .course { opacity: 1; transform: none; }
  .cta::before, .ribbon__track, .hero__card { animation: none; }
  .hero__card { opacity: 1; }
}

/* --- Otros servicios ---
   Los que se muestran con foto y precio pero se coordinan por WhatsApp.
   La sección entera se oculta sola si no hay ninguno activo. */
.otros { padding-block: var(--section-y); }
.otros[hidden] { display: none; }
.otros__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); max-width: 44ch; }
.otros__head p { color: var(--text-muted); }
.otros__grid { display: grid; gap: var(--s-5); }
.otro {
  display: grid; gap: var(--s-3);
  opacity: 0; transform: translateY(14px);
  animation: itemUp 620ms var(--ease-out) both;
  animation-delay: calc(var(--d, 0) * 90ms);
}
@keyframes itemUp { to { opacity: 1; transform: none; } }
.otro__img { aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; }
.otro__img > img { transition: transform 1200ms var(--ease-out); }
.otro:hover .otro__img > img { transform: scale(1.03); }
.otro__body { display: grid; gap: var(--s-2); }
.otro__name { font-family: var(--font-display); font-size: var(--text-xl); color: var(--ink); line-height: 1.15; }
.otro__desc { color: var(--text-muted); font-size: var(--text-sm); }
.otro__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
  margin-top: var(--s-2); padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.otro__price { font-size: 1.125rem; color: var(--ink); }
@media (min-width: 640px) { .otros__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }
@media (min-width: 980px) { .otros__grid { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { .otro { animation: none; opacity: 1; transform: none; } }