/* ============================================================
   Academia Pilar Garijo — landing única de inscripción
   Todo visible en un viewport, sin scroll (en pantallas de escritorio
   normales). Reutiliza variables/tipografía/componentes de academia.css.
   Escritorio: columna izquierda sobre foto oscurecida del rótulo
   "pilar garijo" (texto claro); tarjeta granate a la derecha sobre taupe.
   Móvil: sin foto, fondo taupe limpio con texto oscuro.
   Título "la Academia": bloque granate sólido con el texto en menta.
   ============================================================ */

html, body { height: 100%; }
body.solo { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--taupe); color: var(--ink); overflow-x: hidden; }

/* ---- Foto de fondo a la izquierda (tras el texto), oscurecida para
       que resalte el rótulo "pilar garijo", fundida hacia la derecha ---- */
body.solo::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  /* a altura completa y alineada a la izquierda. El PNG ya lleva el
     tinte #74655e y el borde derecho desvanecido a transparente
     (alpha), así que su límite no se ve a ningún ancho y el rótulo
     "pilar garijo" queda entero a la izquierda */
  background: url("../assets/fotos/hero-nombre.png") left center / auto 100% no-repeat;
}
/* capas: velo oscuro sobre la foto (izq) + fundido a taupe (dcha e inferior) */
body.solo::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, var(--taupe) 0%, color-mix(in srgb, var(--taupe) 55%, transparent) 9%, transparent 18%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--ink-soft) 46%, transparent) 0%,
      color-mix(in srgb, var(--ink-soft) 26%, transparent) 26%,
      transparent 46%);
}

.solo-header {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: clamp(14px, 2.2vw, 22px) var(--gutter);
}
.solo-header .ah-logo { display: inline-flex; align-items: baseline; gap: 12px; }
.solo-header .ah-logo img { height: clamp(36px, 4.2vw, 48px); width: auto; }
.solo-header .ah-logo .lbl { font-family: var(--font-label); font-size: 10px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: var(--ink-soft); }
.solo-header .ah-lang { display: inline-flex; border: 1px solid color-mix(in oklab, var(--ink) 22%, var(--taupe)); border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--taupe) 70%, transparent); backdrop-filter: blur(4px); }
.solo-header .ah-lang button { background: transparent; border: none; cursor: pointer; padding: 6px 11px; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--ink); opacity: .65; }
.solo-header .ah-lang button.on { background: var(--ink); color: var(--cream); opacity: 1; }

.solo-main {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  padding: clamp(6px, 1.4vw, 18px) var(--gutter);
  min-height: 0;
}
.solo-shell {
  width: 100%; max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4.5vw, 70px); align-items: center;
}
.solo-intro h1 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.15; letter-spacing: -.02em; margin: 16px 0 0; color: var(--ink); }
.solo-intro h1 em {
  font-style: italic; font-weight: 400;
  background: var(--ink); color: var(--mint);
  padding: .04em .3em; border-radius: 8px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.solo-intro p { font-size: clamp(14.5px, 1.15vw, 17px); font-weight: 500; max-width: 40ch; margin-top: 16px; color: var(--ink); line-height: 1.55; }
.solo-intro .tag { color: var(--ink-soft); }
.solo-intro .tag::before { background: var(--mint); opacity: 1; }

.solo-card {
  background: var(--ink); color: var(--cream);
  border-radius: 18px; border-top: 5px solid var(--mint);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.55);
  padding: clamp(22px, 2.6vw, 34px) clamp(24px, 2.8vw, 36px);
  display: flex; flex-direction: column; gap: clamp(14px, 1.7vw, 18px);
  max-height: calc(100dvh - 110px);
  overflow-y: auto;
}
.solo-card > form { display: flex; flex-direction: column; gap: clamp(14px, 1.7vw, 18px); }
.solo-card h2 { font-size: clamp(19px, 1.7vw, 23px); margin: 0 0 2px; }
.solo-card .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.solo-card .field { gap: 7px; }
.solo-card .field label { font-family: var(--font-label); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-soft); }
.solo-card .req { color: #e2a49b; font-family: var(--font-body); }
.solo-card .req-note { font-size: 11.5px; color: color-mix(in oklab, var(--cream) 55%, var(--ink)); margin: -8px 0 0; }
.solo-card .field .hint { font-size: 11.5px; color: color-mix(in oklab, var(--cream) 55%, var(--ink)); margin-top: -1px; }
.solo-card .field.invalid .hint { display: none; }
.solo-card .field input {
  font-family: var(--font-body); font-size: 15.5px; font-weight: 400; color: var(--ink);
  background: var(--cream-bg); border: 1.5px solid transparent; border-radius: 10px;
  padding: 12px 14px; outline: none; transition: border-color .2s, background .2s; width: 100%; box-sizing: border-box;
}
.solo-card .field input::placeholder { color: color-mix(in oklab, var(--ink) 34%, var(--white)); }
.solo-card .field input:hover { border-color: color-mix(in oklab, var(--ink) 25%, var(--white)); }
.solo-card .field input:focus { border-color: var(--mint); background: var(--white); }
.solo-card .field.invalid input { border-color: #b3352c; background: color-mix(in oklab, #b3352c 6%, var(--white)); }
.solo-card .field .error { display: none; font-size: 12px; color: #e2a49b; margin-top: 1px; }
.solo-card .field.invalid .error { display: block; }
.solo-card .consent { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.45; color: var(--cream-soft); cursor: pointer; padding-top: 2px; }
.solo-card .consent input { margin-top: 3px; flex: none; width: 16px; height: 16px; accent-color: var(--mint); }
.solo-card .consent a { text-decoration: underline; color: var(--cream); }
.solo-card.invalid-consent .consent { color: #e2a49b; }
.solo-card .cta { justify-content: center; width: 100%; padding-top: 16px; padding-bottom: 16px; }
.solo-card .cta.cta--fill { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.solo-card .cta.cta--fill:hover { background: var(--white); }
.solo-card .form-note { font-size: 12px; color: color-mix(in oklab, var(--cream) 55%, var(--ink)); text-align: center; margin: 0; }
.solo-card .form-success { display: none; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 14px 0; }
.solo-card .form-success .seal { width: 48px; height: 48px; border: 1px solid var(--cream); color: var(--mint); border-radius: 50%; display: grid; place-items: center; }
.solo-card .form-success h2 { font-size: 20px; }
.solo-card .form-success p { color: var(--cream-soft); font-size: 14px; max-width: 30ch; margin: 0; }
.solo-card.sent form { display: none; }
.solo-card.sent .form-success { display: flex; }

@media (max-width: 480px) {
  .solo-card .field-row { grid-template-columns: 1fr; }
}

.solo-footer {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  padding: clamp(10px, 1.4vw, 14px) var(--gutter); border-top: 1px solid color-mix(in oklab, var(--ink) 20%, var(--taupe));
  font-size: 12px; color: var(--ink-soft); text-align: center;
}
.solo-footer a { color: inherit; opacity: .85; }
.solo-footer a:hover { opacity: 1; }

/* logo: por defecto (móvil, fondo taupe claro) el logo oscuro */
.solo-header .ah-logo .logo-light { display: none; }

@media (max-width: 860px) {
  html, body.solo { height: auto; }
  body.solo { min-height: 100dvh; }
  /* en móvil sin foto: fondo taupe limpio */
  body.solo::before, body.solo::after { display: none; }
  .solo-main { padding-top: 14px; padding-bottom: 14px; align-items: flex-start; }
  .solo-shell { grid-template-columns: 1fr; text-align: left; }
  .solo-card { max-height: none; }
}

/* En escritorio la columna izquierda va sobre foto oscura → texto claro */
@media (min-width: 861px) {
  .solo-intro h1 { color: var(--cream); }
  .solo-intro p { color: var(--cream); }
  .solo-intro .tag { color: var(--cream-soft); }
  .solo-header .ah-logo .lbl { color: var(--cream-soft); }
  .solo-header .ah-logo .logo-dark { display: none; }
  .solo-header .ah-logo .logo-light { display: inline; }
}